title - more style fixes for proper positioning (microsoft#227139)

Author: bpasero

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

@@ -326,7 +326,7 @@
 }
 
 .monaco-workbench.linux:not(.web) .part.titlebar .window-controls-container.wco-enabled {
-	width: calc(var(--title-wco-width, 138px) / var(--zoom-factor, 1));
+	width: calc(var(--title-wco-width, 138px));
 }
 
 .monaco-workbench.linux:not(.web) .part.titlebar .titlebar-container.counter-zoom .window-controls-container.wco-enabled {

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 { getWCOTitlebarAreaRect, getZoomFactor, isWCOEnabled } from 'vs/base/browser/browser';
+import { getWCOTitlebarAreaRect, getZoomFactor, isWCOEnabled, onDidChangeZoomLevel } 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';
@@ -478,34 +478,45 @@ export class BrowserTitlebarPart extends Part implements ITitlebarPart {
 
 		// Window Controls Container
 		if (!hasNativeTitlebar(this.configurationService, this.titleBarStyle)) {
-			let windowControlsLocation = isMacintosh ? 'left' : 'right';
+			let primaryWindowControlsLocation = isMacintosh ? 'left' : 'right';
 			if (isMacintosh && isNative) {
 
 				// Check if the locale is RTL, macOS will move traffic lights in RTL locales
 				// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/textInfo
 
 				const localeInfo = new Intl.Locale(platformLocale) as any;
 				if (localeInfo?.textInfo?.direction === 'rtl') {
-					windowControlsLocation = 'right';
+					primaryWindowControlsLocation = 'right';
 				}
 			}
 
-			if (isMacintosh && isNative && windowControlsLocation === 'left') {
+			if (isMacintosh && isNative && primaryWindowControlsLocation === 'left') {
 				// macOS native: controls are on the left and the container is not needed to make room
 				// for something, except for web where a custom menu being supported). not putting the
 				// container helps with allowing to move the window when clicking very close to the
 				// window control buttons.
 			} else {
-				this.windowControlsContainer = append(windowControlsLocation === 'left' ? this.leftContent : this.rightContent, $('div.window-controls-container'));
+				this.windowControlsContainer = append(primaryWindowControlsLocation === 'left' ? this.leftContent : this.rightContent, $('div.window-controls-container'));
+				if (isWeb) {
+					// Web: its possible to have control overlays on both sides, for example on macOS
+					// with window controls on the left and PWA controls on the right.
+					append(primaryWindowControlsLocation === 'left' ? this.rightContent : this.leftContent, $('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`);
-					}
+					const updateWCOWidthVariable = () => {
+						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`);
+						}
+					};
+					updateWCOWidthVariable();
+
+					this._register(onDidChangeZoomLevel(() => setTimeout(() => updateWCOWidthVariable(), 5))); // Somehow it does not get the right size without this timeout :-/
 				}
 			}
 		}