l10n/eu/viewer.ftl

@@ -529,8 +529,8 @@ pdfjs-editor-add-signature-dialog-title = Gehitu sinadura
 ## Tab names
 
 # Type is a verb (you can type your name as signature)
-pdfjs-editor-add-signature-type-button = Idatzi
-    .title = Idatzi
+pdfjs-editor-add-signature-type-button = Mota
+    .title = Mota
 # Draw is a verb (you can draw your signature)
 pdfjs-editor-add-signature-draw-button = Marraztu
     .title = Marraztu

l10n/fur/viewer.ftl

@@ -316,9 +316,6 @@ pdfjs-highlight-floating-button1 =
     .title = Evidenzie
     .aria-label = Evidenzie
 pdfjs-highlight-floating-button-label = Evidenzie
-pdfjs-editor-signature-button =
-    .title = Zonte firme
-pdfjs-editor-signature-button-label = Zonte firme
 
 ## Remove button for the various kind of editor.
 
@@ -348,9 +345,6 @@ pdfjs-editor-stamp-add-image-button-label = Zonte imagjin
 pdfjs-editor-free-highlight-thickness-input = Spessôr
 pdfjs-editor-free-highlight-thickness-title =
     .title = Modifiche il spessôr de selezion pai elements che no son testuâi
-pdfjs-editor-signature-add-signature-button =
-    .title = Zonte gnove firme
-pdfjs-editor-signature-add-signature-button-label = Zonte gnove firme
 # .default-content is used as a placeholder in an empty text editor.
 pdfjs-free-text2 =
     .aria-label = Editôr di test
@@ -576,18 +570,12 @@ pdfjs-editor-add-signature-error-close-button = Siere
 
 pdfjs-editor-add-signature-cancel-button = Anule
 pdfjs-editor-add-signature-add-button = Zonte
-pdfjs-editor-edit-signature-update-button = Inzorne
 
 ## Main menu for adding/removing signatures
 
-pdfjs-editor-delete-signature-button =
-    .title = Gjave firme
-pdfjs-editor-delete-signature-button-label = Gjave firme
 
 ## Editor toolbar
 
-pdfjs-editor-add-signature-edit-button-label = Modifiche descrizion
 
 ## Edit signature description dialog
 
-pdfjs-editor-edit-signature-dialog-title = Modifiche descrizion

l10n/fy-NL/viewer.ftl

@@ -316,9 +316,6 @@ pdfjs-highlight-floating-button1 =
     .title = Markearje
     .aria-label = Markearje
 pdfjs-highlight-floating-button-label = Markearje
-pdfjs-editor-signature-button =
-    .title = Hantekening tafoegje
-pdfjs-editor-signature-button-label = Hantekening tafoegje
 
 ## Remove button for the various kind of editor.
 
@@ -348,9 +345,6 @@ pdfjs-editor-stamp-add-image-button-label = Ofbylding tafoegje
 pdfjs-editor-free-highlight-thickness-input = Tsjokte
 pdfjs-editor-free-highlight-thickness-title =
     .title = Tsjokte wizigje by aksintuearring fan oare items as tekst
-pdfjs-editor-signature-add-signature-button =
-    .title = Nije hantekening tafoegje
-pdfjs-editor-signature-add-signature-button-label = Nije hantekening tafoegje
 # .default-content is used as a placeholder in an empty text editor.
 pdfjs-free-text2 =
     .aria-label = Tekstbewurker
@@ -576,17 +570,12 @@ pdfjs-editor-add-signature-error-close-button = Slute
 
 pdfjs-editor-add-signature-cancel-button = Annulearje
 pdfjs-editor-add-signature-add-button = Tafoegje
-pdfjs-editor-edit-signature-update-button = Bywurkje
 
 ## Main menu for adding/removing signatures
 
-pdfjs-editor-delete-signature-button =
-    .title = Hantekening fuortsmite
-pdfjs-editor-delete-signature-button-label = Hantekening fuortsmite
 
 ## Editor toolbar
 
-pdfjs-editor-add-signature-edit-button-label = Beskriuwing bewurkje
 
 ## Edit signature description dialog
 

l10n/gn/viewer.ftl

