From 7bf2e475036ef2a3a4d15582b23a79be7e8ab0c1 Mon Sep 17 00:00:00 2001 From: Sandeep Somavarapu Date: Fri, 12 Jun 2020 13:27:41 +0200 Subject: [PATCH] Proper fix #86192 --- .../extensions/browser/extensionsList.ts | 83 ++++++++++++------- .../browser/media/extensionsViewlet.css | 5 -- 2 files changed, 52 insertions(+), 36 deletions(-) diff --git a/src/vs/workbench/contrib/extensions/browser/extensionsList.ts b/src/vs/workbench/contrib/extensions/browser/extensionsList.ts index 84414e8d3a8..167a5b63761 100644 --- a/src/vs/workbench/contrib/extensions/browser/extensionsList.ts +++ b/src/vs/workbench/contrib/extensions/browser/extensionsList.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import 'vs/css!./media/extension'; -import { append, $, addClass, removeClass } from 'vs/base/browser/dom'; +import { append, $, addClass, removeClass, toggleClass } from 'vs/base/browser/dom'; import { IDisposable, dispose, combinedDisposable } from 'vs/base/common/lifecycle'; import { IAction } from 'vs/base/common/actions'; import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar'; @@ -21,8 +21,8 @@ import { IExtensionService } from 'vs/workbench/services/extensions/common/exten import { IExtensionManagementServerService } from 'vs/workbench/services/extensionManagement/common/extensionManagement'; import { INotificationService } from 'vs/platform/notification/common/notification'; import { isLanguagePackExtension } from 'vs/platform/extensions/common/extensions'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { foreground } from 'vs/platform/theme/common/colorRegistry'; +import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; +import { foreground, listActiveSelectionForeground, listActiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionBackground, listFocusForeground, listFocusBackground, listHoverForeground, listHoverBackground } from 'vs/platform/theme/common/colorRegistry'; import { WORKBENCH_BACKGROUND } from 'vs/workbench/common/theme'; export interface IExtensionsViewState { @@ -61,7 +61,6 @@ export class Renderer implements IPagedRenderer { @IExtensionService private readonly extensionService: IExtensionService, @IExtensionManagementServerService private readonly extensionManagementServerService: IExtensionManagementServerService, @IExtensionsWorkbenchService private readonly extensionsWorkbenchService: IExtensionsWorkbenchService, - @IThemeService private readonly themeService: IThemeService, ) { } get templateId() { return 'extension'; } @@ -167,23 +166,10 @@ export class Renderer implements IPagedRenderer { const runningExtension = runningExtensions.filter(e => areSameExtensions({ id: e.identifier.value, uuid: e.uuid }, extension.identifier))[0]; isDisabled = !(runningExtension && extension.server === this.extensionManagementServerService.getExtensionManagementServer(runningExtension.extensionLocation)); } - - }; - const updateStyles = () => { - data.author.style.color = ''; - data.root.style.color = ''; - if (isDisabled) { - addClass(data.root, 'disabled'); - data.root.style.color = this.getDisabledForeground(); - } else { - removeClass(data.root, 'disabled'); - data.author.style.color = this.getAuthorForeground(); - } + toggleClass(data.root, 'disabled', isDisabled); }; - - updateEnablement().then(() => updateStyles()); - this.extensionService.onDidChangeExtensions(() => updateEnablement().then(() => updateStyles()), this, data.extensionDisposables); - this.themeService.onDidColorThemeChange(() => updateStyles(), this, data.extensionDisposables); + updateEnablement(); + this.extensionService.onDidChangeExtensions(() => updateEnablement(), this, data.extensionDisposables); const onError = Event.once(domEvent(data.icon, 'error')); onError(() => data.icon.src = extension.iconUrlFallback, null, data.extensionDisposables); @@ -221,19 +207,54 @@ export class Renderer implements IPagedRenderer { } - private getAuthorForeground(): string { - const colorTheme = this.themeService.getColorTheme(); - const foregroundColor = colorTheme.getColor(foreground); - return foregroundColor ? foregroundColor.transparent(.9).makeOpaque(WORKBENCH_BACKGROUND(colorTheme)).toString() : ''; + disposeTemplate(data: ITemplateData): void { + data.disposables = dispose(data.disposables); } +} - private getDisabledForeground(): string { - const colorTheme = this.themeService.getColorTheme(); - const foregroundColor = colorTheme.getColor(foreground); - return foregroundColor ? foregroundColor.transparent(.5).makeOpaque(WORKBENCH_BACKGROUND(colorTheme)).toString() : ''; +registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => { + const foregroundColor = theme.getColor(foreground); + if (foregroundColor) { + const authorForeground = foregroundColor.transparent(.9).makeOpaque(WORKBENCH_BACKGROUND(theme)); + collector.addRule(`.extensions-list .monaco-list .monaco-list-row:not(.disabled) .author { color: ${authorForeground}; }`); + const disabledExtensionForeground = foregroundColor.transparent(.5).makeOpaque(WORKBENCH_BACKGROUND(theme)); + collector.addRule(`.extensions-list .monaco-list .monaco-list-row.disabled { color: ${disabledExtensionForeground}; }`); } - disposeTemplate(data: ITemplateData): void { - data.disposables = dispose(data.disposables); + const listActiveSelectionForegroundColor = theme.getColor(listActiveSelectionForeground); + const listActiveSelectionBackgroundColor = theme.getColor(listActiveSelectionBackground); + if (listActiveSelectionForegroundColor && listActiveSelectionBackgroundColor) { + const authorForeground = listActiveSelectionForegroundColor.transparent(.9).makeOpaque(listActiveSelectionBackgroundColor); + collector.addRule(`.extensions-list .monaco-list:focus .monaco-list-row:not(.disabled).selected.focused .author { color: ${authorForeground}; }`); + const disabledExtensionForeground = listActiveSelectionForegroundColor.transparent(.5).makeOpaque(listActiveSelectionBackgroundColor); + collector.addRule(`.extensions-list .monaco-list:focus .monaco-list-row.disabled.selected.focused { color: ${disabledExtensionForeground}; }`); } -} + + const listInactiveSelectionForegroundColor = theme.getColor(listInactiveSelectionForeground); + const listInactiveSelectionBackgroundColor = theme.getColor(listInactiveSelectionBackground); + if (listInactiveSelectionForegroundColor && listInactiveSelectionBackgroundColor) { + const authorForeground = listInactiveSelectionForegroundColor.transparent(.9).makeOpaque(listInactiveSelectionBackgroundColor); + collector.addRule(`.extensions-list .monaco-list .monaco-list-row:not(.disabled).selected.focused .author { color: ${authorForeground}; }`); + const disabledExtensionForeground = listInactiveSelectionForegroundColor.transparent(.5).makeOpaque(listInactiveSelectionBackgroundColor); + collector.addRule(`.extensions-list .monaco-list .monaco-list-row.disabled.selected.focused { color: ${disabledExtensionForeground}; }`); + } + + const listFocusForegroundColor = theme.getColor(listFocusForeground); + const listFocusBackgroundColor = theme.getColor(listFocusBackground); + if (listFocusForegroundColor && listFocusBackgroundColor) { + const authorForeground = listFocusForegroundColor.transparent(.9).makeOpaque(listFocusBackgroundColor); + collector.addRule(`.extensions-list .monaco-list:focus .monaco-list-row:not(.disabled).focused .author { color: ${authorForeground}; }`); + const disabledExtensionForeground = listFocusForegroundColor.transparent(.5).makeOpaque(listFocusBackgroundColor); + collector.addRule(`.extensions-list .monaco-list:focus .monaco-list-row.disabled.focused { color: ${disabledExtensionForeground}; }`); + } + + const listHoverForegroundColor = theme.getColor(listHoverForeground); + const listHoverBackgroundColor = theme.getColor(listHoverBackground); + if (listHoverForegroundColor && listHoverBackgroundColor) { + const authorForeground = listHoverForegroundColor.transparent(.9).makeOpaque(listHoverBackgroundColor); + collector.addRule(`.extensions-list .monaco-list .monaco-list-row:hover:not(.disabled):not(.selected):.not(.focused) .author { color: ${authorForeground}; }`); + const disabledExtensionForeground = listHoverForegroundColor.transparent(.5).makeOpaque(listHoverBackgroundColor); + collector.addRule(`.extensions-list .monaco-list .monaco-list-row.disabled:hover:not(.selected):.not(.focused) { color: ${disabledExtensionForeground}; }`); + } +}); + diff --git a/src/vs/workbench/contrib/extensions/browser/media/extensionsViewlet.css b/src/vs/workbench/contrib/extensions/browser/media/extensionsViewlet.css index 848beb3c621..5110de46a71 100644 --- a/src/vs/workbench/contrib/extensions/browser/media/extensionsViewlet.css +++ b/src/vs/workbench/contrib/extensions/browser/media/extensionsViewlet.css @@ -103,11 +103,6 @@ display: none; } -.extensions-viewlet > .extensions .selected .extension-list-item > .details > .footer > .author, -.extensions-viewlet > .extensions .selected.focused .extension-list-item > .details > .footer > .author { - opacity: 1; -} - .extensions-viewlet.narrow > .extensions .extension-list-item > .details > .footer > .monaco-action-bar > .actions-container .extension-action { max-width: 100px; } -- GitLab