Add diffviewer.openCollapsed command

This command is in the context menu for diff files in
the explorer. It opens the diff file with all parts
collapsed (marked as viewed) to potentially make it
easier to deal with very large diff files.

Author: jacekkopecky

package.json

@@ -50,6 +50,10 @@
         "command": "diffviewer.showSideBySide",
         "title": "Show diff side by side",
         "icon": "$(files)"
+      },
+      {
+        "command": "diffviewer.openCollapsed",
+        "title": "Open diff collapsed (all viewed)"
       }
     ],
     "customEditors": [
@@ -142,6 +146,13 @@
       }
     ],
     "menus": {
+      "explorer/context": [
+        {
+          "command": "diffviewer.openCollapsed",
+          "group": "navigation@99",
+          "when": "resourceLangId == 'diff'"
+        }
+      ],
       "editor/title": [
         {
           "command": "diffviewer.showLineByLine",

src/extension/provider.ts

@@ -43,6 +43,10 @@ export class DiffViewerProvider implements vscode.CustomTextEditorProvider {
       }),
       vscode.commands.registerCommand("diffviewer.showLineByLine", () => setOutputFormatConfig("line-by-line")),
       vscode.commands.registerCommand("diffviewer.showSideBySide", () => setOutputFormatConfig("side-by-side")),
+      vscode.commands.registerCommand("diffviewer.openCollapsed", async (file) => {
+        const collapsedUri = vscode.Uri.from({ ...file, query: "collapsed" });
+        await vscode.commands.executeCommand("vscode.openWith", collapsedUri, "diffViewer");
+      }),
     ];
   }
 
@@ -71,6 +75,8 @@ export class DiffViewerProvider implements vscode.CustomTextEditorProvider {
       docId: diffDocument.uri.fsPath,
     });
 
