Merge pull request #18425 from calixteman/bug1879104

[Editor] Make editor toolbars usable whatever their z-index (bug 1879104)
This commit is contained in:
calixteman 2024-07-11 19:03:03 +02:00 committed by GitHub
commit df5bc544df
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 113 additions and 26 deletions

View file

@ -30,6 +30,7 @@ import {
kbUndo, kbUndo,
loadAndWait, loadAndWait,
scrollIntoView, scrollIntoView,
setCaretAt,
switchToEditor, switchToEditor,
waitForSerialized, waitForSerialized,
} from "./test_utils.mjs"; } from "./test_utils.mjs";
@ -1043,19 +1044,12 @@ describe("Highlight Editor", () => {
`${getEditorSelector(0)}:not(.selectedEditor)` `${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"); await page.keyboard.press("ArrowUp");
const [text, offset] = await page.evaluate(() => { const [text, offset] = await page.evaluate(() => {
const selection = window.getSelection(); const selection = window.getSelection();
@ -1073,19 +1067,12 @@ describe("Highlight Editor", () => {
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await switchToHighlight(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.down("Shift");
await page.keyboard.press("ArrowDown"); await page.keyboard.press("ArrowDown");
await page.keyboard.up("Shift"); 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"]`
);
})
);
});
});
}); });

View file

@ -511,6 +511,24 @@ async function hover(page, selector) {
await page.mouse.move(rect.x + rect.width / 2, rect.y + rect.height / 2); 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"; const modifier = isMac ? "Meta" : "Control";
async function kbCopy(page) { async function kbCopy(page) {
await page.keyboard.down(modifier); await page.keyboard.down(modifier);
@ -713,6 +731,7 @@ export {
pasteFromClipboard, pasteFromClipboard,
scrollIntoView, scrollIntoView,
serializeBitmapDimensions, serializeBitmapDimensions,
setCaretAt,
switchToEditor, switchToEditor,
waitForAnnotationEditorLayer, waitForAnnotationEditorLayer,
waitForAnnotationModeChanged, waitForAnnotationModeChanged,

View file

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