[Editor] Add a sidebar allowing the user to navigate between the comments in a pdf (bug 1985567)

This implements what has been specified but it's still not done: we have to handle editing a comment
or an annotation containing one.

Author: calixteman

l10n/en-US/viewer.ftl

@@ -328,6 +328,10 @@ pdfjs-comment-floating-button =
     .title = Comment
     .aria-label = Comment
 pdfjs-comment-floating-button-label = Comment
+pdfjs-editor-comment-button =
+    .title = Comment
+    .aria-label = Comment
+pdfjs-editor-comment-button-label = Comment
 pdfjs-editor-signature-button =
     .title = Add signature
 pdfjs-editor-signature-button-label = Add signature
@@ -395,6 +399,23 @@ pdfjs-free-text2 =
     .aria-label = Text Editor
     .default-content = Start typing…
 
+# Used to show how many comments are present in the pdf file.
+# Variables:
+#   $count (Number) - the number of comments.
+pdfjs-editor-comments-sidebar-title =
+    { $count ->
+        [one] Comment
+       *[other] Comments
+    }
+
+pdfjs-editor-comments-sidebar-close-button =
+    .title = Close the sidebar
+    .aria-label = Close the sidebar
+pdfjs-editor-comments-sidebar-close-button-label = Close the sidebar
+
+# Instructional copy to add a comment by selecting text or an annotations.
+pdfjs-editor-comments-sidebar-no-comments = Add a comment by selecting text or an annotation.
+
 ## Alt-text dialog
 
 # Alternative text (alt text) helps when people can't see the image.

src/display/editor/tools.js

