Adds Open Repo on Remote button to Graph

images/icons/provider-azdo.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M11.853 4.313l.023.018v7.743l-9.419-1.432 3.947 4.719v-1.898l5.406 1.898 3.53-3V3.67l-3.487.644z"/><path d="M2.456 6.05l9.397-1.737L7.353 1v1.544l-4.897 1.94L1 6.383v4.037l1.457.223-.001-.002V6.05z"/></svg>

images/icons/provider-bitbucket.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M1.217.7A.45.45 0 0 1 1.41.66v.01h13.18a.451.451 0 0 1 .45.53l-.608 3.72H5.75l.8 4.15h2.94l.658-3.9h4.244l-1.272 7.78a.45.45 0 0 1-.44.38h-9.2a.61.61 0 0 1-.6-.51L.96 1.19A.45.45 0 0 1 1.217.7Z"/></svg>

images/icons/provider-gerrit.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M3 4.23C3 3.552 3.551 3 4.23 3h9.847c.68 0 1.23.551 1.23 1.23v9.847c0 .68-.55 1.23-1.23 1.23H4.23A1.23 1.23 0 0 1 3 14.078V4.23Zm5.54 1.847H4.848v1.23H8.54v-1.23Zm1.23 0v1.23h3.692v-1.23H9.77Zm-3.692 4.308h-1.23v1.23h1.23v1.231H7.31v-1.23H8.54v-1.231H7.31V9.154H6.077v1.23Zm3.692 0v1.23H11v1.231h1.231v-1.23h1.23v-1.231h-1.23V9.154h-1.23v1.23H9.77Z"/><path fill-opacity=".5" d="M12.307 1.23c0-.679-.55-1.23-1.23-1.23H1.23C.551 0 0 .55 0 1.23v9.847a1.23 1.23 0 0 0 1.23 1.231h2.463V4.923c0-.68.55-1.231 1.23-1.231h7.384V1.23Z"/></svg>

images/icons/provider-gitea.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M8.152 8.963a.402.402 0 0 0-.36.565c.037.08.099.146.177.188a.4.4 0 0 0 .506-.12.402.402 0 0 0-.04-.514l.534-1.094c.046.004.093 0 .138-.011.092-.02.158-.08.158-.08.203.087.401.187.593.298.07.039.127.096.167.165.042.122-.043.332-.043.332-.05.169-.41.904-.41.904a.404.404 0 0 0-.394.278.398.398 0 1 0 .675-.147c.043-.082.083-.164.125-.251.11-.232.3-.677.3-.677.02-.038.128-.23.06-.475a.595.595 0 0 0-.28-.372 5.228 5.228 0 0 0-.65-.338s0-.091-.025-.158a.401.401 0 0 0-.086-.14c.104-.217.209-.43.314-.646l-.272-.136-.323.657a.4.4 0 0 0-.316.65l-.548 1.122Zm6.59-5.128c-.092-.092-.214-.09-.214-.09s-2.61.147-3.962.179c-.296.006-.59.013-.882.015v2.61l-.37-.176-.002-2.432a49.858 49.858 0 0 1-1.986-.049s-3.15-.158-3.492-.189c-.22-.013-.502-.047-.87.034-.193.04-.745.164-1.197.599-1.002.893-.746 2.314-.715 2.527.038.26.154.985.706 1.615 1.02 1.25 3.216 1.22 3.216 1.22s.27.644.68 1.236c.558.738 1.13 1.312 1.687 1.381l4.207-.002s.267.002.63-.23c.312-.189.59-.52.59-.52s.288-.308.689-1.01c.122-.215.225-.425.314-.623 0 0 1.229-2.608 1.229-5.147-.024-.768-.214-.904-.258-.948ZM3.67 8.38c-.577-.19-.822-.416-.822-.416s-.425-.299-.64-.887c-.366-.984-.03-1.586-.03-1.586s.187-.5.857-.668c.308-.082.69-.069.69-.069s.159 1.323.35 2.098c.16.65.553 1.73.553 1.73s-.582-.068-.958-.202Zm6.688 2.396s-.136.323-.437.343c-.13.01-.23-.026-.23-.026l-.117-.047L7.06 9.82s-.243-.127-.286-.348c-.05-.18.06-.403.06-.403l1.21-2.492s.107-.216.272-.29a.497.497 0 0 1 .1-.033c.18-.046.4.063.4.063l2.466 1.196s.28.127.34.36a.612.612 0 0 1-.04.384c-.14.342-1.224 2.518-1.224 2.518v.001Z"/></svg>

