diff --git a/src/vs/base/browser/ui/toggle/toggle.css b/src/vs/base/browser/ui/toggle/toggle.css index 9b1968b4b5d72..1b13a3b19e831 100644 --- a/src/vs/base/browser/ui/toggle/toggle.css +++ b/src/vs/base/browser/ui/toggle/toggle.css @@ -49,6 +49,19 @@ background-size: 16px !important; } +.monaco-action-bar .checkbox-action-item { + display: flex; + align-items: center; +} + +.monaco-action-bar .checkbox-action-item > .monaco-custom-toggle.monaco-checkbox { + margin-right: 4px; +} + +.monaco-action-bar .checkbox-action-item > .checkbox-label { + font-size: 12px; +} + /* hide check when unchecked */ .monaco-custom-toggle.monaco-checkbox:not(.checked)::before { visibility: hidden; diff --git a/src/vs/base/browser/ui/toggle/toggle.ts b/src/vs/base/browser/ui/toggle/toggle.ts index db5523e63b748..4146f24d141a7 100644 --- a/src/vs/base/browser/ui/toggle/toggle.ts +++ b/src/vs/base/browser/ui/toggle/toggle.ts @@ -12,7 +12,7 @@ import { ThemeIcon } from 'vs/base/common/themables'; import { Emitter, Event } from 'vs/base/common/event'; import { KeyCode } from 'vs/base/common/keyCodes'; import 'vs/css!./toggle'; -import { isActiveElement } from 'vs/base/browser/dom'; +import { isActiveElement, $, addDisposableListener, EventType } from 'vs/base/browser/dom'; export interface IToggleOpts extends IToggleStyles { readonly actionClassName?: string; @@ -219,6 +219,10 @@ export class Toggle extends Widget { } export class Checkbox extends Widget { + + private readonly _onChange = this._register(new Emitter()); + readonly onChange: Event = this._onChange.event; + private checkbox: Toggle; private styles: ICheckboxStyles; @@ -235,7 +239,10 @@ export class Checkbox extends Widget { this.applyStyles(); - this._register(this.checkbox.onChange(() => this.applyStyles())); + this._register(this.checkbox.onChange(keyboard => { + this.applyStyles(); + this._onChange.fire(keyboard); + })); } get checked(): boolean { @@ -256,9 +263,100 @@ export class Checkbox extends Widget { return isActiveElement(this.domNode); } + enable(): void { + this.checkbox.enable(); + } + + disable(): void { + this.checkbox.disable(); + } + protected applyStyles(): void { this.domNode.style.color = this.styles.checkboxForeground || ''; this.domNode.style.backgroundColor = this.styles.checkboxBackground || ''; this.domNode.style.borderColor = this.styles.checkboxBorder || ''; } } + +export interface ICheckboxActionViewItemOptions extends IActionViewItemOptions { + checkboxStyles: ICheckboxStyles; +} + +export class CheckboxActionViewItem extends BaseActionViewItem { + + protected readonly toggle: Checkbox; + private cssClass?: string; + + constructor(context: any, action: IAction, options: ICheckboxActionViewItemOptions) { + super(context, action, options); + + this.toggle = this._register(new Checkbox(this._action.label, !!this._action.checked, options.checkboxStyles)); + this._register(this.toggle.onChange(() => this.onChange())); + } + + override render(container: HTMLElement): void { + this.element = container; + this.element.classList.add('checkbox-action-item'); + this.element.appendChild(this.toggle.domNode); + if ((this.options).label && this._action.label) { + const label = this.element.appendChild($('span.checkbox-label', undefined, this._action.label)); + this._register(addDisposableListener(label, EventType.CLICK, (e: MouseEvent) => { + this.toggle.checked = !this.toggle.checked; + e.stopPropagation(); + e.preventDefault(); + this.onChange(); + })); + } + + this.updateEnabled(); + this.updateClass(); + this.updateChecked(); + } + + private onChange(): void { + this._action.checked = !!this.toggle && this.toggle.checked; + this.actionRunner.run(this._action, this._context); + } + + protected override updateEnabled(): void { + if (this.isEnabled()) { + this.toggle.enable(); + } else { + this.toggle.disable(); + } + if (this.action.enabled) { + this.element?.classList.remove('disabled'); + } else { + this.element?.classList.add('disabled'); + } + } + + protected override updateChecked(): void { + this.toggle.checked = !!this._action.checked; + } + + protected override updateClass(): void { + if (this.cssClass) { + this.toggle.domNode.classList.remove(...this.cssClass.split(' ')); + } + this.cssClass = this.getClass(); + if (this.cssClass) { + this.toggle.domNode.classList.add(...this.cssClass.split(' ')); + } + } + + override focus(): void { + this.toggle.domNode.tabIndex = 0; + this.toggle.focus(); + } + + override blur(): void { + this.toggle.domNode.tabIndex = -1; + this.toggle.domNode.blur(); + } + + override setFocusable(focusable: boolean): void { + this.toggle.domNode.tabIndex = focusable ? 0 : -1; + } + +} diff --git a/src/vs/workbench/contrib/extensions/browser/extensionEditor.ts b/src/vs/workbench/contrib/extensions/browser/extensionEditor.ts index be0ee5dc5a632..cede84edad844 100644 --- a/src/vs/workbench/contrib/extensions/browser/extensionEditor.ts +++ b/src/vs/workbench/contrib/extensions/browser/extensionEditor.ts @@ -8,6 +8,7 @@ import { renderMarkdown } from 'vs/base/browser/markdownRenderer'; import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar'; import { KeybindingLabel } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel'; import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement'; +import { CheckboxActionViewItem } from 'vs/base/browser/ui/toggle/toggle'; import { Action, IAction } from 'vs/base/common/actions'; import * as arrays from 'vs/base/common/arrays'; import { Cache, CacheResult } from 'vs/base/common/cache'; @@ -46,7 +47,7 @@ import { INotificationService, Severity } from 'vs/platform/notification/common/ import { IOpenerService } from 'vs/platform/opener/common/opener'; import { IStorageService } from 'vs/platform/storage/common/storage'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; -import { defaultKeybindingLabelStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultCheckboxStyles, defaultKeybindingLabelStyles } from 'vs/platform/theme/browser/defaultStyles'; import { buttonForeground, buttonHoverBackground, editorBackground, textLinkActiveForeground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry'; import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; import { EditorPane } from 'vs/workbench/browser/parts/editor/editorPane'; @@ -72,7 +73,6 @@ import { SetLanguageAction, SetProductIconThemeAction, ToggleAutoUpdateForExtensionAction, - ToggleAutoUpdatesForPublisherAction, SwitchToPreReleaseVersionAction, SwitchToReleasedVersionAction, ToggleSyncExtensionAction, UninstallAction, @@ -345,7 +345,7 @@ export class ExtensionEditor extends EditorPane { this.instantiationService.createInstance(ReloadAction), this.instantiationService.createInstance(ExtensionStatusLabelAction), this.instantiationService.createInstance(ActionWithDropDownAction, 'extensions.updateActions', '', - [[this.instantiationService.createInstance(UpdateAction, true)], [this.instantiationService.createInstance(ToggleAutoUpdateForExtensionAction), this.instantiationService.createInstance(ToggleAutoUpdatesForPublisherAction)]]), + [[this.instantiationService.createInstance(UpdateAction, true)], [this.instantiationService.createInstance(ToggleAutoUpdateForExtensionAction, true, [true, 'onlyEnabledExtensions'])]]), this.instantiationService.createInstance(SetColorThemeAction), this.instantiationService.createInstance(SetFileIconThemeAction), this.instantiationService.createInstance(SetProductIconThemeAction), @@ -369,6 +369,7 @@ export class ExtensionEditor extends EditorPane { this.instantiationService.createInstance(SwitchToPreReleaseVersionAction, false), this.instantiationService.createInstance(SwitchToReleasedVersionAction, false), this.instantiationService.createInstance(ToggleSyncExtensionAction), + this.instantiationService.createInstance(ToggleAutoUpdateForExtensionAction, false, ['onlySelectedExtensions']), new ExtensionEditorManageExtensionAction(this.scopedContextKeyService || this.contextKeyService, this.instantiationService), ]; @@ -382,6 +383,9 @@ export class ExtensionEditor extends EditorPane { if (action instanceof ActionWithDropDownAction) { return new ExtensionActionWithDropdownActionViewItem(action, { icon: true, label: true, menuActionsOrProvider: { getActions: () => action.menuActions }, menuActionClassNames: (action.class || '').split(' ') }, this.contextMenuService); } + if (action instanceof ToggleAutoUpdateForExtensionAction) { + return new CheckboxActionViewItem(undefined, action, { icon: true, label: true, checkboxStyles: defaultCheckboxStyles }); + } return undefined; }, focusOnlyEnabledItems: true diff --git a/src/vs/workbench/contrib/extensions/browser/extensions.contribution.ts b/src/vs/workbench/contrib/extensions/browser/extensions.contribution.ts index bb518d682f978..a0992bda3b969 100644 --- a/src/vs/workbench/contrib/extensions/browser/extensions.contribution.ts +++ b/src/vs/workbench/contrib/extensions/browser/extensions.contribution.ts @@ -1335,14 +1335,14 @@ class ExtensionsContributions extends Disposable implements IWorkbenchContributi id: MenuId.ExtensionContext, group: UPDATE_ACTIONS_GROUP, order: 1, - when: ContextKeyExpr.and(ContextKeyExpr.equals('extensionStatus', 'installed'), ContextKeyExpr.not('isBuiltinExtension'), ContextKeyExpr.equals(`config.${AutoUpdateConfigurationKey}`, 'onlySelectedExtensions'),) + when: ContextKeyExpr.and(ContextKeyExpr.not('inExtensionEditor'), ContextKeyExpr.equals('extensionStatus', 'installed'), ContextKeyExpr.not('isBuiltinExtension'), ContextKeyExpr.equals(`config.${AutoUpdateConfigurationKey}`, 'onlySelectedExtensions'),) }, run: async (accessor: ServicesAccessor, id: string) => { const instantiationService = accessor.get(IInstantiationService); const extensionWorkbenchService = accessor.get(IExtensionsWorkbenchService); const extension = extensionWorkbenchService.local.find(e => areSameExtensions(e.identifier, { id })); if (extension) { - const action = instantiationService.createInstance(ToggleAutoUpdateForExtensionAction); + const action = instantiationService.createInstance(ToggleAutoUpdateForExtensionAction, false, []); action.extension = extension; return action.run(); } diff --git a/src/vs/workbench/contrib/extensions/browser/extensionsActions.ts b/src/vs/workbench/contrib/extensions/browser/extensionsActions.ts index 04701ff691a14..d2b2089b9f275 100644 --- a/src/vs/workbench/contrib/extensions/browser/extensionsActions.ts +++ b/src/vs/workbench/contrib/extensions/browser/extensionsActions.ts @@ -12,7 +12,7 @@ import { Emitter, Event } from 'vs/base/common/event'; import * as json from 'vs/base/common/json'; import { IContextMenuService } from 'vs/platform/contextview/browser/contextView'; import { disposeIfDisposable } from 'vs/base/common/lifecycle'; -import { IExtension, ExtensionState, IExtensionsWorkbenchService, VIEWLET_ID, IExtensionsViewPaneContainer, IExtensionContainer, TOGGLE_IGNORE_EXTENSION_ACTION_ID, SELECT_INSTALL_VSIX_EXTENSION_COMMAND_ID, THEME_ACTIONS_GROUP, INSTALL_ACTIONS_GROUP, UPDATE_ACTIONS_GROUP } from 'vs/workbench/contrib/extensions/common/extensions'; +import { IExtension, ExtensionState, IExtensionsWorkbenchService, VIEWLET_ID, IExtensionsViewPaneContainer, IExtensionContainer, TOGGLE_IGNORE_EXTENSION_ACTION_ID, SELECT_INSTALL_VSIX_EXTENSION_COMMAND_ID, THEME_ACTIONS_GROUP, INSTALL_ACTIONS_GROUP, UPDATE_ACTIONS_GROUP, AutoUpdateConfigurationKey, AutoUpdateConfigurationValue } from 'vs/workbench/contrib/extensions/common/extensions'; import { ExtensionsConfigurationInitialContent } from 'vs/workbench/contrib/extensions/common/extensionsFileTemplate'; import { IGalleryExtension, IExtensionGalleryService, ILocalExtension, InstallOptions, InstallOperation, TargetPlatformToString, ExtensionManagementErrorCode } from 'vs/platform/extensionManagement/common/extensionManagement'; import { IWorkbenchExtensionEnablementService, EnablementState, IExtensionManagementServerService, IExtensionManagementServer } from 'vs/workbench/services/extensionManagement/common/extensionManagement'; @@ -826,30 +826,48 @@ export class UpdateAction extends AbstractUpdateAction { } } -export class ToggleAutoUpdateForExtensionAction extends AbstractUpdateAction { +export class ToggleAutoUpdateForExtensionAction extends ExtensionAction { static readonly ID = 'workbench.extensions.action.toggleAutoUpdateForExtension'; static readonly LABEL = localize('enableAutoUpdateLabel', "Auto Update"); + private static readonly EnabledClass = `${ExtensionAction.EXTENSION_ACTION_CLASS} auto-update`; + private static readonly DisabledClass = `${ToggleAutoUpdateForExtensionAction.EnabledClass} hide`; + constructor( - @IExtensionsWorkbenchService extensionsWorkbenchService: IExtensionsWorkbenchService + private readonly enableWhenOutdated: boolean, + private readonly enableWhenAutoUpdateValue: AutoUpdateConfigurationValue[], + @IExtensionsWorkbenchService private readonly extensionsWorkbenchService: IExtensionsWorkbenchService, + @IConfigurationService configurationService: IConfigurationService, + ) { - super(ToggleAutoUpdateForExtensionAction.ID, ToggleAutoUpdateForExtensionAction.LABEL, extensionsWorkbenchService); + super(ToggleAutoUpdateForExtensionAction.ID, ToggleAutoUpdateForExtensionAction.LABEL, ToggleAutoUpdateForExtensionAction.DisabledClass); + this._register(configurationService.onDidChangeConfiguration(e => { + if (e.affectsConfiguration(AutoUpdateConfigurationKey)) { + this.update(); + } + })); + this.update(); } override update() { this.enabled = false; + this.class = ToggleAutoUpdateForExtensionAction.DisabledClass; if (!this.extension) { return; } if (this.extension.isBuiltin) { return; } - if (!this.extensionsWorkbenchService.isAutoUpdateEnabled()) { + if (this.enableWhenOutdated && !this.extension.outdated) { return; } - super.update(); - this._checked = this.extensionsWorkbenchService.isAutoUpdateEnabledFor(this.extension); + if (!this.enableWhenAutoUpdateValue.includes(this.extensionsWorkbenchService.getAutoUpdateValue())) { + return; + } + this.enabled = true; + this.class = ToggleAutoUpdateForExtensionAction.EnabledClass; + this.checked = this.extensionsWorkbenchService.isAutoUpdateEnabledFor(this.extension); } override async run(): Promise { @@ -868,7 +886,7 @@ export class ToggleAutoUpdateForExtensionAction extends AbstractUpdateAction { } } -export class ToggleAutoUpdatesForPublisherAction extends AbstractUpdateAction { +export class ToggleAutoUpdatesForPublisherAction extends ExtensionAction { static readonly ID = 'workbench.extensions.action.toggleAutoUpdatesForPublisher'; static readonly LABEL = localize('toggleAutoUpdatesForPublisherLabel', "Auto Update (Publisher)"); @@ -878,27 +896,12 @@ export class ToggleAutoUpdatesForPublisherAction extends AbstractUpdateAction { } constructor( - @IExtensionsWorkbenchService extensionsWorkbenchService: IExtensionsWorkbenchService + @IExtensionsWorkbenchService private readonly extensionsWorkbenchService: IExtensionsWorkbenchService ) { - super(ToggleAutoUpdatesForPublisherAction.ID, ToggleAutoUpdatesForPublisherAction.LABEL, extensionsWorkbenchService); + super(ToggleAutoUpdatesForPublisherAction.ID, ToggleAutoUpdatesForPublisherAction.LABEL); } - override update() { - if (!this.extension) { - return; - } - if (this.extension.isBuiltin) { - this.enabled = false; - return; - } - if (this.extensionsWorkbenchService.getAutoUpdateValue() !== 'onlySelectedExtensions') { - this.enabled = false; - return; - } - super.update(); - this._checked = this.extensionsWorkbenchService.isAutoUpdateEnabledFor(this.extension.publisher); - this.label = ToggleAutoUpdatesForPublisherAction.getLabel(this.extension); - } + override update() { } override async run(): Promise { if (!this.extension) { diff --git a/src/vs/workbench/contrib/extensions/browser/extensionsList.ts b/src/vs/workbench/contrib/extensions/browser/extensionsList.ts index f894dbecba646..d021b584a1802 100644 --- a/src/vs/workbench/contrib/extensions/browser/extensionsList.ts +++ b/src/vs/workbench/contrib/extensions/browser/extensionsList.ts @@ -13,7 +13,7 @@ import { IListVirtualDelegate } from 'vs/base/browser/ui/list/list'; import { IPagedRenderer } from 'vs/base/browser/ui/list/listPaging'; import { Event } from 'vs/base/common/event'; import { IExtension, ExtensionContainers, ExtensionState, IExtensionsWorkbenchService } from 'vs/workbench/contrib/extensions/common/extensions'; -import { ManageExtensionAction, ReloadAction, ExtensionStatusLabelAction, RemoteInstallAction, ExtensionStatusAction, LocalInstallAction, ActionWithDropDownAction, InstallDropdownAction, InstallingLabelAction, ExtensionActionWithDropdownActionViewItem, ExtensionDropDownAction, WebInstallAction, SwitchToPreReleaseVersionAction, SwitchToReleasedVersionAction, MigrateDeprecatedExtensionAction, SetLanguageAction, ClearLanguageAction, UpdateAction, ToggleAutoUpdateForExtensionAction, ToggleAutoUpdatesForPublisherAction } from 'vs/workbench/contrib/extensions/browser/extensionsActions'; +import { ManageExtensionAction, ReloadAction, ExtensionStatusLabelAction, RemoteInstallAction, ExtensionStatusAction, LocalInstallAction, ActionWithDropDownAction, InstallDropdownAction, InstallingLabelAction, ExtensionActionWithDropdownActionViewItem, ExtensionDropDownAction, WebInstallAction, SwitchToPreReleaseVersionAction, SwitchToReleasedVersionAction, MigrateDeprecatedExtensionAction, SetLanguageAction, ClearLanguageAction, UpdateAction, ToggleAutoUpdateForExtensionAction } from 'vs/workbench/contrib/extensions/browser/extensionsActions'; import { areSameExtensions } from 'vs/platform/extensionManagement/common/extensionManagementUtil'; import { RatingsWidget, InstallCountWidget, RecommendationWidget, RemoteBadgeWidget, ExtensionPackCountWidget as ExtensionPackBadgeWidget, SyncIgnoredWidget, ExtensionHoverWidget, ExtensionActivationStatusWidget, PreReleaseBookmarkWidget, extensionVerifiedPublisherIconColor, VerifiedPublisherWidget } from 'vs/workbench/contrib/extensions/browser/extensionsWidgets'; import { IExtensionService, toExtension } from 'vs/workbench/services/extensions/common/extensions'; @@ -119,7 +119,7 @@ export class Renderer implements IPagedRenderer { this.instantiationService.createInstance(MigrateDeprecatedExtensionAction, true), this.instantiationService.createInstance(ReloadAction), this.instantiationService.createInstance(ActionWithDropDownAction, 'extensions.updateActions', '', - [[this.instantiationService.createInstance(UpdateAction, false)], [this.instantiationService.createInstance(ToggleAutoUpdateForExtensionAction), this.instantiationService.createInstance(ToggleAutoUpdatesForPublisherAction)]]), + [[this.instantiationService.createInstance(UpdateAction, false)], [this.instantiationService.createInstance(ToggleAutoUpdateForExtensionAction, true, [true, 'onlyEnabledExtensions'])]]), this.instantiationService.createInstance(InstallDropdownAction), this.instantiationService.createInstance(InstallingLabelAction), this.instantiationService.createInstance(SetLanguageAction), diff --git a/src/vs/workbench/contrib/extensions/browser/media/extensionActions.css b/src/vs/workbench/contrib/extensions/browser/media/extensionActions.css index 7c2d203e34c7e..4ae58e118a175 100644 --- a/src/vs/workbench/contrib/extensions/browser/media/extensionActions.css +++ b/src/vs/workbench/contrib/extensions/browser/media/extensionActions.css @@ -10,12 +10,12 @@ text-overflow: ellipsis; } -.monaco-action-bar .action-item > .action-label.extension-action.label, -.monaco-action-bar .action-dropdown-item > .action-label.extension-action.label { +.monaco-action-bar .action-item>.action-label.extension-action.label, +.monaco-action-bar .action-dropdown-item>.action-label.extension-action.label { padding: 0 5px; } -.monaco-action-bar .action-dropdown-item > .monaco-dropdown .action-label { +.monaco-action-bar .action-dropdown-item>.monaco-dropdown .action-label { padding: 0; } @@ -36,7 +36,7 @@ } .monaco-action-bar .action-item .action-label.extension-action.label, -.monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator { +.monaco-action-bar .action-item.action-dropdown-item>.action-dropdown-item-separator { background-color: var(--vscode-extensionButton-background) !important; } @@ -48,7 +48,7 @@ background-color: var(--vscode-extensionButton-hoverBackground) !important; } -.monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator > div { +.monaco-action-bar .action-item.action-dropdown-item>.action-dropdown-item-separator>div { background-color: var(--vscode-extensionButton-separator); } @@ -69,7 +69,7 @@ border: 1px solid var(--vscode-contrastBorder); } -.monaco-action-bar .action-item.action-dropdown-item > .action-dropdown-item-separator { +.monaco-action-bar .action-item.action-dropdown-item>.action-dropdown-item-separator { border-top: 1px solid var(--vscode-contrastBorder); border-bottom: 1px solid var(--vscode-contrastBorder); } @@ -90,7 +90,8 @@ .monaco-action-bar .action-item:not(.disabled) .action-label.extension-action.label, .monaco-action-bar .action-item .action-label.extension-action.icon, .monaco-action-bar .action-dropdown-item .action-label.extension-action.label { - margin-top: 2px; /* margin for outline */ + margin-top: 2px; + /* margin for outline */ } .monaco-action-bar .action-item.disabled .action-label.extension-action.hide, @@ -114,6 +115,10 @@ display: none; } +.monaco-action-bar .action-item.checkbox-action-item.disabled { + display: none; +} + .monaco-action-bar .extension-action.label { display: inherit; } diff --git a/src/vs/workbench/contrib/extensions/browser/media/extensionEditor.css b/src/vs/workbench/contrib/extensions/browser/media/extensionEditor.css index 174b332538b3c..2409552fb99cc 100644 --- a/src/vs/workbench/contrib/extensions/browser/media/extensionEditor.css +++ b/src/vs/workbench/contrib/extensions/browser/media/extensionEditor.css @@ -211,7 +211,7 @@ margin-right: 2px; /* margin for outline */ } -.extension-editor > .header > .details > .actions-status-container > .monaco-action-bar > .actions-container > .action-item .extension-action:not(.icon) { +.extension-editor > .header > .details > .actions-status-container > .monaco-action-bar > .actions-container > .action-item:not(.checkbox-action-item) .extension-action:not(.icon) { border-radius: 0; padding-top: 0; padding-bottom: 0; @@ -223,10 +223,17 @@ } .extension-editor > .header > .details > .actions-status-container > .monaco-action-bar > .actions-container > .action-item.action-dropdown-item, -.extension-editor > .header > .details > .actions-status-container > .monaco-action-bar > .actions-container > .action-item:not(.action-dropdown-item) > .extension-action { +.extension-editor > .header > .details > .actions-status-container > .monaco-action-bar > .actions-container > .action-item.checkbox-action-item, +.extension-editor > .header > .details > .actions-status-container > .monaco-action-bar > .actions-container > .action-item:not(.action-dropdown-item):not(.checkbox-action-item) > .extension-action { margin-right: 6px; } +.extension-editor > .header > .details > .actions-status-container > .monaco-action-bar > .actions-container > .action-item.checkbox-action-item > .extension-action { + height: 18px; + width: 18px; + margin-top: 2px; +} + .extension-editor > .header > .details > .actions-status-container > .monaco-action-bar > .actions-container > .action-item > .extension-action.label, .extension-editor > .header > .details > .actions-status-container > .monaco-action-bar > .actions-container > .action-item.action-dropdown-item .extension-action.label { font-weight: 600;