mirror of
https://github.com/microsoft/vscode.git
synced 2026-08-21 19:32:51 +01:00
Restore theme colors in Modern UI shell (#329701)
* Restore theme colors in Modern UI shell Honor contributed title, activity, and status bar colors while preserving the floating-card hierarchy. Use the title bar color for shell gutters, frame activity and content surfaces consistently, and remove the Modern UI title separator. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Update how modern UI applies themes * Address Modern UI shell review feedback Keep inactive title gutters synchronized, correct activity rail sizing at exposed window edges, and refresh status bar edge styling when Modern UI is toggled. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Hawk Ticehurst
co-authored by
Copilot
Copilot
parent
089827aa60
commit
eb55ea1514
@@ -1028,6 +1028,7 @@
|
||||
"--model-hover-surface-background",
|
||||
"--modern-ui-editor-tab-action-active-background",
|
||||
"--modern-ui-editor-tab-action-hover-background",
|
||||
"--modern-ui-shell-background",
|
||||
"--modern-ui-tab-active-background",
|
||||
"--modern-ui-tab-hover-background",
|
||||
"--scroll-shadow-surface",
|
||||
|
||||
@@ -24,7 +24,6 @@ export function rulesResponse(rulesByRepo: ReadonlyMap<string, MockExclusionRule
|
||||
});
|
||||
return { ok: true, status: 200, statusText: 'OK', json: () => Promise.resolve(payload) };
|
||||
}
|
||||
|
||||
/** Builds a failing response, optionally carrying GitHub's rate limit headers. */
|
||||
export function failureResponse(status: number, headers: Record<string, string> = {}): Partial<Response> {
|
||||
return {
|
||||
@@ -116,4 +115,3 @@ export class MockCAPIClientService {
|
||||
return gate.then(() => ({ ...this._defaultResponse, ...this._responder(repos) }) as unknown as T);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -38,7 +38,6 @@ export const CLOUD_SANDBOX_SEALED_TOKEN_PREFIX = 'copilot-sealed.v1.';
|
||||
export function isCloudSandboxSealedToken(token: string | undefined): boolean {
|
||||
return typeof token === 'string' && token.startsWith(CLOUD_SANDBOX_SEALED_TOKEN_PREFIX);
|
||||
}
|
||||
|
||||
/** The Mission Control environment id encoded in a cloud sandbox connection address, if any. */
|
||||
export function cloudSandboxEnvironmentId(address: string): string | undefined {
|
||||
return address.startsWith(CLOUD_SANDBOX_ADDRESS_PREFIX)
|
||||
@@ -319,4 +318,3 @@ export interface ICloudSandboxAgentHostService {
|
||||
*/
|
||||
getSealedGitHubToken(environmentId: string): string | undefined;
|
||||
}
|
||||
|
||||
|
||||
@@ -34,6 +34,7 @@ import { coalesce } from '../../base/common/arrays.js';
|
||||
import { assertReturnsDefined } from '../../base/common/types.js';
|
||||
import { INotificationService, NotificationsFilter } from '../../platform/notification/common/notification.js';
|
||||
import { IThemeService } from '../../platform/theme/common/themeService.js';
|
||||
import { isHighContrast } from '../../platform/theme/common/theme.js';
|
||||
import { WINDOW_ACTIVE_BORDER, WINDOW_INACTIVE_BORDER } from '../common/theme.js';
|
||||
import { LineNumbersType } from '../../editor/common/config/editorOptions.js';
|
||||
import { URI } from '../../base/common/uri.js';
|
||||
@@ -641,6 +642,7 @@ export abstract class Layout extends Disposable implements IWorkbenchLayoutServi
|
||||
// card margins) to the main container so auxiliary windows — whose parts do
|
||||
// not apply the matching content insets in code — are left untouched.
|
||||
this.mainContainer.classList.toggle(LayoutClasses.FLOATING_PANELS, this.isFloatingPanelsEnabled());
|
||||
this.updateWindowBorder();
|
||||
}
|
||||
|
||||
private setSideBarPosition(position: Position): void {
|
||||
@@ -677,6 +679,10 @@ export abstract class Layout extends Disposable implements IWorkbenchLayoutServi
|
||||
}
|
||||
|
||||
private updateWindowBorder(skipLayout = false) {
|
||||
const theme = this.themeService.getColorTheme();
|
||||
const didHaveMainWindowBorder = this.hasMainWindowBorder();
|
||||
const suppressMainWindowBorder = this.isFloatingPanelsEnabled() && !isHighContrast(theme.type);
|
||||
|
||||
if (
|
||||
isWeb ||
|
||||
isWindows || // not working well with zooming (border often not visible)
|
||||
@@ -689,24 +695,22 @@ export abstract class Layout extends Disposable implements IWorkbenchLayoutServi
|
||||
return;
|
||||
}
|
||||
|
||||
const theme = this.themeService.getColorTheme();
|
||||
|
||||
const activeBorder = theme.getColor(WINDOW_ACTIVE_BORDER);
|
||||
const inactiveBorder = theme.getColor(WINDOW_INACTIVE_BORDER);
|
||||
|
||||
const didHaveMainWindowBorder = this.hasMainWindowBorder();
|
||||
|
||||
for (const container of this.containers) {
|
||||
const isMainContainer = container === this.mainContainer;
|
||||
const isActiveContainer = this.activeContainer === container;
|
||||
|
||||
let windowBorder = false;
|
||||
if (!this.state.runtime.mainWindowFullscreen && (activeBorder || inactiveBorder)) {
|
||||
if (!(isMainContainer && suppressMainWindowBorder) && !this.state.runtime.mainWindowFullscreen && (activeBorder || inactiveBorder)) {
|
||||
windowBorder = true;
|
||||
|
||||
// If the inactive color is missing, fallback to the active one
|
||||
const borderColor = isActiveContainer && this.state.runtime.hasFocus ? activeBorder : inactiveBorder ?? activeBorder;
|
||||
container.style.setProperty('--window-border-color', borderColor?.toString() ?? 'transparent');
|
||||
} else {
|
||||
container.style.removeProperty('--window-border-color');
|
||||
}
|
||||
|
||||
if (isMainContainer) {
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
|
||||
.monaco-workbench.floating-panels .part.sidebar,
|
||||
.monaco-workbench.floating-panels .part.auxiliarybar {
|
||||
margin: 0 var(--vscode-spacing-size20) var(--vscode-spacing-size20) var(--vscode-spacing-size40);
|
||||
margin: var(--vscode-spacing-size40) var(--vscode-spacing-size20) var(--vscode-spacing-size40) var(--vscode-spacing-size40);
|
||||
border: 1px solid var(--vscode-surface-border, var(--vscode-widget-border, transparent)) !important;
|
||||
border-radius: var(--vscode-cornerRadius-large);
|
||||
background-color: var(--vscode-surface-background) !important;
|
||||
@@ -32,13 +32,17 @@
|
||||
|
||||
/* Keep the panel surface aligned with the panel theme background in light theme. */
|
||||
.monaco-workbench.floating-panels .part.panel {
|
||||
margin: var(--vscode-spacing-size40) var(--vscode-spacing-size20) var(--vscode-spacing-size20) var(--vscode-spacing-size40);
|
||||
margin: var(--vscode-spacing-size40) var(--vscode-spacing-size20) var(--vscode-spacing-size40) var(--vscode-spacing-size40);
|
||||
border: 1px solid var(--vscode-surface-border, var(--vscode-widget-border, transparent)) !important;
|
||||
border-radius: var(--vscode-cornerRadius-large);
|
||||
background-color: var(--vscode-panel-background) !important;
|
||||
color: var(--vscode-surface-foreground);
|
||||
}
|
||||
|
||||
.monaco-workbench.floating-panels .part.panel.top {
|
||||
margin-bottom: var(--vscode-spacing-size20);
|
||||
}
|
||||
|
||||
.monaco-workbench.floating-panels .part.editor > .content {
|
||||
border-radius: var(--vscode-cornerRadius-large, 8px);
|
||||
}
|
||||
@@ -62,12 +66,6 @@
|
||||
background-color: var(--vscode-sideBar-background) !important;
|
||||
}
|
||||
|
||||
/* Side bars sit directly under the title bar — keep them flush (no top margin). */
|
||||
.monaco-workbench.floating-panels .part.sidebar,
|
||||
.monaco-workbench.floating-panels .part.auxiliarybar {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* With no title bar and no banner above them (`.top-window-edge`, e.g. native fullscreen
|
||||
* on macOS) the cards abut the window edge; double the top margin to match the outer
|
||||
* gutter on the other window edges. Mirrors the .nostatusbar pattern for the bottom. */
|
||||
@@ -76,12 +74,7 @@
|
||||
margin-top: calc(var(--vscode-spacing-size40) * 2);
|
||||
}
|
||||
|
||||
/*
|
||||
* When panel is at TOP and sidebars are in the same grid row as the editor (sibling),
|
||||
* give them a top margin matching the editor's gap from the panel. Alignment determines
|
||||
* which bars are sibling — mirrors adjustPartPositions() in layout.ts.
|
||||
* Uses `.panel-alignment-*` and `.left`/`.right` classes set in layout.ts.
|
||||
*/
|
||||
/* Side bars below a top panel use an inter-card gap rather than the window-edge gutter. */
|
||||
.monaco-workbench.floating-panels.panel-position-top:not(.nopanel).panel-alignment-justify .part.sidebar,
|
||||
.monaco-workbench.floating-panels.panel-position-top:not(.nopanel).panel-alignment-justify .part.auxiliarybar,
|
||||
.monaco-workbench.floating-panels.panel-position-top:not(.nopanel).panel-alignment-left .part.sidebar.left,
|
||||
@@ -91,26 +84,12 @@
|
||||
margin-top: var(--vscode-spacing-size40);
|
||||
}
|
||||
|
||||
/* Panels in top/left/right positions are flush with the title bar (no top margin).
|
||||
* The panel element itself carries the position class (e.g. `.top`). */
|
||||
.monaco-workbench.floating-panels .part.panel.top,
|
||||
.monaco-workbench.floating-panels .part.panel.left,
|
||||
.monaco-workbench.floating-panels .part.panel.right {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.monaco-workbench.floating-panels.top-window-edge .part.panel.top,
|
||||
.monaco-workbench.floating-panels.top-window-edge .part.panel.left,
|
||||
.monaco-workbench.floating-panels.top-window-edge .part.panel.right {
|
||||
margin-top: calc(var(--vscode-spacing-size40) * 2);
|
||||
}
|
||||
|
||||
/* When the bottom panel is maximized (editor hidden) it spans the full content height
|
||||
* and is flush with the title bar — remove the inter-card top margin. */
|
||||
.monaco-workbench.floating-panels.nomaineditorarea .part.panel.bottom {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.monaco-workbench.floating-panels.top-window-edge.nomaineditorarea .part.panel.bottom {
|
||||
margin-top: calc(var(--vscode-spacing-size40) * 2);
|
||||
}
|
||||
@@ -129,9 +108,9 @@
|
||||
margin-right: calc(var(--vscode-spacing-size40) * 2);
|
||||
}
|
||||
|
||||
/* Main editor: float like the other cards, but stay flush with the title bar. */
|
||||
/* Main editor: float like the other cards. */
|
||||
.monaco-workbench.floating-panels > .monaco-grid-view .part.editor {
|
||||
margin: 0 var(--vscode-spacing-size20) var(--vscode-spacing-size20) var(--vscode-spacing-size40);
|
||||
margin: var(--vscode-spacing-size40) var(--vscode-spacing-size20) var(--vscode-spacing-size40) var(--vscode-spacing-size40);
|
||||
}
|
||||
|
||||
.monaco-workbench.floating-panels.top-window-edge > .monaco-grid-view .part.editor {
|
||||
@@ -158,20 +137,10 @@
|
||||
margin-right: calc(var(--vscode-spacing-size40) * 2);
|
||||
}
|
||||
|
||||
/* The shell backdrop behind the floating cards matches the editor background. */
|
||||
/* The title bar color forms the shell backdrop visible through the floating-card gutters. */
|
||||
.monaco-workbench.floating-panels,
|
||||
.monaco-workbench.floating-panels > .monaco-grid-view {
|
||||
background-color: var(--vscode-editor-background);
|
||||
}
|
||||
|
||||
/*
|
||||
* Activity bar, status bar and title bar blend into the shell: drop their own
|
||||
* background and borders so the editor-colored backdrop shows through.
|
||||
*/
|
||||
.monaco-workbench.floating-panels .part.activitybar,
|
||||
.monaco-workbench.floating-panels .part.statusbar,
|
||||
.monaco-workbench.floating-panels .part.titlebar {
|
||||
background-color: transparent !important;
|
||||
border-color: transparent !important;
|
||||
background-color: var(--modern-ui-shell-background, var(--vscode-titleBar-activeBackground));
|
||||
}
|
||||
|
||||
/* Panel title composite receives an inline border-top color; suppress it in floating mode. */
|
||||
@@ -179,21 +148,21 @@
|
||||
border-top-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Activity bar (default position) gets a left and bottom gutter to match the cards. */
|
||||
/* The activity bar is an inset navigation rail between the full-width title and status bars. */
|
||||
.monaco-workbench.floating-panels .part.activitybar {
|
||||
margin-left: var(--vscode-spacing-size40);
|
||||
margin-bottom: var(--vscode-spacing-size40);
|
||||
margin: var(--vscode-spacing-size40);
|
||||
height: calc(100% - (var(--vscode-spacing-size40) * 2));
|
||||
border-radius: var(--vscode-cornerRadius-medium);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.monaco-workbench.floating-panels .part.activitybar.bordered::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.monaco-workbench.floating-panels.top-window-edge .part.activitybar {
|
||||
margin-top: calc(var(--vscode-spacing-size40) * 2);
|
||||
}
|
||||
|
||||
/* When the activity bar is on the right, add the inner gutter missing from the
|
||||
* neighboring card while retaining the outer gutter at the window edge. */
|
||||
.monaco-workbench.floating-panels .part.activitybar.right {
|
||||
margin-left: var(--vscode-spacing-size40);
|
||||
margin-right: var(--vscode-spacing-size40);
|
||||
height: calc(100% - (var(--vscode-spacing-size40) * 3));
|
||||
}
|
||||
|
||||
.monaco-workbench.floating-panels .activitybar.compact > .content > .composite-bar {
|
||||
@@ -206,27 +175,16 @@
|
||||
margin-top: var(--vscode-spacing-size40);
|
||||
}
|
||||
|
||||
/* The status bar draws its top border via a pseudo-element — hide it too. */
|
||||
.monaco-workbench.floating-panels .part.statusbar::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Modern UI paints the status bar transparent, which suppresses the whole-bar
|
||||
* recolor used to signal an active style override (e.g. an active debug session).
|
||||
* While an override is active, restore the whole-bar recolor so the cue reads as
|
||||
* clearly as it does in the classic UI.
|
||||
*/
|
||||
.monaco-workbench.floating-panels .part.statusbar.has-style-override {
|
||||
background-color: color-mix(in srgb, var(--vscode-statusBar-debuggingBackground) 30%, transparent) !important;
|
||||
}
|
||||
|
||||
/* Inset and vertically center the status bar items within its floating gutter. */
|
||||
/* Inset and vertically center status bar items within the full-width bottom rail. */
|
||||
.monaco-workbench.floating-panels .part.statusbar {
|
||||
padding-left: var(--vscode-spacing-size60);
|
||||
padding-right: var(--vscode-spacing-size60);
|
||||
padding-top: calc(var(--vscode-spacing-size40) - var(--vscode-strokeThickness)); /* offset for the border-top of the status bar */
|
||||
padding-bottom: calc(var(--vscode-spacing-size40) + var(--vscode-strokeThickness)); /* offset for the border-bottom of the status bar */
|
||||
padding-top: var(--vscode-spacing-size40);
|
||||
padding-bottom: var(--vscode-spacing-size40);
|
||||
}
|
||||
|
||||
.monaco-workbench.floating-panels .part.statusbar:not(:focus).status-border-top::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* With a compact activity bar the horizontal inset is tightened to match.
|
||||
@@ -273,7 +231,7 @@
|
||||
|
||||
/*
|
||||
* When a visible bottom panel directly abuts the sidebars and/or editor (they share
|
||||
* the same grid row), keep the normal trailing 2px margin instead of the doubled 8px.
|
||||
* the same grid row), use the tighter 2px trailing margin instead of an outer gutter.
|
||||
* Which bars are in the same row as the editor depends on panel alignment:
|
||||
* justify → both sidebars are in the top row (above the full-width panel)
|
||||
* left → the bar on the LEFT is in the top row; the bar on the RIGHT is full-height
|
||||
@@ -281,18 +239,23 @@
|
||||
* center → neither sidebar is in the top row (both span full height)
|
||||
* Uses `.panel-alignment-*` and `.left`/`.right` position classes set in layout.ts.
|
||||
*/
|
||||
.monaco-workbench.floating-panels.nostatusbar.panel-position-bottom:not(.nopanel).panel-alignment-justify .part.sidebar,
|
||||
.monaco-workbench.floating-panels.nostatusbar.panel-position-bottom:not(.nopanel).panel-alignment-justify .part.auxiliarybar,
|
||||
.monaco-workbench.floating-panels.nostatusbar.panel-position-bottom:not(.nopanel).panel-alignment-left .part.sidebar.left,
|
||||
.monaco-workbench.floating-panels.nostatusbar.panel-position-bottom:not(.nopanel).panel-alignment-left .part.auxiliarybar.left,
|
||||
.monaco-workbench.floating-panels.nostatusbar.panel-position-bottom:not(.nopanel).panel-alignment-right .part.sidebar.right,
|
||||
.monaco-workbench.floating-panels.nostatusbar.panel-position-bottom:not(.nopanel).panel-alignment-right .part.auxiliarybar.right,
|
||||
.monaco-workbench.floating-panels.nostatusbar.panel-position-bottom:not(.nopanel) > .monaco-grid-view .part.editor {
|
||||
.monaco-workbench.floating-panels.panel-position-bottom:not(.nopanel).panel-alignment-justify .part.sidebar,
|
||||
.monaco-workbench.floating-panels.panel-position-bottom:not(.nopanel).panel-alignment-justify .part.auxiliarybar,
|
||||
.monaco-workbench.floating-panels.panel-position-bottom:not(.nopanel).panel-alignment-left .part.sidebar.left,
|
||||
.monaco-workbench.floating-panels.panel-position-bottom:not(.nopanel).panel-alignment-left .part.auxiliarybar.left,
|
||||
.monaco-workbench.floating-panels.panel-position-bottom:not(.nopanel).panel-alignment-right .part.sidebar.right,
|
||||
.monaco-workbench.floating-panels.panel-position-bottom:not(.nopanel).panel-alignment-right .part.auxiliarybar.right,
|
||||
.monaco-workbench.floating-panels.panel-position-bottom:not(.nopanel) > .monaco-grid-view .part.editor {
|
||||
margin-bottom: var(--vscode-spacing-size20);
|
||||
}
|
||||
|
||||
.monaco-workbench.floating-panels.nostatusbar .part.activitybar {
|
||||
margin-bottom: calc(var(--vscode-spacing-size40) * 2);
|
||||
height: calc(100% - (var(--vscode-spacing-size40) * 3));
|
||||
}
|
||||
|
||||
.monaco-workbench.floating-panels.top-window-edge.nostatusbar .part.activitybar {
|
||||
height: calc(100% - (var(--vscode-spacing-size40) * 4));
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -324,26 +287,16 @@
|
||||
* region by the card margins. Left unadjusted, the hover highlight (`:before`)
|
||||
* overshoots into those gaps — the reported "sash extends past the panels". Anchor the
|
||||
* highlight with `top`/`bottom` (rather than `height`) so the two insets compose
|
||||
* independently across layouts. The base leaves the cards flush with the title bar
|
||||
* (`top: 0`) and insets the bottom by the 2px trailing card margin
|
||||
* (`--vscode-spacing-size20`). Only the highlight is inset; the sash hit region is
|
||||
* independently across layouts. The base follows the 4px outer shell gutter on
|
||||
* the top and bottom. Only the highlight is inset; the sash hit region is
|
||||
* unchanged. In non-justify alignments a full-height side bar (spanning both the panel
|
||||
* and editor rows) keeps its own margins, so its highlight may sit up to a card margin
|
||||
* short on the abutting edge — an accepted minor cosmetic gap.
|
||||
*/
|
||||
.monaco-workbench.floating-panels .monaco-sash.vertical:not(.part .monaco-sash)::before {
|
||||
top: 0;
|
||||
bottom: var(--vscode-spacing-size20);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Panel docked at the top: the editor and its sibling side/aux bars take a top margin
|
||||
* (`--vscode-spacing-size40`); inset the highlight's top to match so it does not
|
||||
* overshoot above the cards into that gap.
|
||||
*/
|
||||
.monaco-workbench.floating-panels.panel-position-top:not(.nopanel) .monaco-sash.vertical:not(.part .monaco-sash)::before {
|
||||
top: var(--vscode-spacing-size40);
|
||||
bottom: var(--vscode-spacing-size40);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* At the top window edge the cards take a doubled top gutter.
|
||||
|
||||
@@ -69,8 +69,8 @@ export class ActivitybarPart extends Part {
|
||||
|
||||
//#region IView
|
||||
|
||||
get minimumWidth(): number { return this.baseWidth + this.floatingGutter; }
|
||||
get maximumWidth(): number { return this.baseWidth + this.floatingGutter; }
|
||||
get minimumWidth(): number { return this.baseWidth + this.floatingHorizontalGutter; }
|
||||
get maximumWidth(): number { return this.baseWidth + this.floatingHorizontalGutter; }
|
||||
readonly minimumHeight: number = 0;
|
||||
readonly maximumHeight: number = Number.POSITIVE_INFINITY;
|
||||
|
||||
@@ -92,17 +92,8 @@ export class ActivitybarPart extends Part {
|
||||
return this.layoutService.isFloatingPanelsEnabled() ? ActivitybarPart.FLOATING_ACTION_HEIGHT : ActivitybarPart.ACTION_HEIGHT;
|
||||
}
|
||||
|
||||
/** Extra horizontal space reserved around the part when floating panels are enabled. */
|
||||
private get floatingGutter(): number {
|
||||
if (!this.layoutService.isFloatingPanelsEnabled()) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
// Parts adjacent to a left activity bar already provide the inner gutter through
|
||||
// their left margin. On the right, the activity bar owns both the inner and outer gutters.
|
||||
return this.layoutService.getSideBarPosition() === Position.RIGHT
|
||||
? ActivitybarPart.FLOATING_MARGIN * 2
|
||||
: ActivitybarPart.FLOATING_MARGIN;
|
||||
private get floatingHorizontalGutter(): number {
|
||||
return this.layoutService.isFloatingPanelsEnabled() ? ActivitybarPart.FLOATING_MARGIN * 2 : 0;
|
||||
}
|
||||
|
||||
private readonly compositeBar = this._register(new MutableDisposable<PaneCompositeBar>());
|
||||
@@ -279,7 +270,7 @@ export class ActivitybarPart extends Part {
|
||||
}
|
||||
|
||||
const { top, bottom } = this.getFloatingGutters();
|
||||
const contentWidth = Math.max(0, width - this.floatingGutter);
|
||||
const contentWidth = Math.max(0, width - this.floatingHorizontalGutter);
|
||||
const contentHeight = Math.max(0, height - top - bottom);
|
||||
|
||||
// Layout contents
|
||||
@@ -299,7 +290,7 @@ export class ActivitybarPart extends Part {
|
||||
}
|
||||
|
||||
return {
|
||||
top: isFloatingTopEdgeExposed(this.layoutService, mainWindow) ? FLOATING_PANEL_MARGIN * 2 : 0,
|
||||
top: isFloatingTopEdgeExposed(this.layoutService, mainWindow) ? FLOATING_PANEL_MARGIN * 2 : FLOATING_PANEL_MARGIN,
|
||||
bottom: this.layoutService.isVisible(Parts.STATUSBAR_PART, mainWindow) ? FLOATING_PANEL_MARGIN : FLOATING_PANEL_MARGIN * 2
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1424,10 +1424,8 @@ export class EditorPart extends Part<IEditorPartMemento> implements IEditorPart,
|
||||
this.left = left;
|
||||
|
||||
// When the floating panels experiment is enabled, reserve a margin around the
|
||||
// main editor so it floats like the side bar and panel cards. The editor has
|
||||
// no top margin (it stays flush with the title bar). Scope to the main window
|
||||
// (auxiliary editor windows do not apply the matching CSS). The matching
|
||||
// `margin` is applied in CSS (`.floating-panels .part.editor`).
|
||||
// main editor so it floats like the side bar and panel cards. Scope to the main
|
||||
// window (auxiliary editor windows do not apply the matching CSS).
|
||||
if (this.windowId === mainWindow.vscodeWindowId && this.layoutService.isFloatingPanelsEnabled()) {
|
||||
|
||||
// When the editor becomes the outermost card on a side (no floating part
|
||||
|
||||
@@ -658,8 +658,7 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
|
||||
* Amount (in pixels) to subtract from each axis when the floating panels
|
||||
* experiment is enabled: a margin on each side plus a 1px border on each side
|
||||
* (the border is drawn inside the box, as `.monaco-workbench .part` is
|
||||
* `box-sizing: border-box` in `part.css`). The side bars sit directly under the
|
||||
* title bar, so they have no top margin. On each window edge this part is the outermost
|
||||
* `box-sizing: border-box` in `part.css`). On each window edge this part is the outermost
|
||||
* floating card on (see {@link getFloatingOuterGutterEdges}) it gets a doubled outer
|
||||
* margin, so its width inset is larger on that side.
|
||||
*/
|
||||
|
||||
@@ -225,6 +225,7 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer {
|
||||
this._register(this.configurationService.onDidChangeConfiguration(e => {
|
||||
if (this.getId() === Parts.STATUSBAR_PART && e.affectsConfiguration(LayoutSettings.MODERN_UI)) {
|
||||
this._onDidChange.fire(undefined);
|
||||
this.updateStyles();
|
||||
}
|
||||
}));
|
||||
}
|
||||
@@ -699,6 +700,9 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer {
|
||||
// Background / foreground colors
|
||||
const backgroundColor = this.getColor(styleOverride?.background ?? (this.contextService.getWorkbenchState() !== WorkbenchState.EMPTY ? STATUS_BAR_BACKGROUND : STATUS_BAR_NO_FOLDER_BACKGROUND)) || '';
|
||||
container.style.backgroundColor = backgroundColor;
|
||||
container.style.boxShadow = this.getId() === Parts.STATUSBAR_PART && this.layoutService.isFloatingPanelsEnabled() && !isHighContrast(this.theme.type) && backgroundColor
|
||||
? `0 1px 0 ${backgroundColor}`
|
||||
: '';
|
||||
const foregroundColor = this.getColor(styleOverride?.foreground ?? (this.contextService.getWorkbenchState() !== WorkbenchState.EMPTY ? STATUS_BAR_FOREGROUND : STATUS_BAR_NO_FOLDER_FOREGROUND)) || '';
|
||||
container.style.color = foregroundColor;
|
||||
const itemBorderColor = this.getColor(STATUS_BAR_ITEM_FOCUS_BORDER);
|
||||
@@ -706,11 +710,6 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer {
|
||||
// Update compact entries to refresh hover colors based on current theme
|
||||
this.updateCompactEntries();
|
||||
|
||||
// Mark the bar when a style override is active (currently only the debugging
|
||||
// color) so Modern UI can restore the recolor, which floating mode otherwise
|
||||
// paints transparent.
|
||||
container.classList.toggle('has-style-override', !!styleOverride?.background);
|
||||
|
||||
// Border color
|
||||
const borderColor = this.getColor(styleOverride?.border ?? (this.contextService.getWorkbenchState() !== WorkbenchState.EMPTY ? STATUS_BAR_BORDER : STATUS_BAR_NO_FOLDER_BORDER)) || this.getColor(contrastBorder);
|
||||
if (borderColor) {
|
||||
|
||||
@@ -8,7 +8,7 @@ import { localize, localize2 } from '../../../../nls.js';
|
||||
import { MultiWindowParts, Part } from '../../part.js';
|
||||
import { ITitleService } from '../../../services/title/browser/titleService.js';
|
||||
import { getWCOTitlebarAreaRect, getZoomFactor, isWCOEnabled } from '../../../../base/browser/browser.js';
|
||||
import { MenuBarVisibility, getTitleBarStyle, getMenuBarVisibility, hasCustomTitlebar, hasNativeTitlebar, DEFAULT_CUSTOM_TITLEBAR_HEIGHT, getWindowControlsStyle, useWindowControlsOverlay, WindowControlsStyle, TitlebarStyle, MenuSettings, hasNativeMenu } from '../../../../platform/window/common/window.js';
|
||||
import { MenuBarVisibility, getTitleBarStyle, getMenuBarVisibility, hasCustomTitlebar, hasNativeTitlebar, DEFAULT_CUSTOM_TITLEBAR_HEIGHT, getWindowControlsStyle, WindowControlsStyle, TitlebarStyle, MenuSettings, hasNativeMenu } from '../../../../platform/window/common/window.js';
|
||||
import { IContextMenuService } from '../../../../platform/contextview/browser/contextView.js';
|
||||
import { StandardMouseEvent } from '../../../../base/browser/mouseEvent.js';
|
||||
import { IConfigurationService, IConfigurationChangeEvent } from '../../../../platform/configuration/common/configuration.js';
|
||||
@@ -846,16 +846,15 @@ export class BrowserTitlebarPart extends Part implements ITitlebarPart {
|
||||
this.element.classList.remove('inactive');
|
||||
}
|
||||
|
||||
const titleBackground = isNative && isWindows && useWindowControlsOverlay(this.configurationService) && this.configurationService.getValue<boolean>(LayoutSettings.MODERN_UI) === true
|
||||
? WORKBENCH_BACKGROUND(this.theme).toString()
|
||||
: this.getColor(this.isInactive ? TITLE_BAR_INACTIVE_BACKGROUND : TITLE_BAR_ACTIVE_BACKGROUND, (color, theme) => {
|
||||
// LCD Rendering Support: the title bar part is a defining its own GPU layer.
|
||||
// To benefit from LCD font rendering, we must ensure that we always set an
|
||||
// opaque background color. As such, we compute an opaque color given we know
|
||||
// the background color is the workbench background.
|
||||
return color.isOpaque() ? color : color.makeOpaque(WORKBENCH_BACKGROUND(theme));
|
||||
}) || '';
|
||||
const titleBackground = this.getColor(this.isInactive ? TITLE_BAR_INACTIVE_BACKGROUND : TITLE_BAR_ACTIVE_BACKGROUND, (color, theme) => {
|
||||
// LCD Rendering Support: the title bar part is a defining its own GPU layer.
|
||||
// To benefit from LCD font rendering, we must ensure that we always set an
|
||||
// opaque background color. As such, we compute an opaque color given we know
|
||||
// the background color is the workbench background.
|
||||
return color.isOpaque() ? color : color.makeOpaque(WORKBENCH_BACKGROUND(theme));
|
||||
}) || '';
|
||||
this.element.style.backgroundColor = titleBackground;
|
||||
this.layoutService.getContainer(getWindow(this.element)).style.setProperty('--modern-ui-shell-background', titleBackground);
|
||||
|
||||
if (this.appIconBadge) {
|
||||
this.appIconBadge.style.backgroundColor = titleBackground;
|
||||
@@ -870,7 +869,7 @@ export class BrowserTitlebarPart extends Part implements ITitlebarPart {
|
||||
const titleForeground = this.getColor(this.isInactive ? TITLE_BAR_INACTIVE_FOREGROUND : TITLE_BAR_ACTIVE_FOREGROUND);
|
||||
this.element.style.color = titleForeground || '';
|
||||
|
||||
const titleBorder = this.getColor(TITLE_BAR_BORDER);
|
||||
const titleBorder = !this.isAuxiliary && this.configurationService.getValue<boolean>(LayoutSettings.MODERN_UI) === true ? undefined : this.getColor(TITLE_BAR_BORDER);
|
||||
this.element.style.borderBottom = titleBorder ? `1px solid ${titleBorder}` : '';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -632,12 +632,8 @@ export class ViewPaneContainer<MementoType extends object = object> extends Comp
|
||||
// pane does not sit flush against the part edge, matching the 4px
|
||||
// horizontal margins on the pane headers. Add 1px for the part's bottom
|
||||
// border so the visible gap lines up with the horizontal margins.
|
||||
// Exception: when the panel is at the TOP, the bottom of the panel
|
||||
// faces the editor card. A 1px inner gap keeps the pane content off the
|
||||
// border, while the CSS inter-card margins (panel 4px + editor 4px)
|
||||
// provide the remaining separation. This totals 10px (1 inner + 1 border
|
||||
// + 4 + 4), matching the bottom panel's bottom-to-status-bar gap
|
||||
// (5 inner + 1 border + 4 CSS = 10px) for visual consistency.
|
||||
// Exception: when the panel is at the TOP, its bottom faces the editor
|
||||
// card, so the tighter inner card gap is sufficient.
|
||||
const bottomGap = !this.layoutService.isFloatingPanelsEnabled() ? 0
|
||||
: (this.viewDescriptorService.getViewContainerLocation(this.viewContainer) === ViewContainerLocation.Panel
|
||||
&& this.layoutService.getPanelPosition() === Position.TOP) ? 1
|
||||
|
||||
+1
@@ -422,6 +422,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none !important;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.agent-status-badge-section.sparkle .action-container .action-label {
|
||||
|
||||
@@ -28,7 +28,6 @@ export type VoiceGlowState = 'idle' | 'listening' | 'processing' | 'speaking' |
|
||||
export function isGlowingVoiceState(voiceState: VoiceGlowState): boolean {
|
||||
return voiceState === 'listening' || voiceState === 'speaking' || voiceState === 'confirmation';
|
||||
}
|
||||
|
||||
/**
|
||||
* Reduce an analyser's frequency data to a normalized [0, 1] intensity. Returns
|
||||
* a small resting value when no analyser is available (before capture/playback).
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
width: calc(var(--activity-bar-action-height, 36px) - 4px);
|
||||
height: calc(var(--activity-bar-action-height, 36px) - 4px);
|
||||
border-radius: var(--vscode-cornerRadius-medium);
|
||||
background-color: var(--vscode-activityBar-activeBackground, var(--vscode-list-inactiveSelectionBackground));
|
||||
background-color: var(--vscode-activityBar-activeBackground, var(--vscode-toolbar-activeBackground));
|
||||
}
|
||||
|
||||
/* Compact: minimal horizontal inset — 24×24px box centered in the 28px item. */
|
||||
@@ -37,34 +37,6 @@
|
||||
height: calc(var(--activity-bar-action-height, 28px) - 4px);
|
||||
}
|
||||
|
||||
/*
|
||||
* Some color themes pick the activity bar foreground to contrast a distinctly
|
||||
* colored activity bar background. When that background is neutralized to match
|
||||
* the window, the theme's foreground can become invisible. Force the item
|
||||
* foreground (set inline by the part) to the general editor foreground so icons
|
||||
* stay legible across all themes, keeping inactive items dimmed for hierarchy.
|
||||
*
|
||||
* Codicon items are tinted via `color`. Image (iconUrl) items render as a
|
||||
* tinted SVG mask, so the part colors them via `background-color` instead — we
|
||||
* mirror the same tint there, scoped to `:not(.codicon)` so codicon items never
|
||||
* gain a filled background box.
|
||||
*/
|
||||
.style-override .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .action-label.codicon {
|
||||
color: var(--vscode-foreground) !important;
|
||||
}
|
||||
|
||||
.style-override .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:not(.checked) .action-label.codicon {
|
||||
color: var(--vscode-icon-foreground) !important;
|
||||
}
|
||||
|
||||
.style-override .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .action-label:not(.codicon) {
|
||||
background-color: var(--vscode-foreground) !important;
|
||||
}
|
||||
|
||||
.style-override .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:not(.checked) .action-label:not(.codicon) {
|
||||
background-color: var(--vscode-icon-foreground) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Give activity bar items a consistent hover background. By default the activity
|
||||
* bar only recolors the icon on hover, so themes without a hover tint give no
|
||||
@@ -89,7 +61,7 @@
|
||||
width: calc(var(--activity-bar-action-height, 36px) - 4px);
|
||||
height: calc(var(--activity-bar-action-height, 36px) - 4px);
|
||||
border-radius: var(--vscode-cornerRadius-medium);
|
||||
background-color: var(--vscode-list-hoverBackground);
|
||||
background-color: var(--vscode-toolbar-hoverBackground);
|
||||
}
|
||||
|
||||
/* Compact: minimal horizontal inset — 24×24px box centered in the 28px item. */
|
||||
@@ -165,7 +137,7 @@
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: var(--vscode-cornerRadius-small);
|
||||
background-color: var(--modern-ui-tab-active-background);
|
||||
background-color: var(--vscode-activityBarTop-activeBackground, var(--vscode-toolbar-activeBackground));
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@@ -181,30 +153,16 @@
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: var(--vscode-cornerRadius-small);
|
||||
background-color: var(--vscode-list-hoverBackground);
|
||||
background-color: var(--vscode-toolbar-hoverBackground);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/*
|
||||
* Normalize the icon tint to match the default position: the active item uses
|
||||
* the editor foreground and inactive items stay dimmed for hierarchy. Codicon
|
||||
* items are tinted via `color`; image (iconUrl) items render as a tinted SVG
|
||||
* mask, so they are tinted via `background-color` instead.
|
||||
*/
|
||||
.style-override .pane-composite-part > :is(.title, .header-or-footer) > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon.checked .action-label.codicon {
|
||||
color: var(--vscode-foreground) !important;
|
||||
}
|
||||
|
||||
.style-override .pane-composite-part > :is(.title, .header-or-footer) > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label.codicon::before,
|
||||
.style-override.monaco-workbench .part.sidebar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label::before,
|
||||
.style-override.monaco-workbench .part.auxiliarybar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item .action-label::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.style-override .pane-composite-part > :is(.title, .header-or-footer) > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon:not(.checked) .action-label.codicon {
|
||||
color: var(--vscode-descriptionForeground) !important;
|
||||
}
|
||||
|
||||
.style-override .pane-composite-part > :is(.title, .header-or-footer) > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label.uri-icon {
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
@@ -215,14 +173,6 @@
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.style-override .pane-composite-part > :is(.title, .header-or-footer) > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon.checked .action-label.uri-icon {
|
||||
background-color: var(--vscode-foreground) !important;
|
||||
}
|
||||
|
||||
.style-override .pane-composite-part > :is(.title, .header-or-footer) > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon:not(.checked) .action-label.uri-icon {
|
||||
background-color: var(--vscode-descriptionForeground) !important;
|
||||
}
|
||||
|
||||
/* Render the composite icons at the standard 16px size. */
|
||||
.style-override .pane-composite-part > :is(.title, .header-or-footer) > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label.codicon {
|
||||
font-size: 16px;
|
||||
|
||||
@@ -18,13 +18,9 @@
|
||||
* the `workbench.experimental.modernUI` (Modern UI Update) setting is enabled.
|
||||
*/
|
||||
|
||||
/*
|
||||
* Command center box. Drop the solid `commandCenter-background` fill so it reads
|
||||
* transparent at rest; the base stylesheet's `:hover` rule (titlebarpart.css)
|
||||
* still reveals the active background/border on hover.
|
||||
*/
|
||||
.style-override.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center {
|
||||
background-color: transparent !important;
|
||||
/* Keep unavailable navigation actions on the contributed command-center foreground. */
|
||||
.style-override.monaco-workbench .part.titlebar .command-center > .monaco-toolbar > .monaco-action-bar > .actions-container > .action-item > .action-label:is(.codicon-arrow-left, .codicon-arrow-right) {
|
||||
color: var(--vscode-commandCenter-foreground);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@@ -28,6 +28,7 @@
|
||||
border-radius: var(--vscode-cornerRadius-large);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background-color: var(--vscode-editor-background);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@@ -3,43 +3,6 @@
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
/*
|
||||
* Status Bar — keep the status bar foreground legible.
|
||||
*
|
||||
* Some color themes pick the status bar foreground to contrast a distinctly
|
||||
* colored status bar background. When that background is neutralized to match
|
||||
* the window, the theme's foreground can become invisible. Force the status bar
|
||||
* text/icon color (set inline on the part by the workbench) to the general
|
||||
* editor foreground so it stays readable across all themes. Items that set
|
||||
* their own color (e.g. prominent, error or warning entries) keep theirs.
|
||||
*/
|
||||
.style-override .part.statusbar {
|
||||
color: var(--vscode-foreground) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Keep the hover foreground identical to the item's resting foreground. By
|
||||
* default hovering a status bar item swaps the text color (to
|
||||
* `statusBarItem-hoverForeground`, or the warning/error hover foreground for
|
||||
* kind items), which now clashes with the neutralized foreground above.
|
||||
* Forcing the hovered anchor to `inherit` makes it pick up its item's resting
|
||||
* color — `--vscode-foreground` for standard items, or the kind color for
|
||||
* warning/error items — so only the background changes on hover.
|
||||
*/
|
||||
.style-override .part.statusbar > .items-container > .statusbar-item > a:hover:not(.disabled) {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Align the standard status bar item hover background with the workbench toolbar
|
||||
* hover background so hovering an item matches action buttons elsewhere in the
|
||||
* modernized UI. Kind items (warning/error/prominent/remote/offline) keep their
|
||||
* own hover backgrounds.
|
||||
*/
|
||||
.style-override .part.statusbar > .items-container > .statusbar-item:not(.warning-kind, .error-kind, .prominent-kind, .remote-kind, .offline-kind) > a:hover:not(.disabled) {
|
||||
background-color: var(--vscode-toolbar-hoverBackground) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Round the status bar item backgrounds to a control-sized pill. The interactive
|
||||
* hover/active background lives on the label (`a.statusbar-item-label`); custom
|
||||
@@ -94,7 +57,7 @@
|
||||
* their own stacked tint.
|
||||
*/
|
||||
.style-override .part.statusbar > .items-container > .statusbar-item:is(.compact-left, .compact-right) > a.statusbar-item-label:hover:not(.disabled) {
|
||||
background-image: linear-gradient(var(--vscode-toolbar-hoverBackground), var(--vscode-toolbar-hoverBackground));
|
||||
background-image: linear-gradient(var(--vscode-statusBarItem-compactHoverBackground), var(--vscode-statusBarItem-compactHoverBackground));
|
||||
}
|
||||
|
||||
.style-override .part.statusbar > .items-container > .statusbar-item.right.last-visible-item > .statusbar-item-label {
|
||||
|
||||
@@ -268,35 +268,26 @@ export function getFloatingPaneCompositeVerticalMargins(
|
||||
return { top: 0, bottom: 0 };
|
||||
}
|
||||
|
||||
const topEdgeExposed = isFloatingTopEdgeExposed(layoutService, targetWindow);
|
||||
|
||||
const panelPosition = layoutService.getPanelPosition();
|
||||
const panelVisible = layoutService.isVisible(Parts.PANEL_PART);
|
||||
const isSideBar = partId === Parts.SIDEBAR_PART || partId === Parts.AUXILIARYBAR_PART;
|
||||
const siblingStatus = getFloatingSidebarSiblingToEditorStatus(layoutService);
|
||||
const isSiblingToEditor = partId === Parts.SIDEBAR_PART ? siblingStatus.sideBar : siblingStatus.auxBar;
|
||||
const topEdgeExposed = isFloatingTopEdgeExposed(layoutService, targetWindow);
|
||||
|
||||
let top: number;
|
||||
if (partId === Parts.PANEL_PART && panelPosition === Position.BOTTOM) {
|
||||
// A visible editor sits above the panel, so the gap is between two cards. When the
|
||||
// panel is maximized the editor is gone and the panel takes over that row instead.
|
||||
top = layoutService.isVisible(Parts.EDITOR_PART, targetWindow) ? FLOATING_PANEL_MARGIN
|
||||
: topEdgeExposed ? FLOATING_PANEL_MARGIN * 2 : 0;
|
||||
} else if (panelVisible && panelPosition === Position.TOP && isSideBar && isSiblingToEditor) {
|
||||
// Sibling bars share the editor's row, so their top faces the panel card above.
|
||||
top = FLOATING_PANEL_MARGIN;
|
||||
} else {
|
||||
top = topEdgeExposed ? FLOATING_PANEL_MARGIN * 2 : 0;
|
||||
}
|
||||
|
||||
// A top panel faces the editor below it, and a sibling bar faces a bottom panel card,
|
||||
// so in neither case does the bottom reach the window edge.
|
||||
const facesPanelAbove = panelVisible && panelPosition === Position.TOP && isSideBar && isSiblingToEditor;
|
||||
const facesEditorBelow = partId === Parts.PANEL_PART && panelPosition === Position.TOP;
|
||||
const facesPanelBelow = panelVisible && panelPosition === Position.BOTTOM && isSideBar && isSiblingToEditor;
|
||||
const atWindowBottom = !facesEditorBelow && !facesPanelBelow;
|
||||
const bottom = !layoutService.isVisible(Parts.STATUSBAR_PART, targetWindow) && atWindowBottom
|
||||
? FLOATING_PANEL_MARGIN * 2 : FLOATING_PANEL_INNER_MARGIN;
|
||||
const statusBarVisible = layoutService.isVisible(Parts.STATUSBAR_PART, targetWindow);
|
||||
|
||||
return { top, bottom };
|
||||
return {
|
||||
top: facesPanelAbove ? FLOATING_PANEL_MARGIN
|
||||
: topEdgeExposed ? FLOATING_PANEL_MARGIN * 2 : FLOATING_PANEL_MARGIN,
|
||||
bottom: atWindowBottom
|
||||
? statusBarVisible ? FLOATING_PANEL_MARGIN : FLOATING_PANEL_MARGIN * 2
|
||||
: FLOATING_PANEL_INNER_MARGIN
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -318,9 +309,9 @@ export function getFloatingEditorVerticalMargins(
|
||||
|
||||
return {
|
||||
top: panelAtTop ? FLOATING_PANEL_MARGIN
|
||||
: isFloatingTopEdgeExposed(layoutService, targetWindow) ? FLOATING_PANEL_MARGIN * 2 : 0,
|
||||
bottom: !layoutService.isVisible(Parts.STATUSBAR_PART, targetWindow) && !panelAtBottom
|
||||
? FLOATING_PANEL_MARGIN * 2 : FLOATING_PANEL_INNER_MARGIN
|
||||
: isFloatingTopEdgeExposed(layoutService, targetWindow) ? FLOATING_PANEL_MARGIN * 2 : FLOATING_PANEL_MARGIN,
|
||||
bottom: panelAtBottom ? FLOATING_PANEL_INNER_MARGIN
|
||||
: layoutService.isVisible(Parts.STATUSBAR_PART, targetWindow) ? FLOATING_PANEL_MARGIN : FLOATING_PANEL_MARGIN * 2
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -228,10 +228,10 @@ suite('LayoutService - getFloatingPaneCompositeVerticalMargins', () => {
|
||||
};
|
||||
|
||||
assert.deepStrictEqual(actual, {
|
||||
editorVisible: { top: margin, bottom: inner },
|
||||
maximizedUnderTitleBar: { top: 0, bottom: inner },
|
||||
maximizedAtTopEdge: { top: outer, bottom: inner },
|
||||
maximizedUnderBanner: { top: 0, bottom: inner },
|
||||
editorVisible: { top: margin, bottom: margin },
|
||||
maximizedUnderTitleBar: { top: margin, bottom: margin },
|
||||
maximizedAtTopEdge: { top: outer, bottom: margin },
|
||||
maximizedUnderBanner: { top: margin, bottom: margin },
|
||||
});
|
||||
});
|
||||
|
||||
@@ -260,12 +260,12 @@ suite('LayoutService - getFloatingPaneCompositeVerticalMargins', () => {
|
||||
};
|
||||
|
||||
assert.deepStrictEqual(actual, {
|
||||
topPanelStatusBarHidden: { top: 0, bottom: inner },
|
||||
topPanelStatusBarHidden: { top: margin, bottom: inner },
|
||||
leftPanelAtBothEdges: { top: outer, bottom: outer },
|
||||
sideBarTopPanelCentered: { top: outer, bottom: inner },
|
||||
sideBarTopPanelJustified: { top: margin, bottom: inner },
|
||||
sideBarBottomPanelJustified: { top: 0, bottom: inner },
|
||||
sideBarBottomPanelCentered: { top: 0, bottom: outer },
|
||||
sideBarTopPanelCentered: { top: outer, bottom: margin },
|
||||
sideBarTopPanelJustified: { top: margin, bottom: margin },
|
||||
sideBarBottomPanelJustified: { top: margin, bottom: inner },
|
||||
sideBarBottomPanelCentered: { top: margin, bottom: outer },
|
||||
disabled: { top: 0, bottom: 0 },
|
||||
});
|
||||
});
|
||||
@@ -310,12 +310,12 @@ suite('LayoutService - getFloatingEditorVerticalMargins', () => {
|
||||
};
|
||||
|
||||
assert.deepStrictEqual(actual, {
|
||||
titleAndStatusBarVisible: { top: 0, bottom: inner },
|
||||
titleBarHidden: { top: outer, bottom: inner },
|
||||
bannerInsteadOfTitleBar: { top: 0, bottom: inner },
|
||||
topPanelAtTopEdge: { top: margin, bottom: inner },
|
||||
statusBarHidden: { top: 0, bottom: outer },
|
||||
bottomPanelStatusBarHidden: { top: 0, bottom: inner },
|
||||
titleAndStatusBarVisible: { top: margin, bottom: margin },
|
||||
titleBarHidden: { top: outer, bottom: margin },
|
||||
bannerInsteadOfTitleBar: { top: margin, bottom: margin },
|
||||
topPanelAtTopEdge: { top: margin, bottom: margin },
|
||||
statusBarHidden: { top: margin, bottom: outer },
|
||||
bottomPanelStatusBarHidden: { top: margin, bottom: inner },
|
||||
disabled: { top: 0, bottom: 0 },
|
||||
});
|
||||
});
|
||||
|
||||
@@ -182,14 +182,14 @@ suite('ActivitybarPart', () => {
|
||||
assert.strictEqual(part.maximumHeight, Number.POSITIVE_INFINITY);
|
||||
});
|
||||
|
||||
test('floating panels reserves additional width gutter', () => {
|
||||
test('floating panels reserves symmetric width gutters', () => {
|
||||
const { part } = createActivitybarPart(false, true);
|
||||
|
||||
assert.deepStrictEqual(
|
||||
{ min: part.minimumWidth, max: part.maximumWidth },
|
||||
{
|
||||
min: ActivitybarPart.FLOATING_ACTIVITYBAR_WIDTH + ActivitybarPart.FLOATING_MARGIN,
|
||||
max: ActivitybarPart.FLOATING_ACTIVITYBAR_WIDTH + ActivitybarPart.FLOATING_MARGIN,
|
||||
min: ActivitybarPart.FLOATING_ACTIVITYBAR_WIDTH + ActivitybarPart.FLOATING_MARGIN * 2,
|
||||
max: ActivitybarPart.FLOATING_ACTIVITYBAR_WIDTH + ActivitybarPart.FLOATING_MARGIN * 2,
|
||||
}
|
||||
);
|
||||
});
|
||||
@@ -278,7 +278,7 @@ suite('ActivitybarPart', () => {
|
||||
fireConfigChange(configService, LayoutSettings.MODERN_UI);
|
||||
|
||||
assert.deepStrictEqual(events, [undefined]);
|
||||
assert.strictEqual(part.minimumWidth, ActivitybarPart.FLOATING_ACTIVITYBAR_WIDTH + ActivitybarPart.FLOATING_MARGIN);
|
||||
assert.strictEqual(part.minimumWidth, ActivitybarPart.FLOATING_ACTIVITYBAR_WIDTH + ActivitybarPart.FLOATING_MARGIN * 2);
|
||||
});
|
||||
|
||||
// --- CSS custom properties on element -----------------------------------
|
||||
@@ -399,10 +399,10 @@ suite('ActivitybarPart', () => {
|
||||
};
|
||||
|
||||
assert.deepStrictEqual(actual, {
|
||||
titleAndStatusBarVisible: 300 - margin,
|
||||
titleAndStatusBarVisible: 300 - margin * 2,
|
||||
titleBarHidden: 300 - margin * 2 - margin,
|
||||
bannerInsteadOfTitleBar: 300 - margin,
|
||||
statusBarHidden: 300 - margin * 2,
|
||||
bannerInsteadOfTitleBar: 300 - margin * 2,
|
||||
statusBarHidden: 300 - margin - margin * 2,
|
||||
bothEdgesExposed: 300 - margin * 2 - margin * 2,
|
||||
floatingPanelsDisabled: 300,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user