Beanz/pdf.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename the toolbar buttons in order to free their current names

Browse Source 
which can then be used for their future parent container.
This patch aims to simplify a bit the patch in #18385.
This commit is contained in:
Calixte Denizet 2024-09-17 18:08:03 +02:00
parent f68310b7b1
commit ee89bd1c39
8 changed files with 49 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/integration/accessibility_spec.mjs
View File

@ -96,7 +96,7 @@ describe("accessibility", () => {
.toBeTrue(); .toBeTrue();
const handle = await waitForPageRendered(page); 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); await awaitPromise(handle);
} }
}) })

8
test/integration/find_spec.mjs
View File

@ -40,8 +40,8 @@ describe("find bar", () => {
await Promise.all( await Promise.all(
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
// Highlight all occurrences of the letter A (case insensitive). // Highlight all occurrences of the letter A (case insensitive).
await page.click("#viewFind"); await page.click("#viewFindButton");
await page.waitForSelector("#viewFind", { hidden: false }); await page.waitForSelector("#viewFindButton", { hidden: false });
await page.type("#findInput", "a"); await page.type("#findInput", "a");
await page.click("#findHighlightAll"); await page.click("#findHighlightAll");
await page.waitForSelector(".textLayer .highlight"); await page.waitForSelector(".textLayer .highlight");
@ -100,8 +100,8 @@ describe("find bar", () => {
it("must search xfa correctly", async () => { it("must search xfa correctly", async () => {
await Promise.all( await Promise.all(
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await page.click("#viewFind"); await page.click("#viewFindButton");
await page.waitForSelector("#viewFind", { hidden: false }); await page.waitForSelector("#viewFindButton", { hidden: false });
await page.type("#findInput", "preferences"); await page.type("#findInput", "preferences");
await page.waitForSelector("#findInput[data-status='']"); await page.waitForSelector("#findInput[data-status='']");
await page.waitForSelector(".xfaLayer .highlight"); await page.waitForSelector(".xfaLayer .highlight");

4
test/integration/freetext_editor_spec.mjs
View File

@ -2741,7 +2741,7 @@ describe("FreeText Editor", () => {
it("must create an editor from the toolbar", async () => { it("must create an editor from the toolbar", async () => {
await Promise.all( await Promise.all(
pages.map(async ([browserName, page]) => { pages.map(async ([browserName, page]) => {
await page.focus("#editorFreeText"); await page.focus("#editorFreeTextButton");
await page.keyboard.press("Enter"); await page.keyboard.press("Enter");
let selectorEditor = getEditorSelector(0); let selectorEditor = getEditorSelector(0);
@ -2772,7 +2772,7 @@ describe("FreeText Editor", () => {
// Disable editing mode. // Disable editing mode.
await switchToFreeText(page, /* disable = */ true); await switchToFreeText(page, /* disable = */ true);
await page.focus("#editorFreeText"); await page.focus("#editorFreeTextButton");
await page.keyboard.press(" "); await page.keyboard.press(" ");
selectorEditor = getEditorSelector(1); selectorEditor = getEditorSelector(1);
await page.waitForSelector(selectorEditor, { await page.waitForSelector(selectorEditor, {

4
test/integration/scripting_spec.mjs
View File

@ -462,7 +462,7 @@ describe("Interaction", () => {
page, page,
getSelector("47R"), getSelector("47R"),
async () => { async () => {
await page.click("#print"); await page.click("#printButton");
} }
); );
expect(text).withContext(`In ${browserName}`).toEqual("WillPrint"); expect(text).withContext(`In ${browserName}`).toEqual("WillPrint");
@ -509,7 +509,7 @@ describe("Interaction", () => {
page, page,
getSelector("47R"), getSelector("47R"),
async () => { async () => {
await page.click("#download"); await page.click("#downloadButton");
} }
); );
expect(text).withContext(`In ${browserName}`).toEqual("WillSave"); expect(text).withContext(`In ${browserName}`).toEqual("WillSave");

2
test/integration/test_utils.mjs
View File

@ -749,7 +749,7 @@ async function switchToEditor(name, page, disable = false) {
{ once: true } { once: true }
); );
}); });
await page.click(`#editor${name}`); await page.click(`#editor${name}Button`);
name = name.toLowerCase(); name = name.toLowerCase();
await page.waitForSelector( await page.waitForSelector(
".annotationEditorLayer" + ".annotationEditorLayer" +

26
web/viewer.css
View File

@ -778,12 +778,12 @@ body {
background-color: var(--toolbar-icon-hover-bg-color); background-color: var(--toolbar-icon-hover-bg-color);
} }
#sidebarToggle::before { #sidebarToggleButton::before {
mask-image: var(--toolbarButton-sidebarToggle-icon); mask-image: var(--toolbarButton-sidebarToggle-icon);
transform: scaleX(var(--dir-factor)); transform: scaleX(var(--dir-factor));
} }
#secondaryToolbarToggle::before { #secondaryToolbarToggleButton::before {
mask-image: var(--toolbarButton-secondaryToolbarToggle-icon); mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
transform: scaleX(var(--dir-factor)); transform: scaleX(var(--dir-factor));
} }
@ -796,35 +796,35 @@ body {
mask-image: var(--toolbarButton-pageDown-icon); mask-image: var(--toolbarButton-pageDown-icon);
} }
#zoomOut::before { #zoomOutButton::before {
mask-image: var(--toolbarButton-zoomOut-icon); mask-image: var(--toolbarButton-zoomOut-icon);
} }
#zoomIn::before { #zoomInButton::before {
mask-image: var(--toolbarButton-zoomIn-icon); mask-image: var(--toolbarButton-zoomIn-icon);
} }
#editorFreeText::before { #editorFreeTextButton::before {
mask-image: var(--toolbarButton-editorFreeText-icon); mask-image: var(--toolbarButton-editorFreeText-icon);
} }
#editorHighlight::before { #editorHighlightButton::before {
mask-image: var(--toolbarButton-editorHighlight-icon); mask-image: var(--toolbarButton-editorHighlight-icon);
} }
#editorInk::before { #editorInkButton::before {
mask-image: var(--toolbarButton-editorInk-icon); mask-image: var(--toolbarButton-editorInk-icon);
} }
#editorStamp::before { #editorStampButton::before {
mask-image: var(--toolbarButton-editorStamp-icon); mask-image: var(--toolbarButton-editorStamp-icon);
} }
#print::before { #printButton::before {
mask-image: var(--toolbarButton-print-icon); mask-image: var(--toolbarButton-print-icon);
} }
#download::before { #downloadButton::before {
mask-image: var(--toolbarButton-download-icon); mask-image: var(--toolbarButton-download-icon);
} }
@ -850,7 +850,7 @@ body {
transform: scaleX(var(--dir-factor)); transform: scaleX(var(--dir-factor));
} }
#viewFind::before { #viewFindButton::before {
mask-image: var(--toolbarButton-search-icon); mask-image: var(--toolbarButton-search-icon);
} }
@ -1443,11 +1443,11 @@ dialog :link {
} }
} }
#findPrevious::before { #findPreviousButton::before {
mask-image: var(--findbarButton-previous-icon); mask-image: var(--findbarButton-previous-icon);
} }
#findNext::before { #findNextButton::before {
mask-image: var(--findbarButton-next-icon); mask-image: var(--findbarButton-next-icon);
} }
} }

