fixed issues remaining from rebase

All icons now working well, barring a few issues from the phosphor hacks

packages/application/src/shell.ts

@@ -1191,36 +1191,13 @@ namespace Private {
       this._stackedPanel.setHidden(this._sideBar.currentTitle === null);
 
       // filthy hack to get the tab icons
-      defaultIconRegistry.override({
-        name: 'extension',
-        className: 'jp-ExtensionIcon',
-        center: true,
-        kind: 'sideBar'
-      });
-      defaultIconRegistry.override({
-        name: 'folder',
-        className: 'jp-FolderIcon',
-        center: true,
-        kind: 'sideBar'
-      });
-      defaultIconRegistry.override({
-        name: 'palette',
-        className: 'jp-PaletteIcon',
-        center: true,
-        kind: 'sideBar'
-      });
-      defaultIconRegistry.override({
-        name: 'running',
-        className: 'jp-RunningIcon',
-        center: true,
-        kind: 'sideBar'
-      });
-      defaultIconRegistry.override({
-        name: 'tab',
-        className: 'jp-TabIcon',
-        center: true,
-        kind: 'sideBar'
-      });
+      for (let title of this._sideBar.titles) {
+        defaultIconRegistry.override({
+          className: title.iconClass,
+          center: true,
+          kind: 'sideBar'
+        });
+      }
     }
 
     /**

packages/application/style/icons.css

@@ -95,10 +95,6 @@
   background-image: var(--jp-icon-ellipses);
 }
 
-.jp-ExtensionIcon {
-  /*background-image: var(--jp-icon-extension);*/
-}
-
 .jp-FileIcon {
   background-image: var(--jp-icon-file);
 }
@@ -111,10 +107,6 @@
   background-image: var(--jp-icon-filter-list);
 }
 
-.jp-FolderIcon {
-  /*background-image: var(--jp-icon-folder);*/
-}
-
 .jp-HomeIcon {
   background-image: var(--jp-icon-home);
   min-width: 16px;
@@ -189,10 +181,6 @@
   background-image: var(--jp-icon-folder);
 }
 
-.jp-PaletteIcon {
-  /*background-image: var(--jp-icon-palette);*/
-}
-
 .jp-PasteIcon {
   background-image: var(--jp-icon-paste);
 }
@@ -213,10 +201,6 @@
   background-image: var(--jp-icon-run);
 }
 
-.jp-RunningIcon {
-  /*background-image: var(--jp-icon-stop-circle);*/
-}
-
 .jp-SaveIcon {
   background-image: var(--jp-icon-save);
 }
@@ -233,10 +217,6 @@
   background-image: var(--jp-icon-stop);
 }
 
-.jp-TabIcon {
-  /*background-image: var(--jp-icon-tab);*/
-}
-
 .jp-TerminalIcon {
   background-image: var(--jp-icon-terminal);
 }
@@ -253,10 +233,40 @@
   background-image: var(--jp-icon-file-upload);
 }
 
