Improve item width size estimation heuristic support (#1025)

krassowski · web-flow · commit 5f70fe18fbf8 · 2023-11-26T15:27:11.000Z
The issue was that:
- (a) heuristic did not account for eliding
- (b) styles limiting the width were not applied when
  the widest item size was calculated after temporarily
  re-parenting to `&lt;body&gt;`
- (c) there was no limit on ellipsis width (now its 50% of label)
- (d) the label size limit maybe was too low, it got increased by 50px
diff --git a/packages/completion-theme/style/index.css b/packages/completion-theme/style/index.css
@@ -23,13 +23,17 @@ body[data-lsp-completer-layout] .jp-Completer-docpanel {
   flex-shrink: 0;
 }
 
-body[data-lsp-completer-layout] .jp-Completer {
-  --lsp-completer-max-label-width: 350px;
+body[data-lsp-completer-layout] {
+  /* Important to use selectors which work on body so that size estimation
+  works when the list items get temporarily attached to the body */
+  --lsp-completer-max-label-width: 400px;
   --lsp-completer-max-detail-width: 200px;
 }
 
 body[data-lsp-completer-layout] .jp-Completer-match {
-  max-width: var(--lsp-completer-max-label-width);
+  max-width: calc(
+    var(--lsp-completer-max-label-width) + var(--lsp-completer-max-detail-width)
+  );
   overflow-x: hidden;
   white-space: nowrap;
   display: block;
@@ -80,7 +84,7 @@ body[data-lsp-completer-layout='detail-below'] .jp-Completer-match {
   height: var(--lsp-completer-label-height);
 }
 
-.lsp-completer .jp-Completer-item .jp-Completer-typeExtended {
+body[data-lsp-completer-layout] .jp-Completer-item .jp-Completer-typeExtended {
   max-width: var(--lsp-completer-max-detail-width);
   min-height: 50px;
   overflow-x: hidden;
@@ -102,6 +106,8 @@ body[data-lsp-completer-layout] mark.lsp-elide:first-child {
   flex-shrink: 1;
   /* always reserve small space to fit the ellipsis */
   min-width: 20px;
+  /* a reasonably long limit on the space taken by the elipsis */
+  max-width: calc(var(--lsp-completer-max-label-width) / 2);
 }
 
 body[data-lsp-completer-layout] .lsp-elide-wrapper {
@@ -118,16 +124,12 @@ body[data-lsp-completer-layout='detail-below'] .jp-Completer-typeExtended {
   position: relative;
   top: -2px;
   overflow: hidden;
-  max-width: calc(
-    var(--lsp-completer-max-label-width) + var(--lsp-completer-max-detail-width)
-  );
+  max-width: var(--lsp-completer-max-label-width);
 }
 
 body[data-lsp-completer-layout='detail-below'] .jp-Completer-match {
   overflow: hidden;
-  max-width: calc(
-    var(--lsp-completer-max-label-width) + var(--lsp-completer-max-detail-width)
-  );
+  max-width: var(--lsp-completer-max-label-width);
 }
 
 body[data-lsp-completer-layout='detail-below']
diff --git a/packages/jupyterlab-lsp/src/features/completion/renderer.ts b/packages/jupyterlab-lsp/src/features/completion/renderer.ts
@@ -185,8 +185,18 @@ export class LSPCompletionRenderer
   }
 
   itemWidthHeuristic(item: CompletionItem): number {
-    const labelSize = item.label.replace(/<(\/)?mark>/g, '').length;
+    let labelSize = item.label.replace(/<(\/)?mark>/g, '').length;
     const extraTextSize = this.getExtraInfo(item).length;
+    const type = item.type.toLowerCase();
+    if (type === 'file' || type === 'path') {
+      // account for elision
+      const parts = item.label.split(/<\/mark>/g);
+      const lastPart = parts[parts.length - 1];
+      const proposedElipsed = lastPart.length + 3;
+      if (proposedElipsed < labelSize) {
+        labelSize = proposedElipsed;
+      }
+    }
     if (this.options.settings.composite.layout === 'side-by-side') {
       // in 'side-by-side' take the sum
       return labelSize + extraTextSize;
