all tabbar icons now rendered by blended react/phosphor vdom elements

requires the changes in the phosphorjs/phosphor#437 PR

packages/application/package.json

@@ -42,7 +42,6 @@
     "@jupyterlab/rendermime": "^2.0.0-alpha.1",
     "@jupyterlab/rendermime-interfaces": "^2.0.0-alpha.1",
     "@jupyterlab/services": "^5.0.0-alpha.1",
-    "@jupyterlab/ui-components": "^2.0.0-alpha.1",
     "@phosphor/algorithm": "^1.2.0",
     "@phosphor/application": "^1.7.0",
     "@phosphor/commands": "^1.7.0",

packages/application/src/shell.ts

@@ -5,8 +5,6 @@ import { Debouncer } from '@jupyterlab/coreutils';
 
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 
-import { DockPanelSvg, TabBarSvg } from '@jupyterlab/ui-components';
-
 import { ArrayExt, find, IIterator, iter, toArray } from '@phosphor/algorithm';
 
 import { PromiseDelegate, Token } from '@phosphor/coreutils';
@@ -179,9 +177,7 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
     let topHandler = (this._topHandler = new Private.PanelHandler());
     let bottomPanel = (this._bottomPanel = new BoxPanel());
     let hboxPanel = new BoxPanel();
-    let dockPanel = (this._dockPanel = new DockPanelSvg({
-      kind: 'dockPanelBar'
-    }));
+    let dockPanel = (this._dockPanel = new DockPanel());
     MessageLoop.installMessageHook(dockPanel, this._dockChildHook);
 
     let hsplitPanel = new SplitPanel();
