diff --git a/test/integration/accessibility_spec.mjs b/test/integration/accessibility_spec.mjs
index f3e8e39cb..ad07e43fd 100644
--- a/test/integration/accessibility_spec.mjs
+++ b/test/integration/accessibility_spec.mjs
@@ -96,7 +96,7 @@ describe("accessibility", () => {
.toBeTrue();
const handle = await waitForPageRendered(page);
- await page.click(`#zoom${i < 4 ? "In" : "Out"}`);
+ await page.click(`#zoom${i < 4 ? "In" : "Out"}Button`);
await awaitPromise(handle);
}
})
diff --git a/test/integration/find_spec.mjs b/test/integration/find_spec.mjs
index 3e84abcba..4fca69c5f 100644
--- a/test/integration/find_spec.mjs
+++ b/test/integration/find_spec.mjs
@@ -40,8 +40,8 @@ describe("find bar", () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
// Highlight all occurrences of the letter A (case insensitive).
- await page.click("#viewFind");
- await page.waitForSelector("#viewFind", { hidden: false });
+ await page.click("#viewFindButton");
+ await page.waitForSelector("#viewFindButton", { hidden: false });
await page.type("#findInput", "a");
await page.click("#findHighlightAll");
await page.waitForSelector(".textLayer .highlight");
@@ -100,8 +100,8 @@ describe("find bar", () => {
it("must search xfa correctly", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
- await page.click("#viewFind");
- await page.waitForSelector("#viewFind", { hidden: false });
+ await page.click("#viewFindButton");
+ await page.waitForSelector("#viewFindButton", { hidden: false });
await page.type("#findInput", "preferences");
await page.waitForSelector("#findInput[data-status='']");
await page.waitForSelector(".xfaLayer .highlight");
diff --git a/test/integration/freetext_editor_spec.mjs b/test/integration/freetext_editor_spec.mjs
index 99292260f..fcf7839e6 100644
--- a/test/integration/freetext_editor_spec.mjs
+++ b/test/integration/freetext_editor_spec.mjs
@@ -2741,7 +2741,7 @@ describe("FreeText Editor", () => {
it("must create an editor from the toolbar", async () => {
await Promise.all(
pages.map(async ([browserName, page]) => {
- await page.focus("#editorFreeText");
+ await page.focus("#editorFreeTextButton");
await page.keyboard.press("Enter");
let selectorEditor = getEditorSelector(0);
@@ -2772,7 +2772,7 @@ describe("FreeText Editor", () => {
// Disable editing mode.
await switchToFreeText(page, /* disable = */ true);
- await page.focus("#editorFreeText");
+ await page.focus("#editorFreeTextButton");
await page.keyboard.press(" ");
selectorEditor = getEditorSelector(1);
await page.waitForSelector(selectorEditor, {
diff --git a/test/integration/scripting_spec.mjs b/test/integration/scripting_spec.mjs
index 57b0c52e6..cf010758f 100644
--- a/test/integration/scripting_spec.mjs
+++ b/test/integration/scripting_spec.mjs
@@ -462,7 +462,7 @@ describe("Interaction", () => {
page,
getSelector("47R"),
async () => {
- await page.click("#print");
+ await page.click("#printButton");
}
);
expect(text).withContext(`In ${browserName}`).toEqual("WillPrint");
@@ -509,7 +509,7 @@ describe("Interaction", () => {
page,
getSelector("47R"),
async () => {
- await page.click("#download");
+ await page.click("#downloadButton");
}
);
expect(text).withContext(`In ${browserName}`).toEqual("WillSave");
diff --git a/test/integration/test_utils.mjs b/test/integration/test_utils.mjs
index 3d14f5b92..66673867d 100644
--- a/test/integration/test_utils.mjs
+++ b/test/integration/test_utils.mjs
@@ -749,7 +749,7 @@ async function switchToEditor(name, page, disable = false) {
{ once: true }
);
});
- await page.click(`#editor${name}`);
+ await page.click(`#editor${name}Button`);
name = name.toLowerCase();
await page.waitForSelector(
".annotationEditorLayer" +
diff --git a/web/viewer.css b/web/viewer.css
index 68e777c01..462e7ac4b 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -778,12 +778,12 @@ body {
background-color: var(--toolbar-icon-hover-bg-color);
}
-#sidebarToggle::before {
+#sidebarToggleButton::before {
mask-image: var(--toolbarButton-sidebarToggle-icon);
transform: scaleX(var(--dir-factor));
}
-#secondaryToolbarToggle::before {
+#secondaryToolbarToggleButton::before {
mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
transform: scaleX(var(--dir-factor));
}
@@ -796,35 +796,35 @@ body {
mask-image: var(--toolbarButton-pageDown-icon);
}
-#zoomOut::before {
+#zoomOutButton::before {
mask-image: var(--toolbarButton-zoomOut-icon);
}
-#zoomIn::before {
+#zoomInButton::before {
mask-image: var(--toolbarButton-zoomIn-icon);
}
-#editorFreeText::before {
+#editorFreeTextButton::before {
mask-image: var(--toolbarButton-editorFreeText-icon);
}
-#editorHighlight::before {
+#editorHighlightButton::before {
mask-image: var(--toolbarButton-editorHighlight-icon);
}
-#editorInk::before {
+#editorInkButton::before {
mask-image: var(--toolbarButton-editorInk-icon);
}
-#editorStamp::before {
+#editorStampButton::before {
mask-image: var(--toolbarButton-editorStamp-icon);
}
-#print::before {
+#printButton::before {
mask-image: var(--toolbarButton-print-icon);
}
-#download::before {
+#downloadButton::before {
mask-image: var(--toolbarButton-download-icon);
}
@@ -850,7 +850,7 @@ body {
transform: scaleX(var(--dir-factor));
}
-#viewFind::before {
+#viewFindButton::before {
mask-image: var(--toolbarButton-search-icon);
}
@@ -1443,11 +1443,11 @@ dialog :link {
}
}
- #findPrevious::before {
+ #findPreviousButton::before {
mask-image: var(--findbarButton-previous-icon);
}
- #findNext::before {
+ #findNextButton::before {
mask-image: var(--findbarButton-next-icon);
}
}
diff --git a/web/viewer.html b/web/viewer.html
index 9fa087dda..33004b7a2 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -145,11 +145,11 @@ See https://github.com/adobe-type-tools/cmap-resources
@@ -340,11 +340,11 @@ See https://github.com/adobe-type-tools/cmap-resources