@theia/scm 1.75.0-next.8 → 1.75.0

package/src/browser/scm-history-graph-widget.tsx

@@ -15,11 +15,12 @@
 // *****************************************************************************
 
 import * as React from '@theia/core/shared/react';
-import { Virtuoso } from '@theia/core/shared/react-virtuoso';
-import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
+import { Virtuoso, VirtuosoHandle } from '@theia/core/shared/react-virtuoso';
+import { injectable, inject, postConstruct, named } from '@theia/core/shared/inversify';
 import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
 import { LabelProvider } from '@theia/core/lib/browser/label-provider';
 import { HoverService } from '@theia/core/lib/browser/hover-service';
+import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
 import { MarkdownRenderer, MarkdownRendererFactory } from '@theia/core/lib/browser/markdown-rendering/markdown-renderer';
 import { ScmHistoryGraphModel, HistoryGraphEntry } from './scm-history-graph-model';
 import { ScmHistoryItemRef, ScmHistoryItemChange } from './scm-provider';
@@ -28,16 +29,22 @@ import { GraphRow } from './scm-history-graph-lanes';
 import URI from '@theia/core/lib/common/uri';
 import { nls } from '@theia/core/lib/common/nls';
 import { CancellationTokenSource } from '@theia/core/lib/common/cancellation';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import { Emitter, Event } from '@theia/core/lib/common/event';
+import { DynamicToolbarWidget } from '@theia/core/lib/browser/view-container';
 import { MenuPath } from '@theia/core/lib/common/menu/menu-types';
 import { ContextMenuRenderer } from '@theia/core/lib/browser/context-menu-renderer';
 import { OpenerService, open } from '@theia/core/lib/browser/opener-service';
 import { DiffUris } from '@theia/core/lib/browser/diff-uris';
 import { ScmContextKeyService } from './scm-context-key-service';
+import { ScmPreferences } from '../common/scm-preferences';
 import {
-    laneColor, getChangeStatus, getFileName, getFilePath, getRepoRelativePath,
-    getRefBadgeClass, isTagRef, isRemoteRef, deduplicateRefs, DeduplicatedRef
+    laneColor, filterRefsForBadges, getChangeStatus, getFileName, getFilePath, getRepoRelativePath,
+    getRefBadgeClass, getRefBadgePresentation, isTagRef, isRemoteRef, deduplicateRefs, DeduplicatedRef,
+    buildChangeTreeRows, ChangeTreeFolderRow
 } from './scm-history-graph-helpers';
-import { buildHtmlTooltip } from './scm-history-graph-tooltip';
+import { ILogger } from '@theia/core';
+import { buildHtmlTooltip, buildProviderTooltip } from './scm-history-graph-tooltip';
 
 /** Menu path matching the VS Code 'scm/history/title' contribution point (graph section toolbar). */
 export const SCM_HISTORY_TITLE_MENU: MenuPath = ['plugin_scm/history/title'];
@@ -54,6 +61,19 @@ const LANE_WIDTH = 22;
 /** Y position of the commit dot — vertically centered in the row. */
 const DOT_CY = 11;
 
