Improves the Visual File History experience

  - Adds visibility of uncommitted (WIP) changes
  - Adds ability to choose the base branch or all branches
  - Adds ability to slice by author or branch, branch slicing is only available when all branches are selected
  - Adds interactive breadcrumbs for repo, branch, and path
  - Adds quick scrubbing navigation with a new slider
  - Refines zoom/pan controls (control+mouse wheel to zoom, mouse wheel to pan)
  - Adds a scrollbar to the chart for easy panning
  - Enhances commit interactions, allowing comparison with the working tree (Shift-click) and viewing folder changes
Refactors the chart component, state management, and introduces several reusable UI components (breadcrumbs, ref buttons, slider, scroller, etc.).

Author: eamodio

docs/telemetry-events.md

@@ -2005,11 +2005,14 @@ or
 
 ### timeline/action/openInEditor
 
-> Sent when the user changes the period (timeframe) on the Visual History
+> Sent when the user clicks on the "Open in Editor" button on the Visual History
 
 ```typescript
 {
-  'context.period': string,
+  'context.itemType': 'file' | 'folder',
+  'context.period': 'all' | `${number}|D` | `${number}|M` | `${number}|Y`,
+  'context.showAllBranches': boolean,
+  'context.sliceBy': 'author' | 'branch',
   'context.webview.host': 'editor' | 'view',
   'context.webview.id': string,
   'context.webview.instanceId': string,
@@ -2023,41 +2026,51 @@ or
 
 ```typescript
 {
-  'context.period': string,
+  'context.itemType': 'file' | 'folder',
+  'context.period': 'all' | `${number}|D` | `${number}|M` | `${number}|Y`,
+  'context.showAllBranches': boolean,
+  'context.sliceBy': 'author' | 'branch',
   'context.webview.host': 'editor' | 'view',
   'context.webview.id': string,
   'context.webview.instanceId': string,
   'context.webview.type': string
 }
 ```
 
-### timeline/editor/changed
+### timeline/config/changed
 
-> Sent when the editor changes on the Visual History
+> Sent when the user changes the configuration of the Visual History (e.g. period, show all branches, etc)
 
 ```typescript
 {
-  'context.period': string,
+  'context.itemType': 'file' | 'folder',
+  'context.period': 'all' | `${number}|D` | `${number}|M` | `${number}|Y`,
+  'context.showAllBranches': boolean,
+  'context.sliceBy': 'author' | 'branch',
   'context.webview.host': 'editor' | 'view',
   'context.webview.id': string,
   'context.webview.instanceId': string,
-  'context.webview.type': string
+  'context.webview.type': string,
+  'period': 'all' | `${number}|D` | `${number}|M` | `${number}|Y`,
+  'showAllBranches': boolean,
+  'sliceBy': 'author' | 'branch'
 }
 ```
 
-### timeline/period/changed
+### timeline/editor/changed
 
-> Sent when the user changes the period (timeframe) on the Visual History
+> Sent when the editor changes on the Visual History
 
 ```typescript
 {
-  'context.period': string,
+  'context.itemType': 'file' | 'folder',
+  'context.period': 'all' | `${number}|D` | `${number}|M` | `${number}|Y`,
+  'context.showAllBranches': boolean,
+  'context.sliceBy': 'author' | 'branch',
   'context.webview.host': 'editor' | 'view',
   'context.webview.id': string,
   'context.webview.instanceId': string,
-  'context.webview.type': string,
-  'period.new': 'all' | `${number}|D` | `${number}|M` | `${number}|Y`,
-  'period.old': 'all' | `${number}|D` | `${number}|M` | `${number}|Y`
+  'context.webview.type': string
 }
 ```
 
@@ -2082,7 +2095,10 @@ or
 {
   'context.config.allowMultiple': boolean,
   'context.config.queryLimit': number,
-  'context.period': string,
+  'context.itemType': 'file' | 'folder',
+  'context.period': 'all' | `${number}|D` | `${number}|M` | `${number}|Y`,
+  'context.showAllBranches': boolean,
+  'context.sliceBy': 'author' | 'branch',
   'context.webview.host': 'editor' | 'view',
   'context.webview.id': string,
   'context.webview.instanceId': string,

src/constants.telemetry.ts

@@ -11,7 +11,7 @@ import type { Subscription, SubscriptionAccount } from './plus/gk/models/subscri
 import type { Flatten } from './system/object';
 import type { WalkthroughContextKeys } from './telemetry/walkthroughStateProvider';
 import type { GraphColumnConfig } from './webviews/plus/graph/protocol';
-import type { Period } from './webviews/plus/timeline/protocol';
+import type { TimelineItemType, TimelinePeriod, TimelineSliceBy } from './webviews/plus/timeline/protocol';
 
 export declare type AttributeValue =
 	| string
@@ -257,14 +257,14 @@ export interface TelemetryEvents extends WebviewShowAbortedEvents, WebviewShownE
 
 	/** Sent when the Visual History is shown */
 	'timeline/shown': TimelineShownEvent;
-	/** Sent when the user changes the period (timeframe) on the Visual History */
+	/** Sent when the user clicks on the "Open in Editor" button on the Visual History */
 	'timeline/action/openInEditor': TimelineContextEventData;
 	/** Sent when the editor changes on the Visual History */
 	'timeline/editor/changed': TimelineContextEventData;
-	/** Sent when the user changes the period (timeframe) on the Visual History */
-	'timeline/period/changed': TimelinePeriodChangedEvent;
 	/** Sent when the user selects (clicks on) a commit on the Visual History */
 	'timeline/commit/selected': TimelineContextEventData;
+	/** Sent when the user changes the configuration of the Visual History (e.g. period, show all branches, etc) */
+	'timeline/config/changed': TimelineConfigChangedEvent;
 
 	/** Sent when a "tracked feature" is interacted with, today that is only when webview/webviewView/custom editor is shown */
 	'usage/track': UsageTrackEvent;
@@ -864,7 +864,10 @@ export interface SubscriptionEventDataWithPrevious
 		Partial<SubscriptionPreviousEventData> {}
 
 type TimelineContextEventData = WebviewTelemetryContext & {
-	'context.period': string | undefined;
+	'context.itemType': TimelineItemType | undefined;
+	'context.period': TimelinePeriod | undefined;
+	'context.showAllBranches': boolean | undefined;
+	'context.sliceBy': TimelineSliceBy | undefined;
 };
 export type TimelineTelemetryContext = TimelineContextEventData;
 
@@ -873,9 +876,10 @@ export type TimelineShownTelemetryContext = TimelineShownEventData;
 
 type TimelineShownEvent = WebviewShownEventData & TimelineShownEventData;
 
-interface TimelinePeriodChangedEvent extends TimelineContextEventData {
-	'period.old': Period | undefined;
-	'period.new': Period;
+interface TimelineConfigChangedEvent extends TimelineContextEventData {
+	period: TimelinePeriod;
+	showAllBranches: boolean;
+	sliceBy: TimelineSliceBy;
 }
 
 interface UsageTrackEvent {

src/env/node/git/sub-providers/commits.ts

@@ -931,6 +931,10 @@ export class CommitsGitSubProvider implements GitCommitsSubProvider {
 			const parser = getShaLogParser();
 			const args = [...parser.arguments];
 
+			if (options?.all) {
+				args.push(`--all`);
+			}
+
 			const ordering = options?.ordering ?? configuration.get('advanced.commitOrdering');
 			if (ordering) {
 				args.push(`--${ordering}-order`);

src/git/gitProvider.ts

@@ -305,6 +305,7 @@ export interface GitLogForPathOptions extends Omit<GitLogOptions, 'stashes'> {
 }
 
 export interface GitLogShasOptions extends GitLogOptionsBase {
+	all?: boolean;
 	authors?: GitUser[];
 	merges?: boolean | 'first-parent';
 	pathOrUri?: string | Uri;

src/webviews/apps/plus/timeline/components/chart.css.ts

@@ -2,27 +2,62 @@ import { css } from 'lit';
 
 export const timelineChartStyles = css`
 	:host {
-		display: block;
-		position: relative;
+		display: flex;
+		flex-direction: column;
 		width: 100%;
 		height: 100%;
+
+		--scroller-track-top: unset;
+		--scroller-track-left: 0;
+		--scroller-track-width: 100%;
+		--scroller-thumb-height: 0.6rem;
+		--scroller-track-height: 1.2rem;
 	}
 