images/icons/provider-github.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M7.938 1a6.936 6.936 0 0 0-2.194 13.519c.347.06.477-.147.477-.33 0-.164-.009-.71-.009-1.292-1.743.321-2.194-.424-2.332-.815-.078-.2-.417-.815-.712-.98-.242-.13-.59-.45-.008-.46.546-.008.936.504 1.066.712.625 1.05 1.622.754 2.021.572.06-.45.243-.754.442-.928-1.543-.173-3.156-.771-3.156-3.425a2.7 2.7 0 0 1 .71-1.865c-.069-.173-.311-.884.07-1.838 0 0 .581-.182 1.908.711a6.438 6.438 0 0 1 1.734-.234c.59 0 1.18.078 1.735.234 1.327-.902 1.908-.711 1.908-.711.381.954.138 1.665.069 1.838.442.486.711 1.102.711 1.865 0 2.662-1.622 3.252-3.165 3.425.251.217.468.633.468 1.284 0 .928-.009 1.673-.009 1.908 0 .182.13.398.477.33a6.949 6.949 0 0 0 4.2-9.238A6.935 6.935 0 0 0 7.937 1z"/></svg>

images/icons/provider-gitlab.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="m4.953 13.57 1.638 1.242.997.756a.675.675 0 0 0 .813 0l.997-.755 1.641-1.243-3.046-2.301-3.04 2.301Z"/><path fill-opacity=".75" d="m15.708 6.332.023.057a4.044 4.044 0 0 1-1.335 4.676l-.01.007-3.336 2.498-3.046-2.301 4.777-3.62a7.374 7.374 0 0 1 2.927-1.317ZM3.218 7.652l4.786 3.617-3.052 2.301-3.318-2.483-.02-.015-.007-.006a4.046 4.046 0 0 1-1.34-4.673l.023-.057c1.06.218 2.06.667 2.928 1.316Z"/><path fill-opacity=".55" d="M15.709 6.332a7.375 7.375 0 0 0-2.928 1.317l-4.777 3.62-4.786-3.617A7.356 7.356 0 0 0 .29 6.336L2.467.656a.577.577 0 0 1 1.088.059l1.47 4.501h5.95l1.47-4.5a.57.57 0 0 1 .524-.418.568.568 0 0 1 .565.359l2.175 5.675ZM8.004 11.269a6275.87 6275.87 0 0 0 3.041 2.298l-.005.003L8 11.273l.004-.004ZM4.952 13.57l.58-.438-.578.438 1.612 1.223-1.614-1.223Z"/></svg>

images/icons/template/mapping.json

@@ -29,5 +29,11 @@
   "list-auto": 61722,
   "arrow-up-force": 61723,
   "pinned-filled": 61724,
-  "clock": 61725
+  "clock": 61725,
+  "provider-azdo": 61726,
+  "provider-bitbucket": 61727,
+  "provider-gerrit": 61728,
+  "provider-gitea": 61729,
+  "provider-github": 61730,
+  "provider-gitlab": 61731
 }

package.json

@@ -7508,6 +7508,48 @@
 					"fontPath": "dist/glicons.woff2",
 					"fontCharacter": "\\f11d"
 				}