26
web/viewer.html
View File

@ -145,11 +145,11 @@ See https://github.com/adobe-type-tools/cmap-resources
<input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="pdfjs-find-input" aria-invalid="false"> <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="pdfjs-find-input" aria-invalid="false">
</span> </span>
<div class="splitToolbarButton"> <div class="splitToolbarButton">
<button id="findPrevious" class="toolbarButton" type="button" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="pdfjs-find-previous-button"> <button id="findPreviousButton" class="toolbarButton" type="button" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="pdfjs-find-previous-button">
<span data-l10n-id="pdfjs-find-previous-button-label">Previous</span> <span data-l10n-id="pdfjs-find-previous-button-label">Previous</span>
</button> </button>
<div class="splitToolbarButtonSeparator"></div> <div class="splitToolbarButtonSeparator"></div>
<button id="findNext" class="toolbarButton" type="button" title="Find the next occurrence of the phrase" tabindex="93" data-l10n-id="pdfjs-find-next-button"> <button id="findNextButton" class="toolbarButton" type="button" title="Find the next occurrence of the phrase" tabindex="93" data-l10n-id="pdfjs-find-next-button">
<span data-l10n-id="pdfjs-find-next-button-label">Next</span> <span data-l10n-id="pdfjs-find-next-button-label">Next</span>
</button> </button>
</div> </div>
@ -340,11 +340,11 @@ See https://github.com/adobe-type-tools/cmap-resources
<div id="toolbarContainer"> <div id="toolbarContainer">
<div id="toolbarViewer"> <div id="toolbarViewer">
<div id="toolbarViewerLeft"> <div id="toolbarViewerLeft">
<button id="sidebarToggle" class="toolbarButton" type="button" title="Toggle Sidebar" tabindex="11" data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false" aria-controls="sidebarContainer"> <button id="sidebarToggleButton" class="toolbarButton" type="button" title="Toggle Sidebar" tabindex="11" data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false" aria-controls="sidebarContainer">
<span data-l10n-id="pdfjs-toggle-sidebar-button-label">Toggle Sidebar</span> <span data-l10n-id="pdfjs-toggle-sidebar-button-label">Toggle Sidebar</span>
</button> </button>
<div class="toolbarButtonSpacer"></div> <div class="toolbarButtonSpacer"></div>
<button id="viewFind" class="toolbarButton" type="button" title="Find in Document" tabindex="12" data-l10n-id="pdfjs-findbar-button" aria-expanded="false" aria-controls="findbar"> <button id="viewFindButton" class="toolbarButton" type="button" title="Find in Document" tabindex="12" data-l10n-id="pdfjs-findbar-button" aria-expanded="false" aria-controls="findbar">
<span data-l10n-id="pdfjs-findbar-button-label">Find</span> <span data-l10n-id="pdfjs-findbar-button-label">Find</span>
</button> </button>
<div class="splitToolbarButton hiddenSmallView"> <div class="splitToolbarButton hiddenSmallView">
@ -363,43 +363,43 @@ See https://github.com/adobe-type-tools/cmap-resources
</div> </div>
<div id="toolbarViewerRight"> <div id="toolbarViewerRight">
<div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup"> <div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
<button id="editorHighlight" class="toolbarButton" type="button" disabled="disabled" title="Highlight" role="radio" aria-checked="false" aria-controls="editorHighlightParamsToolbar" tabindex="31" data-l10n-id="pdfjs-editor-highlight-button"> <button id="editorHighlightButton" class="toolbarButton" type="button" disabled="disabled" title="Highlight" role="radio" aria-checked="false" aria-controls="editorHighlightParamsToolbar" tabindex="31" data-l10n-id="pdfjs-editor-highlight-button">
<span data-l10n-id="pdfjs-editor-highlight-button-label">Highlight</span> <span data-l10n-id="pdfjs-editor-highlight-button-label">Highlight</span>
</button> </button>
<button id="editorFreeText" class="toolbarButton" type="button" disabled="disabled" title="Text" role="radio" aria-checked="false" aria-controls="editorFreeTextParamsToolbar" tabindex="32" data-l10n-id="pdfjs-editor-free-text-button"> <button id="editorFreeTextButton" class="toolbarButton" type="button" disabled="disabled" title="Text" role="radio" aria-checked="false" aria-controls="editorFreeTextParamsToolbar" tabindex="32" data-l10n-id="pdfjs-editor-free-text-button">
<span data-l10n-id="pdfjs-editor-free-text-button-label">Text</span> <span data-l10n-id="pdfjs-editor-free-text-button-label">Text</span>
</button> </button>
<button id="editorInk" class="toolbarButton" type="button" disabled="disabled" title="Draw" role="radio" aria-checked="false" aria-controls="editorInkParamsToolbar" tabindex="33" data-l10n-id="pdfjs-editor-ink-button"> <button id="editorInkButton" class="toolbarButton" type="button" disabled="disabled" title="Draw" role="radio" aria-checked="false" aria-controls="editorInkParamsToolbar" tabindex="33" data-l10n-id="pdfjs-editor-ink-button">
<span data-l10n-id="pdfjs-editor-ink-button-label">Draw</span> <span data-l10n-id="pdfjs-editor-ink-button-label">Draw</span>
</button> </button>
<button id="editorStamp" class="toolbarButton" type="button" disabled="disabled" title="Add or edit images" role="radio" aria-checked="false" aria-controls="editorStampParamsToolbar" tabindex="34" data-l10n-id="pdfjs-editor-stamp-button"> <button id="editorStampButton" class="toolbarButton" type="button" disabled="disabled" title="Add or edit images" role="radio" aria-checked="false" aria-controls="editorStampParamsToolbar" tabindex="34" data-l10n-id="pdfjs-editor-stamp-button">
<span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit images</span> <span data-l10n-id="pdfjs-editor-stamp-button-label">Add or edit images</span>
</button> </button>
</div> </div>
<div id="editorModeSeparator" class="verticalToolbarSeparator"></div> <div id="editorModeSeparator" class="verticalToolbarSeparator"></div>
<button id="print" class="toolbarButton hiddenMediumView" type="button" title="Print" tabindex="41" data-l10n-id="pdfjs-print-button"> <button id="printButton" class="toolbarButton hiddenMediumView" type="button" title="Print" tabindex="41" data-l10n-id="pdfjs-print-button">
<span data-l10n-id="pdfjs-print-button-label">Print</span> <span data-l10n-id="pdfjs-print-button-label">Print</span>
</button> </button>
<button id="download" class="toolbarButton hiddenMediumView" type="button" title="Save" tabindex="42" data-l10n-id="pdfjs-save-button"> <button id="downloadButton" class="toolbarButton hiddenMediumView" type="button" title="Save" tabindex="42" data-l10n-id="pdfjs-save-button">
<span data-l10n-id="pdfjs-save-button-label">Save</span> <span data-l10n-id="pdfjs-save-button-label">Save</span>
</button> </button>
<div class="verticalToolbarSeparator hiddenMediumView"></div> <div class="verticalToolbarSeparator hiddenMediumView"></div>
<button id="secondaryToolbarToggle" class="toolbarButton" type="button" title="Tools" tabindex="43" data-l10n-id="pdfjs-tools-button" aria-expanded="false" aria-controls="secondaryToolbar"> <button id="secondaryToolbarToggleButton" class="toolbarButton" type="button" title="Tools" tabindex="43" data-l10n-id="pdfjs-tools-button" aria-expanded="false" aria-controls="secondaryToolbar">
<span data-l10n-id="pdfjs-tools-button-label">Tools</span> <span data-l10n-id="pdfjs-tools-button-label">Tools</span>
</button> </button>
</div> </div>
<div id="toolbarViewerMiddle"> <div id="toolbarViewerMiddle">
<div class="splitToolbarButton"> <div class="splitToolbarButton">
<button id="zoomOut" class="toolbarButton" type="button" title="Zoom Out" tabindex="21" data-l10n-id="pdfjs-zoom-out-button"> <button id="zoomOutButton" class="toolbarButton" type="button" title="Zoom Out" tabindex="21" data-l10n-id="pdfjs-zoom-out-button">
<span data-l10n-id="pdfjs-zoom-out-button-label">Zoom Out</span> <span data-l10n-id="pdfjs-zoom-out-button-label">Zoom Out</span>
</button> </button>
<div class="splitToolbarButtonSeparator"></div> <div class="splitToolbarButtonSeparator"></div>
<button id="zoomIn" class="toolbarButton" type="button" title="Zoom In" tabindex="22" data-l10n-id="pdfjs-zoom-in-button"> <button id="zoomInButton" class="toolbarButton" type="button" title="Zoom In" tabindex="22" data-l10n-id="pdfjs-zoom-in-button">
<span data-l10n-id="pdfjs-zoom-in-button-label">Zoom In</span> <span data-l10n-id="pdfjs-zoom-in-button-label">Zoom In</span>
</button> </button>
</div> </div>

