removed redundant CSS styling/classes from inline svg icons

packages/docregistry/src/mimedocument.ts

@@ -285,7 +285,6 @@ 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/docregistry/src/registry.ts

@@ -1102,11 +1102,6 @@ export namespace DocumentRegistry {
      */
     readonly iconLabel?: string;
 
-    /**
-     * Icon name, as per the icon registry.
-     */
-    readonly iconName?: string;
-
     /**
      * The content type of the new file.
      */
@@ -1127,7 +1122,6 @@ export namespace DocumentRegistry {
     mimeTypes: [],
     iconClass: 'jp-MaterialIcon jp-FileIcon',
     iconLabel: '',
-    iconName: '',
     contentType: 'file',
     fileFormat: 'text'
   };

packages/filebrowser/src/listing.ts

@@ -1759,13 +1759,11 @@ export namespace DirListing {
       let modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
 
       if (fileType) {
-        // TODO: should inline svg icons still get the same className?
-        icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`;
-
-        if (fileType.iconName) {
+        if (defaultIconRegistry.contains(fileType.iconClass)) {
           // add icon as svg node. Can be styled using CSS
           defaultIconRegistry.icon({
-            name: fileType.iconName,
+            name: fileType.iconClass,
+            className: '',
             title: fileType.iconLabel,
             container: icon,
             center: true,
@@ -1773,6 +1771,7 @@ export namespace DirListing {
           });
         } else {
           // add icon as CSS background image. Can't be styled using CSS
+          icon.className = `${ITEM_ICON_CLASS} ${fileType.iconClass || ''}`;
           icon.textContent = fileType.iconLabel || '';
         }
       } else {

packages/htmlviewer-extension/src/index.tsx

@@ -19,11 +19,6 @@ import {
   IHTMLViewerTracker
 } from '@jupyterlab/htmlviewer';
 
-/**
- * The CSS class for an HTML5 icon.
- */
-const CSS_ICON_CLASS = 'jp-Html5Icon';
-
 /**
  * The name for an HTML5 icon.
  */
@@ -63,8 +58,7 @@ function activateHTMLViewer(
     displayName: 'HTML File',
     extensions: ['.html'],
     mimeTypes: ['text/html'],
-    iconClass: CSS_ICON_CLASS,
-    iconName: ICON_NAME
+    iconClass: ICON_NAME
   };
   app.docRegistry.addFileType(ft);
 

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

@@ -14,7 +14,7 @@ import badSvg from '../../style/icons/bad.svg';
  * The icon registry class.
  */
 export class IconRegistry {
-  constructor(options?: IconRegistry.IOptions) {
+  constructor(options: IconRegistry.IOptions = {}) {
     this._debug = !!options.debug;
 
     let icons = options.initialIcons || Icon.defaultIcons;
@@ -35,6 +35,10 @@ export class IconRegistry {
     });
   }
 
+  contains(name: string): boolean {
+    return name in this._svg;
+  }
+
   /**
    * Get the icon as an HTMLElement of tag <svg><svg/>
    */
@@ -44,13 +48,18 @@ export class IconRegistry {
     const { name, className, title, container, ...propsStyle } = props;
 
     // if name not in _svg, assume we've been handed a className in place of name
-    let svg = this.resolveSvg(name);
-    if (!svg) {
-      // bail
+    let resolvedName = this.resolveName(name);
+    if (
+      !resolvedName ||
+      (container &&
+        container.dataset.icon &&
+        container.dataset.icon === resolvedName)
+    ) {
+      // bail if failing silently or icon node is already set
       return;
     }
 
-    let svgNode = Private.parseSvg(svg);
+    let svgNode = Private.parseSvg(this.svg(resolvedName));
 
     if (title) {
       Private.setTitleSvg(svgNode, title);
@@ -59,13 +68,14 @@ export class IconRegistry {
     if (container) {
       // clear any existing icon in container (and all other child elements)
       container.textContent = '';
+      container.dataset.icon = resolvedName;
       container.appendChild(svgNode);
 
       let styleClass = propsStyle ? iconStyle(propsStyle) : '';
       if (className || className === '') {
         // override the className, if explicitly passed
         container.className = classes(className, styleClass);
-      } else if (!(styleClass in container.classList)) {
+      } else if (!container.classList.contains(styleClass)) {
         // add icon styling class to the container's class, if not already present
         container.className = classes(container.className, styleClass);
       }
@@ -90,12 +100,15 @@ export class IconRegistry {
     const { name, className, title, tag, ...propsStyle } = props;
     const Tag = tag || 'div';
 
-    let svg = this.resolveSvg(name);
-    if (!svg) {
-      // bail
+    // if name not in _svg, assume we've been handed a className in place of name
+    let resolvedName = this.resolveName(name);
+    if (!resolvedName) {
+      // bail if failing silently
       return;
     }
 
+    let svg = this.svg(resolvedName);
+
     return (
       <Tag
         className={classes(className, propsStyle ? iconStyle(propsStyle) : '')}
@@ -113,30 +126,19 @@ export class IconRegistry {
         }
       }
       // couldn't resolve name, mark as bad
-      return 'bad';
-    }
-
-    return name;
-  }
-
-  resolveSvg(name: string): string {
-    let svgname = this.resolveName(name);
-
-    if (svgname === 'bad') {
       if (this._debug) {
-        // log a warning and mark missing icons with an X
         console.error(`Invalid icon name: ${name}`);
+        return 'bad';
       } else {
-        // silently return empty string
         return '';
       }
     }
 
-    return this._svg[svgname];
+    return name;
   }
 
-  get svg() {
-    return this._svg;
+  svg(name: string): string {
+    return this._svg[name];
   }
 
   static iconClassName(name: string): string {

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

@@ -37,10 +37,11 @@ export class TabBarSvg<T> extends TabBar<T> {
       let title = this.titles[itab];
       let iconNode = tab.children ? (tab.children[0] as HTMLElement) : null;
 
-      if (iconNode && iconNode.children.length < 1) {
+      if (iconNode) {
         // add the svg node, if not already present
         defaultIconRegistry.icon({
           name: title.iconClass,
+          className: '',
           container: iconNode,
           center: true,
           kind: this._kind
@@ -89,9 +90,7 @@ export class DockPanelSvg extends DockPanel {
    *
    * @param options - The options for initializing the panel.
    */
-  constructor(
-    options: { kind?: IconKindType; skipbad?: boolean } & DockPanel.IOptions
-  ) {
+  constructor(options: { kind?: IconKindType } & DockPanel.IOptions) {
     if (!options.renderer) {
       // can't add a constructor to Renderer, so have to set properties here
       let renderer = new DockPanelSvg.Renderer();

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

@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { style } from 'typestyle/lib';
+import { cssRule, style } from 'typestyle/lib';
 import { NestedCSSProperties } from 'typestyle/lib/types';
 
 export type IconKindType =
@@ -26,9 +26,9 @@ export interface IIconStyle extends NestedCSSProperties {
 /**
  * styles for centering node inside of containers
  */
-const iconContainerCSSCenter: NestedCSSProperties = {
+const containerCSSCenter: NestedCSSProperties = {
   alignItems: 'center',
-  display: 'flex !important'
+  display: 'flex'
 };
 
 const iconCSSCenter: NestedCSSProperties = {
@@ -41,7 +41,7 @@ const iconCSSCenter: NestedCSSProperties = {
  * icon kind specific styles
  */
 const iconCSSDockPanelBar: NestedCSSProperties = {
-  height: '14px'
+  width: '14px'
 };
 
 const iconCSSListing: NestedCSSProperties = {
@@ -69,6 +69,30 @@ const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   unset: {}
 };
 
+/**
+ * container kind specific styles
+ */
+const containerCSSDockPanelBar: NestedCSSProperties = {
+  marginRight: '4px'
+};
+
+const containerCSSListing: NestedCSSProperties = {
+  flex: '0 0 20px',
+  marginRight: '4px'
+};
+
+const containerCSSSideBar: NestedCSSProperties = {
+  transform: 'rotate(90deg)'
+};
+
+const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
+  dockPanelBar: containerCSSDockPanelBar,
+  listing: containerCSSListing,
+  sideBar: containerCSSSideBar,
+  statusBar: {},
+  unset: {}
+};
+
 /**
  * for putting together the icon kind style with any user input styling,
  * as well as styling from optional flags like `center`
@@ -83,12 +107,25 @@ function iconCSS(props: IIconStyle): NestedCSSProperties {
   };
 }
 
+/**
+ * for putting together the container kind style with any
+ * styling from optional flags like `center`
+ */
+function containerCSS(props: IIconStyle): NestedCSSProperties {
+  const { kind, center } = props;
+
+  return {
+    ...(center ? containerCSSCenter : {}),
+    ...(kind ? containerCSSKind[kind] : {})
+  };
+}
+
 /**
  * for setting the style on the container of an svg node representing an icon
  */
 export const iconStyle = (props: IIconStyle): string => {
   return style({
-    ...(props.center ? iconContainerCSSCenter : {}),
+    ...containerCSS(props),
     $nest: {
       ['svg']: iconCSS(props)
     }
@@ -101,3 +138,19 @@ export const iconStyle = (props: IIconStyle): string => {
 export const iconStyleFlat = (props: IIconStyle): string => {
   return style(iconCSS(props));
 };
+
+// TODO: Figure out a better cludge for styling current sidebar tab selection
+cssRule(
+  `.p-TabBar-tab.p-mod-current .${iconStyle({
+    center: true,
+    kind: 'sideBar'
+  })}`,
+  {
+    transform:
+      'rotate(90deg)\n' +
+      '    translate(\n' +
+      '      calc(-0.5 * var(--jp-border-width)),\n' +
+      '      calc(-0.5 * var(--jp-border-width))\n' +
+      '    )'
+  }
+);

packages/vdom-extension/src/index.ts

@@ -17,11 +17,6 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 
 import { RenderedVDOM, IVDOMTracker } from '@jupyterlab/vdom';
 
-/**
- * The CSS class for a VDOM icon.
- */
-const CSS_ICON_CLASS = 'jp-ReactIcon';
-
 /**
  * The name for a VDOM icon.
  */
@@ -87,8 +82,7 @@ const plugin: JupyterFrontEndPlugin<IVDOMTracker> = {
       name: 'vdom',
       mimeTypes: [MIME_TYPE],
       extensions: ['.vdom', '.vdom.json'],
-      iconClass: CSS_ICON_CLASS,
-      iconName: ICON_NAME
+      iconClass: ICON_NAME
     });
 
     const factory = new MimeDocumentFactory({