[Editor] Populate the 'Add signature' menu with the saved signatures …

…(bug 1947828)

l10n/en-US/viewer.ftl

@@ -320,6 +320,9 @@ pdfjs-highlight-floating-button1 =
     .title = Highlight
     .aria-label = Highlight
 pdfjs-highlight-floating-button-label = Highlight
+pdfjs-editor-signature-button =
+    .title = Add signature
+pdfjs-editor-signature-button-label = Add signature
 
 ## Remove button for the various kind of editor.
 
@@ -349,6 +352,9 @@ pdfjs-editor-stamp-add-image-button-label = Add image
 pdfjs-editor-free-highlight-thickness-input = Thickness
 pdfjs-editor-free-highlight-thickness-title =
     .title = Change thickness when highlighting items other than text
+pdfjs-editor-signature-add-signature-button =
+    .title = Add new signature
+pdfjs-editor-signature-add-signature-button-label = Add new signature
 
 # .default-content is used as a placeholder in an empty text editor.
 pdfjs-free-text2 =
@@ -585,3 +591,9 @@ pdfjs-editor-add-signature-error-close-button = Close
 
 pdfjs-editor-add-signature-cancel-button = Cancel
 pdfjs-editor-add-signature-add-button = Add
+
+## Main menu for adding/removing signatures
+
+pdfjs-editor-delete-signature-button =
+    .title = Remove signature
+pdfjs-editor-delete-signature-button-label = Remove signature

src/display/editor/annotation_editor_layer.js

