Skip to content

Fix false enable of highlights when opening the editor menu #21535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LoukasPap wants to merge 2 commits into
base: master
Choose a base branch
from
+210 −1
Open

Fix false enable of highlights when opening the editor menu #21535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
abac9cf
Fix false enable of highlights when opening the editor menu
LoukasPap Jun 30, 2026
4d5fca8
Fix case when re-enabling editor layers
LoukasPap Jul 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/display/editor/annotation_editor_layer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ class AnnotationEditorLayer {
const annotationElementIds = new Set();
for (const editor of this.#allEditorsIterator) {
editor.enableEditing();
editor.show(true);
editor.show();

@LoukasPap LoukasPap Jul 25, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@calixteman When a page layer was turned back on, every editor was shown again and so did the highlights.

if (editor.annotationElementId) {
this.#uiManager.removeChangedExistingAnnotation(editor);
annotationElementIds.add(editor.annotationElementId);
Expand Down
11 changes: 11 additions & 0 deletions src/display/editor/tools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2162,6 +2162,13 @@ class AnnotationEditorUIManager {
layer.updateMode(mode);
}

const highlightShowAllState = this.#showAllStates?.get(

@calixteman calixteman Jul 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it's enough in general.
With tracemonkey.pdf, you can

  • highlight on the 1st page
  • scroll and highlight on the last one
  • scroll back to the first
  • hide the highlights
  • turn off the highlight mode
  • turn it on
  • scroll to the last page.

@LoukasPap LoukasPap Jul 22, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for drawing my attention to these cases! I'll check them out.

AnnotationEditorParamsType.HIGHLIGHT_SHOW_ALL
);
if (highlightShowAllState !== undefined) {
this.showAllEditors("highlight", highlightShowAllState);
}

if (mode === AnnotationEditorType.POPUP) {
this.#allEditableAnnotations ||=
await this.#pdfDocument.getAnnotationsByType(
Expand Down Expand Up @@ -2294,6 +2301,10 @@ class AnnotationEditorUIManager {
this.#showAllStates?.get(AnnotationEditorParamsType.HIGHLIGHT_SHOW_ALL) ??
true;
if (state !== visible) {
(this.#showAllStates ||= new Map()).set(
AnnotationEditorParamsType.HIGHLIGHT_SHOW_ALL,
visible
);
this.#dispatchUpdateUI([
[AnnotationEditorParamsType.HIGHLIGHT_SHOW_ALL, visible],
]);
Expand Down
198 changes: 198 additions & 0 deletions test/integration/highlight_editor_spec.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2848,4 +2848,202 @@ describe("Highlight Editor", () => {
});
});
});

describe("Highlight visibility must be persistent", () => {
let pages;

beforeEach(async () => {
pages = await loadAndWait("tracemonkey.pdf", ".annotationEditorLayer");
});

afterEach(async () => {
await closePages(pages);
});

describe("Show all button state must be persistent", () => {
it("must preserve the status when closing and opening any editor", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
await switchToHighlight(page);
await page.waitForSelector(
".annotationEditorLayer.highlightEditing"
);

await highlightSpan(page, 1, "Abstract");
const editorSelector0 = getEditorSelector(0);
await page.waitForSelector(editorSelector0);

const showAllButton = "#editorHighlightShowAll";
await page.click(showAllButton);
await page.waitForSelector(`${editorSelector0}.hidden`);

const modeChangedHandle1 = await waitForAnnotationModeChanged(page);
await page.click("#editorHighlightButton");
await awaitPromise(modeChangedHandle1);

const modeChangedHandle2 = await waitForAnnotationModeChanged(page);
await page.click("#editorInkButton");
await awaitPromise(modeChangedHandle2);
await page.waitForSelector(".annotationEditorLayer.inkEditing");

const modeChangedHandle3 = await waitForAnnotationModeChanged(page);
await page.click("#editorHighlightButton");
await awaitPromise(modeChangedHandle3);
await page.waitForSelector(
".annotationEditorLayer.highlightEditing"
);

const isShowAllDisabled = await page.evaluate(() => {
const btn = document.querySelector("#editorHighlightShowAll");
return btn.getAttribute("aria-pressed") === "false";
});

expect(isShowAllDisabled)
.withContext(
`In ${browserName}: Show all button should still be disabled`
)
.toBe(true);

const hasHiddenClass = await page.evaluate(selector => {
const highlight = document.querySelector(selector);
return highlight ? highlight.classList.contains("hidden") : false;
}, editorSelector0);

expect(hasHiddenClass)
.withContext(
`In ${browserName}: Highlight should have hidden CSS class`
)
.toBe(true);
})
);
});

