From e5ebb65945c38c35353b4d915cafb76f7d03364f Mon Sep 17 00:00:00 2001 From: SteVen Batten Date: Mon, 19 Dec 2022 12:01:06 -0800 Subject: [PATCH 1/6] switch to css based version of title bar --- .../parts/titlebar/media/titlebarpart.css | 107 ++++++++++++------ .../browser/parts/titlebar/titlebarPart.ts | 44 +++---- .../parts/titlebar/titlebarPart.ts | 2 - 3 files changed, 85 insertions(+), 68 deletions(-) diff --git a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css index 14e9031e80a54..d6bef66a15e3d 100644 --- a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css +++ b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css @@ -20,7 +20,7 @@ flex-shrink: 1; flex-grow: 1; align-items: center; - justify-content: center; + justify-content: space-between; user-select: none; -webkit-user-select: none; display: flex; @@ -63,8 +63,43 @@ -webkit-app-region: drag; } +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-left, +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center, +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-right { + display: flex; + height: 100%; + align-items: center; +} + +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-left { + order: 0; + width: 20%; + flex-grow: 2; + justify-content: flex-start; +} + +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center { + order: 1; + width: 60%; + max-width: fit-content; + min-width: 0px; + margin: 0 10px; + /* flex-shrink: 10; */ + justify-content: center; +} + +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-right { + order: 2; + width: 20%; + min-width: min-content; + flex-grow: 2; + justify-content: flex-end; +} + + + /* Window title text */ -.monaco-workbench .part.titlebar>.titlebar-container>.window-title { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title { flex: 0 1 auto; font-size: 12px; overflow: hidden; @@ -74,13 +109,13 @@ margin-right: auto; } -.monaco-workbench.web .part.titlebar>.titlebar-container>.window-title, -.monaco-workbench.windows .part.titlebar>.titlebar-container>.window-title, -.monaco-workbench.linux .part.titlebar>.titlebar-container>.window-title { +.monaco-workbench.web .part.titlebar>.titlebar-container>.titlebar-center>.window-title, +.monaco-workbench.windows .part.titlebar>.titlebar-container>.titlebar-center>.window-title, +.monaco-workbench.linux .part.titlebar>.titlebar-container>.titlebar-center>.window-title { cursor: default; } -.monaco-workbench.linux .part.titlebar>.titlebar-container>.window-title { +.monaco-workbench.linux .part.titlebar>.titlebar-container>.titlebar-center>.window-title { font-size: inherit; /* see #55435 */ } @@ -90,33 +125,33 @@ } /* Window Title Menu */ -.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center { z-index: 2500; padding: 0 8px; } /* MAC supports click event despite `drag` and therefore we don't need to clear it */ -.monaco-workbench:not(.mac) .part.titlebar>.titlebar-container>.window-title>.command-center { +.monaco-workbench:not(.mac) .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center { -webkit-app-region: no-drag; } -.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center.hide { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center.hide { visibility: hidden; } -.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item>.action-label { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item>.action-label { color: var(--vscode-titleBar-foreground); } -.monaco-workbench .part.titlebar.inactive>.titlebar-container>.window-title>.command-center .action-item>.action-label { +.monaco-workbench .part.titlebar.inactive>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item>.action-label { color: var(--vscode-titleBar-inactiveForeground); } -.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .codicon { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center .codicon { color: inherit; } -.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.command-center { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item.command-center { display: flex; align-items: stretch; color: var(--vscode-commandCenter-foreground); @@ -133,37 +168,37 @@ max-width: 600px; } -.monaco-workbench .part.titlebar.inactive>.titlebar-container>.window-title>.command-center .action-item.command-center { +.monaco-workbench .part.titlebar.inactive>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item.command-center { color: var(--vscode-titleBar-inactiveForeground); border-color: var(--vscode-commandCenter-inactiveBorder) !important; } -.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.command-center .search-icon { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item.command-center .search-icon { font-size: 14px; opacity: .8; margin: auto 3px; } -.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.command-center .search-label { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item.command-center .search-label { overflow: hidden; text-overflow: ellipsis; } -.monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.command-center:HOVER { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item.command-center:HOVER { color: var(--vscode-commandCenter-activeForeground); background-color: var(--vscode-commandCenter-activeBackground); border-color: var(--vscode-commandCenter-activeBorder); } /* Menubar */ -.monaco-workbench .part.titlebar>.titlebar-container>.menubar { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-left>.menubar { /* move menubar above drag region as negative z-index on drag region cause greyscale AA */ z-index: 2500; min-width: 36px; flex-wrap: nowrap; } -.monaco-workbench.web .part.titlebar>.titlebar-container>.menubar { +.monaco-workbench.web .part.titlebar>.titlebar-container>.titlebar-left>.menubar { margin-left: 4px; } @@ -187,7 +222,7 @@ } /* App Icon */ -.monaco-workbench .part.titlebar>.titlebar-container>.window-appicon { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-left>.window-appicon { width: 35px; height: 100%; position: relative; @@ -195,18 +230,18 @@ flex-shrink: 0; } -.monaco-workbench .part.titlebar>.titlebar-container>.window-appicon:not(.codicon) { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-left>.window-appicon:not(.codicon) { background-image: url('../../../media/code-icon.svg'); background-repeat: no-repeat; background-position: center center; background-size: 16px; } -.monaco-workbench .part.titlebar>.titlebar-container>.window-appicon.codicon { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-left>.window-appicon.codicon { line-height: 30px; } -.monaco-workbench.fullscreen .part.titlebar>.titlebar-container>.window-appicon { +.monaco-workbench.fullscreen .part.titlebar>.titlebar-container>.titlebar-left>.window-appicon { display: none; } @@ -228,7 +263,7 @@ } /* Window Controls (Minimize, Max/Restore, Close) */ -.monaco-workbench .part.titlebar>.window-controls-container { +.monaco-workbench .part.titlebar .window-controls-container { display: flex; flex-grow: 0; flex-shrink: 0; @@ -240,22 +275,22 @@ zoom: calc(1 / var(--zoom-factor)); } -.monaco-workbench.mac .part.titlebar>.window-controls-container { +.monaco-workbench.mac .part.titlebar .window-controls-container { width: 70px; } -.monaco-workbench.web .part.titlebar>.window-controls-container { +.monaco-workbench.web .part.titlebar .window-controls-container { width: calc(100% - env(titlebar-area-width, 100%)); height: env(titlebar-area-height, 35px); } -.monaco-workbench.fullscreen .part.titlebar>.window-controls-container { +.monaco-workbench.fullscreen .part.titlebar .window-controls-container { display: none; background-color: transparent; } /* Window Control Icons */ -.monaco-workbench .part.titlebar>.window-controls-container>.window-icon { +.monaco-workbench .part.titlebar .window-controls-container>.window-icon { display: flex; justify-content: center; align-items: center; @@ -264,12 +299,12 @@ font-size: 16px; } -.monaco-workbench .part.titlebar>.window-controls-container>.window-icon::before { +.monaco-workbench .part.titlebar .window-controls-container>.window-icon::before { height: 16px; line-height: 16px; } -.monaco-workbench .part.titlebar>.window-controls-container>.window-icon:hover { +.monaco-workbench .part.titlebar .window-controls-container>.window-icon:hover { background-color: rgba(255, 255, 255, 0.1); } @@ -277,16 +312,16 @@ background-color: rgba(0, 0, 0, 0.1); } -.monaco-workbench .part.titlebar>.window-controls-container>.window-icon.window-close:hover { +.monaco-workbench .part.titlebar .window-controls-container>.window-icon.window-close:hover { background-color: rgba(232, 17, 35, 0.9); } -.monaco-workbench .part.titlebar>.window-controls-container .window-icon.window-close:hover { +.monaco-workbench .part.titlebar .window-controls-container .window-icon.window-close:hover { color: white; } /* Layout Controls */ -.monaco-workbench .part.titlebar>.titlebar-container>.layout-controls-container { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-right>.layout-controls-container { display: none; padding-right: 2px; flex-grow: 0; @@ -300,15 +335,15 @@ min-width: 28px; } -.monaco-workbench.mac:not(.web) .part.titlebar>.titlebar-container>.layout-controls-container { +.monaco-workbench.mac:not(.web) .part.titlebar>.titlebar-container>.titlebar-right>.layout-controls-container { right: 8px; } -.monaco-workbench .part.titlebar>.titlebar-container>.layout-controls-container.show-layout-control { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-right>.layout-controls-container.show-layout-control { display: flex; justify-content: center; } -.monaco-workbench .part.titlebar>.titlebar-container>.layout-controls-container .codicon { +.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-right>.layout-controls-container .codicon { color: inherit; } diff --git a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts index b4cf4c134c5eb..dac651a9c7496 100644 --- a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts +++ b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts @@ -18,7 +18,7 @@ import { IThemeService, registerThemingParticipant, ThemeIcon } from 'vs/platfor import { TITLE_BAR_ACTIVE_BACKGROUND, TITLE_BAR_ACTIVE_FOREGROUND, TITLE_BAR_INACTIVE_FOREGROUND, TITLE_BAR_INACTIVE_BACKGROUND, TITLE_BAR_BORDER, WORKBENCH_BACKGROUND } from 'vs/workbench/common/theme'; import { isMacintosh, isWindows, isLinux, isWeb, isNative } from 'vs/base/common/platform'; import { Color } from 'vs/base/common/color'; -import { EventType, EventHelper, Dimension, isAncestor, append, $, addDisposableListener, runAtThisOrScheduleAtNextAnimationFrame, prepend, reset } from 'vs/base/browser/dom'; +import { EventType, EventHelper, Dimension, isAncestor, append, $, addDisposableListener, prepend, reset } from 'vs/base/browser/dom'; import { CustomMenubarControl } from 'vs/workbench/browser/parts/titlebar/menubarControl'; import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation'; import { Emitter, Event } from 'vs/base/common/event'; @@ -67,6 +67,10 @@ export class TitlebarPart extends Part implements ITitleService { protected dragRegion: HTMLElement | undefined; protected title!: HTMLElement; + private leftContent!: HTMLElement; + private centerContent!: HTMLElement; + private rightContent!: HTMLElement; + protected customMenubar: CustomMenubarControl | undefined; protected appIcon: HTMLElement | undefined; private appIconBadge: HTMLElement | undefined; @@ -164,7 +168,6 @@ export class TitlebarPart extends Part implements ITitleService { if (event.affectsConfiguration(TitlebarPart.configCommandCenter)) { this.updateTitle(); - this.adjustTitleMarginToCenter(); this._onDidChangeCommandCenterVisibility.fire(); } } @@ -202,7 +205,7 @@ export class TitlebarPart extends Part implements ITitleService { this.customMenubar = this._register(this.instantiationService.createInstance(CustomMenubarControl)); - this.menubar = this.rootContainer.insertBefore($('div.menubar'), this.title); + this.menubar = append(this.leftContent, $('div.menubar')); this.menubar.setAttribute('role', 'menubar'); this._register(this.customMenubar.onVisibilityChange(e => this.onMenubarVisibilityChanged(e))); @@ -217,14 +220,12 @@ export class TitlebarPart extends Part implements ITitleService { this.title.innerText = this.windowTitle.value; this.titleDisposables.add(this.windowTitle.onDidChange(() => { this.title.innerText = this.windowTitle.value; - this.adjustTitleMarginToCenter(); })); } else { // Menu Title const commandCenter = this.instantiationService.createInstance(CommandCenterControl, this.windowTitle, this.hoverDelegate); reset(this.title, commandCenter.element); this.titleDisposables.add(commandCenter); - this.titleDisposables.add(commandCenter.onDidChangeVisibility(this.adjustTitleMarginToCenter, this)); } } @@ -232,9 +233,13 @@ export class TitlebarPart extends Part implements ITitleService { this.element = parent; this.rootContainer = append(parent, $('.titlebar-container')); + this.leftContent = append(this.rootContainer, $('.titlebar-left')); + this.centerContent = append(this.rootContainer, $('.titlebar-center')); + this.rightContent = append(this.rootContainer, $('.titlebar-right')); + // App Icon (Native Windows/Linux and Web) if (!isMacintosh && !isWeb) { - this.appIcon = prepend(this.rootContainer, $('a.window-appicon')); + this.appIcon = prepend(this.leftContent, $('a.window-appicon')); // Web-only home indicator and menu if (isWeb) { @@ -263,12 +268,12 @@ export class TitlebarPart extends Part implements ITitleService { } // Title - this.title = append(this.rootContainer, $('div.window-title')); + this.title = append(this.centerContent, $('div.window-title')); this.updateTitle(); if (this.titleBarStyle !== 'native') { - this.layoutControls = append(this.rootContainer, $('div.layout-controls-container')); + this.layoutControls = append(this.rightContent, $('div.layout-controls-container')); this.layoutControls.classList.toggle('show-layout-control', this.layoutControlEnabled); this.layoutToolbar = this.instantiationService.createInstance(MenuWorkbenchToolBar, this.layoutControls, MenuId.LayoutControlMenu, { @@ -280,7 +285,7 @@ export class TitlebarPart extends Part implements ITitleService { }); } - this.windowControls = append(this.element, $('div.window-controls-container')); + this.windowControls = append(this.rightContent, $('div.window-controls-container')); // Context menu on title [EventType.CONTEXT_MENU, EventType.MOUSE_DOWN].forEach(event => { @@ -393,25 +398,6 @@ export class TitlebarPart extends Part implements ITitleService { }); } - protected adjustTitleMarginToCenter(): void { - const base = isMacintosh ? (this.windowControls?.clientWidth ?? 0) : 0; - const leftMarker = base + (this.appIcon?.clientWidth ?? 0) + (this.menubar?.clientWidth ?? 0) + 10; - const rightMarker = base + this.rootContainer.clientWidth - (this.layoutControls?.clientWidth ?? 0) - 10; - - // Not enough space to center the titlebar within window, - // Center between left and right controls - if (leftMarker > (this.rootContainer.clientWidth + (this.windowControls?.clientWidth ?? 0) - this.title.clientWidth) / 2 || - rightMarker < (this.rootContainer.clientWidth + (this.windowControls?.clientWidth ?? 0) + this.title.clientWidth) / 2) { - this.title.style.position = ''; - this.title.style.left = ''; - this.title.style.transform = ''; - return; - } - - this.title.style.position = 'absolute'; - this.title.style.left = `calc(50% - ${this.title.clientWidth / 2}px)`; - } - protected get currentMenubarVisibility(): MenuBarVisibility { return getMenuBarVisibility(this.configurationService); } @@ -445,8 +431,6 @@ export class TitlebarPart extends Part implements ITitleService { const menubarDimension = new Dimension(0, dimension.height); this.customMenubar.layout(menubarDimension); } - - runAtThisOrScheduleAtNextAnimationFrame(() => this.adjustTitleMarginToCenter()); } } diff --git a/src/vs/workbench/electron-sandbox/parts/titlebar/titlebarPart.ts b/src/vs/workbench/electron-sandbox/parts/titlebar/titlebarPart.ts index 8471fcf166c5d..b9863d1903551 100644 --- a/src/vs/workbench/electron-sandbox/parts/titlebar/titlebarPart.ts +++ b/src/vs/workbench/electron-sandbox/parts/titlebar/titlebarPart.ts @@ -98,8 +98,6 @@ export class TitlebarPart extends BrowserTitleBarPart { show(this.resizer); } } - - this.adjustTitleMarginToCenter(); } private onMenubarFocusChanged(focused: boolean): void { From 4b51ca7f47f1ac610e12e0b30e0b260c043896a6 Mon Sep 17 00:00:00 2001 From: SteVen Batten Date: Mon, 19 Dec 2022 12:07:05 -0800 Subject: [PATCH 2/6] fix pwa --- src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css index d6bef66a15e3d..4e396178083e4 100644 --- a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css +++ b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css @@ -280,7 +280,7 @@ } .monaco-workbench.web .part.titlebar .window-controls-container { - width: calc(100% - env(titlebar-area-width, 100%)); + width: calc(100vw - env(titlebar-area-width, 100vw)); height: env(titlebar-area-height, 35px); } From 96c03bf47623659f7e5a293525b5c2100424e812 Mon Sep 17 00:00:00 2001 From: SteVen Batten Date: Mon, 19 Dec 2022 18:17:05 -0800 Subject: [PATCH 3/6] fixes for macos --- .../parts/titlebar/media/titlebarpart.css | 23 +++++++++++++++++-- .../browser/parts/titlebar/titlebarPart.ts | 5 +++- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css index 4e396178083e4..b6397e2fd96e6 100644 --- a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css +++ b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css @@ -130,8 +130,9 @@ padding: 0 8px; } -/* MAC supports click event despite `drag` and therefore we don't need to clear it */ -.monaco-workbench:not(.mac) .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center { +/* MacOS Desktop supports click event despite `drag` and therefore we don't need to clear it */ +.monaco-workbench:not(.mac) .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center, +.monaco-workbench.mac.web .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center { -webkit-app-region: no-drag; } @@ -196,6 +197,7 @@ z-index: 2500; min-width: 36px; flex-wrap: nowrap; + order: 2; } .monaco-workbench.web .part.titlebar>.titlebar-container>.titlebar-left>.menubar { @@ -228,6 +230,7 @@ position: relative; z-index: 2500; flex-shrink: 0; + order: 1; } .monaco-workbench .part.titlebar>.titlebar-container>.titlebar-left>.window-appicon:not(.codicon) { @@ -275,10 +278,26 @@ zoom: calc(1 / var(--zoom-factor)); } +.monaco-workbench.mac .part.titlebar .window-controls-container { + zoom: unset !important; +} + .monaco-workbench.mac .part.titlebar .window-controls-container { width: 70px; } +.monaco-workbench.web.mac .part.titlebar .titlebar-left .window-controls-container { + width: env(titlebar-area-x, 0px); + height: env(titlebar-area-height, 35px); + order: 0; +} + +.monaco-workbench.web.mac .part.titlebar .titlebar-right .window-controls-container { + width: calc(100vw - (env(titlebar-area-x, 0px) + env(titlebar-area-width, 100vw))); + height: env(titlebar-area-height, 35px); + order: 1; +} + .monaco-workbench.web .part.titlebar .window-controls-container { width: calc(100vw - env(titlebar-area-width, 100vw)); height: env(titlebar-area-height, 35px); diff --git a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts index dac651a9c7496..28c214e6c5cb2 100644 --- a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts +++ b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts @@ -285,7 +285,10 @@ export class TitlebarPart extends Part implements ITitleService { }); } - this.windowControls = append(this.rightContent, $('div.window-controls-container')); + this.windowControls = append(isMacintosh ? this.leftContent : this.rightContent, $('div.window-controls-container')); + if (isWeb && isMacintosh) { + append(this.rightContent, $('div.window-controls-container')); + } // Context menu on title [EventType.CONTEXT_MENU, EventType.MOUSE_DOWN].forEach(event => { From a50a756dbad155df056f6136482c608b0eef7621 Mon Sep 17 00:00:00 2001 From: SteVen Batten Date: Wed, 21 Dec 2022 13:51:13 -0800 Subject: [PATCH 4/6] fix windows/linux on desktop/web --- .../parts/titlebar/media/titlebarpart.css | 149 +++++++++++------- .../browser/parts/titlebar/titlebarPart.ts | 10 +- .../parts/titlebar/titlebarPart.ts | 8 +- 3 files changed, 97 insertions(+), 70 deletions(-) diff --git a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css index b6397e2fd96e6..f38f0c0536668 100644 --- a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css +++ b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css @@ -3,6 +3,17 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ +/* START: Don't commit */ +.monaco-workbench .part.titlebar > .titlebar-container .window-controls-container { + background-color: crimson; +} + +.monaco-workbench .part.titlebar .titlebar-container.titlebar-container.counter-zoom { + outline: 1px dashed crimson; + outline-offset: -3px; +} +/* END: Don't commit */ + /* Part Element */ .monaco-workbench .part.titlebar { display: flex; @@ -14,7 +25,7 @@ } /* Root Container */ -.monaco-workbench .part.titlebar>.titlebar-container { +.monaco-workbench .part.titlebar > .titlebar-container { box-sizing: border-box; overflow: hidden; flex-shrink: 1; @@ -29,31 +40,31 @@ } /* Account for zooming */ -.monaco-workbench .part.titlebar>.titlebar-container.counter-zoom { +.monaco-workbench .part.titlebar > .titlebar-container.counter-zoom { zoom: calc(1.0 / var(--zoom-factor)); } /* Platform specific root element */ -.monaco-workbench.mac .part.titlebar>.titlebar-container { +.monaco-workbench.mac .part.titlebar > .titlebar-container { line-height: 22px; } -.monaco-workbench.web .part.titlebar>.titlebar-container, -.monaco-workbench.windows .part.titlebar>.titlebar-container, -.monaco-workbench.linux .part.titlebar>.titlebar-container { +.monaco-workbench.web .part.titlebar > .titlebar-container, +.monaco-workbench.windows .part.titlebar > .titlebar-container, +.monaco-workbench.linux .part.titlebar > .titlebar-container { line-height: 22px; justify-content: left; } .monaco-workbench.web.safari .part.titlebar, -.monaco-workbench.web.safari .part.titlebar>.titlebar-container { +.monaco-workbench.web.safari .part.titlebar > .titlebar-container { /* Must be scoped to safari due to #148851 */ /* Is required in safari due to #149476 */ overflow: visible; } /* Draggable region */ -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-drag-region { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-drag-region { top: 0; left: 0; display: block; @@ -63,22 +74,22 @@ -webkit-app-region: drag; } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-left, -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center, -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-right { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-left, +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center, +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right { display: flex; height: 100%; align-items: center; } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-left { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-left { order: 0; width: 20%; flex-grow: 2; justify-content: flex-start; } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center { order: 1; width: 60%; max-width: fit-content; @@ -88,7 +99,7 @@ justify-content: center; } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-right { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right { order: 2; width: 20%; min-width: min-content; @@ -99,7 +110,7 @@ /* Window title text */ -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title { flex: 0 1 auto; font-size: 12px; overflow: hidden; @@ -109,50 +120,50 @@ margin-right: auto; } -.monaco-workbench.web .part.titlebar>.titlebar-container>.titlebar-center>.window-title, -.monaco-workbench.windows .part.titlebar>.titlebar-container>.titlebar-center>.window-title, -.monaco-workbench.linux .part.titlebar>.titlebar-container>.titlebar-center>.window-title { +.monaco-workbench.web .part.titlebar > .titlebar-container > .titlebar-center > .window-title, +.monaco-workbench.windows .part.titlebar > .titlebar-container > .titlebar-center > .window-title, +.monaco-workbench.linux .part.titlebar > .titlebar-container > .titlebar-center > .window-title { cursor: default; } -.monaco-workbench.linux .part.titlebar>.titlebar-container>.titlebar-center>.window-title { +.monaco-workbench.linux .part.titlebar > .titlebar-container > .titlebar-center > .window-title { font-size: inherit; /* see #55435 */ } -.monaco-workbench .part.titlebar>.titlebar-container .monaco-toolbar .action-item { +.monaco-workbench .part.titlebar > .titlebar-container .monaco-toolbar .action-item { margin-right: 4px; } /* Window Title Menu */ -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center { z-index: 2500; padding: 0 8px; } /* MacOS Desktop supports click event despite `drag` and therefore we don't need to clear it */ -.monaco-workbench:not(.mac) .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center, -.monaco-workbench.mac.web .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center { +.monaco-workbench:not(.mac) .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center, +.monaco-workbench.mac.web .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center { -webkit-app-region: no-drag; } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center.hide { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center.hide { visibility: hidden; } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item>.action-label { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item > .action-label { color: var(--vscode-titleBar-foreground); } -.monaco-workbench .part.titlebar.inactive>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item>.action-label { +.monaco-workbench .part.titlebar.inactive > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item > .action-label { color: var(--vscode-titleBar-inactiveForeground); } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center .codicon { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .codicon { color: inherit; } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item.command-center { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center { display: flex; align-items: stretch; color: var(--vscode-commandCenter-foreground); @@ -169,30 +180,30 @@ max-width: 600px; } -.monaco-workbench .part.titlebar.inactive>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item.command-center { +.monaco-workbench .part.titlebar.inactive > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center { color: var(--vscode-titleBar-inactiveForeground); border-color: var(--vscode-commandCenter-inactiveBorder) !important; } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item.command-center .search-icon { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center .search-icon { font-size: 14px; opacity: .8; margin: auto 3px; } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item.command-center .search-label { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center .search-label { overflow: hidden; text-overflow: ellipsis; } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-center>.window-title>.command-center .action-item.command-center:HOVER { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center:HOVER { color: var(--vscode-commandCenter-activeForeground); background-color: var(--vscode-commandCenter-activeBackground); border-color: var(--vscode-commandCenter-activeBorder); } /* Menubar */ -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-left>.menubar { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-left > .menubar { /* move menubar above drag region as negative z-index on drag region cause greyscale AA */ z-index: 2500; min-width: 36px; @@ -200,17 +211,17 @@ order: 2; } -.monaco-workbench.web .part.titlebar>.titlebar-container>.titlebar-left>.menubar { +.monaco-workbench.web .part.titlebar > .titlebar-container > .titlebar-left > .menubar { margin-left: 4px; } -.monaco-workbench .part.titlebar>.titlebar-container.counter-zoom > .menubar .menubar-menu-button > .menubar-menu-items-holder.monaco-menu-container { +.monaco-workbench .part.titlebar > .titlebar-container.counter-zoom .menubar .menubar-menu-button > .menubar-menu-items-holder.monaco-menu-container { zoom: var(--zoom-factor); } /* Resizer */ -.monaco-workbench.windows .part.titlebar>.titlebar-container>.resizer, -.monaco-workbench.linux .part.titlebar>.titlebar-container>.resizer { +.monaco-workbench.windows .part.titlebar > .titlebar-container > .resizer, +.monaco-workbench.linux .part.titlebar > .titlebar-container > .resizer { -webkit-app-region: no-drag; position: absolute; top: 0; @@ -218,13 +229,13 @@ height: 4px; } -.monaco-workbench.windows.fullscreen .part.titlebar>.titlebar-container>.resizer, -.monaco-workbench.linux.fullscreen .part.titlebar>.titlebar-container>.resizer { +.monaco-workbench.windows.fullscreen .part.titlebar > .titlebar-container > .resizer, +.monaco-workbench.linux.fullscreen .part.titlebar > .titlebar-container > .resizer { display: none; } /* App Icon */ -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-left>.window-appicon { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-left > .window-appicon { width: 35px; height: 100%; position: relative; @@ -233,22 +244,22 @@ order: 1; } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-left>.window-appicon:not(.codicon) { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-left > .window-appicon:not(.codicon) { background-image: url('../../../media/code-icon.svg'); background-repeat: no-repeat; background-position: center center; background-size: 16px; } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-left>.window-appicon.codicon { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-left > .window-appicon.codicon { line-height: 30px; } -.monaco-workbench.fullscreen .part.titlebar>.titlebar-container>.titlebar-left>.window-appicon { +.monaco-workbench.fullscreen .part.titlebar > .titlebar-container > .titlebar-left > .window-appicon { display: none; } -.monaco-workbench .part.titlebar>.titlebar-container .window-appicon>.home-bar-icon-badge { +.monaco-workbench .part.titlebar > .titlebar-container .window-appicon > .home-bar-icon-badge { position: absolute; right: 9px; bottom: 6px; @@ -273,12 +284,35 @@ text-align: center; z-index: 3000; -webkit-app-region: no-drag; + width: 0px; height: 100%; +} + +/* Web WCO Sizing */ +.monaco-workbench.web .part.titlebar .titlebar-right .window-controls-container { + width: calc(100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px)); + height: env(titlebar-area-height, 35px); +} + +.monaco-workbench.web .part.titlebar .titlebar-left .window-controls-container { + width: env(titlebar-area-x, 0px); + height: env(titlebar-area-height, 35px); +} + +/* Desktop Windows/Linux Window Controls*/ +.monaco-workbench:not(.web):not(.mac) .part.titlebar .window-controls-container.primary { + width: calc(138px / var(--zoom-factor, 1)); +} + +.monaco-workbench:not(.web):not(.mac) .part.titlebar .titlebar-container.counter-zoom .window-controls-container.primary { width: 138px; - zoom: calc(1 / var(--zoom-factor)); } -.monaco-workbench.mac .part.titlebar .window-controls-container { +.monaco-workbench:not(.web):not(.mac) .part.titlebar .titlebar-container:not(.counter-zoom) .window-controls-container * { + zoom: calc(1 / var(--zoom-factor, 1)); +} + +.monaco-workbench.mac .part.titlebar .titlebar-container.counter-zoom .window-controls-container { zoom: unset !important; } @@ -298,18 +332,13 @@ order: 1; } -.monaco-workbench.web .part.titlebar .window-controls-container { - width: calc(100vw - env(titlebar-area-width, 100vw)); - height: env(titlebar-area-height, 35px); -} - .monaco-workbench.fullscreen .part.titlebar .window-controls-container { display: none; background-color: transparent; } /* Window Control Icons */ -.monaco-workbench .part.titlebar .window-controls-container>.window-icon { +.monaco-workbench .part.titlebar .window-controls-container > .window-icon { display: flex; justify-content: center; align-items: center; @@ -318,20 +347,20 @@ font-size: 16px; } -.monaco-workbench .part.titlebar .window-controls-container>.window-icon::before { +.monaco-workbench .part.titlebar .window-controls-container > .window-icon::before { height: 16px; line-height: 16px; } -.monaco-workbench .part.titlebar .window-controls-container>.window-icon:hover { +.monaco-workbench .part.titlebar .window-controls-container > .window-icon:hover { background-color: rgba(255, 255, 255, 0.1); } -.monaco-workbench .part.titlebar.light>.window-controls-container>.window-icon:hover { +.monaco-workbench .part.titlebar.light > .window-controls-container > .window-icon:hover { background-color: rgba(0, 0, 0, 0.1); } -.monaco-workbench .part.titlebar .window-controls-container>.window-icon.window-close:hover { +.monaco-workbench .part.titlebar .window-controls-container > .window-icon.window-close:hover { background-color: rgba(232, 17, 35, 0.9); } @@ -340,7 +369,7 @@ } /* Layout Controls */ -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-right>.layout-controls-container { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .layout-controls-container { display: none; padding-right: 2px; flex-grow: 0; @@ -354,15 +383,15 @@ min-width: 28px; } -.monaco-workbench.mac:not(.web) .part.titlebar>.titlebar-container>.titlebar-right>.layout-controls-container { +.monaco-workbench.mac:not(.web) .part.titlebar > .titlebar-container > .titlebar-right > .layout-controls-container { right: 8px; } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-right>.layout-controls-container.show-layout-control { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .layout-controls-container.show-layout-control { display: flex; justify-content: center; } -.monaco-workbench .part.titlebar>.titlebar-container>.titlebar-right>.layout-controls-container .codicon { +.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .layout-controls-container .codicon { color: inherit; } diff --git a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts index 28c214e6c5cb2..cc3436e5b3a17 100644 --- a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts +++ b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts @@ -7,7 +7,7 @@ import 'vs/css!./media/titlebarpart'; import { localize } from 'vs/nls'; import { Part } from 'vs/workbench/browser/part'; import { ITitleService, ITitleProperties } from 'vs/workbench/services/title/common/titleService'; -import { getZoomFactor, isWCOEnabled } from 'vs/base/browser/browser'; +import { getZoomFactor, getZoomLevel, isWCOEnabled } from 'vs/base/browser/browser'; import { MenuBarVisibility, getTitleBarStyle, getMenuBarVisibility } from 'vs/platform/window/common/window'; import { IContextMenuService } from 'vs/platform/contextview/browser/contextView'; import { StandardMouseEvent } from 'vs/base/browser/mouseEvent'; @@ -63,7 +63,7 @@ export class TitlebarPart extends Part implements ITitleService { readonly onDidChangeCommandCenterVisibility: Event = this._onDidChangeCommandCenterVisibility.event; protected rootContainer!: HTMLElement; - protected windowControls: HTMLElement | undefined; + protected primaryWindowControls: HTMLElement | undefined; protected dragRegion: HTMLElement | undefined; protected title!: HTMLElement; @@ -285,10 +285,8 @@ export class TitlebarPart extends Part implements ITitleService { }); } - this.windowControls = append(isMacintosh ? this.leftContent : this.rightContent, $('div.window-controls-container')); - if (isWeb && isMacintosh) { - append(this.rightContent, $('div.window-controls-container')); - } + this.primaryWindowControls = append(isMacintosh ? this.leftContent : this.rightContent, $('div.window-controls-container.primary')); + append(isMacintosh ? this.rightContent : this.leftContent, $('div.window-controls-container.secondary')); // Context menu on title [EventType.CONTEXT_MENU, EventType.MOUSE_DOWN].forEach(event => { diff --git a/src/vs/workbench/electron-sandbox/parts/titlebar/titlebarPart.ts b/src/vs/workbench/electron-sandbox/parts/titlebar/titlebarPart.ts index b9863d1903551..064cf273bfa52 100644 --- a/src/vs/workbench/electron-sandbox/parts/titlebar/titlebarPart.ts +++ b/src/vs/workbench/electron-sandbox/parts/titlebar/titlebarPart.ts @@ -163,15 +163,15 @@ export class TitlebarPart extends BrowserTitleBarPart { } // Window Controls (Native Windows/Linux) - if (!isMacintosh && getTitleBarStyle(this.configurationService) !== 'native' && !isWCOEnabled() && this.windowControls) { + if (!isMacintosh && getTitleBarStyle(this.configurationService) !== 'native' && !isWCOEnabled() && this.primaryWindowControls) { // Minimize - const minimizeIcon = append(this.windowControls, $('div.window-icon.window-minimize' + Codicon.chromeMinimize.cssSelector)); + const minimizeIcon = append(this.primaryWindowControls, $('div.window-icon.window-minimize' + Codicon.chromeMinimize.cssSelector)); this._register(addDisposableListener(minimizeIcon, EventType.CLICK, e => { this.nativeHostService.minimizeWindow(); })); // Restore - this.maxRestoreControl = append(this.windowControls, $('div.window-icon.window-max-restore')); + this.maxRestoreControl = append(this.primaryWindowControls, $('div.window-icon.window-max-restore')); this._register(addDisposableListener(this.maxRestoreControl, EventType.CLICK, async e => { const maximized = await this.nativeHostService.isMaximized(); if (maximized) { @@ -182,7 +182,7 @@ export class TitlebarPart extends BrowserTitleBarPart { })); // Close - const closeIcon = append(this.windowControls, $('div.window-icon.window-close' + Codicon.chromeClose.cssSelector)); + const closeIcon = append(this.primaryWindowControls, $('div.window-icon.window-close' + Codicon.chromeClose.cssSelector)); this._register(addDisposableListener(closeIcon, EventType.CLICK, e => { this.nativeHostService.closeWindow(); })); From 258dc33df4ca60cbac99d2b82c088dbfa2e001fe Mon Sep 17 00:00:00 2001 From: SteVen Batten Date: Wed, 21 Dec 2022 13:51:48 -0800 Subject: [PATCH 5/6] unused import --- src/vs/workbench/browser/parts/titlebar/titlebarPart.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts index cc3436e5b3a17..74a5ea2795a45 100644 --- a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts +++ b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts @@ -7,7 +7,7 @@ import 'vs/css!./media/titlebarpart'; import { localize } from 'vs/nls'; import { Part } from 'vs/workbench/browser/part'; import { ITitleService, ITitleProperties } from 'vs/workbench/services/title/common/titleService'; -import { getZoomFactor, getZoomLevel, isWCOEnabled } from 'vs/base/browser/browser'; +import { getZoomFactor, isWCOEnabled } from 'vs/base/browser/browser'; import { MenuBarVisibility, getTitleBarStyle, getMenuBarVisibility } from 'vs/platform/window/common/window'; import { IContextMenuService } from 'vs/platform/contextview/browser/contextView'; import { StandardMouseEvent } from 'vs/base/browser/mouseEvent'; From 4aa47e7c9575bce7d6d36167e2e1b60dd7939eb5 Mon Sep 17 00:00:00 2001 From: SteVen Batten Date: Thu, 22 Dec 2022 08:52:40 -0800 Subject: [PATCH 6/6] macos patches --- .../parts/titlebar/media/titlebarpart.css | 40 +++++-------------- 1 file changed, 11 insertions(+), 29 deletions(-) diff --git a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css index f38f0c0536668..ab8dea5df2330 100644 --- a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css +++ b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css @@ -3,17 +3,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -/* START: Don't commit */ -.monaco-workbench .part.titlebar > .titlebar-container .window-controls-container { - background-color: crimson; -} - -.monaco-workbench .part.titlebar .titlebar-container.titlebar-container.counter-zoom { - outline: 1px dashed crimson; - outline-offset: -3px; -} -/* END: Don't commit */ - /* Part Element */ .monaco-workbench .part.titlebar { display: flex; @@ -288,7 +277,7 @@ height: 100%; } -/* Web WCO Sizing */ +/* Web WCO Sizing/Ordering */ .monaco-workbench.web .part.titlebar .titlebar-right .window-controls-container { width: calc(100vw - env(titlebar-area-width, 100vw) - env(titlebar-area-x, 0px)); height: env(titlebar-area-height, 35px); @@ -299,6 +288,14 @@ height: env(titlebar-area-height, 35px); } +.monaco-workbench.web.mac .part.titlebar .titlebar-left .window-controls-container { + order: 0; +} + +.monaco-workbench.web.mac .part.titlebar .titlebar-right .window-controls-container { + order: 1; +} + /* Desktop Windows/Linux Window Controls*/ .monaco-workbench:not(.web):not(.mac) .part.titlebar .window-controls-container.primary { width: calc(138px / var(--zoom-factor, 1)); @@ -312,26 +309,11 @@ zoom: calc(1 / var(--zoom-factor, 1)); } -.monaco-workbench.mac .part.titlebar .titlebar-container.counter-zoom .window-controls-container { - zoom: unset !important; -} - -.monaco-workbench.mac .part.titlebar .window-controls-container { +/* Desktop macOS Window Controls */ +.monaco-workbench:not(.web).mac .part.titlebar .window-controls-container.primary { width: 70px; } -.monaco-workbench.web.mac .part.titlebar .titlebar-left .window-controls-container { - width: env(titlebar-area-x, 0px); - height: env(titlebar-area-height, 35px); - order: 0; -} - -.monaco-workbench.web.mac .part.titlebar .titlebar-right .window-controls-container { - width: calc(100vw - (env(titlebar-area-x, 0px) + env(titlebar-area-width, 100vw))); - height: env(titlebar-area-height, 35px); - order: 1; -} - .monaco-workbench.fullscreen .part.titlebar .window-controls-container { display: none; background-color: transparent;