Add hover byte status

media/editor/dataDisplayContext.tsx

@@ -244,6 +244,13 @@ export class DisplayContext {
 		});
 
 		this.selectionChangeEmitter.addListener(() => this.publishSelections());
+		this.hoverChangeEmitter.addListener(() => {
+			// publishes the new hovered byte
+			messageHandler.sendEvent({
+				type: MessageType.SetHoveredByte,
+				hovered: this._hoveredByte?.byte,
+			})
+		});
 	}
 
 	/**

shared/protocol.ts

@@ -14,6 +14,7 @@ export const enum MessageType {
 	ReloadFromDisk,
 	StashDisplayedOffset,
 	GoToOffset,
+	SetHoveredByte,
 	SetFocusedByte,
 	SetFocusedByteRange,
 	SetSelectedCount,
@@ -145,6 +146,12 @@ export interface SetSelectedCountMessage {
 	focused?: number;
 }
 
+/** Sets the hovered byte in the editor */
+export interface SetHoveredByteMessage {
+	type: MessageType.SetHoveredByte;
+	hovered?: number;
+}
+
 /** Saves the current offset shown in the editor. */
 export interface StashDisplayedOffsetMessage {
 	type: MessageType.StashDisplayedOffset;
@@ -254,6 +261,7 @@ export type FromWebviewMessage =
 	| ClearDataInspectorMessage
 	| SetInspectByteMessage
 	| SetSelectedCountMessage
+	| SetHoveredByteMessage
 	| ReadyRequestMessage
 	| UpdateEditorSettings
 	| PasteMessage

src/extension.ts

@@ -8,7 +8,8 @@ import { showGoToOffset } from "./goToOffset";
 import { HexEditorProvider } from "./hexEditorProvider";
 import { HexEditorRegistry } from "./hexEditorRegistry";
 import { showSelectBetweenOffsets } from "./selectBetweenOffsets";
-import StatusSelectionCount from "./statusSelectionCount";
+import StatusFocus from "./statusFocus";
+import StatusHoverAndSelection from "./statusHoverAndSelection";
 
 function readConfigFromPackageJson(extension: vscode.Extension<any>): {
 	extId: string;
@@ -69,7 +70,8 @@ export function activate(context: vscode.ExtensionContext): void {
 			}
 		},
 	);
-	context.subscriptions.push(new StatusSelectionCount(registry));
+	context.subscriptions.push(new StatusFocus(registry));
+	context.subscriptions.push(new StatusHoverAndSelection(registry));
 	context.subscriptions.push(goToOffsetCommand);
 	context.subscriptions.push(selectBetweenOffsetsCommand);
 	context.subscriptions.push(openWithCommand);

src/hexDocument.ts

