From eefaf87f57a84a5ff165169efd990269ac2e086b Mon Sep 17 00:00:00 2001 From: Calixte Denizet Date: Mon, 1 Jul 2024 22:37:48 +0200 Subject: [PATCH] Refactor the toolbar html & css to improve its overall accessibility (bug 1171799, bug 1855695) The first goal of this patch was to remove the tabindex because it helps to improve overall a11y. That led to move some html elements associated with the buttons which helped to position these elements relatively to their buttons. Consequently it was easy to change the toolbar height (configurable in Firefox with the pref browser.uidensity): it's the second goal of this patch. For a11y reasons we want to be able to change the height of the toolbar to make the buttons larger. --- src/display/editor/tools.js | 13 +- test/integration/find_spec.mjs | 10 +- test/integration/freetext_editor_spec.mjs | 4 +- test/integration/highlight_editor_spec.mjs | 3 +- test/integration/scripting_spec.mjs | 4 +- test/integration/test_utils.mjs | 2 +- web/annotation_editor_layer_builder.css | 14 +- web/app.js | 3 +- web/pdf_find_bar.js | 29 - web/toolbar.js | 18 +- web/ui_utils.js | 3 + web/viewer.css | 1347 +++++++++++--------- web/viewer.html | 532 ++++---- web/viewer.js | 22 +- 14 files changed, 1049 insertions(+), 955 deletions(-) diff --git a/src/display/editor/tools.js b/src/display/editor/tools.js index 2fb916c72969d9..0833eef8f0bfa7 100644 --- a/src/display/editor/tools.js +++ b/src/display/editor/tools.js @@ -644,10 +644,15 @@ class AnnotationEditorUIManager { * If the focused element is an input, we don't want to handle the arrow. * For example, sliders can be controlled with the arrow keys. */ - const arrowChecker = self => - self.#container.contains(document.activeElement) && - document.activeElement.tagName !== "BUTTON" && - self.hasSomethingToControl(); + const arrowChecker = self => { + const { activeElement } = document; + return ( + self.#container.contains(activeElement) && + activeElement.tagName !== "BUTTON" && + !activeElement.closest(".toolbarButton") && + self.hasSomethingToControl() + ); + }; const textInputChecker = (_self, { target: el }) => { if (el instanceof HTMLInputElement) { diff --git a/test/integration/find_spec.mjs b/test/integration/find_spec.mjs index 3e84abcbad830c..b73f499aee2cca 100644 --- a/test/integration/find_spec.mjs +++ b/test/integration/find_spec.mjs @@ -40,10 +40,10 @@ 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.click("#findHighlightAll + label"); await page.waitForSelector(".textLayer .highlight"); // The PDF file contains the text 'AB BA' in a monospace font on a @@ -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 3150eb0b99ad09..96c5d430079e7b 100644 --- a/test/integration/freetext_editor_spec.mjs +++ b/test/integration/freetext_editor_spec.mjs @@ -2753,7 +2753,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); @@ -2784,7 +2784,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/highlight_editor_spec.mjs b/test/integration/highlight_editor_spec.mjs index 6c47bbe7e0af18..e76a63878da4b9 100644 --- a/test/integration/highlight_editor_spec.mjs +++ b/test/integration/highlight_editor_spec.mjs @@ -1073,11 +1073,12 @@ describe("Highlight Editor", () => { pages.map(async ([browserName, page]) => { await switchToHighlight(page); + await page.focus(`.page[data-page-number="1"] > .textLayer`); await page.evaluate(() => { const text = "Dynamic languages such as JavaScript are more difficult to com-"; for (const el of document.querySelectorAll( - `.page[data-page-number="${1}"] > .textLayer > span` + `.page[data-page-number="1"] > .textLayer > span` )) { if (el.textContent === text) { window.getSelection().setPosition(el.firstChild, 15); diff --git a/test/integration/scripting_spec.mjs b/test/integration/scripting_spec.mjs index a69ba3f317e6a1..4684d0f37cb853 100644 --- a/test/integration/scripting_spec.mjs +++ b/test/integration/scripting_spec.mjs @@ -439,7 +439,7 @@ describe("Interaction", () => { page, getSelector("47R"), async () => { - await page.click("#print"); + await page.click("#printButton"); } ); expect(text).withContext(`In ${browserName}`).toEqual("WillPrint"); @@ -488,7 +488,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 4e7d28e00a62a3..3a9345a4dcfb7c 100644 --- a/test/integration/test_utils.mjs +++ b/test/integration/test_utils.mjs @@ -660,7 +660,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/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css index 0fa433e82771f8..8f1378c4f8b7b5 100644 --- a/web/annotation_editor_layer_builder.css +++ b/web/annotation_editor_layer_builder.css @@ -942,18 +942,9 @@ } #highlightParamsToolbarContainer { - height: auto; - padding-inline: 10px; - padding-block: 10px 16px; gap: 16px; - display: flex; - flex-direction: column; - box-sizing: border-box; - - .editorParamsLabel { - width: fit-content; - inset-inline-start: 0; - } + padding-inline: 10px; + padding-block-end: 16px; .colorPicker { display: flex; @@ -1006,7 +997,6 @@ align-self: stretch; .editorParamsLabel { - width: 100%; height: auto; align-self: stretch; } diff --git a/web/app.js b/web/app.js index 45dc9fd7e221b1..4c3559244efdc2 100644 --- a/web/app.js +++ b/web/app.js @@ -2995,7 +2995,8 @@ function webViewerKeyDown(evt) { curElementTagName === "SELECT" || (curElementTagName === "BUTTON" && (evt.keyCode === /* Enter = */ 13 || evt.keyCode === /* Space = */ 32)) || - curElement?.isContentEditable + curElement?.isContentEditable || + curElement?.closest(".toolbarButton") ) { // Make sure that the secondary toolbar is closed when Escape is pressed. if (evt.keyCode !== /* Esc = */ 27) { diff --git a/web/pdf_find_bar.js b/web/pdf_find_bar.js index ebdd817fb3ce4f..aad75adb7ecb5c 100644 --- a/web/pdf_find_bar.js +++ b/web/pdf_find_bar.js @@ -25,8 +25,6 @@ const MATCHES_COUNT_LIMIT = 1000; * is done by PDFFindController. */ class PDFFindBar { - #resizeObserver = new ResizeObserver(this.#resizeObserverCallback.bind(this)); - constructor(options, eventBus) { this.opened = false; @@ -162,13 +160,6 @@ class PDFFindBar { open() { if (!this.opened) { - // Potentially update the findbar layout, row vs column, when: - // - The width of the viewer itself changes. - // - The width of the findbar changes, by toggling the visibility - // (or localization) of find count/status messages. - this.#resizeObserver.observe(this.bar.parentNode); - this.#resizeObserver.observe(this.bar); - this.opened = true; toggleExpandedBtn(this.toggleButton, true, this.bar); } @@ -180,7 +171,6 @@ class PDFFindBar { if (!this.opened) { return; } - this.#resizeObserver.disconnect(); this.opened = false; toggleExpandedBtn(this.toggleButton, false, this.bar); @@ -195,25 +185,6 @@ class PDFFindBar { this.open(); } } - - #resizeObserverCallback(entries) { - const { bar } = this; - // The find bar has an absolute position and thus the browser extends - // its width to the maximum possible width once the find bar does not fit - // entirely within the window anymore (and its elements are automatically - // wrapped). Here we detect and fix that. - bar.classList.remove("wrapContainers"); - - const findbarHeight = bar.clientHeight; - const inputContainerHeight = bar.firstElementChild.clientHeight; - - if (findbarHeight > inputContainerHeight) { - // The findbar is taller than the input container, which means that - // the browser wrapped some of the elements. For a consistent look, - // wrap all of them to adjust the width of the find bar. - bar.classList.add("wrapContainers"); - } - } } export { PDFFindBar }; diff --git a/web/toolbar.js b/web/toolbar.js index e92b546c4aad47..5ce0f049967bbb 100644 --- a/web/toolbar.js +++ b/web/toolbar.js @@ -186,6 +186,9 @@ class Toolbar { for (const { element, eventName, eventDetails } of buttons) { element.addEventListener("click", evt => { if (eventName !== null) { + if (evt.target !== element) { + return; + } eventBus.dispatch(eventName, { source: this, ...eventDetails, @@ -270,10 +273,17 @@ class Toolbar { ); const isDisable = mode === AnnotationEditorType.DISABLE; - editorFreeTextButton.disabled = isDisable; - editorHighlightButton.disabled = isDisable; - editorInkButton.disabled = isDisable; - editorStampButton.disabled = isDisable; + if (isDisable) { + editorFreeTextButton.disabled = "disabled"; + editorHighlightButton.disabled = "disabled"; + editorInkButton.disabled = "disabled"; + editorStampButton.disabled = "disabled"; + } else { + editorFreeTextButton.removeAttribute("disabled"); + editorHighlightButton.removeAttribute("disabled"); + editorInkButton.removeAttribute("disabled"); + editorStampButton.removeAttribute("disabled"); + } } #updateUIState(resetNumPages = false) { diff --git a/web/ui_utils.js b/web/ui_utils.js index 1ed7e5a3dd7b96..2ddcd38a36e42a 100644 --- a/web/ui_utils.js +++ b/web/ui_utils.js @@ -851,6 +851,9 @@ function apiPageModeToSidebarView(mode) { function toggleCheckedBtn(button, toggle, view = null) { button.classList.toggle("toggled", toggle); button.setAttribute("aria-checked", toggle); + if (button.parentElement.classList.contains("toolbarButtonWithContainer")) { + button.setAttribute("aria-expanded", toggle); + } view?.classList.toggle("hidden", !toggle); } diff --git a/web/viewer.css b/web/viewer.css index 6706ac5cd4ae23..4a76e3867b4018 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -26,9 +26,13 @@ --sidebar-transition-duration: 200ms; --sidebar-transition-timing-function: ease; + --toolbar-height: 32px; + --icon-size: 16px; + --toolbar-icon-opacity: 0.7; --doorhanger-icon-opacity: 0.9; --editor-toolbar-base-offset: 105px; + --doorhanger-height: 8px; --main-color: rgb(12 12 13); --body-bg-color: rgb(212 212 215); @@ -209,11 +213,6 @@ } } -* { - padding: 0; - margin: 0; -} - html, body { height: 100%; @@ -221,6 +220,7 @@ body { } body { + margin: 0; background-color: var(--body-bg-color); scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); @@ -266,6 +266,7 @@ body { width: 100%; height: 100%; position: relative; + margin: 0; } #sidebarContainer { @@ -286,6 +287,7 @@ body { #outerContainer:is(.sidebarMoving, .sidebarOpen) #sidebarContainer { visibility: visible; } + #outerContainer.sidebarOpen #sidebarContainer { inset-inline-start: 0; } @@ -294,6 +296,9 @@ body { position: absolute; inset: 0; min-width: 350px; + margin: 0; + display: flex; + flex-direction: column; } #sidebarContent { @@ -308,9 +313,10 @@ body { #viewerContainer { overflow: auto; position: absolute; - inset: 32px 0 0; + inset: var(--toolbar-height) 0 0; outline: none; } + #viewerContainer:not(.pdfPresentationMode) { transition-duration: var(--sidebar-transition-duration); transition-timing-function: var(--sidebar-transition-timing-function); @@ -321,31 +327,45 @@ body { transition-property: inset-inline-start; } -.toolbar { - position: relative; - inset-inline: 0; - z-index: 9999; - cursor: default; - font: message-box; -} - -:is(.toolbar, .editorParamsToolbar, .findbar, #sidebarContainer) - :is(input, button, select), -.secondaryToolbar :is(input, button, a, select) { - outline: none; +#sidebarContainer :is(input, button, select) { + /*outline: none;*/ font: message-box; } -#toolbarContainer { - width: 100%; -} - #toolbarSidebar { width: 100%; - height: 32px; + height: var(--toolbar-height); background-color: var(--sidebar-toolbar-bg-color); box-shadow: var(--toolbarSidebar-box-shadow); border-bottom: var(--toolbarSidebar-border-bottom); + justify-content: space-between; + + #toolbarSidebarLeft { + width: auto; + height: 100%; + + #viewThumbnail::before { + mask-image: var(--toolbarButton-viewThumbnail-icon); + } + + #viewOutline::before { + mask-image: var(--toolbarButton-viewOutline-icon); + transform: scaleX(var(--dir-factor)); + } + + #viewAttachments::before { + mask-image: var(--toolbarButton-viewAttachments-icon); + } + + #viewLayers::before { + mask-image: var(--toolbarButton-viewLayers-icon); + } + } + + #toolbarSidebarRight { + width: auto; + height: 100%; + } } #sidebarResizer { @@ -357,257 +377,16 @@ body { cursor: ew-resize; } -#toolbarContainer, -.findbar, -.secondaryToolbar, -.editorParamsToolbar { - position: relative; - height: 32px; - background-color: var(--toolbar-bg-color); - box-shadow: var(--toolbar-box-shadow); - border-bottom: var(--toolbar-border-bottom); -} - -#toolbarViewer { - height: 32px; -} - -#loadingBar { - /* Define these variables here, and not in :root, to avoid reflowing the - entire viewer when updating progress (see issue 15958). */ - --progressBar-percent: 0%; - --progressBar-end-offset: 0; - - position: absolute; - inset-inline: 0 var(--progressBar-end-offset); - height: 4px; - background-color: var(--progressBar-bg-color); - border-bottom: 1px solid var(--toolbar-border-color); - transition-property: inset-inline-start; - transition-duration: var(--sidebar-transition-duration); - transition-timing-function: var(--sidebar-transition-timing-function); -} - #outerContainer.sidebarOpen #loadingBar { inset-inline-start: var(--sidebar-width); } -#loadingBar .progress { - position: absolute; - top: 0; - inset-inline-start: 0; - width: 100%; - transform: scaleX(var(--progressBar-percent)); - transform-origin: calc(50% - 50% * var(--dir-factor)) 0; - height: 100%; - background-color: var(--progressBar-color); - overflow: hidden; - transition: transform 200ms; -} - -@keyframes progressIndeterminate { - 0% { - transform: translateX(calc(-142px * var(--dir-factor))); - } - 100% { - transform: translateX(0); - } -} - -#loadingBar.indeterminate .progress { - transform: none; - background-color: var(--progressBar-bg-color); - transition: none; -} - -#loadingBar.indeterminate .progress .glimmer { - position: absolute; - top: 0; - inset-inline-start: 0; - height: 100%; - width: calc(100% + 150px); - background: repeating-linear-gradient( - 135deg, - var(--progressBar-blend-color) 0, - var(--progressBar-bg-color) 5px, - var(--progressBar-bg-color) 45px, - var(--progressBar-color) 55px, - var(--progressBar-color) 95px, - var(--progressBar-blend-color) 100px - ); - animation: progressIndeterminate 1s linear infinite; -} - #outerContainer.sidebarResizing :is(#sidebarContainer, #viewerContainer, #loadingBar) { /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */ transition-duration: 0s; } -.findbar, -.secondaryToolbar, -.editorParamsToolbar { - top: 32px; - position: absolute; - z-index: 30000; - height: auto; - padding: 0 4px; - margin: 4px 2px; - font: message-box; - font-size: 12px; - line-height: 14px; - text-align: left; - cursor: default; -} - -.findbar { - inset-inline-start: 64px; - min-width: 300px; - background-color: var(--toolbar-bg-color); -} -.findbar > div { - height: 32px; -} -.findbar > div#findbarInputContainer { - margin-inline-end: 4px; -} -.findbar.wrapContainers > div, -.findbar.wrapContainers > div#findbarMessageContainer > * { - clear: both; -} -.findbar.wrapContainers > div#findbarMessageContainer { - height: auto; -} - -.findbar input[type="checkbox"] { - pointer-events: none; -} - -.findbar label { - user-select: none; -} - -.findbar label:hover, -.findbar input:focus-visible + label { - color: var(--toggled-btn-color); - background-color: var(--button-hover-color); -} - -.findbar .toolbarField[type="checkbox"]:checked + .toolbarLabel { - background-color: var(--toggled-btn-bg-color) !important; - color: var(--toggled-btn-color); -} - -#findInput { - width: 200px; - - /*#if !MOZCENTRAL*/ - &::-webkit-input-placeholder { - color: rgb(191 191 191); - } - /*#endif*/ - &::placeholder { - font-style: normal; - } - .loadingInput:has(> &[data-status="pending"])::after { - display: block; - visibility: visible; - } - &[data-status="notFound"] { - background-color: rgb(255 102 102); - } -} - -.secondaryToolbar, -.editorParamsToolbar { - padding: 6px 0 10px; - inset-inline-end: 4px; - height: auto; - background-color: var(--doorhanger-bg-color); -} - -.editorParamsToolbarContainer { - width: 220px; - margin-bottom: -4px; -} - -.editorParamsToolbarContainer > .editorParamsSetter { - min-height: 26px; - display: flex; - align-items: center; - justify-content: space-between; - padding-inline: 10px; -} - -.editorParamsToolbarContainer .editorParamsLabel { - padding-inline-end: 10px; - flex: none; - font: menu; - font-size: 13px; - font-style: normal; - font-weight: 400; - line-height: 150%; - color: var(--main-color); -} - -.editorParamsToolbarContainer .editorParamsColor { - width: 32px; - height: 32px; - flex: none; -} - -.editorParamsToolbarContainer .editorParamsSlider { - background-color: transparent; - width: 90px; - flex: 0 1 0; -} - -.editorParamsToolbarContainer .editorParamsSlider::-moz-range-progress { - background-color: black; -} - -/*#if !MOZCENTRAL*/ -.editorParamsToolbarContainer .editorParamsSlider::-webkit-slider-runnable-track, -/*#endif*/ -.editorParamsToolbarContainer .editorParamsSlider::-moz-range-track { - background-color: black; -} - -/*#if !MOZCENTRAL*/ -.editorParamsToolbarContainer .editorParamsSlider::-webkit-slider-thumb, -/*#endif*/ -.editorParamsToolbarContainer .editorParamsSlider::-moz-range-thumb { - background-color: white; -} - -#secondaryToolbarButtonContainer { - max-width: 220px; - min-height: 26px; - max-height: calc(var(--viewer-container-height) - 40px); - overflow-y: auto; - margin-bottom: -4px; -} - -#editorStampParamsToolbar { - inset-inline-end: calc(var(--editor-toolbar-base-offset) + 0px); -} - -#editorInkParamsToolbar { - inset-inline-end: calc(var(--editor-toolbar-base-offset) + 28px); -} - -#editorFreeTextParamsToolbar { - inset-inline-end: calc(var(--editor-toolbar-base-offset) + 56px); -} - -#editorHighlightParamsToolbar { - inset-inline-end: calc(var(--editor-toolbar-base-offset) + 84px); -} - -#editorStampAddImage::before { - mask-image: var(--editorParams-stampAddImage-icon); -} - .doorHanger, .doorHangerRight { border-radius: 2px; @@ -615,88 +394,62 @@ body { 0 1px 5px var(--doorhanger-border-color), 0 0 0 1px var(--doorhanger-border-color); border: var(--doorhanger-border-color-whcm); -} -:is(.doorHanger, .doorHangerRight)::after, -:is(.doorHanger, .doorHangerRight)::before { - bottom: 100%; - border: 8px solid rgb(0 0 0 / 0); - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - opacity: var(--doorhanger-triangle-opacity-whcm); -} -.doorHanger::after { - inset-inline-start: 10px; - margin-inline-start: -8px; - border-bottom-color: var(--toolbar-bg-color); -} -.doorHangerRight::after { - inset-inline-end: 10px; - margin-inline-end: -8px; - border-bottom-color: var(--doorhanger-bg-color); -} -:is(.doorHanger, .doorHangerRight)::before { - border-bottom-color: var(--doorhanger-border-color); - border-width: 9px; -} -.doorHanger::before { - inset-inline-start: 10px; - margin-inline-start: -9px; -} -.doorHangerRight::before { - inset-inline-end: 10px; - margin-inline-end: -9px; -} + background-color: var(--doorhanger-bg-color); -#findResultsCount { - background-color: rgb(217 217 217); - color: rgb(82 82 82); - text-align: center; - padding: 4px 5px; - margin: 5px; -} + &::after, + &::before { + bottom: 100%; + border: var(--doorhanger-height) solid rgb(0 0 0 / 0); + content: ""; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + opacity: var(--doorhanger-triangle-opacity-whcm); + } -#findMsg[data-status="notFound"] { - font-weight: bold; + ::before { + border-bottom-color: var(--doorhanger-border-color); + border-width: calc(var(--doorhanger-height) + 1px); + } } -:is(#findResultsCount, #findMsg):empty { - display: none; -} +.doorHangerRight { + inset-inline-end: calc(50% - var(--doorhanger-height)); + inset-block-start: calc(100% + var(--doorhanger-height)); -#toolbarViewerMiddle { - position: absolute; - left: 50%; - transform: translateX(-50%); -} + &::before, + &::after { + inset-inline-end: calc(var(--doorhanger-height) + 2px); + margin-inline-end: calc(-1px - var(--doorhanger-height)); + } -#toolbarViewerLeft, -#toolbarSidebarLeft { - float: var(--inline-start); + &::after { + border-bottom-color: var(--doorhanger-bg-color); + } } -#toolbarViewerRight, -#toolbarSidebarRight { - float: var(--inline-end); + +.doorHanger { + inset-inline-start: calc(50% - var(--doorhanger-height)); + inset-block-start: calc(100% + var(--doorhanger-height)); + + &::before, + &::after { + inset-inline-start: calc(var(--doorhanger-height) + 2px); + margin-inline-start: calc(-1 * var(--doorhanger-height)); + } + + &::after { + border-bottom-color: var(--toolbar-bg-color); + } } -#toolbarViewerLeft > *, -#toolbarViewerMiddle > *, -#toolbarViewerRight > *, #toolbarSidebarLeft *, -#toolbarSidebarRight *, -.findbar * { +#toolbarSidebarRight * { position: relative; float: var(--inline-start); } -#toolbarViewerLeft { - padding-inline-start: 1px; -} -#toolbarViewerRight { - padding-inline-end: 1px; -} #toolbarSidebarRight { padding-inline-end: 2px; } @@ -705,12 +458,7 @@ body { margin: 2px; display: inline-block; } -.splitToolbarButton > .toolbarButton { - float: var(--inline-start); -} -.toolbarButton, -.secondaryToolbarButton, .dialogButton { border: none; background: none; @@ -727,40 +475,13 @@ body { color: var(--dialog-button-hover-color); } -.toolbarButton > span { - display: inline-block; - width: 0; - height: 0; - overflow: hidden; -} - -:is(.toolbarButton, .secondaryToolbarButton, .dialogButton)[disabled] { - opacity: 0.5; -} - -.splitToolbarButton > .toolbarButton:is(:hover, :focus-visible), -.dropdownToolbarButton:hover { - background-color: var(--button-hover-color); -} -.splitToolbarButton > .toolbarButton { - position: relative; - margin: 0; -} -#toolbarSidebar .splitToolbarButton > .toolbarButton { - margin-inline-end: 2px; -} - .splitToolbarButtonSeparator { float: var(--inline-start); - margin: 4px 0; width: 1px; - height: 20px; + height: 62%; background-color: var(--separator-color); } -.toolbarButton, -.dropdownToolbarButton, -.secondaryToolbarButton, .dialogButton { min-width: 16px; margin: 2px 1px; @@ -775,79 +496,7 @@ body { box-sizing: border-box; } -.toolbarButton:is(:hover, :focus-visible) { - background-color: var(--button-hover-color); -} -.secondaryToolbarButton:is(:hover, :focus-visible) { - background-color: var(--doorhanger-hover-bg-color); - color: var(--doorhanger-hover-color); -} - -:is(.toolbarButton, .secondaryToolbarButton).toggled, -.splitToolbarButton.toggled > .toolbarButton.toggled { - background-color: var(--toggled-btn-bg-color); - color: var(--toggled-btn-color); -} - -:is(.toolbarButton, .secondaryToolbarButton).toggled:hover, -.splitToolbarButton.toggled > .toolbarButton.toggled:hover { - outline: var(--toggled-hover-btn-outline) !important; -} - -:is(.toolbarButton, .secondaryToolbarButton).toggled::before { - background-color: var(--toggled-btn-color); -} - -:is(.toolbarButton, .secondaryToolbarButton).toggled:hover:active, -.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active { - background-color: var(--toggled-hover-active-btn-color); -} - -.dropdownToolbarButton { - display: flex; - width: fit-content; - min-width: 140px; - padding: 0; - background-color: var(--dropdown-btn-bg-color); - border: var(--dropdown-btn-border); -} -.dropdownToolbarButton::after { - top: 6px; - inset-inline-end: 6px; - pointer-events: none; - mask-image: var(--toolbarButton-menuArrow-icon); -} - -.dropdownToolbarButton > select { - appearance: none; - width: inherit; - min-width: inherit; - height: 28px; - font-size: 12px; - color: var(--main-color); - margin: 0; - padding-block: 1px 2px; - padding-inline: 6px 38px; - border: none; - background-color: var(--dropdown-btn-bg-color); -} -.dropdownToolbarButton > select:is(:hover, :focus-visible) { - background-color: var(--button-hover-color); - color: var(--toggled-btn-color); -} -.dropdownToolbarButton > select > option { - background: var(--doorhanger-bg-color); - color: var(--main-color); -} - -.toolbarButtonSpacer { - width: 30px; - display: inline-block; - height: 1px; -} - -:is(.toolbarButton, .secondaryToolbarButton, .treeItemToggler)::before, -.dropdownToolbarButton::after { +.treeItemToggler::before { /* All matching images have a size of 16x16 * All relevant containers have a size of 28x28 */ position: absolute; @@ -860,45 +509,16 @@ body { mask-size: cover; } -.dropdownToolbarButton:is(:hover, :focus-visible, :active)::after { - background-color: var(--toolbar-icon-hover-bg-color); -} - -.toolbarButton::before { - opacity: var(--toolbar-icon-opacity); - top: 6px; - left: 6px; -} - -.toolbarButton:is(:hover, :focus-visible)::before, -.secondaryToolbarButton:is(:hover, :focus-visible)::before { - background-color: var(--toolbar-icon-hover-bg-color); -} - -.secondaryToolbarButton::before { - opacity: var(--doorhanger-icon-opacity); - top: 5px; - inset-inline-start: 12px; -} - -#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)); } -#findPrevious::before { - mask-image: var(--findbarButton-previous-icon); -} - -#findNext::before { - mask-image: var(--findbarButton-next-icon); -} - #previous::before { mask-image: var(--toolbarButton-pageUp-icon); } @@ -907,11 +527,11 @@ 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); } @@ -919,23 +539,23 @@ body { mask-image: var(--toolbarButton-presentationMode-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); } -:is(#print, #secondaryPrint)::before { +:is(#printButton, #secondaryPrint)::before { mask-image: var(--toolbarButton-print-icon); } @@ -943,48 +563,23 @@ body { #secondaryOpenFile::before { mask-image: var(--toolbarButton-openFile-icon); } + /*#endif*/ -:is(#download, #secondaryDownload)::before { +:is(#downloadButton, #secondaryDownload)::before { mask-image: var(--toolbarButton-download-icon); } -a.secondaryToolbarButton { - padding-top: 5px; - text-decoration: none; -} -a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] { - opacity: 0.5; - pointer-events: none; -} - #viewBookmark::before { mask-image: var(--toolbarButton-bookmark-icon); } -#viewThumbnail::before { - mask-image: var(--toolbarButton-viewThumbnail-icon); -} - -#viewOutline::before { - mask-image: var(--toolbarButton-viewOutline-icon); - transform: scaleX(var(--dir-factor)); -} - -#viewAttachments::before { - mask-image: var(--toolbarButton-viewAttachments-icon); -} - -#viewLayers::before { - mask-image: var(--toolbarButton-viewLayers-icon); -} - #currentOutlineItem::before { mask-image: var(--toolbarButton-currentOutlineItem-icon); transform: scaleX(var(--dir-factor)); } -#viewFind::before { +#viewFindButton::before { mask-image: var(--toolbarButton-search-icon); } @@ -1001,88 +596,14 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] { border-radius: 50%; } -.secondaryToolbarButton { - position: relative; - margin: 0; - padding: 0 0 1px; - padding-inline-start: 36px; - height: auto; - min-height: 26px; - width: auto; - min-width: 100%; - text-align: start; - white-space: normal; - border-radius: 0; - box-sizing: border-box; - display: inline-block; -} -.secondaryToolbarButton > span { - padding-inline-end: 4px; -} - -#firstPage::before { - mask-image: var(--secondaryToolbarButton-firstPage-icon); -} - -#lastPage::before { - mask-image: var(--secondaryToolbarButton-lastPage-icon); -} - -#pageRotateCcw::before { - mask-image: var(--secondaryToolbarButton-rotateCcw-icon); -} - -#pageRotateCw::before { - mask-image: var(--secondaryToolbarButton-rotateCw-icon); -} - -#cursorSelectTool::before { - mask-image: var(--secondaryToolbarButton-selectTool-icon); -} - -#cursorHandTool::before { - mask-image: var(--secondaryToolbarButton-handTool-icon); -} - -#scrollPage::before { - mask-image: var(--secondaryToolbarButton-scrollPage-icon); -} - -#scrollVertical::before { - mask-image: var(--secondaryToolbarButton-scrollVertical-icon); -} - -#scrollHorizontal::before { - mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon); -} - -#scrollWrapped::before { - mask-image: var(--secondaryToolbarButton-scrollWrapped-icon); -} - -#spreadNone::before { - mask-image: var(--secondaryToolbarButton-spreadNone-icon); -} - -#spreadOdd::before { - mask-image: var(--secondaryToolbarButton-spreadOdd-icon); -} - -#spreadEven::before { - mask-image: var(--secondaryToolbarButton-spreadEven-icon); -} - -#documentProperties::before { - mask-image: var(--secondaryToolbarButton-documentProperties-icon); -} - .verticalToolbarSeparator { display: block; - margin: 5px 2px; width: 1px; - height: 22px; + height: 70%; background-color: var(--separator-color); + box-sizing: border-box; } + .horizontalToolbarSeparator { display: block; margin: 6px 0; @@ -1091,6 +612,29 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] { background-color: var(--doorhanger-separator-color); } +.toggleButton { + display: inline; + + &:is(:hover, :has(> input:focus-visible)) { + color: var(--toggled-btn-color); + background-color: var(--button-hover-color); + } + + &:has(> input:checked) { + color: var(--toggled-btn-color); + background-color: var(--toggled-btn-bg-color); + } + + & > input { + position: absolute; + top: 50%; + left: 50%; + opacity: 0; + width: 0; + height: 0; + } +} + .toolbarField { padding: 4px 7px; margin: 3px 0; @@ -1103,18 +647,15 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] { font-size: 12px; line-height: 16px; outline: none; -} -.toolbarField[type="checkbox"] { - opacity: 0; - position: absolute !important; - left: 0; - margin: 10px 0 3px; - margin-inline-start: 7px; + &:focus { + border-color: #0a84ff; + } } #pageNumber { - -moz-appearance: textfield; /* hides the spinner in moz */ + -moz-appearance: textfield; + /* hides the spinner in moz */ text-align: end; width: 40px; background-size: 0 0; @@ -1124,10 +665,11 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] { &::-webkit-inner-spin-button { -webkit-appearance: none; } + /*#endif*/ .loadingInput:has(> &.loading)::after { - display: block; + display: inline; visibility: visible; transition-property: visibility; @@ -1136,13 +678,14 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] { } .loadingInput { + position: relative; + &::after { position: absolute; visibility: hidden; display: none; - top: calc(50% - 8px); - width: 16px; - height: 16px; + width: var(--icon-size); + height: var(--icon-size); content: ""; background-color: var(--toolbar-icon-bg-color); @@ -1153,32 +696,12 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] { &.start::after { inset-inline-start: 4px; } + &.end::after { inset-inline-end: 4px; } } -.toolbarField:focus { - border-color: #0a84ff; -} - -.toolbarLabel { - min-width: 16px; - padding: 7px; - margin: 2px; - border-radius: 2px; - color: var(--main-color); - font-size: 12px; - line-height: 14px; - text-align: left; - user-select: none; - cursor: default; -} - -#numPages.toolbarLabel { - padding-inline-start: 3px; -} - #thumbnailView, #outlineView, #attachmentsView, @@ -1190,6 +713,7 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] { overflow: auto; user-select: none; } + #thumbnailView { width: calc(100% - 60px); padding: 10px 30px 0; @@ -1222,6 +746,7 @@ a:focus > .thumbnail, .thumbnail:hover { border-color: var(--thumbnail-hover-color); } + .thumbnail.selected { border-color: var(--thumbnail-selected-color) !important; } @@ -1231,10 +756,12 @@ a:focus > .thumbnail, height: var(--thumbnail-height); opacity: 0.9; } + a:focus > .thumbnail > .thumbnailImage, .thumbnail:hover > .thumbnailImage { opacity: 0.95; } + .thumbnail.selected > .thumbnailImage { opacity: 1 !important; } @@ -1271,9 +798,11 @@ a:focus > .thumbnail > .thumbnailImage, #layersView .treeItem > a * { cursor: pointer; } + #layersView .treeItem > a > label { padding-inline-start: 4px; } + #layersView .treeItem > a > label > input { float: var(--inline-start); margin-top: 1px; @@ -1286,14 +815,17 @@ a:focus > .thumbnail > .thumbnailImage, width: 0; color: rgb(255 255 255 / 0.5); } + .treeItemToggler::before { inset-inline-end: 4px; mask-image: var(--treeitem-expanded-icon); } + .treeItemToggler.treeItemsHidden::before { mask-image: var(--treeitem-collapsed-icon); transform: scaleX(var(--dir-factor)); } + .treeItemToggler.treeItemsHidden ~ .treeItems { display: none; } @@ -1343,6 +875,7 @@ dialog { border-radius: 4px; box-shadow: 0 1px 4px rgb(0 0 0 / 0.3); } + dialog::backdrop { background-color: rgb(0 0 0 / 0.2); } @@ -1379,6 +912,7 @@ dialog :link { #passwordDialog { text-align: center; } + #passwordDialog .toolbarField { width: 200px; } @@ -1386,18 +920,22 @@ dialog :link { #documentPropertiesDialog { text-align: left; } + #documentPropertiesDialog .row > * { min-width: 100px; text-align: start; } + #documentPropertiesDialog .row > span { width: 125px; word-wrap: break-word; } + #documentPropertiesDialog .row > p { max-width: 225px; word-wrap: break-word; } + #documentPropertiesDialog .buttonRow { margin-top: 10px; } @@ -1405,21 +943,25 @@ dialog :link { .grab-to-pan-grab { cursor: grab !important; } + .grab-to-pan-grab *:not(input):not(textarea):not(button):not(select):not(:link) { cursor: inherit !important; } + .grab-to-pan-grab:active, .grab-to-pan-grabbing { cursor: grabbing !important; } + .grab-to-pan-grabbing { position: fixed; background: rgb(0 0 0 / 0); display: block; inset: 0; overflow: hidden; - z-index: 50000; /* should be higher than anything else in PDF.js! */ + z-index: 50000; + /* should be higher than anything else in PDF.js! */ } @page { @@ -1434,15 +976,19 @@ dialog :link { body { background: rgb(0 0 0 / 0) none; } + body[data-pdfjsprinting] #outerContainer { display: none; } + body[data-pdfjsprinting] #printContainer { display: block; } + #printContainer { height: 100%; } + /* wrapper around (scaled) print canvas elements */ #printContainer > .printedPage { page-break-after: always; @@ -1484,13 +1030,559 @@ dialog :link { display: none; } -@media all and (max-width: 900px) { - #toolbarViewerMiddle { - display: table; - margin: auto; - left: auto; - position: inherit; - transform: none; +.toolbarLabel { + min-width: 16px; + height: 100%; + padding-inline: 4px; + margin: 2px; + border-radius: 2px; + color: var(--main-color); + font-size: 12px; + line-height: 14px; + text-align: left; + user-select: none; + cursor: default; + box-sizing: border-box; + + display: inline flex; + flex-direction: column; + align-items: center; + justify-content: center; + + > label { + width: 100%; + } +} + +a.toolbarButton { + text-decoration: none; + + &[href="#"] { + opacity: 0.5; + pointer-events: none; + } +} + +.toolbarButton { + height: 100%; + aspect-ratio: 1; + display: flex; + align-items: center; + justify-content: center; + background: none; + border: none; + color: var(--main-color); + outline: none; + border-radius: 2px; + box-sizing: border-box; + font: message-box; + flex: none; + position: relative; + + > span { + display: inline-block; + width: 0; + height: 0; + overflow: hidden; + } + + &::before { + opacity: var(--toolbar-icon-opacity); + display: inline-block; + width: var(--icon-size); + height: var(--icon-size); + content: ""; + background-color: var(--toolbar-icon-bg-color); + mask-size: cover; + mask-position: center; + } + + &.toggled { + background-color: var(--toggled-btn-bg-color); + color: var(--toggled-btn-color); + + &::before { + background-color: var(--toggled-btn-color); + } + + &:hover { + outline: var(--toggled-hover-btn-outline) !important; + + &:active { + background-color: var(--toggled-hover-active-btn-color); + } + } + } + + &:is(:hover, :focus-visible) { + background-color: var(--button-hover-color); + + &::before { + background-color: var(--toolbar-icon-hover-bg-color); + } + } + + &:is([disabled="disabled"], [disabled]) { + opacity: 0.5; + pointer-events: none; + } + + &.menuItem { + width: 100%; + height: var(--menuitem-height); + justify-content: flex-start; + gap: 8px; + padding-inline-start: 12px; + aspect-ratio: unset; + + :is(:hover, :focus-visible) { + background-color: transparent; + color: var(--doorhanger-hover-color); + } + + > span { + display: inline-block; + width: max-content; + height: auto; + } + } +} + +.toolbarButtonWithContainer { + height: 100%; + aspect-ratio: 1; + display: inline-block; + position: relative; + flex: none; + + > .toolbarButton { + width: 100%; + height: 100%; + } + + .menuContainer { + width: 100%; + height: auto; + display: flex; + flex-direction: column; + box-sizing: border-box; + padding-block: 5px; + overflow-y: auto; + } + + .editorParamsToolbar { + height: auto; + width: 220px; + position: absolute; + z-index: 30000; + cursor: default; + + #editorStampAddImage::before { + mask-image: var(--editorParams-stampAddImage-icon); + } + + .editorParamsToolbarContainer { + width: 100%; + height: auto; + display: flex; + flex-direction: column; + box-sizing: border-box; + padding-inline: 10px; + padding-block: 10px; + + > .editorParamsSetter { + min-height: 26px; + display: flex; + align-items: center; + justify-content: space-between; + } + + .editorParamsLabel { + flex: none; + font: menu; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: 150%; + color: var(--main-color); + width: fit-content; + inset-inline-start: 0; + } + + .editorParamsColor { + width: 32px; + height: 32px; + flex: none; + } + + .editorParamsSlider { + background-color: transparent; + width: 90px; + flex: 0 1 0; + font: message-box; + + &::-moz-range-progress { + background-color: black; + } + + /*#if !MOZCENTRAL*/ + &::-webkit-slider-runnable-track, + /*#endif*/ + &::-moz-range-track { + background-color: black; + } + + /*#if !MOZCENTRAL*/ + &::-webkit-slider-thumb, + /*#endif*/ + &::-moz-range-thumb { + background-color: white; + } + } + } + } +} + +#secondaryToolbar { + height: auto; + width: 220px; + position: absolute; + z-index: 30000; + cursor: default; + min-height: 26px; + max-height: calc(var(--viewer-container-height) - 40px); +} + +.toolbarHorizontalGroup { + height: 100%; + display: inline flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 1px; + box-sizing: border-box; +} + +#findbar { + --input-horizontal-padding: 4px; + + width: max-content; + max-width: 80vw; + min-height: var(--toolbar-height); + height: auto; + position: absolute; + z-index: 30000; + cursor: default; + padding: 0; + min-width: 300px; + background-color: var(--toolbar-bg-color); + box-sizing: border-box; + flex-wrap: wrap; + justify-content: flex-start; + + > * { + height: var(--toolbar-height); + padding: 2px; + } + + #findPrevious::before { + mask-image: var(--findbarButton-previous-icon); + } + + #findNext::before { + mask-image: var(--findbarButton-next-icon); + } + + #findInputContainer { + margin-inline-start: 2px; + + #findInput { + width: 200px; + padding: 5px var(--input-horizontal-padding); + + /*#if !MOZCENTRAL*/ + &::-webkit-input-placeholder { + color: rgb(191 191 191); + } + + /*#endif*/ + &::placeholder { + font-style: normal; + } + + .loadingInput:has(> &[data-status="pending"])::after { + display: inline; + visibility: visible; + inset-inline-end: calc(var(--input-horizontal-padding) + 1px); + } + + &[data-status="notFound"] { + background-color: rgb(255 102 102); + } + } + } + + #findbarMessageContainer { + display: none; + gap: 4px; + + #findResultsCount { + background-color: rgb(217 217 217); + color: rgb(82 82 82); + padding-block: 4px; + + &:empty { + display: none; + } + } + + &:has(> :is(#findResultsCount, #findMsg):not(:empty)) { + display: inline-flex; + } + + #findMsg { + &[data-status="notFound"] { + font-weight: bold; + } + + &:empty { + display: none; + } + } + } +} + +.dropdownToolbarButton { + display: inline flex; + flex-direction: row; + align-items: center; + justify-content: center; + position: relative; + + width: fit-content; + min-width: 140px; + padding: 0; + background-color: var(--dropdown-btn-bg-color); + border: var(--dropdown-btn-border); + border-radius: 2px; + color: var(--main-color); + font-size: 12px; + line-height: 14px; + user-select: none; + cursor: default; + box-sizing: border-box; + outline: none; + + &:hover { + background-color: var(--button-hover-color); + } + + > select { + appearance: none; + width: inherit; + min-width: inherit; + height: 28px; + font: message-box; + font-size: 12px; + color: var(--main-color); + margin: 0; + padding-block: 1px 2px; + padding-inline: 6px 38px; + border: none; + outline: none; + background-color: var(--dropdown-btn-bg-color); + + > option { + background: var(--doorhanger-bg-color); + color: var(--main-color); + } + + &:is(:hover, :focus-visible) { + background-color: var(--button-hover-color); + color: var(--toggled-btn-color); + } + } + + &::after { + /* All matching images have a size of 16x16 + * All relevant containers have a size of 28x28 */ + position: absolute; + display: inline; + width: var(--icon-size); + height: var(--icon-size); + + content: ""; + background-color: var(--toolbar-icon-bg-color); + mask-size: cover; + + inset-inline-end: 4px; + pointer-events: none; + mask-image: var(--toolbarButton-menuArrow-icon); + } + + &:is(:hover, :focus-visible, :active)::after { + background-color: var(--toolbar-icon-hover-bg-color); + } +} + +#toolbarContainer { + --menuitem-height: calc(var(--toolbar-height) - 6px); + --toolbar-horizontal-padding: 1px; + --toolbar-vertical-padding: 2px; + + height: var(--toolbar-height); + padding: var(--toolbar-vertical-padding) var(--toolbar-horizontal-padding); + position: relative; + box-sizing: border-box; + font: message-box; + background-color: var(--toolbar-bg-color); + box-shadow: var(--toolbar-box-shadow); + border-bottom: var(--toolbar-border-bottom); + + #toolbarViewer { + width: 100%; + height: 100%; + justify-content: space-between; + + > * { + flex: none; + } + + input { + font: message-box; + } + + .toolbarButtonSpacer { + width: 30px; + display: block; + height: 1px; + } + + #toolbarViewerLeft #numPages.toolbarLabel { + padding-inline-start: 3px; + flex: none; + } + } + + #loadingBar { + /* Define these variables here, and not in :root, to avoid reflowing the + entire viewer when updating progress (see issue 15958). */ + --progressBar-percent: 0%; + --progressBar-end-offset: 0; + + position: absolute; + inset-inline: 0 var(--progressBar-end-offset); + height: 4px; + background-color: var(--progressBar-bg-color); + border-bottom: 1px solid var(--toolbar-border-color); + transition-property: inset-inline-start; + transition-duration: var(--sidebar-transition-duration); + transition-timing-function: var(--sidebar-transition-timing-function); + + .progress { + position: absolute; + top: 0; + inset-inline-start: 0; + width: 100%; + transform: scaleX(var(--progressBar-percent)); + transform-origin: calc(50% - 50% * var(--dir-factor)) 0; + height: 100%; + background-color: var(--progressBar-color); + overflow: hidden; + transition: transform 200ms; + } + + &.indeterminate .progress { + transform: none; + background-color: var(--progressBar-blend-color); + transition: none; + + .glimmer { + @keyframes progressIndeterminate { + 0% { + transform: translateX(calc(-142px * var(--dir-factor))); + } + + 100% { + transform: translateX(0); + } + } + + position: absolute; + top: 0; + inset-inline-start: 0; + height: 100%; + width: calc(100% + 150px); + background: repeating-linear-gradient( + 135deg, + var(--progressBar-blend-color) 0, + var(--progressBar-bg-color) 5px, + var(--progressBar-bg-color) 45px, + var(--progressBar-color) 55px, + var(--progressBar-color) 95px, + var(--progressBar-blend-color) 100px + ); + animation: progressIndeterminate 1s linear infinite; + } + } + } +} + +#secondaryToolbar { + #firstPage::before { + mask-image: var(--secondaryToolbarButton-firstPage-icon); + } + + #lastPage::before { + mask-image: var(--secondaryToolbarButton-lastPage-icon); + } + + #pageRotateCcw::before { + mask-image: var(--secondaryToolbarButton-rotateCcw-icon); + } + + #pageRotateCw::before { + mask-image: var(--secondaryToolbarButton-rotateCw-icon); + } + + #cursorSelectTool::before { + mask-image: var(--secondaryToolbarButton-selectTool-icon); + } + + #cursorHandTool::before { + mask-image: var(--secondaryToolbarButton-handTool-icon); + } + + #scrollPage::before { + mask-image: var(--secondaryToolbarButton-scrollPage-icon); + } + + #scrollVertical::before { + mask-image: var(--secondaryToolbarButton-scrollVertical-icon); + } + + #scrollHorizontal::before { + mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon); + } + + #scrollWrapped::before { + mask-image: var(--secondaryToolbarButton-scrollWrapped-icon); + } + + #spreadNone::before { + mask-image: var(--secondaryToolbarButton-spreadNone-icon); + } + + #spreadOdd::before { + mask-image: var(--secondaryToolbarButton-spreadOdd-icon); + } + + #spreadEven::before { + mask-image: var(--secondaryToolbarButton-spreadEven-icon); + } + + #documentProperties::before { + mask-image: var(--secondaryToolbarButton-documentProperties-icon); } } @@ -1498,6 +1590,7 @@ dialog :link { #sidebarContainer { background-color: var(--sidebar-narrow-bg-color); } + #outerContainer.sidebarOpen #viewerContainer { inset-inline-start: 0 !important; } @@ -1507,11 +1600,13 @@ dialog :link { :root { --editor-toolbar-base-offset: 40px; } + #outerContainer .hiddenMediumView { display: none; } + #outerContainer .visibleMediumView { - display: inherit; + display: inline-block; } } @@ -1520,12 +1615,10 @@ dialog :link { .hiddenSmallView * { display: none; } - .toolbarButtonSpacer { + + #toolbarContainer #toolbarViewer .toolbarButtonSpacer { width: 0; } - .findbar { - inset-inline-start: 34px; - } } @media all and (max-width: 560px) { diff --git a/web/viewer.html b/web/viewer.html index 09223821964a8e..43accd61c5625f 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -92,23 +92,23 @@ - +
-
+
-
- - - -
@@ -118,7 +118,7 @@
-
@@ -138,267 +138,89 @@
- - - - - - - - - - - -
-
-
-
- -
- + +
+
+
-
- - - - -
-
-
- - - - +
+ + + +
- -
- - - - - -
- -
-
-
-
- +
- @@ -415,6 +237,204 @@
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+ + + +
+ +
+ +
+ + +
+
@@ -439,8 +459,8 @@
- - + +
@@ -504,7 +524,7 @@

