Implement details-below layout

Author: krassowski

packages/jupyterlab-lsp/schema/completion.json

@@ -83,6 +83,13 @@
       "enum": ["detail", "type", "source", "auto"],
       "description": "What to display next to the completion label, one of: 'detail', 'type', 'source', 'auto'. The default 'auto' will display whichever information is available."
     },
+    "layout": {
+      "title": "Completer layout",
+      "default": "side-by-side",
+      "type": "string",
+      "enum": ["detail-below", "side-by-side"],
+      "description": "Layout of the completer, one of: 'detail-below', 'side-by-side'"
+    },
     "typesMap": {
       "title": "Mapping of custom kernel types to valid completion kind names",
       "description": "Mapping used for icon selection. The kernel types (keys) are case-insensitive. Accepted values are the names of CompletionItemKind and 'Kernel' literal. The defaults aim to provide good initial experience for Julia, Python and R kernels.",

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

@@ -121,6 +121,10 @@ export class CompletionLabIntegration implements IFeatureLabIntegration {
       completionThemeManager.set_icons_overrides(
         this.settings.composite.typesMap
       );
+      if (!settings.composite.disable) {
+        document.body.dataset.lspCompleterLayout =
+          this.settings.composite.layout;
+      }
       if (this.current_completion_handler) {
         this.model.settings.caseSensitive =
           this.settings.composite.caseSensitive;

packages/theme-material/style/completer.css

@@ -9,3 +9,52 @@
 .lsp-completer-theme-material .jp-Completer-item.jp-mod-active svg path {
   fill: white;
 }
+
+body[data-lsp-completer-layout='detail-below'] .jp-Completer-item {
+  --lsp-completer-label-height: 24px;
+  --lsp-completer-detail-height: 20px;
+  --lsp-completer-icon-width: 16px;
+  height: var(--lsp-completer-label-height);
+  display: grid;
+  grid-template-areas:
+    'icon label'
+    'detail detail';
+  grid-template-columns: min-content 1fr;
+}
+
+body[data-lsp-completer-layout='detail-below']
+  .jp-Completer-item.jp-mod-active {
+  height: calc(
+    var(--lsp-completer-detail-height) + var(--lsp-completer-label-height)
+  );
+}
+
+body[data-lsp-completer-layout='detail-below'] .jp-Completer-icon {
+  grid-area: icon;
+  width: var(--lsp-completer-icon-width);
+}
+
+body[data-lsp-completer-layout='detail-below'] .jp-Completer-match {
+  grid-area: label;
+  overflow: hidden;
+  height: var(--lsp-completer-label-height);
+}
+
+body[data-lsp-completer-layout='detail-below'] .jp-Completer-typeExtended {
+  grid-area: detail;
+  text-align: left;
+  padding-left: calc(var(--lsp-completer-icon-width) + 8px);
+  height: var(--lsp-completer-detail-height);
+  line-height: var(--lsp-completer-detail-height);
+  display: none;
+  position: relative;
+  top: -2px;
+  overflow: hidden;
+  max-width: 500px;
+}
+
+body[data-lsp-completer-layout='detail-below']
+  .jp-Completer-item.jp-mod-active
+  .jp-Completer-typeExtended {
+  display: block;
+}