+    const collapseAll = new URLSearchParams(diffDocument.uri.query).has("collapsed");
+
     const messageReceivedHandler = new MessageToExtensionHandlerImpl({
       diffDocument,
       viewedStateStore,
@@ -82,7 +88,7 @@ export class DiffViewerProvider implements vscode.CustomTextEditorProvider {
     const webviewContext: WebviewContext = { document: diffDocument, panel: webviewPanel, viewedStateStore };
 
     this.registerEventHandlers({ webviewContext, messageHandler: messageReceivedHandler });
-    this.updateWebview(webviewContext);
+    this.updateWebview(webviewContext, collapseAll);
   }
 
   private registerEventHandlers(args: { webviewContext: WebviewContext; messageHandler: MessageToExtensionHandler }) {
@@ -112,7 +118,7 @@ export class DiffViewerProvider implements vscode.CustomTextEditorProvider {
     args.webviewContext.panel.onDidDispose(() => disposables.dispose());
   }
 
-  private updateWebview(webviewContext: WebviewContext): void {
+  private updateWebview(webviewContext: WebviewContext, collapseAll = false): void {
     this.postMessageToWebviewWrapper({
       webview: webviewContext.panel.webview,
       message: {
@@ -153,6 +159,7 @@ export class DiffViewerProvider implements vscode.CustomTextEditorProvider {
             config: config,
             diffFiles: diffFiles,
             viewedState: viewedState,
+            collapseAll,
           },
         },
       });

src/webview/message/api.ts

@@ -6,6 +6,7 @@ export interface UpdateWebviewPayload {
   config: AppConfig;
   diffFiles: DiffFile[];
   viewedState: ViewedState;
+  collapseAll: boolean;
 }
 
 export interface MessageToWebviewApi {

src/webview/message/handler.ts

@@ -52,13 +52,25 @@ export class MessageToWebviewHandlerImpl implements MessageToWebviewHandler {
       const appTheme = this.currentConfig.diff2html.colorScheme === ColorSchemeType.DARK ? "dark" : "light";
       this.setupTheme(appTheme);
 
+      // hide the diff container for now so the full diff doesn't show
+      if (payload.collapseAll) {
+        diffContainer.style.display = "none";
+      }
+
       const diff2html = new Diff2HtmlUI(diffContainer, payload.diffFiles, this.currentConfig.diff2html);
       diff2html.draw();
 
       this.registerViewedToggleHandlers(diffContainer);
       this.registerDiffContainerHandlers(diffContainer);
-      await this.hideViewedFiles(diffContainer, payload.viewedState);
+      if (payload.collapseAll) {
+        this.setAllViewedStates(true);
+      } else {
+        await this.hideViewedFiles(diffContainer, payload.viewedState);
+      }
       this.updateFooter();
+
+      // show the diff
+      diffContainer.style.display = "block";
     });
   }
 
@@ -97,7 +109,7 @@ export class MessageToWebviewHandlerImpl implements MessageToWebviewHandler {
     viewedToggle.classList.remove(CHANGED_SINCE_VIEWED);
     this.scrollDiffFileHeaderIntoView(viewedToggle);
     this.updateFooter();
-    this.sendFileViewedMessage(viewedToggle);
+    this.sendFileViewedMessage(viewedToggle, viewedToggle.checked);
   }
 
   private onMarkAllViewedChangedHandler(event: Event): void {
@@ -107,12 +119,17 @@ export class MessageToWebviewHandlerImpl implements MessageToWebviewHandler {
     }
 
     const isChecked = markAllViewedCheckbox.checked;
+    this.setAllViewedStates(isChecked);
+    this.updateFooter();
+  }
+
+  private setAllViewedStates(viewed: boolean) {
     const allToggles = this.getViewedToggles();
 
     for (const toggle of Array.from(allToggles)) {
-      if (toggle.checked !== isChecked) {
-        toggle.click();
-      }
+      this.updateDiff2HtmlFileCollapsed(toggle, viewed);
+      // no await here so we synchronously return from this function, the sending will happen later as hashes get computed
+      this.sendFileViewedMessage(toggle, viewed);
     }
   }
 
@@ -271,18 +288,27 @@ export class MessageToWebviewHandlerImpl implements MessageToWebviewHandler {
     const viewedToggles = diffContainer.querySelectorAll<HTMLInputElement>(
       Diff2HtmlCssClassElements.Input__ViewedToggle,
     );
+
+    // first synchronously hide all viewed files so we don't render too much in case the file is huge and most is collapsed
+    // we'll do a second pass over hidden files, so we'll hold them in togglesToRevisit
+    const togglesToRevisit = [];
     for (const toggle of Array.from(viewedToggles)) {
       const fileName = this.getDiffElementFileName(toggle);
       if (fileName && viewedState[fileName]) {
-        const diffHash = await this.getDiffHash(toggle);
-        if (diffHash === viewedState[fileName]) {
-          this.updateDiff2HtmlFileCollapsed(toggle, true);
-        } else {
-          toggle.classList.add(CHANGED_SINCE_VIEWED);
-        }
+        togglesToRevisit.push({ toggle, oldSha1: viewedState[fileName] });
+        this.updateDiff2HtmlFileCollapsed(toggle, true);
       }
     }
 
+    for (const { toggle, oldSha1 } of togglesToRevisit) {
+      const diffHash = await this.getDiffHash(toggle);
+      if (diffHash !== oldSha1) {
+        this.updateDiff2HtmlFileCollapsed(toggle, false);
+        toggle.classList.add(CHANGED_SINCE_VIEWED);
+      }
+    }
+  }
+
   private updateDiff2HtmlFileCollapsed(toggleElement: HTMLInputElement, collapse: boolean) {
     // do the same thing that diff2html does to collapse or expand one file
     toggleElement.checked = collapse;
@@ -299,13 +325,13 @@ export class MessageToWebviewHandlerImpl implements MessageToWebviewHandler {
     return fileContent ? getSha1Hash(fileContent) : null;
   }
 
-  private async sendFileViewedMessage(toggleElement: HTMLInputElement): Promise<void> {
-    const fileName = this.getDiffElementFileName(toggleElement);
+  private async sendFileViewedMessage(diffElement: HTMLInputElement, viewed: boolean): Promise<void> {
+    const fileName = this.getDiffElementFileName(diffElement);
     if (!fileName) {
       return;
     }
 
-    const viewedSha1 = toggleElement.checked ? await this.getDiffHash(toggleElement) : null;
+    const viewedSha1 = viewed ? await this.getDiffHash(diffElement) : null;
 
     this.postMessageToExtensionFn({
       kind: "toggleFileViewed",