@@ -62,7 +62,7 @@ export class HexDocument extends Disposable implements vscode.CustomDocument {
 	public lastSave = 0;
 
 	private _selectionState: ISelectionState = { selected: 0 };
-
+	private _hoverState: number | undefined = undefined;
 	/** Search provider for the document. */
 	public readonly searchProvider = new SearchProvider();
 
@@ -161,6 +161,21 @@ export class HexDocument extends Disposable implements vscode.CustomDocument {
 		this._onDidChangeSelectionState.fire(state);
 	}
 
+	private readonly _onDidChangeHoverState = this._register(
+		new vscode.EventEmitter<number | undefined>(),
+	);
+
+	public readonly onDidChangeHoverState = this._onDidChangeHoverState.event;
+
+	public get hoverState() {
+		return this._hoverState;
+	}
+
+	public set hoverState(byte: number | undefined) {
+		this._hoverState = byte;
+		this._onDidChangeHoverState.fire(byte);
+	}
+
 	private readonly _onDidRevert = this._register(new vscode.EventEmitter<void>());
 
 	/**

src/hexEditorProvider.ts

@@ -328,7 +328,9 @@ export class HexEditorProvider implements vscode.CustomEditorProvider<HexDocumen
 			case MessageType.SetSelectedCount:
 				document.selectionState = message;
 				break;
-
+			case MessageType.SetHoveredByte:
+				document.hoverState = message.hovered;
+				break;
 			case MessageType.ReadRangeRequest:
 				const data = await document.readBuffer(message.offset, message.bytes);
 				return { type: MessageType.ReadRangeResponse, data: getCorrectArrayBuffer(data) };

src/statusSelectionCount.ts → src/statusFocus.ts

@@ -9,11 +9,11 @@ import { HexEditorRegistry } from "./hexEditorRegistry";
 const numberFormat = new Intl.NumberFormat();
 
 /**
- * this is a class to represent the status bar item that displays the number of selected bytes
+ * Displays the focused byte in a StatusBarItem
  *
- * @class StatusSelectionCount
+ * @class StatusFocus
  */
-export default class StatusSelectionCount extends Disposable {
+export default class StatusFocus extends Disposable {
 	private readonly item: vscode.StatusBarItem;
 	private readonly docChangeListener = this._register(new DisposableValue());
 
@@ -38,25 +38,15 @@ export default class StatusSelectionCount extends Disposable {
 		trackDocument(registry.activeDocument);
 	}
 
-	update({ focused, selected }: ISelectionState): void {
-		if (focused === undefined && selected === 0) {
-			return;
-		}
-
+	update({ focused }: ISelectionState): void {
 		const nFocus = focused !== undefined ? numberFormat.format(focused) : undefined;
-		const nSelected = selected > 1 ? numberFormat.format(selected) : undefined;
-		if (nFocus && nSelected) {
-			this.item.text = vscode.l10n.t("Byte {0}/0x{1} ({2}/0x{3} selected)", nFocus, focused!.toString(16).toUpperCase(), nSelected, selected.toString(16).toUpperCase());
-		} else if (nSelected) {
-			this.item.text = vscode.l10n.t("{0}/0x{1} selected", nSelected, selected.toString(16).toUpperCase());
-		} else if (nFocus) {
-			this.item.text = vscode.l10n.t("Byte {0}/0x{1}", nFocus, focused!.toString(16).toUpperCase());
+		if (nFocus) {
+			this.item.text = vscode.l10n.t("{0}/0x{1}", nFocus, focused!.toString(16).toUpperCase());
+			this.item.show();
 		} else {
 			this.item.hide();
 			return;
 		}
-
-		this.item.show();
 	}
 
 	show() {

src/statusHoverAndSelection.ts

@@ -0,0 +1,79 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import * as vscode from "vscode";
+import { Disposable, DisposableValue } from "./dispose";
+import { HexDocument } from "./hexDocument";
+import { HexEditorRegistry } from "./hexEditorRegistry";
+
+const numberFormat = new Intl.NumberFormat();
+
+/**
+ * Displays the hovered byte and the selection count in a StatusBarItem
+ *
+ * @class StatusHoverAndSelection
+ */
+export default class StatusHoverAndSelection extends Disposable {
+	private readonly item: vscode.StatusBarItem;
+	private readonly docChangeListener = this._register(new DisposableValue());
+
+	constructor(registry: HexEditorRegistry) {
+		super();
+
+		this.item = this._register(
+			// Primary Badge, so appears first
+			vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 101),
+		);
+
+		const trackDocument = (doc: HexDocument | undefined) => {
+			if (doc) {
+				this._register(doc.onDidChangeHoverState(() => this.update(doc)));
+				this._register(doc.onDidChangeSelectionState(() => this.update(doc)));
+				this.update(doc);
+				this.show();
+			} else {
+				this.hide();
+			}
+		};
+
+		this._register(registry.onDidChangeActiveDocument(trackDocument));
+		trackDocument(registry.activeDocument);
+	}
+
+	update({ hoverState, selectionState }: HexDocument): void {
+		const { selected } = selectionState;
+		const nHovered = hoverState !== undefined ? numberFormat.format(hoverState) : undefined;
+		const nSelected = selected > 1 ? numberFormat.format(selected) : undefined;
+		if (nHovered && nSelected) {
+			this.item.text = vscode.l10n.t(
+				"{0}/0x{1} ({2}/0x{3} selected)",
+				nHovered,
+				hoverState!.toString(16).toUpperCase(),
+				nSelected,
+				selected!.toString(16).toUpperCase(),
+			);
+		} else if (nHovered) {
+			this.item.text = vscode.l10n.t("{0}/0x{1}", nHovered, hoverState!.toString(16).toUpperCase());
+		} else if (nSelected) {
+			this.item.text = vscode.l10n.t(
+				"{0}/0x{1} selected",
+				nSelected,
+				selected!.toString(16).toUpperCase(),
+			);
+		} else {
+			// Hiding the element creates a flashing effect so instead set it
+			// to an empty string
+			this.item.text = vscode.l10n.t("");
+		}
+
+		this.item.show();
+	}
+
+	show() {
+		this.item.show();
+	}
+
+	hide() {
+		this.item.hide();
+	}
+}