Adds experimental support to show the Graph in a view

- Controlled by the `gitlens.graph.experimental.location` setting

CHANGELOG.md

@@ -6,6 +6,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+- Adds experimental support to show the _Commit Graph_ in the side bar, secondary side bar, or panel
+  - Adds a `gitlens.graph.experimental.location` setting to specify the location in which the _Commit Graph_ will be shown
+    - `tab` - Shows the _Commit Graph_ in a tab in the editor area
+    - `view` - Shows the _Commit Graph_ in the side bar and can be dragged and dropped into any side bar, secondary side bar, or panel locations
+
 ### Changed
 
 - Changes _Open Associated Pull Request_ command to support opening associated pull requests with the current branch or the HEAD commit if no branch association was found — closes [#2559](https://github.com/gitkraken/vscode-gitlens/issues/2559)

package.json

@@ -75,8 +75,20 @@
 		"onCommand:gitlens.plus.manage",
 		"onCommand:gitlens.plus.purchase",
 		"onCommand:gitlens.getStarted",
-		"onCommand:gitlens.showGraphPage",
+		"onCommand:gitlens.showBranchesView",
+		"onCommand:gitlens.showCommitDetailsView",
+		"onCommand:gitlens.showCommitsView",
+		"onCommand:gitlens.showContributorsView",
+		"onCommand:gitlens.showFileHistoryView",
 		"onCommand:gitlens.showFocusPage",
+		"onCommand:gitlens.showGraph",
+		"onCommand:gitlens.showGraphPage",
+		"onCommand:gitlens.showGraphView",
+		"onCommand:gitlens.showHomeView",
+		"onCommand:gitlens.showLineHistoryView",
+		"onCommand:gitlens.showRemotesView",
+		"onCommand:gitlens.showRepositoriesView",
+		"onCommand:gitlens.showSearchAndCompareView",
 		"onCommand:gitlens.showSettingsPage",
 		"onCommand:gitlens.showSettingsPage#views",
 		"onCommand:gitlens.showSettingsPage#autolinks",
@@ -92,20 +104,10 @@
 		"onCommand:gitlens.showSettingsPage#tags-view",
 		"onCommand:gitlens.showSettingsPage#worktrees-view",
 		"onCommand:gitlens.showSettingsPage#commit-graph",
-		"onCommand:gitlens.showWelcomePage",
-		"onCommand:gitlens.showBranchesView",
-		"onCommand:gitlens.showCommitDetailsView",
-		"onCommand:gitlens.showCommitsView",
-		"onCommand:gitlens.showContributorsView",
-		"onCommand:gitlens.showFileHistoryView",
-		"onCommand:gitlens.showHomeView",
-		"onCommand:gitlens.showLineHistoryView",
-		"onCommand:gitlens.showRemotesView",
-		"onCommand:gitlens.showRepositoriesView",
-		"onCommand:gitlens.showSearchAndCompareView",
 		"onCommand:gitlens.showStashesView",
 		"onCommand:gitlens.showTagsView",
 		"onCommand:gitlens.showTimelineView",
+		"onCommand:gitlens.showWelcomePage",
 		"onCommand:gitlens.showWorktreesView",
 		"onCommand:gitlens.compareWith",
 		"onCommand:gitlens.compareHeadWith",
@@ -2380,7 +2382,22 @@
 						"default": true,
 						"markdownDescription": "Specifies whether to show the _Commit Graph_ in the status bar",
 						"scope": "window",
-						"order": 100
+						"order": 50
+					},
+					"gitlens.graph.experimental.location": {
+						"type": "string",
+						"default": "tab",
+						"enum": [
+							"tab",
+							"view"
+						],
+						"enumDescriptions": [
+							"Shows the Commit Graph in an editor tab",
+							"Shows the Commit Graph in a view (side bar, panel, etc)"
+						],
+						"markdownDescription": "Specifies the location in which the _Commit Graph_ will be shown",
+						"scope": "window",
+						"order": 99
 					},
 					"gitlens.graph.experimental.minimap.enabled": {
 						"type": "boolean",
@@ -4503,22 +4520,84 @@
 				"category": "GitLens"
 			},
 			{
+				"command": "gitlens.showBranchesView",
+				"title": "Show Branches View",
+				"category": "GitLens"
+			},
+			{
+				"command": "gitlens.showCommitDetailsView",
+				"title": "Show Commit Details View",
+				"category": "GitLens"
+			},
+			{
+				"command": "gitlens.showCommitsView",
+				"title": "Show Commits View",
+				"category": "GitLens"
+			},
+			{
+				"command": "gitlens.showContributorsView",
+				"title": "Show Contributors View",
+				"category": "GitLens"
+			},
+			{
+				"command": "gitlens.showFileHistoryView",
+				"title": "Show File History View",
+				"category": "GitLens"
+			},
+			{
+				"command": "gitlens.showFocusPage",
+				"title": "Show Focus View",
+				"category": "GitLens+",
+				"icon": "$(layers)"
+			},
+			{
+				"command": "gitlens.showGraph",
+				"title": "Show Commit Graph",
+				"category": "GitLens+",
+				"icon": "$(gitlens-graph)"
+			},
+			{
 				"command": "gitlens.showGraphPage",
 				"title": "Show Commit Graph",
 				"category": "GitLens+",
 				"icon": "$(gitlens-graph)"
 			},
 			{
+				"command": "gitlens.showGraphView",
+				"title": "Show Commit Graph View",
+				"category": "GitLens+",
+				"icon": "$(gitlens-graph)"
+			},
+			{
+				"command": "gitlens.showHomeView",
+				"title": "Show Home View",
+				"category": "GitLens"
+			},
+			{
 				"command": "gitlens.showInCommitGraph",
 				"title": "Open in Commit Graph",
 				"category": "GitLens+",
 				"icon": "$(gitlens-graph)"
 			},
 			{
-				"command": "gitlens.showFocusPage",
-				"title": "Show Focus View",
-				"category": "GitLens+",
-				"icon": "$(layers)"
+				"command": "gitlens.showLineHistoryView",
+				"title": "Show Line History View",
+				"category": "GitLens"
+			},
+			{
+				"command": "gitlens.showRemotesView",
+				"title": "Show Remotes View",
+				"category": "GitLens"
+			},
+			{
+				"command": "gitlens.showRepositoriesView",
+				"title": "Show Repositories View",
+				"category": "GitLens"
+			},
+			{
+				"command": "gitlens.showSearchAndCompareView",
+				"title": "Show Search And Compare Commits View",
+				"category": "GitLens"
 			},
 			{
 				"command": "gitlens.showSettingsPage",
@@ -4617,67 +4696,6 @@
 				"icon": "$(gitlens-history)"
 			},
 			{
-				"command": "gitlens.refreshTimelinePage",
-				"title": "Refresh",
-				"category": "GitLens",
-				"icon": "$(refresh)"
-			},
-			{
-				"command": "gitlens.showWelcomePage",
-				"title": "Welcome (Quick Setup)",
-				"category": "GitLens"
-			},
-			{
-				"command": "gitlens.showBranchesView",
-				"title": "Show Branches View",
-				"category": "GitLens"
-			},
-			{
-				"command": "gitlens.showCommitDetailsView",
-				"title": "Show Commit Details View",
-				"category": "GitLens"
-			},
-			{
-				"command": "gitlens.showCommitsView",
-				"title": "Show Commits View",
-				"category": "GitLens"
-			},
-			{
-				"command": "gitlens.showContributorsView",
-				"title": "Show Contributors View",
-				"category": "GitLens"
-			},
-			{
-				"command": "gitlens.showFileHistoryView",
-				"title": "Show File History View",
-				"category": "GitLens"
-			},
-			{
-				"command": "gitlens.showHomeView",
-				"title": "Show Home View",
-				"category": "GitLens"
-			},
-			{
-				"command": "gitlens.showLineHistoryView",
-				"title": "Show Line History View",
-				"category": "GitLens"
-			},
-			{
-				"command": "gitlens.showRemotesView",
-				"title": "Show Remotes View",
-				"category": "GitLens"
-			},
-			{
-				"command": "gitlens.showRepositoriesView",
-				"title": "Show Repositories View",
-				"category": "GitLens"
-			},
-			{
-				"command": "gitlens.showSearchAndCompareView",
-				"title": "Show Search And Compare Commits View",
-				"category": "GitLens"
-			},
-			{
 				"command": "gitlens.showStashesView",
 				"title": "Show Stashes View",
 				"category": "GitLens"
@@ -4693,6 +4711,11 @@
 				"category": "GitLens+"
 			},
 			{
+				"command": "gitlens.showWelcomePage",
+				"title": "Welcome (Quick Setup)",
+				"category": "GitLens"
+			},
+			{
 				"command": "gitlens.showWorktreesView",
 				"title": "Show Worktrees View",
 				"category": "GitLens+"
@@ -6845,6 +6868,12 @@
 				"category": "GitLens"
 			},
 			{
+				"command": "gitlens.focus.refresh",
+				"title": "Refresh",
+				"category": "GitLens",
+				"icon": "$(refresh)"
+			},
+			{
 				"command": "gitlens.graph.push",
 				"title": "Push",
 				"category": "GitLens",
@@ -6903,12 +6932,6 @@
 				"icon": "$(copy)"
 			},
 			{
-				"command": "gitlens.focus.refresh",
-				"title": "Refresh",
-				"category": "GitLens",
-				"icon": "$(refresh)"
-			},
-			{
 				"command": "gitlens.graph.copyRemoteBranchUrl",
 				"title": "Copy Remote Branch URL",
 				"category": "GitLens",
@@ -7203,6 +7226,12 @@
 				"command": "gitlens.graph.columnChangesOff",
 				"title": "Hide Changes",
 				"category": "GitLens"
+			},
+			{
+				"command": "gitlens.timeline.refresh",
+				"title": "Refresh",
+				"category": "GitLens",
+				"icon": "$(refresh)"
 			}
 		],
 		"icons": {
@@ -7463,7 +7492,47 @@
 					"when": "gitlens:plus"
 				},
 				{
+					"command": "gitlens.timeline.refresh",
+					"when": "false"
+				},
+				{
+					"command": "gitlens.showBranchesView",
+					"when": "gitlens:enabled"
+				},
+				{
+					"command": "gitlens.showCommitDetailsView",
+					"when": "gitlens:enabled"
+				},
+				{
+					"command": "gitlens.showCommitsView",
+					"when": "gitlens:enabled"
+				},
+				{
+					"command": "gitlens.showContributorsView",
+					"when": "gitlens:enabled"
+				},
+				{
+					"command": "gitlens.showFileHistoryView",
+					"when": "gitlens:enabled"
+				},
+				{
+					"command": "gitlens.showFocusPage",
+					"when": "gitlens:enabled"
+				},
+				{
+					"command": "gitlens.showGraph",
+					"when": "false"
+				},
+				{
 					"command": "gitlens.showGraphPage",
+					"when": "gitlens:enabled && config.gitlens.graph.experimental.location == tab"
+				},
+				{
+					"command": "gitlens.showGraphView",
+					"when": "gitlens:enabled && config.gitlens.graph.experimental.location == view"
+				},
+				{
+					"command": "gitlens.showHomeView",
 					"when": "gitlens:enabled"
 				},
 				{
@@ -7471,7 +7540,19 @@
 					"when": "false"
 				},
 				{
-					"command": "gitlens.showFocusPage",
+					"command": "gitlens.showLineHistoryView",
+					"when": "gitlens:enabled && !gitlens:hasVirtualFolders"
+				},
+				{
+					"command": "gitlens.showRemotesView",
+					"when": "gitlens:enabled"
+				},
+				{
+					"command": "gitlens.showRepositoriesView",
+					"when": "gitlens:enabled && !gitlens:hasVirtualFolders"
+				},
+				{
+					"command": "gitlens.showSearchAndCompareView",
 					"when": "gitlens:enabled"
 				},
 				{
@@ -7527,54 +7608,6 @@
 					"when": "false"
 				},
 				{
-					"command": "gitlens.showTimelinePage",
-					"when": "gitlens:enabled && gitlens:activeFileStatus =~ /tracked/"
-				},
-				{
-					"command": "gitlens.refreshTimelinePage",
-					"when": "false"
-				},
-				{
-					"command": "gitlens.showBranchesView",
-					"when": "gitlens:enabled"
-				},
-				{
-					"command": "gitlens.showCommitDetailsView",
-					"when": "gitlens:enabled"
-				},
-				{
-					"command": "gitlens.showCommitsView",
-					"when": "gitlens:enabled"
-				},
-				{
-					"command": "gitlens.showContributorsView",
-					"when": "gitlens:enabled"
-				},
-				{
-					"command": "gitlens.showFileHistoryView",
-					"when": "gitlens:enabled"
-				},
-				{
-					"command": "gitlens.showHomeView",
-					"when": "gitlens:enabled"
-				},
-				{
-					"command": "gitlens.showLineHistoryView",
-					"when": "gitlens:enabled && !gitlens:hasVirtualFolders"
-				},
-				{
-					"command": "gitlens.showRemotesView",
-					"when": "gitlens:enabled"
-				},
-				{
-					"command": "gitlens.showRepositoriesView",
-					"when": "gitlens:enabled && !gitlens:hasVirtualFolders"
-				},
-				{
-					"command": "gitlens.showSearchAndCompareView",
-					"when": "gitlens:enabled"
-				},
-				{
 					"command": "gitlens.showStashesView",
 					"when": "gitlens:enabled && !gitlens:hasVirtualFolders"
 				},
