153 - Rows are grayed out fairly frequently when VSCode loses the focus (Gitlens side) (#2391)

* 153 - Rows are grayed out fairly frequently when VSCode loses the focus

* Replaced graph procedure "setContainerWindowFocused" to be an input property instead

* Fixed code formatting issues

* Moved "onDidChangeWindowState" code down into the show method

src/plus/webviews/graph/graphWebview.ts

@@ -101,7 +101,7 @@ import type {
 	UpdateColumnsParams,
 	UpdateRefsVisibilityParams,
 	UpdateSelectedRepositoryParams,
-	UpdateSelectionParams,
+	UpdateSelectionParams
 } from './protocol';
 import {
 	DidChangeAvatarsNotificationType,
@@ -113,6 +113,7 @@ import {
 	DidChangeRowsNotificationType,
 	DidChangeSelectionNotificationType,
 	DidChangeSubscriptionNotificationType,
+	DidChangeWindowFocusNotificationType,
 	DidChangeWorkingTreeNotificationType,
 	DidEnsureRowNotificationType,
 	DidFetchNotificationType,
@@ -201,6 +202,7 @@ export class GraphWebview extends WebviewBase {
 	private _lastFetchedDisposable: Disposable | undefined;
 
 	private trialBanner?: boolean;
+	private isWindowFocused: boolean = true;
 
 	constructor(container: Container) {
 		super(
@@ -256,6 +258,11 @@ export class GraphWebview extends WebviewBase {
 		);
 	}
 
+	protected override onWindowFocusChanged(focused: boolean): void {
+		this.isWindowFocused = focused;
+		void this.notifyDidChangeWindowFocus();
+	}
+
 	protected override get options(): WebviewPanelOptions & WebviewOptions {
 		return {
 			retainContextWhenHidden: true,
@@ -936,6 +943,18 @@ export class GraphWebview extends WebviewBase {
 		void this._notifyDidChangeStateDebounced();
 	}
 
+	@debug()
+	private async notifyDidChangeWindowFocus(): Promise<boolean> {
+		if (!this.isReady || !this.visible) {
+			this.addPendingIpcNotification(DidChangeWindowFocusNotificationType);
+			return false;
+		}
+
+		return this.notify(DidChangeWindowFocusNotificationType, {
+			focused: this.isWindowFocused,
+		});
+	}
+
 	private _notifyDidChangeAvatarsDebounced: Deferrable<GraphWebview['notifyDidChangeAvatars']> | undefined =
 		undefined;
 
@@ -1135,6 +1154,7 @@ export class GraphWebview extends WebviewBase {
 		[DidChangeSelectionNotificationType, this.notifyDidChangeSelection],
 		[DidChangeSubscriptionNotificationType, this.notifyDidChangeSubscription],
 		[DidChangeWorkingTreeNotificationType, this.notifyDidChangeWorkingTree],
+		[DidChangeWindowFocusNotificationType, this.notifyDidChangeWindowFocus],
 	]);
 
 	private addPendingIpcNotification(type: IpcNotificationType<any>, msg?: IpcMessage) {
@@ -1450,6 +1470,7 @@ export class GraphWebview extends WebviewBase {
 		const branch = await this.repository.getBranch();
 
 		return {
+			windowFocused: this.isWindowFocused,
 			trialBanner: this.trialBanner,
 			repositories: formatRepositories(this.container.git.openRepositories),
 			selectedRepository: this.repository.path,

src/plus/webviews/graph/protocol.ts

@@ -38,6 +38,7 @@ export type GraphMissingRefsMetadata = Record
 export type GraphPullRequestMetadata = PullRequestMetadata;
 
 export interface State {
+	windowFocused?: boolean,
 	repositories?: GraphRepository[];
 	selectedRepository?: string;
 	selectedRepositoryVisibility?: RepositoryVisibility;
@@ -248,6 +249,14 @@ export const DidChangeColumnsNotificationType = new IpcNotificationType
 	true,
 );
 
+export interface DidChangeWindowFocusParams {
+	focused: boolean;
+}
+export const DidChangeWindowFocusNotificationType = new IpcNotificationType<DidChangeWindowFocusParams>(
+	'graph/window/focus/didChange',
+	true,
+);
+
 export interface DidChangeRefsVisibilityParams {
 	hiddenRefs?: GraphHiddenRefs;
 }

src/webviews/apps/plus/graph/GraphWrapper.tsx

@@ -31,8 +31,7 @@ import type {
 	GraphSearchResultsError,
 	InternalNotificationType,
 	State,
-	UpdateStateCallback,
-} from '../../../../plus/webviews/graph/protocol';
+	UpdateStateCallback} from '../../../../plus/webviews/graph/protocol';
 import {
 	DidChangeAvatarsNotificationType,
 	DidChangeColumnsNotificationType,
@@ -42,6 +41,7 @@ import {
 	DidChangeRowsNotificationType,
 	DidChangeSelectionNotificationType,
 	DidChangeSubscriptionNotificationType,
+	DidChangeWindowFocusNotificationType,
 	DidChangeWorkingTreeNotificationType,
 	DidFetchNotificationType,
 	DidSearchNotificationType,
@@ -169,6 +169,7 @@ export function GraphWrapper({
 	const [styleProps, setStyleProps] = useState(state.theming);
 	const [branchName, setBranchName] = useState(state.branchName);
 	const [lastFetched, setLastFetched] = useState(state.lastFetched);
+	const [windowFocused, setWindowFocused] = useState(state.windowFocused);
 	// account
 	const [showAccount, setShowAccount] = useState(state.trialBanner);
 	const [isAccessAllowed, setIsAccessAllowed] = useState(state.allowed ?? false);
@@ -211,6 +212,9 @@ export function GraphWrapper({
 			case DidChangeAvatarsNotificationType:
 				setAvatars(state.avatars);
 				break;
+			case DidChangeWindowFocusNotificationType:
+				setWindowFocused(state.windowFocused);
+				break;
 			case DidChangeRefsMetadataNotificationType:
 				setRefsMetadata(state.refsMetadata);
 				break;
@@ -836,6 +840,7 @@ export function GraphWrapper({
 							scrollRowPadding={graphConfig?.scrollRowPadding}
 							showGhostRefsOnRowHover={graphConfig?.showGhostRefsOnRowHover}
 							showRemoteNamesOnRefs={graphConfig?.showRemoteNamesOnRefs}
+							isContainerWindowFocused={windowFocused}
 							isLoadingRows={isLoading}
 							isSelectedBySha={selectedRows}
 							nonce={nonce}

src/webviews/apps/plus/graph/graph.tsx

@@ -13,8 +13,7 @@ import type {
 	GraphRepository,
 	InternalNotificationType,
 	State,
-	UpdateStateCallback,
-} from '../../../../plus/webviews/graph/protocol';
+	UpdateStateCallback} from '../../../../plus/webviews/graph/protocol';
 import {
 	DidChangeAvatarsNotificationType,
 	DidChangeColumnsNotificationType,
@@ -25,6 +24,7 @@ import {
 	DidChangeRowsNotificationType,
 	DidChangeSelectionNotificationType,
 	DidChangeSubscriptionNotificationType,
+	DidChangeWindowFocusNotificationType,
 	DidChangeWorkingTreeNotificationType,
 	DidEnsureRowNotificationType,
 	DidFetchNotificationType,
@@ -144,6 +144,13 @@ export class GraphApp extends App {
 				});
 				break;
 
+			case DidChangeWindowFocusNotificationType.method:
+				onIpc(DidChangeWindowFocusNotificationType, msg, (params, type) => {
+					this.state.windowFocused = params.focused;
+					this.setState(this.state, type);
+				});
+				break;
+
 			case DidChangeColumnsNotificationType.method:
 				onIpc(DidChangeColumnsNotificationType, msg, (params, type) => {
 					this.state.columns = params.columns;

src/webviews/webviewBase.ts

@@ -4,6 +4,7 @@ import type {
 	WebviewPanel,
 	WebviewPanelOnDidChangeViewStateEvent,
 	WebviewPanelOptions,
+	WindowState,
 } from 'vscode';
 import { Disposable, Uri, ViewColumn, window, workspace } from 'vscode';
 import { getNonce } from '@env/crypto';
@@ -117,6 +118,7 @@ export abstract class WebviewBase implements Disposable {
 				this._panel.webview.onDidReceiveMessage(this.onMessageReceivedCore, this),
 				...(this.onInitializing?.() ?? []),
 				...(this.registerCommands?.() ?? []),
+				window.onDidChangeWindowState(this.onWindowStateChanged, this),
 			);
 
 			this._panel.webview.html = await this.getHtml(this._panel.webview);
@@ -137,6 +139,7 @@ export abstract class WebviewBase implements Disposable {
 	protected onActiveChanged?(active: boolean): void;
 	protected onFocusChanged?(focused: boolean): void;
 	protected onVisibilityChanged?(visible: boolean): void;
+	protected onWindowFocusChanged?(focused: boolean): void;
 
 	protected registerCommands?(): Disposable[];
 
@@ -145,6 +148,12 @@ export abstract class WebviewBase implements Disposable {
 	protected includeBody?(): string | Promise<string>;
 	protected includeEndOfBody?(): string | Promise<string>;
 
+	private onWindowStateChanged(e: WindowState) {
+		if (!this.visible) return;
+
+		this.onWindowFocusChanged?.(e.focused);
+	}
+
 	@debug()
 	protected async refresh(force?: boolean): Promise<void> {
 		if (this._panel == null) return;