+/** Indentation of one level of the change tree, in pixels. */
+const TREE_INDENT = 8;
+/** Shared empty set for history items whose change tree is fully expanded. */
+const EMPTY_FOLDER_SET: ReadonlySet<string> = new Set<string>();
+
+/**
+ * Indentation for a row of the change tree. Like Theia's tree widget, the depth
+ * is applied as padding rather than through a class, as it is not known upfront.
+ */
+function indentStyle(depth: number): React.CSSProperties | undefined {
+    return depth > 0 ? { paddingLeft: `${4 + depth * TREE_INDENT}px` } : undefined;
+}
+
 /** Renders a ref badge as a JSX element for the commit row. */
 function renderJsxRefBadge(
     ref: ScmHistoryItemRef,
@@ -80,29 +100,44 @@ function renderJsxRefBadge(
 // ── Widget ──────────────────────────────────────────────────────────────────
 
 @injectable()
-export class ScmHistoryGraphWidget extends ReactWidget {
+export class ScmHistoryGraphWidget extends ReactWidget implements DynamicToolbarWidget {
 
     static readonly ID = 'scm-history-graph-widget';
     static readonly LABEL = nls.localizeByDefault('Graph');
 
     @inject(ScmHistoryGraphModel) protected readonly model: ScmHistoryGraphModel;
     @inject(HoverService) protected readonly hoverService: HoverService;
+    @inject(ClipboardService) protected readonly clipboardService: ClipboardService;
     @inject(MarkdownRendererFactory) protected readonly markdownRendererFactory: MarkdownRendererFactory;
     @inject(ScmService) protected readonly scmService: ScmService;
     @inject(LabelProvider) protected readonly labelProvider: LabelProvider;
     @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
     @inject(OpenerService) protected readonly openerService: OpenerService;
     @inject(ScmContextKeyService) protected readonly scmContextKeys: ScmContextKeyService;
+    @inject(ScmPreferences) protected readonly scmPreferences: ScmPreferences;
+
+    @inject(ILogger) @named('scm:ScmHistoryGraphWidget')
+    protected readonly logger: ILogger;
 
     protected selectedIndex = -1;
+    /** Handle on the virtualized list, used to scroll an entry into view. */
+    protected readonly listRef = React.createRef<VirtuosoHandle>();
     /** Currently selected change row key (`${itemId}-${ci}`), or undefined. */
     protected selectedChangeKey: string | undefined;
     /** Map from commit id → loaded changes (undefined = not loaded yet). */
     protected expandedChanges = new Map<string, ScmHistoryItemChange[] | 'loading'>();
     /** Set of commit ids that are currently expanded. */
     protected expandedIds = new Set<string>();
+    /** Map from commit id → folder paths collapsed in its change tree. */
+    protected collapsedFolders = new Map<string, Set<string>>();
     /** Map from commit id → in-flight CancellationTokenSource for loadChanges. */
     protected loadChangesCts = new Map<string, CancellationTokenSource>();
+    /** Cleanup for the content of the hover currently being shown. */
+    protected readonly toDisposeOnHover = new DisposableCollection();
+
+    protected readonly onDidChangeToolbarItemsEmitter = new Emitter<void>();
+    /** Re-renders the part toolbar on model changes, e.g. to reflect the toggled state of the ref filter picker. */
+    readonly onDidChangeToolbarItems: Event<void> = this.onDidChangeToolbarItemsEmitter.event;
 
     constructor() {
         super();
@@ -116,10 +151,22 @@ export class ScmHistoryGraphWidget extends ReactWidget {
 
     @postConstruct()
     protected init(): void {
+        this.toDispose.push(this.onDidChangeToolbarItemsEmitter);
         this.toDispose.push(
             this.model.onDidChange(() => {
                 this.updateContextKeys();
                 this.update();
+                this.onDidChangeToolbarItemsEmitter.fire();
+            })
+        );
+        this.toDispose.push(
+            this.model.onDidRequestReveal(index => this.revealIndex(index))
+        );
+        this.toDispose.push(
+            this.scmPreferences.onPreferenceChanged(e => {
+                if (e.preferenceName.startsWith('scm.graph.')) {
+                    this.update();
+                }
             })
         );
         this.toDispose.push({
@@ -131,6 +178,15 @@ export class ScmHistoryGraphWidget extends ReactWidget {
                 this.loadChangesCts.clear();
             }
         });
+        this.toDispose.push(this.toDisposeOnHover);
+        this.update();
+    }
+
+    /** Scrolls the entry at `index` into view and selects it. */
+    protected revealIndex(index: number): void {
+        this.selectedIndex = index;
+        this.selectedChangeKey = undefined;
+        this.listRef.current?.scrollToIndex({ index, align: 'center' });
         this.update();
     }
 
@@ -138,6 +194,8 @@ export class ScmHistoryGraphWidget extends ReactWidget {
         const provider = this.model.provider;
         this.scmContextKeys.scmCurrentHistoryItemRefHasRemote.set(!!provider?.currentHistoryItemRemoteRef);
         this.scmContextKeys.scmCurrentHistoryItemRefHasBase.set(!!provider?.currentHistoryItemBaseRef);
+        // Commands like git.pullRef/git.pushRef gate their enablement on this key.
+        this.scmContextKeys.scmCurrentHistoryItemRefInFilter.set(!!provider?.currentHistoryItemRef && this.model.isCurrentRefInFilter());
     }
 
     protected render(): React.ReactNode {
@@ -186,10 +244,11 @@ export class ScmHistoryGraphWidget extends ReactWidget {
 
         return (
             <Virtuoso
+                ref={this.listRef}
                 className='scm-history-graph-list'
                 data={entries as HistoryGraphEntry[]}
                 itemContent={(idx, entry) => this.renderRow(entry, idx, svgWidth)}
-                endReached={hasMore && !loading ? this.handleEndReached : undefined}
+                endReached={hasMore && !loading && this.scmPreferences['scm.graph.pageOnScroll'] !== false ? this.handleEndReached : undefined}
                 overscan={500}
                 components={footer ? { Footer: footer } : {}}
                 style={{ overflowX: 'hidden' }}
@@ -208,8 +267,7 @@ export class ScmHistoryGraphWidget extends ReactWidget {
         const isSelected = idx === this.selectedIndex;
         const isExpanded = this.expandedIds.has(item.id);
         const changes = this.expandedChanges.get(item.id);
-        // The first commit (idx === 0) on lane 0 is treated as HEAD/current
-        const isHead = idx === 0 && graphRow.lane === 0;
+        const isHead = entry.isCurrent;
 
         return (
             <React.Fragment key={item.id}>
@@ -244,14 +302,49 @@ export class ScmHistoryGraphWidget extends ReactWidget {
     }
 
     protected handleRowMouseEnter = (e: React.MouseEvent<HTMLDivElement>, entry: HistoryGraphEntry): void => {
+        this.toDisposeOnHover.dispose();
         this.hoverService.requestHover({
-            content: buildHtmlTooltip(entry, this.markdownRenderer),
+            content: this.buildTooltip(entry),
             target: e.currentTarget,
             position: 'right',
             interactive: true,
         });
     };
 
+    /**
+     * Prefers the hover content supplied by the provider, so that its own links and commands
+     * (author `mailto:`, "Open Commit", remote actions) stay intact, and falls back to the hover
+     * derived from the history item's fields for providers that supply none.
+     */
+    protected buildTooltip(entry: HistoryGraphEntry): HTMLElement {
+        const { tooltip } = entry.item;
+        if (tooltip) {
+            const provided = buildProviderTooltip(tooltip, this.markdownRenderer, this.openerService, this.toDisposeOnHover);
+            if (provided) {
+                return provided;
+            }
+        }
+        return buildHtmlTooltip(entry, this.markdownRenderer, this.model.provider, {
+            openCommit: () => this.openCommitFromTooltip(entry),
+            copyCommitHash: () => this.clipboardService.writeText(entry.item.id),
+        });
+    }
+
+    /** Selects the commit and expands its changes, closing the hover first. */
+    protected openCommitFromTooltip(entry: HistoryGraphEntry): void {
+        this.hoverService.cancelHover();
+        const idx = this.model.entries.indexOf(entry);
+        if (idx < 0) {
+            return;
+        }
+        if (this.expandedIds.has(entry.item.id)) {
+            this.selectedIndex = idx;
+            this.update();
+        } else {
+            this.handleRowClick(idx, entry);
+        }
+    }
+
     protected renderChangesRows(
         itemId: string,
         svgWidth: number,
@@ -274,6 +367,18 @@ export class ScmHistoryGraphWidget extends ReactWidget {
             );
         }
 
+        if (this.model.viewMode === 'tree') {
+            const rootUri = this.scmService.selectedRepository?.provider.rootUri;
+            const rows = buildChangeTreeRows(changes, rootUri, this.collapsedFolders.get(itemId) ?? EMPTY_FOLDER_SET);
+            return (
+                <React.Fragment key={`${itemId}-changes`}>
+                    {rows.map(row => row.type === 'folder'
+                        ? this.renderChangeFolderRow(row, itemId, svgWidth, graphRow)
+                        : this.renderChangeRow(row.change, row.index, itemId, svgWidth, graphRow, row.depth))}
+                </React.Fragment>
+            );
+        }
+
         return (
             <React.Fragment key={`${itemId}-changes`}>
                 {changes.map((change, ci) =>
@@ -283,18 +388,66 @@ export class ScmHistoryGraphWidget extends ReactWidget {
         );
     }
 
+    protected renderChangeFolderRow(
+        row: ChangeTreeFolderRow,
+        itemId: string,
+        svgWidth: number,
+        graphRow: GraphRow
+    ): React.ReactElement {
+        const collapsed = this.isFolderCollapsed(itemId, row.path);
+        return (
+            <div
+                key={`${itemId}-folder-${row.path}`}
+                className='scm-history-change-row scm-history-change-folder-row'
+                onClick={e => this.handleFolderClick(e, itemId, row.path)}
+                role='treeitem'
+                aria-expanded={!collapsed}
+                tabIndex={-1}
+            >
+                {this.renderChangeRowSvg(graphRow, svgWidth)}
+                <div className='scm-history-change-info' style={indentStyle(row.depth)}>
+                    <span className={`codicon ${collapsed ? 'codicon-chevron-right' : 'codicon-chevron-down'} scm-history-change-twistie`} />
+                    <span className='name scm-history-change-name' title={row.path}>{row.label}</span>
+                </div>
+            </div>
+        );
+    }
+
+    protected isFolderCollapsed(itemId: string, path: string): boolean {
+        return !!this.collapsedFolders.get(itemId)?.has(path);
+    }
+
+    protected toggleFolder(itemId: string, path: string): void {
+        let collapsed = this.collapsedFolders.get(itemId);
+        if (!collapsed) {
+            collapsed = new Set<string>();
+            this.collapsedFolders.set(itemId, collapsed);
+        }
+        if (!collapsed.delete(path)) {
+            collapsed.add(path);
+        }
+        this.update();
+    }
+
+    protected handleFolderClick = (e: React.MouseEvent, itemId: string, path: string): void => {
+        e.stopPropagation();
+        this.toggleFolder(itemId, path);
+    };
+
     protected renderChangeRow(
         change: ScmHistoryItemChange,
         ci: number,
         itemId: string,
         svgWidth: number,
-        graphRow: GraphRow
+        graphRow: GraphRow,
+        depth = 0
     ): React.ReactElement {
         const rootUri = this.scmService.selectedRepository?.provider.rootUri;
         const uri = change.modifiedUri ?? change.originalUri ?? change.uri;
         const relativePath = getRepoRelativePath(uri, rootUri);
         const fileName = getFileName(relativePath);
-        const dirPath = relativePath.includes('/')
+        // In tree mode the folder rows already carry the directory.
+        const dirPath = this.model.viewMode === 'list' && relativePath.includes('/')
             ? relativePath.slice(0, relativePath.lastIndexOf('/'))
             : '';
         const status = getChangeStatus(change);
@@ -313,7 +466,7 @@ export class ScmHistoryGraphWidget extends ReactWidget {
                 tabIndex={-1}
             >
                 {this.renderChangeRowSvg(graphRow, svgWidth)}
-                <div className='scm-history-change-info'>
+                <div className='scm-history-change-info' style={indentStyle(depth)}>
                     <span className={`${fileIcon} file-icon scm-history-change-file-icon`} />
                     <div className='scm-history-change-name-container'>
                         <span className='name scm-history-change-name' title={relativePath}>{fileName}</span>
@@ -347,7 +500,7 @@ export class ScmHistoryGraphWidget extends ReactWidget {
                 open(this.openerService, new URI(change.uri));
             }
         } catch (err) {
-            console.error('ScmHistoryGraphWidget: failed to open change', err);
+            this.logger.error('Failed to open change', err);
         }
     }
 
@@ -462,7 +615,9 @@ export class ScmHistoryGraphWidget extends ReactWidget {
 
         // Commit lane lines — split at cy=11
         // Top segment: only drawn if there is an incoming line from above
-        // (i.e. this commit was referenced as a parent by an earlier row)
+        // (i.e. this commit was referenced as a parent by an earlier row).
+        // It keeps the color inherited from the chain above, which may differ
+        // from the commit's own (ref-based) color.
         if (row.hasTopLine) {
             elements.push(
                 <path
@@ -471,7 +626,7 @@ export class ScmHistoryGraphWidget extends ReactWidget {
                     strokeWidth='1px'
                     strokeLinecap='round'
                     d={`M ${commitX} 0 V ${cy}`}
-                    style={{ stroke: commitColor }}
+                    style={{ stroke: laneColor(row.topColor) }}
                 />
             );
         }
@@ -560,11 +715,14 @@ export class ScmHistoryGraphWidget extends ReactWidget {
             return undefined;
         }
 
+        const provider = this.model.provider;
+        const visibleRefs = filterRefsForBadges(refs, provider, this.scmPreferences['scm.graph.badges'] ?? 'filter', this.model.historyItemRefFilter);
+        if (visibleRefs.length === 0) {
+            return undefined;
+        }
         const laneColorValue = entry ? laneColor(entry.graphRow.color) : undefined;
-        const deduplicated = deduplicateRefs(refs);
-        const style: React.CSSProperties = laneColorValue
-            ? { backgroundColor: laneColorValue, color: 'var(--theia-scmGraph-historyItemRefForeground, var(--theia-badge-foreground))' }
-            : {};
+        const deduplicated = deduplicateRefs(visibleRefs);
+        const badgeForeground = 'var(--theia-scmGraph-historyItemRefForeground, var(--theia-badge-foreground))';
 
         const badges: React.ReactElement[] = [];
         for (const info of deduplicated) {
@@ -576,24 +734,25 @@ export class ScmHistoryGraphWidget extends ReactWidget {
             const isRemote = isRemoteRef(ref);
             const onContextMenu = entry ? (e: React.MouseEvent) => this.handleRefBadgeContextMenu(e, entry, ref) : undefined;
 
-            if (isTag) {
-                badges.push(renderJsxRefBadge(ref, 'codicon-tag', false, style, ref.id, onContextMenu));
-            } else if (isRemote) {
-                badges.push(renderJsxRefBadge(ref, 'codicon-cloud', true, style, ref.id, onContextMenu));
-            } else {
-                badges.push(renderJsxRefBadge(ref, 'codicon-git-branch', true, style, ref.id, onContextMenu));
-                if (hasBoth && badges.length < 3) {
-                    badges.push(
-                        <span
-                            key={`${ref.id}-cloud`}
-                            className='scm-history-ref-badge scm-history-ref-badge-cloud'
-                            title={ref.description ?? ref.name}
-                            style={style}
-                        >
-                            <i className='codicon codicon-cloud scm-history-ref-icon' />
-                        </span>
-                    );
-                }
+            // Current/remote/base refs are colored by role, others by the row's lane color
+            const { iconClass, colorIndex } = getRefBadgePresentation(ref, provider);
+            const backgroundColor = colorIndex !== undefined ? laneColor(colorIndex) : laneColorValue;
+            const style: React.CSSProperties = backgroundColor
+                ? { backgroundColor, color: badgeForeground }
+                : {};
+
+            badges.push(renderJsxRefBadge(ref, iconClass, !isTag, style, ref.id, onContextMenu));
+            if (!isTag && !isRemote && hasBoth && badges.length < 3) {
+                badges.push(
+                    <span
+                        key={`${ref.id}-cloud`}
+                        className='scm-history-ref-badge scm-history-ref-badge-cloud'
+                        title={ref.description ?? ref.name}
+                        style={style}
+                    >
+                        <i className='codicon codicon-cloud scm-history-ref-icon' />
+                    </span>
+                );
             }
         }
         return badges;
@@ -650,6 +809,7 @@ export class ScmHistoryGraphWidget extends ReactWidget {
 
         if (this.expandedIds.has(item.id)) {
             this.expandedIds.delete(item.id);
+            this.collapsedFolders.delete(item.id);
             const cts = this.loadChangesCts.get(item.id);
             if (cts) {
                 cts.cancel();
@@ -690,7 +850,7 @@ export class ScmHistoryGraphWidget extends ReactWidget {
             }
         } catch (err) {
             if (!cts.token.isCancellationRequested) {
-                console.error('ScmHistoryGraphWidget: failed to load changes', err);
+                this.logger.error('Failed to load changes', err);
                 this.expandedChanges.set(item.id, []);
                 this.update();
             }

package/src/browser/scm-provider.ts

@@ -19,6 +19,7 @@
 import { Disposable, Event } from '@theia/core/lib/common';
 import URI from '@theia/core/lib/common/uri';
 import { CancellationToken } from '@theia/core/lib/common/cancellation';
+import { MarkdownString } from '@theia/core/lib/common/markdown-rendering/markdown-string';
 
 export interface ScmProvider extends Disposable {
     readonly id: string;
@@ -145,7 +146,14 @@ export interface ScmHistoryItem {
     readonly authorIcon?: string;
     readonly displayId?: string;
     readonly timestamp?: number;
-    readonly tooltip?: string;
+    /**
+     * Hover content supplied by the provider. When present, it is rendered instead of the
+     * hover the history graph derives from the other fields, so that providers stay in control
+     * of their own links and commands. May be split into sections, which are rendered separated
+     * by horizontal rules. Note that `command:` links are only executed if the containing
+     * {@link MarkdownString} declares them via {@link MarkdownString.isTrusted}.
+     */
+    readonly tooltip?: string | MarkdownString | readonly MarkdownString[];
     readonly statistics?: ScmHistoryItemStatistics;
     readonly references?: readonly ScmHistoryItemRef[];
 }

package/src/browser/style/scm-history-graph.css

@@ -200,6 +200,16 @@
     flex-shrink: 0;
 }
 
+/* Folder rows of the change tree ('View as Tree'). */
+.scm-history-change-twistie {
+    flex-shrink: 0;
+    opacity: 0.8;
+}
+
+.scm-history-change-folder-row .scm-history-change-name {
+    flex: 1;
+}
+
 .scm-history-change-name-container {
     flex: 1;
     display: flex;
@@ -286,18 +296,59 @@
     opacity: 0.6;
 }
 
+/* Markdown rendered into the tooltip keeps the browser's default paragraph margins,
+   which spaces the commit hover out far more than the git blame hover it mirrors. */
+.scm-history-tooltip p {
+    margin: 0;
+}
+
+.scm-history-tooltip p + p {
+    margin-top: 4px;
+}
+
 /* ── Tooltip header icon alignment ──────────────────────────────────────── */
+.scm-history-tooltip-header {
+    margin-bottom: 4px;
+}
+
 .scm-history-tooltip-header .icon-inline {
     vertical-align: middle;
 }
 
+.scm-history-tooltip-header a {
+    color: var(--theia-textLink-foreground);
+    text-decoration: none;
+}
+
+.scm-history-tooltip-header a:hover {
+    text-decoration: underline;
+}
+
+.scm-history-tooltip-avatar {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    vertical-align: middle;
+}
+
+/* ── Tooltip actions (aligned with the git blame hover command links) ───── */
+.scm-history-tooltip-actions a.scm-history-tooltip-action {
+    color: var(--theia-textLink-foreground);
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.scm-history-tooltip-actions a.scm-history-tooltip-action:hover {
+    text-decoration: underline;
+}
+
 /* ── Tooltip stat colors (used inside .theia-hover) ─────────────────────── */
 .scm-history-stat-added {
-    color: var(--theia-gitDecoration-addedResourceForeground, #388a34);
+    color: var(--theia-scmGraph-historyItemHoverAdditionsForeground, var(--theia-gitDecoration-addedResourceForeground, #388a34));
 }
 
 .scm-history-stat-deleted {
-    color: var(--theia-gitDecoration-deletedResourceForeground, #a1260d);
+    color: var(--theia-scmGraph-historyItemHoverDeletionsForeground, var(--theia-gitDecoration-deletedResourceForeground, #a1260d));
 }
 
 /* ── Empty state ─────────────────────────────────────────────────────────── */

package/src/common/scm-preferences.ts

@@ -35,12 +35,39 @@ export const scmPreferenceSchema: PreferenceSchema = {
             ],
             description: nls.localizeByDefault('Controls the default Source Control repository view mode.'),
             default: 'list'
+        },
+        'scm.graph.badges': {
+            type: 'string',
+            enum: ['all', 'filter'],
+            enumDescriptions: [
+                nls.localizeByDefault('Show badges of all history item groups in the Source Control Graph view.'),
+                nls.localizeByDefault('Show only the badges of history item groups used as a filter in the Source Control Graph view.')
+            ],
+            description: nls.localizeByDefault(
+                // eslint-disable-next-line max-len
+                'Controls which badges are shown in the Source Control Graph view. The badges are shown on the right side of the graph indicating the names of history item groups.'),
+            default: 'filter'
+        },
+        'scm.graph.pageOnScroll': {
+            type: 'boolean',
+            description: nls.localizeByDefault('Controls whether the Source Control Graph view will load the next page of items when you scroll to the end of the list.'),
+            default: true
+        },
+        'scm.graph.pageSize': {
+            type: 'number',
+            minimum: 1,
+            maximum: 1000,
+            description: nls.localizeByDefault('The number of items to show in the Source Control Graph view by default and when loading more items.'),
+            default: 50
         }
     }
 };
 
 export interface ScmConfiguration {
     'scm.defaultViewMode': 'tree' | 'list'
+    'scm.graph.badges': 'all' | 'filter'
+    'scm.graph.pageOnScroll': boolean
+    'scm.graph.pageSize': number
 }
 
 export const ScmPreferenceContribution = Symbol('ScmPreferenceContribution');