Updates context behavior - avoid multiple same context menus calling

Author: nzaytsev

src/webviews/apps/plus/home/components/active-work.ts

@@ -6,7 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { when } from 'lit/directives/when.js';
 import type { GitTrackingState } from '../../../../../git/models/branch';
 import { createWebviewCommandLink } from '../../../../../system/webview';
-import type { GetOverviewBranch, OpenInGraphParams, State } from '../../../../home/protocol';
+import type { BranchRef, GetOverviewBranch, OpenInGraphParams, State } from '../../../../home/protocol';
 import { stateContext } from '../../../home/context';
 import type { ActionList } from '../../../shared/components/actions/action-list';
 import { ipcContext } from '../../../shared/context';
@@ -209,7 +209,30 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 		`;
 	}
 
-	private prevAttr = JSON.parse(document.body.getAttribute('data-vscode-context') ?? '{}');
+	private applyContext(context: object) {
+		const prevContext = JSON.parse(document.body.getAttribute('data-vscode-context') ?? '{}');
+		document.body.setAttribute(
+			'data-vscode-context',
+			JSON.stringify({
+				...prevContext,
+				...context,
+			}),
+		);
+		setTimeout(() => {
+			document.body.setAttribute('data-vscode-context', JSON.stringify(prevContext));
+		});
+	}
+
+	private handleBranchContext(branchRefs: BranchRef, e: typeof ActionList.OpenContextMenuEvent) {
+		let context = 'gitlens:home';
+		e.detail.items.forEach(x => {
+			if (x.href) {
+				context += `+${x.href}`;
+			}
+		});
+		// clear context immediatelly after the contextmenu is opened to avoid randomly clicked contextmenu being filled
+		this.applyContext({ webviewItem: context, ...branchRefs, type: 'branch' });
+	}
 
 	private renderActions(branch: GetOverviewBranch, repo: string) {
 		const branchRefs = {
@@ -242,27 +265,7 @@ export class GlActiveWork extends SignalWatcher(LitElement) {
 			return nothing;
 		}
 		return html`<action-list
-			@open-actions-menu=${(e: typeof ActionList.OpenContextMenuEvent) => {
-				this.prevAttr = JSON.parse(document.body.getAttribute('data-vscode-context') ?? '{}');
-				let context = 'gitlens:home';
-				e.detail.items.forEach(x => {
-					if (x.href) {
-						context += `+${x.href}`;
-					}
-				});
-				document.body.setAttribute(
-					'data-vscode-context',
-					JSON.stringify({
-						...this.prevAttr,
-						webviewItem: context,
-						...branchRefs,
-						type: 'branch',
-					}),
-				);
-			}}
-			@close-actions-menu=${() => {
-				document.body.setAttribute('data-vscode-context', JSON.stringify(this.prevAttr));
-			}}
+			@open-actions-menu=${this.handleBranchContext.bind(this, branchRefs)}
 			limit=${3}
 			.items=${actions}
 			class="branch-item__actions"

src/webviews/apps/plus/home/components/overview.ts

@@ -92,7 +92,31 @@ export class GlOverview extends SignalWatcher(LitElement) {
 		});
 	}
 
-	private prevAttr = JSON.parse(document.body.getAttribute('data-vscode-context') ?? '{}');
+	// TODO: can be moved to a separate function (maybe for home scope only)
+	private applyContext(context: object) {
+		const prevContext = JSON.parse(document.body.getAttribute('data-vscode-context') ?? '{}');
+		document.body.setAttribute(
+			'data-vscode-context',
+			JSON.stringify({
+				...prevContext,
+				...context,
+			}),
+		);
+		// clear context immediatelly after the contextmenu is opened to avoid randomly clicked contextmenu being filled
+		setTimeout(() => {
+			document.body.setAttribute('data-vscode-context', JSON.stringify(prevContext));
+		});
+	}
+
+	private handleBranchContext(e: typeof GlBranchSection.OpenContextMenuEvent) {
+		let context = 'gitlens:home';
+		e.detail.items.forEach(x => {
+			if (x.href) {
+				context += `+${x.href}`;
+			}
+		});
+		this.applyContext({ webviewItem: context, ...e.detail.branchRefs, type: 'branch' });
+	}
 
 	private renderComplete(overview: Overview, isFetching = false) {
 		if (overview == null) return nothing;
@@ -103,27 +127,7 @@ export class GlOverview extends SignalWatcher(LitElement) {
 				.isFetching=${isFetching}
 				.repo=${repository.path}
 				.branches=${repository.branches.recent}
-				@branch-context-opened=${(e: typeof GlBranchSection.OpenContextMenuEvent) => {
-					this.prevAttr = JSON.parse(document.body.getAttribute('data-vscode-context') ?? '{}');
-					let context = 'gitlens:home';
-					e.detail.items.forEach(x => {
-						if (x.href) {
-							context += `+${x.href}`;
-						}
-					});
-					document.body.setAttribute(
-						'data-vscode-context',
-						JSON.stringify({
-							...this.prevAttr,
-							webviewItem: context,
-							...e.detail.branchRefs,
-							type: 'branch',
-						}),
-					);
-				}}
-				@branch-context-closed=${() => {
-					document.body.setAttribute('data-vscode-context', JSON.stringify(this.prevAttr));
-				}}
+				@branch-context-opened=${this.handleBranchContext}
 			>
 				<gl-branch-threshold-filter
 					slot="heading-actions"

src/webviews/apps/shared/components/actions/action-list.ts

@@ -48,6 +48,7 @@ export class ActionList extends LitElement {
 		super.disconnectedCallback();
 	}
 
+	/** is used to remove tooltip under the context menu */
 	@state()
 	private open = false;
 
@@ -58,7 +59,6 @@ export class ActionList extends LitElement {
 		e.preventDefault();
 
 		this.open = true;
-
 		const event = new CustomEvent('open-actions-menu', {
 			detail: {
 				items: this.items
@@ -81,9 +81,8 @@ export class ActionList extends LitElement {
 		});
 		this.dispatchEvent(contextMenuEvent);
 		this.modifier = undefined;
+
 		const handleClick = () => {
-			const ev = new CustomEvent('close-actions-menu');
-			this.dispatchEvent(ev);
 			this.open = false;
 			window.removeEventListener('keyup', handleClick);
 			window.removeEventListener('mousedown', handleClick);
@@ -99,7 +98,6 @@ export class ActionList extends LitElement {
 	}
 
 	private renderMoreOptions(from: number) {
-		console.log('render action', this.open);
 		return html`
 			<action-item
 				icon="more"
@@ -137,6 +135,7 @@ export class ActionList extends LitElement {
 		`;
 	}
 
+	// TODO it would be fine to think about hover-to-focus behavior for all places that use this component
 	private handleKeydown(e: KeyboardEvent) {
 		if (this.modifier) {
 			return;