Merge pull request #18793 from calixteman/bug1911980

[Editor] Avoid to have a selected stamp annotation on top of the secondary toolbar (bug 1911980)

test/integration/stamp_editor_spec.mjs

@@ -47,6 +47,7 @@ import {
 import { fileURLToPath } from "url";
 import fs from "fs";
 import path from "path";
+import { PNG } from "pngjs";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -1235,4 +1236,49 @@ describe("Stamp Editor", () => {
       );
     });
   });
+
+  describe("A stamp musn't be on top of the secondary toolbar", () => {
+    let pages;
+
+    beforeAll(async () => {
+      pages = await loadAndWait("empty.pdf", ".annotationEditorLayer", 600);
+    });
+
+    afterAll(async () => {
+      await closePages(pages);
+    });
+
+    it("must check that a stamp editor isn't on top of the secondary toolbar", async () => {
+      // Run sequentially to avoid clipboard issues.
+      const editorSelector = getEditorSelector(0);
+
+      for (const [, page] of pages) {
+        await switchToStamp(page);
+
+        await copyImage(page, "../images/red.png", 0);
+
+        await page.waitForSelector(editorSelector);
+        await waitForSerialized(page, 1);
+      }
+
+      await Promise.all(
+        pages.map(async ([browserName, page]) => {
+          const debug = false;
+
+          await page.click("#secondaryToolbarToggleButton");
+          await page.waitForSelector("#secondaryToolbar", { visible: true });
+          const secondary = await page.$("#secondaryToolbar");
+          const png = await secondary.screenshot({
+            type: "png",
+            path: debug ? `foo.png` : "",
+          });
+          const secondaryImage = PNG.sync.read(Buffer.from(png));
+          const buffer = new Uint32Array(secondaryImage.data.buffer);
+          expect(buffer.every(x => x === 0xff0000ff))
+            .withContext(`In ${browserName}`)
+            .toBeFalse();
+        })
+      );
+    });
+  });
 });

web/viewer.css

@@ -298,9 +298,9 @@ body {
   inset-inline-start: calc(-1 * var(--sidebar-width));
   width: var(--sidebar-width);
   visibility: hidden;
-  z-index: 100;
+  z-index: 1;
   font: message-box;
-  border-top: 1px solid rgb(51 51 51);
+  border-top: 1px solid transparent;
   border-inline-end: var(--doorhanger-border-color-whcm);
   transition-property: inset-inline-start;
   transition-duration: var(--sidebar-transition-duration);
@@ -338,6 +338,7 @@ body {
   position: absolute;
   inset: var(--toolbar-height) 0 0;
   outline: none;
+  z-index: 0;
 }
 
 #viewerContainer:not(.pdfPresentationMode) {
@@ -355,7 +356,7 @@ body {
 }
 
 .toolbar {
-  z-index: 9999;
+  z-index: 2;
 }
 
 #toolbarSidebar {