@@ -566,9 +566,6 @@ pdfjs-editor-add-signature-clear-button-label = Emboguete teraguapy
 pdfjs-editor-add-signature-clear-button =
     .title = Emboguete teraguapy
 pdfjs-editor-add-signature-save-checkbox = Eñongatu teraguapy
-pdfjs-editor-add-signature-save-warning-message = Ehupytýma 5 mboheraguapy ñongatupyre. Embogue peteĩ eñongatukuaa jey hag̃ua.
-pdfjs-editor-add-signature-image-upload-error-title = Ndaikatúi ojehupi pe ta’ãnga
-pdfjs-editor-add-signature-image-upload-error-description = Ehechajey ne ñanduti oikópa térã aha’ã ambue ta’ãnga ndive.
 pdfjs-editor-add-signature-error-close-button = Mboty
 
 ## Dialog buttons

l10n/hy-AM/viewer.ftl

@@ -39,9 +39,6 @@ pdfjs-open-file-button-label = Բացել
 pdfjs-print-button =
     .title = Տպել
 pdfjs-print-button-label = Տպել
-pdfjs-save-button =
-    .title = Պահպանել
-pdfjs-save-button-label = Պահպանել
 # Used in Firefox for Android as a label for the download button (“download” is a verb).
 # Length of the translation matters since we are in a mobile context, with limited screen estate.
 pdfjs-download-button-label = Ներբեռնել
@@ -259,7 +256,6 @@ pdfjs-free-text-default-content = Սկսել մուտքագրումը…
 
 ## Alt-text dialog
 
-pdfjs-editor-alt-text-save-button = Պահպանել
 
 ## Editor resizers
 ## This is used in an aria label to help to understand the role of the resizer.

l10n/tr/viewer.ftl

@@ -525,7 +525,6 @@ pdfjs-editor-undo-bar-close-button-label = Kapat
 
 ## Add a signature dialog
 
-pdfjs-editor-add-signature-dialog-label = Bu pencereden PDF belgesine eklemek üzere imza oluşturabilirsiniz. Adınızı düzenleyebilir (adınız alt metin olarak da kullanılır) ve isterseniz ileride tekrar kullanmak üzere imzayı kaydedebilirsiniz.
 pdfjs-editor-add-signature-dialog-title = İmza ekle
 
 ## Tab names

l10n/zh-TW/viewer.ftl

@@ -173,8 +173,8 @@ pdfjs-print-progress-message = 正在準備列印文件…
 #   $progress (Number) - percent value
 pdfjs-print-progress-percent = { $progress }%
 pdfjs-print-progress-close-button = 取消
-pdfjs-printing-not-supported = 警告：此瀏覽器未完整支援列印功能。
-pdfjs-printing-not-ready = 警告：此 PDF 未完成下載以供列印。
+pdfjs-printing-not-supported = 警告: 此瀏覽器未完整支援列印功能。
+pdfjs-printing-not-ready = 警告: 此 PDF 未完成下載以供列印。
 
 ## Tooltips and alt text for side panel toolbar buttons
 

src/core/crypto.js

@@ -632,26 +632,13 @@ class AES256Cipher extends AESBaseCipher {
   }
 }
 