@@ -7583,6 +7616,10 @@
 					"when": "gitlens:enabled"
 				},
 				{
+					"command": "gitlens.showTimelinePage",
+					"when": "gitlens:enabled && gitlens:activeFileStatus =~ /tracked/"
+				},
+				{
 					"command": "gitlens.showTimelineView",
 					"when": "gitlens:enabled"
 				},
@@ -9503,7 +9540,7 @@
 					"group": "navigation@100"
 				},
 				{
-					"command": "gitlens.refreshTimelinePage",
+					"command": "gitlens.timeline.refresh",
 					"when": "gitlens:webview:timeline:active",
 					"group": "navigation@-99"
 				},
@@ -9659,14 +9696,14 @@
 			],
 			"scm/sourceControl": [
 				{
-					"command": "gitlens.showGraphPage",
+					"command": "gitlens.showGraph",
 					"when": "gitlens:enabled && config.gitlens.menus.scm.graph && gitlens:plus:enabled && scmProvider == git && scmProviderRootUri not in gitlens:plus:disallowedRepos",
 					"group": "6_gitlens@1"
 				}
 			],
 			"scm/title": [
 				{
-					"command": "gitlens.showGraphPage",
+					"command": "gitlens.showGraph",
 					"when": "gitlens:enabled && config.gitlens.menus.scmRepositoryInline.graph && gitlens:plus:enabled && scmProvider == git && scmProviderRootUri not in gitlens:plus:disallowedRepos",
 					"group": "navigation@-1000"
 				},
@@ -9676,7 +9713,7 @@
 					"group": "2_z_gitlens@1"
 				},
 				{
-					"command": "gitlens.showGraphPage",
+					"command": "gitlens.showGraph",
 					"when": "gitlens:enabled && config.gitlens.menus.scmRepository.graph && gitlens:plus:enabled && scmProvider == git && scmProviderRootUri not in gitlens:plus:disallowedRepos",
 					"group": "2_z_gitlens@2"
 				}
