[wip] Add completion configurer

.gitignore

@@ -113,6 +113,6 @@ atest/output/
 junit.xml
 coverage/
 .vscode/
-_schema.d.ts
+_*.d.ts
 _build
 .virtual_documents/

packages/completion-theme/package.json

@@ -33,10 +33,11 @@
     "lab:link": "jupyter labextension link . --no-build"
   },
   "devDependencies": {
-    "react": "*",
-    "@jupyterlab/ui-components": "~2.2.0"
+    "react": "*"
+  },
+  "peerDependencies": {
+    "react": "*"
   },
-  "peerDependencies": {},
   "jupyterlab": {
     "extension": true,
     "schemaDir": "schema"

packages/completion-theme/src/index.ts

@@ -1,75 +1,83 @@
 import { kernelIcon, LabIcon } from '@jupyterlab/ui-components';
-import {
-  Dialog,
-  ICommandPalette,
-  IThemeManager,
-  showDialog
-} from '@jupyterlab/apputils';
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+
 import {
   ICompletionIconSet,
   ICompletionTheme,
   ILSPCompletionThemeManager,
   PLUGIN_ID,
   COMPLETER_THEME_PREFIX,
-  KernelKind
+  KernelKind,
+  TCompletionLabIcons
 } from './types';
-import { render_themes_list } from './about';
-import '../style/index.css';
+
+const RE_ICON_THEME_CLASS = /jp-icon[^" ]+/g;
+const GREYSCALE_CLASS = 'jp-icon4';
 
 export class CompletionThemeManager implements ILSPCompletionThemeManager {
-  protected current_icons: Map<string, LabIcon>;
+  protected current_icons: TCompletionLabIcons;
   protected themes: Map<string, ICompletionTheme>;
   private current_theme_id: string;
   private icons_cache: Map<string, LabIcon>;
+  private color_scheme: string;
 
-  constructor(protected themeManager: IThemeManager) {
+  constructor() {
     this.themes = new Map();
     this.icons_cache = new Map();
-    themeManager.themeChanged.connect(this.update_icons_set, this);
   }
 
-  protected is_theme_light() {
-    const current = this.themeManager.theme;
-    if (!current) {
-      // assume true by default
-      return true;
-    }
-    return this.themeManager.isLight(current);
+  theme_ids() {
+    return [...this.themes.keys()];
   }
 
-  get_iconset(theme: ICompletionTheme): Map<keyof ICompletionIconSet, LabIcon> {
-    const icons_sets = theme.icons;
-    const dark_mode_and_dark_supported =
-      !this.is_theme_light() && typeof icons_sets.dark !== 'undefined';
-    const set: ICompletionIconSet = dark_mode_and_dark_supported
-      ? icons_sets.dark
-      : icons_sets.light;
-    const icons: Map<keyof ICompletionIconSet, LabIcon> = new Map();
-    const mode = this.is_theme_light() ? 'light' : 'dark';
-    for (let [completion_kind, svg] of Object.entries(set)) {
-      let name =
-        'lsp:' + theme.id + '-' + completion_kind.toLowerCase() + '-' + mode;
-      let icon: LabIcon;
-      if (this.icons_cache.has(name)) {
-        icon = this.icons_cache.get(name);
-      } else {
-        icon = new LabIcon({
-          name: name,
-          svgstr: svg
-        });
+  get_current_theme_id() {
+    return this.current_theme_id;
+  }
+
+  get_theme(id: string) {
+    return this.themes.get(id);
+  }
+
+  async get_icons(
+    theme: ICompletionTheme,
+    color_scheme: string
+  ): Promise<TCompletionLabIcons> {
+    const icons: TCompletionLabIcons = new Map();
+
+    for (const [completion_kind, raw] of Object.entries(
+      await theme.icons.svg()
+    )) {
+      const name = `lsp:${theme.id}-${completion_kind}-${color_scheme}`.toLowerCase();
+      let icon = this.icons_cache.get(name);
+      let svgstr = raw;
+      if (color_scheme === 'greyscale') {
+        svgstr = svgstr.replace(RE_ICON_THEME_CLASS, GREYSCALE_CLASS);
+      }
+      if (icon == null) {
+        icon = new LabIcon({ name, svgstr });
         this.icons_cache.set(name, icon);
       }
       icons.set(completion_kind as keyof ICompletionIconSet, icon);
     }
     return icons;
   }
 
-  protected update_icons_set() {
+  get_color_scheme() {
+    return this.color_scheme;
+  }
+
+  set_color_scheme(color_scheme: string) {
+    this.color_scheme = color_scheme;
+  }
+
+  protected async update_icons_set() {
     if (this.current_theme === null) {
       return;
     }
-    this.current_icons = this.get_iconset(this.current_theme);
+    this.current_icons = await this.get_icons(
+      this.current_theme,
+      this.color_scheme
+    );
   }
 
   get_icon(type: string): LabIcon {
@@ -81,8 +89,8 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager {
       type =
         type.substring(0, 1).toUpperCase() + type.substring(1).toLowerCase();
     }
-    if (this.current_icons.has(type)) {
-      return this.current_icons.get(type).bindprops(options);
+    if (this.current_icons.has(type as any)) {
+      return this.current_icons.get(type as any).bindprops(options);
     }
     if (type === KernelKind) {
       return kernelIcon;
@@ -94,7 +102,7 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager {
     return COMPLETER_THEME_PREFIX + this.current_theme_id;
   }
 
-  set_theme(id: string | null) {
+  async set_theme(id: string | null) {
     if (this.current_theme_id) {
       document.body.classList.remove(this.current_theme_class);
     }
@@ -105,7 +113,7 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager {
     }
     this.current_theme_id = id;
     document.body.classList.add(this.current_theme_class);
-    this.update_icons_set();
+    await this.update_icons_set();
   }
 
   protected get current_theme(): ICompletionTheme | null {
@@ -124,50 +132,13 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager {
       );
     }
     this.themes.set(theme.id, theme);
-    this.update_icons_set();
-  }
-
-  /**
-   * Display the registered themes in a dialog,
-   * both for the user to know what they can choose from,
-   * and for the developer to quickly check how the icons
-   * from each theme would look rendered.
-   */
-  display_themes() {
-    showDialog({
-      title: 'LSP Completer Themes',
-      body: render_themes_list({
-        themes: [...this.themes.values()],
-        current: this.current_theme,
-        get_set: this.get_iconset.bind(this)
-      }),
-      buttons: [Dialog.okButton()]
-    }).catch(console.warn);
   }
 }
 
-const LSP_CATEGORY = 'Language server protocol';
-
 export const COMPLETION_THEME_MANAGER: JupyterFrontEndPlugin<ILSPCompletionThemeManager> = {
   id: PLUGIN_ID,
-  requires: [IThemeManager, ICommandPalette],
-  activate: (
-    app,
-    themeManager: IThemeManager,
-    commandPalette: ICommandPalette
-  ) => {
-    let manager = new CompletionThemeManager(themeManager);
-    const command_id = 'lsp:completer-about-themes';
-    app.commands.addCommand(command_id, {
-      label: 'Display the completer themes',
-      execute: () => {
-        manager.display_themes();
-      }
-    });
-    commandPalette.addItem({
-      category: LSP_CATEGORY,
-      command: command_id
-    });
+  activate: app => {
+    let manager = new CompletionThemeManager();
     return manager;
   },
   provides: ILSPCompletionThemeManager,

packages/completion-theme/src/types.ts

@@ -51,21 +51,21 @@ export interface ICompletionIconSet extends requiredIcons {
 
 export interface ILicenseInfo {
   /**
-   * Licence name.
+   * License name.
    */
   name: string;
   /**
-   * Abbreviation of the licence name;
+   * SDPX identifer of the license.
    */
-  abbreviation: string;
+  spdx: string;
   /**
    * The copyright holder/owner name.
    */
   licensor: string;
   /**
-   * Link to the full licence text.
+   * URL of the full license text.
    */
-  link: string;
+  url: string;
 }
 
 export interface ICompletionTheme {
@@ -85,15 +85,11 @@ export interface ICompletionTheme {
     /**
      * Short name of the license of the icons included.
      */
-    licence: ILicenseInfo;
+    license: ILicenseInfo;
     /**
-     * The version to be used in the light mode.
+     * The icons as SVG strings, keyed by completion kind.
      */
-    light: ICompletionIconSet;
-    /**
-     * The version to be used in the dark mode.
-     */
-    dark?: ICompletionIconSet;
+    svg(): Promise<ICompletionIconSet>;
     /**
      * Icon properties to be set on each of the icons.
      * NOTE: setting className here will not work, as
@@ -106,16 +102,29 @@ export interface ICompletionTheme {
   };
 }
 
+export type TCompletionLabIcons = Map<keyof ICompletionIconSet, LabIcon>;
+
 export interface ILSPCompletionThemeManager {
-  get_icon(type: string): LabIcon.ILabIcon | null;
+  get_icon(type: string): LabIcon | null;
 
   set_theme(theme_id: string | null): void;
 
+  get_theme(theme_id: string): ICompletionTheme;
+
+  get_current_theme_id(): string;
+
+  set_color_scheme(scheme_id: string): void;
+
+  get_color_scheme(): string;
+
   register_theme(theme: ICompletionTheme): void;
 
-  get_iconset(
-    theme: ICompletionTheme
-  ): Map<keyof ICompletionIconSet, LabIcon.ILabIcon>;
+  get_icons(
+    theme: ICompletionTheme,
+    color_scheme: string
+  ): Promise<TCompletionLabIcons>;
+
+  theme_ids(): string[];
 }
 
 export const ILSPCompletionThemeManager = new Token<ILSPCompletionThemeManager>(