Merge pull request #111408 from microsoft/aeschli/notebookIcons

externalize notebook items

src/vs/platform/theme/common/themeService.ts

@@ -100,6 +100,9 @@ export namespace ThemeIcon {
  };
  }
 
+ export function asCodiconLabel(icon: ThemeIcon): string {
+ return '$(' + icon.id + ')';
+ }
 
  export function revive(icon: any): ThemeIcon | undefined {
  if (ThemeIcon.isThemeIcon(icon)) {

src/vs/workbench/contrib/notebook/browser/contrib/coreActions.ts

@@ -3,7 +3,6 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { Codicon } from 'vs/base/common/codicons';
 import * as glob from 'vs/base/common/glob';
 import { KeyChord, KeyCode, KeyMod } from 'vs/base/common/keyCodes';
 import * as platform from 'vs/base/common/platform';
@@ -28,6 +27,7 @@ import { CellEditType, CellKind, ICellEditOperation, ICellRange, isDocumentExclu
 import { INotebookService } from 'vs/workbench/contrib/notebook/common/notebookService';
 import { IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
+import * as icons from 'vs/workbench/contrib/notebook/browser/notebookIcons';
 
 // Notebook Commands
 const EXECUTE_NOTEBOOK_COMMAND_ID = 'notebook.execute';
@@ -237,7 +237,7 @@ registerAction2(class extends NotebookCellAction<ICellRange> {
  }
  ]
  },
- icon: Codicon.play
+ icon: icons.executeIcon
  });
  }
 
