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 1 commit into
base: master
Choose a base branch
from
+153 −0
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
1 commit
Select commit
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
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.

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
142 changes: 142 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,146 @@ describe("Highlight Editor", () => {
});
});
});

describe("Show all disabled status must be persistent", () => {
let pages;

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

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

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 firstEditorSelector = getEditorSelector(0);
await page.waitForSelector(firstEditorSelector);

const showAllButton = "#editorHighlightShowAll";
await page.click(showAllButton);
await page.waitForSelector(`${firstEditorSelector}.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;
}, firstEditorSelector);

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 firstEditorSelector = getEditorSelector(0);
await page.waitForSelector(firstEditorSelector);

const showAllButton = "#editorHighlightShowAll";
await page.click(showAllButton);
await page.waitForSelector(`${firstEditorSelector}.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) {

@calixteman calixteman Jul 5, 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 understand this check by itself... except that it's fixing the floatingToolbar mentioned issue.
So this code is just dead code.

@LoukasPap LoukasPap Jul 9, 2026 •
edited
Loading

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.

The code locates the highlight button from the editToolbar (or floatingToolbar) and verifies it exists. If for example after selecting a text, the editToolbar hadn't show up for a reason, then the highlightFromToolbar button would not exist.

We could rename it to editToolbarHighlightBtn to be more clear.

@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.

It must show up, if it didn't then something is wrong in your test.
You can wait for having it visible and then get it.

await highlightFromToolbar.click();
const secondEditorSelector = getEditorSelector(1);
await page.waitForSelector(secondEditorSelector);
}

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(`${firstEditorSelector}.hidden`);

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

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