@@ -1062,8 +1058,7 @@ namespace Private {
      * Construct a new side bar handler.
      */
     constructor() {
-      this._sideBar = new TabBarSvg<Widget>({
-        kind: 'sideBar',
+      this._sideBar = new TabBar<Widget>({
         insertBehavior: 'none',
         removeBehavior: 'none',
         allowDeselect: true

packages/application/style/index.css

@@ -5,7 +5,6 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@phosphor/widgets/style/index.css');
-@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@jupyterlab/docregistry/style/index.css');
 @import url('~font-awesome/css/font-awesome.min.css');

packages/application/tsconfig.json

@@ -23,9 +23,6 @@
     },
     {
       "path": "../services"
-    },
-    {
-      "path": "../ui-components"
     }
   ]
 }

packages/apputils/src/mainareawidget.ts

@@ -174,6 +174,7 @@ export class MainAreaWidget<T extends Widget = Widget> extends Widget
     this.title.mnemonic = content.title.mnemonic;
     this.title.iconClass = content.title.iconClass;
     this.title.iconLabel = content.title.iconLabel;
+    this.title.iconPass = content.title.iconPass;
     this.title.caption = content.title.caption;
     this.title.className = content.title.className;
     this.title.dataset = content.title.dataset;
@@ -193,6 +194,7 @@ export class MainAreaWidget<T extends Widget = Widget> extends Widget
     content.title.mnemonic = this.title.mnemonic;
     content.title.iconClass = this.title.iconClass;
     content.title.iconLabel = this.title.iconLabel;
+    content.title.iconPass = this.title.iconPass;
     content.title.caption = this.title.caption;
     content.title.className = this.title.className;
     content.title.dataset = this.title.dataset;

packages/csvviewer-extension/src/index.ts

@@ -130,6 +130,7 @@ function activateCsv(
     if (ft) {
       widget.title.iconClass = ft.iconClass!;
       widget.title.iconLabel = ft.iconLabel!;
+      widget.title.iconPass = ft.iconPass!;
     }
     // Set the theme for the new widget.
     widget.content.style = style;
@@ -209,6 +210,7 @@ function activateTsv(
     if (ft) {
       widget.title.iconClass = ft.iconClass!;
       widget.title.iconLabel = ft.iconLabel!;
+      widget.title.iconPass = ft.iconPass!;
     }
     // Set the theme for the new widget.
     widget.content.style = style;

packages/docregistry/package.json

@@ -43,6 +43,7 @@
     "@jupyterlab/rendermime": "^2.0.0-alpha.1",
     "@jupyterlab/rendermime-interfaces": "^2.0.0-alpha.1",
     "@jupyterlab/services": "^5.0.0-alpha.1",
+    "@jupyterlab/ui-components": "^2.0.0-alpha.1",
     "@phosphor/algorithm": "^1.2.0",
     "@phosphor/coreutils": "^1.3.1",
     "@phosphor/disposable": "^1.3.0",

packages/docregistry/src/default.ts

@@ -389,6 +389,12 @@ export abstract class ABCWidgetFactory<
     // Create the new widget
     const widget = this.createNewWidget(context, source);
 
+    const ft = this._fileTypes[0];
+    if (ft) {
+      widget.title.iconClass = ft.iconClass;
+      widget.title.iconLabel = ft.iconLabel;
+      widget.title.iconPass = ft.iconPass;
+    }
     // Add toolbar items
     let items: DocumentRegistry.IToolbarItem[];
     if (this._toolbarFactory) {

packages/docregistry/src/mimedocument.ts

@@ -287,6 +287,7 @@ export class MimeDocumentFactory extends ABCWidgetFactory<MimeDocument> {
 
     content.title.iconClass = ft.iconClass;
     content.title.iconLabel = ft.iconLabel;
+    content.title.iconPass = ft.iconPass;
 
     const widget = new MimeDocument({ content, context });
 

packages/docregistry/src/registry.ts

@@ -1,8 +1,6 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { Contents, Kernel } from '@jupyterlab/services';
-
 import {
   ArrayExt,
   ArrayIterator,
@@ -34,6 +32,22 @@ import { IModelDB } from '@jupyterlab/observables';
 
 import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
 
+import { Contents, Kernel } from '@jupyterlab/services';
+
+import {
+  fileIcon,
+  folderIcon,
+  imageIcon,
+  JLIcon,
+  jsonIcon,
+  markdownIcon,
+  notebookIcon,
+  pythonIcon,
+  rKernelIcon,
+  spreadsheetIcon,
+  yamlIcon
+} from '@jupyterlab/ui-components';
+
 import { TextModelFactory } from './default';
 
 /**
@@ -1166,6 +1180,8 @@ export namespace DocumentRegistry {
      */
     readonly iconLabel?: string;
 
+    readonly iconPass?: JLIcon.IPhosphor;
+
     /**
      * The content type of the new file.
      */
@@ -1184,7 +1200,7 @@ export namespace DocumentRegistry {
     name: 'default',
     extensions: [],
     mimeTypes: [],
-    iconClass: 'jp-MaterialIcon jp-FileIcon',
+    iconPass: fileIcon.phosphor({ kind: 'dockPanelBar', center: true }),
     iconLabel: '',
     contentType: 'file',
     fileFormat: 'text'
@@ -1235,7 +1251,7 @@ export namespace DocumentRegistry {
     extensions: ['.ipynb'],
     contentType: 'notebook',
     fileFormat: 'json',
-    iconClass: 'jp-MaterialIcon jp-NotebookIcon'
+    iconPass: notebookIcon.phosphor({ kind: 'dockPanelBar', center: true })
   };
 
   /**
@@ -1247,7 +1263,7 @@ export namespace DocumentRegistry {
     extensions: [],
     mimeTypes: ['text/directory'],
     contentType: 'directory',
-    iconClass: 'jp-MaterialIcon jp-FolderIcon'
+    iconPass: folderIcon.phosphor({ kind: 'dockPanelBar', center: true })
   };
 
   /**
@@ -1262,56 +1278,56 @@ export namespace DocumentRegistry {
       displayName: 'Markdown File',
       extensions: ['.md'],
       mimeTypes: ['text/markdown'],
-      iconClass: 'jp-MaterialIcon jp-MarkdownIcon'
+      iconPass: markdownIcon.phosphor({ kind: 'dockPanelBar', center: true })
     },
     {
       name: 'python',
       displayName: 'Python File',
       extensions: ['.py'],
       mimeTypes: ['text/x-python'],
-      iconClass: 'jp-MaterialIcon jp-PythonIcon'
+      iconPass: pythonIcon.phosphor({ kind: 'dockPanelBar', center: true })
     },
     {
       name: 'json',
       displayName: 'JSON File',
       extensions: ['.json'],
       mimeTypes: ['application/json'],
-      iconClass: 'jp-MaterialIcon jp-JsonIcon'
+      iconPass: jsonIcon.phosphor({ kind: 'dockPanelBar', center: true })
     },
     {
       name: 'csv',
       displayName: 'CSV File',
       extensions: ['.csv'],
       mimeTypes: ['text/csv'],
-      iconClass: 'jp-MaterialIcon jp-SpreadsheetIcon'
+      iconPass: spreadsheetIcon.phosphor({ kind: 'dockPanelBar', center: true })
     },
     {
       name: 'tsv',
       displayName: 'TSV File',
       extensions: ['.tsv'],
       mimeTypes: ['text/csv'],
-      iconClass: 'jp-MaterialIcon jp-SpreadsheetIcon'
+      iconPass: spreadsheetIcon.phosphor({ kind: 'dockPanelBar', center: true })
     },
     {
       name: 'r',
       displayName: 'R File',
       mimeTypes: ['text/x-rsrc'],
       extensions: ['.r'],
-      iconClass: 'jp-MaterialIcon jp-RKernelIcon'
+      iconPass: rKernelIcon.phosphor({ kind: 'dockPanelBar', center: true })
     },
     {
       name: 'yaml',
       displayName: 'YAML File',
       mimeTypes: ['text/x-yaml', 'text/yaml'],
       extensions: ['.yaml', '.yml'],
-      iconClass: 'jp-MaterialIcon jp-YamlIcon'
+      iconPass: yamlIcon.phosphor({ kind: 'dockPanelBar', center: true })
     },
     {
       name: 'svg',
       displayName: 'Image',
       mimeTypes: ['image/svg+xml'],
       extensions: ['.svg'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconPass: imageIcon.phosphor({ kind: 'dockPanelBar', center: true }),
       fileFormat: 'base64'
     },
     {
@@ -1320,38 +1336,39 @@ export namespace DocumentRegistry {
       mimeTypes: ['image/tiff'],
       extensions: ['.tif', '.tiff'],
       iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconPass: imageIcon.phosphor({ kind: 'dockPanelBar', center: true }),
       fileFormat: 'base64'
     },
     {
       name: 'jpeg',
       displayName: 'Image',
       mimeTypes: ['image/jpeg'],
       extensions: ['.jpg', '.jpeg'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconPass: imageIcon.phosphor({ kind: 'dockPanelBar', center: true }),
       fileFormat: 'base64'
     },
     {
       name: 'gif',
       displayName: 'Image',
       mimeTypes: ['image/gif'],
       extensions: ['.gif'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconPass: imageIcon.phosphor({ kind: 'dockPanelBar', center: true }),
       fileFormat: 'base64'
     },
     {
       name: 'png',
       displayName: 'Image',
       mimeTypes: ['image/png'],
       extensions: ['.png'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconPass: imageIcon.phosphor({ kind: 'dockPanelBar', center: true }),
       fileFormat: 'base64'
     },
     {
       name: 'bmp',
       displayName: 'Image',
       mimeTypes: ['image/bmp'],
       extensions: ['.bmp'],
-      iconClass: 'jp-MaterialIcon jp-ImageIcon',
+      iconPass: imageIcon.phosphor({ kind: 'dockPanelBar', center: true }),
       fileFormat: 'base64'
     }
   ];

packages/docregistry/style/index.css

@@ -5,6 +5,7 @@
 
 /* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
 @import url('~@phosphor/widgets/style/index.css');
+@import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 
 @import url('./base.css');

packages/docregistry/tsconfig.json

@@ -29,6 +29,9 @@
     },
     {
       "path": "../services"
+    },
+    {
+      "path": "../ui-components"
     }
   ]
 }

packages/imageviewer-extension/src/index.ts

@@ -107,6 +107,7 @@ function activate(
     if (types.length > 0) {
       widget.title.iconClass = types[0].iconClass;
       widget.title.iconLabel = types[0].iconLabel;
+      widget.title.iconPass = types[0].iconPass;
     }
   });
 

packages/markdownviewer/src/widget.ts

@@ -309,6 +309,7 @@ export class MarkdownViewerFactory extends ABCWidgetFactory<MarkdownDocument> {
     const content = new MarkdownViewer({ context, renderer });
     content.title.iconClass = this._fileType.iconClass;
     content.title.iconLabel = this._fileType.iconLabel;
+    content.title.iconPass = this._fileType.iconPass;
     const widget = new MarkdownDocument({ content, context });
 
     return widget;

packages/notebook-extension/src/index.ts

@@ -582,10 +582,14 @@ function activateNotebookHandler(
 
   let id = 0; // The ID counter for notebook panels.
 
+  let ft = app.docRegistry.getFileType('notebook');
+
   factory.widgetCreated.connect((sender, widget) => {
     // If the notebook panel does not have an ID, assign it one.
     widget.id = widget.id || `notebook-${++id}`;
-    widget.title.icon = NOTEBOOK_ICON_CLASS;
+    widget.title.iconClass = ft.iconClass;
+    widget.title.iconLabel = ft.iconLabel;
+    widget.title.iconPass = ft.iconPass;
     // Notify the widget tracker if restore data needs to update.
     widget.context.pathChanged.connect(() => {
       void tracker.save(widget);

packages/ui-components/src/icon/jlicon.tsx

@@ -44,7 +44,7 @@ export class JLIcon {
     title,
     tag = 'div',
     ...propsStyle
-  }: JLIcon.IProps): HTMLElement | null {
+  }: JLIcon.IProps = {}): HTMLElement | null {
     const classNames = classes(
       className,
       propsStyle ? iconStyle(propsStyle) : ''
@@ -63,17 +63,19 @@ export class JLIcon {
     return container;
   }
 
-  phosphor(props: JLIcon.IProps): JLIcon.IPhosphor {
+  phosphor(props: JLIcon.IProps = {}): JLIcon.IPhosphor {
     return {
-      render: (host: HTMLElement) =>
-        ReactDOM.render(<this.react {...props} />, host)
+      render: (host: HTMLElement, innerProps: JLIcon.IProps = {}) => {
+        const comb = { ...props, ...innerProps };
+        return ReactDOM.render(<this.react {...comb} />, host);
+      }
     };
   }
 
   protected _initReact() {
     const component = React.forwardRef(
       (
-        { className, title, tag = 'div', ...propsStyle }: JLIcon.IProps,
+        { className, title, tag = 'div', ...propsStyle }: JLIcon.IProps = {},
         ref: React.RefObject<HTMLDivElement>
       ) => {
         const Tag = tag;