finished replacing override with better fix

packages/application/src/shell.ts

@@ -5,7 +5,7 @@ import { Debouncer } from '@jupyterlab/coreutils';
 
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 
-import { TabBarSvg } from '@jupyterlab/ui-components';
+import { DockPanelSvg, TabBarSvg } from '@jupyterlab/ui-components';
 
 import { ArrayExt, find, IIterator, iter, toArray } from '@phosphor/algorithm';
 
@@ -178,7 +178,10 @@ export class LabShell extends Widget implements JupyterFrontEnd.IShell {
     let bottomPanel = (this._bottomPanel = new BoxPanel());
     let topPanel = (this._topPanel = new Panel());
     let hboxPanel = new BoxPanel();
-    let dockPanel = (this._dockPanel = new DockPanel());
+    let dockPanel = (this._dockPanel = new DockPanelSvg({
+      kind: 'dockPanelBar',
+      skipbad: true
+    }));
     let headerPanel = (this._headerPanel = new Panel());
     MessageLoop.installMessageHook(dockPanel, this._dockChildHook);
 
@@ -1022,45 +1025,6 @@ namespace Private {
     });
   }
 
-  // class SideBar extends TabBar<Widget> {
-  //   /**
-  //    * A message handler invoked on an `'update-request'` message.
-  //    */
-  //   protected onUpdateRequest(msg: Message): void {
-  //     super.onUpdateRequest(msg);
-  //
-  //     for (let itab in this.contentNode.children) {
-  //       let tab = this.contentNode.children[itab];
-  //       let title = this.titles[itab];
-  //       let iconNode = tab.children ? (tab.children[0] as HTMLElement) : null;
-  //
-  //       if (iconNode && iconNode.children.length < 1) {
-  //         // add the svg node, if not already present
-  //         defaultIconRegistry.icon({
-  //           name: title.iconClass,
-  //           container: iconNode,
-  //           center: true,
-  //           kind: 'sideBar'
-  //         });
-  //       }
-  //     }
-  //   }
-  // }
-  //
-  // class SideBarRenderer extends TabBar.Renderer {
-  //   /**
-  //    * Render the icon element for a tab.
-  //    *
-  //    * @param data - The data to use for rendering the tab.
-  //    *
-  //    * @returns A virtual element representing the tab icon.
-  //    */
-  //   renderIcon(data: TabBar.IRenderData<any>): VirtualElement {
-  //     let className = this.createIconClass(data);
-  //     return h.div({ className });
-  //   }
-  // }
-
   /**
    * A class which manages a side bar and related stacked panel.
    */
