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

breadcrumbsWidget: move away from styler #169722

Merged
merged 1 commit into from Dec 21, 2022
Merged

breadcrumbsWidget: move away from styler #169722

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
24 changes: 11 additions & 13 deletions src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts
View file
Open in desktop
Expand Up @@ -8,7 +8,6 @@ import { IMouseEvent } from 'vs/base/browser/mouseEvent';
import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
import { commonPrefixLength } from 'vs/base/common/arrays';
import { CSSIcon } from 'vs/base/common/codicons';
import { Color } from 'vs/base/common/color';
import { Emitter, Event } from 'vs/base/common/event';
import { DisposableStore, dispose, IDisposable } from 'vs/base/common/lifecycle';
import { ScrollbarVisibility } from 'vs/base/common/scrollable';
Expand All @@ -21,11 +20,11 @@ export abstract class BreadcrumbsItem {
}

export interface IBreadcrumbsWidgetStyles {
breadcrumbsBackground?: Color;
breadcrumbsForeground?: Color;
breadcrumbsHoverForeground?: Color;
breadcrumbsFocusForeground?: Color;
breadcrumbsFocusAndSelectionForeground?: Color;
readonly breadcrumbsBackground: string | undefined;
readonly breadcrumbsForeground: string | undefined;
readonly breadcrumbsHoverForeground: string | undefined;
readonly breadcrumbsFocusForeground: string | undefined;
readonly breadcrumbsFocusAndSelectionForeground: string | undefined;
}