@@ -698,8 +698,12 @@ class AnnotationEditorLayer {
   /**
    * Create and add a new editor.
    */
-  addNewEditor() {
-    this.createAndAddNewEditor(this.#getCenterPoint(), /* isCentered = */ true);
+  addNewEditor(data = {}) {
+    this.createAndAddNewEditor(
+      this.#getCenterPoint(),
+      /* isCentered = */ true,
+      data
+    );
   }
 
   /**

src/display/editor/drawers/signaturedraw.js

@@ -784,7 +784,7 @@ class SignatureExtractor {
       let data = null;
       let offset = 0;
       for await (const chunk of readable) {
-        data ||= new Uint8Array(new Uint32Array(chunk.buffer)[0]);
+        data ||= new Uint8Array(new Uint32Array(chunk.buffer, 0, 4)[0]);
         data.set(chunk, offset);
         offset += chunk.length;
       }

src/display/editor/signature.js

@@ -26,7 +26,7 @@ class SignatureOptions extends DrawingOptions {
     super();
 
     super.updateProperties({
-      fill: "black",
+      fill: "CanvasText",
       "stroke-width": 0,
     });
   }
@@ -43,7 +43,7 @@ class DrawnSignatureOptions extends InkDrawingOptions {
     super(viewerParameters);
 
     super.updateProperties({
-      stroke: "black",
+      stroke: "CanvasText",
       "stroke-width": 1,
     });
   }
@@ -62,6 +62,12 @@ class DrawnSignatureOptions extends InkDrawingOptions {
 class SignatureEditor extends DrawingEditor {
   #isExtracted = false;
 
+  #signatureData = null;
+
+  #description = null;
+
+  #signatureUUID = null;
+
   static _type = "signature";
 
   static _editorType = AnnotationEditorType.SIGNATURE;
@@ -71,8 +77,7 @@ class SignatureEditor extends DrawingEditor {
   constructor(params) {
     super({ ...params, mustBeCommitted: true, name: "signatureEditor" });
     this._willKeepAspectRatio = true;
-    this._description = "";
-    this._signatureUUID = null;
+    this.#signatureData = params.signatureData || null;
   }
 
   /** @inheritdoc */
@@ -128,17 +133,52 @@ class SignatureEditor extends DrawingEditor {
     this.div.setAttribute("role", "figure");
 
     if (this._drawId === null) {
-      this.div.hidden = true;
-      this._uiManager.getSignature(this);
+      if (this.#signatureData) {
+        const {
+          lines,
+          mustSmooth,
+          areContours,
+          description,
+          uuid,
+          heightInPage,
+        } = this.#signatureData;
+        const {
+          rawDims: { pageWidth, pageHeight },
+          rotation,
+        } = this.parent.viewport;
+        const outline = SignatureExtractor.processDrawnLines({
+          lines,
+          pageWidth,
+          pageHeight,
+          rotation,
+          innerMargin: SignatureEditor._INNER_MARGIN,
+          mustSmooth,
+          areContours,
+        });
+        this.#signatureData = null;
+        this.#signatureUUID = uuid;
+        this.addSignature(outline.outline, heightInPage, description);
+      } else {
+        this.div.hidden = true;
+        this._uiManager.getSignature(this);
+      }
     }
 
     return this.div;
   }
 
+  setUuid(uuid) {
+    this.#signatureUUID = uuid;
+  }
+
+  setDescription(description) {
+    this.#description = description;
+  }
+
   addSignature(outline, heightInPage, description) {
     const { x: savedX, y: savedY } = this;
     this.#isExtracted = outline instanceof ContourDrawOutline;
-    this._description = description;
+    this.#description = description;
     let drawingOptions;
     if (this.#isExtracted) {
       drawingOptions = SignatureEditor.getDefaultDrawingOptions();
@@ -251,11 +291,12 @@ class SignatureEditor extends DrawingEditor {
     };
     if (isForCopying) {
       serialized.paths = { lines, points };
+      serialized.uuid = this.#signatureUUID;
     } else {
       serialized.lines = lines;
     }
-    if (this._description) {
-      serialized.accessibilityData = { type: "Figure", alt: this._description };
+    if (this.#description) {
+      serialized.accessibilityData = { type: "Figure", alt: this.#description };
     }
     return serialized;
   }
@@ -294,7 +335,8 @@ class SignatureEditor extends DrawingEditor {
   static async deserialize(data, parent, uiManager) {
     const editor = await super.deserialize(data, parent, uiManager);
     editor.#isExtracted = data.areContours;
-    editor._description = data.accessibilityData?.alt || "";
+    editor.#description = data.accessibilityData?.alt || "";
+    editor.#signatureUUID = data.uuid;
     return editor;
   }
 }

src/display/editor/tools.js

@@ -1698,6 +1698,9 @@ class AnnotationEditorUIManager {
       this.#updateModeCapability.resolve();
       return;
     }
+    if (mode === AnnotationEditorType.SIGNATURE) {
+      await this.#signatureManager?.loadSignatures();
+    }
     this.setEditingState(true);
     await this.#enableAll();
     this.unselectAll();
@@ -1758,7 +1761,7 @@ class AnnotationEditorUIManager {
 
     switch (type) {
       case AnnotationEditorParamsType.CREATE:
-        this.currentLayer.addNewEditor();
+        this.currentLayer.addNewEditor(value);
         return;
       case AnnotationEditorParamsType.HIGHLIGHT_DEFAULT_COLOR:
         this.#mainHighlightColorPicker?.updateColor(value);

web/app.js

@@ -465,9 +465,12 @@ const PDFViewerApplication = {
       AppOptions.get("enableSignatureEditor") && appConfig.addSignatureDialog
         ? new SignatureManager(
             appConfig.addSignatureDialog,
+            appConfig.annotationEditorParams?.editorSignatureAddSignature ||
+              null,
             this.overlayManager,
-            this.l10n,
-            externalServices.createSignatureStorage()
+            l10n,
+            externalServices.createSignatureStorage(),
+            eventBus
           )
         : null;
 

web/dialog.css

@@ -20,8 +20,6 @@
   --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);
   --link-fg-color: #0060df;
   --link-hover-fg-color: #0250bb;
   --separator-color: #f0f0f4;
@@ -58,7 +56,6 @@
     --dialog-shadow: 0 2px 14px 0 #15141a;
     --text-primary-color: #fbfbfe;
     --text-secondary-color: #cfcfd8;
-    --focus-ring-color: #0df;
     --hover-filter: brightness(1.4);
     --link-fg-color: #0df;
     --link-hover-fg-color: #80ebff;
@@ -82,7 +79,6 @@
     --text-primary-color: CanvasText;
     --text-secondary-color: CanvasText;
     --hover-filter: none;
-    --focus-ring-color: ButtonBorder;
     --link-fg-color: LinkText;
     --link-hover-fg-color: LinkText;
     --separator-color: CanvasText;

web/firefoxcom.js

@@ -504,11 +504,11 @@ class SignatureStorage {
 
   async getAll() {
     if (!this.#signatures) {
-      this.#signatures = Object.create(null);
+      this.#signatures = new Map();
       const data = await this.#handleSignature({ action: "get" });
       if (data) {
         for (const { uuid, description, signatureData } of data) {
-          this.#signatures[uuid] = { description, signatureData };
+          this.#signatures.set(uuid, { description, signatureData });
         }
       }
     }
@@ -517,7 +517,7 @@ class SignatureStorage {
 
   async isFull() {
     // We want to store at most 5 signatures.
-    return Object.keys(await this.getAll()).length === 5;
+    return (await this.getAll()).size === 5;
   }
 
   async create(data) {
@@ -531,25 +531,25 @@ class SignatureStorage {
     if (!uuid) {
       return null;
     }
-    this.#signatures[uuid] = data;
+    this.#signatures.set(uuid, data);
     return uuid;
   }
 
   async delete(uuid) {
     const signatures = await this.getAll();
-    if (!signatures[uuid]) {
+    if (!signatures.has(uuid)) {
       return false;
     }
     if (await this.#handleSignature({ action: "delete", uuid })) {
-      delete signatures[uuid];
+      signatures.delete(uuid);
       return true;
     }
     return false;
   }
 
   async update(uuid, data) {
     const signatures = await this.getAll();
-    const oldData = signatures[uuid];
+    const oldData = signatures.get(uuid);
     if (!oldData) {
       return false;
     }

web/generic_signature_storage.js

@@ -23,46 +23,55 @@ class SignatureStorage {
   #signatures = null;
 
   #save() {
-    localStorage.setItem("pdfjs.signature", JSON.stringify(this.#signatures));
+    localStorage.setItem(
+      "pdfjs.signature",
+      JSON.stringify(Object.fromEntries(this.#signatures.entries()))
+    );
   }
 
   async getAll() {
     if (!this.#signatures) {
+      this.#signatures = new Map();
       const data = localStorage.getItem("pdfjs.signature");
-      this.#signatures = data ? JSON.parse(data) : Object.create(null);
+      if (data) {
+        for (const [key, value] of Object.entries(JSON.parse(data))) {
+          this.#signatures.set(key, value);
+        }
+      }
     }
     return this.#signatures;
   }
 
   async isFull() {
-    return Object.keys(await this.getAll()).length === 5;
+    // Only allow 5 signatures to be saved.
+    return (await this.getAll()).size === 5;
   }
 
   async create(data) {
     if (await this.isFull()) {
       return null;
     }
     const uuid = getUuid();
-    this.#signatures[uuid] = data;
+    this.#signatures.set(uuid, data);
     this.#save();
 
     return uuid;
   }
 
   async delete(uuid) {
     const signatures = await this.getAll();
-    if (!signatures[uuid]) {
+    if (!signatures.has(uuid)) {
       return false;
     }
-    delete signatures[uuid];
+    signatures.delete(uuid);
     this.#save();
 
     return true;
   }
 
   async update(uuid, data) {
     const signatures = await this.getAll();
-    const oldData = signatures[uuid];
+    const oldData = signatures.get(uuid);
     if (!oldData) {
       return false;
     }

web/message_bar.css

@@ -143,9 +143,6 @@
   --undo-button-fg-color-hover: var(--undo-button-fg-color);
   --undo-button-fg-color-active: var(--undo-button-fg-color);
 
-  --focus-ring-color: #0060df;
-  --focus-ring-outline: 2px solid var(--focus-ring-color);
-
   @media (prefers-color-scheme: dark) {
     --text-primary-color: #fbfbfe;
 
@@ -172,8 +169,6 @@
     --undo-button-fg-color: ButtonFace;
     --undo-button-fg-color-hover: SelectedItemText;
     --undo-button-fg-color-active: SelectedItemText;
-
-    --focus-ring-color: CanvasText;
   }
 
   position: fixed;

web/pdf_viewer.css

@@ -27,14 +27,19 @@
   --page-border: 9px solid transparent;
   --spreadHorizontalWrapped-margin-LR: -3.5px;
   --loading-icon-delay: 400ms;
-}
+  --focus-ring-color: #0060df;
+  --focus-ring-outline: 2px solid var(--focus-ring-color);
+
+  @media (prefers-color-scheme: dark) {
+    --focus-ring-color: #0df;
+  }
 
-@media screen and (forced-colors: active) {
-  :root {
+  @media screen and (forced-colors: active) {
     --pdfViewer-padding-bottom: 9px;
     --page-margin: 8px auto -1px;
     --page-border: 1px solid CanvasText;
     --spreadHorizontalWrapped-margin-LR: 3.5px;
+    --focus-ring-color: CanvasText;
   }
 }