@@ -1071,6 +1035,7 @@ namespace Private {
     constructor(side: string) {
       this._sideBar = new TabBarSvg<Widget>({
         kind: 'sideBar',
+        skipbad: true,
         insertBehavior: 'none',
         removeBehavior: 'none',
         allowDeselect: true

packages/docregistry/src/mimedocument.ts

@@ -285,6 +285,7 @@ export class MimeDocumentFactory extends ABCWidgetFactory<MimeDocument> {
       dataType: this._dataType
     });
 
+    content.title.icon = ft.iconName;
     content.title.iconClass = ft.iconClass;
     content.title.iconLabel = ft.iconLabel;
 

packages/htmlviewer-extension/src/index.tsx

@@ -22,7 +22,7 @@ import {
 /**
  * The CSS class for an HTML5 icon.
  */
-const CSS_ICON_CLASS = 'jp-HTMLIcon';
+const CSS_ICON_CLASS = 'jp-Html5Icon';
 
 /**
  * Command IDs used by the plugin.

packages/ui-components/src/blueprint.tsx

@@ -60,7 +60,7 @@ export const InputGroup = (props: IInputGroupProps & CommonProps<any>) => {
         className={combineClassNames(props.className, 'jp-InputGroup')}
         rightElement={
           <div className="jp-InputGroupAction">
-            <Icon className="jp-Icon" icon={props.rightIcon} />
+            <BPIcon className={'jp-Icon'} icon={props.rightIcon} />
           </div>
         }
       />
@@ -74,13 +74,6 @@ export const InputGroup = (props: IInputGroupProps & CommonProps<any>) => {
   );
 };
 
-export const Icon = (props: IIconProps) => (
-  <BPIcon
-    {...props}
-    className={combineClassNames(props.className, 'jp-Icon')}
-  />
-);
-
 export const Collapse = (props: ICollapseProps & CommonProps<any>) => (
   <BPCollapse {...props} />
 );

packages/ui-components/src/icon/icon.ts

@@ -1,6 +1,57 @@
-export type iconKindType =
-  | 'listing'
-  | 'sideBar'
-  | 'statusBar'
-  | 'tab'
-  | 'unset';
+/**
+ * To add an icon to the defaultIconRegistry requires two lines of code:
+ *   1. import the icon's .svg
+ *
+ *   2. add a relevant entry to _defaultIcons
+ */
+
+/* tslint:disable */
+import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
+
+// filetype icons
+import html5Svg from '../../style/icons/filetype/html5.svg';
+
+// statusbar icons
+import kernelSvg from '../../style/icons/statusbar/kernel.svg';
+import lineFormSvg from '../../style/icons/statusbar/line-form.svg';
+import notTrustedSvg from '../../style/icons/statusbar/not-trusted.svg';
+import statusBarSvg from '../../style/icons/statusbar/status-bar.svg';
+import terminalSvg from '../../style/icons/statusbar/terminal.svg';
+import trustedSvg from '../../style/icons/statusbar/trusted.svg';
+
+// sidebar icons
+import buildSvg from '../../style/icons/sidebar/build.svg'; // originally ic-build-24px.svg
+import extensionSvg from '../../style/icons/sidebar/extension.svg'; // originally ic-extension-24px.svg
+import folderSvg from '../../style/icons/sidebar/folder.svg'; // originally ic-folder-24px.svg
+import paletteSvg from '../../style/icons/sidebar/palette.svg'; // originally ic-palette-24px.svg
+import runningSvg from '../../style/icons/sidebar/running.svg'; // originally stop-circle.svg
+import tabSvg from '../../style/icons/sidebar/tab.svg'; // originally ic-tab-24px.svg
+
+export const defaultIcons: ReadonlyArray<Icon.IModel> = [
+  { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
+
+  { name: 'html5', svg: html5Svg },
+
+  { name: 'kernel', svg: kernelSvg },
+  { name: 'line-form', svg: lineFormSvg },
+  { name: 'not-trusted', svg: notTrustedSvg },
+  { name: 'status-bar', svg: statusBarSvg },
+  { name: 'terminal', svg: terminalSvg },
+  { name: 'trusted', svg: trustedSvg },
+
+  { name: 'build', svg: buildSvg },
+  { name: 'extension', svg: extensionSvg },
+  { name: 'folder', svg: folderSvg },
+  { name: 'palette', svg: paletteSvg },
+  { name: 'running', svg: runningSvg },
+  { name: 'tab', svg: tabSvg }
+];
+/* tslint:enable */
+
+export namespace Icon {
+  export interface IModel {
+    name: string;
+    className?: string;
+    svg: string;
+  }
+}

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

@@ -4,76 +4,29 @@
 import React from 'react';
 import { classes } from 'typestyle/lib';
 
+import { Icon, defaultIcons } from './icon';
 import { camelize } from '../utils';
 import { IIconStyle, iconStyle, iconStyleFlat } from '../style/icon';
 
-/**
- * To add an icon to the defaultIconRegistry requires two lines of code:
- *   1. import the icon's .svg
- *   2. add a relevant entry to _defaultIcons
- */
-
-/* tslint:disable */
 import badSvg from '../../style/icons/bad.svg';
-import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
-
-// filetype icons
-import html5Svg from '../../style/icons/filetype/html5.svg';
-
-// statusbar icons
-import kernelSvg from '../../style/icons/statusbar/kernel.svg';
-import lineFormSvg from '../../style/icons/statusbar/line-form.svg';
-import notTrustedSvg from '../../style/icons/statusbar/not-trusted.svg';
-import statusBarSvg from '../../style/icons/statusbar/status-bar.svg';
-import terminalSvg from '../../style/icons/statusbar/terminal.svg';
-import trustedSvg from '../../style/icons/statusbar/trusted.svg';
-
-// sidebar icons
-import buildSvg from '../../style/icons/sidebar/build.svg'; // originally ic-build-24px.svg
-import extensionSvg from '../../style/icons/sidebar/extension.svg'; // originally ic-extension-24px.svg
-import folderSvg from '../../style/icons/sidebar/folder.svg'; // originally ic-folder-24px.svg
-import paletteSvg from '../../style/icons/sidebar/palette.svg'; // originally ic-palette-24px.svg
-import runningSvg from '../../style/icons/sidebar/running.svg'; // originally stop-circle.svg
-import tabSvg from '../../style/icons/sidebar/tab.svg'; // originally ic-tab-24px.svg
-
-const _defaultIcons: ReadonlyArray<IconRegistry.IModel> = [
-  { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
-
-  { name: 'html5', svg: html5Svg },
-
-  { name: 'kernel', svg: kernelSvg },
-  { name: 'line-form', svg: lineFormSvg },
-  { name: 'not-trusted', svg: notTrustedSvg },
-  { name: 'status-bar', svg: statusBarSvg },
-  { name: 'terminal', svg: terminalSvg },
-  { name: 'trusted', svg: trustedSvg },
-
-  { name: 'build', svg: buildSvg },
-  { name: 'extension', svg: extensionSvg },
-  { name: 'folder', svg: folderSvg },
-  { name: 'palette', svg: paletteSvg },
-  { name: 'running', svg: runningSvg },
-  { name: 'tab', svg: tabSvg }
-];
-/* tslint:enable */
 
 /**
  * The icon registry class.
  */
 export class IconRegistry {
-  constructor(...icons: IconRegistry.IModel[]) {
+  constructor(...icons: Icon.IModel[]) {
     if (icons.length) {
       this.addIcon(...icons);
     } else {
-      this.addIcon(..._defaultIcons);
+      this.addIcon(...defaultIcons);
     }
 
     // add the bad state icon
     this.addIcon({ name: 'bad', svg: badSvg });
   }
 
-  addIcon(...icons: IconRegistry.IModel[]): void {
-    icons.forEach((icon: IconRegistry.IModel) => {
+  addIcon(...icons: Icon.IModel[]): void {
+    icons.forEach((icon: Icon.IModel) => {
       let className = icon.className
         ? icon.className
         : IconRegistry.iconClassName(icon.name);
@@ -88,7 +41,7 @@ export class IconRegistry {
       // assume name is really a className, split the className into parts and check each part
       for (let className of name.split(/\s+/)) {
         if (className in this._classNameToName) {
-          return this._nameToClassName[className];
+          return this._classNameToName[className];
         }
       }
       // couldn't resolve name, mark as bad
@@ -167,34 +120,10 @@ export class IconRegistry {
     );
   }
 
-  // override(
-  //   props: { className: string; name?: string; title?: string } & IIconStyle
-  // ) {
-  //   let { name, className, title, ...propsStyle } = props;
-  //
-  //   // try to resolve name
-  //   name = name ? name : this.classNameToName(className);
-  //   if (!name) {
-  //     // bail
-  //     return;
-  //   }
-  //
-  //   for (let container of document.getElementsByClassName(
-  //     className
-  //   ) as HTMLCollectionOf<HTMLElement>) {
-  //     this.icon({
-  //       name: name,
-  //       title: title,
-  //       container: container,
-  //       ...propsStyle
-  //     });
-  //   }
-  // }
-
   svg(name: string, skipbad: boolean = false): string {
     let svgname = this.resolveName(name);
 
-    if (name === 'bad') {
+    if (svgname === 'bad') {
       if (!skipbad) {
         // log a warning and mark missing icons with an X
         console.error(`Invalid icon name: ${name}`);
@@ -231,21 +160,12 @@ export const IconReact = (
 };
 
 export namespace IconRegistry {
-  export interface IModel {
-    name: string;
-    className?: string;
-    svg: string;
-  }
-
   export interface IIconOptions {
     name: string;
     className?: string;
     title?: string;
     skipbad?: boolean;
   }
-
-  // needs the explicit type to avoid a typedoc issue
-  export const defaultIcons: ReadonlyArray<IconRegistry.IModel> = _defaultIcons;
 }
 
 namespace Private {

packages/ui-components/src/icon/tabbarsvg.ts

@@ -2,11 +2,15 @@ import { Message } from '@phosphor/messaging';
 
 import { h, VirtualElement } from '@phosphor/virtualdom';
 
-import { TabBar } from '@phosphor/widgets';
+import { DockPanel, TabBar, Widget } from '@phosphor/widgets';
 
-import { iconKindType } from './icon';
+import { IconKindType } from '../style/icon';
 import { defaultIconRegistry } from './iconregistry';
 
+/**
+ * A widget which displays titles as a single row or column of tabs. Tweaked
+ * to enable the use of inline svgs as tab icons.
+ */
 export class TabBarSvg<T> extends TabBar<T> {
   /**
    * Construct a new tab bar. Sets the (icon) kind and overrides
@@ -15,7 +19,7 @@ export class TabBarSvg<T> extends TabBar<T> {
    * @param options - The options for initializing the tab bar.
    */
   constructor(
-    options: { kind: iconKindType; skipbad?: boolean } & TabBar.IOptions<T>
+    options: { kind: IconKindType; skipbad?: boolean } & TabBar.IOptions<T>
   ) {
     options.renderer = options.renderer || TabBarSvg.defaultRenderer;
     super(options);
@@ -25,7 +29,8 @@ export class TabBarSvg<T> extends TabBar<T> {
   }
 
   /**
-   * A message handler invoked on an `'update-request'` message.
+   * A message handler invoked on an `'update-request'` message. Adds svg
+   * nodes to icon nodes as appropriate
    */
   protected onUpdateRequest(msg: Message): void {
     super.onUpdateRequest(msg);
@@ -48,11 +53,14 @@ export class TabBarSvg<T> extends TabBar<T> {
     }
   }
 
-  protected _kind: iconKindType;
+  protected _kind: IconKindType;
   protected _skipbad: boolean;
 }
 
 export namespace TabBarSvg {
+  /**
+   * A modified implementation of the TabBar Renderer.
+   */
   export class Renderer extends TabBar.Renderer {
     /**
      * Render the icon element for a tab. This version avoids clobbering
@@ -70,3 +78,54 @@ export namespace TabBarSvg {
 
   export const defaultRenderer = new Renderer();
 }
+
+/**
+ * A widget which provides a flexible docking area for widgets.Tweaked
+ * to enable the use of inline svgs as tab icons.
+ */
+export class DockPanelSvg extends DockPanel {
+  /**
+   * Construct a new dock panel. Overrides the default renderer
+   * and sets the (icon) kind
+   *
+   * @param options - The options for initializing the panel.
+   */
+  constructor(
+    options: { kind?: IconKindType; skipbad?: boolean } & DockPanel.IOptions
+  ) {
+    if (!options.renderer) {
+      // can't add a constructor to Renderer, so have to set properties here
+      let renderer = new DockPanelSvg.Renderer();
+      renderer._kind = options.kind || renderer._kind;
+      renderer._skipbad = options.skipbad || renderer._skipbad;
+      options.renderer = renderer;
+    }
+
+    super(options);
+  }
+}
+
+export namespace DockPanelSvg {
+  /**
+   * A modified implementation of the DockPanel Renderer.
+   */
+  export class Renderer extends DockPanel.Renderer {
+    /**
+     * Create a new tab bar (with inline svg icons enabled
+     * for use with a dock panel.
+     *
+     * @returns A new tab bar for a dock panel.
+     */
+    createTabBar(): TabBarSvg<Widget> {
+      let bar = new TabBarSvg<Widget>({
+        kind: this._kind,
+        skipbad: this._skipbad
+      });
+      bar.addClass('p-DockPanel-tabBar');
+      return bar;
+    }
+
+    _kind: IconKindType = 'dockPanelBar';
+    _skipbad: boolean = false;
+  }
+}

packages/ui-components/src/style/icon.ts

@@ -4,7 +4,12 @@
 import { style } from 'typestyle/lib';
 import { NestedCSSProperties } from 'typestyle/lib/types';
 
-import { iconKindType } from '../icon';
+export type IconKindType =
+  | 'dockPanelBar'
+  | 'listing'
+  | 'sideBar'
+  | 'statusBar'
+  | 'unset';
 
 export interface IIconStyle extends NestedCSSProperties {
   /**
@@ -15,9 +20,12 @@ export interface IIconStyle extends NestedCSSProperties {
   /**
    * the kind of the icon, associated with a default stylesheet
    */
-  kind?: iconKindType;
+  kind?: IconKindType;
 }
 
+/**
+ * styles for centering node inside of containers
+ */
 const iconContainerCSSCenter: NestedCSSProperties = {
   alignItems: 'center',
   display: 'flex !important'
@@ -29,6 +37,13 @@ const iconCSSCenter: NestedCSSProperties = {
   width: '100%'
 };
 
+/**
+ * icon kind specific styles
+ */
+const iconCSSDockPanelBar: NestedCSSProperties = {
+  height: '14px'
+};
+
 const iconCSSListing: NestedCSSProperties = {
   height: '16px'
 };
@@ -45,18 +60,18 @@ const iconCSSStatusBar: NestedCSSProperties = {
   position: 'relative'
 };
 
-const iconCSSTab: NestedCSSProperties = {
-  height: '14px'
-};
-
-const iconCSSKind: { [k in iconKindType]: NestedCSSProperties } = {
+const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
+  dockPanelBar: iconCSSDockPanelBar,
   listing: iconCSSListing,
   sideBar: iconCSSSideBar,
   statusBar: iconCSSStatusBar,
-  tab: iconCSSTab,
   unset: {}
 };
 
+/**
+ * for putting together the icon kind style with any user input styling,
+ * as well as styling from optional flags like `center`
+ */
 function iconCSS(props: IIconStyle): NestedCSSProperties {
   const { kind, center, ...propsCSS } = props;
 
@@ -68,7 +83,7 @@ function iconCSS(props: IIconStyle): NestedCSSProperties {
 }
 
 /**
- * For setting the style on the container of an svg node representing an icon
+ * for setting the style on the container of an svg node representing an icon
  */
 export const iconStyle = (props: IIconStyle): string => {
   return style({
@@ -80,7 +95,7 @@ export const iconStyle = (props: IIconStyle): string => {
 };
 
 /**
- * For setting the style directly on the svg node representing an icon
+ * for setting the style directly on the svg node representing an icon
  */
 export const iconStyleFlat = (props: IIconStyle): string => {
   return style(iconCSS(props));