26
web/viewer.js
View File

@ -47,31 +47,31 @@ function getViewerConfiguration() {
customScaleOption: document.getElementById("customScaleOption"), customScaleOption: document.getElementById("customScaleOption"),
previous: document.getElementById("previous"), previous: document.getElementById("previous"),
next: document.getElementById("next"), next: document.getElementById("next"),
zoomIn: document.getElementById("zoomIn"), zoomIn: document.getElementById("zoomInButton"),
zoomOut: document.getElementById("zoomOut"), zoomOut: document.getElementById("zoomOutButton"),
print: document.getElementById("print"), print: document.getElementById("printButton"),
editorFreeTextButton: document.getElementById("editorFreeText"), editorFreeTextButton: document.getElementById("editorFreeTextButton"),
editorFreeTextParamsToolbar: document.getElementById( editorFreeTextParamsToolbar: document.getElementById(
"editorFreeTextParamsToolbar" "editorFreeTextParamsToolbar"
), ),
editorHighlightButton: document.getElementById("editorHighlight"), editorHighlightButton: document.getElementById("editorHighlightButton"),
editorHighlightParamsToolbar: document.getElementById( editorHighlightParamsToolbar: document.getElementById(
"editorHighlightParamsToolbar" "editorHighlightParamsToolbar"
), ),
editorHighlightColorPicker: document.getElementById( editorHighlightColorPicker: document.getElementById(
"editorHighlightColorPicker" "editorHighlightColorPicker"
), ),
editorInkButton: document.getElementById("editorInk"), editorInkButton: document.getElementById("editorInkButton"),
editorInkParamsToolbar: document.getElementById("editorInkParamsToolbar"), editorInkParamsToolbar: document.getElementById("editorInkParamsToolbar"),
editorStampButton: document.getElementById("editorStamp"), editorStampButton: document.getElementById("editorStampButton"),
editorStampParamsToolbar: document.getElementById( editorStampParamsToolbar: document.getElementById(
"editorStampParamsToolbar" "editorStampParamsToolbar"
), ),
download: document.getElementById("download"), download: document.getElementById("downloadButton"),
}, },
secondaryToolbar: { secondaryToolbar: {
toolbar: document.getElementById("secondaryToolbar"), toolbar: document.getElementById("secondaryToolbar"),
toggleButton: document.getElementById("secondaryToolbarToggle"), toggleButton: document.getElementById("secondaryToolbarToggleButton"),
presentationModeButton: document.getElementById("presentationMode"), presentationModeButton: document.getElementById("presentationMode"),
openFileButton: openFileButton:
typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC") typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC")
@ -105,7 +105,7 @@ function getViewerConfiguration() {
// Divs (and sidebar button) // Divs (and sidebar button)
outerContainer: document.getElementById("outerContainer"), outerContainer: document.getElementById("outerContainer"),
sidebarContainer: document.getElementById("sidebarContainer"), sidebarContainer: document.getElementById("sidebarContainer"),
toggleButton: document.getElementById("sidebarToggle"), toggleButton: document.getElementById("sidebarToggleButton"),
resizer: document.getElementById("sidebarResizer"), resizer: document.getElementById("sidebarResizer"),
// Buttons // Buttons
thumbnailButton: document.getElementById("viewThumbnail"), thumbnailButton: document.getElementById("viewThumbnail"),
@ -122,7 +122,7 @@ function getViewerConfiguration() {
}, },
findBar: { findBar: {
bar: document.getElementById("findbar"), bar: document.getElementById("findbar"),
toggleButton: document.getElementById("viewFind"), toggleButton: document.getElementById("viewFindButton"),
findField: document.getElementById("findInput"), findField: document.getElementById("findInput"),
highlightAllCheckbox: document.getElementById("findHighlightAll"), highlightAllCheckbox: document.getElementById("findHighlightAll"),
caseSensitiveCheckbox: document.getElementById("findMatchCase"), caseSensitiveCheckbox: document.getElementById("findMatchCase"),
@ -130,8 +130,8 @@ function getViewerConfiguration() {
entireWordCheckbox: document.getElementById("findEntireWord"), entireWordCheckbox: document.getElementById("findEntireWord"),
findMsg: document.getElementById("findMsg"), findMsg: document.getElementById("findMsg"),
findResultsCount: document.getElementById("findResultsCount"), findResultsCount: document.getElementById("findResultsCount"),
findPreviousButton: document.getElementById("findPrevious"), findPreviousButton: document.getElementById("findPreviousButton"),
findNextButton: document.getElementById("findNext"), findNextButton: document.getElementById("findNextButton"),
}, },
passwordOverlay: { passwordOverlay: {
dialog: document.getElementById("passwordDialog"), dialog: document.getElementById("passwordDialog"),