@@ -271,7 +271,7 @@ registerAction2(class extends NotebookCellAction<ICellRange> {
  super({
  id: CANCEL_CELL_COMMAND_ID,
  title: localize('notebookActions.cancel', "Stop Cell Execution"),
- icon: Codicon.primitiveSquare,
+ icon: icons.stopIcon,
  description: {
  description: localize('notebookActions.execute', "Execute Cell"),
  args: [
@@ -330,7 +330,7 @@ export class ExecuteCellAction extends MenuItemAction {
  {
  id: EXECUTE_CELL_COMMAND_ID,
  title: localize('notebookActions.executeCell', "Execute Cell"),
- icon: Codicon.play
+ icon: icons.executeIcon
  },
  undefined,
  { shouldForwardArgs: true },
@@ -348,7 +348,7 @@ export class CancelCellAction extends MenuItemAction {
  {
  id: CANCEL_CELL_COMMAND_ID,
  title: localize('notebookActions.CancelCell', "Cancel Execution"),
- icon: Codicon.primitiveSquare
+ icon: icons.stopIcon
  },
  undefined,
  { shouldForwardArgs: true },
@@ -366,7 +366,7 @@ export class DeleteCellAction extends MenuItemAction {
  {
  id: DELETE_CELL_COMMAND_ID,
  title: localize('notebookActions.deleteCell', "Delete Cell"),
- icon: Codicon.trash,
+ icon: icons.deleteCellIcon,
  },
  undefined,
  { shouldForwardArgs: true },
@@ -512,7 +512,7 @@ MenuRegistry.appendMenuItem(MenuId.EditorTitle, {
  command: {
  id: EXECUTE_NOTEBOOK_COMMAND_ID,
  title: localize('notebookActions.menu.executeNotebook', "Execute Notebook (Run all cells)"),
- icon: Codicon.runAll,
+ icon: icons.executeAllIcon,
  },
  order: -1,
  group: 'navigation',
@@ -523,7 +523,7 @@ MenuRegistry.appendMenuItem(MenuId.EditorTitle, {
  command: {
  id: CANCEL_NOTEBOOK_COMMAND_ID,
  title: localize('notebookActions.menu.cancelNotebook', "Stop Notebook Execution"),
- icon: Codicon.primitiveSquare,
+ icon: icons.stopIcon,
  },
  order: -1,
  group: 'navigation',
@@ -840,7 +840,7 @@ registerAction2(class extends NotebookCellAction {
  order: CellToolbarOrder.EditCell,
  group: CELL_TITLE_CELL_GROUP_ID
  },
- icon: Codicon.pencil,
+ icon: icons.editIcon,
  });
  }
 
@@ -864,7 +864,7 @@ registerAction2(class extends NotebookCellAction {
  order: CellToolbarOrder.SaveCell,
  group: CELL_TITLE_CELL_GROUP_ID
  },
- icon: Codicon.check,
+ icon: icons.stopEditIcon,
  keybinding: {
  when: ContextKeyExpr.and(
  NOTEBOOK_EDITOR_FOCUSED,
@@ -906,7 +906,7 @@ registerAction2(class extends NotebookCellAction {
  when: ContextKeyExpr.and(NOTEBOOK_EDITOR_FOCUSED, ContextKeyExpr.not(InputFocusedContextKey)),
  weight: KeybindingWeight.WorkbenchContrib
  },
- icon: Codicon.trash
+ icon: icons.deleteCellIcon
  });
  }
 
@@ -950,7 +950,7 @@ registerAction2(class extends NotebookCellAction {
  {
  id: MOVE_CELL_UP_COMMAND_ID,
  title: localize('notebookActions.moveCellUp', "Move Cell Up"),
- icon: Codicon.arrowUp,
+ icon: icons.moveUpIcon,
  keybinding: {
  primary: KeyMod.Alt | KeyCode.UpArrow,
  when: ContextKeyExpr.and(NOTEBOOK_EDITOR_FOCUSED, InputFocusedContext.toNegated()),
@@ -970,7 +970,7 @@ registerAction2(class extends NotebookCellAction {
  {
  id: MOVE_CELL_DOWN_COMMAND_ID,
  title: localize('notebookActions.moveCellDown', "Move Cell Down"),
- icon: Codicon.arrowDown,
+ icon: icons.moveDownIcon,
  keybinding: {
  primary: KeyMod.Alt | KeyCode.DownArrow,
  when: ContextKeyExpr.and(NOTEBOOK_EDITOR_FOCUSED, InputFocusedContext.toNegated()),
@@ -1413,7 +1413,7 @@ registerAction2(class extends NotebookCellAction {
  primary: KeyMod.Alt | KeyCode.Delete,
  weight: KeybindingWeight.WorkbenchContrib
  },
- icon: Codicon.clearAll
+ icon: icons.clearIcon
  });
  }
 
@@ -1563,7 +1563,7 @@ registerAction2(class extends NotebookAction {
  group: 'navigation',
  order: 0
  },
- icon: Codicon.clearAll
+ icon: icons.clearIcon
  });
  }
 
@@ -1623,7 +1623,7 @@ registerAction2(class extends NotebookCellAction {
  // title: localize('notebookActions.joinCellBelow', "Join with Next Cell")
  // }
  },
- icon: Codicon.splitVertical,
+ icon: icons.splitCellIcon,
  keybinding: {
  when: ContextKeyExpr.and(NOTEBOOK_EDITOR_FOCUSED, NOTEBOOK_EDITOR_EDITABLE, NOTEBOOK_CELL_EDITABLE, NOTEBOOK_CELL_EDITOR_FOCUSED, NOTEBOOK_EDITOR_CURSOR_BEGIN_END.toNegated()),
  primary: KeyChord(KeyMod.CtrlCmd | KeyCode.KEY_K, KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.US_BACKSLASH),

src/vs/workbench/contrib/notebook/browser/contrib/fold/folding.ts

@@ -116,7 +116,7 @@ export class FoldingController extends Disposable implements INotebookEditorCont
 
  const target = e.event.target as HTMLElement;
 
- if (target.classList.contains('codicon-chevron-down') || target.classList.contains('codicon-chevron-right')) {
+ if (target.classList.contains('codicon-notebook-collapsed') || target.classList.contains('codicon-notebook-expanded')) {
  const parent = target.parentElement as HTMLElement;
 
  if (!parent.classList.contains('notebook-folding-indicator')) {

src/vs/workbench/contrib/notebook/browser/contrib/status/editorStatus.ts

@@ -21,7 +21,8 @@ import { Disposable, DisposableStore, MutableDisposable } from 'vs/base/common/l
 import { IStatusbarEntryAccessor, IStatusbarService, StatusbarAlignment } from 'vs/workbench/services/statusbar/common/statusbar';
 import { NotebookKernelProviderAssociation, NotebookKernelProviderAssociations, notebookKernelProviderAssociationsSettingId } from 'vs/workbench/contrib/notebook/browser/notebookKernelAssociation';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
-import { Codicon } from 'vs/base/common/codicons';
+import { configureKernelIcon, selectKernelIcon } from 'vs/workbench/contrib/notebook/browser/notebookIcons';
+import { ThemeIcon } from 'vs/platform/theme/common/themeService';
 
 
 registerAction2(class extends Action2 {
@@ -31,7 +32,7 @@ registerAction2(class extends Action2 {
  category: NOTEBOOK_ACTIONS_CATEGORY,
  title: { value: nls.localize('notebookActions.selectKernel', "Select Notebook Kernel"), original: 'Select Notebook Kernel' },
  precondition: NOTEBOOK_IS_ACTIVE_EDITOR,
- icon: Codicon.serverEnvironment,
+ icon: selectKernelIcon,
  f1: true
  });
  }
@@ -74,7 +75,7 @@ registerAction2(class extends Action2 {
  a.resolve(editor.uri!, editor.getId(), tokenSource.token);
  },
  buttons: [{
- iconClass: 'codicon-settings-gear',
+ iconClass: ThemeIcon.asClassName(configureKernelIcon),
  tooltip: nls.localize('notebook.promptKernel.setDefaultTooltip', "Set as default kernel provider for '{0}'", editor.viewModel!.viewType)
  }]
  };

src/vs/workbench/contrib/notebook/browser/diff/cellComponents.ts

@@ -12,7 +12,6 @@ import { CellDiffRenderTemplate, CellDiffViewModelLayoutChangeEvent, DIFF_CELL_M
 import { EDITOR_BOTTOM_PADDING } from 'vs/workbench/contrib/notebook/browser/constants';
 import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget';
 import { DiffEditorWidget } from 'vs/editor/browser/widget/diffEditorWidget';
-import { renderCodicons } from 'vs/base/browser/codicons';
 import { IModelService } from 'vs/editor/common/services/modelService';
 import { IModeService } from 'vs/editor/common/services/modeService';
 import { format } from 'vs/base/common/jsonFormatter';
@@ -29,6 +28,9 @@ import { createAndFillInActionBarActions } from 'vs/platform/actions/browser/men
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 import { CodiconActionViewItem } from 'vs/workbench/contrib/notebook/browser/view/renderers/cellActionView';
 import { getEditorTopPadding } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
+import { ThemeIcon } from 'vs/platform/theme/common/themeService';
+import { collapsedIcon, expandedIcon } from 'vs/workbench/contrib/notebook/browser/notebookIcons';
+import { renderCodicons } from 'vs/base/browser/codicons';
 
 const fixedEditorOptions: IEditorOptions = {
  padding: {
@@ -146,7 +148,7 @@ class PropertyHeader extends Disposable {
 
  const target = e.event.target as HTMLElement;
 
- if (target.classList.contains('codicon-chevron-down') || target.classList.contains('codicon-chevron-right')) {
+ if (target.classList.contains('codicon-notebook-collapsed') || target.classList.contains('codicon-notebook-expanded')) {
  const parent = target.parentElement as HTMLElement;
 
  if (!parent) {
@@ -198,9 +200,9 @@ class PropertyHeader extends Disposable {
 
  private _updateFoldingIcon() {
  if (this.accessor.getFoldingState(this.cell) === PropertyFoldingState.Collapsed) {
- DOM.reset(this._foldingIndicator, ...renderCodicons('$(chevron-right)'));
+ DOM.reset(this._foldingIndicator, ...renderCodicons(ThemeIcon.asCodiconLabel(collapsedIcon)));
  } else {
- DOM.reset(this._foldingIndicator, ...renderCodicons('$(chevron-down)'));
+ DOM.reset(this._foldingIndicator, ...renderCodicons(ThemeIcon.asCodiconLabel(expandedIcon)));
  }
  }
 }

src/vs/workbench/contrib/notebook/browser/diff/notebookDiffActions.ts

@@ -3,7 +3,6 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { Codicon } from 'vs/base/common/codicons';
 import { IBulkEditService, ResourceTextEdit } from 'vs/editor/browser/services/bulkEditService';
 import { localize } from 'vs/nls';
 import { Action2, MenuId, registerAction2 } from 'vs/platform/actions/common/actions';
@@ -12,6 +11,7 @@ import { ActiveEditorContext, viewColumnToEditorGroup } from 'vs/workbench/commo
 import { CellDiffViewModel } from 'vs/workbench/contrib/notebook/browser/diff/celllDiffViewModel';
 import { NotebookTextDiffEditor } from 'vs/workbench/contrib/notebook/browser/diff/notebookTextDiffEditor';
 import { NotebookDiffEditorInput } from 'vs/workbench/contrib/notebook/browser/notebookDiffEditorInput';
+import { openAsTextIcon, revertIcon } from 'vs/workbench/contrib/notebook/browser/notebookIcons';
 import { IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
 
@@ -21,7 +21,7 @@ registerAction2(class extends Action2 {
  constructor() {
  super({
  id: 'notebook.diff.switchToText',
- icon: Codicon.fileCode,
+ icon: openAsTextIcon,
  title: { value: localize('notebook.diff.switchToText', "Open Text Diff Editor"), original: 'Open Text Diff Editor' },
  precondition: ActiveEditorContext.isEqualTo(NotebookTextDiffEditor.ID),
  menu: [{
@@ -57,7 +57,7 @@ registerAction2(class extends Action2 {
  {
  id: 'notebook.diff.cell.revertMetadata',
  title: localize('notebook.diff.cell.revertMetadata', "Revert Metadata"),
- icon: Codicon.discard,
+ icon: revertIcon,
  f1: false,
  menu: {
  id: MenuId.NotebookDiffCellMetadataTitle
@@ -87,7 +87,7 @@ registerAction2(class extends Action2 {
  {
  id: 'notebook.diff.cell.revertOutputs',
  title: localize('notebook.diff.cell.revertOutputs', "Revert Outputs"),
- icon: Codicon.discard,
+ icon: revertIcon,
  f1: false,
  menu: {
  id: MenuId.NotebookDiffCellOutputsTitle
@@ -117,7 +117,7 @@ registerAction2(class extends Action2 {
  {
  id: 'notebook.diff.cell.revertInput',
  title: localize('notebook.diff.cell.revertInput', "Revert Input"),
- icon: Codicon.discard,
+ icon: revertIcon,
  f1: false,
  menu: {
  id: MenuId.NotebookDiffCellInputTitle

src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts

@@ -35,7 +35,7 @@ import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
 import { IQuickInputService, IQuickPickItem, QuickPickInput } from 'vs/platform/quickinput/common/quickInput';
 import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage';
 import { contrastBorder, diffInserted, diffRemoved, editorBackground, errorForeground, focusBorder, foreground, listInactiveSelectionBackground, registerColor, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, textBlockQuoteBackground, textBlockQuoteBorder, textLinkActiveForeground, textLinkForeground, textPreformatForeground, transparent } from 'vs/platform/theme/common/colorRegistry';
-import { IColorTheme, IThemeService, registerThemingParticipant, ThemeColor } from 'vs/platform/theme/common/themeService';
+import { IColorTheme, IThemeService, registerThemingParticipant, ThemeColor, ThemeIcon } from 'vs/platform/theme/common/themeService';
 import { EditorMemento } from 'vs/workbench/browser/parts/editor/editorPane';
 import { IEditorMemento } from 'vs/workbench/common/editor';
 import { Memento, MementoObject } from 'vs/workbench/common/memento';
@@ -61,6 +61,7 @@ import { INotebookService } from 'vs/workbench/contrib/notebook/common/notebookS
 import { editorGutterModifiedBackground } from 'vs/workbench/contrib/scm/browser/dirtydiffDecorator';
 import { Webview } from 'vs/workbench/contrib/webview/browser/webview';
 import { IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService';
+import { configureKernelIcon } from 'vs/workbench/contrib/notebook/browser/notebookIcons';
 
 const $ = DOM.$;
 
@@ -1659,7 +1660,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
  this._activeKernelResolvePromise = this.activeKernel.resolve(this.viewModel!.uri, this.getId(), tokenSource.token);
  },
  buttons: [{
- iconClass: 'codicon-settings-gear',
+ iconClass: ThemeIcon.asClassName(configureKernelIcon),
  tooltip: nls.localize('notebook.promptKernel.setDefaultTooltip', "Set as default kernel provider for '{0}'", this.viewModel!.viewType)
  }]
  };

src/vs/workbench/contrib/notebook/browser/notebookIcons.ts

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Codicon } from 'vs/base/common/codicons';
+import { localize } from 'vs/nls';
+import { registerIcon } from 'vs/platform/theme/common/iconRegistry';
+
+export const configureKernelIcon = registerIcon('notebook-kernel-configure', Codicon.settingsGear, localize('configureKernel', 'Configure icon in kernel configuation widget in notebook editors.'));
+export const selectKernelIcon = registerIcon('notebook-kernel-select', Codicon.serverEnvironment, localize('selectKernelIcon', 'Configure icon to select a kernel in notebook editors.'));
+
+export const executeIcon = registerIcon('notebook-execute', Codicon.play, localize('executeIcon', 'Icon to execute in notebook editors.'));
+export const stopIcon = registerIcon('notebook-stop', Codicon.primitiveSquare, localize('stopIcon', 'Icon to stop an execution in notebook editors.'));
+export const deleteCellIcon = registerIcon('notebook-delete-cell', Codicon.trash, localize('deleteCellIcon', 'Icon to delete a cell in notebook editors.'));
+export const executeAllIcon = registerIcon('notebook-execute-all', Codicon.runAll, localize('executeAllIcon', 'Icon to execute all cells in notebook editors.'));
+export const editIcon = registerIcon('notebook-edit', Codicon.pencil, localize('editIcon', 'Icon to edit a cell in notebook editors.'));
+export const stopEditIcon = registerIcon('notebook-stop-edit', Codicon.check, localize('stopEditIcon', 'Icon to stop editing a cell in notebook editors.'));
+export const moveUpIcon = registerIcon('notebook-move-up', Codicon.arrowUp, localize('moveUpIcon', 'Icon to move a cell up in notebook editors.'));
+export const moveDownIcon = registerIcon('notebook-move-down', Codicon.arrowDown, localize('moveDownIcon', 'Icon to move a cell down in notebook editors.'));
+export const clearIcon = registerIcon('notebook-clear', Codicon.clearAll, localize('clearIcon', 'Icon to clear cell outputs in notebook editors.'));
+export const splitCellIcon = registerIcon('notebook-split-cell', Codicon.splitVertical, localize('splitCellIcon', 'Icon to split a cell in notebook editors.'));
+export const unfoldIcon = registerIcon('notebook-unfold', Codicon.unfold, localize('unfoldIcon', 'Icon to unfold a cell in notebook editors.'));
+
+export const successStateIcon = registerIcon('notebook-state-success', Codicon.check, localize('successStateIcon', 'Icon to indicate a success state in notebook editors.'));
+export const errorStateIcon = registerIcon('notebook-state-error', Codicon.error, localize('errorStateIcon', 'Icon to indicate a error state in notebook editors.'));
+
+export const collapsedIcon = registerIcon('notebook-collapsed', Codicon.chevronRight, localize('collapsedIcon', 'Icon to annotated a collapsed section in notebook editors.'));
+export const expandedIcon = registerIcon('notebook-expanded', Codicon.chevronDown, localize('expandedIcon', 'Icon to annotated a expanded section in notebook editors.'));
+export const openAsTextIcon = registerIcon('notebook-open-as-text', Codicon.fileCode, localize('openAsTextIcon', 'Icon to open the notebook in a text editor.'));
+export const revertIcon = registerIcon('notebook-revert', Codicon.discard, localize('revertIcon', 'Icon to revert in notebook editors.'));
+export const mimetypeIcon = registerIcon('notebook-mimetype', Codicon.code, localize('mimetypeIcon', 'Icon for a mime type notebook editors.'));

src/vs/workbench/contrib/notebook/browser/view/renderers/cellOutput.ts

@@ -21,6 +21,8 @@ import { IOpenerService } from 'vs/platform/opener/common/opener';
 import { ITextFileService } from 'vs/workbench/services/textfile/common/textfiles';
 import { format } from 'vs/base/common/jsonFormatter';
 import { applyEdits } from 'vs/base/common/jsonEdit';
+import { ThemeIcon } from 'vs/platform/theme/common/themeService';
+import { mimetypeIcon } from 'vs/workbench/contrib/notebook/browser/notebookIcons';
 
 const OUTPUT_COUNT_LIMIT = 500;
 
@@ -69,7 +71,7 @@ export class OutputElement extends Disposable {
  if (mimeTypes.length > 1) {
  outputItemDiv.style.position = 'relative';
  const mimeTypePicker = DOM.$('.multi-mimetype-output');
- mimeTypePicker.classList.add('codicon', 'codicon-code');
+ mimeTypePicker.classList.add(...ThemeIcon.asClassNameArray(mimetypeIcon));
  mimeTypePicker.tabIndex = 0;
  mimeTypePicker.title = nls.localize('mimeTypePicker', "Choose a different output mimetype, available mimetypes: {0}", mimeTypes.map(mimeType => mimeType.mimeType).join(', '));
  outputItemDiv.appendChild(mimeTypePicker);