Fix icons in the insider build. Remove warning about extra command (microsoft#3846)

* Fix icons in the insider build. Remove warning about extra command * Add news entry * Add new dependency

Author: rchiodo

news/2 Fixes/3775.md

@@ -0,0 +1 @@
+Address problem with Python Interactive icons not working in insider's build. VS Code is more restrictive on what files can load in a webview.

package-lock.json

@@ -121,6 +121,7 @@
  "style-loader",
  "styled-jsx",
  "stylis-rule-sheet",
+ "svg-inline-react",
  "svg-path-bounding-box",
  "svgpath",
  "tinycolor2",

package.datascience-ui.dependencies.json

@@ -321,11 +321,6 @@
  "command": "python.datascience.collapseallcells",
  "title": "%python.command.python.datascience.collapseallcells.title%",
  "category": "Python"
- },
- {
- "command": "python.datascience.exportoutputasnotebook",
- "title": "%python.command.python.datascience.exportoutputasnotebook.title%",
- "category": "Python"
  }
  ],
  "menus": {
@@ -1846,6 +1841,7 @@
  "rxjs": "^5.5.9",
  "semver": "^5.5.0",
  "sudo-prompt": "^8.2.0",
+ "svg-inline-react": "^3.1.0",
  "tmp": "^0.0.29",
  "tree-kill": "^1.2.0",
  "typescript-char": "^0.0.0",

package.json

@@ -13,9 +13,9 @@ import { ErrorBoundary } from '../react-common/errorBoundary';
 import { getLocString } from '../react-common/locReactSide';
 import { IMessageHandler, PostOffice } from '../react-common/postOffice';
 import { Progress } from '../react-common/progress';
-import { RelativeImage } from '../react-common/relativeImage';
 import { Cell, ICellViewModel } from './cell';
 import { CellButton } from './cellButton';
+import { Image, ImageName } from './image';
 import { createCellVM, generateTestState, IMainPanelState } from './mainPanelState';
 import { MenuBar } from './menuBar';
 
@@ -53,23 +53,6 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
 
  public render() {
 
- const clearButtonImage = this.props.theme !== 'vscode-dark' ? './images/Cancel/Cancel_16xMD_vscode.svg' :
- './images/Cancel/Cancel_16xMD_vscode_dark.svg';
- const redoImage = this.props.theme !== 'vscode-dark' ? './images/Redo/Redo_16x_vscode.svg' :
- './images/Redo/Redo_16x_vscode_dark.svg';
- const undoImage = this.props.theme !== 'vscode-dark' ? './images/Undo/Undo_16x_vscode.svg' :
- './images/Undo/Undo_16x_vscode_dark.svg';
- const restartImage = this.props.theme !== 'vscode-dark' ? './images/Restart/Restart_grey_16x_vscode.svg' :
- './images/Restart/Restart_grey_16x_vscode_dark.svg';
- const saveAsImage = this.props.theme !== 'vscode-dark' ? './images/SaveAs/SaveAs_16x_vscode.svg' :
- './images/SaveAs/SaveAs_16x_vscode_dark.svg';
- const collapseAllImage = this.props.theme !== 'vscode-dark' ? './images/CollapseAll/CollapseAll_16x_vscode.svg' :
- './images/CollapseAll/CollapseAll_16x_vscode_dark.svg';
- const expandAllImage = this.props.theme !== 'vscode-dark' ? './images/ExpandAll/ExpandAll_16x_vscode.svg' :
- './images/ExpandAll/ExpandAll_16x_vscode_dark.svg';
- const interruptImage = this.props.theme !== 'vscode-dark' ? './images/Interrupt/Interrupt_16x_vscode.svg' :
- './images/Interrupt/Interrupt_16x_vscode_dark.svg';
-
  const progressBar = this.state.busy && !this.props.ignoreProgress ? <Progress /> : undefined;
 
  return (
@@ -78,28 +61,28 @@ export class MainPanel extends React.Component<IMainPanelProps, IMainPanelState>
  <MenuBar theme={this.props.theme} stylePosition='top-fixed'>
  {this.renderExtraButtons()}
  <CellButton theme={this.props.theme} onClick={this.collapseAll} disabled={!this.canCollapseAll()} tooltip={getLocString('DataScience.collapseAll', 'Collapse all cell inputs')}>
- <RelativeImage class='cell-button-image' path={collapseAllImage}/>
+ <Image theme={this.props.theme} class='cell-button-image' image={ImageName.CollapseAll}/>
  </CellButton>
  <CellButton theme={this.props.theme} onClick={this.expandAll} disabled={!this.canExpandAll()} tooltip={getLocString('DataScience.expandAll', 'Expand all cell inputs')}>
- <RelativeImage class='cell-button-image' path={expandAllImage}/>
+ <Image theme={this.props.theme} class='cell-button-image' image={ImageName.ExpandAll}/>
  </CellButton>
  <CellButton theme={this.props.theme} onClick={this.export} disabled={!this.canExport()} tooltip={getLocString('DataScience.export', 'Export as Jupyter Notebook')}>
- <RelativeImage class='cell-button-image' path={saveAsImage}/>
+ <Image theme={this.props.theme} class='cell-button-image' image={ImageName.SaveAs}/>
  </CellButton>
  <CellButton theme={this.props.theme} onClick={this.restartKernel} tooltip={getLocString('DataScience.restartServer', 'Restart iPython Kernel')}>
- <RelativeImage class='cell-button-image' path={restartImage}/>
+ <Image theme={this.props.theme} class='cell-button-image' image={ImageName.Restart}/>
  </CellButton>
  <CellButton theme={this.props.theme} onClick={this.interruptKernel} tooltip={getLocString('DataScience.interruptKernel', 'Interrupt iPython Kernel')}>
- <RelativeImage class='cell-button-image' path={interruptImage}/>
+ <Image theme={this.props.theme} class='cell-button-image' image={ImageName.Interrupt}/>
  </CellButton>
  <CellButton theme={this.props.theme} onClick={this.undo} disabled={!this.canUndo()} tooltip={getLocString('DataScience.undo', 'Undo')}>
- <RelativeImage class='cell-button-image' path={undoImage}/>
+ <Image theme={this.props.theme} class='cell-button-image' image={ImageName.Undo}/>
  </CellButton>
  <CellButton theme={this.props.theme} onClick={this.redo} disabled={!this.canRedo()} tooltip={getLocString('DataScience.redo', 'Redo')}>
- <RelativeImage class='cell-button-image' path={redoImage}/>
+ <Image theme={this.props.theme} class='cell-button-image' image={ImageName.Redo}/>
  </CellButton>
  <CellButton theme={this.props.theme} onClick={this.clearAll} tooltip={getLocString('DataScience.clearAll', 'Remove All Cells')}>
- <RelativeImage class='cell-button-image' path={clearButtonImage}/>
+ <Image theme={this.props.theme} class='cell-button-image' image={ImageName.Cancel}/>
  </CellButton>
  </MenuBar>
  <div className='top-spacing'/>

src/datascience-ui/history-react/MainPanel.tsx

@@ -6,22 +6,21 @@ import './cell.css';
 import { nbformat } from '@jupyterlab/coreutils';
 import ansiToHtml from 'ansi-to-html';
 import * as React from 'react';
-
-// tslint:disable-next-line:match-default-export-name import-name
 import JSONTree from 'react-json-tree';
 
 import { concatMultilineString } from '../../client/datascience/common';
 import { CellState, ICell } from '../../client/datascience/types';
 import { getLocString } from '../react-common/locReactSide';
-import { RelativeImage } from '../react-common/relativeImage';
 import { CellButton } from './cellButton';
 import { Code } from './code';
 import { CollapseButton } from './collapseButton';
 import { ExecutionCount } from './executionCount';
+import { Image, ImageName } from './image';
 import { MenuBar } from './menuBar';
 import { SysInfo } from './sysInfo';
 import { displayOrder, richestMimetype, transforms } from './transforms';
 
+// tslint:disable-next-line:match-default-export-name import-name
 interface ICellProps {
  cellVM: ICellViewModel;
  theme: string;
@@ -89,19 +88,15 @@ export class Cell extends React.Component<ICellProps> {
  }
 
  private renderNormalCell() {
- const clearButtonImage = this.props.theme !== 'vscode-dark' ? './images/Cancel/Cancel_16xMD_vscode.svg' :
- './images/Cancel/Cancel_16xMD_vscode_dark.svg';
- const gotoSourceImage = this.props.theme !== 'vscode-dark' ? './images/GoToSourceCode/GoToSourceCode_16x_vscode.svg' :
- './images/GoToSourceCode/GoToSourceCode_16x_vscode_dark.svg';
 
  return (
  <div className='cell-wrapper'>
  <MenuBar theme={this.props.theme}>
  <CellButton theme={this.props.theme} onClick={this.props.delete} tooltip={this.getDeleteString()}>
- <RelativeImage class='cell-button-image' path={clearButtonImage} />
+ <Image theme={this.props.theme} class='cell-button-image' image={ImageName.Cancel}/>
  </CellButton>
  <CellButton theme={this.props.theme} onClick={this.props.gotoCode} tooltip={this.getGoToCodeString()}>
- <RelativeImage class='cell-button-image' path={gotoSourceImage} />
+ <Image theme={this.props.theme} class='cell-button-image' image={ImageName.GoToSourceCode}/>
  </CellButton>
  </MenuBar>
  <div className='cell-outer'>