zoom - more polish

src/vs/base/browser/ui/iconLabel/iconLabelHover.ts

@@ -47,7 +47,6 @@ interface IHoverAction {
 export interface IUpdatableHoverOptions {
 	actions?: IHoverAction[];
 	linkHandler?(url: string): void;
-	disableHideOnClick?: boolean;
 }
 
 export interface ICustomHover extends IDisposable {
@@ -195,9 +194,7 @@ export function setupCustomHover(hoverDelegate: IHoverDelegate, htmlElement: HTM
 	let isMouseDown = false;
 	const mouseDownEmitter = dom.addDisposableListener(htmlElement, dom.EventType.MOUSE_DOWN, () => {
 		isMouseDown = true;
-		if (!options?.disableHideOnClick) {
-			hideHover(true, true);
-		}
+		hideHover(true, true);
 	}, true);
 	const mouseUpEmitter = dom.addDisposableListener(htmlElement, dom.EventType.MOUSE_UP, () => {
 		isMouseDown = false;

src/vs/editor/browser/services/hoverService.ts

@@ -97,14 +97,12 @@ export class HoverService implements IHoverService {
 				}
 			}));
 		} else {
-			if (!options.disableHideOnClick) {
-				if ('targetElements' in options.target) {
-					for (const element of options.target.targetElements) {
-						hoverDisposables.add(addDisposableListener(element, EventType.CLICK, () => this.hideHover()));
-					}
-				} else {
-					hoverDisposables.add(addDisposableListener(options.target, EventType.CLICK, () => this.hideHover()));
+			if ('targetElements' in options.target) {
+				for (const element of options.target.targetElements) {
+					hoverDisposables.add(addDisposableListener(element, EventType.CLICK, () => this.hideHover()));
 				}
+			} else {
+				hoverDisposables.add(addDisposableListener(options.target, EventType.CLICK, () => this.hideHover()));
 			}
 			const focusedElement = getActiveElement();
 			if (focusedElement) {

src/vs/platform/hover/browser/hover.ts

@@ -114,13 +114,6 @@ export interface IHoverOptions {
 	 * Options that define how the hover looks.
 	 */
 	appearance?: IHoverAppearanceOptions;
-
-	/**
-	 * Option to disable automated hiding of the hover when clicking its
-	 * target element. This should be set when clicking the target element
-	 * shows the hover to prevent flicker.
-	 */
-	disableHideOnClick?: boolean;
 }
 
 export interface IHoverPositionOptions {

src/vs/workbench/browser/parts/statusbar/statusbarItem.ts

@@ -117,13 +117,12 @@ export class StatusbarEntryItem extends Disposable {
 		// Update: Hover
 		if (!this.entry || !this.isEqualTooltip(this.entry, entry)) {
 			const hoverContents = isMarkdownString(entry.tooltip) ? { markdown: entry.tooltip, markdownNotSupportedFallback: undefined } : entry.tooltip;
-			const entryOpensTooltip = entry.command === ShowTooltipCommand;
 			if (this.hover) {
-				this.hover.update(hoverContents, { disableHideOnClick: entryOpensTooltip });
+				this.hover.update(hoverContents);
 			} else {
-				this.hover = this._register(setupCustomHover(this.hoverDelegate, this.container, hoverContents, { disableHideOnClick: entryOpensTooltip }));
+				this.hover = this._register(setupCustomHover(this.hoverDelegate, this.container, hoverContents));
 			}
-			if (!entryOpensTooltip) {
+			if (entry.command !== ShowTooltipCommand /* prevents flicker on click */) {
 				this.focusListener.value = addDisposableListener(this.labelContainer, EventType.FOCUS, e => {
 					EventHelper.stop(e);
 					this.hover?.show(false);

src/vs/workbench/browser/parts/statusbar/statusbarPart.ts

@@ -161,7 +161,8 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer {
 			return this.hoverService.showHover({
 				...options,
 				persistence: {
-					hideOnKeyDown: true
+					hideOnKeyDown: true,
+					sticky: focus
 				}
 			}, focus);
 		}

src/vs/workbench/electron-sandbox/desktop.contribution.ts

@@ -27,7 +27,6 @@ import { ShutdownReason } from 'vs/workbench/services/lifecycle/common/lifecycle
 import { NativeWindow } from 'vs/workbench/electron-sandbox/window';
 import { ModifierKeyEmitter } from 'vs/base/browser/dom';
 import { applicationConfigurationNodeBase, securityConfigurationNodeBase } from 'vs/workbench/common/configuration';
-import product from 'vs/platform/product/common/product';
 
 // Actions
 (function registerActions(): void {
@@ -199,7 +198,7 @@ import product from 'vs/platform/product/common/product';
 			},
 			'window.zoomPerWindow': {
 				'type': 'boolean',
-				'default': product.quality !== 'stable', // TODO@bpasero flip the default eventually
+				'default': true,
 				'markdownDescription': localize({ comment: ['{0} will be a setting name rendered as a link'], key: 'zoomPerWindow' }, "Controls if the 'Zoom In' and 'Zoom Out' commands apply the zoom level to all windows or only the active window. See {0} for configuring a default zoom level for all windows.", '`#window.zoomLevel#`'),
 				tags: ['accessibility']
 			},

src/vs/workbench/electron-sandbox/window.ts

@@ -18,7 +18,7 @@ import { WindowMinimumSize, IOpenFileRequest, getTitleBarStyle, IAddFoldersReque
 import { ITitleService } from 'vs/workbench/services/title/browser/titleService';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { ApplyZoomTarget, applyZoom } from 'vs/platform/window/electron-sandbox/window';
-import { setFullscreen, getZoomLevel, onDidChangeZoomLevel } from 'vs/base/browser/browser';
+import { setFullscreen, getZoomLevel, onDidChangeZoomLevel, getZoomFactor } from 'vs/base/browser/browser';
 import { ICommandService, CommandsRegistry } from 'vs/platform/commands/common/commands';
 import { IResourceEditorInput } from 'vs/platform/editor/common/editor';
 import { ipcRenderer, process } from 'vs/base/parts/sandbox/electron-sandbox/globals';
@@ -1121,7 +1121,8 @@ class ZoomStatusEntry extends Disposable {
 
 	constructor(
 		@IStatusbarService private readonly statusbarService: IStatusbarService,
-		@ICommandService private readonly commandService: ICommandService
+		@ICommandService private readonly commandService: ICommandService,
+		@IKeybindingService private readonly keybindingService: IKeybindingService
 	) {
 		super();
 	}
@@ -1149,37 +1150,29 @@ class ZoomStatusEntry extends Disposable {
 		left.classList.add('zoom-status-left');
 		container.appendChild(left);
 
-		const actionBarLeft = disposables.add(new ActionBar(left));
-
-		actionBarLeft.push(
-			disposables.add(new Action('zoomOut', localize('zoomOut', "Zoom Out"), ThemeIcon.asClassName(Codicon.remove), true, () => this.commandService.executeCommand('workbench.action.zoomOut'))),
-			{ icon: true, label: false }
-		);
+		const zoomOutAction: Action = disposables.add(new Action('workbench.action.zoomOut', localize('zoomOut', "Zoom Out"), ThemeIcon.asClassName(Codicon.remove), true, () => this.commandService.executeCommand(zoomOutAction.id)));
+		const zoomInAction: Action = disposables.add(new Action('workbench.action.zoomIn', localize('zoomIn', "Zoom In"), ThemeIcon.asClassName(Codicon.plus), true, () => this.commandService.executeCommand(zoomInAction.id)));
+		const zoomResetAction: Action = disposables.add(new Action('workbench.action.zoomReset', localize('zoomReset', "Reset"), undefined, true, () => this.commandService.executeCommand(zoomResetAction.id)));
+		zoomResetAction.tooltip = localize('zoomResetLabel', "Reset Zoom ({1})", zoomResetAction.label, this.keybindingService.lookupKeybinding(zoomResetAction.id)?.getLabel());
+		const zoomSettingsAction: Action = disposables.add(new Action('workbench.action.openSettings', localize('zoomSettings', "Settings"), ThemeIcon.asClassName(Codicon.settingsGear), true, () => this.commandService.executeCommand(zoomSettingsAction.id, 'window.zoom')));
+		const zoomLevelLabel = disposables.add(new Action('zoomLabel', undefined, undefined, false));
 
-		this.zoomLevelLabel = disposables.add(new Action('zoomLabel', '', undefined, false));
+		this.zoomLevelLabel = zoomLevelLabel;
 		disposables.add(toDisposable(() => this.zoomLevelLabel = undefined));
-		actionBarLeft.push(this.zoomLevelLabel, { icon: false, label: true });
 
-		actionBarLeft.push(
-			disposables.add(new Action('zoomIn', localize('zoomIn', "Zoom In"), ThemeIcon.asClassName(Codicon.plus), true, () => this.commandService.executeCommand('workbench.action.zoomIn'))),
-			{ icon: true, label: false }
-		);
+		const actionBarLeft = disposables.add(new ActionBar(left));
+		actionBarLeft.push(zoomOutAction, { icon: true, label: false, keybinding: this.keybindingService.lookupKeybinding(zoomOutAction.id)?.getLabel() });
+		actionBarLeft.push(this.zoomLevelLabel, { icon: false, label: true });
+		actionBarLeft.push(zoomInAction, { icon: true, label: false, keybinding: this.keybindingService.lookupKeybinding(zoomInAction.id)?.getLabel() });
 
 		const right = document.createElement('div');
 		right.classList.add('zoom-status-right');
 		container.appendChild(right);
 
 		const actionBarRight = disposables.add(new ActionBar(right));
 
-		actionBarRight.push(
-			disposables.add(new Action('zoomReset', localize('zoomReset', "Reset"), undefined, true, () => this.commandService.executeCommand('workbench.action.zoomReset'))),
-			{ icon: false, label: true }
-		);
-
-		actionBarRight.push(
-			disposables.add(new Action('zoomSettings', localize('zoomSettings', "Settings"), ThemeIcon.asClassName(Codicon.settingsGear), true, () => this.commandService.executeCommand('workbench.action.openSettings', 'window.zoom'))),
-			{ icon: true, label: false }
-		);
+		actionBarRight.push(zoomResetAction, { icon: false, label: true });
+		actionBarRight.push(zoomSettingsAction, { icon: true, label: false, keybinding: this.keybindingService.lookupKeybinding(zoomSettingsAction.id)?.getLabel() });
 
 		const name = localize('status.windowZoom', "Window Zoom");
 		disposables.add(this.statusbarService.addEntry({
@@ -1194,9 +1187,12 @@ class ZoomStatusEntry extends Disposable {
 
 	private updateZoomLevelLabel(targetWindowId: number): void {
 		if (this.zoomLevelLabel) {
-			const zoomLevel = getZoomLevel(getWindowById(targetWindowId)?.window ?? mainWindow);
+			const targetWindow = getWindowById(targetWindowId)?.window ?? mainWindow;
+			const zoomFactor = Math.round(getZoomFactor(targetWindow) * 100);
+			const zoomLevel = getZoomLevel(targetWindow);
+
 			this.zoomLevelLabel.label = `${zoomLevel}`;
-			this.zoomLevelLabel.tooltip = localize('zoomNumber', "Zoom Level: {0}", zoomLevel);
+			this.zoomLevelLabel.tooltip = localize('zoomNumber', "Zoom Level: {0} ({1}%)", zoomLevel, zoomFactor);
 		}
 	}
 }