From f6249641f2fd276e7687fea618a86729e0d57f1f Mon Sep 17 00:00:00 2001 From: Martin Aeschlimann Date: Fri, 27 Nov 2020 11:36:43 +0100 Subject: [PATCH 1/3] externalize notebook items --- src/vs/platform/theme/common/themeService.ts | 3 ++ .../notebook/browser/contrib/coreActions.ts | 32 +++++++++---------- .../notebook/browser/contrib/fold/folding.ts | 2 +- .../browser/contrib/status/editorStatus.ts | 7 ++-- .../notebook/browser/diff/cellComponents.ts | 10 +++--- .../browser/diff/notebookDiffActions.ts | 10 +++--- .../notebook/browser/notebookEditorWidget.ts | 5 +-- .../contrib/notebook/browser/notebookIcons.ts | 30 +++++++++++++++++ .../browser/view/renderers/cellOutput.ts | 4 ++- .../browser/view/renderers/cellRenderer.ts | 6 ++-- .../browser/view/renderers/markdownCell.ts | 8 +++-- 11 files changed, 80 insertions(+), 37 deletions(-) create mode 100644 src/vs/workbench/contrib/notebook/browser/notebookIcons.ts diff --git a/src/vs/platform/theme/common/themeService.ts b/src/vs/platform/theme/common/themeService.ts index 7650acb28d2..f82c45767e5 100644 --- a/src/vs/platform/theme/common/themeService.ts +++ b/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)) { diff --git a/src/vs/workbench/contrib/notebook/browser/contrib/coreActions.ts b/src/vs/workbench/contrib/notebook/browser/contrib/coreActions.ts index ca11f084885..acf32d1a96a 100644 --- a/src/vs/workbench/contrib/notebook/browser/contrib/coreActions.ts +++ b/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 { } ] }, - icon: Codicon.play + icon: icons.executeIcon }); } @@ -271,7 +271,7 @@ registerAction2(class extends NotebookCellAction { 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), diff --git a/src/vs/workbench/contrib/notebook/browser/contrib/fold/folding.ts b/src/vs/workbench/contrib/notebook/browser/contrib/fold/folding.ts index 0e4f30a001d..0235b4431fb 100644 --- a/src/vs/workbench/contrib/notebook/browser/contrib/fold/folding.ts +++ b/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')) { diff --git a/src/vs/workbench/contrib/notebook/browser/contrib/status/editorStatus.ts b/src/vs/workbench/contrib/notebook/browser/contrib/status/editorStatus.ts index 9d8041863b7..2f32225cbb7 100644 --- a/src/vs/workbench/contrib/notebook/browser/contrib/status/editorStatus.ts +++ b/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) }] }; diff --git a/src/vs/workbench/contrib/notebook/browser/diff/cellComponents.ts b/src/vs/workbench/contrib/notebook/browser/diff/cellComponents.ts index f18929bbd0e..f526080b2e1 100644 --- a/src/vs/workbench/contrib/notebook/browser/diff/cellComponents.ts +++ b/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))); } } } diff --git a/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffActions.ts b/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffActions.ts index bf5df7503ae..cb8709d167d 100644 --- a/src/vs/workbench/contrib/notebook/browser/diff/notebookDiffActions.ts +++ b/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 diff --git a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts b/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts index a2a8010ae2a..c8a7a459f66 100644 --- a/src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts +++ b/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) }] }; diff --git a/src/vs/workbench/contrib/notebook/browser/notebookIcons.ts b/src/vs/workbench/contrib/notebook/browser/notebookIcons.ts new file mode 100644 index 00000000000..f40d89b4e1d --- /dev/null +++ b/src/vs/workbench/contrib/notebook/browser/notebookIcons.ts @@ -0,0 +1,30 @@ +/*--------------------------------------------------------------------------------------------- + * 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-execute', 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 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.')); diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellOutput.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellOutput.ts index f2dbc30f49e..b0f47bb4817 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellOutput.ts +++ b/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); diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts index 853f0351a2d..7ffaeaadece 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts +++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts @@ -49,6 +49,8 @@ import { MarkdownCellViewModel } from 'vs/workbench/contrib/notebook/browser/vie import { CellViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/notebookViewModel'; import { CellEditType, CellKind, NotebookCellMetadata, NotebookCellRunState, NotebookCellsChangeType, ShowCellStatusBarKey } from 'vs/workbench/contrib/notebook/common/notebookCommon'; import { CodiconActionViewItem, createAndFillInActionBarActionsWithVerticalSeparators, VerticalSeparator, VerticalSeparatorViewItem } from './cellActionView'; +import { ThemeIcon } from 'vs/platform/theme/common/themeService'; +import { unfoldIcon } from 'vs/workbench/contrib/notebook/browser/notebookIcons'; const $ = DOM.$; @@ -357,8 +359,8 @@ abstract class AbstractCellRenderer { } protected setupCollapsedPart(container: HTMLElement): { collapsedPart: HTMLElement, expandButton: HTMLElement } { - const collapsedPart = DOM.append(container, $('.cell.cell-collapsed-part', undefined, ...renderCodicons('$(unfold)'))); - const expandButton = collapsedPart.querySelector('.codicon') as HTMLElement; + const collapsedPart = DOM.append(container, $('.cell.cell-collapsed-part', undefined, $('span.expandButton' + ThemeIcon.asCSSSelector(unfoldIcon)))); + const expandButton = collapsedPart.querySelector('.expandButton') as HTMLElement; const keybinding = this.keybindingService.lookupKeybinding(EXPAND_CELL_CONTENT_COMMAND_ID); let title = localize('cellExpandButtonLabel', "Expand"); if (keybinding) { diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/markdownCell.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/markdownCell.ts index a22aa498c49..8670a3c4a62 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/renderers/markdownCell.ts +++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/markdownCell.ts @@ -6,7 +6,6 @@ import * as DOM from 'vs/base/browser/dom'; import { raceCancellation } from 'vs/base/common/async'; import { CancellationTokenSource } from 'vs/base/common/cancellation'; -import { renderCodicons } from 'vs/base/browser/codicons'; import { Disposable, DisposableStore, IDisposable, toDisposable } from 'vs/base/common/lifecycle'; import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget'; import { IEditorOptions } from 'vs/editor/common/config/editorOptions'; @@ -22,6 +21,9 @@ import { EditorContextKeys } from 'vs/editor/common/editorContextKeys'; import { getExecuteCellPlaceholder, getResizesObserver } from 'vs/workbench/contrib/notebook/browser/view/renderers/cellWidgets'; import { INotebookCellStatusBarService } from 'vs/workbench/contrib/notebook/common/notebookCellStatusBarService'; import { NotebookCellsChangeType } from 'vs/workbench/contrib/notebook/common/notebookCommon'; +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'; export class StatefulMarkdownCell extends Disposable { @@ -353,10 +355,10 @@ export class StatefulMarkdownCell extends Disposable { this.templateData.foldingIndicator.innerText = ''; break; case CellFoldingState.Collapsed: - DOM.reset(this.templateData.foldingIndicator, ...renderCodicons('$(chevron-right)')); + DOM.reset(this.templateData.foldingIndicator, ...renderCodicons(ThemeIcon.asCodiconLabel(collapsedIcon))); break; case CellFoldingState.Expanded: - DOM.reset(this.templateData.foldingIndicator, ...renderCodicons('$(chevron-down)')); + DOM.reset(this.templateData.foldingIndicator, ...renderCodicons(ThemeIcon.asCodiconLabel(expandedIcon))); break; default: From fddc9bb221d60bbb76abae4b1378141325a1bbe4 Mon Sep 17 00:00:00 2001 From: Martin Aeschlimann Date: Fri, 27 Nov 2020 11:46:02 +0100 Subject: [PATCH 2/3] success/error icons --- src/vs/workbench/contrib/notebook/browser/notebookIcons.ts | 4 +++- .../contrib/notebook/browser/view/renderers/cellRenderer.ts | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/vs/workbench/contrib/notebook/browser/notebookIcons.ts b/src/vs/workbench/contrib/notebook/browser/notebookIcons.ts index f40d89b4e1d..f0005149142 100644 --- a/src/vs/workbench/contrib/notebook/browser/notebookIcons.ts +++ b/src/vs/workbench/contrib/notebook/browser/notebookIcons.ts @@ -7,7 +7,6 @@ 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.')); @@ -23,6 +22,9 @@ export const clearIcon = registerIcon('notebook-clear', Codicon.clearAll, locali 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.')); diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts index 7ffaeaadece..6bb372a25f0 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts +++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts @@ -50,7 +50,7 @@ import { CellViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/n import { CellEditType, CellKind, NotebookCellMetadata, NotebookCellRunState, NotebookCellsChangeType, ShowCellStatusBarKey } from 'vs/workbench/contrib/notebook/common/notebookCommon'; import { CodiconActionViewItem, createAndFillInActionBarActionsWithVerticalSeparators, VerticalSeparator, VerticalSeparatorViewItem } from './cellActionView'; import { ThemeIcon } from 'vs/platform/theme/common/themeService'; -import { unfoldIcon } from 'vs/workbench/contrib/notebook/browser/notebookIcons'; +import { errorStateIcon, successStateIcon, unfoldIcon } from 'vs/workbench/contrib/notebook/browser/notebookIcons'; const $ = DOM.$; @@ -1050,9 +1050,9 @@ export class RunStateRenderer { } if (runState === NotebookCellRunState.Success) { - DOM.reset(this.element, ...renderCodicons('$(check)')); + DOM.reset(this.element, ...renderCodicons(ThemeIcon.asCodiconLabel(successStateIcon))); } else if (runState === NotebookCellRunState.Error) { - DOM.reset(this.element, ...renderCodicons('$(error)')); + DOM.reset(this.element, ...renderCodicons(ThemeIcon.asCodiconLabel(errorStateIcon))); } else if (runState === NotebookCellRunState.Running) { DOM.reset(this.element, ...renderCodicons('$(sync~spin)')); From 4e45d27a72f55ef49213800d73badeb124d6ff7e Mon Sep 17 00:00:00 2001 From: Martin Aeschlimann Date: Fri, 27 Nov 2020 12:12:54 +0100 Subject: [PATCH 3/3] fix stopIcon name --- src/vs/workbench/contrib/notebook/browser/notebookIcons.ts | 2 +- test/smoke/src/areas/notebook/notebook.test.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/contrib/notebook/browser/notebookIcons.ts b/src/vs/workbench/contrib/notebook/browser/notebookIcons.ts index f0005149142..c0d6564bdad 100644 --- a/src/vs/workbench/contrib/notebook/browser/notebookIcons.ts +++ b/src/vs/workbench/contrib/notebook/browser/notebookIcons.ts @@ -11,7 +11,7 @@ export const configureKernelIcon = registerIcon('notebook-kernel-configure', Cod 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-execute', Codicon.primitiveSquare, localize('stopIcon', 'Icon to stop an execution 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.')); diff --git a/test/smoke/src/areas/notebook/notebook.test.ts b/test/smoke/src/areas/notebook/notebook.test.ts index bf037e68594..dd739a8ae8e 100644 --- a/test/smoke/src/areas/notebook/notebook.test.ts +++ b/test/smoke/src/areas/notebook/notebook.test.ts @@ -67,7 +67,7 @@ export function setup() { const app = this.app as Application; await app.workbench.notebook.openNotebook(); await app.workbench.notebook.insertNotebookCell('code'); - await app.workbench.notebook.executeCellAction('.notebook-editor .monaco-list-row.focused div.monaco-toolbar .codicon-debug'); + await app.workbench.notebook.executeCellAction('.notebook-editor .monaco-list-row.focused div.monaco-toolbar .codicon-notebook-execute'); await app.workbench.notebook.waitForActiveCellEditorContents('test'); }); });