#404 New context menu on all link elements (e.g. Issue Links, URL's in commit messages, author email addresses), enabling the URL to be easily copied to the clipboard.

Author: mhutchie

src/gitGraphView.ts

@@ -8,7 +8,7 @@ import { Logger } from './logger';
 import { RepoFileWatcher } from './repoFileWatcher';
 import { RepoManager } from './repoManager';
 import { ErrorInfo, GitConfigLocation, GitGraphViewInitialState, GitPushBranchMode, GitRepoSet, LoadGitGraphViewTo, RequestMessage, ResponseMessage, TabIconColourTheme } from './types';
-import { UNABLE_TO_FIND_GIT_MSG, UNCOMMITTED, archive, copyFilePathToClipboard, copyToClipboard, createPullRequest, getNonce, openExtensionSettings, openFile, showErrorMessage, viewDiff, viewFileAtRevision, viewScm } from './utils';
+import { UNABLE_TO_FIND_GIT_MSG, UNCOMMITTED, archive, copyFilePathToClipboard, copyToClipboard, createPullRequest, getNonce, openExtensionSettings, openExternalUrl, openFile, showErrorMessage, viewDiff, viewFileAtRevision, viewScm } from './utils';
 import { Disposable, toDisposable } from './utils/disposable';
 
 /**
@@ -458,6 +458,12 @@ export class GitGraphView extends Disposable {
 					error: await this.dataSource.openExternalDirDiff(msg.repo, msg.fromHash, msg.toHash, msg.isGui)
 				});
 				break;
+			case 'openExternalUrl':
+				this.sendMessage({
+					command: 'openExternalUrl',
+					error: await openExternalUrl(msg.url)
+				});
+				break;
 			case 'openFile':
 				this.sendMessage({
 					command: 'openFile',

src/types.ts

@@ -948,6 +948,14 @@ export interface ResponseOpenExternalDirDiff extends ResponseWithErrorInfo {
 	readonly command: 'openExternalDirDiff';
 }
 
+export interface RequestOpenExternalUrl extends BaseMessage {
+	readonly command: 'openExternalUrl';
+	readonly url: string;
+}
+export interface ResponseOpenExternalUrl extends ResponseWithErrorInfo {
+	readonly command: 'openExternalUrl';
+}
+
 export interface RequestOpenFile extends RepoRequest {
 	readonly command: 'openFile';
 	readonly filePath: string;
@@ -1198,6 +1206,7 @@ export type RequestMessage =
 	| RequestMerge
 	| RequestOpenExtensionSettings
 	| RequestOpenExternalDirDiff
+	| RequestOpenExternalUrl
 	| RequestOpenFile
 	| RequestOpenTerminal
 	| RequestPopStash
@@ -1257,6 +1266,7 @@ export type ResponseMessage =
 	| ResponseMerge
 	| ResponseOpenExtensionSettings
 	| ResponseOpenExternalDirDiff
+	| ResponseOpenExternalUrl
 	| ResponseOpenFile
 	| ResponseOpenTerminal
 	| ResponsePopStash

src/utils.ts

@@ -216,7 +216,7 @@ export function getRepoName(path: string) {
  * @param repo The path of the repository.
  * @param ref The reference of the revision to archive.
  * @param dataSource The DataSource instance that can be used to create the archive.
- * @returns The ErrorInfo from the executed command.
+ * @returns A promise resolving to the ErrorInfo of the executed command.
  */
 export function archive(repo: string, ref: string, dataSource: DataSource): Thenable<ErrorInfo> {
 	return vscode.window.showSaveDialog({
@@ -245,6 +245,7 @@ export function archive(repo: string, ref: string, dataSource: DataSource): Then
  * Copy the path of a file in a repository to the clipboard.
  * @param repo The repository the file is contained in.
  * @param filePath The relative path of the file within the repository.
+ * @returns A promise resolving to the ErrorInfo of the executed command.
  */
 export function copyFilePathToClipboard(repo: string, filePath: string) {
 	return copyToClipboard(path.join(repo, filePath));
@@ -253,6 +254,7 @@ export function copyFilePathToClipboard(repo: string, filePath: string) {
 /**
  * Copy a string to the clipboard.
  * @param text The string.
+ * @returns A promise resolving to the ErrorInfo of the executed command.
  */
 export function copyToClipboard(text: string): Thenable<ErrorInfo> {
 	return vscode.env.clipboard.writeText(text).then(
@@ -267,6 +269,7 @@ export function copyToClipboard(text: string): Thenable<ErrorInfo> {
  * @param sourceOwner The owner of the repository that is the source of the Pull Request.
  * @param sourceRepo The name of the repository that is the source of the Pull Request.
  * @param sourceBranch The source branch the Pull Request should be created from.
+ * @returns A promise resolving to the ErrorInfo of the executed command.
  */
 export function createPullRequest(config: PullRequestConfig, sourceOwner: string, sourceRepo: string, sourceBranch: string) {
 	let templateUrl;
@@ -294,14 +297,12 @@ export function createPullRequest(config: PullRequestConfig, sourceOwner: string
 
 	const url = templateUrl.replace(/\$([1-8])/g, (_, index) => urlFieldValues[parseInt(index) - 1]);
 
-	return vscode.env.openExternal(vscode.Uri.parse(url)).then(
-		() => null,
-		() => 'Visual Studio Code was unable to open the Pull Request URL: ' + url
-	);
+	return openExternalUrl(url, 'Pull Request URL');
 }
 
 /**
  * Open the Visual Studio Code Settings Editor to the Git Graph Extension Settings.
+ * @returns A promise resolving to the ErrorInfo of the executed command.
  */
 export function openExtensionSettings(): Thenable<ErrorInfo> {
 	return vscode.commands.executeCommand('workbench.action.openSettings', '@ext:mhutchie.git-graph').then(
@@ -310,10 +311,29 @@ export function openExtensionSettings(): Thenable<ErrorInfo> {
 	);
 }
 
+/**
+ * Open an External URL using the default application.
+ * @param url The URL for Visual Studio Code to open.
+ * @param type The type of URL being opened (defaults to "External URL").
+ * @returns A promise resolving to the ErrorInfo of the executed command.
+ */
+export function openExternalUrl(url: string, type: string = 'External URL'): Thenable<ErrorInfo> {
+	const getErrorMessage = () => 'Visual Studio Code was unable to open the ' + type + ': ' + url;
+	try {
+		return vscode.env.openExternal(vscode.Uri.parse(url)).then(
+			(success) => success ? null : getErrorMessage(),
+			getErrorMessage
+		);
+	} catch (_) {
+		return Promise.resolve(getErrorMessage());
+	}
+}
+
 /**
  * Open a file within a repository in Visual Studio Code.
  * @param repo The repository the file is contained in.
  * @param filePath The relative path of the file within the repository.
+ * @returns A promise resolving to the ErrorInfo of the executed command.
  */
 export function openFile(repo: string, filePath: string) {
 	return new Promise<ErrorInfo>(resolve => {
@@ -342,6 +362,7 @@ export function openFile(repo: string, filePath: string) {
  * @param oldFilePath The relative path of the left-side file within the repository.
  * @param newFilePath The relative path of the right-side file within the repository.
  * @param type The Git file status of the change.
+ * @returns A promise resolving to the ErrorInfo of the executed command.
  */
 export function viewDiff(repo: string, fromHash: string, toHash: string, oldFilePath: string, newFilePath: string, type: GitFileStatus) {
 	if (type !== GitFileStatus.Untracked) {
@@ -366,6 +387,13 @@ export function viewDiff(repo: string, fromHash: string, toHash: string, oldFile
 	}
 }
 
+/**
+ * Open a Visual Studio Code Editor (readonly) for a file a specific Git revision.
+ * @param repo The repository the file is contained in.
+ * @param hash The revision of the file.
+ * @param filePath The relative path of the file within the repository.
+ * @returns A promise resolving to the ErrorInfo of the executed command.
+ */
 export async function viewFileAtRevision(repo: string, hash: string, filePath: string) {
 	const pathComponents = filePath.split('/');
 	const title = abbrevCommit(hash) + ': ' + pathComponents[pathComponents.length - 1];
@@ -381,6 +409,7 @@ export async function viewFileAtRevision(repo: string, hash: string, filePath: s
 
 /**
  * Open the Visual Studio Code Source Control View.
+ * @returns A promise resolving to the ErrorInfo of the executed command.
  */
 export function viewScm(): Thenable<ErrorInfo> {
 	return vscode.commands.executeCommand('workbench.view.scm').then(

tests/utils.test.ts

@@ -24,7 +24,7 @@ import { DataSource } from '../src/dataSource';
 import { ExtensionState } from '../src/extensionState';
 import { Logger } from '../src/logger';
 import { GitFileStatus, PullRequestProvider } from '../src/types';
-import { GitExecutable, UNCOMMITTED, abbrevCommit, abbrevText, archive, constructIncompatibleGitVersionMessage, copyFilePathToClipboard, copyToClipboard, createPullRequest, evalPromises, findGit, getExtensionVersion, getGitExecutable, getGitExecutableFromPaths, getNonce, getPathFromStr, getPathFromUri, getRelativeTimeDiff, getRepoName, isGitAtLeastVersion, isPathInWorkspace, openExtensionSettings, openFile, openGitTerminal, pathWithTrailingSlash, realpath, resolveSpawnOutput, resolveToSymbolicPath, showErrorMessage, showInformationMessage, viewDiff, viewFileAtRevision, viewScm } from '../src/utils';
+import { GitExecutable, UNCOMMITTED, abbrevCommit, abbrevText, archive, constructIncompatibleGitVersionMessage, copyFilePathToClipboard, copyToClipboard, createPullRequest, evalPromises, findGit, getExtensionVersion, getGitExecutable, getGitExecutableFromPaths, getNonce, getPathFromStr, getPathFromUri, getRelativeTimeDiff, getRepoName, isGitAtLeastVersion, isPathInWorkspace, openExtensionSettings, openExternalUrl, openFile, openGitTerminal, pathWithTrailingSlash, realpath, resolveSpawnOutput, resolveToSymbolicPath, showErrorMessage, showInformationMessage, viewDiff, viewFileAtRevision, viewScm } from '../src/utils';
 import { EventEmitter } from '../src/utils/event';
 
 const extensionContext = vscode.mocks.extensionContext;
@@ -694,7 +694,7 @@ describe('copyToClipboard', () => {
 describe('createPullRequest', () => {
 	it('Should construct and open a BitBucket Pull Request Creation Url', async () => {
 		// Setup
-		vscode.env.openExternal.mockResolvedValueOnce(null);
+		vscode.env.openExternal.mockResolvedValueOnce(true);
 
 		// Run
 		const result = await createPullRequest({
@@ -718,7 +718,7 @@ describe('createPullRequest', () => {
 
 	it('Should construct and open a Custom Providers Pull Request Creation Url', async () => {
 		// Setup
-		vscode.env.openExternal.mockResolvedValueOnce(null);
+		vscode.env.openExternal.mockResolvedValueOnce(true);
 
 		// Run
 		const result = await createPullRequest({
@@ -745,7 +745,7 @@ describe('createPullRequest', () => {
 
 	it('Should construct and open a GitHub Pull Request Creation Url', async () => {
 		// Setup
-		vscode.env.openExternal.mockResolvedValueOnce(null);
+		vscode.env.openExternal.mockResolvedValueOnce(true);
 
 		// Run
 		const result = await createPullRequest({
@@ -769,7 +769,7 @@ describe('createPullRequest', () => {
 
 	it('Should construct and open a GitLab Pull Request Creation Url', async () => {
 		// Setup
-		vscode.env.openExternal.mockResolvedValueOnce(null);
+		vscode.env.openExternal.mockResolvedValueOnce(true);
 
 		// Run
 		const result = await createPullRequest({
@@ -793,7 +793,7 @@ describe('createPullRequest', () => {
 
 	it('Should construct and open a GitLab Pull Request Creation Url (without destProjectId)', async () => {
 		// Setup
-		vscode.env.openExternal.mockResolvedValueOnce(null);
+		vscode.env.openExternal.mockResolvedValueOnce(true);
 
 		// Run
 		const result = await createPullRequest({
@@ -864,6 +864,68 @@ describe('openExtensionSettings', () => {
 	});
 });
 
+describe('openExternalUrl', () => {
+	it('Should open the URL via Visual Studio Code', async () => {
+		// Setup
+		vscode.env.openExternal.mockResolvedValueOnce(true);
+
+		// Run
+		const result = await openExternalUrl('https://github.com/mhutchie/vscode-git-graph');
+
+		// Assert
+		expect(result).toBe(null);
+		expect(vscode.env.openExternal.mock.calls[0][0].toString()).toBe('https://github.com/mhutchie/vscode-git-graph');
+	});
+
+	it('Should return an error message if vscode was unable to open the url (vscode.env.openExternal resolves FALSE)', async () => {
+		// Setup
+		vscode.env.openExternal.mockResolvedValueOnce(false);
+
+		// Run
+		const result = await openExternalUrl('https://github.com/mhutchie/vscode-git-graph');
+
+		// Assert
+		expect(result).toBe('Visual Studio Code was unable to open the External URL: https://github.com/mhutchie/vscode-git-graph');
+	});
+
+	it('Should return an error message if vscode was unable to open the url (vscode.env.openExternal rejects)', async () => {
+		// Setup
+		vscode.env.openExternal.mockRejectedValueOnce(null);
+
+		// Run
+		const result = await openExternalUrl('https://github.com/mhutchie/vscode-git-graph');
+
+		// Assert
+		expect(result).toBe('Visual Studio Code was unable to open the External URL: https://github.com/mhutchie/vscode-git-graph');
+	});
+
+	it('Should return an error message if vscode was unable to parse the url', async () => {
+		// Setup
+		const spyOnParse = jest.spyOn(vscode.Uri, 'parse');
+		spyOnParse.mockImplementationOnce(() => {
+			throw new Error();
+		});
+
+		// Run
+		const result = await openExternalUrl('https://github.com/mhutchie/vscode-git-graph');
+
+		// Assert
+		expect(result).toBe('Visual Studio Code was unable to open the External URL: https://github.com/mhutchie/vscode-git-graph');
+		expect(vscode.env.openExternal).not.toHaveBeenCalled();
+	});
+
+	it('Should return an error message with a custom type', async () => {
+		// Setup
+		vscode.env.openExternal.mockRejectedValueOnce(null);
+
+		// Run
+		const result = await openExternalUrl('https://github.com/mhutchie/vscode-git-graph', 'Custom URL');
+
+		// Assert
+		expect(result).toBe('Visual Studio Code was unable to open the Custom URL: https://github.com/mhutchie/vscode-git-graph');
+	});
+});
+
 describe('openFile', () => {
 	it('Should open the file in vscode', async () => {
 		// Setup

web/contextMenu.ts

@@ -42,10 +42,10 @@ class ContextMenu {
 	 * @param target The target that the context menu was triggered on.
 	 * @param event The mouse event that triggered the context menu.
 	 * @param frameElem The HTML Element that the context menu should be rendered within (and be positioned relative to it's content).
-	 * @param blockUserInteractionElem An optional HTML Element that the user shouldn't be able to interact with while the context menu is open.
 	 * @param onClose An optional callback to be invoked when the context menu is closed.
+	 * @param className An optional class name to add to the context menu.
 	 */
-	public show(actions: ContextMenuActions, checked: boolean, target: ContextMenuTarget | null, event: MouseEvent, frameElem: HTMLElement, blockUserInteractionElem: HTMLElement | null = null, onClose: (() => void) | null = null) {
+	public show(actions: ContextMenuActions, checked: boolean, target: ContextMenuTarget | null, event: MouseEvent, frameElem: HTMLElement, onClose: (() => void) | null = null, className: string | null = null) {
 		let html = '', handlers: (() => void)[] = [], handlerId = 0;
 		this.close();
 
@@ -67,7 +67,7 @@ class ContextMenu {
 		if (handlers.length === 0) return; // No context menu actions are visible
 
 		const menu = document.createElement('ul');
-		menu.className = 'contextMenu' + (checked ? ' checked' : '');
+		menu.className = 'contextMenu' + (checked ? ' checked' : '') + (className !== null ? ' ' + className : '');
 		menu.style.opacity = '0';
 		menu.innerHTML = html;
 		frameElem.appendChild(menu);
@@ -98,10 +98,6 @@ class ContextMenu {
 		if (this.target !== null && this.target.type !== TargetType.Repo) {
 			alterClass(this.target.elem, CLASS_CONTEXT_MENU_ACTIVE, true);
 		}
-
-		if (blockUserInteractionElem !== null) {
-			alterClass(blockUserInteractionElem, CLASS_BLOCK_USER_INTERACTION, true);
-		}
 	}
 
 	/**
@@ -112,7 +108,6 @@ class ContextMenu {
 			this.elem.remove();
 			this.elem = null;
 		}
-		alterClassOfCollection(<HTMLCollectionOf<HTMLElement>>document.getElementsByClassName(CLASS_BLOCK_USER_INTERACTION), CLASS_BLOCK_USER_INTERACTION, false);
 		alterClassOfCollection(<HTMLCollectionOf<HTMLElement>>document.getElementsByClassName(CLASS_CONTEXT_MENU_ACTIVE), CLASS_CONTEXT_MENU_ACTIVE, false);
 		if (this.onClose !== null) {
 			this.onClose();

web/global.d.ts

@@ -34,8 +34,14 @@ declare global {
 		codeReview: GG.CodeReview | null;
 		lastViewedFile: string | null;
 		loading: boolean;
-		fileChangesScrollTop: number;
-		fileContextMenuOpen: number;
+		scrollTop: {
+			summary: number,
+			fileView: number
+		};
+		contextMenuOpen: {
+			summary: boolean,
+			fileView: number
+		};
 	}
 
 	interface WebViewState {