linux - compute WCO width based on actual values (microsoft#227075)

Author: bpasero

build/lib/stylelint/vscode-known-variables.json

@@ -831,6 +831,7 @@
 		"--testMessageDecorationFontFamily",
 		"--testMessageDecorationFontSize",
 		"--title-border-bottom-color",
+		"--title-wco-width",
 		"--vscode-chat-list-background",
 		"--vscode-editorCodeLens-fontFamily",
 		"--vscode-editorCodeLens-fontFamilyDefault",
@@ -880,4 +881,4 @@
 		"--widget-color",
 		"--text-link-decoration"
 	]
-}
+}

src/vs/base/browser/browser.ts

@@ -136,6 +136,6 @@ export function isWCOEnabled(): boolean {
 
 // Returns the bounding rect of the titlebar area if it is supported and defined
 // See docs at https://developer.mozilla.org/en-US/docs/Web/API/WindowControlsOverlay/getTitlebarAreaRect
-export function getWCOBoundingRect(): DOMRect | undefined {
-	return (navigator as any)?.windowControlsOverlay?.getTitlebarAreaRect();
+export function getWCOTitlebarAreaRect(targetWindow: Window): DOMRect | undefined {
+	return (targetWindow.navigator as any)?.windowControlsOverlay?.getTitlebarAreaRect();
 }

src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css

@@ -326,11 +326,11 @@
 }
 
 .monaco-workbench.linux:not(.web) .part.titlebar .window-controls-container.wco-enabled {
-	width: calc(100px / var(--zoom-factor, 1)); /* TODO@bpasero TODO@benibenj this should not be hardcoded (https://github.com/microsoft/vscode/issues/226804) */
+	width: calc(var(--title-wco-width, 138px) / var(--zoom-factor, 1));
 }
 
 .monaco-workbench.linux:not(.web) .part.titlebar .titlebar-container.counter-zoom .window-controls-container.wco-enabled {
-	width: 100px; /* TODO@bpasero TODO@benibenj this should not be hardcoded (https://github.com/microsoft/vscode/issues/226804) */
+	width: var(--title-wco-width, 138px);
 }
 
 .monaco-workbench:not(.web):not(.mac) .part.titlebar .titlebar-container:not(.counter-zoom) .window-controls-container * {

src/vs/workbench/browser/parts/titlebar/titlebarPart.ts

@@ -7,7 +7,7 @@ import 'vs/css!./media/titlebarpart';
 import { localize, localize2 } from 'vs/nls';
 import { MultiWindowParts, Part } from 'vs/workbench/browser/part';
 import { ITitleService } from 'vs/workbench/services/title/browser/titleService';
-import { getWCOBoundingRect, getZoomFactor, isWCOEnabled } from 'vs/base/browser/browser';
+import { getWCOTitlebarAreaRect, getZoomFactor, isWCOEnabled } from 'vs/base/browser/browser';
 import { MenuBarVisibility, getTitleBarStyle, getMenuBarVisibility, TitlebarStyle, hasCustomTitlebar, hasNativeTitlebar, DEFAULT_CUSTOM_TITLEBAR_HEIGHT } from 'vs/platform/window/common/window';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
@@ -228,7 +228,7 @@ export class BrowserTitlebarPart extends Part implements ITitlebarPart {
 		const wcoEnabled = isWeb && isWCOEnabled();
 		let value = this.isCommandCenterVisible || wcoEnabled ? DEFAULT_CUSTOM_TITLEBAR_HEIGHT : 30;
 		if (wcoEnabled) {
-			value = Math.max(value, getWCOBoundingRect()?.height ?? 0);
+			value = Math.max(value, getWCOTitlebarAreaRect(getWindow(this.element))?.height ?? 0);
 		}
 
 		return value / (this.preventZoom ? getZoomFactor(getWindow(this.element)) : 1);
@@ -499,6 +499,13 @@ export class BrowserTitlebarPart extends Part implements ITitlebarPart {
 				this.windowControlsContainer = append(windowControlsLocation === 'left' ? this.leftContent : this.rightContent, $('div.window-controls-container'));
 				if (isWCOEnabled()) {
 					this.windowControlsContainer.classList.add('wco-enabled');
+
+					const targetWindow = getWindow(this.element);
+					const wcoTitlebarAreaRect = getWCOTitlebarAreaRect(targetWindow);
+					if (wcoTitlebarAreaRect) {
+						const wcoWidth = targetWindow.innerWidth - wcoTitlebarAreaRect.width - wcoTitlebarAreaRect.x;
+						this.windowControlsContainer.style.setProperty('--title-wco-width', `${wcoWidth}px`);
+					}
 				}
 			}
 		}