Merge pull request #20780 from wooorm/wooorm/dismiss-popups

Add support for dismissing comment popups with click outside

Author: calixteman

src/display/editor/annotation_editor_layer.js

@@ -901,6 +901,7 @@ class AnnotationEditorLayer {
     const currentMode = this.#uiManager.getMode();
     if (
       currentMode === AnnotationEditorType.STAMP ||
+      currentMode === AnnotationEditorType.POPUP ||
       currentMode === AnnotationEditorType.SIGNATURE
     ) {
       this.#uiManager.unselectAll();

src/display/editor/tools.js

@@ -2393,6 +2393,7 @@ class AnnotationEditorUIManager {
         ed.unselect();
       }
     }
+    this.#commentManager?.destroyPopup();
     this.#selectedEditors.clear();
 
     this.#selectedEditors.add(editor);
@@ -2583,6 +2584,8 @@ class AnnotationEditorUIManager {
       return;
     }
 
+    this.#commentManager?.destroyPopup();
+
     if (!this.hasSelection) {
       return;
     }

test/integration/comment_spec.mjs

@@ -21,6 +21,7 @@ import {
   dragAndDrop,
   getEditorSelector,
   getRect,
+  getSpanRectFromText,
   highlightSpan,
   kbModifierDown,
   kbModifierUp,
@@ -1176,4 +1177,91 @@ describe("Comment", () => {
       );
     });
   });
+
+  describe("Must close comment popups (bug 1989406)", () => {
+    let pages;
+
+    beforeEach(async () => {
+      pages = await loadAndWait(
+        "tracemonkey.pdf",
+        ".annotationEditorLayer",
+        "page-fit",
+        null,
+        { enableComment: true }
+      );
+    });
+
+    afterEach(async () => {
+      await closePages(pages);
+    });
+
+    it("must close a comment popup on escape", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await switchToHighlight(page);
+          await highlightSpan(page, 1, "Abstract");
+          await editComment(page, getEditorSelector(0), "hi");
+          const rect = await getSpanRectFromText(page, 1, "Introduction");
+
+          // Unfocus.
+          await page.mouse.click(rect.x, rect.y);
+
+          await waitAndClick(page, ".annotationCommentButton");
+
+          await page.waitForSelector("#commentPopup", { visible: true });
+
+          await page.keyboard.press("Escape");
+
+          await page.waitForSelector("#commentPopup", { hidden: true });
+        })
+      );
+    });
+
+    it("must close a comment popup on click outside", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await switchToHighlight(page);
+          await highlightSpan(page, 1, "Abstract");
+          await editComment(page, getEditorSelector(0), "hi");
+          const rect = await getSpanRectFromText(page, 1, "Introduction");
+
+          // Unfocus.
+          await page.mouse.click(rect.x, rect.y);
+
+          await waitAndClick(page, ".annotationCommentButton");
+
+          await page.waitForSelector("#commentPopup", { visible: true });
+
+          // Click outside the popup.
+          await page.mouse.click(rect.x, rect.y);
+
+          await page.waitForSelector("#commentPopup", { hidden: true });
+        })
+      );
+    });
+
+    it("must close a comment popup on click on other highlight", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await switchToHighlight(page);
+
+          await highlightSpan(page, 1, "Abstract");
+          await editComment(page, getEditorSelector(0), "hello");
+
+          await highlightSpan(page, 1, "Introduction");
+          await editComment(page, getEditorSelector(1), "world");
+
+          // Open "Abstract" comment popup.
+          await waitAndClick(page, ".annotationCommentButton");
+
+          await page.waitForSelector("#commentPopup", { visible: true });
+
+          // Click on "Introduction" highlight.
+          await waitAndClick(page, getEditorSelector(1));
+
+          await page.waitForSelector("#commentPopup", { hidden: true });
+        })
+      );
+    });
+  });
 });