diff --git a/toolkit/components/pdfjs/content/build/pdf.js b/toolkit/components/pdfjs/content/build/pdf.js index ee59356b4712..3ddd6d201245 100644 --- a/toolkit/components/pdfjs/content/build/pdf.js +++ b/toolkit/components/pdfjs/content/build/pdf.js @@ -946,7 +946,7 @@ function getDocument(src) { } const fetchDocParams = { docId, - apiVersion: '3.11.131', + apiVersion: '3.11.153', data, password, disableAutoFetch, @@ -2574,9 +2574,9 @@ class InternalRenderTask { } } } -const version = '3.11.131'; +const version = '3.11.153'; exports.version = version; -const build = 'a7894a4d7'; +const build = '85568bd6c'; exports.build = build; /***/ }), @@ -3303,16 +3303,15 @@ class AnnotationEditor { this.setDims(parentWidth * newWidth, parentHeight * newHeight); this.fixAndSetPosition(); } - addAltTextButton() { + async addAltTextButton() { if (this.#altTextButton) { return; } const altText = this.#altTextButton = document.createElement("button"); altText.className = "altText"; - AnnotationEditor._l10nPromise.get("editor_alt_text_button_label").then(msg => { - altText.textContent = msg; - altText.setAttribute("aria-label", msg); - }); + const msg = await AnnotationEditor._l10nPromise.get("editor_alt_text_button_label"); + altText.textContent = msg; + altText.setAttribute("aria-label", msg); altText.tabIndex = "0"; altText.addEventListener("click", event => { event.preventDefault(); @@ -3335,7 +3334,12 @@ class AnnotationEditor { } async #setAltTextButtonState() { const button = this.#altTextButton; - if (!button || !this.#altTextDecorative && !this.#altText) { + if (!button) { + return; + } + if (!this.#altText && !this.#altTextDecorative) { + button.classList.remove("done"); + this.#altTextTooltip?.remove(); return; } AnnotationEditor._l10nPromise.get("editor_alt_text_edit_button_label").then(msg => { @@ -3347,7 +3351,6 @@ class AnnotationEditor { tooltip.className = "tooltip"; tooltip.setAttribute("role", "tooltip"); const id = tooltip.id = `alt-text-tooltip-${this.id}`; - button.append(tooltip); button.setAttribute("aria-describedby", id); const DELAY_TO_SHOW_TOOLTIP = 100; button.addEventListener("mouseenter", () => { @@ -3374,6 +3377,9 @@ class AnnotationEditor { } button.classList.add("done"); tooltip.innerText = this.#altTextDecorative ? await AnnotationEditor._l10nPromise.get("editor_alt_text_decorative_tooltip") : this.#altText; + if (!tooltip.parentNode) { + button.append(tooltip); + } } getClientDimensions() { return this.div.getBoundingClientRect(); @@ -3388,6 +3394,9 @@ class AnnotationEditor { altText, decorative }) { + if (this.#altText === altText && this.#altTextDecorative === decorative) { + return; + } this.#altText = altText; this.#altTextDecorative = decorative; this.#setAltTextButtonState(); @@ -3562,6 +3571,9 @@ class AnnotationEditor { } else { this._uiManager.removeEditor(this); } + this.#altTextButton?.remove(); + this.#altTextButton = null; + this.#altTextTooltip = null; } get isResizable() { return false; @@ -15023,6 +15035,12 @@ Object.defineProperty(exports, "CMapCompressionType", ({ return _util.CMapCompressionType; } })); +Object.defineProperty(exports, "DOMSVGFactory", ({ + enumerable: true, + get: function () { + return _display_utils.DOMSVGFactory; + } +})); Object.defineProperty(exports, "FeatureTest", ({ enumerable: true, get: function () { @@ -15236,8 +15254,8 @@ var _tools = __w_pdfjs_require__(5); var _annotation_layer = __w_pdfjs_require__(23); var _worker_options = __w_pdfjs_require__(14); var _xfa_layer = __w_pdfjs_require__(25); -const pdfjsVersion = '3.11.131'; -const pdfjsBuild = 'a7894a4d7'; +const pdfjsVersion = '3.11.153'; +const pdfjsBuild = '85568bd6c'; })(); /******/ return __webpack_exports__; diff --git a/toolkit/components/pdfjs/content/build/pdf.scripting.js b/toolkit/components/pdfjs/content/build/pdf.scripting.js index 2faa5ed51efd..d53761c6997e 100644 --- a/toolkit/components/pdfjs/content/build/pdf.scripting.js +++ b/toolkit/components/pdfjs/content/build/pdf.scripting.js @@ -4250,8 +4250,8 @@ Object.defineProperty(exports, "initSandbox", ({ } })); var _initialization = __w_pdfjs_require__(1); -const pdfjsVersion = '3.11.131'; -const pdfjsBuild = 'a7894a4d7'; +const pdfjsVersion = '3.11.153'; +const pdfjsBuild = '85568bd6c'; })(); /******/ return __webpack_exports__; diff --git a/toolkit/components/pdfjs/content/build/pdf.worker.js b/toolkit/components/pdfjs/content/build/pdf.worker.js index e71883ada204..e2f4395b8fc7 100644 --- a/toolkit/components/pdfjs/content/build/pdf.worker.js +++ b/toolkit/components/pdfjs/content/build/pdf.worker.js @@ -102,7 +102,7 @@ class WorkerMessageHandler { docId, apiVersion } = docParams; - const workerVersion = '3.11.131'; + const workerVersion = '3.11.153'; if (apiVersion !== workerVersion) { throw new Error(`The API version "${apiVersion}" does not match ` + `the Worker version "${workerVersion}".`); } @@ -4320,9 +4320,9 @@ class AnnotationFactory { } static async create(xref, ref, annotationGlobals, idFactory, collectFields, pageRef) { const pageIndex = collectFields ? await this._getPageIndex(xref, ref, annotationGlobals.pdfManager) : null; - return annotationGlobals.pdfManager.ensure(this, "_create", [xref, ref, annotationGlobals, idFactory, pageIndex, pageRef]); + return annotationGlobals.pdfManager.ensure(this, "_create", [xref, ref, annotationGlobals, idFactory, collectFields, pageIndex, pageRef]); } - static _create(xref, ref, annotationGlobals, idFactory, pageIndex = null, pageRef = null) { + static _create(xref, ref, annotationGlobals, idFactory, collectFields = false, pageIndex = null, pageRef = null) { const dict = xref.fetchIfRef(ref); if (!(dict instanceof _primitives.Dict)) { return undefined; @@ -4341,7 +4341,8 @@ class AnnotationFactory { subtype, id, annotationGlobals, - needAppearances: pageIndex === null && acroForm.get("NeedAppearances") === true, + collectFields, + needAppearances: !collectFields && acroForm.get("NeedAppearances") === true, pageIndex, evaluatorOptions: pdfManager.evaluatorOptions, pageRef @@ -4400,7 +4401,7 @@ class AnnotationFactory { case "FileAttachment": return new FileAttachmentAnnotation(parameters); default: - if (pageIndex === null) { + if (!collectFields) { if (!subtype) { (0, _util.warn)("Annotation is missing the required /Subtype."); } else { @@ -4710,7 +4711,7 @@ class Annotation { noRotate: !!(this.flags & _util.AnnotationFlag.NOROTATE), noHTML: isLocked && isContentLocked }; - if (params.pageIndex !== null) { + if (params.collectFields) { const kids = dict.get("Kids"); if (Array.isArray(kids)) { const kidIds = []; @@ -58288,8 +58289,8 @@ Object.defineProperty(exports, "WorkerMessageHandler", ({ } })); var _worker = __w_pdfjs_require__(1); -const pdfjsVersion = '3.11.131'; -const pdfjsBuild = 'a7894a4d7'; +const pdfjsVersion = '3.11.153'; +const pdfjsBuild = '85568bd6c'; })(); /******/ return __webpack_exports__; diff --git a/toolkit/components/pdfjs/content/web/viewer-geckoview.css b/toolkit/components/pdfjs/content/web/viewer-geckoview.css index 7f7d9479e201..2d2549e54688 100644 --- a/toolkit/components/pdfjs/content/web/viewer-geckoview.css +++ b/toolkit/components/pdfjs/content/web/viewer-geckoview.css @@ -773,853 +773,7 @@ } } - -:root { - --outline-width: 2px; - --outline-color: #0060df; - --outline-around-width: 1px; - --outline-around-color: #f0f0f4; - --hover-outline-around-color: var(--outline-around-color); - --focus-outline: solid var(--outline-width) var(--outline-color); - --unfocus-outline: solid var(--outline-width) transparent; - --focus-outline-around: solid var(--outline-around-width) - var(--outline-around-color); - --hover-outline-color: #8f8f9d; - --hover-outline: solid var(--outline-width) var(--hover-outline-color); - --hover-outline-around: solid var(--outline-around-width) - var(--hover-outline-around-color); - --freetext-line-height: 1.35; - --freetext-padding: 2px; - --resizer-bg-color: var(--outline-color); - --resizer-size: 6px; - --resizer-shift: calc( - 0px - (var(--outline-width) + var(--resizer-size)) / 2 - - var(--outline-around-width) - ); - --editorFreeText-editing-cursor: text; - --editorInk-editing-cursor: url(images/cursor-editorInk.svg) 0 16, pointer; - - --alt-text-opacity: 0.8; - --alt-text-add-image: url(images/altText_add.svg); - --alt-text-done-image: url(images/altText_done.svg); - --alt-text-bg-color: rgba(43, 42, 51, var(--alt-text-opacity)); - --alt-text-fg-color: #fbfbfe; - --alt-text-border-color: var(--alt-text-bg-color); - --alt-text-hover-bg-color: rgba(82, 82, 94, var(--alt-text-opacity)); - --alt-text-hover-fg-color: var(--alt-text-fg-color); - --alt-text-hover-border-color: var(--alt-text-hover-bg-color); - --alt-text-active-bg-color: rgba(91, 91, 102, var(--alt-text-opacity)); - --alt-text-active-fg-color: var(--alt-text-fg-color); - --alt-text-active-border-color: var(--alt-text-hover-bg-color); - --alt-text-focus-outline-color: #0060df; - --alt-text-focus-border-color: #f0f0f4; - --alt-text-shadow: 0 2px 6px 0 rgba(28, 27, 34, 0.5); -} - -@media (min-resolution: 1.1dppx) { - :root { - --editorFreeText-editing-cursor: url(images/cursor-editorFreeText.svg) 0 16, - text; - } -} - -@media screen and (forced-colors: active) { - :root { - --outline-color: CanvasText; - --outline-around-color: ButtonFace; - --resizer-bg-color: ButtonText; - --hover-outline-color: Highlight; - --hover-outline-around-color: SelectedItemText; - - --alt-text-bg-color: Canvas; - --alt-text-fg-color: ButtonText; - --alt-text-border-color: ButtonText; - --alt-text-hover-bg-color: Canvas; - --alt-text-hover-fg-color: SelectedItem; - --alt-text-hover-border-color: SelectedItem; - --alt-text-active-bg-color: ButtonFace; - --alt-text-active-fg-color: SelectedItem; - --alt-text-active-border-color: ButtonText; - --alt-text-focus-outline-color: CanvasText; - --alt-text-focus-border-color: ButtonText; - --alt-text-shadow: none; - --alt-text-opacity: 1; - } -} - -[data-editor-rotation="90"] { - transform: rotate(90deg); -} -[data-editor-rotation="180"] { - transform: rotate(180deg); -} -[data-editor-rotation="270"] { - transform: rotate(270deg); -} - -.annotationEditorLayer { - background: transparent; - position: absolute; - inset: 0; - font-size: calc(100px * var(--scale-factor)); - transform-origin: 0 0; - cursor: auto; - z-index: 4; -} - -.annotationEditorLayer.waiting { - content: ""; - cursor: wait; - position: absolute; - inset: 0; - width: 100%; - height: 100%; -} - -.annotationEditorLayer.freeTextEditing { - cursor: var(--editorFreeText-editing-cursor); -} - -.annotationEditorLayer.inkEditing { - cursor: var(--editorInk-editing-cursor); -} - -.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) { - position: absolute; - background: transparent; - z-index: 1; - transform-origin: 0 0; - cursor: auto; - max-width: 100%; - max-height: 100%; - border: var(--unfocus-outline); - - &.draggable.selectedEditor { - cursor: move; - } - - &.selectedEditor { - border: var(--focus-outline); - outline: var(--focus-outline-around); - - &::before { - /* - This is a workaround for the lack of support for stripes(...) (see - https://drafts.csswg.org/css-images-4/#stripes). - The outline should be composed of 1px white, 2px blue and 1px white. - This could be achieved in different ways: - - using a linear-gradient; - - using a box-shadow; - - using an outline on the selected element and an outline+border on - the ::before pseudo-element. - All these options lead to incorrect rendering likely due to rounding - issues. - That said it doesn't mean that the current is ideal, but it's the best - we could come up with for the moment. - One drawback of this approach is that we use a border on the selected - element which means that we must take care of it when positioning the - div in js (see AnnotationEditor._borderLineWidth in editor.js). - */ - content: ""; - position: absolute; - inset: 0; - border: var(--focus-outline-around); - } - } - - &:hover:not(.selectedEditor) { - border: var(--hover-outline); - outline: var(--hover-outline-around); - - &::before { - content: ""; - position: absolute; - inset: 0; - border: var(--focus-outline-around); - } - } -} - -.annotationEditorLayer .freeTextEditor { - padding: calc(var(--freetext-padding) * var(--scale-factor)); - width: auto; - height: auto; - touch-action: none; -} - -.annotationEditorLayer .freeTextEditor .internal { - background: transparent; - border: none; - inset: 0; - overflow: visible; - white-space: nowrap; - font: 10px sans-serif; - line-height: var(--freetext-line-height); - user-select: none; -} - -.annotationEditorLayer .freeTextEditor .overlay { - position: absolute; - display: none; - background: transparent; - inset: 0; - width: 100%; - height: 100%; -} - -.annotationEditorLayer .freeTextEditor .overlay.enabled { - display: block; -} - -.annotationEditorLayer .freeTextEditor .internal:empty::before { - content: attr(default-content); - color: gray; -} - -.annotationEditorLayer .freeTextEditor .internal:focus { - outline: none; - user-select: auto; -} - -.annotationEditorLayer .inkEditor { - width: 100%; - height: 100%; -} - -.annotationEditorLayer .inkEditor.editing { - cursor: inherit; -} - -.annotationEditorLayer .inkEditor .inkEditorCanvas { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - touch-action: none; -} - -.annotationEditorLayer .stampEditor { - width: auto; - height: auto; -} - -.annotationEditorLayer .stampEditor canvas { - width: 100%; - height: 100%; -} - -.annotationEditorLayer { - :is(.freeTextEditor, .inkEditor, .stampEditor) { - & > .resizers { - position: absolute; - inset: 0; - - &.hidden { - display: none; - } - - & > .resizer { - width: var(--resizer-size); - height: var(--resizer-size); - background: content-box var(--resizer-bg-color); - border: var(--focus-outline-around); - border-radius: 2px; - position: absolute; - - &.topLeft { - top: var(--resizer-shift); - left: var(--resizer-shift); - } - - &.topMiddle { - top: var(--resizer-shift); - left: calc(50% + var(--resizer-shift)); - } - - &.topRight { - top: var(--resizer-shift); - right: var(--resizer-shift); - } - - &.middleRight { - top: calc(50% + var(--resizer-shift)); - right: var(--resizer-shift); - } - - &.bottomRight { - bottom: var(--resizer-shift); - right: var(--resizer-shift); - } - - &.bottomMiddle { - bottom: var(--resizer-shift); - left: calc(50% + var(--resizer-shift)); - } - - &.bottomLeft { - bottom: var(--resizer-shift); - left: var(--resizer-shift); - } - - &.middleLeft { - top: calc(50% + var(--resizer-shift)); - left: var(--resizer-shift); - } - } - } - } - - &[data-main-rotation="0"] - :is([data-editor-rotation="0"], [data-editor-rotation="180"]), - &[data-main-rotation="90"] - :is([data-editor-rotation="270"], [data-editor-rotation="90"]), - &[data-main-rotation="180"] - :is([data-editor-rotation="180"], [data-editor-rotation="0"]), - &[data-main-rotation="270"] - :is([data-editor-rotation="90"], [data-editor-rotation="270"]) { - & > .resizers > .resizer { - &.topLeft, - &.bottomRight { - cursor: nwse-resize; - } - - &.topMiddle, - &.bottomMiddle { - cursor: ns-resize; - } - - &.topRight, - &.bottomLeft { - cursor: nesw-resize; - } - - &.middleRight, - &.middleLeft { - cursor: ew-resize; - } - } - } - - &[data-main-rotation="0"] - :is([data-editor-rotation="90"], [data-editor-rotation="270"]), - &[data-main-rotation="90"] - :is([data-editor-rotation="0"], [data-editor-rotation="180"]), - &[data-main-rotation="180"] - :is([data-editor-rotation="270"], [data-editor-rotation="90"]), - &[data-main-rotation="270"] - :is([data-editor-rotation="180"], [data-editor-rotation="0"]) { - & > .resizers > .resizer { - &.topLeft, - &.bottomRight { - cursor: nesw-resize; - } - - &.topMiddle, - &.bottomMiddle { - cursor: ew-resize; - } - - &.topRight, - &.bottomLeft { - cursor: nwse-resize; - } - - &.middleRight, - &.middleLeft { - cursor: ns-resize; - } - } - } - - & - :is( - [data-main-rotation="0"] [data-editor-rotation="90"], - [data-main-rotation="90"] [data-editor-rotation="0"], - [data-main-rotation="180"] [data-editor-rotation="270"], - [data-main-rotation="270"] [data-editor-rotation="180"] - ) { - & .altText { - rotate: 270deg; - - &:dir(ltr) { - inset-inline-start: calc(100% - 8px); - - &.small { - inset-inline-start: calc(100% + 8px); - inset-block-start: 100%; - } - } - - &:dir(rtl) { - inset-block-end: calc(100% - 8px); - - &.small { - inset-inline-start: -8px; - inset-block-start: 0; - } - } - } - } - - & - :is( - [data-main-rotation="0"] [data-editor-rotation="180"], - [data-main-rotation="90"] [data-editor-rotation="90"], - [data-main-rotation="180"] [data-editor-rotation="0"], - [data-main-rotation="270"] [data-editor-rotation="270"] - ) { - & .altText { - rotate: 180deg; - - inset-block-end: calc(100% - 8px); - inset-inline-start: calc(100% - 8px); - - &.small { - inset-inline-start: 100%; - inset-block-start: -8px; - } - } - } - - & - :is( - [data-main-rotation="0"] [data-editor-rotation="270"], - [data-main-rotation="90"] [data-editor-rotation="180"], - [data-main-rotation="180"] [data-editor-rotation="90"], - [data-main-rotation="270"] [data-editor-rotation="0"] - ) { - & .altText { - rotate: 90deg; - - &:dir(ltr) { - inset-block-end: calc(100% - 8px); - - &.small { - inset-inline-start: -8px; - inset-block-start: 0; - } - } - - &:dir(rtl) { - inset-inline-start: calc(100% - 8px); - - &.small { - inset-inline-start: calc(100% + 8px); - inset-block-start: 100%; - } - } - } - } -} - -.altText { - display: flex; - align-items: center; - justify-content: center; - width: auto; - height: 24px; - min-width: 88px; - z-index: 1; - pointer-events: all; - - color: var(--alt-text-fg-color); - font: menu; - font-size: 12px; - border-radius: 4px; - border: 1px solid var(--alt-text-border-color); - background-color: var(--alt-text-bg-color); - box-shadow: var(--alt-text-shadow); - - position: absolute; - inset-block-end: 8px; - inset-inline-start: 8px; - - &:dir(ltr) { - transform-origin: 0 100%; - } - &:dir(rtl) { - transform-origin: 100% 100%; - } - - &.small { - &:dir(ltr) { - transform-origin: 0 0; - } - &:dir(rtl) { - transform-origin: 100% 0; - } - - inset-block-end: unset; - inset-inline-start: 0; - inset-block-start: calc(100% + 8px); - } - - &:hover { - background-color: var(--alt-text-hover-bg-color); - border-color: var(--alt-text-hover-border-color); - color: var(--alt-text-hover-fg-color); - cursor: pointer; - - &::before { - background-color: var(--alt-text-hover-fg-color); - } - } - - &:active { - background-color: var(--alt-text-active-bg-color); - border-color: var(--alt-text-active-border-color); - color: var(--alt-text-active-fg-color); - - &::before { - background-color: var(--alt-text-active-fg-color); - } - } - - &:focus-visible { - outline: 2px solid var(--alt-text-focus-outline-color); - border-color: var(--alt-text-focus-border-color); - } - - &::before { - content: ""; - mask-image: var(--alt-text-add-image); - mask-repeat: no-repeat; - mask-position: center; - display: inline-block; - width: 12px; - height: 13px; - background-color: var(--alt-text-fg-color); - margin-inline-end: 4px; - } - - &.done::before { - mask-image: var(--alt-text-done-image); - } - - & .tooltip { - display: none; - - &.show { - --alt-text-tooltip-bg: #f0f0f4; - --alt-text-tooltip-fg: #15141a; - --alt-text-tooltip-border: #8f8f9d; - --alt-text-tooltip-shadow: 0px 2px 6px 0px rgba(58, 57, 68, 0.2); - - @media (prefers-color-scheme: dark) { - --alt-text-tooltip-bg: #1c1b22; - --alt-text-tooltip-fg: #fbfbfe; - --alt-text-tooltip-shadow: 0px 2px 6px 0px #15141a; - } - - @media screen and (forced-colors: active) { - --alt-text-tooltip-bg: Canvas; - --alt-text-tooltip-fg: CanvasText; - --alt-text-tooltip-border: CanvasText; - --alt-text-tooltip-shadow: none; - } - - display: inline-flex; - flex-direction: column; - align-items: center; - justify-content: center; - position: absolute; - top: calc(100% + 2px); - inset-inline-start: 0; - padding-block: 2px 3px; - padding-inline: 3px; - max-width: 300px; - width: max-content; - height: auto; - font-size: 12px; - - border: 0.5px solid var(--alt-text-tooltip-border); - background: var(--alt-text-tooltip-bg); - box-shadow: var(--alt-text-tooltip-shadow); - color: var(--alt-text-tooltip-fg); - - pointer-events: none; - } - } -} - -#altTextDialog { - --dialog-bg-color: white; - --dialog-border-color: white; - --dialog-shadow: 0 2px 14px 0 rgba(58, 57, 68, 0.2); - --text-primary-color: #15141a; - --text-secondary-color: #5b5b66; - --hover-filter: brightness(0.9); - --focus-ring-color: #0060df; - --focus-ring-outline: 2px solid var(--focus-ring-color); - - --textarea-border-color: #8f8f9d; - --textarea-bg-color: white; - --textarea-fg-color: var(--text-secondary-color); - - --radio-bg-color: #f0f0f4; - --radio-checked-bg-color: #fbfbfe; - --radio-border-color: #8f8f9d; - --radio-checked-border-color: #0060df; - - --button-cancel-bg-color: #f0f0f4; - --button-cancel-fg-color: var(--text-primary-color); - --button-cancel-border-color: var(--button-cancel-bg-color); - --button-cancel-hover-bg-color: var(--button-cancel-bg-color); - --button-cancel-hover-fg-color: var(--button-cancel-fg-color); - --button-cancel-hover-border-color: var(--button-cancel-hover-bg-color); - - --button-save-bg-color: #0060df; - --button-save-fg-color: #fbfbfe; - --button-save-hover-bg-color: var(--button-save-bg-color); - --button-save-hover-fg-color: var(--button-save-fg-color); - --button-save-hover-border-color: var(--button-save-hover-bg-color); - --button-save-disabled-bg-color: var(--button-save-bg-color); - --button-save-disabled-fg-color: var(--button-save-fg-color); - --button-save-disabled-opacity: 0.4; - - @media (prefers-color-scheme: dark) { - --dialog-bg-color: #1c1b22; - --dialog-border-color: #1c1b22; - --dialog-shadow: 0 2px 14px 0 #15141a; - --text-primary-color: #fbfbfe; - --text-secondary-color: #cfcfd8; - --focus-ring-color: #00ddff; - --hover-filter: brightness(1.4); - - --textarea-bg-color: #42414d; - - --radio-bg-color: #2b2a33; - --radio-checked-bg-color: #15141a; - --radio-checked-border-color: #00ddff; - - --button-cancel-bg-color: #2b2a33; - --button-save-bg-color: #00ddff; - --button-save-fg-color: #15141a; - } - - @media screen and (forced-colors: active) { - --dialog-bg-color: Canvas; - --dialog-border-color: CanvasText; - --dialog-shadow: none; - --text-primary-color: CanvasText; - --text-secondary-color: CanvasText; - --hover-filter: none; - --focus-ring-color: ButtonBorder; - - --textarea-border-color: ButtonBorder; - --textarea-bg-color: Field; - --textarea-fg-color: ButtonText; - - --radio-bg-color: ButtonFace; - --radio-checked-bg-color: ButtonFace; - --radio-border-color: ButtonText; - --radio-checked-border-color: ButtonText; - - --button-cancel-bg-color: ButtonFace; - --button-cancel-fg-color: ButtonText; - --button-cancel-border-color: ButtonText; - --button-cancel-hover-bg-color: AccentColor; - --button-cancel-hover-fg-color: AccentColorText; - - --button-save-bg-color: ButtonText; - --button-save-fg-color: ButtonFace; - --button-save-hover-bg-color: AccentColor; - --button-save-hover-fg-color: AccentColorText; - --button-save-disabled-bg-color: GrayText; - --button-save-disabled-fg-color: Canvas; - --button-save-disabled-opacity: 1; - } - - font: message-box; - font-size: 13px; - font-weight: 400; - line-height: 150%; - border-radius: 4px; - padding: 12px 16px; - border: 1px solid var(--dialog-border-color); - background: var(--dialog-bg-color); - color: var(--text-primary-color); - box-shadow: var(--dialog-shadow); - - &::backdrop { - /* This is needed to avoid to darken the image the user want to describe. */ - display: none; - } - - &.positioned { - margin: 0; - } - - & #altTextContainer { - width: 300px; - height: -moz-fit-content; - height: fit-content; - display: inline-flex; - flex-direction: column; - align-items: flex-start; - gap: 16px; - - & *:focus-visible { - outline: var(--focus-ring-outline); - outline-offset: 2px; - } - - & .radio { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 4px; - - & .radioButton { - display: flex; - gap: 8px; - align-self: stretch; - align-items: center; - - & input { - appearance: none; - box-sizing: border-box; - width: 16px; - height: 16px; - border-radius: 50%; - background-color: var(--radio-bg-color); - border: 1px solid var(--radio-border-color); - - &:hover { - filter: var(--hover-filter); - } - - &:checked { - background-color: var(--radio-checked-bg-color); - border: 4px solid var(--radio-checked-border-color); - } - } - } - - & .radioLabel { - display: flex; - padding-inline-start: 24px; - align-items: flex-start; - gap: 10px; - align-self: stretch; - - & span { - flex: 1 0 0; - font-size: 11px; - color: var(--text-secondary-color); - } - } - } - - & #overallDescription { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 4px; - align-self: stretch; - - & span { - align-self: stretch; - } - - & .title { - font-size: 13px; - font-style: normal; - font-weight: 590; - } - } - - & #addDescription { - display: flex; - flex-direction: column; - align-items: stretch; - gap: 8px; - - & .descriptionArea { - flex: 1; - padding-inline: 24px 10px; - - textarea { - font: inherit; - width: 100%; - min-height: 75px; - padding: 8px; - resize: none; - margin: 0; - box-sizing: border-box; - border-radius: 4px; - border: 1px solid var(--textarea-border-color); - background: var(--textarea-bg-color); - color: var(--textarea-fg-color); - - &:focus { - outline-offset: 0; - border-color: transparent; - } - &:disabled { - pointer-events: none; - opacity: 0.4; - } - } - } - } - - & #buttons { - display: flex; - justify-content: flex-end; - align-items: flex-start; - gap: 8px; - align-self: stretch; - - button { - border-radius: 4px; - border: 1px solid; - font: menu; - font-weight: 600; - padding: 4px 16px; - width: auto; - height: 32px; - - &:hover { - cursor: pointer; - filter: var(--hover-filter); - } - - &#altTextCancel { - color: var(--button-cancel-fg-color); - background-color: var(--button-cancel-bg-color); - border-color: var(--button-cancel-border-color); - - &:hover { - color: var(--button-cancel-hover-fg-color); - background-color: var(--button-cancel-hover-bg-color); - border-color: var(--button-cancel-hover-border-color); - } - } - - &#altTextSave { - color: var(--button-save-hover-fg-color); - background-color: var(--button-save-hover-bg-color); - border-color: var(--button-save-hover-border-color); - opacity: 1; - - &:hover { - color: var(--button-save-hover-fg-color); - background-color: var(--button-save-hover-bg-color); - border-color: var(--button-save-hover-border-color); - } - - &:disabled { - color: var(--button-save-disabled-fg-color); - background-color: var(--button-save-disabled-bg-color); - opacity: var(--button-save-disabled-opacity); - pointer-events: none; - } - } - } - } - } -} +/* Ignored in GECKOVIEW builds: */ :root { --viewer-container-height: 0; diff --git a/toolkit/components/pdfjs/content/web/viewer-geckoview.js b/toolkit/components/pdfjs/content/web/viewer-geckoview.js index 71ab7b3a9893..318c287087f9 100644 --- a/toolkit/components/pdfjs/content/web/viewer-geckoview.js +++ b/toolkit/components/pdfjs/content/web/viewer-geckoview.js @@ -836,7 +836,7 @@ const PDFViewerApplication = { background: _app_options.AppOptions.get("pageColorsBackground"), foreground: _app_options.AppOptions.get("pageColorsForeground") } : null; - const altTextManager = appConfig.altTextDialog ? new _webAlt_text_manager.AltTextManager(appConfig.altTextDialog, this.overlayManager, eventBus) : null; + const altTextManager = appConfig.altTextDialog ? new _webAlt_text_manager.AltTextManager(appConfig.altTextDialog, container, this.overlayManager, eventBus) : null; const pdfViewer = new _pdf_viewer.PDFViewer({ container, viewer, @@ -2239,7 +2239,7 @@ function webViewerWheel(evt) { const isPinchToZoom = evt.ctrlKey && !PDFViewerApplication._isCtrlKeyDown && deltaMode === WheelEvent.DOM_DELTA_PIXEL && evt.deltaX === 0 && (Math.abs(scaleFactor - 1) < 0.05 || isBuiltInMac) && evt.deltaZ === 0; if (isPinchToZoom || evt.ctrlKey && supportedMouseWheelZoomModifierKeys.ctrlKey || evt.metaKey && supportedMouseWheelZoomModifierKeys.metaKey) { evt.preventDefault(); - if (zoomDisabledTimeout || document.visibilityState === "hidden") { + if (zoomDisabledTimeout || document.visibilityState === "hidden" || PDFViewerApplication.overlayManager.active) { return; } const previousScale = pdfViewer.currentScale; @@ -2283,7 +2283,7 @@ function webViewerTouchStart(evt) { return; } evt.preventDefault(); - if (evt.touches.length !== 2) { + if (evt.touches.length !== 2 || PDFViewerApplication.overlayManager.active) { PDFViewerApplication._touchInfo = null; return; } @@ -6107,7 +6107,7 @@ class PDFViewer { #scaleTimeoutId = null; #textLayerMode = _ui_utils.TextLayerMode.ENABLE; constructor(options) { - const viewerVersion = '3.11.131'; + const viewerVersion = '3.11.153'; if (_pdfjsLib.version !== viewerVersion) { throw new Error(`The API version "${_pdfjsLib.version}" does not match the Viewer version "${viewerVersion}".`); } @@ -9747,8 +9747,8 @@ var _ui_utils = __webpack_require__(4); var _app_options = __webpack_require__(6); var _pdf_link_service = __webpack_require__(8); var _app = __webpack_require__(3); -const pdfjsVersion = '3.11.131'; -const pdfjsBuild = 'a7894a4d7'; +const pdfjsVersion = '3.11.153'; +const pdfjsBuild = '85568bd6c'; const AppConstants = null; exports.PDFViewerApplicationConstants = AppConstants; window.PDFViewerApplication = _app.PDFViewerApplication; diff --git a/toolkit/components/pdfjs/content/web/viewer.css b/toolkit/components/pdfjs/content/web/viewer.css index f3e4dd53b37f..e5d9d9ddd229 100644 --- a/toolkit/components/pdfjs/content/web/viewer.css +++ b/toolkit/components/pdfjs/content/web/viewer.css @@ -773,6 +773,7 @@ } } +/* Ignored in GECKOVIEW builds: */ :root { --outline-width: 2px; @@ -1443,7 +1444,7 @@ &::backdrop { /* This is needed to avoid to darken the image the user want to describe. */ - display: none; + mask: url(#alttext-manager-mask); } &.positioned { diff --git a/toolkit/components/pdfjs/content/web/viewer.html b/toolkit/components/pdfjs/content/web/viewer.html index baa3f766b85d..9f4c615b1183 100644 --- a/toolkit/components/pdfjs/content/web/viewer.html +++ b/toolkit/components/pdfjs/content/web/viewer.html @@ -452,7 +452,7 @@ See https://github.com/adobe-type-tools/cmap-resources
- +
diff --git a/toolkit/components/pdfjs/content/web/viewer.js b/toolkit/components/pdfjs/content/web/viewer.js index 966baec66d0e..127a74498b61 100644 --- a/toolkit/components/pdfjs/content/web/viewer.js +++ b/toolkit/components/pdfjs/content/web/viewer.js @@ -800,7 +800,7 @@ const PDFViewerApplication = { background: _app_options.AppOptions.get("pageColorsBackground"), foreground: _app_options.AppOptions.get("pageColorsForeground") } : null; - const altTextManager = appConfig.altTextDialog ? new _webAlt_text_manager.AltTextManager(appConfig.altTextDialog, this.overlayManager, eventBus) : null; + const altTextManager = appConfig.altTextDialog ? new _webAlt_text_manager.AltTextManager(appConfig.altTextDialog, container, this.overlayManager, eventBus) : null; const pdfViewer = new _pdf_viewer.PDFViewer({ container, viewer, @@ -2236,7 +2236,7 @@ function webViewerWheel(evt) { const isPinchToZoom = evt.ctrlKey && !PDFViewerApplication._isCtrlKeyDown && deltaMode === WheelEvent.DOM_DELTA_PIXEL && evt.deltaX === 0 && (Math.abs(scaleFactor - 1) < 0.05 || isBuiltInMac) && evt.deltaZ === 0; if (isPinchToZoom || evt.ctrlKey && supportedMouseWheelZoomModifierKeys.ctrlKey || evt.metaKey && supportedMouseWheelZoomModifierKeys.metaKey) { evt.preventDefault(); - if (zoomDisabledTimeout || document.visibilityState === "hidden") { + if (zoomDisabledTimeout || document.visibilityState === "hidden" || PDFViewerApplication.overlayManager.active) { return; } const previousScale = pdfViewer.currentScale; @@ -2280,7 +2280,7 @@ function webViewerTouchStart(evt) { return; } evt.preventDefault(); - if (evt.touches.length !== 2) { + if (evt.touches.length !== 2 || PDFViewerApplication.overlayManager.active) { PDFViewerApplication._touchInfo = null; return; } @@ -4056,7 +4056,7 @@ var _pdfjsLib = __webpack_require__(5); class AltTextManager { #boundUpdateUIState = this.#updateUIState.bind(this); #boundSetPosition = this.#setPosition.bind(this); - #boundPointerDown = this.#pointerDown.bind(this); + #boundOnClick = this.#onClick.bind(this); #currentEditor = null; #cancelButton; #dialog; @@ -4069,6 +4069,10 @@ class AltTextManager { #textarea; #uiManager; #previousAltText = null; + #svgElement = null; + #rectElement = null; + #container; + #telemetryData = null; constructor({ dialog, optionDescription, @@ -4076,7 +4080,7 @@ class AltTextManager { textarea, cancelButton, saveButton - }, overlayManager, eventBus) { + }, container, overlayManager, eventBus) { this.#dialog = dialog; this.#optionDescription = optionDescription; this.#optionDecorative = optionDecorative; @@ -4085,24 +4089,51 @@ class AltTextManager { this.#saveButton = saveButton; this.#overlayManager = overlayManager; this.#eventBus = eventBus; + this.#container = container; dialog.addEventListener("close", this.#close.bind(this)); - cancelButton.addEventListener("click", this.#cancel.bind(this)); + cancelButton.addEventListener("click", this.#finish.bind(this)); saveButton.addEventListener("click", this.#save.bind(this)); optionDescription.addEventListener("change", this.#boundUpdateUIState); optionDecorative.addEventListener("change", this.#boundUpdateUIState); - textarea.addEventListener("input", this.#boundUpdateUIState); this.#overlayManager.register(dialog); } get _elements() { return (0, _pdfjsLib.shadow)(this, "_elements", [this.#optionDescription, this.#optionDecorative, this.#textarea, this.#saveButton, this.#cancelButton]); } + #createSVGElement() { + if (this.#svgElement) { + return; + } + const svgFactory = new _pdfjsLib.DOMSVGFactory(); + const svg = this.#svgElement = svgFactory.createElement("svg"); + svg.setAttribute("width", "0"); + svg.setAttribute("height", "0"); + const defs = svgFactory.createElement("defs"); + svg.append(defs); + const mask = svgFactory.createElement("mask"); + defs.append(mask); + mask.setAttribute("id", "alttext-manager-mask"); + mask.setAttribute("maskContentUnits", "objectBoundingBox"); + let rect = svgFactory.createElement("rect"); + mask.append(rect); + rect.setAttribute("fill", "white"); + rect.setAttribute("width", "1"); + rect.setAttribute("height", "1"); + rect.setAttribute("x", "0"); + rect.setAttribute("y", "0"); + rect = this.#rectElement = svgFactory.createElement("rect"); + mask.append(rect); + rect.setAttribute("fill", "black"); + this.#dialog.append(svg); + } async editAltText(uiManager, editor) { if (this.#currentEditor || !editor) { return; } + this.#createSVGElement(); this.#hasUsedPointer = false; for (const element of this._elements) { - element.addEventListener("pointerdown", this.#boundPointerDown); + element.addEventListener("click", this.#boundOnClick); } const { altText, @@ -4137,6 +4168,12 @@ class AltTextManager { const { style } = dialog; + const { + x: containerX, + y: containerY, + width: containerW, + height: containerH + } = this.#container.getBoundingClientRect(); const { innerWidth: windowW, innerHeight: windowH @@ -4153,8 +4190,16 @@ class AltTextManager { } = this.#currentEditor.getClientDimensions(); const MARGIN = 10; const isLTR = this.#uiManager.direction === "ltr"; + const xs = Math.max(x, containerX); + const xe = Math.min(x + width, containerX + containerW); + const ys = Math.max(y, containerY); + const ye = Math.min(y + height, containerY + containerH); + this.#rectElement.setAttribute("width", `${(xe - xs) / windowW}`); + this.#rectElement.setAttribute("height", `${(ye - ys) / windowH}`); + this.#rectElement.setAttribute("x", `${xs / windowW}`); + this.#rectElement.setAttribute("y", `${ys / windowH}`); let left = null; - let top = y; + let top = Math.max(y, 0); top += Math.min(windowH - (top + dialogH), 0); if (isLTR) { if (x + width + MARGIN + dialogW < windowW) { @@ -4169,7 +4214,7 @@ class AltTextManager { } if (left === null) { top = null; - left = x; + left = Math.max(x, 0); left += Math.min(windowW - (left + dialogW), 0); if (y > dialogH + MARGIN) { top = y - dialogH - MARGIN; @@ -4196,32 +4241,27 @@ class AltTextManager { this.#overlayManager.close(this.#dialog); } } - #cancel() { + #close() { this.#eventBus.dispatch("reporttelemetry", { source: this, details: { type: "editing", subtype: this.#currentEditor.editorType, - data: { + data: this.#telemetryData || { action: "alt_text_cancel", alt_text_keyboard: !this.#hasUsedPointer } } }); - this.#finish(); - } - #close() { - this.#removePointerDownListeners(); + this.#telemetryData = null; + this.#removeOnClickListeners(); this.#uiManager?.addEditListeners(); this.#eventBus._off("resize", this.#boundSetPosition); this.#currentEditor = null; this.#uiManager = null; } #updateUIState() { - const hasAltText = !!this.#textarea.value.trim(); - const decorative = this.#optionDecorative.checked; - this.#textarea.disabled = decorative; - this.#saveButton.disabled = !decorative && !hasAltText; + this.#textarea.disabled = this.#optionDecorative.checked; } #save() { const altText = this.#textarea.value.trim(); @@ -4230,35 +4270,32 @@ class AltTextManager { altText, decorative }; - this.#eventBus.dispatch("reporttelemetry", { - source: this, - details: { - type: "editing", - subtype: this.#currentEditor.editorType, - data: { - action: "alt_text_save", - alt_text_description: !!altText, - alt_text_edit: !!this.#previousAltText && this.#previousAltText !== altText, - alt_text_decorative: decorative, - alt_text_keyboard: !this.#hasUsedPointer - } - } - }); + this.#telemetryData = { + action: "alt_text_save", + alt_text_description: !!altText, + alt_text_edit: !!this.#previousAltText && this.#previousAltText !== altText, + alt_text_decorative: decorative, + alt_text_keyboard: !this.#hasUsedPointer + }; this.#finish(); } - #pointerDown() { + #onClick(evt) { + if (evt.detail === 0) { + return; + } this.#hasUsedPointer = true; - this.#removePointerDownListeners(); + this.#removeOnClickListeners(); } - #removePointerDownListeners() { + #removeOnClickListeners() { for (const element of this._elements) { - element.removeEventListener("pointerdown", this.#boundPointerDown); + element.removeEventListener("click", this.#boundOnClick); } } destroy() { - this.#currentEditor = null; this.#uiManager = null; this.#finish(); + this.#svgElement?.remove(); + this.#svgElement = this.#rectElement = null; } } exports.AltTextManager = AltTextManager; @@ -8793,7 +8830,7 @@ class PDFViewer { #scaleTimeoutId = null; #textLayerMode = _ui_utils.TextLayerMode.ENABLE; constructor(options) { - const viewerVersion = '3.11.131'; + const viewerVersion = '3.11.153'; if (_pdfjsLib.version !== viewerVersion) { throw new Error(`The API version "${_pdfjsLib.version}" does not match the Viewer version "${viewerVersion}".`); } @@ -12950,8 +12987,8 @@ var _ui_utils = __webpack_require__(4); var _app_options = __webpack_require__(6); var _pdf_link_service = __webpack_require__(8); var _app = __webpack_require__(3); -const pdfjsVersion = '3.11.131'; -const pdfjsBuild = 'a7894a4d7'; +const pdfjsVersion = '3.11.153'; +const pdfjsBuild = '85568bd6c'; const AppConstants = null; exports.PDFViewerApplicationConstants = AppConstants; window.PDFViewerApplication = _app.PDFViewerApplication; diff --git a/toolkit/components/pdfjs/moz.yaml b/toolkit/components/pdfjs/moz.yaml index eb9e61a5a855..23ed610dcd9e 100644 --- a/toolkit/components/pdfjs/moz.yaml +++ b/toolkit/components/pdfjs/moz.yaml @@ -20,8 +20,8 @@ origin: # Human-readable identifier for this version/release # Generally "version NNN", "tag SSS", "bookmark SSS" - release: a7894a4d7bf61899b98ea928e2b26a55138f1755 (2023-09-21T12:19:51Z). - revision: a7894a4d7bf61899b98ea928e2b26a55138f1755 + release: 85568bd6ccf391818569190894e4f7ade7f1284d (2023-09-22T20:45:13Z). + revision: 85568bd6ccf391818569190894e4f7ade7f1284d # The package's license, where possible using the mnemonic from # https://spdx.org/licenses/