@kubohiroya/turbowarp-plus-editor-git 0.8.0 → 0.10.0

package/src/repository.ts

@@ -28,6 +28,12 @@ export interface Commit {
 interface Entry {oid: string; mode: number}
 /** Where one version of a file is read from: a commit or tree, the index, or the working tree. */
 type Source = {kind: 'tree'; ref: string} | {kind: 'index'} | {kind: 'worktree'};
+/**
+ * Two versions of a project folder as a person sees them: the last commit and the working tree, so changes split
+ * across the index and the working tree read as one; or one commit and its first parent.
+ */
+export type ProjectComparison = {kind: 'worktree'} | {kind: 'commit'; commit: string};
+const projectSourceLimit = 16 * 1024 * 1024;
 type Metadata = Map<string, Uint8Array | null>;
 export interface Snapshot {
     branch: string | undefined;
@@ -39,6 +45,21 @@ export interface Snapshot {
     metadata: Metadata;
     /** Size and time fingerprint taken before the read. Compare it with `probe(scope)` to see later changes. */
     probe: string;
+    /**
+     * How the current branch stands against `refs/remotes/origin/<branch>` as of the last fetch, from local refs only.
+     * `unknown` when there is no current branch or no tracking ref yet.
+     */
+    upstream: UpstreamRelation;
+}
+export interface UpstreamRelation {
+    state: 'same' | 'ahead' | 'behind' | 'diverged' | 'unknown';
+    /**
+     * Commits on the local branch that the tracking branch lacks, and the reverse. Zero when unknown. Counting reads at
+     * most `upstreamWalkLimit` (1000) commits; past that, a side that has commits of its own reports exactly that limit,
+     * meaning "this many or more". The state itself comes from the merge base and stays exact.
+     */
+    ahead: number;
+    behind: number;
 }
 export interface FileDiff {
     binary: boolean;
@@ -57,6 +78,9 @@ const textLimit = 1024 * 1024;
 const inScope = (path: string, scope: string) => !scope || path === scope || path.startsWith(scope + '/');
 // Above this many work-tree files, probes only watch Git metadata. Edits then need a manual refresh.
 const probeLimit = 5000;
+/** Most commits read to count how far a branch is ahead of or behind its tracking branch. */
+export const upstreamWalkLimit = 1000;
+const trackingRef = (branchRef: string) => 'refs/remotes/origin/' + branchRef.slice('refs/heads/'.length);
 const sameMetadata = (a: Metadata, b: Metadata) => a.size === b.size && [...a].every(([path, bytes]) => sameBytes(bytes, b.get(path) ?? null));
 
 export async function openRepository(root: FileSystemDirectoryHandle) {
@@ -83,7 +107,7 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         if (text.startsWith('ref: refs/heads/')) {
             const ref = text.slice(5);
             pathParts(ref);
-            paths.push('/.git/' + ref);
+            paths.push('/.git/' + ref, '/.git/' + trackingRef(ref));
         } else if (!/^[0-9a-f]{40}$/.test(text)) throw new GitPanelError('invalid');
         const result: Metadata = new Map();
         for (const path of paths) {
@@ -118,7 +142,7 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         const paths = ['.git/HEAD', '.git/index', '.git/packed-refs', '.git/shallow', '.git/config'];
         if (head.startsWith('ref: refs/heads/')) {
             try {pathParts(head.slice(5));} catch {return 'locked';}
-            paths.push('.git/' + head.slice(5));
+            paths.push('.git/' + head.slice(5), '.git/' + trackingRef(head.slice(5)));
         }
         const lines: string[] = [];
         for (const path of paths) {
@@ -163,6 +187,60 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         }) as {path: string; oid: string; mode: number}[];
         return new Map(result.map(({path, oid, mode}) => [path, {oid, mode}]));
     };
+    /**
+     * Compares `refs/heads/<branch>` with `refs/remotes/origin/<branch>` from local refs only. Counts by painting
+     * commits from both tips in committer-time order until every queued commit is reachable from both, like
+     * `git rev-list --left-right --count`, reading at most `upstreamWalkLimit` commits.
+     */
+    const upstreamRelation = async (branch: string | undefined, head: string | null): Promise<UpstreamRelation> => {
+        const unknown: UpstreamRelation = {state: 'unknown', ahead: 0, behind: 0};
+        if (!branch || !head) return unknown;
+        pathParts(trackingRef('refs/heads/' + branch));
+        try {
+            const remote = await git.resolveRef({...options, ref: trackingRef('refs/heads/' + branch)});
+            if (remote === head) return {state: 'same', ahead: 0, behind: 0};
+            const bases = await git.findMergeBase({...options, cache, oids: [head, remote]}) as string[];
+            const hasAhead = !bases.includes(head), hasBehind = !bases.includes(remote);
+            const local = 1, tracking = 2, both = 3;
+            const flags = new Map<string, number>([[head, local], [remote, tracking]]);
+            const time = async (oid: string) => (await git.readCommit({...options, cache, oid})).commit;
+            const queue: {oid: string; time: number; parents: string[]}[] = [];
+            const enqueue = async (oid: string) => {
+                const commit = await time(oid);
+                queue.push({oid, time: commit.committer.timestamp, parents: commit.parent});
+            };
+            await enqueue(head); await enqueue(remote);
+            let read = 2;
+            let complete = true;
+            while (queue.some(item => flags.get(item.oid) !== both)) {
+                if (read >= upstreamWalkLimit) {complete = false; break;}
+                queue.sort((a, b) => b.time - a.time);
+                const item = queue.shift()!;
+                const flag = flags.get(item.oid)!;
+                for (const parent of item.parents) {
+                    const previous = flags.get(parent) ?? 0;
+                    if ((previous | flag) === previous) continue;
+                    flags.set(parent, previous | flag);
+                    if (!queue.some(entry => entry.oid === parent)) {await enqueue(parent); read++;}
+                }
+            }
+            let ahead = 0, behind = 0;
+            for (const flag of flags.values()) {
+                if (flag === local) ahead++;
+                else if (flag === tracking) behind++;
+            }
+            if (!complete) {
+                ahead = hasAhead ? upstreamWalkLimit : 0;
+                behind = hasBehind ? upstreamWalkLimit : 0;
+            }
+            return {state: hasAhead && hasBehind ? 'diverged' : hasAhead ? 'ahead' : hasBehind ? 'behind' : 'same',
+                ahead: hasAhead ? Math.max(ahead, 1) : 0, behind: hasBehind ? Math.max(behind, 1) : 0};
+        } catch (error) {
+            // No tracking ref yet, or history missing from a shallow clone.
+            if (errorCode(error) === 'NotFoundError') return unknown;
+            throw error;
+        }
+    };
     const assertSnapshot = async (snapshot: Snapshot) => {
         if (!sameMetadata(snapshot.metadata, await metadata())) throw new GitPanelError('changed');
     };
@@ -183,6 +261,7 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         const commits = head ? (await git.log({...options, cache, ref: head, depth: 50})).map(({oid, commit}) => ({
             oid, message: commit.message, author: commit.author.name, timestamp: commit.author.timestamp
         })) : [];
+        const upstream = await upstreamRelation(branch || undefined, head);
         const matrix = await git.statusMatrix({...options, cache, refresh: false, filepaths: [scope || '.']});
         const staged = await entries(null, scope);
         const committed = await entries(head || emptyTree, scope);
@@ -204,7 +283,7 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         }
         if (!sameMetadata(before, await metadata())) throw new GitPanelError('changed');
         await fs.checkReads();
-        return {branch: branch || undefined, head, branches, commits, changes, scope, metadata: before, probe: fingerprint};
+        return {branch: branch || undefined, head, branches, commits, changes, scope, metadata: before, probe: fingerprint, upstream};
     };
     const historyChanges = async (snapshot: Snapshot, oid: string): Promise<FileChange[]> => {
         fs.clearReads();
@@ -289,13 +368,21 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         const {blob} = await git.readBlob({...options, cache, oid: entry.oid});
         return blob.byteLength <= limit ? blob : null;
     };
-    const readAsset = async (snapshot: Snapshot, change: FileChange, version: ProjectVersion, md5ext: string, signal: AbortSignal) => {
+    const comparisonSource = async (snapshot: Snapshot, comparison: ProjectComparison, version: ProjectVersion): Promise<Source | null> => {
+        if (comparison.kind === 'worktree') return version === 'after' ? {kind: 'worktree'} : snapshot.head ? {kind: 'tree', ref: snapshot.head} : null;
+        if (version === 'after') return {kind: 'tree', ref: comparison.commit};
+        const parent = (await git.readCommit({...options, cache, oid: comparison.commit})).commit.parent[0];
+        return parent ? {kind: 'tree', ref: parent} : null;
+    };
+    const readAsset = (snapshot: Snapshot, change: FileChange, version: ProjectVersion, md5ext: string, signal: AbortSignal) =>
+        readFolderAsset(snapshot, pathParts(change.path).slice(0, -1), () => sourceOf(snapshot, change, version), md5ext, signal);
+    const readFolderAsset = async (snapshot: Snapshot, folder: string[], resolve: () => Promise<Source | null>, md5ext: string,
+        signal: AbortSignal) => {
         if (signal.aborted) return null;
         fs.clearReads();
         await assertSnapshot(snapshot);
-        const source = await sourceOf(snapshot, change, version);
+        const source = await resolve();
         if (!source) return null;
-        const folder = pathParts(change.path).slice(0, -1);
         const settings = await readVersion(source, [...folder, 'sb3-source.json'].join('/'), folderSettingsLimit);
         const directory = assetsDirectoryParts(settings && new TextDecoder().decode(settings));
         if (!directory || signal.aborted) return null;
@@ -303,6 +390,30 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
         await fs.checkReads();
         return bytes && !signal.aborted ? new Blob([bytes as Uint8Array<ArrayBuffer>]) : null;
     };
+    /** Reads the project file and the assets directory of both versions of a project folder. */
+    const readProject = async (snapshot: Snapshot, folder: string, comparison: ProjectComparison) => {
+        fs.clearReads();
+        await assertSnapshot(snapshot);
+        const parts = pathParts(folder);
+        const read = async (version: ProjectVersion) => {
+            const source = await comparisonSource(snapshot, comparison, version);
+            if (!source) return {source: null, assetsDirectory: 'assets'};
+            const bytes = await readVersion(source, [...parts, 'project.source.json'].join('/'), projectSourceLimit);
+            const settings = await readVersion(source, [...parts, 'sb3-source.json'].join('/'), folderSettingsLimit);
+            const directory = assetsDirectoryParts(settings && new TextDecoder().decode(settings));
+            let text: string | null = null;
+            if (bytes) {
+                try {text = new TextDecoder('utf-8', {fatal: true}).decode(bytes);} catch {
+                    throw new GitPanelError('unsupported');
+                }
+            }
+            return {source: text, assetsDirectory: directory ? directory.join('/') : 'assets'};
+        };
+        const before = await read('before'), after = await read('after');
+        await assertSnapshot(snapshot);
+        await fs.checkReads();
+        return {before: before.source, after: after.source, assetsDirectory: {before: before.assetsDirectory, after: after.assetsDirectory}};
+    };
     const directoryAt = async (path: string) => {
         let directory = root;
         for (const part of pathParts(path)) directory = await directory.getDirectoryHandle(part);
@@ -358,7 +469,18 @@ export async function openRepository(root: FileSystemDirectoryHandle) {
          */
         assetLoader: (snapshot: Snapshot, change: FileChange): ProjectAssetLoader => ({version, md5ext, signal}) =>
             !isAssetName(md5ext) || signal.aborted ? Promise.resolve(null) :
-                serial(() => readAsset(snapshot, change, version, md5ext, signal)).catch(() => null)
+                serial(() => readAsset(snapshot, change, version, md5ext, signal)).catch(() => null),
+        /**
+         * Reads the project file of a folder in both versions of a comparison, with each version's assets directory.
+         * `null` stands for a version without the file. Throws `changed` when the repository changed since the snapshot.
+         */
+        readProject: (snapshot: Snapshot, folder: string, comparison: ProjectComparison) =>
+            serial(() => readProject(snapshot, folder, comparison)),
+        /** Reads the assets of a folder in both versions of a comparison, like `assetLoader`. */
+        projectAssetLoader: (snapshot: Snapshot, folder: string, comparison: ProjectComparison): ProjectAssetLoader =>
+            ({version, md5ext, signal}) => !isAssetName(md5ext) || signal.aborted ? Promise.resolve(null) :
+                serial(() => readFolderAsset(snapshot, pathParts(folder), () => comparisonSource(snapshot, comparison, version),
+                    md5ext, signal)).catch(() => null)
     };
 }
 export type Repository = Awaited<ReturnType<typeof openRepository>>;

package/src/style.css

@@ -8,14 +8,24 @@
 .twgit-panel button:focus-visible, .twgit-panel summary:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
 .twgit-panel button[aria-pressed="true"] { color: HighlightText; background: Highlight; }
 .twgit-context { display: flex; gap: 8px 20px; flex-wrap: wrap; padding: 8px 16px; }
-.twgit-connection { margin: 0 16px 8px; max-height: 45%; overflow: auto; }
+.twgit-context { align-items: center; }
+.twgit-connection, .twgit-git-details { position: relative; }
+.twgit-connection > summary, .twgit-git-details > summary { cursor: pointer; }
+/* Settings and Git details open over the list, so the list and the diff stay where they are. */
+.twgit-connection-body { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; width: min(440px, 80vw); max-height: 60vh;
+    overflow: auto; padding: 10px 12px; background: Canvas; color: CanvasText; border: 1px solid GrayText; border-radius: 6px;
+    box-shadow: 0 8px 24px #0004; }
+.twgit-connection-body > p { margin: 4px 0; overflow-wrap: anywhere; }
+.twgit-sync { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+.twgit-change-kind { display: inline-block; min-width: 2.6em; font-size: 11px; opacity: .8; }
+.twgit-file-details { font-size: 12px; margin-bottom: 6px; }
+.twgit-file-details > p { margin: 2px 0; }
 .twgit-content { display: grid; grid-template-columns: minmax(230px, 30%) minmax(0, 1fr); flex: 1; min-height: 0; }
 .twgit-panel aside { padding: 0 14px 14px; overflow: auto; border-right: 1px solid GrayText; }
 .twgit-panel aside ul { list-style: none; padding: 0; margin: 4px 0; }
 .twgit-panel aside li { overflow-wrap: anywhere; }
 .twgit-panel summary { cursor: pointer; }
 .twgit-panel .twgit-file { width: 100%; border: 0; margin: 1px 0; }
-.twgit-file span { display: inline-block; width: 1.4em; font-family: monospace; }
 .twgit-diff { padding: 0 16px 16px; min-width: 0; overflow: auto; }
 .twgit-diff .diff { font-size: 12px; }
 .twgit-history { list-style: none; margin: 0; padding: 0; }
@@ -27,3 +37,21 @@
 .twgit-view-switch { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
 .twgit-review-unreadable { margin: 6px 0; padding: 8px; background: color-mix(in srgb, #d9822b 16%, Canvas); }
 .twgit-review-comparison .twgit-review-overview dl { margin: 4px 0 8px; }
+.twgit-element-list > section { margin: 6px 0 10px; }
+.twgit-element-target { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; font-size: 14px; }
+.twgit-element-target img, .twgit-element img, .twgit-element-thumbnail { width: 28px; height: 28px; object-fit: contain; flex: none; }
+.twgit-element-thumbnail { display: inline-block; border-radius: 4px; background: color-mix(in srgb, CanvasText 8%, Canvas); }
+.twgit-panel .twgit-element { display: flex; align-items: center; gap: 6px; padding-inline-start: 10px; }
+.twgit-element-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.twgit-file-list { margin-top: 10px; }
+.twgit-element-pictures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.twgit-element-picture { margin: 0; padding: 10px; border: 1px solid color-mix(in srgb, CanvasText 18%, Canvas); border-radius: 6px; }
+.twgit-element-picture img { display: block; max-width: 100%; max-height: 260px; margin: 8px auto 0; object-fit: contain;
+    background: repeating-conic-gradient(color-mix(in srgb, CanvasText 6%, Canvas) 0 25%, Canvas 0 50%) 0 0 / 16px 16px; }
+.twgit-element-values { border-collapse: collapse; width: 100%; font-size: 13px; }
+.twgit-element-values th, .twgit-element-values td { text-align: start; vertical-align: top; padding: 6px 8px;
+    border-bottom: 1px solid color-mix(in srgb, CanvasText 15%, Canvas); overflow-wrap: anywhere; }
+.twgit-element-values td { font-family: ui-monospace, monospace; }
+.twgit-element-files { margin-top: 12px; }
+.twgit-panel .twgit-element span.twgit-element-name { width: auto; font-family: inherit; }
+.twgit-git-details > .twgit-connection-body { left: auto; right: 0; }