Use only SVG icons (#783)

* Use docRegistry for file listing

* Vectorize branch icon

* Correct unit tests

* Better theming

* Correct unit tests

Author: fcollonval

src/components/ActionButton.tsx

@@ -26,7 +26,7 @@ export interface IActionButtonProps {
   /**
    * On-click event handler
    */
-  onClick?: (event?: React.MouseEvent) => void;
+  onClick?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 /**

src/components/BranchMenu.tsx

@@ -17,6 +17,7 @@ import {
   newBranchButtonClass,
   wrapperClass
 } from '../style/BranchMenu';
+import { branchIcon } from '../style/icons';
 import { Git, IGitExtension, Level } from '../tokens';
 import { NewBranchDialog } from './NewBranchDialog';
 
@@ -270,13 +271,7 @@ export class BranchMenu extends React.Component<
         onClick={this._onBranchClickFactory(branch.name)}
         style={style}
       >
-        <span
-          className={classes(
-            'jp-git-icon',
-            listItemIconClass,
-            isActive && 'jp-git-selected'
-          )}
-        />
+        <branchIcon.react className={listItemIconClass} tag="span" />
         {branch.name}
       </ListItem>
     );

src/components/FileItem.tsx

@@ -185,7 +185,7 @@ export class FileItem extends React.PureComponent<IFileItemProps> {
         )}
         <FilePath
           filepath={this.props.file.to}
-          selected={this.props.selected}
+          filetype={this.props.file.type}
         />
         {this.props.actions}
         <span className={this._getFileChangedLabelClass(this.props.file.y)}>

src/components/FilePath.tsx

@@ -1,11 +1,8 @@
+import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { fileIcon } from '@jupyterlab/ui-components';
 import * as React from 'react';
-import { classes } from 'typestyle';
-import {
-  fileIconStyle,
-  fileLabelStyle,
-  folderLabelStyle
-} from '../style/FilePathStyle';
-import { extractFilename, getFileIconClassName } from '../utils';
+import { fileLabelStyle, folderLabelStyle } from '../style/FilePathStyle';
+import { extractFilename } from '../utils';
 
 /**
  * FilePath component properties
@@ -16,13 +13,9 @@ export interface IFilePathProps {
    */
   filepath: string;
   /**
-   * Is file selected? - impact style of the icon
+   * File type
    */
-  selected?: boolean;
-}
-
-function getFileIconClass(path: string): string {
-  return getFileIconClassName(path);
+  filetype: DocumentRegistry.IFileType;
 }
 
 export const FilePath: React.FunctionComponent<IFilePathProps> = (
@@ -33,16 +26,11 @@ export const FilePath: React.FunctionComponent<IFilePathProps> = (
     .slice(0, props.filepath.length - filename.length)
     .replace(/^\/|\/$/g, ''); // Remove leading and trailing '/'
 
+  const icon = props.filetype.icon || fileIcon;
+
   return (
     <React.Fragment>
-      <span
-        className={classes(
-          fileIconStyle,
-          'jp-git-icon',
-          getFileIconClass(props.filepath),
-          props.selected && 'jp-git-selected'
-        )}
-      />
+      <icon.react elementPosition="center" tag="span" />
       <span className={fileLabelStyle}>
         {filename}
         <span className={folderLabelStyle}>{folder}</span>

src/components/NewBranchDialog.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { ListChildComponentProps, VariableSizeList } from 'react-window';
 import { classes } from 'typestyle';
 import { Logger } from '../logger';
+import { branchIcon } from '../style/icons';
 import {
   actionsWrapperClass,
   activeListItemClass,
@@ -313,14 +314,7 @@ export class NewBranchDialog extends React.Component<
         onClick={this._onBranchClickFactory(branch.name)}
         style={style}
       >
-        <span
-          className={classes(
-            'jp-git-icon',
-            listItemIconClass,
-            'jp-Icon-16',
-            isBase && 'jp-git-selected'
-          )}
-        />
+        <branchIcon.react className={listItemIconClass} tag="span" />
         <div className={listItemContentClass}>
           <p
             className={classes(

src/components/SinglePastCommitInfo.tsx

@@ -256,7 +256,7 @@ export class SinglePastCommitInfo extends React.Component<
         style={style}
         title={path}
       >
-        <FilePath filepath={path} />
+        <FilePath filepath={path} filetype={file.type} />
         {flg ? (
           <ActionButton icon={diffIcon} title="View file changes" />
         ) : null}

src/index.ts

@@ -112,6 +112,7 @@ async function activate(
   gitExtension = new GitExtension(
     serverSettings.serverRoot,
     docmanager,
+    app.docRegistry,
     settings
   );
 

src/model.ts

@@ -1,5 +1,6 @@
 import { IChangedArgs, PathExt } from '@jupyterlab/coreutils';
 import { IDocumentManager } from '@jupyterlab/docmanager';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { JSONObject } from '@lumino/coreutils';
 import { Poll } from '@lumino/polling';
@@ -26,10 +27,12 @@ export class GitExtension implements IGitExtension {
   constructor(
     serverRoot: string,
     docmanager: IDocumentManager = null,
+    docRegistry: DocumentRegistry = null,
     settings?: ISettingRegistry.ISettings
   ) {
     this._serverRoot = serverRoot;
     this._docmanager = docmanager;
+    this._docRegistry = docRegistry;
     this._settings = settings || null;
     this._taskHandler = new TaskHandler(this);
 
@@ -519,6 +522,11 @@ export class GitExtension implements IGitExtension {
         return d;
       }
     );
+
+    data.modified_files = data.modified_files.map(f => {
+      f.type = this._resolveFileType(f.modified_file_path);
+      return f;
+    });
     return data;
   }
 
@@ -751,7 +759,11 @@ export class GitExtension implements IGitExtension {
 
       this._setStatus(
         data.files.map(file => {
-          return { ...file, status: decodeStage(file.x, file.y) };
+          return {
+            ...file,
+            status: decodeStage(file.x, file.y),
+            type: this._resolveFileType(file.to)
+          };
         })
       );
     } catch (err) {
@@ -1076,6 +1088,21 @@ export class GitExtension implements IGitExtension {
     return path;
   }
 
+  /**
+   * Resolve path to filetype
+   */
+  protected _resolveFileType(path: string): DocumentRegistry.IFileType {
+    // test if directory
+    if (path.endsWith('/')) {
+      return DocumentRegistry.defaultDirectoryFileType;
+    }
+
+    return (
+      this._docRegistry.getFileTypesForPath(path)[0] ||
+      DocumentRegistry.defaultTextFileType
+    );
+  }
+
   /**
    * Set the repository status.
    *
@@ -1131,6 +1158,7 @@ export class GitExtension implements IGitExtension {
   private _currentBranch: Git.IBranch;
   private _serverRoot: string;
   private _docmanager: IDocumentManager | null;
+  private _docRegistry: DocumentRegistry | null;
   private _diffProviders: { [key: string]: Git.IDiffCallback } = {};
   private _isDisposed = false;
   private _markerCache: Markers = new Markers(() => this._markChanged.emit());

src/style/BranchMenu.ts

@@ -30,7 +30,7 @@ export const filterInputClass = style({
   /* top | right | bottom | left */
   padding: '1px 18px 2px 7px',
 
-  color: 'var(--jp-ui-font-color0)',
+  color: 'var(--jp-ui-font-color1)',
   fontSize: 'var(--jp-ui-font-size1)',
   fontWeight: 300,
 
@@ -86,7 +86,7 @@ export const newBranchButtonClass = style({
   width: '7.7em',
   height: '2em',
 
-  color: 'white',
+  color: 'var(--jp-ui-inverse-font-color1)',
   fontSize: 'var(--jp-ui-font-size1)',
 
   backgroundColor: 'var(--jp-brand-color1)',
@@ -101,19 +101,20 @@ export const listItemClass = style({
 });
 
 export const activeListItemClass = style({
-  color: 'white!important',
+  color: 'var(--jp-ui-inverse-font-color1)!important',
 
-  backgroundColor: 'var(--jp-brand-color1)!important'
+  backgroundColor: 'var(--jp-brand-color1)!important',
+
+  $nest: {
+    '& .jp-icon-selectable[fill]': {
+      fill: 'var(--jp-layout-color1)'
+    }
+  }
 });
 
 export const listItemIconClass = style({
   width: '16px',
   height: '16px',
 
-  marginRight: '4px',
-
-  backgroundImage: 'var(--jp-icon-git-branch)',
-  backgroundSize: '16px',
-  backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'center'
+  marginRight: '4px'
 });

src/style/CommitBox.ts

@@ -24,7 +24,7 @@ export const commitSummaryClass = style({
   outline: 'none',
   overflowX: 'auto',
 
-  color: 'var(--jp-ui-font-color0)',
+  color: 'var(--jp-ui-font-color1)',
   fontSize: 'var(--jp-ui-font-size1)',
   fontWeight: 300,
 
@@ -52,7 +52,7 @@ export const commitDescriptionClass = style({
   overflowX: 'auto',
   resize: 'none',
 
-  color: 'var(--jp-ui-font-color0)',
+  color: 'var(--jp-ui-font-color1)',
   fontSize: 'var(--jp-ui-font-size1)',
   fontWeight: 300,
 
@@ -90,7 +90,7 @@ export const commitButtonClass = style({
 
   marginBottom: '0.5em',
 
-  color: 'white',
+  color: 'var(--jp-ui-inverse-font-color1)',
   fontSize: 'var(--jp-ui-font-size1)',
 
   cursor: 'pointer',