export interface IBreadcrumbsItemEvent {
Expand All @@ -39,7 +38,6 @@ export class BreadcrumbsWidget {

private readonly _disposables = new DisposableStore();
private readonly _domNode: HTMLDivElement;
private readonly _styleElement: HTMLStyleElement;
private readonly _scrollable: DomScrollableElement;

private readonly _onDidSelectItem = new Emitter<IBreadcrumbsItemEvent>();
Expand All @@ -65,7 +63,8 @@ export class BreadcrumbsWidget {
constructor(
container: HTMLElement,
horizontalScrollbarSize: number,
separatorIcon: CSSIcon
separatorIcon: CSSIcon,
styles: IBreadcrumbsWidgetStyles
) {
this._domNode = document.createElement('div');
this._domNode.className = 'monaco-breadcrumbs';
Expand All @@ -83,7 +82,8 @@ export class BreadcrumbsWidget {
this._disposables.add(dom.addStandardDisposableListener(this._domNode, 'click', e => this._onClick(e)));
container.appendChild(this._scrollable.getDomNode());

this._styleElement = dom.createStyleSheet(this._domNode);
const styleElement = dom.createStyleSheet(this._domNode);
this._style(styleElement, styles);

const focusTracker = dom.trackFocus(this._domNode);
this._disposables.add(focusTracker);
Expand Down Expand Up @@ -142,7 +142,7 @@ export class BreadcrumbsWidget {
});
}

style(style: IBreadcrumbsWidgetStyles): void {
private _style(styleElement: HTMLStyleElement, style: IBreadcrumbsWidgetStyles): void {
let content = '';
if (style.breadcrumbsBackground) {
content += `.monaco-breadcrumbs { background-color: ${style.breadcrumbsBackground}}`;
Expand All @@ -159,9 +159,7 @@ export class BreadcrumbsWidget {
if (style.breadcrumbsHoverForeground) {
content += `.monaco-breadcrumbs:not(.disabled ) .monaco-breadcrumb-item:hover:not(.focused):not(.selected) { color: ${style.breadcrumbsHoverForeground}}\n`;
}
if (this._styleElement.innerText !== content) {
this._styleElement.innerText = content;
}
styleElement.innerText = content;
}

setEnabled(value: boolean) {
Expand Down
15 changes: 14 additions & 1 deletion src/vs/platform/theme/browser/defaultStyles.ts
View file
Open in desktop
Expand Up @@ -4,13 +4,14 @@
*--------------------------------------------------------------------------------------------*/
import { IButtonStyles } from 'vs/base/browser/ui/button/button';
import { IKeybindingLabelStyles } from 'vs/base/browser/ui/keybindingLabel/keybindingLabel';
import { ColorIdentifier, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, asCssValue, widgetShadow, buttonForeground, buttonSeparator, buttonBackground, buttonHoverBackground, buttonSecondaryForeground, buttonSecondaryBackground, buttonSecondaryHoverBackground, buttonBorder, progressBarBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputActiveOptionBackground, editorWidgetBackground, editorWidgetForeground, contrastBorder, checkboxBorder, checkboxBackground, checkboxForeground, problemsErrorIconForeground, problemsWarningIconForeground, problemsInfoIconForeground, inputBackground, inputForeground, inputBorder, textLinkForeground, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationInfoForeground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationWarningForeground, inputValidationErrorBorder, inputValidationErrorBackground, inputValidationErrorForeground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFilterWidgetShadow, badgeBackground, badgeForeground } from 'vs/platform/theme/common/colorRegistry';
import { ColorIdentifier, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, asCssValue, widgetShadow, buttonForeground, buttonSeparator, buttonBackground, buttonHoverBackground, buttonSecondaryForeground, buttonSecondaryBackground, buttonSecondaryHoverBackground, buttonBorder, progressBarBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputActiveOptionBackground, editorWidgetBackground, editorWidgetForeground, contrastBorder, checkboxBorder, checkboxBackground, checkboxForeground, problemsErrorIconForeground, problemsWarningIconForeground, problemsInfoIconForeground, inputBackground, inputForeground, inputBorder, textLinkForeground, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationInfoForeground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationWarningForeground, inputValidationErrorBorder, inputValidationErrorBackground, inputValidationErrorForeground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFilterWidgetShadow, badgeBackground, badgeForeground, breadcrumbsBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionForeground } from 'vs/platform/theme/common/colorRegistry';
import { IProgressBarStyles } from 'vs/base/browser/ui/progressbar/progressbar';
import { ICheckboxStyles, IToggleStyles } from 'vs/base/browser/ui/toggle/toggle';
import { IDialogStyles } from 'vs/base/browser/ui/dialog/dialog';
import { IInputBoxStyles } from 'vs/base/browser/ui/inputbox/inputBox';
import { IFindWidgetStyles } from 'vs/base/browser/ui/tree/abstractTree';
import { ICountBadgeStyles } from 'vs/base/browser/ui/countBadge/countBadge';
import { IBreadcrumbsWidgetStyles } from 'vs/base/browser/ui/breadcrumbs/breadcrumbsWidget';

export type IStyleOverride<T> = {
[P in keyof T]?: ColorIdentifier;
Expand Down Expand Up @@ -122,3 +123,15 @@ export function getCountBadgeStyle(override: IStyleOverride<ICountBadgeStyles>):
badgeBorder: asCssValue(contrastBorder)
};
}

export const defaultBreadcrumbsWidgetStyles = getBreadcrumbsWidgetStyles({});

export function getBreadcrumbsWidgetStyles(override: IStyleOverride<IBreadcrumbsWidgetStyles>): IBreadcrumbsWidgetStyles {
return {
breadcrumbsBackground: asCssValue(override.breadcrumbsBackground ?? breadcrumbsBackground),
breadcrumbsForeground: asCssValue(override.breadcrumbsForeground ?? breadcrumbsForeground),
breadcrumbsHoverForeground: asCssValue(override.breadcrumbsFocusForeground ?? breadcrumbsFocusForeground),
breadcrumbsFocusForeground: asCssValue(override.breadcrumbsFocusForeground ?? breadcrumbsFocusForeground),
breadcrumbsFocusAndSelectionForeground: asCssValue(override.breadcrumbsFocusAndSelectionForeground ?? breadcrumbsActiveSelectionForeground)
};
}
25 changes: 2 additions & 23 deletions src/vs/platform/theme/common/styler.ts
View file
Open in desktop
Expand Up @@ -7,8 +7,8 @@ import { Color } from 'vs/base/common/color';
import { IDisposable } from 'vs/base/common/lifecycle';
import { IThemable, styleFn } from 'vs/base/common/styler';
import {
activeContrastBorder, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, breadcrumbsFocusForeground, breadcrumbsForeground,
ColorIdentifier, ColorTransform, ColorValue, editorWidgetBorder, focusBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground,
activeContrastBorder,
ColorIdentifier, ColorValue, editorWidgetBorder, focusBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground,
inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground,
inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground,
listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropBackground,
Expand Down Expand Up @@ -160,31 +160,10 @@ export const defaultListStyles: IColorMapping = {
inputValidationErrorBorder,
};


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

export interface IBreadcrumbsWidgetStyleOverrides extends IColorMapping {
breadcrumbsBackground?: ColorIdentifier | ColorTransform;
breadcrumbsForeground?: ColorIdentifier;
breadcrumbsHoverForeground?: ColorIdentifier;
breadcrumbsFocusForeground?: ColorIdentifier;
breadcrumbsFocusAndSelectionForeground?: ColorIdentifier;
}

export const defaultBreadcrumbsStyles = <IBreadcrumbsWidgetStyleOverrides>{
breadcrumbsBackground: breadcrumbsBackground,
breadcrumbsForeground: breadcrumbsForeground,
breadcrumbsHoverForeground: breadcrumbsFocusForeground,
breadcrumbsFocusForeground: breadcrumbsFocusForeground,
breadcrumbsFocusAndSelectionForeground: breadcrumbsActiveSelectionForeground,
};

export function attachBreadcrumbsStyler(widget: IThemable, themeService: IThemeService, style?: IBreadcrumbsWidgetStyleOverrides): IDisposable {
return attachStyler(themeService, { ...defaultBreadcrumbsStyles, ...style }, widget);
}

export interface IMenuStyleOverrides extends IColorMapping {
shadowColor?: ColorIdentifier;
borderColor?: ColorIdentifier;
Expand Down
21 changes: 9 additions & 12 deletions src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts
View file
Open in desktop
Expand Up @@ -5,7 +5,7 @@

import * as dom from 'vs/base/browser/dom';
import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
import { BreadcrumbsItem, BreadcrumbsWidget, IBreadcrumbsItemEvent } from 'vs/base/browser/ui/breadcrumbs/breadcrumbsWidget';
import { BreadcrumbsItem, BreadcrumbsWidget, IBreadcrumbsItemEvent, IBreadcrumbsWidgetStyles } from 'vs/base/browser/ui/breadcrumbs/breadcrumbsWidget';
import { tail } from 'vs/base/common/arrays';
import { timeout } from 'vs/base/common/async';
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
Expand All @@ -23,9 +23,6 @@ import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiati
import { KeybindingsRegistry, KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry';
import { IListService, WorkbenchAsyncDataTree, WorkbenchDataTree, WorkbenchListFocusContextKey } from 'vs/platform/list/browser/listService';
import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
import { ColorIdentifier, ColorTransform } from 'vs/platform/theme/common/colorRegistry';
import { attachBreadcrumbsStyler } from 'vs/platform/theme/common/styler';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { DEFAULT_LABELS_CONTAINER, ResourceLabels } from 'vs/workbench/browser/labels';
import { BreadcrumbsConfig, IBreadcrumbsService } from 'vs/workbench/browser/parts/editor/breadcrumbs';
import { BreadcrumbsModel, FileElement, OutlineElement2 } from 'vs/workbench/browser/parts/editor/breadcrumbsModel';
Expand All @@ -41,6 +38,7 @@ import { ITreeNode } from 'vs/base/browser/ui/tree/tree';
import { IOutline } from 'vs/workbench/services/outline/browser/outline';
import { registerIcon } from 'vs/platform/theme/common/iconRegistry';
import { Codicon } from 'vs/base/common/codicons';
import { IStyleOverride, defaultBreadcrumbsWidgetStyles, getBreadcrumbsWidgetStyles } from 'vs/platform/theme/browser/defaultStyles';

class OutlineItem extends BreadcrumbsItem {

Expand Down Expand Up @@ -143,11 +141,11 @@ class FileItem extends BreadcrumbsItem {
}

export interface IBreadcrumbsControlOptions {
showFileIcons: boolean;
showSymbolIcons: boolean;
showDecorationColors: boolean;
breadcrumbsBackground: ColorIdentifier | ColorTransform;
showPlaceholder: boolean;
readonly showFileIcons: boolean;
readonly showSymbolIcons: boolean;
readonly showDecorationColors: boolean;
readonly showPlaceholder: boolean;
readonly widgetStylesOverwrite?: IStyleOverride<IBreadcrumbsWidgetStyles>;
}

const separatorIcon = registerIcon('breadcrumb-separator', Codicon.chevronRight, localize('separatorIcon', 'Icon for the separator in the breadcrumbs.'));
Expand Down Expand Up @@ -193,7 +191,6 @@ export class BreadcrumbsControl {
@IContextKeyService private readonly _contextKeyService: IContextKeyService,
@IContextViewService private readonly _contextViewService: IContextViewService,
@IInstantiationService private readonly _instantiationService: IInstantiationService,
@IThemeService private readonly _themeService: IThemeService,
@IQuickInputService private readonly _quickInputService: IQuickInputService,
@IFileService private readonly _fileService: IFileService,
@IEditorService private readonly _editorService: IEditorService,
Expand All @@ -212,11 +209,11 @@ export class BreadcrumbsControl {
this._labels = this._instantiationService.createInstance(ResourceLabels, DEFAULT_LABELS_CONTAINER);

const sizing = this._cfTitleScrollbarSizing.getValue() ?? 'default';
this._widget = new BreadcrumbsWidget(this.domNode, BreadcrumbsControl.SCROLLBAR_SIZES[sizing], separatorIcon);
const styles = _options.widgetStylesOverwrite ? getBreadcrumbsWidgetStyles(_options.widgetStylesOverwrite) : defaultBreadcrumbsWidgetStyles;
this._widget = new BreadcrumbsWidget(this.domNode, BreadcrumbsControl.SCROLLBAR_SIZES[sizing], separatorIcon, styles);
this._widget.onDidSelectItem(this._onSelectEvent, this, this._disposables);
this._widget.onDidFocusItem(this._onFocusEvent, this, this._disposables);
this._widget.onDidChangeFocus(this._updateCkBreadcrumbsActive, this, this._disposables);
this._disposables.add(attachBreadcrumbsStyler(this._widget, this._themeService, { breadcrumbsBackground: _options.breadcrumbsBackground }));

this._ckBreadcrumbsPossible = BreadcrumbsControl.CK_BreadcrumbsPossible.bindTo(this._contextKeyService);
this._ckBreadcrumbsVisible = BreadcrumbsControl.CK_BreadcrumbsVisible.bindTo(this._contextKeyService);
Expand Down
2 changes: 1 addition & 1 deletion src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts
View file
Open in desktop
Expand Up @@ -50,7 +50,7 @@ export class NoTabsTitleControl extends TitleControl {
this._register(addDisposableListener(this.editorLabel.element, EventType.CLICK, e => this.onTitleLabelClick(e)));

// Breadcrumbs
this.createBreadcrumbsControl(labelContainer, { showFileIcons: false, showSymbolIcons: true, showDecorationColors: false, breadcrumbsBackground: Color.transparent.toString(), showPlaceholder: false });
this.createBreadcrumbsControl(labelContainer, { showFileIcons: false, showSymbolIcons: true, showDecorationColors: false, widgetStylesOverwrite: { breadcrumbsBackground: Color.transparent.toString() }, showPlaceholder: false });
titleContainer.classList.toggle('breadcrumbs', Boolean(this.breadcrumbsControl));
this._register(toDisposable(() => titleContainer.classList.remove('breadcrumbs'))); // important to remove because the container is a shared dom node

Expand Down
4 changes: 2 additions & 2 deletions src/vs/workbench/browser/parts/editor/tabsTitleControl.ts
View file
Open in desktop
Expand Up @@ -27,7 +27,7 @@ import { ScrollbarVisibility } from 'vs/base/common/scrollable';
import { getOrSet } from 'vs/base/common/map';
import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { TAB_INACTIVE_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, TAB_BORDER, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_UNFOCUSED_ACTIVE_FOREGROUND, TAB_UNFOCUSED_INACTIVE_FOREGROUND, TAB_UNFOCUSED_ACTIVE_BACKGROUND, TAB_UNFOCUSED_ACTIVE_BORDER, TAB_ACTIVE_BORDER, TAB_HOVER_BACKGROUND, TAB_HOVER_BORDER, TAB_UNFOCUSED_HOVER_BACKGROUND, TAB_UNFOCUSED_HOVER_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, WORKBENCH_BACKGROUND, TAB_ACTIVE_BORDER_TOP, TAB_UNFOCUSED_ACTIVE_BORDER_TOP, TAB_ACTIVE_MODIFIED_BORDER, TAB_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_ACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_BACKGROUND, TAB_HOVER_FOREGROUND, TAB_UNFOCUSED_HOVER_FOREGROUND, EDITOR_GROUP_HEADER_TABS_BORDER, TAB_LAST_PINNED_BORDER } from 'vs/workbench/common/theme';
import { activeContrastBorder, contrastBorder, editorBackground, breadcrumbsBackground } from 'vs/platform/theme/common/colorRegistry';
import { activeContrastBorder, contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
import { ResourcesDropHandler, DraggedEditorIdentifier, DraggedEditorGroupIdentifier, DraggedTreeItemsIdentifier, extractTreeDropData } from 'vs/workbench/browser/dnd';
import { Color } from 'vs/base/common/color';
import { INotificationService } from 'vs/platform/notification/common/notification';
Expand Down Expand Up @@ -193,7 +193,7 @@ export class TabsTitleControl extends TitleControl {
const breadcrumbsContainer = document.createElement('div');
breadcrumbsContainer.classList.add('tabs-breadcrumbs');
this.titleContainer.appendChild(breadcrumbsContainer);
this.createBreadcrumbsControl(breadcrumbsContainer, { showFileIcons: true, showSymbolIcons: true, showDecorationColors: false, showPlaceholder: true, breadcrumbsBackground: breadcrumbsBackground });
this.createBreadcrumbsControl(breadcrumbsContainer, { showFileIcons: true, showSymbolIcons: true, showDecorationColors: false, showPlaceholder: true });
}

private createTabsScrollbar(scrollable: HTMLElement): ScrollableElement {
Expand Down