@@ -9852,7 +9889,7 @@
 					"group": "navigation@10"
 				},
 				{
-					"command": "gitlens.showGraphPage",
+					"command": "gitlens.showGraph",
 					"when": "view =~ /^gitlens\\.views\\.commits/ && gitlens:plus:enabled",
 					"group": "navigation@11"
 				},
@@ -9922,7 +9959,7 @@
 					"group": "5_gitlens@2"
 				},
 				{
-					"command": "gitlens.showGraphPage",
+					"command": "gitlens.showGraph",
 					"when": "view =~ /^gitlens\\.views\\.commits/ && gitlens:plus:enabled",
 					"group": "8_gitlens_toggles@0"
 				},
@@ -10412,6 +10449,16 @@
 					"group": "5_gitlens@3"
 				},
 				{
+					"command": "gitlens.graph.refresh",
+					"when": "view =~ /^gitlens\\.views\\.graph/",
+					"group": "navigation@-99"
+				},
+				{
+					"command": "gitlens.showSettingsPage#commit-graph",
+					"when": "view =~ /^gitlens\\.views\\.graph/",
+					"group": "navigation@-98"
+				},
+				{
 					"command": "gitlens.showSettingsPage#branches-view",
 					"when": "view =~ /^gitlens\\.views\\.branches/",
 					"group": "9_gitlens@1"
@@ -11286,7 +11333,7 @@
 					"group": "inline@99"
 				},
 				{
-					"command": "gitlens.showGraphPage",
+					"command": "gitlens.showGraph",
 					"when": "viewItem =~ /gitlens:repo-folder\\b/ && gitlens:plus:enabled",
 					"group": "inline@100"
 				},