-.jp-YAMLIcon {
+.jp-YamlIcon {
   background-image: var(--jp-icon-yaml);
 }
 
 .jp-VegaIcon {
   background-image: var(--jp-icon-vega);
 }
+
+.jp-QuestionMarkIcon {
+  background-image: var(--jp-icon-question-mark);
+}
+
+/* disabled/replaced by svg */
+
+/*.jp-BuildIcon {*/
+/*  background-image: var(--jp-icon-build);*/
+/*}*/
+
+/*.jp-ExtensionIcon {*/
+/*  background-image: var(--jp-icon-extension);*/
+/*}*/
+
+/*.jp-FolderIcon {*/
+/*  background-image: var(--jp-icon-folder);*/
+/*}*/
+
+/*.jp-PaletteIcon {*/
+/*  background-image: var(--jp-icon-palette);*/
+/*}*/
+
+/*.jp-RunningIcon {*/
+/*  background-image: var(--jp-icon-stop-circle);*/
+/*}*/
+
+/*.jp-TabIcon {*/
+/*  background-image: var(--jp-icon-tab);*/
+/*}*/

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

@@ -4,6 +4,7 @@
 import React from 'react';
 import { classes } from 'typestyle/lib';
 
+import { camelize } from '../utils';
 import { IIconStyle, iconStyle, iconStyleFlat } from '../style/icon';
 
 /**
@@ -13,31 +14,40 @@ import { IIconStyle, iconStyle, iconStyleFlat } from '../style/icon';
  */
 
 /* tslint:disable */
+import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
+
+// filetype icons
 import html5Svg from '../../style/icons/html5.svg';
+
+// status bar icons
 import kernelSvg from '../../style/icons/kernel.svg';
-import jupyterFaviconSvg from '../../style/icons/jupyter-favicon.svg';
 import lineFormSvg from '../../style/icons/line-form.svg';
 import notTrustedSvg from '../../style/icons/not-trusted.svg';
 import statusBarSvg from '../../style/icons/status-bar.svg';
 import terminalSvg from '../../style/icons/terminal.svg';
 import trustedSvg from '../../style/icons/trusted.svg';
 
+// sidebar tab icons
+import buildSvg from '../../style/tabicons/build.svg'; // originally ic-build-24px.svg
 import extensionSvg from '../../style/tabicons/extension.svg'; // originally ic-extension-24px.svg
 import folderSvg from '../../style/tabicons/folder.svg'; // originally ic-folder-24px.svg
 import paletteSvg from '../../style/tabicons/palette.svg'; // originally ic-palette-24px.svg
 import runningSvg from '../../style/tabicons/running.svg'; // originally stop-circle.svg
 import tabSvg from '../../style/tabicons/tab.svg'; // originally ic-tab-24px.svg
 
-const _defaultIcons: ReadonlyArray<IconRegistry.IconModel> = [
+const _defaultIcons: ReadonlyArray<IconRegistry.IModel> = [
+  { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
+
   { name: 'html5', svg: html5Svg },
+
   { name: 'kernel', svg: kernelSvg },
-  { name: 'jupyter-favicon', svg: jupyterFaviconSvg },
   { 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 },
@@ -50,7 +60,7 @@ const _defaultIcons: ReadonlyArray<IconRegistry.IconModel> = [
  * The icon registry class.
  */
 export class IconRegistry {
-  constructor(...icons: IconRegistry.IconModel[]) {
+  constructor(...icons: IconRegistry.IModel[]) {
     if (icons.length) {
       this.addIcon(...icons);
     } else {
@@ -58,10 +68,13 @@ export class IconRegistry {
     }
   }
 
-  addIcon(...icons: IconRegistry.IconModel[]): void {
+  addIcon(...icons: IconRegistry.IModel[]): void {
     icons.forEach((icon: IconRegistry.IModel) => {
-      this._classNameToName[icon.className] = icon.name;
-      this._nameToClassName[icon.name] = icon.className;
+      let className = icon.className
+        ? icon.className
+        : IconRegistry.iconClassName(icon.name);
+      this._classNameToName[className] = icon.name;
+      this._nameToClassName[icon.name] = className;
       this._svgs[icon.name] = icon.svg;
     });
   }
@@ -96,7 +109,7 @@ export class IconRegistry {
       if (className) {
         // override the className, if explicitly passed
         container.className = classes(className, styleClass);
-      } else if (!container.className.includes(styleClass)) {
+      } else if (!(styleClass in container.classList)) {
         // add icon styling class to the container's class, if not already present
         container.className = classes(container.className, styleClass);
       }
@@ -130,15 +143,28 @@ export class IconRegistry {
   }
 
   override(
-    props: { name: string; className: string; title?: string } & IIconStyle
+    props: { className: string; name?: string; title?: string } & IIconStyle
   ) {
     const { name, className, title, ...propsStyle } = props;
 
+    let usedname = name;
+    if (!usedname) {
+      // for now, just assume that the first className is the relevant one
+      usedname = className.split(/\s+/)[0];
+
+      // bail if no corresponding icon is found
+      if (!(usedname in this._classNameToName)) {
+        return;
+      }
+
+      usedname = this._classNameToName[usedname];
+    }
+
     for (let container of document.getElementsByClassName(
       className
     ) as HTMLCollectionOf<HTMLElement>) {
       this.icon({
-        name: name,
+        name: usedname,
         title: title,
         container: container,
         ...propsStyle
@@ -154,6 +180,10 @@ export class IconRegistry {
     return this._svgs[name];
   }
 
+  static iconClassName(name: string): string {
+    return 'jp-' + camelize(name, true) + 'Icon';
+  }
+
   private _classNameToName: { [key: string]: string } = Object.create(null);
   private _nameToClassName: { [key: string]: string } = Object.create(null);
   private _svgs: { [key: string]: string } = Object.create(null);
@@ -180,18 +210,6 @@ export namespace IconRegistry {
     svg: string;
   }
 
-  export class IconModel implements IModel {
-    constructor(imod: IModel) {
-      if (!imod.className) {
-        this.className = Private.classNameFromName(imod.name);
-      }
-    }
-
-    name: string;
-    className?: string;
-    svg: string;
-  }
-
   export interface IIconOptions {
     name: string;
     className?: string;
@@ -202,18 +220,6 @@ export namespace IconRegistry {
 }
 
 namespace Private {
-  function camelize(str: string): string {
-    return str.replace(/(?:^\w|[A-Z]|\b\w|\s+|-+)/g, function(match, index) {
-      console.log(match);
-      if (+match === 0 || match[0] === '-') return '';
-      return match.toUpperCase();
-    });
-  }
-
-  export function classNameFromName(name: string): string {
-    return 'jp-' + camelize(name);
-  }
-
   export function parseSvg(svg: string): HTMLElement {
     let parser = new DOMParser();
     return parser.parseFromString(svg, 'image/svg+xml').documentElement;

packages/ui-components/src/utils.ts

@@ -2,5 +2,17 @@
 // Distributed under the terms of the Modified BSD License.
 
 export function combineClassNames(...classNames: (string | undefined)[]) {
-  return classNames.join(' ');
+  return classNames.filter(c => !!c).join(' ');
+}
+
+export function camelize(str: string, upper: boolean = false): string {
+  return str.replace(/(?:^\w|[A-Z]|\b\w|\s+|-+)/g, function(match, index) {
+    if (+match === 0 || match[0] === '-') {
+      return '';
+    } else if (index === 0 && !upper) {
+      return match.toLowerCase();
+    } else {
+      return match.toUpperCase();
+    }
+  });
 }

packages/ui-components/style/tabicons/build.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path
+        class="jp-icon2"
+        fill="#616161"
+        d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"
+    />
+</svg>