Making status bar items for images more reliable

Fixes #81738

extensions/image-preview/src/preview.ts

@@ -5,7 +5,7 @@
 
 import * as vscode from 'vscode';
 import { SizeStatusBarEntry } from './sizeStatusBarEntry';
-import { ZoomStatusBarEntry } from './zoomStatusBarEntry';
+import { ZoomStatusBarEntry, Scale } from './zoomStatusBarEntry';
 import { Disposable } from './dispose';
 
 const enum PreviewState {
@@ -18,7 +18,11 @@ export class Preview extends Disposable {
 
 	public static readonly viewType = 'imagePreview.previewEditor';
 
+	private readonly id: string = `${Date.now()}-${Math.random().toString()}`;
+
 	private _previewState = PreviewState.Visible;
+	private _imageSize: string | undefined;
+	private _imageZoom: Scale | undefined;
 
 	constructor(
 		private readonly extensionRoot: vscode.Uri,
@@ -44,12 +48,14 @@ export class Preview extends Disposable {
 			switch (message.type) {
 				case 'size':
 					{
-						this.sizeStatusBarEntry.update(message.value);
+						this._imageSize = message.value;
+						this.update();
 						break;
 					}
 				case 'zoom':
 					{
-						this.zoomStatusBarEntry.update(message.value);
+						this._imageZoom = message.value;
+						this.update();
 						break;
 					}
 			}
@@ -67,8 +73,8 @@ export class Preview extends Disposable {
 
 		this._register(webviewEditor.onDidDispose(() => {
 			if (this._previewState === PreviewState.Active) {
-				this.sizeStatusBarEntry.hide();
-				this.zoomStatusBarEntry.hide();
+				this.sizeStatusBarEntry.hide(this.id);
+				this.zoomStatusBarEntry.hide(this.id);
 			}
 			this._previewState = PreviewState.Disposed;
 		}));
@@ -97,12 +103,14 @@ export class Preview extends Disposable {
 
 		if (this.webviewEditor.active) {
 			this._previewState = PreviewState.Active;
-			this.sizeStatusBarEntry.show();
-			this.zoomStatusBarEntry.show();
+			this.sizeStatusBarEntry.show(this.id, this._imageSize || '');
+			this.zoomStatusBarEntry.show(this.id, this._imageZoom || 'fit');
 		} else {
+			if (this._previewState === PreviewState.Active) {
+				this.sizeStatusBarEntry.hide(this.id);
+				this.zoomStatusBarEntry.hide(this.id);
+			}
 			this._previewState = PreviewState.Visible;
-			this.sizeStatusBarEntry.hide();
-			this.zoomStatusBarEntry.hide();
 		}
 	}
 
@@ -132,11 +140,16 @@ export class Preview extends Disposable {
 	}
 
 	private getResourcePath(webviewEditor: vscode.WebviewEditor, resource: vscode.Uri, version: string) {
-		if (resource.scheme === 'data') {
-			return encodeURI(resource.toString(true));
-		}
+		switch (resource.scheme) {
+			case 'data':
+				return encodeURI(resource.toString(true));
 
-		return encodeURI(webviewEditor.webview.asWebviewUri(resource).toString(true) + `?version=${version}`);
+			case 'git':
+
+
+			default:
+				return encodeURI(webviewEditor.webview.asWebviewUri(resource).toString(true) + `?version=${version}`);
+		}
 	}
 
 	private extensionResource(path: string) {

extensions/image-preview/src/sizeStatusBarEntry.ts

@@ -12,6 +12,8 @@ const localize = nls.loadMessageBundle();
 export class SizeStatusBarEntry extends Disposable {
 	private readonly _entry: vscode.StatusBarItem;
 
+	private _showingOwner: string | undefined;
+
 	constructor() {
 		super();
 		this._entry = this._register(vscode.window.createStatusBarItem({
@@ -22,15 +24,16 @@ export class SizeStatusBarEntry extends Disposable {
 		}));
 	}
 
-	public show() {
+	public show(owner: string, text: string) {
+		this._showingOwner = owner;
+		this._entry.text = text;
 		this._entry.show();
 	}
 
-	public hide() {
-		this._entry.hide();
-	}
-
-	public update(text: string) {
-		this._entry.text = text;
+	public hide(owner: string) {
+		if (owner === this._showingOwner) {
+			this._entry.hide();
+			this._showingOwner = undefined;
+		}
 	}
 }

extensions/image-preview/src/zoomStatusBarEntry.ts

@@ -11,7 +11,7 @@ const localize = nls.loadMessageBundle();
 
 const selectZoomLevelCommandId = '_imagePreview.selectZoomLevel';
 
-type Scale = number | 'fit';
+export type Scale = number | 'fit';
 
 export class ZoomStatusBarEntry extends Disposable {
 	private readonly _entry: vscode.StatusBarItem;
@@ -19,6 +19,8 @@ export class ZoomStatusBarEntry extends Disposable {
 	private readonly _onDidChangeScale = this._register(new vscode.EventEmitter<{ scale: Scale }>());
 	public readonly onDidChangeScale = this._onDidChangeScale.event;
 
+	private _showOwner: string | undefined;
+
 	constructor() {
 		super();
 		this._entry = this._register(vscode.window.createStatusBarItem({
@@ -48,16 +50,17 @@ export class ZoomStatusBarEntry extends Disposable {
 		this._entry.command = selectZoomLevelCommandId;
 	}
 
-	public show() {
+	public show(owner: string, scale: Scale) {
+		this._showOwner = owner;
+		this._entry.text = this.zoomLabel(scale);
 		this._entry.show();
 	}
 
-	public hide() {
-		this._entry.hide();
-	}
-
-	public update(scale: Scale) {
-		this._entry.text = this.zoomLabel(scale);
+	public hide(owner: string) {
+		if (owner === this._showOwner) {
+			this._entry.hide();
+			this._showOwner = undefined;
+		}
 	}
 
 	private zoomLabel(scale: Scale): string {