Merge pull request #893 from krassowski/elide-filepaths

Implement eliding for paths/files

Author: krassowski

CHANGELOG.md

@@ -6,6 +6,7 @@
   - implement jump target selector and jump to references ([#739])
   - implement settings UI using native JupyterLab 3.3 UI ([#778])
   - add option to show hover tooltip automatically ([#864], thanks @yamaton)
+  - implement eliding for long paths/files in completer ([#893])
 - bug fixes:
   - use correct websocket URL if configured as different from base URL ([#820], thanks @MikeSem)
   - clean up all completer styles when completer feature is disabled ([#829]).
@@ -61,6 +62,7 @@
 [#860]: https://github.com/jupyter-lsp/jupyterlab-lsp/pull/860
 [#864]: https://github.com/jupyter-lsp/jupyterlab-lsp/pull/864
 [#882]: https://github.com/jupyter-lsp/jupyterlab-lsp/pull/882
+[#893]: https://github.com/jupyter-lsp/jupyterlab-lsp/pull/893
 
 ### `@krassowski/jupyterlab-lsp 3.10.1` (2022-03-21)
 

packages/completion-theme/style/index.css

@@ -25,7 +25,7 @@
 }
 
 .lsp-completer.jp-Completer {
-  --lsp-completer-max-label-width: 300px;
+  --lsp-completer-max-label-width: 350px;
   --lsp-completer-max-detail-width: 200px;
 }
 
@@ -93,6 +93,22 @@ body[data-lsp-completer-layout='detail-below'] .jp-Completer-match {
   text-overflow: clip;
 }
 
+.lsp-completer mark.lsp-elide:first-child {
+  display: inline-block;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;
+  /* stretch to as much space as possible */
+  flex-shrink: 1;
+  /* always reserve small space to fit the ellipsis */
+  min-width: 20px;
+}
+
+.lsp-completer .lsp-elide-wrapper {
+  display: flex;
+}
+
 body[data-lsp-completer-layout='detail-below'] .jp-Completer-typeExtended {
   grid-area: detail;
   text-align: left;

packages/jupyterlab-lsp/src/features/completion/renderer.ts

@@ -8,7 +8,7 @@ import { Signal } from '@lumino/signaling';
 import { ILSPLogConsole } from '../../tokens';
 
 import { CompletionLabIntegration } from './completion';
-import { LazyCompletionItem } from './item';
+import { LazyCompletionItem, IExtendedCompletionItem } from './item';
 
 export interface ICompletionData {
   item: LazyCompletionItem;
@@ -31,6 +31,7 @@ export class LSPCompletionRenderer
 
   protected ITEM_PLACEHOLDER_CLASS = 'lsp-detail-placeholder';
   protected EXTRA_INFO_CLASS = 'jp-Completer-typeExtended';
+  protected LABEL_CLASS = 'jp-Completer-match';
 
   constructor(protected options: LSPCompletionRenderer.IOptions) {
     super();
@@ -113,6 +114,7 @@ export class LSPCompletionRenderer
     if (extraText) {
       const extraElement = li.getElementsByClassName(this.EXTRA_INFO_CLASS)[0];
       extraElement.textContent = extraText;
+      this._elideMark(item, li);
     }
   }
 
@@ -136,13 +138,50 @@ export class LSPCompletionRenderer
       this.visibilityObserver.observe(li);
       // TODO: build custom li from ground up
       this.updateExtraInfo(lsp_item, li);
+      this._elideMark(lsp_item, li);
     } else {
       this.updateExtraInfo(item, li);
+      this._elideMark(lsp_item, li);
     }
 
     return li;
   }
 
+  private _elideMark(item: IExtendedCompletionItem, li: HTMLLIElement) {
+    if (!item || !item.type) {
+      return;
+    }
+    const type = item.type.toLowerCase();
+    if (type !== 'file' && type !== 'path') {
+      // do not elide for non-paths.
+      return;
+    }
+    const labelElement = li.getElementsByClassName(this.LABEL_CLASS)[0];
+    const originalHTMLLabel = labelElement.childNodes;
+    let hasMark = false;
+    for (const node of originalHTMLLabel) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node as Element;
+        const text = element.textContent;
+        if (element.tagName === 'MARK' && text) {
+          const elidableElement = document.createElement('bdo');
+          elidableElement.setAttribute('dir', 'ltr');
+          elidableElement.textContent = text;
+          elidableElement.title = text;
+          element.replaceChildren(elidableElement);
+          element.classList.add('lsp-elide');
+          hasMark = true;
+        }
+      }
+    }
+    if (hasMark) {
+      const wrapper = document.createElement('div');
+      wrapper.className = 'lsp-elide-wrapper';
+      wrapper.replaceChildren(...labelElement.childNodes);
+      labelElement.replaceChildren(wrapper);
+    }
+  }
+
   createDocumentationNode(item: LazyCompletionItem): HTMLElement {
     // note: not worth trying to `fetchDocumentation()` as this is not
     // invoked if documentation is empty (as of jlab 3.2)