@theia/scm 1.75.0-next.3 → 1.75.0-next.35

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

@@ -16,10 +16,11 @@
 
 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 { 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,21 @@ 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
 } 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'];
@@ -80,19 +86,24 @@ 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;
     /** Currently selected change row key (`${itemId}-${ci}`), or undefined. */
@@ -103,6 +114,12 @@ export class ScmHistoryGraphWidget extends ReactWidget {
     protected expandedIds = new 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 +133,19 @@ 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.scmPreferences.onPreferenceChanged(e => {
+                if (e.preferenceName.startsWith('scm.graph.')) {
+                    this.update();
+                }
             })
         );
         this.toDispose.push({
@@ -131,6 +157,7 @@ export class ScmHistoryGraphWidget extends ReactWidget {
                 this.loadChangesCts.clear();
             }
         });
+        this.toDispose.push(this.toDisposeOnHover);
         this.update();
     }
 
@@ -138,6 +165,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 {
@@ -189,7 +218,7 @@ export class ScmHistoryGraphWidget extends ReactWidget {
                 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 +237,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 +272,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,
@@ -347,7 +410,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 +525,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 +536,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 +625,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 +644,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;
@@ -690,7 +759,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

@@ -286,18 +286,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');