it("must preserve the status when highlighting from edit toolbar and re-opening the editor", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
await switchToHighlight(page);
await page.waitForSelector(
".annotationEditorLayer.highlightEditing"
);

await highlightSpan(page, 1, "Abstract");
const editorSelector0 = getEditorSelector(0);
await page.waitForSelector(editorSelector0);

const showAllButton = "#editorHighlightShowAll";
await page.click(showAllButton);
await page.waitForSelector(`${editorSelector0}.hidden`);

const modeChangedHandle = await waitForAnnotationModeChanged(page);
await page.click("#editorHighlightButton");
await awaitPromise(modeChangedHandle);

const textSpan = await page.$(
`.page[data-page-number = "1"] .textLayer span`
);
const spanRect = await page.evaluate(el => {
const rect = el.getBoundingClientRect();
return {
x: rect.x + rect.width / 2,
y: rect.y + rect.height / 2,
};
}, textSpan);

await page.mouse.click(spanRect.x, spanRect.y);
await page.mouse.click(spanRect.x, spanRect.y);

await page.waitForSelector(".editToolbar");
const highlightFromToolbar = await page.$(
".editToolbar .highlightButton"
);
if (highlightFromToolbar) {
await highlightFromToolbar.click();
const editorSelector1 = getEditorSelector(1);
await page.waitForSelector(editorSelector1);
}

const modeChangedHandle2 = await waitForAnnotationModeChanged(page);
await page.click("#editorHighlightButton");
await awaitPromise(modeChangedHandle2);

const modeChangedHandle3 = await waitForAnnotationModeChanged(page);
await page.click("#editorHighlightButton");
await awaitPromise(modeChangedHandle3);

const isShowAllDisabled = await page.evaluate(() => {
const btn = document.querySelector("#editorHighlightShowAll");
return btn.getAttribute("aria-pressed") === "false";
});

expect(isShowAllDisabled)
.withContext(
`In ${browserName}: Show all button should still be disabled`
)
.toBe(true);

await page.waitForSelector(`${editorSelector0}.hidden`);

const hasHiddenClass = await page.evaluate(selector => {
const highlight = document.querySelector(selector);
return highlight ? highlight.classList.contains("hidden") : false;
}, editorSelector0);

expect(hasHiddenClass)
.withContext(
`In ${browserName}: Highlight should have hidden CSS class`
)
.toBe(true);
})
);
});
});

it("must preserve the hidden state after scrolling away and re-entering highlight mode", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
await switchToHighlight(page);

await highlightSpan(page, 1, "Abstract");
await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlightOutline.selected`
);

await scrollIntoView(page, `.page[data-page-number = "14"]`);

await highlightSpan(page, 14, "References");
await page.waitForSelector(
`.page[data-page-number = "14"] svg.highlightOutline.selected`
);

const showAllButton = "#editorHighlightShowAll";
await page.click(showAllButton);
await page.waitForSelector(
`#editorHighlightShowAll[aria-pressed = "false"]`
);
await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlight.hidden`
);
await page.waitForSelector(
`.page[data-page-number = "14"] svg.highlight.hidden`
);

await switchToHighlight(page, true);
await switchToHighlight(page);

await scrollIntoView(page, `.page[data-page-number = "1"]`);
await page.waitForSelector(
`.page[data-page-number = "1"] svg.highlight.hidden`
);

const highlightIsHidden = await page.evaluate(() => {
const highlight = document.querySelector(
`.page[data-page-number = "1"] svg.highlight`
);
return highlight?.classList.contains("hidden") ?? false;
});
expect(highlightIsHidden).withContext(`In ${browserName}`).toBe(true);
})
);
});
});
});