Fix: Collapse viewed files without scrolling

When we use toggle.click(), that toggle gets
focused, which causes the window to scroll to the
last collapsed file when we switch to that tab.
That's disruptive and this fixes it.

Author: jacekkopecky

src/webview/css/classes.ts

@@ -0,0 +1,4 @@
+export enum Diff2HtmlCssClasses {
+  Div__DiffFileContent__Collapsed = "d2h-d-none",
+  Input__ViewedToggle__Selected = "d2h-selected",
+}

src/webview/css/elements.ts

@@ -5,6 +5,7 @@ export enum Diff2HtmlCssClassElements {
   Div__File = ".d2h-file-wrapper",
   Div__LeftDiffOnSideBySide__FirstChild = ".d2h-file-side-diff:first-child",
   Div__LineNumberRightOnLineByLine = ".line-num2",
+  Label__ViewedToggle = ".d2h-file-collapse",
   Input__ViewedToggle = ".d2h-file-collapse-input",
   Input__ViewedToggle__Checked = ".d2h-file-collapse-input:checked",
   Td__DeletedLine = ".d2h-del",

src/webview/message/handler.ts

@@ -6,6 +6,7 @@ import { CssPropertiesBasedOnTheme, SkeletonElementIds } from "../../shared/css/
 import { extractNewFileNameFromDiffName, extractNumberFromString } from "../../shared/extract";
 import { MessageToExtension, MessageToWebview, MessageToWebviewHandler } from "../../shared/message";
 import { AppTheme } from "../../shared/types";
+import { Diff2HtmlCssClasses } from "../css/classes";
 import { Diff2HtmlCssClassElements } from "../css/elements";
 import { UpdateWebviewPayload } from "./api";
 import { getSha1Hash } from "./hash";
@@ -275,12 +276,21 @@ export class MessageToWebviewHandlerImpl implements MessageToWebviewHandler {
       if (fileName && viewedState[fileName]) {
         const diffHash = await this.getDiffHash(toggle);
         if (diffHash === viewedState[fileName]) {
-          toggle.click();
+          this.updateDiff2HtmlFileCollapsed(toggle, true);
         } else {
           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;
+    const fileContainer = this.getDiffFileContainer(toggleElement);
+    const label = fileContainer?.querySelector(Diff2HtmlCssClassElements.Label__ViewedToggle);
+    label?.classList.toggle(Diff2HtmlCssClasses.Input__ViewedToggle__Selected, collapse);
+    const fileContent = fileContainer?.querySelector(Diff2HtmlCssClassElements.Div__DiffFileContent);
+    fileContent?.classList.toggle(Diff2HtmlCssClasses.Div__DiffFileContent__Collapsed, collapse);
   }
 
   private async getDiffHash(diffElement: HTMLElement): Promise<string | null> {