Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
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(
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
150 changes: 150 additions & 0 deletions test/integration/highlight_editor_spec.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -2848,4 +2848,154 @@ describe("Highlight Editor", () => {
});
});
});

describe("Show all disabled status must be persistence", () => {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Nit: s/persistence/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 visibilityState = await page.evaluate(selector => {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

It looks like we can just call this const hasHiddenClass and then return a boolean value instead of an object with just a single property, which overall seems simpler.

The same applies to the test below that has a similar pattern.

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

expect(visibilityState.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.$(
".floatingToolbar button[data-action='highlight']"

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.

Is it an AI hallucination ?
.floatingToolbar exists only in the geckoview and is unrelated to highlighting.

);
if (highlightFromToolbar) {

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.

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 visibilityState = await page.evaluate(selector => {
const highlight = document.querySelector(selector);
return {
hasHiddenClass: highlight
? highlight.classList.contains("hidden")
: false,
};
}, firstEditorSelector);

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