-	#chart {
-		position: absolute !important;
+	gl-chart-scroller {
+		display: flex;
+		flex-direction: column;
 		height: 100%;
 		width: 100%;
+		min-height: 0;
+	}
+
+	gl-chart-scroller::part(track) {
+		--track-top: var(--scroller-track-top);
+		--track-left: var(--scroller-track-left);
+		--track-width: var(--scroller-track-width);
+		--track-height: var(--scroller-track-height);
+		--thumb-height: var(--scroller-thumb-height);
+	}
+
+	#chart {
+		flex: 1;
+		width: 100%;
+		height: 100%;
+		min-height: 0;
+	}
+
+	footer {
+		flex: 0 0 auto;
+		display: flex;
+		align-items: center;
+		margin: 0 1rem 0.4rem 1rem;
+		gap: 0.8rem;
+	}
+
+	gl-chart-slider {
+		flex: 1 0 auto;
+		margin-left: 1.4rem;
 	}
 
-	/* :host-context(:host[placement='view']) #chart {
-		height: calc(100% - 0.4rem);
-		width: calc(100% + 6.9rem);
-		left: -3.5rem;
-		bottom: 0.3rem;
-	} */
+	gl-commit-sha {
+		color: var(--color-foreground--75);
+		text-align: right;
+		min-width: 7.5rem; /* Ugly but stops the text from jumping around */
+	}
 
 	.bb svg {
-		font: 10px sans-serif;
+		font: 10px var(--font-family);
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 	}
 
