Create a sidebar object

For now its use is limited to the comment sidebar but it'll be used for the new one
containing the thumbnails.
And make the sidebar more accessible with the keyboard or a screen reader.

Author: calixteman

test/integration/comment_spec.mjs

@@ -21,6 +21,8 @@ import {
   getEditorSelector,
   getRect,
   highlightSpan,
+  kbModifierDown,
+  kbModifierUp,
   loadAndWait,
   scrollIntoView,
   selectEditor,
@@ -545,6 +547,59 @@ describe("Comment", () => {
       );
     });
 
+    it("must check that the comment sidebar is resizable with the keyboard", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await switchToComment(page);
+
+          const sidebarSelector = "#editorCommentParamsToolbar";
+          const handle = await createPromise(page, resolve => {
+            document
+              .getElementById("editorCommentsSidebarResizer")
+              .addEventListener("focus", () => resolve(), { once: true });
+          });
+          await page.focus(`${sidebarSelector} #editorCommentsSidebarResizer`);
+          await awaitPromise(handle);
+
+          // Use Ctrl+ArrowLeft/Right to resize the sidebar.
+          for (const extraWidth of [10, -10]) {
+            const rect = await getRect(page, sidebarSelector);
+            const arrowKey = extraWidth > 0 ? "ArrowLeft" : "ArrowRight";
+            for (let i = 0; i < Math.abs(extraWidth); i++) {
+              await kbModifierDown(page);
+              await page.keyboard.press(arrowKey);
+              await kbModifierUp(page);
+            }
+
+            const rectAfter = await getRect(page, sidebarSelector);
+            expect(Math.abs(rectAfter.width - (rect.width + 10 * extraWidth)))
+              .withContext(`In ${browserName}`)
+              .toBeLessThanOrEqual(1);
+            expect(Math.abs(rectAfter.x - (rect.x - 10 * extraWidth)))
+              .withContext(`In ${browserName}`)
+              .toBeLessThanOrEqual(1);
+          }
+
+          // Use ArrowLeft/Right to resize the sidebar.
+          for (const extraWidth of [10, -10]) {
+            const rect = await getRect(page, sidebarSelector);
+            const arrowKey = extraWidth > 0 ? "ArrowLeft" : "ArrowRight";
+            for (let i = 0; i < Math.abs(extraWidth); i++) {
+              await page.keyboard.press(arrowKey);
+            }
+
+            const rectAfter = await getRect(page, sidebarSelector);
+            expect(Math.abs(rectAfter.width - (rect.width + extraWidth)))
+              .withContext(`In ${browserName}`)
+              .toBeLessThanOrEqual(1);
+            expect(Math.abs(rectAfter.x - (rect.x - extraWidth)))
+              .withContext(`In ${browserName}`)
+              .toBeLessThanOrEqual(1);
+          }
+        })
+      );
+    });
+
     it("must check that comments are in chronological order", async () => {
       await Promise.all(
         pages.map(async ([browserName, page]) => {

web/comment_manager.js

@@ -27,6 +27,7 @@ import {
   Util,
 } from "pdfjs-lib";
 import { binarySearchFirstItem } from "./ui_utils.js";
+import { Sidebar } from "./sidebar.js";
 
 class CommentManager {
   #dialog;
@@ -141,7 +142,7 @@ class CommentManager {
   }
 }
 
-class CommentSidebar {
+class CommentSidebar extends Sidebar {
   #annotations = null;
 
   #eventBus;
@@ -150,8 +151,6 @@ class CommentSidebar {
 
   #boundCommentKeydown = this.#commentKeydown.bind(this);
 
-  #sidebar;
-
   #closeButton;
 
   #commentsList;
@@ -174,16 +173,6 @@ class CommentSidebar {
 
   #uiManager = null;
 
-  #minWidth = 0;
-
-  #maxWidth = 0;
-
-  #initialWidth = 0;
-
-  #width = 0;
-
-  #ltr;
-
   constructor(
     {
       learnMoreUrl,
@@ -201,7 +190,11 @@ class CommentSidebar {
     dateFormat,
     ltr
   ) {
-    this.#sidebar = sidebar;
+    super(
+      { sidebar, resizer: sidebarResizer, toggleButton: commentToolbarButton },
+      ltr,
+      /* isResizerOnTheLeft = */ true
+    );
     this.#sidebarTitle = sidebarTitle;
     this.#commentsList = commentsList;
     this.#commentCount = commentCount;
@@ -210,17 +203,8 @@ class CommentSidebar {
     this.#closeButton = closeButton;
     this.#popup = popup;
     this.#dateFormat = dateFormat;
-    this.#ltr = ltr;
     this.#eventBus = eventBus;
 
-    const style = window.getComputedStyle(sidebar);
-    this.#minWidth = parseFloat(style.getPropertyValue("--sidebar-min-width"));
-    this.#maxWidth = parseFloat(style.getPropertyValue("--sidebar-max-width"));
-    this.#initialWidth = this.#width = parseFloat(
-      style.getPropertyValue("--sidebar-width")
-    );
-
-    this.#makeSidebarResizable(sidebarResizer);
     closeButton.addEventListener("click", () => {
       eventBus.dispatch("switchannotationeditormode", {
         source: this,
@@ -238,64 +222,6 @@ class CommentSidebar {
     };
     commentToolbarButton.addEventListener("keydown", keyDownCallback);
     sidebar.addEventListener("keydown", keyDownCallback);
-    this.#sidebar.hidden = true;
-  }
-
-  #makeSidebarResizable(resizer) {
-    let pointerMoveAC;
-    const cancelResize = () => {
-      this.#width = MathClamp(this.#width, this.#minWidth, this.#maxWidth);
-      this.#sidebar.classList.remove("resizing");
-      pointerMoveAC?.abort();
-      pointerMoveAC = null;
-    };
-    resizer.addEventListener("pointerdown", e => {
-      if (pointerMoveAC) {
-        cancelResize();
-        return;
-      }
-      const { clientX } = e;
-      stopEvent(e);
-      let prevX = clientX;
-      pointerMoveAC = new AbortController();
-      const { signal } = pointerMoveAC;
-      const sign = this.#ltr ? -1 : 1;
-      const sidebar = this.#sidebar;
-      const sidebarStyle = sidebar.style;
-      sidebar.classList.add("resizing");
-      const parentStyle = sidebar.parentElement.style;
-      parentStyle.minWidth = 0;
-      window.addEventListener("contextmenu", noContextMenu, { signal });
-      window.addEventListener(
-        "pointermove",
-        ev => {
-          if (!pointerMoveAC) {
-            return;
-          }
-          stopEvent(ev);
-          const { clientX: x } = ev;
-          const newWidth = (this.#width += sign * (x - prevX));
-          prevX = x;
-          if (newWidth > this.#maxWidth || newWidth < this.#minWidth) {
-            return;
-          }
-          sidebarStyle.width = `${newWidth.toFixed(3)}px`;
-          parentStyle.insetInlineStart = `${(this.#initialWidth - newWidth).toFixed(3)}px`;
-        },
-        { signal, capture: true }
-      );
-      window.addEventListener("blur", cancelResize, { signal });
-      window.addEventListener(
-        "pointerup",
-        ev => {
-          if (pointerMoveAC) {
-            cancelResize();
-            stopEvent(ev);
-          }
-        },
-        { signal }
-      );
-    });
   }
 
   setUIManager(uiManager) {
@@ -318,7 +244,7 @@ class CommentSidebar {
     } else {
       this.#setCommentsCount();
     }
-    this.#sidebar.hidden = false;
+    this._sidebar.hidden = false;
     this.#eventBus.dispatch("reporttelemetry", {
       source: this,
       details: {
@@ -329,7 +255,7 @@ class CommentSidebar {
   }
 
   hide() {
-    this.#sidebar.hidden = true;
+    this._sidebar.hidden = true;
     this.#commentsList.replaceChildren();
     this.#elementsToAnnotations = null;
     this.#idsToElements = null;
@@ -356,7 +282,7 @@ class CommentSidebar {
     if (!element) {
       return;
     }
-    this.#sidebar.scrollTop = element.offsetTop - this.#sidebar.offsetTop;
+    this._sidebar.scrollTop = element.offsetTop - this._sidebar.offsetTop;
     for (const el of this.#commentsList.children) {
       el.classList.toggle("selected", el === element);
     }

web/sidebar.css

@@ -22,6 +22,7 @@
   --sidebar-box-shadow:
     0 0.25px 0.75px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)),
     0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));
+  --sidebar-backdrop-filter: none;
   --sidebar-border-radius: 8px;
   --sidebar-padding: 5px;
   --sidebar-min-width: 180px;
@@ -46,6 +47,7 @@
   width: var(--sidebar-width);
   min-width: var(--sidebar-min-width);
   max-width: var(--sidebar-max-width);
+  backdrop-filter: var(--sidebar-backdrop-filter);
 
   .sidebarResizer {
     width: var(--resizer-width);
@@ -64,6 +66,10 @@
     &:hover {
       background-color: var(--resizer-hover-bg-color);
     }
+    &:focus-visible {
+      background-color: var(--resizer-hover-bg-color);
+      outline: none;
+    }
   }
 
   &.resizing {