Merge pull request #18425 from calixteman/bug1879104

[Editor] Make editor toolbars usable whatever their z-index (bug 1879104)

test/integration/highlight_editor_spec.mjs

@@ -30,6 +30,7 @@ import {
   kbUndo,
   loadAndWait,
   scrollIntoView,
+  setCaretAt,
   switchToEditor,
   waitForSerialized,
 } from "./test_utils.mjs";
@@ -1043,19 +1044,12 @@ describe("Highlight Editor", () => {
             `${getEditorSelector(0)}:not(.selectedEditor)`
           );
 
-          await page.evaluate(() => {
+          await setCaretAt(
-            const text =
+            page,
-              "Dynamic languages such as JavaScript are more difficult to com-";
+            1,
-            for (const el of document.querySelectorAll(
+            "Dynamic languages such as JavaScript are more difficult to com-",
-              `.page[data-page-number="${1}"] > .textLayer > span`
+            1
-            )) {
+          );
-              if (el.textContent === text) {
-                window.getSelection().setPosition(el.firstChild, 1);
-                break;
-              }
-            }
-          });
-
           await page.keyboard.press("ArrowUp");
           const [text, offset] = await page.evaluate(() => {
             const selection = window.getSelection();
@@ -1073,19 +1067,12 @@ describe("Highlight Editor", () => {
         pages.map(async ([browserName, page]) => {
           await switchToHighlight(page);
 
-          await page.evaluate(() => {
+          await setCaretAt(
-            const text =
+            page,
-              "Dynamic languages such as JavaScript are more difficult to com-";
+            1,
-            for (const el of document.querySelectorAll(
+            "Dynamic languages such as JavaScript are more difficult to com-",
-              `.page[data-page-number="${1}"] > .textLayer > span`
+            15
-            )) {
+          );
-              if (el.textContent === text) {
-                window.getSelection().setPosition(el.firstChild, 15);
-                break;
-              }
-            }
-          });
-
           await page.keyboard.down("Shift");
           await page.keyboard.press("ArrowDown");
           await page.keyboard.up("Shift");
@@ -1702,4 +1689,81 @@ describe("Highlight Editor", () => {
       );
     });
   });
+
+  describe("Use a toolbar overlapping an other highlight", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait(
+        "tracemonkey.pdf",
+        ".annotationEditorLayer",
+        null,
+        null,
+        {
+          highlightEditorColors:
+            "yellow=#FFFF00,green=#00FF00,blue=#0000FF,pink=#FF00FF,red=#FF0000",
+        }
+      );
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that the toolbar is usable", async () => {
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          await switchToHighlight(page);
+
+          await setCaretAt(
+            page,
+            1,
+            "Dynamic languages such as JavaScript are more difficult to com-",
+            0
+          );
+          await page.keyboard.down("Shift");
+          for (let i = 0; i < 3; i++) {
+            await page.keyboard.press("ArrowDown");
+          }
+          await page.keyboard.up("Shift");
+
+          const editorSelector = getEditorSelector(0);
+          await page.waitForSelector(editorSelector);
+
+          await setCaretAt(
+            page,
+            1,
+            "handle all possible type combinations at runtime. We present an al-",
+            0
+          );
+          await page.keyboard.down("Shift");
+          for (let i = 0; i < 3; i++) {
+            await page.keyboard.press("ArrowDown");
+          }
+          await page.keyboard.up("Shift");
+          await page.waitForSelector(getEditorSelector(1));
+
+          const rect = await getRect(page, editorSelector);
+          const x = rect.x + rect.width / 2;
+          const y = rect.y + rect.height / 2;
+          await page.mouse.click(x, y);
+
+          await page.waitForSelector(
+            `${editorSelector} .editToolbar button.colorPicker`
+          );
+
+          await page.click(`${editorSelector} .editToolbar button.colorPicker`);
+          await page.waitForSelector(
+            `${editorSelector} .editToolbar button[title = "Green"]`
+          );
+          await page.click(
+            `${editorSelector} .editToolbar button[title = "Green"]`
+          );
+          await page.waitForSelector(
+            `.page[data-page-number = "1"] svg.highlight[fill = "#00FF00"]`
+          );
+        })
+      );
+    });
+  });
 });

test/integration/test_utils.mjs

@@ -511,6 +511,24 @@ async function hover(page, selector) {
   await page.mouse.move(rect.x + rect.width / 2, rect.y + rect.height / 2);
 }
 
+async function setCaretAt(page, pageNumber, text, position) {
+  await page.evaluate(
+    (pageN, string, pos) => {
+      for (const el of document.querySelectorAll(
+        `.page[data-page-number="${pageN}"] > .textLayer > span`
+      )) {
+        if (el.textContent === string) {
+          window.getSelection().setPosition(el.firstChild, pos);
+          break;
+        }
+      }
+    },
+    pageNumber,
+    text,
+    position
+  );
+}
+
 const modifier = isMac ? "Meta" : "Control";
 async function kbCopy(page) {
   await page.keyboard.down(modifier);
@@ -713,6 +731,7 @@ export {
   pasteFromClipboard,
   scrollIntoView,
   serializeBitmapDimensions,
+  setCaretAt,
   switchToEditor,
   waitForAnnotationEditorLayer,
   waitForAnnotationModeChanged,

web/annotation_editor_layer_builder.css

@@ -112,6 +112,10 @@
   font-size: calc(100px * var(--scale-factor));
   transform-origin: 0 0;
   cursor: auto;
+
+  .selectedEditor {
+    z-index: 100000 !important;
+  }
 }
 
 .annotationEditorLayer.waiting {