@@ -45,7 +80,6 @@ export const timelineChartStyles = css`
 	.bb .bb-button {
 		user-select: none;
 		fill: var(--color-view-foreground);
-		font-size: 11px;
 	}
 
 	.bb .bb-event-rects,
@@ -66,6 +100,10 @@ export const timelineChartStyles = css`
 		shape-rendering: crispEdges;
 	}
 
+	.bb .bb-legend-item text {
+		fill: var(--color-foreground--85);
+	}
+
 	.bb .bb-legend-item-tile {
 		stroke-width: 2px;
 		transform: translate(0, 1px);
@@ -233,7 +271,7 @@ export const timelineChartStyles = css`
 	}
 
 	.bb .bb-title {
-		font: 14px sans-serif;
+		font: 14px var(--font-family);
 	}
 
 	.bb .bb-tooltip-container {
@@ -349,6 +387,21 @@ export const timelineChartStyles = css`
 		font-weight: 600;
 	}
 
+	.bb-tooltip .branches {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		/* font-family: var(--vscode-editor-font-family); */
+	}
+
+	.bb-tooltip .sha {
+		/* background: var(--vscode-textCodeBlock-background);
+		border-radius: 0.3rem; */
+		/* padding: 0.1rem 0.4rem 0.2rem 0.4rem; */
+		font-family: var(--vscode-editor-font-family);
+		margin-right: 0.4rem;
+	}
+
 	.bb-tooltip .additions {
 		color: var(--vscode-gitDecoration-addedResourceForeground);
 	}
@@ -390,6 +443,10 @@ export const timelineChartStyles = css`
 		white-space: pre-line;
 	}
 
+	:host-context(:host[placement='editor']) .bb-axis-y .tick text {
+		fill: var(--color-foreground--85);
+	}
+
 	:host-context(:host[placement='view']) .bb-axis-y .tick text {
 		transform: translate(0, 0.4rem);
 		font-family: codicon;