@@ -11322,7 +11369,7 @@
 					"alt": "gitlens.copyRemoteRepositoryUrl"
 				},
 				{
-					"command": "gitlens.showGraphPage",
+					"command": "gitlens.showGraph",
 					"when": "viewItem =~ /gitlens:repo-folder\\b/ && gitlens:plus:enabled",
 					"group": "3_gitlens_explore@1"
 				},
@@ -13056,6 +13103,15 @@
 					"initialSize": 5
 				},
 				{
+					"type": "webview",
+					"id": "gitlens.views.graph",
+					"name": "Commit Graph",
+					"when": "!gitlens:disabled && gitlens:plus:enabled && config.gitlens.graph.experimental.location == view",
+					"contextualTitle": "GitLens",
+					"icon": "$(gitlens-graph)",
+					"visibility": "hidden"
+				},
+				{
 					"id": "gitlens.views.contributors",
 					"name": "Contributors",
 					"when": "!gitlens:disabled",
@@ -13296,7 +13352,7 @@
 					{
 						"id": "gitlens.plus.commitGraph",
 						"title": "Commit Graph (new)",
-						"description": "The Commit Graph helps you to easily visualize branch structure and commit history.\n\n[Open Commit Graph](command:gitlens.showGraphPage)",
+						"description": "The Commit Graph helps you to easily visualize branch structure and commit history.\n\n[Open Commit Graph](command:gitlens.showGraph)",
 						"media": {
 							"markdown": "walkthroughs/plus/commit-graph.md"
 						}

src/commands/showView.ts

@@ -13,6 +13,8 @@ export class ShowViewCommand extends Command {
 			Commands.ShowCommitsView,
 			Commands.ShowContributorsView,
 			Commands.ShowFileHistoryView,
+			Commands.ShowGraphView,
+			Commands.ShowHomeView,
 			Commands.ShowLineHistoryView,
 			Commands.ShowRemotesView,
 			Commands.ShowRepositoriesView,
@@ -21,7 +23,6 @@ export class ShowViewCommand extends Command {
 			Commands.ShowTagsView,
 			Commands.ShowTimelineView,
 			Commands.ShowWorktreesView,
-			Commands.ShowHomeView,
 		]);
 	}
 
@@ -43,6 +44,8 @@ export class ShowViewCommand extends Command {
 				return this.container.fileHistoryView.show();
 			case Commands.ShowHomeView:
 				return this.container.homeView.show();
+			case Commands.ShowGraphView:
+				return this.container.graphView.show();
 			case Commands.ShowLineHistoryView:
 				return this.container.lineHistoryView.show();
 			case Commands.ShowRemotesView:

src/config.ts

@@ -417,6 +417,7 @@ export interface GraphConfig {
 	defaultItemLimit: number;
 	dimMergeCommits: boolean;
 	experimental: {
+		location: 'tab' | 'view';
 		minimap: {
 			enabled: boolean;
 			additionalTypes: GraphMinimapTypes[];

src/constants.ts

@@ -187,10 +187,10 @@ export const enum Commands {
 	PlusStartPreviewTrial = 'gitlens.plus.startPreviewTrial',
 	PlusValidate = 'gitlens.plus.validate',
 	QuickOpenFileHistory = 'gitlens.quickOpenFileHistory',
-	RefreshGraph = 'gitlens.graph.refresh',
 	RefreshFocus = 'gitlens.focus.refresh',
+	RefreshGraph = 'gitlens.graph.refresh',
 	RefreshHover = 'gitlens.refreshHover',
-	RefreshTimelinePage = 'gitlens.refreshTimelinePage',
+	RefreshTimelinePage = 'gitlens.timeline.refresh',
 	ResetAvatarCache = 'gitlens.resetAvatarCache',
 	ResetOpenAIKey = 'gitlens.resetOpenAIKey',
 	ResetSuppressedWarnings = 'gitlens.resetSuppressedWarnings',
@@ -200,12 +200,17 @@ export const enum Commands {
 	SearchCommitsInView = 'gitlens.views.searchAndCompare.searchCommits',
 	SetViewsLayout = 'gitlens.setViewsLayout',
 	ShowBranchesView = 'gitlens.showBranchesView',
+	ShowCommitDetailsView = 'gitlens.showCommitDetailsView',
 	ShowCommitInView = 'gitlens.showCommitInView',
 	ShowCommitsInView = 'gitlens.showCommitsInView',
 	ShowCommitsView = 'gitlens.showCommitsView',
 	ShowContributorsView = 'gitlens.showContributorsView',
-	ShowHomeView = 'gitlens.showHomeView',
 	ShowFileHistoryView = 'gitlens.showFileHistoryView',
+	ShowFocusPage = 'gitlens.showFocusPage',
+	ShowGraph = 'gitlens.showGraph',
+	ShowGraphPage = 'gitlens.showGraphPage',
+	ShowGraphView = 'gitlens.showGraphView',
+	ShowHomeView = 'gitlens.showHomeView',
 	ShowInCommitGraph = 'gitlens.showInCommitGraph',
 	ShowInDetailsView = 'gitlens.showInDetailsView',
 	ShowLastQuickPick = 'gitlens.showLastQuickPick',
@@ -240,13 +245,10 @@ export const enum Commands {
 	ShowSettingsPageAndJumpToAutolinks = 'gitlens.showSettingsPage#autolinks',
 	ShowStashesView = 'gitlens.showStashesView',
 	ShowTagsView = 'gitlens.showTagsView',
-	ShowWorktreesView = 'gitlens.showWorktreesView',
-	ShowCommitDetailsView = 'gitlens.showCommitDetailsView',
 	ShowTimelinePage = 'gitlens.showTimelinePage',
 	ShowTimelineView = 'gitlens.showTimelineView',
-	ShowGraphPage = 'gitlens.showGraphPage',
 	ShowWelcomePage = 'gitlens.showWelcomePage',
-	ShowFocusPage = 'gitlens.showFocusPage',
+	ShowWorktreesView = 'gitlens.showWorktreesView',
 	StashApply = 'gitlens.stashApply',
 	StashSave = 'gitlens.stashSave',
 	StashSaveFiles = 'gitlens.stashSaveFiles',

src/container.ts

@@ -23,7 +23,11 @@ import { SubscriptionAuthenticationProvider } from './plus/subscription/authenti
 import { ServerConnection } from './plus/subscription/serverConnection';
 import { SubscriptionService } from './plus/subscription/subscriptionService';
 import { registerFocusWebviewPanel } from './plus/webviews/focus/registration';
-import { registerGraphWebviewCommands, registerGraphWebviewPanel } from './plus/webviews/graph/registration';
+import {
+	registerGraphWebviewCommands,
+	registerGraphWebviewPanel,
+	registerGraphWebviewView,
+} from './plus/webviews/graph/registration';
 import { GraphStatusBarController } from './plus/webviews/graph/statusbar';
 import { registerTimelineWebviewPanel, registerTimelineWebviewView } from './plus/webviews/timeline/registration';
 import { StatusBarController } from './statusbar/statusBarController';
@@ -212,8 +216,10 @@ export class Container {
 
 		const graphWebviewPanel = registerGraphWebviewPanel(this._webviews);
 		context.subscriptions.unshift(graphWebviewPanel);
-		context.subscriptions.unshift(registerGraphWebviewCommands(graphWebviewPanel));
-		// context.subscriptions.unshift((this._graphView = registerGraphWebviewView(this._webviews)));
+		context.subscriptions.unshift(registerGraphWebviewCommands(this, graphWebviewPanel));
+		if (configuration.get('graph.experimental.location') === 'view') {
+			context.subscriptions.unshift((this._graphView = registerGraphWebviewView(this._webviews)));
+		}
 		context.subscriptions.unshift(new GraphStatusBarController(this));
 
 		const settingsWebviewPanel = registerSettingsWebviewPanel(this._webviews);
@@ -431,10 +437,14 @@ export class Container {
 		}
 	}
 
-	// private readonly _graphView: WebviewViewProxy;
-	// get graphView() {
-	// 	return this._graphView;
-	// }
+	private _graphView: WebviewViewProxy | undefined;
+	get graphView() {
+		if (this._graphView == null) {
+			this.context.subscriptions.unshift((this._graphView = registerGraphWebviewView(this._webviews)));
+		}
+
+		return this._graphView;
+	}
 
 	private readonly _homeView: WebviewViewProxy;
 	get homeView() {

src/plus/webviews/graph/graphWebview.ts

@@ -276,7 +276,7 @@ export class GraphWebviewProvider implements WebviewProvider {
 				void this.onGetMoreRows({ id: id }, true);
 			}
 		} else if (this.container.git.repositoryCount > 1) {
-			const [contexts] = parseCommandContext(Commands.ShowGraphPage, undefined, ...args);
+			const [contexts] = parseCommandContext(Commands.ShowGraph, undefined, ...args);
 			const context = Array.isArray(contexts) ? contexts[0] : contexts;
 
 			if (context.type === 'scm' && context.scm.rootUri != null) {

src/plus/webviews/graph/registration.ts

@@ -1,6 +1,9 @@
+import { Disposable } from 'vscode';
 import { Commands, ContextKeys } from '../../../constants';
+import type { Container } from '../../../container';
 import type { Repository } from '../../../git/models/repository';
-import { registerCommand } from '../../../system/command';
+import { executeCommand, registerCommand } from '../../../system/command';
+import { configuration } from '../../../system/configuration';
 import type { BranchNode } from '../../../views/nodes/branchNode';
 import type { CommitFileNode } from '../../../views/nodes/commitFileNode';
 import type { CommitNode } from '../../../views/nodes/commitNode';
@@ -21,6 +24,9 @@ export function registerGraphWebviewPanel(controller: WebviewsController) {
 			retainContextWhenHidden: true,
 			enableFindWidget: false,
 		},
+		canResolveWebviewProvider: function (_container, _id) {
+			return configuration.get('graph.experimental.location') === 'tab';
+		},
 		resolveWebviewProvider: async function (container, id, host) {
 			const { GraphWebviewProvider } = await import(/* webpackChunkName: "graph" */ './graphWebview');
 			return new GraphWebviewProvider(container, id, host);
@@ -35,6 +41,9 @@ export function registerGraphWebviewView(controller: WebviewsController) {
 		contextKeyPrefix: `${ContextKeys.WebviewViewPrefix}graph`,
 		trackingFeature: 'graphView',
 		plusFeature: true,
+		canResolveWebviewProvider: function (_container, _id) {
+			return configuration.get('graph.experimental.location') === 'view';
+		},
 		resolveWebviewProvider: async function (container, id, host) {
 			const { GraphWebviewProvider } = await import(/* webpackChunkName: "graph" */ './graphWebview');
 			return new GraphWebviewProvider(container, id, host);
@@ -42,21 +51,32 @@ export function registerGraphWebviewView(controller: WebviewsController) {
 	});
 }
 
-export function registerGraphWebviewCommands(webview: WebviewPanelProxy) {
-	return registerCommand(
-		Commands.ShowInCommitGraph,
-		(
-			args:
-				| ShowInCommitGraphCommandArgs
-				| Repository
-				| BranchNode
-				| CommitNode
-				| CommitFileNode
-				| StashNode
-				| TagNode,
-		) => {
-			const preserveFocus = 'preserveFocus' in args ? args.preserveFocus ?? false : false;
-			void webview.show({ preserveFocus: preserveFocus }, args);
-		},
+export function registerGraphWebviewCommands(container: Container, webview: WebviewPanelProxy) {
+	return Disposable.from(
+		registerCommand(Commands.ShowGraph, (...args: any[]) =>
+			configuration.get('graph.experimental.location') === 'view'
+				? executeCommand(Commands.ShowGraphView, ...args)
+				: executeCommand(Commands.ShowGraphPage, ...args),
+		),
+		registerCommand(
+			Commands.ShowInCommitGraph,
+			(
+				args:
+					| ShowInCommitGraphCommandArgs
+					| Repository
+					| BranchNode
+					| CommitNode
+					| CommitFileNode
+					| StashNode
+					| TagNode,
+			) => {
+				const preserveFocus = 'preserveFocus' in args ? args.preserveFocus ?? false : false;
+				if (configuration.get('graph.experimental.location') === 'view') {
+					void container.graphView.show({ preserveFocus: preserveFocus }, args);
+				} else {
+					void webview.show({ preserveFocus: preserveFocus }, args);
+				}
+			},
+		),
 	);
 }

src/plus/webviews/graph/statusbar.ts

@@ -46,7 +46,7 @@ export class GraphStatusBarController implements Disposable {
 			if (this._statusBarItem == null) {
 				this._statusBarItem = window.createStatusBarItem('gitlens.graph', StatusBarAlignment.Left, 10000 - 3);
 				this._statusBarItem.name = 'GitLens Commit Graph';
-				this._statusBarItem.command = Commands.ShowGraphPage;
+				this._statusBarItem.command = Commands.ShowGraph;
 				this._statusBarItem.text = '$(gitlens-graph)';
 				this._statusBarItem.tooltip = new MarkdownString('Visualize commits on the Commit Graph ✨');
 				this._statusBarItem.accessibilityInformation = {

src/views/commitsView.ts

@@ -146,7 +146,7 @@ export class CommitsViewNode extends RepositoriesSubscribeableNode
 				? new CommandMessageNode(
 						this.view,
 						this,
-						{ command: Commands.ShowGraphPage, title: 'Show Commit Graph' },
+						{ command: Commands.ShowGraph, title: 'Show Commit Graph' },
 						'Visualize commits on the Commit Graph',
 						'✨ GitLens+ feature',
 						'Visualize commits on the Commit Graph ✨',

src/webviews/apps/commitDetails/commitDetails.html

@@ -12,7 +12,7 @@
 				<ul class="bulleted">
 					<li>lines in the text editor</li>
 					<li>
-						commits in the <a href="command:gitlens.showGraphPage">Commit Graph</a>,
+						commits in the <a href="command:gitlens.showGraph">Commit Graph</a>,
 						<a href="command:gitlens.showTimelineView">Visual File History</a>, or
 						<a href="command:gitlens.showCommitsView">Commits view</a>
 					</li>

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

@@ -1092,74 +1092,71 @@ export function GraphWrapper({
 			{renderAlertContent()}
 			<header className="titlebar graph-app__header">
 				<div className="titlebar__row titlebar__row--wrap">
-					<div className="titlebar__group titlebar__group--fixed">
-						<button
-							type="button"
-							className="action-button"
-							slot="trigger"
-							title="Switch to Another Repository..."
-							disabled={repos.length < 2}
-							onClick={() => handleChooseRepository()}
-						>
-							{repo?.formattedName ?? 'none selected'}
-							{repos.length > 1 && (
+					<button
+						type="button"
+						className="action-button"
+						slot="trigger"
+						title="Switch to Another Repository..."
+						disabled={repos.length < 2}
+						onClick={() => handleChooseRepository()}
+					>
+						{repo?.formattedName ?? 'none selected'}
+						{repos.length > 1 && (
+							<span
+								className="codicon codicon-chevron-down action-button__more"
+								aria-hidden="true"
+							></span>
+						)}
+					</button>
+					{repo && (
+						<>
+							<span>
+								<span className="codicon codicon-chevron-right"></span>
+							</span>
+							<a
+								href="command:gitlens.graph.switchToAnotherBranch"
+								className="action-button"
+								title="Switch to Another Branch..."
+							>
+								{branchName}
 								<span
 									className="codicon codicon-chevron-down action-button__more"
 									aria-hidden="true"
 								></span>
-							)}
-						</button>
-						{repo && (
-							<>
-								<span>
-									<span className="codicon codicon-chevron-right"></span>
-								</span>
-								<a
-									href="command:gitlens.graph.switchToAnotherBranch"
-									className="action-button"
-									title="Switch to Another Branch..."
-								>
-									{branchName}
-									<span
-										className="codicon codicon-chevron-down action-button__more"
-										aria-hidden="true"
-									></span>
-								</a>
-								<span>
-									<span className="codicon codicon-chevron-right"></span>
-								</span>
-								<a
-									href="command:gitlens.graph.fetch"
-									className="action-button"
-									title="Fetch Repository"
-								>
-									<span className="codicon codicon-sync action-button__icon"></span> Fetch{' '}
-									{lastFetched && <small>(Last fetched {fromNow(new Date(lastFetched))})</small>}
-								</a>
-							</>
-						)}
-					</div>
-					<div className="titlebar__group titlebar__group--fixed">
-						{state.debugging && (
-							<span className="titlebar__group titlebar__debugging">
-								{isLoading && <span className="icon--loading icon-modifier--spin" />}
-								{rows.length > 0 && (
-									<span>
-										showing {rows.length} item{rows.length ? 's' : ''}
+							</a>
+							<span>
+								<span className="codicon codicon-chevron-right"></span>
+							</span>
+							<a href="command:gitlens.graph.fetch" className="action-button" title="Fetch Repository">
+								<span className="codicon codicon-sync action-button__icon"></span>
+								Fetch
+								{lastFetched && (
+									<span className="action-button__small">
+										(Last fetched {fromNow(new Date(lastFetched))})
 									</span>
 								)}
-							</span>
-						)}
-						{renderAccountState()}
-						<a
-							href="https://github.com/gitkraken/vscode-gitlens/discussions/2158"
-							title="Commit Graph Feedback"
-							aria-label="Commit Graph Feedback"
-							className="action-button"
-						>
-							<span className="codicon codicon-feedback"></span>
-						</a>
-					</div>
+							</a>
+						</>
+					)}
+					{!state.debugging && (
+						<span className="titlebar__debugging">
+							{isLoading && <span className="icon--loading icon-modifier--spin" />}
+							{rows.length > 0 && (
+								<span>
+									showing {rows.length} item{rows.length ? 's' : ''}
+								</span>
+							)}
+						</span>
+					)}
+					{renderAccountState()}
+					<a
+						href="https://github.com/gitkraken/vscode-gitlens/discussions/2158"
+						title="Commit Graph Feedback"
+						aria-label="Commit Graph Feedback"
+						className="action-button"
+					>
+						<span className="codicon codicon-feedback"></span>
+					</a>
 				</div>
 				{isAccessAllowed && (
 					<div className="titlebar__row">
@@ -1267,7 +1264,7 @@ export function GraphWrapper({
 							</span>
 							<button
 								type="button"
-								className="action-button action-button--narrow"
+								className="action-button"
 								title="Toggle Minimap (Experimental)"
 								aria-label="Toggle Minimap (Experimental)"
 								onClick={handleOnToggleMinimap}

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

@@ -7,10 +7,8 @@
 		</script>
 	</head>
 
-	<body class="graph-app" data-vscode-context='{ "preventDefaultContextMenuItems": true }'>
-		<div id="root" class="graph-app__container">
-			<p>A repository must be selected.</p>
-		</div>
+	<body class="graph-app scrollable" data-vscode-context='{ "preventDefaultContextMenuItems": true }'>
+		<div id="root" class="graph-app__container"></div>
 		#{endOfBody}
 		<style nonce="#{cspNonce}">
 			@font-face {

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

@@ -186,6 +186,12 @@ button:not([disabled]),
 	border-radius: 3px;
 	height: auto;
 
+	display: grid;
+	grid-auto-flow: column;
+	grid-gap: 0.5rem;
+	gap: 0.5rem;
+	max-width: fit-content;
+
 	&[disabled] {
 		pointer-events: none;
 		cursor: default;
@@ -203,10 +209,6 @@ button:not([disabled]),
 		vertical-align: bottom;
 	}
 
-	&__icon,
-	&__icon.codicon[class*='codicon-'] {
-		margin-right: 0.4rem;
-	}
 	&__icon:not(.codicon) {
 		display: inline-block;
 		width: 1.6rem;
@@ -215,7 +217,6 @@ button:not([disabled]),
 	&__more,
 	&__more.codicon[class*='codicon-'] {
 		font-size: 1rem;
-		margin-left: 0.4rem;
 		margin-right: -0.35rem;
 	}
 
@@ -230,8 +231,11 @@ button:not([disabled]),
 		background-color: var(--vscode-progressBar-background);
 	}
 
-	small {
+	&__small {
+		font-size: smaller;
 		opacity: 0.6;
+		text-overflow: ellipsis;
+		overflow: hidden;
 	}
 }
 
@@ -609,16 +613,17 @@ button:not([disabled]),
 		flex: 0 0 100%;
 
 		&--wrap {
-			flex-wrap: wrap;
+			display: grid;
+			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);
+			overflow: hidden;
 		}
 	}
 
 	&__group {
 		flex: auto 1 1;
-
-		&--fixed {
-			flex: none;
-		}
 	}
 
 	&__debugging {

src/webviews/apps/settings/partials/commit-graph.html

@@ -13,7 +13,7 @@
 
 		<p class="section__header-hint">
 			Adds a
-			<a class="command command--show-view" title="Show Commit Graph" href="command:gitlens.showGraphPage"
+			<a class="command command--show-view" title="Show Commit Graph" href="command:gitlens.showGraph"
 				>Commit Graph</a
 			>
 			to visualize, explore, and manage a Git repository

src/webviews/webviewsController.ts

@@ -27,6 +27,11 @@ export interface WebviewPanelDescriptor {
 	readonly plusFeature: boolean;
 	readonly options?: WebviewOptions;
 	readonly panelOptions?: WebviewPanelOptions;
+
+	canResolveWebviewProvider?(
+		container: Container,
+		id: `gitlens.${WebviewIds}` | `gitlens.views.${WebviewViewIds}`,
+	): boolean | Promise<boolean>;
 	resolveWebviewProvider(
 		container: Container,
 		id: `gitlens.${WebviewIds}` | `gitlens.views.${WebviewViewIds}`,
@@ -41,6 +46,11 @@ export interface WebviewViewDescriptor {
 	readonly trackingFeature: TrackedUsageFeatures;
 	readonly plusFeature: boolean;
 	readonly options?: WebviewOptions;
+
+	canResolveWebviewProvider?(
+		container: Container,
+		id: `gitlens.${WebviewIds}` | `gitlens.views.${WebviewViewIds}`,
+	): boolean | Promise<boolean>;
 	resolveWebviewProvider(
 		container: Container,
 		id: `gitlens.${WebviewIds}` | `gitlens.views.${WebviewViewIds}`,
@@ -102,6 +112,10 @@ export class WebviewsController implements Disposable {
 					_context: WebviewViewResolveContext<SerializedState>,
 					token: CancellationToken,
 				) => {
+					if (metadata.descriptor.canResolveWebviewProvider != null) {
+						if ((await metadata.descriptor.canResolveWebviewProvider(this.container, id)) === false) return;
+					}
+
 					if (metadata.descriptor.plusFeature) {
 						if (!(await ensurePlusFeaturesEnabled())) return;
 						if (token.isCancellationRequested) return;
@@ -184,6 +198,10 @@ export class WebviewsController implements Disposable {
 		): Promise<void> {
 			const { webview, descriptor } = metadata;
 
+			if (descriptor.canResolveWebviewProvider != null) {
+				if ((await descriptor.canResolveWebviewProvider(container, id)) === false) return;
+			}
+
 			if (descriptor.plusFeature) {
 				if (!(await ensurePlusFeaturesEnabled())) return;
 			}