@theia/scm 1.75.0-next.4 → 1.75.0-next.42

package/src/browser/scm-history-graph-helpers.ts

@@ -14,16 +14,16 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { ScmHistoryItemRef, ScmHistoryItemChange } from './scm-provider';
+import { ScmHistoryItemRef, ScmHistoryItemChange, ScmHistoryProvider } from './scm-provider';
 
 /**
- * Returns the CSS color variable for the given lane index.
+ * Returns the CSS color variable for the given color index.
  * Uses Theia's `--theia-scmGraph-*` variables, mirroring the VS Code
  * scm graph color scheme:
- *   lane 0 (current ref)  → historyItemRefColor
- *   lane 1 (remote ref)   → historyItemRemoteRefColor
- *   lane 2 (base ref)     → historyItemBaseRefColor
- *   lane 3–7              → foreground1–5
+ *   0 (current ref)  → historyItemRefColor
+ *   1 (remote ref)   → historyItemRemoteRefColor
+ *   2 (base ref)     → historyItemBaseRefColor
+ *   3–7 (default rotation) → foreground1–5
  */
 export function laneColor(index: number): string {
     switch (index % 8) {
@@ -83,6 +83,180 @@ export function getRepoRelativePath(uri: string, rootUri: string | undefined): s
     return fullPath;
 }
 
+export interface ChangeTreeRowBase {
+    /** Repo-relative path of the row; the expansion key for folders. */
+    readonly path: string;
+    /** Nesting level, used for indentation. */
+    readonly depth: number;
+}
+
+export interface ChangeTreeFolderRow extends ChangeTreeRowBase {
+    readonly type: 'folder';
+    /** Segments rendered for this row; a compacted chain shows `browser/model`. */
+    readonly label: string;
+}
+
+export interface ChangeTreeFileRow extends ChangeTreeRowBase {
+    readonly type: 'file';
+    readonly change: ScmHistoryItemChange;
+    /** Position of the change in the list it came from, so row keys stay stable. */
+    readonly index: number;
+}
+
+export type ChangeTreeRow = ChangeTreeFolderRow | ChangeTreeFileRow;
+
+interface ChangeTreeFolder {
+    readonly folders: Map<string, ChangeTreeFolder>;
+    readonly files: { change: ScmHistoryItemChange; index: number; name: string }[];
+}
+
+/**
+ * Arranges history item changes into the rows of a file tree: folders before
+ * files, each sorted by name, with single-child folder chains compacted into
+ * one row (`src/browser`) the way VS Code's SCM tree renders them. Folders
+ * listed in `collapsedFolders` (by their full path) hide their descendants.
+ */
+export function buildChangeTreeRows(
+    changes: readonly ScmHistoryItemChange[],
+    rootUri: string | undefined,
+    collapsedFolders: ReadonlySet<string>
+): ChangeTreeRow[] {
+    const root: ChangeTreeFolder = { folders: new Map(), files: [] };
+    changes.forEach((change, index) => {
+        const relativePath = getRepoRelativePath(change.modifiedUri ?? change.originalUri ?? change.uri, rootUri);
+        const segments = relativePath.split('/').filter(segment => segment.length > 0);
+        const name = segments.pop() ?? relativePath;
+        let folder = root;
+        for (const segment of segments) {
+            let child = folder.folders.get(segment);
+            if (!child) {
+                child = { folders: new Map(), files: [] };
+                folder.folders.set(segment, child);
+            }
+            folder = child;
+        }
+        folder.files.push({ change, index, name });
+    });
+
+    const rows: ChangeTreeRow[] = [];
+    collectChangeTreeRows(root, '', '', 0, collapsedFolders, rows);
+    return rows;
+}
+
+function collectChangeTreeRows(
+    folder: ChangeTreeFolder,
+    path: string,
+    label: string,
+    depth: number,
+    collapsedFolders: ReadonlySet<string>,
+    rows: ChangeTreeRow[]
+): void {
+    for (const name of [...folder.folders.keys()].sort(compareNames)) {
+        let child = folder.folders.get(name)!;
+        let childPath = path ? `${path}/${name}` : name;
+        let childLabel = label ? `${label}/${name}` : name;
+        // Compact a chain of folders that each hold nothing but one folder.
+        while (child.files.length === 0 && child.folders.size === 1) {
+            const [onlyName, onlyChild] = [...child.folders][0];
+            child = onlyChild;
+            childPath = `${childPath}/${onlyName}`;
+            childLabel = `${childLabel}/${onlyName}`;
+        }
+        rows.push({ type: 'folder', path: childPath, label: childLabel, depth });
+        if (!collapsedFolders.has(childPath)) {
+            collectChangeTreeRows(child, childPath, '', depth + 1, collapsedFolders, rows);
+        }
+    }
+    for (const file of [...folder.files].sort((left, right) => compareNames(left.name, right.name))) {
+        rows.push({
+            type: 'file',
+            path: path ? `${path}/${file.name}` : file.name,
+            depth,
+            change: file.change,
+            index: file.index
+        });
+    }
+}
+
+function compareNames(left: string, right: string): number {
+    return left.localeCompare(right);
+}
+
+/**
+ * Returns the ref-based color index of the given ref (0 = current ref,
+ * 1 = remote ref, 2 = base ref), or `undefined` when the ref is none of
+ * the provider's current history item refs. Mirrors VS Code's scm graph
+ * color map.
+ */
+export function getRefColorIndex(ref: ScmHistoryItemRef, provider: ScmHistoryProvider | undefined): number | undefined {
+    if (!provider) {
+        return undefined;
+    }
+    if (ref.id === provider.currentHistoryItemRef?.id) {
+        return 0;
+    }
+    if (ref.id === provider.currentHistoryItemRemoteRef?.id) {
+        return 1;
+    }
+    if (ref.id === provider.currentHistoryItemBaseRef?.id) {
+        return 2;
+    }
+    return undefined;
+}
+
+/**
+ * Filters which refs get badges in the graph, following VS Code's
+ * `scm.graph.badges` setting: `'all'` shows every ref, `'filter'` shows only
+ * the refs used as the graph's filter — the explicitly picked ref ids, or,
+ * without an explicit filter (auto mode), the current, remote, and base refs.
+ * Without provider information all refs are kept.
+ */
+export function filterRefsForBadges(
+    refs: readonly ScmHistoryItemRef[],
+    provider: ScmHistoryProvider | undefined,
+    badges: 'all' | 'filter',
+    filter?: readonly string[]
+): readonly ScmHistoryItemRef[] {
+    if (badges === 'all') {
+        return refs;
+    }
+    if (filter) {
+        return refs.filter(ref => filter.includes(ref.id));
+    }
+    if (!provider) {
+        return refs;
+    }
+    return refs.filter(ref => getRefColorIndex(ref, provider) !== undefined);
+}
+
+export interface RefBadgePresentation {
+    /** Icon class for the badge icon, e.g. 'codicon-git-branch'. */
+    iconClass: string;
+    /** Ref-based color index (0-2), or `undefined` to use the row color. */
+    colorIndex?: number;
+}
+
+/**
+ * Resolves how a ref badge is presented: the provider-supplied codicon icon
+ * when available (VS Code renders `ref.icon` unconditionally), otherwise a
+ * category fallback with the `target` icon marking the current ref; plus the
+ * ref-based color index.
+ */
+export function getRefBadgePresentation(ref: ScmHistoryItemRef, provider: ScmHistoryProvider | undefined): RefBadgePresentation {
+    const colorIndex = getRefColorIndex(ref, provider);
+    let iconClass: string;
+    if (ref.icon && ref.icon.startsWith('codicon ')) {
+        iconClass = ref.icon.substring('codicon '.length);
+    } else if (isTagRef(ref)) {
+        iconClass = 'codicon-tag';
+    } else if (isRemoteRef(ref)) {
+        iconClass = 'codicon-cloud';
+    } else {
+        iconClass = colorIndex === 0 ? 'codicon-target' : 'codicon-git-branch';
+    }
+    return { iconClass, colorIndex };
+}
+
 export function getRefBadgeClass(ref: ScmHistoryItemRef): string {
     const cat = (ref.category ?? '').toLowerCase();
     if (cat === 'heads' || cat === 'head' || ref.id.startsWith('refs/heads/')) {

package/src/browser/scm-history-graph-lanes.spec.ts

@@ -37,9 +37,14 @@ describe('computeGraphRows', () => {
             expect(lanes(commits)).to.deep.equal([0, 0, 0]);
         });
 
-        it('colors are all 0', () => {
+        it('colors default to the first rotation color (foreground1 = index 3)', () => {
             const rows = computeGraphRows(commits);
-            expect(rows.map(r => r.color)).to.deep.equal([0, 0, 0]);
+            expect(rows.map(r => r.color)).to.deep.equal([3, 3, 3]);
+        });
+
+        it('topColor equals color when no ref color overrides the lane', () => {
+            const rows = computeGraphRows(commits);
+            rows.forEach(r => expect(r.topColor).to.equal(r.color));
         });
 
         it('first parent same-lane continuation emits no separate edge (handled by commit line)', () => {
@@ -201,9 +206,13 @@ describe('computeGraphRows', () => {
             expect(mergeIn.length).to.equal(0);
         });
 
-        it('lane colors are correct modulo 8', () => {
+        it('lane colors rotate through the default registry (indices 3-7)', () => {
             const rows = computeGraphRows(commits);
-            rows.forEach(r => expect(r.color).to.equal(r.lane % 8));
+            // O and P1 share lane 0 → first rotation color; P2/P3 opened new lanes
+            expect(rows[0].color).to.equal(3);
+            expect(rows[1].color).to.equal(3);
+            expect(rows[2].color).to.not.equal(rows[3].color);
+            rows.forEach(r => expect(r.color).to.be.within(3, 7));
         });
     });
 
@@ -387,25 +396,14 @@ describe('computeGraphRows', () => {
     });
 
     // -------------------------------------------------------------------------
-    // Lane color wraps at 8
+    // Default color rotation (VS Code cycles scmGraph.foreground1-5)
     // -------------------------------------------------------------------------
-    describe('color wrapping', () => {
-        it('lane color is always lane % 8', () => {
-            // 4 parallel chains so we have lanes 0, 1, 2, 3 occupied at once.
-            // Chain structure: X0→X1→X2, Y0→Y1→Y2, etc., interleaved.
-            const commits = [
-                { id: 'X0', parentIds: ['X1'] },
-                { id: 'Y0', parentIds: ['Y1'] },
-                { id: 'Z0', parentIds: ['Z1'] },
-                { id: 'W0', parentIds: ['W1'] },
-                { id: 'X1', parentIds: [] },
-                { id: 'Y1', parentIds: [] },
-                { id: 'Z1', parentIds: [] },
-                { id: 'W1', parentIds: [] },
-            ];
+    describe('default color rotation', () => {
+        it('cycles through indices 3-7 and wraps', () => {
+            // 6 independent tips → 6 lanes; the sixth wraps back to the first color
+            const commits = ['A', 'B', 'C', 'D', 'E', 'F'].map(id => ({ id, parentIds: [id.toLowerCase()] }));
             const rows = computeGraphRows(commits);
-            // Every row's color must equal lane % 8
-            rows.forEach(r => expect(r.color).to.equal(r.lane % 8));
+            expect(rows.map(r => r.color)).to.deep.equal([3, 4, 5, 6, 7, 3]);
         });
 
         it('assigns distinct lanes to 8 simultaneous branches', () => {
@@ -423,10 +421,57 @@ describe('computeGraphRows', () => {
             const rows = computeGraphRows(commits);
             const laneSet = new Set(rows.map(r => r.lane));
             expect(laneSet.size).to.equal(8); // all distinct lanes
-            // Color of lane 7 is 7, lane 0 is 0
-            const lane7 = rows.find(r => r.lane === 7);
-            expect(lane7).to.not.be.undefined;
-            expect(lane7!.color).to.equal(7);
+            // Default colors never use the reserved ref color indices 0-2
+            rows.forEach(r => expect(r.color).to.be.within(3, 7));
+        });
+    });
+
+    // -------------------------------------------------------------------------
+    // Ref-based colors (VS Code colorMap: current=0, remote=1, base=2)
+    // -------------------------------------------------------------------------
+    describe('ref-based colors', () => {
+        // Remote is one commit ahead: R (origin/main) → L (main = HEAD) → A
+        const behindCommits = [
+            { id: 'R', parentIds: ['L'], colorIndex: 1 },
+            { id: 'L', parentIds: ['A'], colorIndex: 0 },
+            { id: 'A', parentIds: [] },
+        ];
+
+        it('a tip with a color index colors its row', () => {
+            const rows = computeGraphRows(behindCommits);
+            expect(rows[0].color).to.equal(1);
+        });
+
+        it('an overriding commit recolors the chain from its row downward', () => {
+            const rows = computeGraphRows(behindCommits);
+            expect(rows[1].color).to.equal(0);
+            expect(rows[2].color).to.equal(0);
+        });
+
+        it('topColor keeps the inherited color for the segment above an overriding commit', () => {
+            const rows = computeGraphRows(behindCommits);
+            expect(rows[0].topColor).to.equal(1);
+            expect(rows[1].topColor).to.equal(1);
+            expect(rows[2].topColor).to.equal(0);
+        });
+
+        // Diverged: L (main = HEAD) and R (origin/main) both branched off A
+        const divergedCommits = [
+            { id: 'L', parentIds: ['A'], colorIndex: 0 },
+            { id: 'R', parentIds: ['A'], colorIndex: 1 },
+            { id: 'A', parentIds: [] },
+        ];
+
+        it('pass-through edges use the propagated ref color', () => {
+            const rows = computeGraphRows(divergedCommits);
+            const pass = rows[1].edges.find(e => e.type === 'pass-through');
+            expect(pass?.color).to.equal(0);
+        });
+
+        it('merge-in edges from a ref-colored lane keep that color', () => {
+            const rows = computeGraphRows(divergedCommits);
+            const mergeIn = rows[2].edges.find(e => e.type === 'merge-in');
+            expect(mergeIn?.color).to.equal(1);
         });
     });
 

package/src/browser/scm-history-graph-lanes.ts

@@ -47,8 +47,14 @@ export interface GraphEdge {
 export interface GraphRow {
     /** Lane index where the commit node is rendered. */
     readonly lane: number;
-    /** Color index for the commit node dot. */
+    /** Color index for the commit node dot and the lane segment below it. */
     readonly color: number;
+    /**
+     * Color index for the lane segment above the commit node. Differs from
+     * `color` when this commit's ref color overrides the color inherited from
+     * the chain above (e.g. the current branch tip below remote-only commits).
+     */
+    readonly topColor: number;
     /** Edges crossing or originating on this row. */
     readonly edges: readonly GraphEdge[];
     /**
@@ -71,11 +77,29 @@ export interface GraphRow {
 interface MutableGraphRow {
     lane: number;
     color: number;
+    topColor: number;
     edges: GraphEdge[];
     hasContinuation: boolean;
     hasTopLine: boolean;
 }
 
+export interface GraphCommitInput {
+    id: string;
+    parentIds?: readonly string[];
+    /**
+     * Ref-based color index resolved from the commit's references
+     * (0 = current ref, 1 = remote ref, 2 = base ref). When set, it colors
+     * this row and propagates down the first-parent chain, mirroring
+     * VS Code's scm graph color map.
+     */
+    colorIndex?: number;
+}
+
+/** First color index of the default rotation (`scmGraph.foreground1`). */
+const DEFAULT_COLOR_FIRST = 3;
+/** Number of default rotation colors (`scmGraph.foreground1-5`). */
+const DEFAULT_COLOR_COUNT = 5;
+
 /**
  * Compute graph rows for an ordered list of commits (topological order,
  * newest first). Each commit must supply its own `id` and `parentIds`.
@@ -84,14 +108,22 @@ interface MutableGraphRow {
  * @returns One `GraphRow` per commit in the same order.
  */
 export function computeGraphRows(
-    commits: ReadonlyArray<{ id: string; parentIds?: readonly string[] }>
+    commits: ReadonlyArray<GraphCommitInput>
 ): GraphRow[] {
     // lanes[i] = id of commit that "owns" lane i (i.e. we are waiting for this
     // commit to appear in the list so we can close the lane).
     const lanes: (string | undefined)[] = [];
-    // laneColors[i] = the color index permanently assigned to lane i
+    // laneColors[i] = the color index currently assigned to lane i
     const laneColors: (number | undefined)[] = [];
 
+    // Default lane colors rotate through foreground1-5, like VS Code's
+    // color registry; indices 0-2 are reserved for ref-based colors.
+    let rotation = -1;
+    const nextDefaultColor = (): number => {
+        rotation = (rotation + 1) % DEFAULT_COLOR_COUNT;
+        return DEFAULT_COLOR_FIRST + rotation;
+    };
+
     const rows: MutableGraphRow[] = [];
 
     for (const commit of commits) {
@@ -106,10 +138,15 @@ export function computeGraphRows(
             // Not yet tracked → open a new lane
             myLane = firstFreeLane(lanes);
             lanes[myLane] = commit.id;
-            laneColors[myLane] = myLane % 8;
+            laneColors[myLane] = commit.colorIndex ?? nextDefaultColor();
         }
 
-        const myColor = laneColors[myLane] ?? myLane % 8;
+        // The segment above the commit keeps the color inherited from the
+        // chain above; the commit's own ref color (if any) takes over from
+        // this row downward.
+        const topColor = laneColors[myLane] ?? DEFAULT_COLOR_FIRST;
+        const myColor = commit.colorIndex ?? topColor;
+        laneColors[myLane] = myColor;
 
         // Collect any duplicate lane occupants: other lanes that were kept
         // alive pointing at this same commit (sibling branch tips whose lane
@@ -120,7 +157,7 @@ export function computeGraphRows(
         if (hasTopLine) {
             for (let li = 0; li < lanes.length; li++) {
                 if (lanes[li] === commit.id && li !== myLane) {
-                    duplicateLanes.push({ lane: li, color: laneColors[li] ?? li % 8 });
+                    duplicateLanes.push({ lane: li, color: laneColors[li] ?? DEFAULT_COLOR_FIRST });
                     lanes[li] = undefined;
                     laneColors[li] = undefined;
                 }
@@ -170,7 +207,7 @@ export function computeGraphRows(
                     // Additional parents get new lanes — branch-out
                     const newLane = firstFreeLane(lanes);
                     lanes[newLane] = pid;
-                    laneColors[newLane] = newLane % 8;
+                    laneColors[newLane] = nextDefaultColor();
                     parentLanes.push(newLane);
                     parentIsExisting.push(false);
                 }
@@ -206,7 +243,7 @@ export function computeGraphRows(
             if (!occupant || occupant === commit.id) {
                 continue;
             }
-            const color = laneColors[li] ?? li % 8;
+            const color = laneColors[li] ?? DEFAULT_COLOR_FIRST;
             edges.push({ fromLane: li, toLane: li, color, type: 'pass-through' });
         }
 
@@ -225,11 +262,11 @@ export function computeGraphRows(
             if (isExisting) {
                 // Merge-in: an existing lane at the top of the row curves into
                 // the commit position at mid-row.
-                const color = laneColors[toLane] ?? toLane % 8;
+                const color = laneColors[toLane] ?? DEFAULT_COLOR_FIRST;
                 edges.push({ fromLane: toLane, toLane: myLane, color, type: 'merge-in' });
             } else {
                 // Branch-out: the commit spawns a new lane below mid-row.
-                const color = laneColors[toLane] ?? toLane % 8;
+                const color = laneColors[toLane] ?? DEFAULT_COLOR_FIRST;
                 edges.push({ fromLane: myLane, toLane, color, type: 'branch-out' });
             }
         }
@@ -245,7 +282,7 @@ export function computeGraphRows(
         // at the parent) so it persists as a pass-through to the parent row.
         const hasContinuation = parentIds.length > 0 && (parentLanes[0] === myLane || lanes[myLane] === parentIds[0]);
 
-        rows.push({ lane: myLane, color: myColor, edges, hasContinuation, hasTopLine });
+        rows.push({ lane: myLane, color: myColor, topColor, edges, hasContinuation, hasTopLine });
     }
 
     return rows;