@@ -585,6 +585,8 @@ class AnnotationEditorUIManager {
 
   #activeEditor = null;
 
+  #allEditableAnnotations = null;
+
   #allEditors = new Map();
 
   #allLayers = new Map();
@@ -663,6 +665,8 @@ class AnnotationEditorUIManager {
 
   #showAllStates = null;
 
+  #pdfDocument = null;
+
   #previousStates = {
     isEditing: false,
     isEmpty: true,
@@ -846,6 +850,7 @@ class AnnotationEditorUIManager {
     this.#altTextManager = altTextManager;
     this.#commentManager = commentManager;
     this.#signatureManager = signatureManager;
+    this.#pdfDocument = pdfDocument;
     this._eventBus = eventBus;
     eventBus._on("editingaction", this.onEditingAction.bind(this), { signal });
     eventBus._on("pagechanging", this.onPageChanging.bind(this), { signal });
@@ -928,6 +933,7 @@ class AnnotationEditorUIManager {
     this.#floatingToolbar = null;
     this.#mainHighlightColorPicker?.destroy();
     this.#mainHighlightColorPicker = null;
+    this.#allEditableAnnotations = null;
     if (this.#focusMainContainerTimeoutId) {
       clearTimeout(this.#focusMainContainerTimeoutId);
       this.#focusMainContainerTimeoutId = null;
@@ -937,6 +943,7 @@ class AnnotationEditorUIManager {
       this.#translationTimeoutId = null;
     }
     this._editorUndoBar?.destroy();
+    this.#pdfDocument = null;
   }
 
   combinedSignal(ac) {
@@ -1790,6 +1797,10 @@ class AnnotationEditorUIManager {
     this.#updateModeCapability = Promise.withResolvers();
     this.#currentDrawingSession?.commitOrRemove();
 
+    if (this.#mode === AnnotationEditorType.POPUP) {
+      this.#commentManager?.hideSidebar();
+    }
+
     this.#mode = mode;
     if (mode === AnnotationEditorType.NONE) {
       this.setEditingState(false);
@@ -1800,9 +1811,18 @@ class AnnotationEditorUIManager {
       this.#updateModeCapability.resolve();
       return;
     }
+
     if (mode === AnnotationEditorType.SIGNATURE) {
       await this.#signatureManager?.loadSignatures();
     }
+    if (mode === AnnotationEditorType.POPUP) {
+      this.#allEditableAnnotations ||=
+        await this.#pdfDocument.getAnnotationsByType(
+          new Set(this.#editorTypes.map(editorClass => editorClass._editorType))
+        );
+      this.#commentManager?.showSidebar(this.#allEditableAnnotations);
+    }
+
     this.setEditingState(true);
     await this.#enableAll();
     this.unselectAll();

src/shared/util.js

@@ -75,6 +75,7 @@ const AnnotationEditorType = {
   HIGHLIGHT: 9,
   STAMP: 13,
   INK: 15,
+  POPUP: 16,
   SIGNATURE: 101,
   COMMENT: 102,
 };

web/app.js

@@ -493,7 +493,30 @@ const PDFViewerApplication = {
         : null;
     const commentManager =
       AppOptions.get("enableComment") && appConfig.editCommentDialog
-        ? new CommentManager(appConfig.editCommentDialog, overlayManager)
+        ? new CommentManager(
+            appConfig.editCommentDialog,
+            {
+              sidebar:
+                appConfig.annotationEditorParams?.editorCommentsSidebar || null,
+              commentsList:
+                appConfig.annotationEditorParams?.editorCommentsSidebarList ||
+                null,
+              commentCount:
+                appConfig.annotationEditorParams?.editorCommentsSidebarCount ||
+                null,
+              sidebarTitle:
+                appConfig.annotationEditorParams?.editorCommentsSidebarTitle ||
+                null,
+              closeButton:
+                appConfig.annotationEditorParams
+                  ?.editorCommentsSidebarCloseButton || null,
+              commentToolbarButton:
+                appConfig.toolbar?.editorCommentButton || null,
+            },
+            eventBus,
+            linkService,
+            overlayManager
+          )
         : null;
 
     const enableHWA = AppOptions.get("enableHWA"),
@@ -589,6 +612,10 @@ const PDFViewerApplication = {
         if (editorSignatureButton && AppOptions.get("enableSignatureEditor")) {
           editorSignatureButton.parentElement.hidden = false;
         }
+        const editorCommentButton = appConfig.toolbar?.editorCommentButton;
+        if (editorCommentButton && AppOptions.get("enableComment")) {
+          editorCommentButton.parentElement.hidden = false;
+        }
         this.annotationEditorParams = new AnnotationEditorParams(
           appConfig.annotationEditorParams,
           eventBus

web/comment_manager.css

@@ -351,3 +351,237 @@
     }
   }
 }
+
+#editorCommentsSidebar {
+  --comment-close-button-icon: url(images/comment-closeButton.svg);
+
+  --comment-date-fg-color: light-dark(
+    rgb(21 20 26 / 0.69),
+    rgb(251 251 254 / 0.69)
+  );
+  --comment-bg-color: light-dark(#f9f9fb, #1c1b22);
+  --comment-hover-bg-color: light-dark(
+    rgb(21 20 26 / 0.14),
+    rgb(251 251 254 / 0.14)
+  );
+  --comment-active-bg-color: light-dark(
+    rgb(21 20 26 / 0.21),
+    rgb(251 251 254 / 0.21)
+  );
+  --comment-border-color: light-dark(#f0f0f4, #52525e);
+  --comment-focus-outline-color: light-dark(#0062fa, #00cadb);
+  --comment-fg-color: light-dark(#15141a, #fbfbfe);
+  --comment-count-bg-color: light-dark(#e2f7ff, #00317e);
+  --comment-indicator-active-fg-color: light-dark(#0041a4, #a6ecf4);
+  --comment-indicator-focus-fg-color: light-dark(#5b5b66, #fbfbfe);
+  --comment-indicator-hover-fg-color: light-dark(#0053cb, #61dce9);
+  --comment-indicator-selected-fg-color: light-dark(#0062fa, #00cadb);
+
+  @media screen and (forced-colors: active) {
+    --comment-date-fg-color: CanvasText;
+    --comment-bg-color: Canvas;
+    --comment-hover-bg-color: SelectedItemText;
+    --comment-active-bg-color: SelectedItemText;
+    --comment-border-color: CanvasText;
+    --comment-fg-color: CanvasText;
+    --comment-count-bg-color: Canvas;
+    --comment-indicator-active-fg-color: SelectedItem;
+    --comment-indicator-focus-fg-color: CanvasText;
+    --comment-indicator-hover-fg-color: CanvasText;
+    --comment-indicator-selected-fg-color: SelectedItem;
+  }
+
+  display: flex;
+  width: 239px;
+  height: auto;
+  min-width: 180px;
+  max-width: 632px;
+  padding-bottom: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+
+  #editorCommentsSidebarHeader {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .commentCount {
+      display: flex;
+      align-items: baseline;
+      gap: 6px;
+      user-select: none;
+
+      #editorCommentsSidebarTitle {
+        font: menu;
+        font-style: normal;
+        font-weight: 590;
+        line-height: normal;
+        font-size: 17px;
+        color: var(--comment-fg-color);
+      }
+
+      #editorCommentsSidebarCount {
+        padding: 0 4px;
+        border-radius: 4px;
+        background-color: var(--comment-count-bg-color);
+
+        color: var(--comment-fg-color);
+        text-align: center;
+
+        font: menu;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    }
+
+    #editorCommentsSidebarCloseButton {
+      width: 32px;
+      height: 32px;
+      padding: 8px;
+      border: none;
+      background: none;
+      cursor: pointer;
+
+      &::before {
+        content: "";
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-image: var(--comment-close-button-icon);
+        background-color: var(--comment-fg-color);
+      }
+
+      &:hover {
+        background-color: var(--comment-hover-bg-color);
+      }
+
+      &:active {
+        background-color: var(--comment-active-bg-color);
+      }
+
+      > span {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+      }
+    }
+  }
+
+  #editorCommentsSidebarList {
+    display: flex;
+    width: auto;
+    padding: 1px 16px 0;
+    gap: 10px;
+    flex: 1 0 0;
+    align-self: stretch;
+    align-items: flex-start;
+    flex-direction: column;
+
+    .sidebarComment {
+      display: flex;
+      width: auto;
+      padding: 8px 16px 16px;
+      flex-direction: column;
+      align-items: flex-start;
+      align-self: stretch;
+      gap: 4px;
+
+      border-radius: 8px;
+      border: 0.5px solid var(--comment-border-color);
+      background-color: var(--comment-bg-color);
+
+      &:hover {
+        background-color: var(--comment-hover-bg-color);
+
+        time::after {
+          display: inline-block;
+          background-color: var(--comment-indicator-hover-fg-color);
+        }
+      }
+
+      &:active {
+        background-color: var(--comment-active-bg-color);
+
+        time::after {
+          display: inline-block;
+          background-color: var(--comment-indicator-active-fg-color);
+        }
+      }
+
+      &:is(:focus, :focus-visible) time::after {
+        display: inline-block;
+        background-color: var(--comment-indicator-focus-fg-color);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--comment-focus-outline-color);
+        outline-offset: 2px;
+      }
+
+      &.selected {
+        .sidebarCommentText {
+          max-height: fit-content;
+          -webkit-line-clamp: unset;
+        }
+
+        time::after {
+          display: inline-block;
+          background-color: var(--comment-indicator-selected-fg-color);
+        }
+      }
+
+      .sidebarCommentText {
+        font: menu;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        font-size: 15px;
+        width: 100%;
+        height: fit-content;
+        max-height: 80px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        overflow-wrap: break-word;
+
+        &.noComments {
+          max-height: fit-content;
+          -webkit-line-clamp: unset;
+          user-select: none;
+        }
+      }
+
+      time {
+        width: 100%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: space-between;
+
+        font: menu;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        font-size: 13px;
+
+        &::after {
+          content: "";
+          display: none;
+          width: 16px;
+          height: 16px;
+          mask-repeat: no-repeat;
+          mask-position: center;
+          mask-image: var(--comment-edit-button-icon);
+        }
+      }
+    }
+  }
+}