+			},
+			"gitlens-provider-azdo": {
+				"description": "provider-azdo icon",
+				"default": {
+					"fontPath": "dist/glicons.woff2",
+					"fontCharacter": "\\f11e"
+				}
+			},
+			"gitlens-provider-bitbucket": {
+				"description": "provider-bitbucket icon",
+				"default": {
+					"fontPath": "dist/glicons.woff2",
+					"fontCharacter": "\\f11f"
+				}
+			},
+			"gitlens-provider-gerrit": {
+				"description": "provider-gerrit icon",
+				"default": {
+					"fontPath": "dist/glicons.woff2",
+					"fontCharacter": "\\f120"
+				}
+			},
+			"gitlens-provider-gitea": {
+				"description": "provider-gitea icon",
+				"default": {
+					"fontPath": "dist/glicons.woff2",
+					"fontCharacter": "\\f121"
+				}
+			},
+			"gitlens-provider-github": {
+				"description": "provider-github icon",
+				"default": {
+					"fontPath": "dist/glicons.woff2",
+					"fontCharacter": "\\f122"
+				}
+			},
+			"gitlens-provider-gitlab": {
+				"description": "provider-gitlab icon",
+				"default": {
+					"fontPath": "dist/glicons.woff2",
+					"fontCharacter": "\\f123"
+				}
 			}
 		},
 		"menus": {

src/plus/webviews/graph/graphWebview.ts

@@ -1792,7 +1792,11 @@ export class GraphWebviewProvider implements WebviewProvider {
 
 				const remote = await branch.getRemote();
 				if (remote?.provider != null) {
-					branchState.provider = remote.provider.name;
+					branchState.provider = {
+						name: remote.provider.name,
+						icon: remote.provider.icon === 'remote' ? 'cloud' : remote.provider.icon,
+						url: remote.provider.url({ type: RemoteResourceType.Repo }),
+					};
 				}
 			}
 		}

src/plus/webviews/graph/protocol.ts

