From 9a64749dbe241113456cca5908a04472de229349 Mon Sep 17 00:00:00 2001 From: Calixte Denizet Date: Thu, 11 Jul 2024 18:00:36 +0200 Subject: [PATCH] [Editor] Make editor toolbars usable whatever their z-index (bug 1879104) Because of editor z-index, the toolbar belonging to an highlight created before a second adjacent one, can be overlapped by this new one. So when the user select an editor we just show it on front of all the other ones to make sure that it can be used normally. --- test/integration/highlight_editor_spec.mjs | 116 ++++++++++++++++----- test/integration/test_utils.mjs | 19 ++++ web/annotation_editor_layer_builder.css | 4 + 3 files changed, 113 insertions(+), 26 deletions(-) diff --git a/test/integration/highlight_editor_spec.mjs b/test/integration/highlight_editor_spec.mjs index 6c47bbe7e..03ff854ca 100644 --- a/test/integration/highlight_editor_spec.mjs +++ b/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(() => { - const text = - "Dynamic languages such as JavaScript are more difficult to com-"; - for (const el of document.querySelectorAll( - `.page[data-page-number="${1}"] > .textLayer > span` - )) { - if (el.textContent === text) { - window.getSelection().setPosition(el.firstChild, 1); - break; - } - } - }); - + await setCaretAt( + page, + 1, + "Dynamic languages such as JavaScript are more difficult to com-", + 1 + ); 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(() => { - const text = - "Dynamic languages such as JavaScript are more difficult to com-"; - for (const el of document.querySelectorAll( - `.page[data-page-number="${1}"] > .textLayer > span` - )) { - if (el.textContent === text) { - window.getSelection().setPosition(el.firstChild, 15); - break; - } - } - }); - + await setCaretAt( + page, + 1, + "Dynamic languages such as JavaScript are more difficult to com-", + 15 + ); 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"]` + ); + }) + ); + }); + }); }); diff --git a/test/integration/test_utils.mjs b/test/integration/test_utils.mjs index 4e7d28e00..207007fa4 100644 --- a/test/integration/test_utils.mjs +++ b/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, diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css index 0fa433e82..139039bbb 100644 --- a/web/annotation_editor_layer_builder.css +++ b/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 {