From f4104e8cb3e1ee5711ab89a6e46f921907ea001d Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Fri, 8 Dec 2023 11:33:50 +0100 Subject: [PATCH 01/19] Added support for custom icons in various editor inputs --- src/vs/base/browser/ui/iconLabel/iconlabel.css | 5 +++++ src/vs/workbench/browser/labels.ts | 12 +++++++++++- .../browser/parts/editor/multiEditorTabsControl.ts | 3 ++- .../browser/parts/editor/singleEditorTabsControl.ts | 1 + src/vs/workbench/common/editor/editorInput.ts | 9 +++++++++ .../contrib/files/browser/views/openEditorsView.ts | 3 ++- .../multiDiffEditor/browser/multiDiffEditorInput.ts | 6 ++++++ .../searchEditor/browser/searchEditorInput.ts | 6 ++++++ .../preferences/browser/keybindingsEditorInput.ts | 6 ++++++ .../preferences/common/preferencesEditorInput.ts | 6 ++++++ 10 files changed, 54 insertions(+), 3 deletions(-) diff --git a/src/vs/base/browser/ui/iconLabel/iconlabel.css b/src/vs/base/browser/ui/iconLabel/iconlabel.css index 47f8891703c46..a9f5a4e432fa0 100644 --- a/src/vs/base/browser/ui/iconLabel/iconlabel.css +++ b/src/vs/base/browser/ui/iconLabel/iconlabel.css @@ -31,6 +31,11 @@ flex-shrink: 0; /* fix for https://github.com/microsoft/vscode/issues/13787 */ } +.monaco-icon-label.product-icon::before{ + font-family: 'codicon'; + font-size: 16px; +} + .monaco-icon-label-container.disabled { color: var(--vscode-disabledForeground); } diff --git a/src/vs/workbench/browser/labels.ts b/src/vs/workbench/browser/labels.ts index 7fe92930a830c..87b5b094c880e 100644 --- a/src/vs/workbench/browser/labels.ts +++ b/src/vs/workbench/browser/labels.ts @@ -23,6 +23,7 @@ import { Disposable, dispose, IDisposable, MutableDisposable } from 'vs/base/com import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { normalizeDriveLetter } from 'vs/base/common/labels'; import { IRange } from 'vs/editor/common/core/range'; +import { ThemeIcon } from 'vs/base/common/themables'; export interface IResourceLabelProps { resource?: URI | { primary?: URI; secondary?: URI }; @@ -59,6 +60,11 @@ export interface IResourceLabelOptions extends IIconLabelValueOptions { * Will take the provided label as is and e.g. not override it for untitled files. */ readonly forceLabel?: boolean; + + /** + * Uses the provided icon instead of deriving a resource icon. + */ + readonly codIcon?: ThemeIcon; } export interface IFileLabelOptions extends IResourceLabelOptions { @@ -573,7 +579,11 @@ class ResourceLabelWidget extends IconLabel { if (this.options && !this.options.hideIcon) { if (!this.computedIconClasses) { - this.computedIconClasses = getIconClasses(this.modelService, this.languageService, resource, this.options.fileKind); + if (this.options.codIcon) { + this.computedIconClasses = ['codicon-' + this.options.codIcon.id, 'product-icon']; + } else { + this.computedIconClasses = getIconClasses(this.modelService, this.languageService, resource, this.options.fileKind); + } } iconLabelOptions.extraClasses = this.computedIconClasses.slice(0); diff --git a/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts b/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts index cd7b815c81189..e548cb378a67f 100644 --- a/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts +++ b/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts @@ -1462,7 +1462,8 @@ export class MultiEditorTabsControl extends EditorTabsControl { fileDecorations: { colors: fileDecorationColors, badges: fileDecorationBadges - } + }, + codIcon: editor.getIcon(), } ); diff --git a/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts b/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts index c28fde093e81c..377fac7a22c7a 100644 --- a/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts +++ b/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts @@ -323,6 +323,7 @@ export class SingleEditorTabsControl extends EditorTabsControl { colors: Boolean(options.decorations?.colors), badges: Boolean(options.decorations?.badges) }, + codIcon: editor.getIcon(), } ); diff --git a/src/vs/workbench/common/editor/editorInput.ts b/src/vs/workbench/common/editor/editorInput.ts index 556042ce89ea3..3aa427413f9c9 100644 --- a/src/vs/workbench/common/editor/editorInput.ts +++ b/src/vs/workbench/common/editor/editorInput.ts @@ -12,6 +12,7 @@ import { isEqual } from 'vs/base/common/resources'; import { ConfirmResult } from 'vs/platform/dialogs/common/dialogs'; import { IMarkdownString } from 'vs/base/common/htmlContent'; import { IDisposable } from 'vs/base/common/lifecycle'; +import { ThemeIcon } from 'vs/base/common/themables'; export interface IEditorCloseHandler { @@ -163,6 +164,14 @@ export abstract class EditorInput extends AbstractEditorInput { return this.getTitle(Verbosity.SHORT); } + /** + * Returns the icon which represents this editor input. + * If undefined, the default icon will be used. + */ + getIcon(): ThemeIcon | undefined { + return undefined; + } + /** * Returns a descriptor suitable for telemetry events. * diff --git a/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts b/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts index 61a31c7f6382f..11c59fb53155b 100644 --- a/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts +++ b/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts @@ -650,7 +650,8 @@ class OpenEditorRenderer implements IListRenderer().explorer.decorations, - title: editor.getTitle(Verbosity.LONG) + title: editor.getTitle(Verbosity.LONG), + codIcon: editor.getIcon() }); const editorAction = openedEditor.isSticky() ? this.unpinEditorAction : this.closeEditorAction; if (!templateData.actionBar.hasAction(editorAction)) { diff --git a/src/vs/workbench/contrib/multiDiffEditor/browser/multiDiffEditorInput.ts b/src/vs/workbench/contrib/multiDiffEditor/browser/multiDiffEditorInput.ts index 0821f0eba81a5..1b47ff7983574 100644 --- a/src/vs/workbench/contrib/multiDiffEditor/browser/multiDiffEditorInput.ts +++ b/src/vs/workbench/contrib/multiDiffEditor/browser/multiDiffEditorInput.ts @@ -4,10 +4,12 @@ *--------------------------------------------------------------------------------------------*/ import { LazyStatefulPromise, raceTimeout } from 'vs/base/common/async'; +import { Codicon } from 'vs/base/common/codicons'; import { onUnexpectedError } from 'vs/base/common/errors'; import { IMarkdownString } from 'vs/base/common/htmlContent'; import { IDisposable, DisposableStore, toDisposable } from 'vs/base/common/lifecycle'; import { deepClone } from 'vs/base/common/objects'; +import { ThemeIcon } from 'vs/base/common/themables'; import { isDefined, isObject } from 'vs/base/common/types'; import { URI } from 'vs/base/common/uri'; import { ConstLazyPromise, IDocumentDiffItem, IMultiDiffEditorModel } from 'vs/editor/browser/widget/multiDiffEditorWidget/model'; @@ -49,6 +51,10 @@ export class MultiDiffEditorInput extends EditorInput implements ILanguageSuppor return DEFAULT_EDITOR_ASSOCIATION.id; } + override getIcon(): ThemeIcon { + return Codicon.diffMultiple; + } + constructor( readonly label: string | undefined, readonly resources: readonly MultiDiffEditorInputData[], diff --git a/src/vs/workbench/contrib/searchEditor/browser/searchEditorInput.ts b/src/vs/workbench/contrib/searchEditor/browser/searchEditorInput.ts index a1511370fa395..be531967ff37c 100644 --- a/src/vs/workbench/contrib/searchEditor/browser/searchEditorInput.ts +++ b/src/vs/workbench/contrib/searchEditor/browser/searchEditorInput.ts @@ -32,6 +32,8 @@ import { bufferToReadable, VSBuffer } from 'vs/base/common/buffer'; import { EditorInput } from 'vs/workbench/common/editor/editorInput'; import { IResourceEditorInput } from 'vs/platform/editor/common/editor'; import { IDisposable } from 'vs/base/common/lifecycle'; +import { Codicon } from 'vs/base/common/codicons'; +import { ThemeIcon } from 'vs/base/common/themables'; export type SearchConfiguration = { query: string; @@ -65,6 +67,10 @@ export class SearchEditorInput extends EditorInput { return this.typeId; } + override getIcon(): ThemeIcon { + return Codicon.search; + } + override get capabilities(): EditorInputCapabilities { let capabilities = EditorInputCapabilities.Singleton; if (!this.backingUri) { diff --git a/src/vs/workbench/services/preferences/browser/keybindingsEditorInput.ts b/src/vs/workbench/services/preferences/browser/keybindingsEditorInput.ts index 8987b464b18d5..6cc85208a71d3 100644 --- a/src/vs/workbench/services/preferences/browser/keybindingsEditorInput.ts +++ b/src/vs/workbench/services/preferences/browser/keybindingsEditorInput.ts @@ -3,7 +3,9 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ +import { Codicon } from 'vs/base/common/codicons'; import { OS } from 'vs/base/common/platform'; +import { ThemeIcon } from 'vs/base/common/themables'; import * as nls from 'vs/nls'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IUntypedEditorInput } from 'vs/workbench/common/editor'; @@ -39,6 +41,10 @@ export class KeybindingsEditorInput extends EditorInput { return nls.localize('keybindingsInputName', "Keyboard Shortcuts"); } + override getIcon(): ThemeIcon { + return Codicon.keyboard; + } + override async resolve(): Promise { return this.keybindingsModel; } diff --git a/src/vs/workbench/services/preferences/common/preferencesEditorInput.ts b/src/vs/workbench/services/preferences/common/preferencesEditorInput.ts index da2480229290d..6341ccc7e1334 100644 --- a/src/vs/workbench/services/preferences/common/preferencesEditorInput.ts +++ b/src/vs/workbench/services/preferences/common/preferencesEditorInput.ts @@ -3,7 +3,9 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ +import { Codicon } from 'vs/base/common/codicons'; import { Schemas } from 'vs/base/common/network'; +import { ThemeIcon } from 'vs/base/common/themables'; import { URI } from 'vs/base/common/uri'; import * as nls from 'vs/nls'; import { IUntypedEditorInput } from 'vs/workbench/common/editor'; @@ -41,6 +43,10 @@ export class SettingsEditor2Input extends EditorInput { return nls.localize('settingsEditor2InputName', "Settings"); } + override getIcon(): ThemeIcon { + return Codicon.settings; + } + override async resolve(): Promise { return this._settingsModel; } From b861c3a6242c97910a80657e5f2966e7f4f4eec4 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Fri, 8 Dec 2023 12:30:23 +0100 Subject: [PATCH 02/19] adapt size --- src/vs/base/browser/ui/iconLabel/iconlabel.css | 3 ++- .../workbench/contrib/extensions/common/extensionsInput.ts | 6 ++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/vs/base/browser/ui/iconLabel/iconlabel.css b/src/vs/base/browser/ui/iconLabel/iconlabel.css index a9f5a4e432fa0..20257d7b41fcc 100644 --- a/src/vs/base/browser/ui/iconLabel/iconlabel.css +++ b/src/vs/base/browser/ui/iconLabel/iconlabel.css @@ -33,7 +33,8 @@ .monaco-icon-label.product-icon::before{ font-family: 'codicon'; - font-size: 16px; + padding-left: 3px; /* width (16px) - font-size (13px) = padding-left (3px) */ + padding-right: 3px; } .monaco-icon-label-container.disabled { diff --git a/src/vs/workbench/contrib/extensions/common/extensionsInput.ts b/src/vs/workbench/contrib/extensions/common/extensionsInput.ts index 180c12ab35b0c..ba8664c12d7c1 100644 --- a/src/vs/workbench/contrib/extensions/common/extensionsInput.ts +++ b/src/vs/workbench/contrib/extensions/common/extensionsInput.ts @@ -12,6 +12,8 @@ import { ExtensionEditorTab, IExtension } from 'vs/workbench/contrib/extensions/ import { areSameExtensions } from 'vs/platform/extensionManagement/common/extensionManagementUtil'; import { join } from 'vs/base/common/path'; import { IEditorOptions } from 'vs/platform/editor/common/editor'; +import { ThemeIcon } from 'vs/base/common/themables'; +import { Codicon } from 'vs/base/common/codicons'; export interface IExtensionEditorOptions extends IEditorOptions { showPreReleaseVersion?: boolean; @@ -48,6 +50,10 @@ export class ExtensionsInput extends EditorInput { return localize('extensionsInputName', "Extension: {0}", this._extension.displayName); } + override getIcon(): ThemeIcon | undefined { + return Codicon.extensions; + } + override matches(other: EditorInput | IUntypedEditorInput): boolean { if (super.matches(other)) { return true; From d45c2c27ebb0f3dee7c8350495aed6108737aaae Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Fri, 8 Dec 2023 16:05:26 +0100 Subject: [PATCH 03/19] :lipstick: --- src/vs/workbench/browser/labels.ts | 6 +++--- .../browser/parts/editor/multiEditorTabsControl.ts | 2 +- .../browser/parts/editor/singleEditorTabsControl.ts | 2 +- .../contrib/files/browser/views/openEditorsView.ts | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/vs/workbench/browser/labels.ts b/src/vs/workbench/browser/labels.ts index 87b5b094c880e..0c1df0ae564e2 100644 --- a/src/vs/workbench/browser/labels.ts +++ b/src/vs/workbench/browser/labels.ts @@ -64,7 +64,7 @@ export interface IResourceLabelOptions extends IIconLabelValueOptions { /** * Uses the provided icon instead of deriving a resource icon. */ - readonly codIcon?: ThemeIcon; + readonly icon?: ThemeIcon; } export interface IFileLabelOptions extends IResourceLabelOptions { @@ -579,8 +579,8 @@ class ResourceLabelWidget extends IconLabel { if (this.options && !this.options.hideIcon) { if (!this.computedIconClasses) { - if (this.options.codIcon) { - this.computedIconClasses = ['codicon-' + this.options.codIcon.id, 'product-icon']; + if (this.options.icon) { + this.computedIconClasses = ['codicon-' + this.options.icon.id, 'product-icon']; } else { this.computedIconClasses = getIconClasses(this.modelService, this.languageService, resource, this.options.fileKind); } diff --git a/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts b/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts index e548cb378a67f..44b78688c4a3d 100644 --- a/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts +++ b/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts @@ -1463,7 +1463,7 @@ export class MultiEditorTabsControl extends EditorTabsControl { colors: fileDecorationColors, badges: fileDecorationBadges }, - codIcon: editor.getIcon(), + icon: editor.getIcon(), } ); diff --git a/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts b/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts index 377fac7a22c7a..e0e5bbc9c7e8d 100644 --- a/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts +++ b/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts @@ -323,7 +323,7 @@ export class SingleEditorTabsControl extends EditorTabsControl { colors: Boolean(options.decorations?.colors), badges: Boolean(options.decorations?.badges) }, - codIcon: editor.getIcon(), + icon: editor.getIcon(), } ); diff --git a/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts b/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts index 11c59fb53155b..26459470d7dee 100644 --- a/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts +++ b/src/vs/workbench/contrib/files/browser/views/openEditorsView.ts @@ -651,7 +651,7 @@ class OpenEditorRenderer implements IListRenderer().explorer.decorations, title: editor.getTitle(Verbosity.LONG), - codIcon: editor.getIcon() + icon: editor.getIcon() }); const editorAction = openedEditor.isSticky() ? this.unpinEditorAction : this.closeEditorAction; if (!templateData.actionBar.hasAction(editorAction)) { From fb019c37d0b68d7bff82438e75953a7fd64999af Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Fri, 8 Dec 2023 16:32:21 +0100 Subject: [PATCH 04/19] :lipstick: --- src/vs/base/browser/ui/iconLabel/iconlabel.css | 2 +- src/vs/workbench/browser/labels.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vs/base/browser/ui/iconLabel/iconlabel.css b/src/vs/base/browser/ui/iconLabel/iconlabel.css index 20257d7b41fcc..df3d44593df10 100644 --- a/src/vs/base/browser/ui/iconLabel/iconlabel.css +++ b/src/vs/base/browser/ui/iconLabel/iconlabel.css @@ -31,7 +31,7 @@ flex-shrink: 0; /* fix for https://github.com/microsoft/vscode/issues/13787 */ } -.monaco-icon-label.product-icon::before{ +.monaco-icon-label.product-icon::before { font-family: 'codicon'; padding-left: 3px; /* width (16px) - font-size (13px) = padding-left (3px) */ padding-right: 3px; diff --git a/src/vs/workbench/browser/labels.ts b/src/vs/workbench/browser/labels.ts index 0c1df0ae564e2..4fe48917bf0f0 100644 --- a/src/vs/workbench/browser/labels.ts +++ b/src/vs/workbench/browser/labels.ts @@ -580,7 +580,7 @@ class ResourceLabelWidget extends IconLabel { if (this.options && !this.options.hideIcon) { if (!this.computedIconClasses) { if (this.options.icon) { - this.computedIconClasses = ['codicon-' + this.options.icon.id, 'product-icon']; + this.computedIconClasses = [`codicon-${this.options.icon.id}`, 'product-icon']; } else { this.computedIconClasses = getIconClasses(this.modelService, this.languageService, resource, this.options.fileKind); } From bcb4fd8c2050f5d8e9c5bbdce7604d97b1eb5198 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Sat, 9 Dec 2023 14:28:58 +0100 Subject: [PATCH 05/19] hide codicons --- src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts b/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts index 44b78688c4a3d..9bdf29a3be5b2 100644 --- a/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts +++ b/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts @@ -1464,6 +1464,7 @@ export class MultiEditorTabsControl extends EditorTabsControl { badges: fileDecorationBadges }, icon: editor.getIcon(), + hideIcon: options.showIcons === false, } ); From d0fa890a6521fce10ebda2a2bb793ca0a55b08d5 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Sat, 9 Dec 2023 15:00:13 +0100 Subject: [PATCH 06/19] Refactored getIconClasses function to accept optional ThemeIcon parameter and updated its usage across multiple files --- src/vs/editor/common/services/getIconClasses.ts | 6 +++++- src/vs/workbench/browser/labels.ts | 7 ++----- src/vs/workbench/browser/parts/editor/editorQuickAccess.ts | 2 +- .../contrib/search/browser/anythingQuickAccess.ts | 4 +++- 4 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/vs/editor/common/services/getIconClasses.ts b/src/vs/editor/common/services/getIconClasses.ts index bc3da1e5e6c87..0df1d17f6ee02 100644 --- a/src/vs/editor/common/services/getIconClasses.ts +++ b/src/vs/editor/common/services/getIconClasses.ts @@ -10,10 +10,14 @@ import { PLAINTEXT_LANGUAGE_ID } from 'vs/editor/common/languages/modesRegistry' import { ILanguageService } from 'vs/editor/common/languages/language'; import { IModelService } from 'vs/editor/common/services/model'; import { FileKind } from 'vs/platform/files/common/files'; +import { ThemeIcon } from 'vs/base/common/themables'; const fileIconDirectoryRegex = /(?:\/|^)(?:([^\/]+)\/)?([^\/]+)$/; -export function getIconClasses(modelService: IModelService, languageService: ILanguageService, resource: uri | undefined, fileKind?: FileKind): string[] { +export function getIconClasses(modelService: IModelService, languageService: ILanguageService, resource: uri | undefined, fileKind?: FileKind, icon?: ThemeIcon): string[] { + if (icon) { + return [`codicon-${icon.id}`, 'product-icon']; + } // we always set these base classes even if we do not have a path const classes = fileKind === FileKind.ROOT_FOLDER ? ['rootfolder-icon'] : fileKind === FileKind.FOLDER ? ['folder-icon'] : ['file-icon']; diff --git a/src/vs/workbench/browser/labels.ts b/src/vs/workbench/browser/labels.ts index 4fe48917bf0f0..93309d1daf4e4 100644 --- a/src/vs/workbench/browser/labels.ts +++ b/src/vs/workbench/browser/labels.ts @@ -579,11 +579,8 @@ class ResourceLabelWidget extends IconLabel { if (this.options && !this.options.hideIcon) { if (!this.computedIconClasses) { - if (this.options.icon) { - this.computedIconClasses = [`codicon-${this.options.icon.id}`, 'product-icon']; - } else { - this.computedIconClasses = getIconClasses(this.modelService, this.languageService, resource, this.options.fileKind); - } + this.computedIconClasses = getIconClasses(this.modelService, this.languageService, resource, this.options.fileKind, this.options.icon); + } iconLabelOptions.extraClasses = this.computedIconClasses.slice(0); diff --git a/src/vs/workbench/browser/parts/editor/editorQuickAccess.ts b/src/vs/workbench/browser/parts/editor/editorQuickAccess.ts index 26553c5730f63..225330438f637 100644 --- a/src/vs/workbench/browser/parts/editor/editorQuickAccess.ts +++ b/src/vs/workbench/browser/parts/editor/editorQuickAccess.ts @@ -157,7 +157,7 @@ export abstract class BaseEditorQuickAccessProvider extends PickerQuickAccessPro return isDirty ? localize('entryAriaLabelDirty', "{0}, unsaved changes", nameAndDescription) : nameAndDescription; })(), description, - iconClasses: getIconClasses(this.modelService, this.languageService, resource).concat(editor.getLabelExtraClasses()), + iconClasses: getIconClasses(this.modelService, this.languageService, resource, undefined, editor.getIcon()).concat(editor.getLabelExtraClasses()), italic: !this.editorGroupService.getGroup(groupId)?.isPinned(editor), buttons: (() => { return [ diff --git a/src/vs/workbench/contrib/search/browser/anythingQuickAccess.ts b/src/vs/workbench/contrib/search/browser/anythingQuickAccess.ts index 3531721361975..443607425234c 100644 --- a/src/vs/workbench/contrib/search/browser/anythingQuickAccess.ts +++ b/src/vs/workbench/contrib/search/browser/anythingQuickAccess.ts @@ -951,6 +951,7 @@ export class AnythingQuickAccessProvider extends PickerQuickAccessProvider getIconClasses(this.modelService, this.languageService, resource).concat(extraClasses)); + const iconClassesValue = new Lazy(() => getIconClasses(this.modelService, this.languageService, resource, undefined, icon).concat(extraClasses)); const buttonsValue = new Lazy(() => { const openSideBySideDirection = configuration.openSideBySideDirection; From 30a352a72761333f92c118a1f4476d44f589cb92 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Sat, 9 Dec 2023 15:15:11 +0100 Subject: [PATCH 07/19] move css --- src/vs/base/browser/ui/iconLabel/iconlabel.css | 6 ------ src/vs/workbench/browser/media/style.css | 6 ++++++ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/vs/base/browser/ui/iconLabel/iconlabel.css b/src/vs/base/browser/ui/iconLabel/iconlabel.css index df3d44593df10..47f8891703c46 100644 --- a/src/vs/base/browser/ui/iconLabel/iconlabel.css +++ b/src/vs/base/browser/ui/iconLabel/iconlabel.css @@ -31,12 +31,6 @@ flex-shrink: 0; /* fix for https://github.com/microsoft/vscode/issues/13787 */ } -.monaco-icon-label.product-icon::before { - font-family: 'codicon'; - padding-left: 3px; /* width (16px) - font-size (13px) = padding-left (3px) */ - padding-right: 3px; -} - .monaco-icon-label-container.disabled { color: var(--vscode-disabledForeground); } diff --git a/src/vs/workbench/browser/media/style.css b/src/vs/workbench/browser/media/style.css index 87ee974d535a5..c0ef8e0e953fb 100644 --- a/src/vs/workbench/browser/media/style.css +++ b/src/vs/workbench/browser/media/style.css @@ -150,6 +150,12 @@ body.web { font-size: 16px; /* sets font-size for codicons in workbench (https://github.com/microsoft/vscode/issues/98495) */ } +.monaco-workbench .monaco-icon-label.product-icon::before { + font-family: 'codicon'; + padding-left: 3px; /* width (16px) - font-size (13px) = padding-left (3px) */ + padding-right: 3px; +} + .monaco-workbench.modal-dialog-visible .monaco-progress-container.infinite .progress-bit { display: none; /* stop progress animations when dialogs are visible (https://github.com/microsoft/vscode/issues/138396) */ } From 3b4d17d77b5c085b09398f1f25ce51839d751200 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Sat, 9 Dec 2023 15:20:57 +0100 Subject: [PATCH 08/19] :lipstick: --- src/vs/workbench/browser/media/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/vs/workbench/browser/media/style.css b/src/vs/workbench/browser/media/style.css index c0ef8e0e953fb..6c52fb2c36926 100644 --- a/src/vs/workbench/browser/media/style.css +++ b/src/vs/workbench/browser/media/style.css @@ -150,8 +150,9 @@ body.web { font-size: 16px; /* sets font-size for codicons in workbench (https://github.com/microsoft/vscode/issues/98495) */ } -.monaco-workbench .monaco-icon-label.product-icon::before { +.monaco-workbench .product-icon[class*='codicon-']::before { font-family: 'codicon'; + width: 16px; padding-left: 3px; /* width (16px) - font-size (13px) = padding-left (3px) */ padding-right: 3px; } From 88864a3f13af23c9e6f59c586f3d2967e66bb818 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Sun, 10 Dec 2023 11:56:43 +0100 Subject: [PATCH 09/19] chat editor icon --- .../workbench/contrib/chat/browser/chatEditorInput.ts | 6 ++++-- .../contrib/chat/browser/media/chatEditor.css | 11 ----------- 2 files changed, 4 insertions(+), 13 deletions(-) delete mode 100644 src/vs/workbench/contrib/chat/browser/media/chatEditor.css diff --git a/src/vs/workbench/contrib/chat/browser/chatEditorInput.ts b/src/vs/workbench/contrib/chat/browser/chatEditorInput.ts index ed7152d1d442d..310cd7658d028 100644 --- a/src/vs/workbench/contrib/chat/browser/chatEditorInput.ts +++ b/src/vs/workbench/contrib/chat/browser/chatEditorInput.ts @@ -4,9 +4,11 @@ *--------------------------------------------------------------------------------------------*/ import { CancellationToken } from 'vs/base/common/cancellation'; +import { Codicon } from 'vs/base/common/codicons'; import { Emitter } from 'vs/base/common/event'; import { Disposable, toDisposable } from 'vs/base/common/lifecycle'; import { Schemas } from 'vs/base/common/network'; +import { ThemeIcon } from 'vs/base/common/themables'; import { URI } from 'vs/base/common/uri'; import * as nls from 'vs/nls'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; @@ -81,8 +83,8 @@ export class ChatEditorInput extends EditorInput { return this.model?.title || nls.localize('chatEditorName', "Chat") + (this.inputCount > 0 ? ` ${this.inputCount + 1}` : ''); } - override getLabelExtraClasses(): string[] { - return ['chat-editor-label']; + override getIcon(): ThemeIcon { + return Codicon.commentDiscussion; } override async resolve(): Promise { diff --git a/src/vs/workbench/contrib/chat/browser/media/chatEditor.css b/src/vs/workbench/contrib/chat/browser/media/chatEditor.css deleted file mode 100644 index fb57658b02155..0000000000000 --- a/src/vs/workbench/contrib/chat/browser/media/chatEditor.css +++ /dev/null @@ -1,11 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - *--------------------------------------------------------------------------------------------*/ - -.vs .show-file-icons .chat-editor-label.file-icon::before, -.show-file-icons .chat-editor-label.file-icon::before { - content: '\EAC7'; - font-family: 'codicon'; - font-size: 16px; -} From 94687d50dfd7dbfe873f776d34a7328c2db30893 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Sun, 10 Dec 2023 11:58:52 +0100 Subject: [PATCH 10/19] Terminal theme icon support --- .../contrib/terminal/browser/media/terminal.css | 5 ----- .../contrib/terminal/browser/terminalEditorInput.ts | 12 ++++++++---- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/vs/workbench/contrib/terminal/browser/media/terminal.css b/src/vs/workbench/contrib/terminal/browser/media/terminal.css index a934dae26c720..488815cf2589b 100644 --- a/src/vs/workbench/contrib/terminal/browser/media/terminal.css +++ b/src/vs/workbench/contrib/terminal/browser/media/terminal.css @@ -58,11 +58,6 @@ opacity: 0 !important; } -.monaco-workbench .terminal-tab::before { - font-family: 'codicon' !important; - font-size: 16px !important; -} - .monaco-workbench .terminal-tab:not(.terminal-uri-icon)::before { background-image: none !important; } diff --git a/src/vs/workbench/contrib/terminal/browser/terminalEditorInput.ts b/src/vs/workbench/contrib/terminal/browser/terminalEditorInput.ts index 2c4cafe5172e3..94d3ce8960a3d 100644 --- a/src/vs/workbench/contrib/terminal/browser/terminalEditorInput.ts +++ b/src/vs/workbench/contrib/terminal/browser/terminalEditorInput.ts @@ -191,11 +191,18 @@ export class TerminalEditorInput extends EditorInput implements IEditorCloseHand return this._terminalInstance?.title || this.resource.fragment; } + override getIcon(): ThemeIcon | undefined { + if (!this._terminalInstance || !ThemeIcon.isThemeIcon(this._terminalInstance.icon)) { + return undefined; + } + return this._terminalInstance.icon; + } + override getLabelExtraClasses(): string[] { if (!this._terminalInstance) { return []; } - const extraClasses: string[] = ['terminal-tab']; + const extraClasses: string[] = ['terminal-tab', 'product-icon']; const colorClass = getColorClass(this._terminalInstance); if (colorClass) { extraClasses.push(colorClass); @@ -204,9 +211,6 @@ export class TerminalEditorInput extends EditorInput implements IEditorCloseHand if (uriClasses) { extraClasses.push(...uriClasses); } - if (ThemeIcon.isThemeIcon(this._terminalInstance.icon)) { - extraClasses.push(`codicon-${this._terminalInstance.icon.id}`); - } return extraClasses; } From 15a273248e5a9e25cd83244ab3ee21ced540e67b Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Sun, 10 Dec 2023 12:14:50 +0100 Subject: [PATCH 11/19] Runtime extensions --- .../contrib/extensions/common/runtimeExtensionsInput.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/vs/workbench/contrib/extensions/common/runtimeExtensionsInput.ts b/src/vs/workbench/contrib/extensions/common/runtimeExtensionsInput.ts index e7df1f9f846b3..51069228bb666 100644 --- a/src/vs/workbench/contrib/extensions/common/runtimeExtensionsInput.ts +++ b/src/vs/workbench/contrib/extensions/common/runtimeExtensionsInput.ts @@ -7,6 +7,8 @@ import * as nls from 'vs/nls'; import { URI } from 'vs/base/common/uri'; import { EditorInputCapabilities, IUntypedEditorInput } from 'vs/workbench/common/editor'; import { EditorInput } from 'vs/workbench/common/editor/editorInput'; +import { ThemeIcon } from 'vs/base/common/themables'; +import { Codicon } from 'vs/base/common/codicons'; export class RuntimeExtensionsInput extends EditorInput { @@ -38,6 +40,10 @@ export class RuntimeExtensionsInput extends EditorInput { return nls.localize('extensionsInputName', "Running Extensions"); } + override getIcon(): ThemeIcon { + return Codicon.extensions; + } + override matches(other: EditorInput | IUntypedEditorInput): boolean { if (super.matches(other)) { return true; From 787dfdc6b4b3f3f7df834fd89c7da1d72e1ea0fe Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Sun, 10 Dec 2023 12:19:28 +0100 Subject: [PATCH 12/19] DisassemblyViewInput --- .../workbench/contrib/debug/common/disassemblyViewInput.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/vs/workbench/contrib/debug/common/disassemblyViewInput.ts b/src/vs/workbench/contrib/debug/common/disassemblyViewInput.ts index f66b095f68611..75d4548b4a6bb 100644 --- a/src/vs/workbench/contrib/debug/common/disassemblyViewInput.ts +++ b/src/vs/workbench/contrib/debug/common/disassemblyViewInput.ts @@ -5,6 +5,8 @@ import { EditorInput } from 'vs/workbench/common/editor/editorInput'; import { localize } from 'vs/nls'; +import { ThemeIcon } from 'vs/base/common/themables'; +import { Codicon } from 'vs/base/common/codicons'; export class DisassemblyViewInput extends EditorInput { @@ -29,6 +31,10 @@ export class DisassemblyViewInput extends EditorInput { return localize('disassemblyInputName', "Disassembly"); } + override getIcon(): ThemeIcon { + return Codicon.debug; + } + override matches(other: unknown): boolean { return other instanceof DisassemblyViewInput; } From 0202181a0dfc8aff1dc9f0ae59ce62600eea8324 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Sun, 10 Dec 2023 12:29:11 +0100 Subject: [PATCH 13/19] Workspace Trust --- .../workspace/browser/media/workspaceTrustEditor.css | 7 ------- .../workspaces/browser/workspaceTrustEditorInput.ts | 6 ++++++ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/vs/workbench/contrib/workspace/browser/media/workspaceTrustEditor.css b/src/vs/workbench/contrib/workspace/browser/media/workspaceTrustEditor.css index 74ccb4fdf7f02..ce487f6cf7bf2 100644 --- a/src/vs/workbench/contrib/workspace/browser/media/workspaceTrustEditor.css +++ b/src/vs/workbench/contrib/workspace/browser/media/workspaceTrustEditor.css @@ -3,13 +3,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-icon-label.file-icon.workspacetrusteditor-name-file-icon.ext-file-icon.tab-label::before { - font-family: 'codicon'; - content: '\eb53'; - background-image: none; - font-size: 16px; -} - .workspace-trust-editor { max-width: 1000px; padding-top: 11px; diff --git a/src/vs/workbench/services/workspaces/browser/workspaceTrustEditorInput.ts b/src/vs/workbench/services/workspaces/browser/workspaceTrustEditorInput.ts index 518b94cce207b..8a7d78c3f3702 100644 --- a/src/vs/workbench/services/workspaces/browser/workspaceTrustEditorInput.ts +++ b/src/vs/workbench/services/workspaces/browser/workspaceTrustEditorInput.ts @@ -3,7 +3,9 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ +import { Codicon } from 'vs/base/common/codicons'; import { Schemas } from 'vs/base/common/network'; +import { ThemeIcon } from 'vs/base/common/themables'; import { URI } from 'vs/base/common/uri'; import { localize } from 'vs/nls'; import { EditorInputCapabilities, IUntypedEditorInput } from 'vs/workbench/common/editor'; @@ -32,4 +34,8 @@ export class WorkspaceTrustEditorInput extends EditorInput { override getName(): string { return localize('workspaceTrustEditorInputName', "Workspace Trust"); } + + override getIcon(): ThemeIcon { + return Codicon.shield; + } } From 61a86046786d0af6cb3f6b730893a6b10c1af2a0 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Sun, 10 Dec 2023 12:48:35 +0100 Subject: [PATCH 14/19] :lipstick: --- src/vs/workbench/contrib/chat/browser/chatEditor.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/vs/workbench/contrib/chat/browser/chatEditor.ts b/src/vs/workbench/contrib/chat/browser/chatEditor.ts index 28724b584229e..ee8045df6c3ea 100644 --- a/src/vs/workbench/contrib/chat/browser/chatEditor.ts +++ b/src/vs/workbench/contrib/chat/browser/chatEditor.ts @@ -3,7 +3,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import 'vs/css!./media/chatEditor'; import * as dom from 'vs/base/browser/dom'; import { CancellationToken } from 'vs/base/common/cancellation'; import { IContextKeyService, IScopedContextKeyService } from 'vs/platform/contextkey/common/contextkey'; From 751baa0a26407b9bda344ee021b9693cb9508504 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Mon, 11 Dec 2023 11:06:42 +0100 Subject: [PATCH 15/19] :lipstick: --- src/vs/workbench/browser/labels.ts | 1 - src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/workbench/browser/labels.ts b/src/vs/workbench/browser/labels.ts index 93309d1daf4e4..246bfb99d8c9a 100644 --- a/src/vs/workbench/browser/labels.ts +++ b/src/vs/workbench/browser/labels.ts @@ -580,7 +580,6 @@ class ResourceLabelWidget extends IconLabel { if (this.options && !this.options.hideIcon) { if (!this.computedIconClasses) { this.computedIconClasses = getIconClasses(this.modelService, this.languageService, resource, this.options.fileKind, this.options.icon); - } iconLabelOptions.extraClasses = this.computedIconClasses.slice(0); diff --git a/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts b/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts index e0e5bbc9c7e8d..810dbc7308343 100644 --- a/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts +++ b/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts @@ -324,6 +324,7 @@ export class SingleEditorTabsControl extends EditorTabsControl { badges: Boolean(options.decorations?.badges) }, icon: editor.getIcon(), + hideIcon: options.showIcons === false, } ); From 13d454deca1309385a5bd14811c29a7117779a13 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Mon, 11 Dec 2023 13:58:26 +0100 Subject: [PATCH 16/19] fix terminal test? --- test/automation/src/terminal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/automation/src/terminal.ts b/test/automation/src/terminal.ts index b40606928f8c6..19a75ca948aef 100644 --- a/test/automation/src/terminal.ts +++ b/test/automation/src/terminal.ts @@ -246,7 +246,7 @@ export class Terminal { await this.code.waitForElement(`${selector}`, singleTab => !!singleTab && !!singleTab.className.includes(`terminal-icon-terminal_ansi${color}`)); } if (icon) { - selector = selector === Selector.EditorTab ? selector : `${selector} .codicon`; + [icon, selector] = selector === Selector.EditorTab ? [`.codicon-${icon}`, selector] : [icon, `${selector} .codicon`]; await this.code.waitForElement(`${selector}`, singleTab => !!singleTab && !!singleTab.className.includes(icon)); } } From 528afd8e429e43818429ee1e5ed4ae98d2bbd20b Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Mon, 11 Dec 2023 14:41:37 +0100 Subject: [PATCH 17/19] fix typechecker error --- test/automation/src/terminal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/automation/src/terminal.ts b/test/automation/src/terminal.ts index 19a75ca948aef..472cb442206a7 100644 --- a/test/automation/src/terminal.ts +++ b/test/automation/src/terminal.ts @@ -247,7 +247,7 @@ export class Terminal { } if (icon) { [icon, selector] = selector === Selector.EditorTab ? [`.codicon-${icon}`, selector] : [icon, `${selector} .codicon`]; - await this.code.waitForElement(`${selector}`, singleTab => !!singleTab && !!singleTab.className.includes(icon)); + await this.code.waitForElement(`${selector}`, singleTab => !!singleTab && !!icon && !!singleTab.className.includes(icon)); } } } From 8ff022bbe96a4682227d5584f6ee648b0bf03fed Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Mon, 11 Dec 2023 15:03:42 +0100 Subject: [PATCH 18/19] fix selector and icon name --- test/automation/src/terminal.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/automation/src/terminal.ts b/test/automation/src/terminal.ts index 472cb442206a7..27e2f4cbb546c 100644 --- a/test/automation/src/terminal.ts +++ b/test/automation/src/terminal.ts @@ -20,7 +20,7 @@ export enum Selector { XtermFocused = '.terminal.xterm.focus', PlusButton = '.codicon-plus', EditorGroups = '.editor .split-view-view', - EditorTab = '.terminal-tab', + EditorTab = '.terminal-tab.product-icon', SingleTab = '.single-terminal-tab', Tabs = '.tabs-list .monaco-list-row', SplitButton = '.editor .codicon-split-horizontal', @@ -246,7 +246,7 @@ export class Terminal { await this.code.waitForElement(`${selector}`, singleTab => !!singleTab && !!singleTab.className.includes(`terminal-icon-terminal_ansi${color}`)); } if (icon) { - [icon, selector] = selector === Selector.EditorTab ? [`.codicon-${icon}`, selector] : [icon, `${selector} .codicon`]; + [icon, selector] = selector === Selector.EditorTab ? [`codicon-${icon}`, selector] : [icon, `${selector} .codicon`]; await this.code.waitForElement(`${selector}`, singleTab => !!singleTab && !!icon && !!singleTab.className.includes(icon)); } } From 692599b8335356110d33ae6b6708a0fa6259bd40 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Mon, 11 Dec 2023 16:04:41 +0100 Subject: [PATCH 19/19] support updating icon --- src/vs/workbench/browser/labels.ts | 7 ++++++- test/automation/src/terminal.ts | 6 +++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/vs/workbench/browser/labels.ts b/src/vs/workbench/browser/labels.ts index 246bfb99d8c9a..74fc9277f80f0 100644 --- a/src/vs/workbench/browser/labels.ts +++ b/src/vs/workbench/browser/labels.ts @@ -468,6 +468,7 @@ class ResourceLabelWidget extends IconLabel { const hasResourceChanged = this.hasResourceChanged(label); const hasPathLabelChanged = hasResourceChanged || this.hasPathLabelChanged(label); const hasFileKindChanged = this.hasFileKindChanged(options); + const hasIconChanged = this.hasIconChanged(options); this.label = label; this.options = options; @@ -481,7 +482,7 @@ class ResourceLabelWidget extends IconLabel { } this.render({ - updateIcon: hasResourceChanged || hasFileKindChanged, + updateIcon: hasResourceChanged || hasFileKindChanged || hasIconChanged, updateDecoration: hasResourceChanged || hasFileKindChanged }); } @@ -514,6 +515,10 @@ class ResourceLabelWidget extends IconLabel { return !!newResource && this.computedPathLabel !== this.labelService.getUriLabel(newResource); } + private hasIconChanged(newOptions?: IResourceLabelOptions): boolean { + return this.options?.icon !== newOptions?.icon; + } + clear(): void { this.label = undefined; this.options = undefined; diff --git a/test/automation/src/terminal.ts b/test/automation/src/terminal.ts index 27e2f4cbb546c..b40606928f8c6 100644 --- a/test/automation/src/terminal.ts +++ b/test/automation/src/terminal.ts @@ -20,7 +20,7 @@ export enum Selector { XtermFocused = '.terminal.xterm.focus', PlusButton = '.codicon-plus', EditorGroups = '.editor .split-view-view', - EditorTab = '.terminal-tab.product-icon', + EditorTab = '.terminal-tab', SingleTab = '.single-terminal-tab', Tabs = '.tabs-list .monaco-list-row', SplitButton = '.editor .codicon-split-horizontal', @@ -246,8 +246,8 @@ export class Terminal { await this.code.waitForElement(`${selector}`, singleTab => !!singleTab && !!singleTab.className.includes(`terminal-icon-terminal_ansi${color}`)); } if (icon) { - [icon, selector] = selector === Selector.EditorTab ? [`codicon-${icon}`, selector] : [icon, `${selector} .codicon`]; - await this.code.waitForElement(`${selector}`, singleTab => !!singleTab && !!icon && !!singleTab.className.includes(icon)); + selector = selector === Selector.EditorTab ? selector : `${selector} .codicon`; + await this.code.waitForElement(`${selector}`, singleTab => !!singleTab && !!singleTab.className.includes(icon)); } } }