-

- +
@@ -545,8 +565,8 @@
- - + +
@@ -560,7 +580,7 @@ 0%
- +
diff --git a/web/viewer.js b/web/viewer.js index ff40485c37d7c4..37d4b82dbf9e95 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -47,32 +47,32 @@ function getViewerConfiguration() { customScaleOption: document.getElementById("customScaleOption"), previous: document.getElementById("previous"), next: document.getElementById("next"), - zoomIn: document.getElementById("zoomIn"), - zoomOut: document.getElementById("zoomOut"), + zoomIn: document.getElementById("zoomInButton"), + zoomOut: document.getElementById("zoomOutButton"), viewFind: document.getElementById("viewFind"), - print: document.getElementById("print"), - editorFreeTextButton: document.getElementById("editorFreeText"), + print: document.getElementById("printButton"), + editorFreeTextButton: document.getElementById("editorFreeTextButton"), editorFreeTextParamsToolbar: document.getElementById( "editorFreeTextParamsToolbar" ), - editorHighlightButton: document.getElementById("editorHighlight"), + editorHighlightButton: document.getElementById("editorHighlightButton"), editorHighlightParamsToolbar: document.getElementById( "editorHighlightParamsToolbar" ), editorHighlightColorPicker: document.getElementById( "editorHighlightColorPicker" ), - editorInkButton: document.getElementById("editorInk"), + editorInkButton: document.getElementById("editorInkButton"), editorInkParamsToolbar: document.getElementById("editorInkParamsToolbar"), - editorStampButton: document.getElementById("editorStamp"), + editorStampButton: document.getElementById("editorStampButton"), editorStampParamsToolbar: document.getElementById( "editorStampParamsToolbar" ), - download: document.getElementById("download"), + download: document.getElementById("downloadButton"), }, secondaryToolbar: { toolbar: document.getElementById("secondaryToolbar"), - toggleButton: document.getElementById("secondaryToolbarToggle"), + toggleButton: document.getElementById("secondaryToolbarToggleButton"), presentationModeButton: document.getElementById("presentationMode"), openFileButton: typeof PDFJSDev === "undefined" || PDFJSDev.test("GENERIC") @@ -100,7 +100,7 @@ function getViewerConfiguration() { // Divs (and sidebar button) outerContainer: document.getElementById("outerContainer"), sidebarContainer: document.getElementById("sidebarContainer"), - toggleButton: document.getElementById("sidebarToggle"), + toggleButton: document.getElementById("sidebarToggleButton"), resizer: document.getElementById("sidebarResizer"), // Buttons thumbnailButton: document.getElementById("viewThumbnail"), @@ -117,7 +117,7 @@ function getViewerConfiguration() { }, findBar: { bar: document.getElementById("findbar"), - toggleButton: document.getElementById("viewFind"), + toggleButton: document.getElementById("viewFindButton"), findField: document.getElementById("findInput"), highlightAllCheckbox: document.getElementById("findHighlightAll"), caseSensitiveCheckbox: document.getElementById("findMatchCase"),