Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

replace attachStylerCallback with css variables #171669

Merged
merged 1 commit into from Jan 18, 2023
Merged

replace attachStylerCallback with css variables #171669

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 2 additions & 6 deletions src/vs/platform/actions/browser/menuEntryActionViewItem.ts
View file
Open in desktop
Expand Up @@ -28,8 +28,7 @@ import { ThemeIcon } from 'vs/base/common/themables';
import { isDark } from 'vs/platform/theme/common/theme';
import { IHoverDelegate } from 'vs/base/browser/ui/iconLabel/iconHoverDelegate';
import { assertType } from 'vs/base/common/types';
import { attachStylerCallback } from 'vs/platform/theme/common/styler';
import { selectBorder } from 'vs/platform/theme/common/colorRegistry';
import { asCssValue, selectBorder } from 'vs/platform/theme/common/colorRegistry';
import { defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles';

export function createAndFillInContextMenuActions(menu: IMenu, options: IMenuActionOptions | undefined, target: IAction[] | { primary: IAction[]; secondary: IAction[] }, primaryGroup?: string): void {
Expand Down Expand Up @@ -469,7 +468,6 @@ class SubmenuEntrySelectActionViewItem extends SelectActionViewItem {

constructor(
action: SubmenuItemAction,
@IThemeService private readonly themeService: IThemeService,
@IContextViewService contextViewService: IContextViewService
) {
super(null, action, action.actions.map(a => ({
Expand All @@ -481,9 +479,7 @@ class SubmenuEntrySelectActionViewItem extends SelectActionViewItem {

override render(container: HTMLElement): void {
super.render(container);
this._register(attachStylerCallback(this.themeService, { selectBorder }, colors => {
container.style.borderColor = colors.selectBorder ? `${colors.selectBorder}` : '';
}));
container.style.borderColor = asCssValue(selectBorder);
}

protected override runAction(option: string, index: number): void {
Expand Down
5 changes: 0 additions & 5 deletions src/vs/platform/theme/common/styler.ts
View file
Open in desktop
Expand Up @@ -49,8 +49,3 @@ export function attachStyler<T extends IColorMapping>(themeService: IThemeServic

return themeService.onDidColorThemeChange(applyStyles);
}

export function attachStylerCallback(themeService: IThemeService, colors: { [name: string]: ColorIdentifier }, callback: styleFn): IDisposable {
return attachStyler(themeService, colors, callback);
}

27 changes: 5 additions & 22 deletions src/vs/workbench/browser/codeeditor.ts
View file
Open in desktop
Expand Up @@ -7,10 +7,8 @@ import { Widget } from 'vs/base/browser/ui/widget';
import { IOverlayWidget, ICodeEditor, IOverlayWidgetPosition, OverlayWidgetPositionPreference, isCodeEditor, isCompositeEditor } from 'vs/editor/browser/editorBrowser';
import { Emitter } from 'vs/base/common/event';
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { $, append, clearNode } from 'vs/base/browser/dom';
import { attachStylerCallback } from 'vs/platform/theme/common/styler';
import { buttonBackground, buttonForeground, editorBackground, editorForeground, contrastBorder } from 'vs/platform/theme/common/colorRegistry';
import { buttonBackground, buttonForeground, editorBackground, editorForeground, contrastBorder, asCssValueWithDefault, asCssValue } from 'vs/platform/theme/common/colorRegistry';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { Disposable, DisposableStore } from 'vs/base/common/lifecycle';
import { IEditorContribution } from 'vs/editor/common/editorCommon';
Expand Down Expand Up @@ -147,8 +145,7 @@ export class FloatingClickWidget extends Widget implements IOverlayWidget {
private editor: ICodeEditor,
private label: string,
keyBindingAction: string | null,
@IKeybindingService keybindingService: IKeybindingService,
@IThemeService private readonly themeService: IThemeService
@IKeybindingService keybindingService: IKeybindingService
) {
super();

Expand Down Expand Up @@ -181,23 +178,9 @@ export class FloatingClickWidget extends Widget implements IOverlayWidget {

render() {
clearNode(this._domNode);

this._register(attachStylerCallback(this.themeService, { buttonBackground, buttonForeground, editorBackground, editorForeground, contrastBorder }, colors => {
const backgroundColor = colors.buttonBackground ? colors.buttonBackground : colors.editorBackground;
if (backgroundColor) {
this._domNode.style.backgroundColor = backgroundColor.toString();
}

const foregroundColor = colors.buttonForeground ? colors.buttonForeground : colors.editorForeground;
if (foregroundColor) {
this._domNode.style.color = foregroundColor.toString();
}

const borderColor = colors.contrastBorder ? colors.contrastBorder.toString() : '';
this._domNode.style.borderWidth = borderColor ? '1px' : '';
this._domNode.style.borderStyle = borderColor ? 'solid' : '';
this._domNode.style.borderColor = borderColor;
}));
this._domNode.style.backgroundColor = asCssValueWithDefault(buttonBackground, asCssValue(editorBackground));
this._domNode.style.color = asCssValueWithDefault(buttonForeground, asCssValue(editorForeground));
this._domNode.style.border = `1px solid ${asCssValue(contrastBorder)}`;

append(this._domNode, $('')).textContent = this.label;

Expand Down
21 changes: 5 additions & 16 deletions src/vs/workbench/browser/parts/views/viewFilter.ts
View file
Open in desktop
Expand Up @@ -10,10 +10,9 @@ import { HistoryInputBox } from 'vs/base/browser/ui/inputbox/inputBox';
import { KeyCode } from 'vs/base/common/keyCodes';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IThemeService, registerThemingParticipant, ICssStyleCollector, IColorTheme } from 'vs/platform/theme/common/themeService';
import { attachStylerCallback } from 'vs/platform/theme/common/styler';
import { registerThemingParticipant, ICssStyleCollector, IColorTheme } from 'vs/platform/theme/common/themeService';
import { toDisposable } from 'vs/base/common/lifecycle';
import { badgeBackground, badgeForeground, contrastBorder, inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground } from 'vs/platform/theme/common/colorRegistry';
import { badgeBackground, badgeForeground, contrastBorder, inputActiveOptionBorder, inputActiveOptionBackground, inputActiveOptionForeground, asCssValue } from 'vs/platform/theme/common/colorRegistry';
import { localize } from 'vs/nls';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { ContextScopedHistoryInputBox } from 'vs/platform/history/browser/contextScopedHistoryWidget';
Expand Down Expand Up @@ -87,7 +86,6 @@ export class FilterWidget extends Widget {
private readonly options: IFilterWidgetOptions,
@IInstantiationService private readonly instantiationService: IInstantiationService,
@IContextViewService private readonly contextViewService: IContextViewService,
@IThemeService private readonly themeService: IThemeService,
@IContextKeyService contextKeyService: IContextKeyService,
@IKeybindingService private readonly keybindingService: IKeybindingService
) {
Expand Down Expand Up @@ -179,18 +177,9 @@ export class FilterWidget extends Widget {

private createBadge(container: HTMLElement): HTMLElement {
const filterBadge = DOM.append(container, DOM.$('.viewpane-filter-badge.hidden'));
this._register(attachStylerCallback(this.themeService, { badgeBackground, badgeForeground, contrastBorder }, colors => {
const background = colors.badgeBackground ? colors.badgeBackground.toString() : '';
const foreground = colors.badgeForeground ? colors.badgeForeground.toString() : '';
const border = colors.contrastBorder ? colors.contrastBorder.toString() : '';

filterBadge.style.backgroundColor = background;

filterBadge.style.borderWidth = border ? '1px' : '';
filterBadge.style.borderStyle = border ? 'solid' : '';
filterBadge.style.borderColor = border;
filterBadge.style.color = foreground;
}));
filterBadge.style.backgroundColor = asCssValue(badgeBackground);
filterBadge.style.color = asCssValue(badgeForeground);
filterBadge.style.border = `1px solid ${asCssValue(contrastBorder)}`;
return filterBadge;
}

Expand Down
34 changes: 11 additions & 23 deletions src/vs/workbench/contrib/debug/browser/callStackView.ts
View file
Open in desktop
Expand Up @@ -35,8 +35,7 @@ import { WorkbenchCompressibleAsyncDataTree } from 'vs/platform/list/browser/lis
import { INotificationService } from 'vs/platform/notification/common/notification';
import { IOpenerService } from 'vs/platform/opener/common/opener';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import { textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
import { attachStylerCallback } from 'vs/platform/theme/common/styler';
import { asCssValue, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { ThemeIcon } from 'vs/base/common/themables';
import { ViewAction, ViewPane } from 'vs/workbench/browser/parts/views/viewPane';
Expand Down Expand Up @@ -231,8 +230,8 @@ export class CallStackView extends ViewPane {
this.instantiationService.createInstance(ThreadsRenderer),
this.instantiationService.createInstance(StackFramesRenderer),
new ErrorsRenderer(),
new LoadMoreRenderer(this.themeService),
new ShowMoreRenderer(this.themeService)
new LoadMoreRenderer(),
new ShowMoreRenderer()
], this.dataSource, {
accessibilityProvider: new CallStackAccessibilityProvider(),
compressionEnabled: true,
Expand Down Expand Up @@ -497,7 +496,6 @@ interface IErrorTemplateData {

interface ILabelTemplateData {
label: HTMLElement;
toDispose: IDisposable;
}

interface IStackFrameTemplateData {
Expand Down Expand Up @@ -814,21 +812,16 @@ class LoadMoreRenderer implements ICompressibleTreeRenderer<ThreadAndSessionIds,
static readonly ID = 'loadMore';
static readonly LABEL = localize('loadAllStackFrames', "Load More Stack Frames");

constructor(private readonly themeService: IThemeService) { }
constructor() { }

get templateId(): string {
return LoadMoreRenderer.ID;
}

renderTemplate(container: HTMLElement): ILabelTemplateData {
const label = dom.append(container, $('.load-all'));
const toDispose = attachStylerCallback(this.themeService, { textLinkForeground }, colors => {
if (colors.textLinkForeground) {
label.style.color = colors.textLinkForeground.toString();
}
});

return { label, toDispose };
label.style.color = asCssValue(textLinkForeground);
return { label };
}

renderElement(element: ITreeNode<ThreadAndSessionIds, FuzzyScore>, index: number, data: ILabelTemplateData): void {
Expand All @@ -840,14 +833,14 @@ class LoadMoreRenderer implements ICompressibleTreeRenderer<ThreadAndSessionIds,
}

disposeTemplate(templateData: ILabelTemplateData): void {
templateData.toDispose.dispose();
// noop
}
}

class ShowMoreRenderer implements ICompressibleTreeRenderer<IStackFrame[], FuzzyScore, ILabelTemplateData> {
static readonly ID = 'showMore';

constructor(private readonly themeService: IThemeService) { }
constructor() { }


get templateId(): string {
Expand All @@ -856,13 +849,8 @@ class ShowMoreRenderer implements ICompressibleTreeRenderer<IStackFrame[], Fuzzy

renderTemplate(container: HTMLElement): ILabelTemplateData {
const label = dom.append(container, $('.show-more'));
const toDispose = attachStylerCallback(this.themeService, { textLinkForeground }, colors => {
if (colors.textLinkForeground) {
label.style.color = colors.textLinkForeground.toString();
}
});

return { label, toDispose };
label.style.color = asCssValue(textLinkForeground);
return { label };
}

renderElement(element: ITreeNode<IStackFrame[], FuzzyScore>, index: number, data: ILabelTemplateData): void {
Expand All @@ -879,7 +867,7 @@ class ShowMoreRenderer implements ICompressibleTreeRenderer<IStackFrame[], Fuzzy
}

disposeTemplate(templateData: ILabelTemplateData): void {
templateData.toDispose.dispose();
// noop
}
}

Expand Down
15 changes: 5 additions & 10 deletions src/vs/workbench/contrib/debug/browser/debugActionViewItems.ts
View file
Open in desktop
Expand Up @@ -12,10 +12,8 @@ import { SelectBox, ISelectOptionItem } from 'vs/base/browser/ui/selectBox/selec
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { ICommandService } from 'vs/platform/commands/common/commands';
import { IDebugService, IDebugSession, IDebugConfiguration, IConfig, ILaunch, State } from 'vs/workbench/contrib/debug/common/debug';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { ThemeIcon } from 'vs/base/common/themables';
import { attachStylerCallback } from 'vs/platform/theme/common/styler';
import { selectBorder, selectBackground } from 'vs/platform/theme/common/colorRegistry';
import { selectBorder, selectBackground, asCssValue } from 'vs/platform/theme/common/colorRegistry';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IWorkspaceContextService, WorkbenchState } from 'vs/platform/workspace/common/workspace';
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
Expand Down Expand Up @@ -43,7 +41,6 @@ export class StartDebugActionViewItem extends BaseActionViewItem {
private context: unknown,
action: IAction,
@IDebugService private readonly debugService: IDebugService,
@IThemeService private readonly themeService: IThemeService,
@IConfigurationService private readonly configurationService: IConfigurationService,
@ICommandService private readonly commandService: ICommandService,
@IWorkspaceContextService private readonly contextService: IWorkspaceContextService,
Expand Down Expand Up @@ -128,12 +125,10 @@ export class StartDebugActionViewItem extends BaseActionViewItem {
event.stopPropagation();
}
}));
this.toDispose.push(attachStylerCallback(this.themeService, { selectBorder, selectBackground }, colors => {
this.container.style.border = colors.selectBorder ? `1px solid ${colors.selectBorder}` : '';
selectBoxContainer.style.borderLeft = colors.selectBorder ? `1px solid ${colors.selectBorder}` : '';
const selectBackgroundColor = colors.selectBackground ? `${colors.selectBackground}` : '';
this.container.style.backgroundColor = selectBackgroundColor;
}));
this.container.style.border = `1px solid ${asCssValue(selectBorder)}`;
selectBoxContainer.style.borderLeft = `1px solid ${asCssValue(selectBorder)}`;
this.container.style.backgroundColor = asCssValue(selectBackground);

this.debugService.getConfigurationManager().getDynamicProviders().then(providers => {
this.providers = providers;
if (this.providers.length > 0) {
Expand Down
25 changes: 4 additions & 21 deletions src/vs/workbench/contrib/debug/browser/debugHover.ts
View file
Open in desktop
Expand Up @@ -27,9 +27,7 @@ import * as nls from 'vs/nls';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { WorkbenchAsyncDataTree } from 'vs/platform/list/browser/listService';
import { ILogService } from 'vs/platform/log/common/log';
import { editorHoverBackground, editorHoverBorder, editorHoverForeground } from 'vs/platform/theme/common/colorRegistry';
import { attachStylerCallback } from 'vs/platform/theme/common/styler';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { asCssValue, editorHoverBackground, editorHoverBorder, editorHoverForeground } from 'vs/platform/theme/common/colorRegistry';
import { renderExpressionValue } from 'vs/workbench/contrib/debug/browser/baseDebugView';
import { LinkDetector } from 'vs/workbench/contrib/debug/browser/linkDetector';
import { VariablesRenderer } from 'vs/workbench/contrib/debug/browser/variablesView';
Expand Down Expand Up @@ -92,7 +90,6 @@ export class DebugHoverWidget implements IContentWidget {
private editor: ICodeEditor,
@IDebugService private readonly debugService: IDebugService,
@IInstantiationService private readonly instantiationService: IInstantiationService,
@IThemeService private readonly themeService: IThemeService
) {
this.toDispose = [];

Expand Down Expand Up @@ -132,24 +129,10 @@ export class DebugHoverWidget implements IContentWidget {
this.toDispose.push(this.scrollbar);

this.editor.applyFontInfo(this.domNode);
this.domNode.style.backgroundColor = asCssValue(editorHoverBackground);
this.domNode.style.border = `1px solid ${asCssValue(editorHoverBorder)}`;
this.domNode.style.color = asCssValue(editorHoverForeground);

this.toDispose.push(attachStylerCallback(this.themeService, { editorHoverBackground, editorHoverBorder, editorHoverForeground }, colors => {
if (colors.editorHoverBackground) {
this.domNode.style.backgroundColor = colors.editorHoverBackground.toString();
} else {
this.domNode.style.backgroundColor = '';
}
if (colors.editorHoverBorder) {
this.domNode.style.border = `1px solid ${colors.editorHoverBorder}`;
} else {
this.domNode.style.border = '';
}
if (colors.editorHoverForeground) {
this.domNode.style.color = colors.editorHoverForeground.toString();
} else {
this.domNode.style.color = '';
}
}));
this.toDispose.push(this.tree.onDidChangeContentHeight(() => this.layoutTreeAndContainer(false)));

this.registerListeners();
Expand Down
32 changes: 15 additions & 17 deletions src/vs/workbench/contrib/feedback/browser/feedback.ts
View file
Open in desktop
Expand Up @@ -10,8 +10,7 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView
import { ICommandService } from 'vs/platform/commands/common/commands';
import { IIntegrityService } from 'vs/workbench/services/integrity/common/integrity';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { attachStylerCallback } from 'vs/platform/theme/common/styler';
import { editorWidgetBackground, editorWidgetForeground, widgetShadow, inputBorder, inputForeground, inputBackground, editorBackground, contrastBorder } from 'vs/platform/theme/common/colorRegistry';
import { editorWidgetBackground, editorWidgetForeground, widgetShadow, inputBorder, inputForeground, inputBackground, editorBackground, asCssValue, asCssValueWithDefault, widgetBorder, contrastBorder } from 'vs/platform/theme/common/colorRegistry';
import { append, $, addDisposableListener, EventType, EventHelper, prepend } from 'vs/base/browser/dom';
import { IAnchor } from 'vs/base/browser/ui/contextview/contextview';
import { Button } from 'vs/base/browser/ui/button/button';
Expand Down Expand Up @@ -291,22 +290,21 @@ export class FeedbackWidget extends Disposable {

this.sendButton.onDidClick(() => this.onSubmit());

disposables.add(attachStylerCallback(this.themeService, { widgetShadow, editorWidgetBackground, editorWidgetForeground, inputBackground, inputForeground, inputBorder, editorBackground, contrastBorder }, colors => {
if (this.feedbackForm) {
this.feedbackForm.style.backgroundColor = colors.editorWidgetBackground ? colors.editorWidgetBackground.toString() : '';
this.feedbackForm.style.color = colors.editorWidgetForeground ? colors.editorWidgetForeground.toString() : '';
this.feedbackForm.style.boxShadow = colors.widgetShadow ? `0 0 8px 2px ${colors.widgetShadow}` : '';
this.feedbackForm.style.border = colors.widgetBorder ? `1px solid ${colors.widgetBorder}` : '';
}
if (this.feedbackDescriptionInput) {
this.feedbackDescriptionInput.style.backgroundColor = colors.inputBackground ? colors.inputBackground.toString() : '';
this.feedbackDescriptionInput.style.color = colors.inputForeground ? colors.inputForeground.toString() : '';
this.feedbackDescriptionInput.style.border = `1px solid ${colors.inputBorder || 'transparent'}`;
}
if (this.feedbackForm) {
this.feedbackForm.style.backgroundColor = asCssValue(editorWidgetBackground);
this.feedbackForm.style.color = asCssValue(editorWidgetForeground);
this.feedbackForm.style.boxShadow = `0 0 8px 2px ${asCssValue(widgetShadow)}`;
this.feedbackForm.style.border = `1px solid ${asCssValue(widgetBorder)}`;
}
if (this.feedbackDescriptionInput) {
this.feedbackDescriptionInput.style.backgroundColor = asCssValue(inputBackground);
this.feedbackDescriptionInput.style.color = asCssValue(inputForeground);
this.feedbackDescriptionInput.style.border = `1px solid ${asCssValueWithDefault(inputBorder, 'transparent')}`;
}

contactUsContainer.style.backgroundColor = asCssValue(editorBackground);
contactUsContainer.style.border = `1px solid ${asCssValueWithDefault(contrastBorder, 'transparent')}`;

contactUsContainer.style.backgroundColor = colors.editorBackground ? colors.editorBackground.toString() : '';
contactUsContainer.style.border = `1px solid ${colors.contrastBorder || 'transparent'}`;
}));

return {
dispose: () => {
Expand Down