@@ -124,7 +124,11 @@ export interface State {
 
 export interface BranchState extends GitTrackingState {
 	upstream?: string;
-	provider?: string;
+	provider?: {
+		name: string;
+		icon?: string;
+		url?: string;
+	};
 }
 
 export type GraphWorkingTreeStats = WorkDirStats;

src/webviews/apps/commitDetails/commitDetails.html

@@ -258,7 +258,7 @@
 			@font-face {
 				font-family: 'glicons';
 				font-display: block;
-				src: url('#{root}/dist/glicons.woff2?bee7d3595dedb7062d58fb94d382c713') format('woff2');
+				src: url('#{root}/dist/glicons.woff2?33c8fcd4948539e9758d0430426d7bdc') format('woff2');
 			}
 		</style>
 	</body>

src/webviews/apps/plus/focus/focus.html

@@ -193,7 +193,7 @@
 			@font-face {
 				font-family: 'glicons';
 				font-display: block;
-				src: url('#{root}/dist/glicons.woff2?bee7d3595dedb7062d58fb94d382c713') format('woff2');
+				src: url('#{root}/dist/glicons.woff2?33c8fcd4948539e9758d0430426d7bdc') format('woff2');
 			}
 		</style>
 	</body>

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

@@ -1115,7 +1115,7 @@ export function GraphWrapper({
 			isBehind = branchState.behind > 0;
 			isAhead = branchState.ahead > 0;
 			const branchPrefix = `Branch ${branchName} is`;
-			remote = `${branchState.upstream}${branchState.provider ? ` on ${branchState.provider}` : ''}`;
+			remote = `${branchState.upstream}${branchState.provider?.name ? ` on ${branchState.provider?.name}` : ''}`;
 			if (isBehind) {
 				action = 'command:gitlens.graph.pull';
 				icon = 'arrow-down';
@@ -1179,11 +1179,30 @@ export function GraphWrapper({
 			{renderAlertContent()}
 			<header className="titlebar graph-app__header">
 				<div className="titlebar__row titlebar__row--wrap">
+					{repo && branchState?.provider?.url && (
+						<a
+							href={branchState.provider.url}
+							className="action-button"
+							style={{ marginRight: '-0.5rem' }}
+							title={`Open Repository on ${branchState.provider.name}`}
+							aria-label={`Open Repository on ${branchState.provider.name}`}
+						>
+							<span
+								className={
+									branchState.provider.icon === 'cloud'
+										? 'codicon codicon-cloud action-button__icon'
+										: `glicon glicon-provider-${branchState.provider.icon} action-button__icon`
+								}
+								aria-hidden="true"
+							></span>
+						</a>
+					)}
 					<button
 						type="button"
 						className="action-button"
 						slot="trigger"
 						title="Switch to Another Repository..."
+						aria-label="Switch to Another Repository..."
 						disabled={repos.length < 2}
 						onClick={() => handleChooseRepository()}
 					>
@@ -1204,6 +1223,7 @@ export function GraphWrapper({
 								href="command:gitlens.graph.switchToAnotherBranch"
 								className="action-button"
 								title="Switch to Another Branch..."
+								aria-label="Switch to Another Branch..."
 							>
 								{branchName}
 								<span

src/webviews/apps/plus/graph/graph.html

@@ -25,7 +25,7 @@
 			@font-face {
 				font-family: 'glicons';
 				font-display: block;
-				src: url('#{root}/dist/glicons.woff2?bee7d3595dedb7062d58fb94d382c713') format('woff2');
+				src: url('#{root}/dist/glicons.woff2?33c8fcd4948539e9758d0430426d7bdc') format('woff2');
 			}
 		</style>
 	</body>

src/webviews/apps/plus/graph/graph.scss

@@ -227,16 +227,12 @@ button:not([disabled]),
 		text-decoration: none;
 	}
 
-	.codicon[class*='codicon-'] {
+	.codicon[class*='codicon-'],
+	.glicon[class*='glicon-'] {
 		line-height: 2.2rem;
 		vertical-align: bottom;
 	}
 
-	&__icon:not(.codicon) {
-		display: inline-block;
-		width: 1.6rem;
-	}
-
 	&__pill {
 		.is-ahead & {
 			background-color: var(--branch-status-ahead-pill-background);
@@ -758,7 +754,7 @@ button:not([disabled]),
 			grid-auto-flow: column;
 			white-space: nowrap;
 			justify-content: start;
-			grid-template-columns: min-content min-content min-content min-content minmax(min-content, 1fr);
+			grid-template-columns: min-content min-content min-content min-content min-content minmax(min-content, 1fr);
 		}
 	}
 

src/webviews/apps/plus/timeline/timeline.html

@@ -73,7 +73,7 @@
 			@font-face {
 				font-family: 'glicons';
 				font-display: block;
-				src: url('#{root}/dist/glicons.woff2?bee7d3595dedb7062d58fb94d382c713') format('woff2');
+				src: url('#{root}/dist/glicons.woff2?33c8fcd4948539e9758d0430426d7bdc') format('woff2');
 			}
 		</style>
 	</body>

src/webviews/apps/shared/glicons.scss

@@ -6,7 +6,7 @@ Must be placed at the end of body in the HTML file of any webview that needs it
 	@font-face {
 		font-family: 'glicons';
 		font-display: block;
-		src: url("#{root}/dist/glicons.woff2?bee7d3595dedb7062d58fb94d382c713") format("woff2");
+		src: url("#{root}/dist/glicons.woff2?495b1efe1f760fa9e4da234675d2bbe6") format("woff2");
 	}
 </style>
 */
@@ -152,3 +152,21 @@ Must be placed at the end of body in the HTML file of any webview that needs it
 .glicon-clock:before {
 	content: '\f11d';
 }
+.glicon-provider-azdo:before {
+	content: '\f11e';
+}
+.glicon-provider-bitbucket:before {
+	content: '\f11f';
+}
+.glicon-provider-gerrit:before {
+	content: '\f120';
+}
+.glicon-provider-gitea:before {
+	content: '\f121';
+}
+.glicon-provider-github:before {
+	content: '\f122';
+}
+.glicon-provider-gitlab:before {
+	content: '\f123';
+}