-class PDFBase {
-  constructor() {
-    if (
-      (typeof PDFJSDev === "undefined" || PDFJSDev.test("TESTING")) &&
-      this.constructor === PDFBase
-    ) {
-      unreachable("Cannot initialize PDFBase.");
-    }
-  }
-
-  _hash(password, input, userBytes) {
-    unreachable("Abstract method `_hash` called");
-  }
-
+class PDF17 {
   checkOwnerPassword(password, ownerValidationSalt, userBytes, ownerPassword) {
     const hashData = new Uint8Array(password.length + 56);
     hashData.set(password, 0);
     hashData.set(ownerValidationSalt, password.length);
     hashData.set(userBytes, password.length + ownerValidationSalt.length);
-    const result = this._hash(password, hashData, userBytes);
+    const result = calculateSHA256(hashData, 0, hashData.length);
     return isArrayEqual(result, ownerPassword);
   }
 
@@ -659,7 +646,7 @@ class PDFBase {
     const hashData = new Uint8Array(password.length + 8);
     hashData.set(password, 0);
     hashData.set(userValidationSalt, password.length);
-    const result = this._hash(password, hashData, []);
+    const result = calculateSHA256(hashData, 0, hashData.length);
     return isArrayEqual(result, userPassword);
   }
 
@@ -668,7 +655,7 @@ class PDFBase {
     hashData.set(password, 0);
     hashData.set(ownerKeySalt, password.length);
     hashData.set(userBytes, password.length + ownerKeySalt.length);
-    const key = this._hash(password, hashData, userBytes);
+    const key = calculateSHA256(hashData, 0, hashData.length);
     const cipher = new AES256Cipher(key);
     return cipher.decryptBlock(ownerEncryption, false, new Uint8Array(16));
   }
@@ -678,20 +665,14 @@ class PDFBase {
     hashData.set(password, 0);
     hashData.set(userKeySalt, password.length);
     // `key` is the decryption key for the UE string.
-    const key = this._hash(password, hashData, []);
+    const key = calculateSHA256(hashData, 0, hashData.length);
     const cipher = new AES256Cipher(key);
     return cipher.decryptBlock(userEncryption, false, new Uint8Array(16));
   }
 }
 
-class PDF17 extends PDFBase {
-  _hash(password, input, userBytes) {
-    return calculateSHA256(input, 0, input.length);
-  }
-}
-
-class PDF20 extends PDFBase {
-  _hash(password, input, userBytes) {
+class PDF20 {
+  #hash(password, input, userBytes) {
     // This refers to Algorithm 2.B as defined in ISO 32000-2.
     let k = calculateSHA256(input, 0, input.length).subarray(0, 32);
     let e = [0];
@@ -732,6 +713,43 @@ class PDF20 extends PDFBase {
     }
     return k.subarray(0, 32);
   }
+
+  checkOwnerPassword(password, ownerValidationSalt, userBytes, ownerPassword) {
+    const hashData = new Uint8Array(password.length + 56);
+    hashData.set(password, 0);
+    hashData.set(ownerValidationSalt, password.length);
+    hashData.set(userBytes, password.length + ownerValidationSalt.length);
+    const result = this.#hash(password, hashData, userBytes);
+    return isArrayEqual(result, ownerPassword);
+  }
+
+  checkUserPassword(password, userValidationSalt, userPassword) {
+    const hashData = new Uint8Array(password.length + 8);
+    hashData.set(password, 0);
+    hashData.set(userValidationSalt, password.length);
+    const result = this.#hash(password, hashData, []);
+    return isArrayEqual(result, userPassword);
+  }
+
+  getOwnerKey(password, ownerKeySalt, userBytes, ownerEncryption) {
+    const hashData = new Uint8Array(password.length + 56);
+    hashData.set(password, 0);
+    hashData.set(ownerKeySalt, password.length);
+    hashData.set(userBytes, password.length + ownerKeySalt.length);
+    const key = this.#hash(password, hashData, userBytes);
+    const cipher = new AES256Cipher(key);
+    return cipher.decryptBlock(ownerEncryption, false, new Uint8Array(16));
+  }
+
+  getUserKey(password, userKeySalt, userEncryption) {
+    const hashData = new Uint8Array(password.length + 8);
+    hashData.set(password, 0);
+    hashData.set(userKeySalt, password.length);
+    // `key` is the decryption key for the UE string.
+    const key = this.#hash(password, hashData, []);
+    const cipher = new AES256Cipher(key);
+    return cipher.decryptBlock(userEncryption, false, new Uint8Array(16));
+  }
 }
 
 class CipherTransform {

src/core/parser.js

@@ -933,14 +933,9 @@ class Lexer {
     if (ch < /* '0' = */ 0x30 || ch > /* '9' = */ 0x39) {
       const msg = `Invalid number: ${String.fromCharCode(ch)} (charCode ${ch})`;
 
-      if (
-        isWhiteSpace(ch) ||
-        /* '(' = */ ch === 0x28 ||
-        /* '<' = */ ch === 0x3c ||
-        ch === /* EOF = */ -1
-      ) {
+      if (isWhiteSpace(ch) || ch === /* EOF = */ -1) {
         // This is consistent with Adobe Reader (fixes issue9252.pdf,
-        // issue15604.pdf, bug1753983.pdf, bug1953099.pdf).
+        // issue15604.pdf, bug1753983.pdf).
         info(`Lexer.getNumber - "${msg}".`);
         return 0;
       }

src/display/canvas.js

@@ -30,7 +30,6 @@ import {
 import {
   getCurrentTransform,
   getCurrentTransformInverse,
-  OutputScale,
   PixelsPerInch,
 } from "./display_utils.js";
 import {
@@ -812,7 +811,7 @@ function getImageSmoothingEnabled(transform, interpolate) {
   scale[0] = Math.fround(scale[0]);
   scale[1] = Math.fround(scale[1]);
   const actualScale = Math.fround(
-    OutputScale.pixelRatio * PixelsPerInch.PDF_TO_CSS_UNITS
+    (globalThis.devicePixelRatio || 1) * PixelsPerInch.PDF_TO_CSS_UNITS
   );
   return scale[0] <= actualScale && scale[1] <= actualScale;
 }

src/display/display_utils.js

@@ -620,7 +620,7 @@ function setLayerDimensions(
  */
 class OutputScale {
   constructor() {
-    const { pixelRatio } = OutputScale;
+    const pixelRatio = window.devicePixelRatio || 1;
 
     /**
      * @type {number} Horizontal scale.
@@ -673,10 +673,6 @@ class OutputScale {
     }
     return false;
   }
-
-  static get pixelRatio() {
-    return globalThis.devicePixelRatio || 1;
-  }
 }
 
 // See https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types

src/display/text_layer.js

@@ -23,7 +23,7 @@ import {
   Util,
   warn,
 } from "../shared/util.js";
-import { OutputScale, setLayerDimensions } from "./display_utils.js";
+import { setLayerDimensions } from "./display_utils.js";
 
 /**
  * @typedef {Object} TextLayerParameters
@@ -115,7 +115,7 @@ class TextLayer {
     }
     this.#container = this.#rootContainer = container;
 
-    this.#scale = viewport.scale * OutputScale.pixelRatio;
+    this.#scale = viewport.scale * (globalThis.devicePixelRatio || 1);
     this.#rotation = viewport.rotation;
     this.#layoutTextParams = {
       div: null,
@@ -205,7 +205,7 @@ class TextLayer {
    * @returns {undefined}
    */
   update({ viewport, onBefore = null }) {
-    const scale = viewport.scale * OutputScale.pixelRatio;
+    const scale = viewport.scale * (globalThis.devicePixelRatio || 1);
     const rotation = viewport.rotation;
 
     if (rotation !== this.#rotation) {

src/display/touch_manager.js

@@ -13,7 +13,8 @@
  * limitations under the License.
  */
 
-import { OutputScale, stopEvent } from "./display_utils.js";
+import { shadow } from "../shared/util.js";
+import { stopEvent } from "./display_utils.js";
 
 class TouchManager {
   #container;
@@ -64,10 +65,6 @@ class TouchManager {
     });
   }
 
-  /**
-   * NOTE: Don't shadow this value since `devicePixelRatio` may change if the
-   * window resolution changes, e.g. if the viewer is moved to another monitor.
-   */
   get MIN_TOUCH_DISTANCE_TO_PINCH() {
     // The 35 is coming from:
     //  https://searchfox.org/mozilla-central/source/gfx/layers/apz/src/GestureEventListener.cpp#36
@@ -75,7 +72,11 @@ class TouchManager {
     // The properties TouchEvent::screenX/Y are in screen CSS pixels:
     //  https://developer.mozilla.org/en-US/docs/Web/API/Touch/screenX#examples
     // MIN_TOUCH_DISTANCE_TO_PINCH is in CSS pixels.
-    return 35 / OutputScale.pixelRatio;
+    return shadow(
+      this,
+      "MIN_TOUCH_DISTANCE_TO_PINCH",
+      35 / (window.devicePixelRatio || 1)
+    );
   }
 
   #onTouchStart(evt) {

test/driver.js

@@ -20,7 +20,6 @@ const {
   DrawLayer,
   getDocument,
   GlobalWorkerOptions,
-  OutputScale,
   PixelsPerInch,
   shadow,
   TextLayer,
@@ -877,7 +876,7 @@ class Driver {
           page => {
             // Default to creating the test images at the devices pixel ratio,
             // unless the test explicitly specifies an output scale.
-            const outputScale = task.outputScale || OutputScale.pixelRatio;
+            const outputScale = task.outputScale || window.devicePixelRatio;
             let viewport = page.getViewport({
               scale: PixelsPerInch.PDF_TO_CSS_UNITS,
             });

test/pdfs/.gitignore

@@ -16,7 +16,6 @@
 !bug1727053.pdf
 !issue18408_reduced.pdf
 !bug1907000_reduced.pdf
-!bug1953099.pdf
 !issue11913.pdf
 !issue2391-1.pdf
 !issue2391-2.pdf

test/test_manifest.json

@@ -10414,14 +10414,6 @@
     "link": true,
     "type": "eq"
   },
-  {
-    "id": "bug1953099",
-    "file": "pdfs/bug1953099.pdf",
-    "md5": "15295cfa4999ccc08442423fca96c28f",
-    "rounds": 1,
-    "link": false,
-    "type": "eq"
-  },
   {
     "id": "bug1899804_print",
     "file": "pdfs/bug1899804.pdf",

test/unit/parser_spec.js

@@ -152,17 +152,7 @@ describe("parser", function () {
       });
 
       it("should treat a single decimal point, or minus/plus sign, as zero", function () {
-        const validNums = [
-          ".",
-          "-",
-          "+",
-          "-.",
-          "+.",
-          "-\r\n.",
-          "+\r\n.",
-          "-(",
-          "-<",
-        ];
+        const validNums = [".", "-", "+", "-.", "+.", "-\r\n.", "+\r\n."];
         for (const number of validNums) {
           const validInput = new StringStream(number);
           const validLexer = new Lexer(validInput);

web/app.js

@@ -50,7 +50,6 @@ import {
   InvalidPDFException,
   isDataScheme,
   isPdfFile,
-  OutputScale,
   PDFWorker,
   ResponseException,
   shadow,
@@ -2092,7 +2091,7 @@ const PDFViewerApplication = {
         pdfViewer.refresh();
       }
       const mediaQueryList = window.matchMedia(
-        `(resolution: ${OutputScale.pixelRatio}dppx)`
+        `(resolution: ${window.devicePixelRatio || 1}dppx)`
       );
       mediaQueryList.addEventListener("change", addWindowResolutionChange, {
         once: true,

web/dialog.css

@@ -33,32 +33,23 @@
   --radio-border-color: #8f8f9d;
   --radio-checked-border-color: #0060df;
 
-  --button-secondary-bg-color: rgb(21 20 26 / 0.07);
+  --button-secondary-bg-color: #f0f0f4;
   --button-secondary-fg-color: var(--text-primary-color);
   --button-secondary-border-color: var(--button-secondary-bg-color);
-  --button-secondary-active-bg-color: rgb(21 20 26 / 0.21);
-  --button-secondary-active-fg-color: var(--button-secondary-fg-color);
-  --button-secondary-active-border-color: var(--button-secondary-bg-color);
-  --button-secondary-hover-bg-color: rgb(21 20 26 / 0.14);
+  --button-secondary-hover-bg-color: var(--button-secondary-bg-color);
   --button-secondary-hover-fg-color: var(--button-secondary-fg-color);
   --button-secondary-hover-border-color: var(--button-secondary-hover-bg-color);
 
   --button-primary-bg-color: #0060df;
   --button-primary-fg-color: #fbfbfe;
   --button-primary-border-color: var(--button-primary-bg-color);
-  --button-primary-active-bg-color: #054096;
-  --button-primary-active-fg-color: var(--button-primary-fg-color);
-  --button-primary-active-border-color: var(--button-primary-active-bg-color);
-  --button-primary-hover-bg-color: #0250bb;
+  --button-primary-hover-bg-color: var(--button-primary-bg-color);
   --button-primary-hover-fg-color: var(--button-primary-fg-color);
   --button-primary-hover-border-color: var(--button-primary-hover-bg-color);
 
   --button-disabled-bg-color: color-mix(in srgb, currentcolor, transparent 60%);
   --button-disabled-fg-color: var(--button-disabled-bg-color);
 
-  --input-text-bg-color: white;
-  --input-text-fg-color: var(--text-primary-color);
-
   @media (prefers-color-scheme: dark) {
     --dialog-bg-color: #1c1b22;
     --dialog-border-color: #1c1b22;
@@ -76,15 +67,9 @@
     --radio-checked-bg-color: #15141a;
     --radio-checked-border-color: #0df;
 
-    --button-secondary-bg-color: rgb(251 251 254 / 0.07);
-    --button-secondary-active-bg-color: rgb(251 251 254 / 0.21);
-    --button-secondary-hover-bg-color: rgb(251 251 254 / 0.14);
+    --button-secondary-bg-color: #2b2a33;
     --button-primary-bg-color: #0df;
     --button-primary-fg-color: #15141a;
-    --button-primary-active-bg-color: #aaf2ff;
-    --button-primary-hover-bg-color: #80ebff;
-
-    --input-text-bg-color: #42414d;
   }
 
   @media screen and (forced-colors: active) {
@@ -107,31 +92,19 @@
     --radio-border-color: ButtonText;
     --radio-checked-border-color: ButtonText;
 
-    --button-secondary-bg-color: HighlightText;
+    --button-secondary-bg-color: ButtonFace;
     --button-secondary-fg-color: ButtonText;
     --button-secondary-border-color: ButtonText;
-    --button-secondary-active-bg-color: HighlightText;
-    --button-secondary-active-fg-color: SelectedItem;
-    --button-secondary-active-border-color: ButtonText;
-    --button-secondary-hover-bg-color: HighlightText;
-    --button-secondary-hover-fg-color: SelectedItem;
-    --button-secondary-hover-border-color: SelectedItem;
+    --button-secondary-hover-bg-color: AccentColor;
+    --button-secondary-hover-fg-color: AccentColorText;
 
     --button-primary-bg-color: ButtonText;
-    --button-primary-fg-color: HighlightText;
-    --button-primary-border-color: ButtonText;
-    --button-primary-active-bg-color: SelectedItem;
-    --button-primary-active-fg-color: HighlightText;
-    --button-primary-active-border-color: ButtonText;
-    --button-primary-hover-bg-color: SelectedItem;
-    --button-primary-hover-fg-color: HighlightText;
-    --button-primary-hover-border-color: SelectedItem;
+    --button-primary-fg-color: ButtonFace;
+    --button-primary-hover-bg-color: AccentColor;
+    --button-primary-hover-fg-color: AccentColorText;
 
     --button-disabled-bg-color: GrayText;
     --button-disabled-fg-color: ButtonFace;
-
-    --input-text-bg-color: HighlightText;
-    --input-text-fg-color: FieldText;
   }
 
   font: message-box;
@@ -232,8 +205,7 @@
       border-radius: 4px;
       border: 1px solid;
       font: menu;
-      font-weight: 590;
-      font-size: 13px;
+      font-weight: 600;
       padding: 4px 16px;
       width: auto;
       height: 32px;
@@ -245,7 +217,6 @@
 
       > span {
         color: inherit;
-        font: inherit;
       }
 
       &.secondaryButton {
@@ -258,12 +229,6 @@
           background-color: var(--button-secondary-hover-bg-color);
           border-color: var(--button-secondary-hover-border-color);
         }
-
-        &:active {
-          color: var(--button-secondary-active-fg-color);
-          background-color: var(--button-secondary-active-bg-color);
-          border-color: var(--button-secondary-active-border-color);
-        }
       }
 
       &.primaryButton {
@@ -277,12 +242,6 @@
           background-color: var(--button-primary-hover-bg-color);
           border-color: var(--button-primary-hover-border-color);
         }
-
-        &:active {
-          color: var(--button-primary-active-fg-color);
-          background-color: var(--button-primary-active-bg-color);
-          border-color: var(--button-primary-active-border-color);
-        }
       }
 
       &:disabled {
@@ -323,11 +282,6 @@
       }
     }
 
-    input[type="text"] {
-      background-color: var(--input-text-bg-color);
-      color: var(--input-text-fg-color);
-    }
-
     .messageBar {
       --message-bar-bg-color: #ffebcd;
       --message-bar-fg-color: #15141a;

web/pdf_page_detail_view.js

@@ -14,7 +14,6 @@
  */
 
 import { BasePDFPageView } from "./base_pdf_page_view.js";
-import { OutputScale } from "pdfjs-lib";
 import { RenderingStates } from "./ui_utils.js";
 
 /** @typedef {import("./interfaces").IRenderableView} IRenderableView */
@@ -154,7 +153,7 @@ class PDFPageDetailView extends BasePDFPageView {
     // but we can reduce it to make sure that we stay within the maxCanvasPixels
     // limit.
     const visiblePixels =
-      visibleWidth * visibleHeight * OutputScale.pixelRatio ** 2;
+      visibleWidth * visibleHeight * (window.devicePixelRatio || 1) ** 2;
     const maxDetailToVisibleLinearRatio = Math.sqrt(
       maxCanvasPixels / visiblePixels
     );
@@ -229,18 +228,18 @@ class PDFPageDetailView extends BasePDFPageView {
 
     const area = this.#detailArea;
 
-    const { pixelRatio } = OutputScale;
+    const { devicePixelRatio = 1 } = window;
     const transform = [
-      pixelRatio,
+      devicePixelRatio,
       0,
       0,
-      pixelRatio,
-      -area.minX * pixelRatio,
-      -area.minY * pixelRatio,
+      devicePixelRatio,
+      -area.minX * devicePixelRatio,
+      -area.minY * devicePixelRatio,
     ];
 
-    canvas.width = area.width * pixelRatio;
-    canvas.height = area.height * pixelRatio;
+    canvas.width = area.width * devicePixelRatio;
+    canvas.height = area.height * devicePixelRatio;
     const { style } = canvas;
     style.width = `${(area.width * 100) / width}%`;
     style.height = `${(area.height * 100) / height}%`;

web/signature_manager.css

@@ -50,14 +50,10 @@
   --primary-color: var(--text-primary-color);
   --description-input-color: var(--primary-color);
   --border-color: #8f8f9d;
-  --open-link-fg: var(--link-fg-color);
-  --open-link-hover-fg: var(--link-hover-fg-color);
 
   @media screen and (forced-colors: active) {
     --primary-color: ButtonText;
     --border-color: ButtonText;
-    --open-link-fg: ButtonText;
-    --open-link-hover-fg: ButtonText;
   }
 
   width: 570px;
@@ -86,7 +82,9 @@
 
   .inputWithClearButton {
     --button-dimension: 24px;
-    --clear-button-icon: url(images/messageBar_closingButton.svg);
+
+    --closing-button-icon: url(images/messageBar_closingButton.svg);
+    --closing-button-color: var(--primary-color);
 
     width: 100%;
     position: relative;
@@ -99,8 +97,10 @@
       height: 32px;
       padding-inline: 8px calc(4px + var(--button-dimension));
       box-sizing: border-box;
+      background-color: transparent;
       border-radius: 4px;
       border: 1px solid var(--border-color);
+      color: var(--description-input-color);
     }
 
     .clearInputButton {
@@ -110,9 +110,9 @@
       display: inline-block;
       width: var(--button-dimension);
       height: var(--button-dimension);
-      background-color: var(--input-text-fg-color);
+      background-color: var(--closing-button-color);
       mask-size: cover;
-      mask-image: var(--clear-button-icon);
+      mask-image: var(--closing-button-icon);
       padding: 0;
       border: 0;
     }
@@ -465,18 +465,9 @@
             align-items: center;
             justify-content: center;
 
-            span {
-              color: var(--signature-placeholder-color);
-            }
-
             a {
-              color: var(--open-link-fg);
               text-decoration: underline;
               cursor: pointer;
-
-              &:hover {
-                color: var(--open-link-hover-fg);
-              }
             }
           }