Merge pull request #19993 from calixteman/editor_toolbar_simplification

Slightly simplify the way to create the editor toolbar

Author: calixteman

src/display/editor/editor.js

@@ -1049,6 +1049,14 @@ class AnnotationEditor {
     this.#altText?.finish();
   }
 
+  /**
+   * Get the toolbar buttons for this editor.
+   * @returns {Array<Array<string|object>>|null}
+   */
+  get toolbarButtons() {
+    return null;
+  }
+
   /**
    * Add a toolbar for this editor.
    * @returns {Promise<EditorToolbar|null>}
@@ -1059,9 +1067,13 @@ class AnnotationEditor {
     }
     this._editToolbar = new EditorToolbar(this);
     this.div.append(this._editToolbar.render());
-    if (this.#altText) {
-      await this._editToolbar.addAltText(this.#altText);
+    const { toolbarButtons } = this;
+    if (toolbarButtons) {
+      for (const [name, tool] of toolbarButtons) {
+        await this._editToolbar.addButton(name, tool);
+      }
     }
+    this._editToolbar.addButton("delete");
 
     return this._editToolbar;
   }
@@ -1091,17 +1103,20 @@ class AnnotationEditor {
     return this.div.getBoundingClientRect();
   }
 
-  async addAltTextButton() {
-    if (this.#altText) {
-      return;
-    }
-    AltText.initialize(AnnotationEditor._l10n);
-    this.#altText = new AltText(this);
-    if (this.#accessibilityData) {
-      this.#altText.data = this.#accessibilityData;
-      this.#accessibilityData = null;
+  /**
+   * Create the alt text for this editor.
+   * @returns {object}
+   */
+  createAltText() {
+    if (!this.#altText) {
+      AltText.initialize(AnnotationEditor._l10n);
+      this.#altText = new AltText(this);
+      if (this.#accessibilityData) {
+        this.#altText.data = this.#accessibilityData;
+        this.#accessibilityData = null;
+      }
     }
-    await this.addEditToolbar();
+    return this.#altText;
   }
 
   get altTextData() {

src/display/editor/highlight.js

@@ -398,16 +398,14 @@ class HighlightEditor extends AnnotationEditor {
   }
 
   /** @inheritdoc */
-  async addEditToolbar() {
-    const toolbar = await super.addEditToolbar();
-    if (!toolbar) {
-      return null;
-    }
+  get toolbarButtons() {
     if (this._uiManager.highlightColors) {
-      this.#colorPicker = new ColorPicker({ editor: this });
-      toolbar.addColorPicker(this.#colorPicker);
+      const colorPicker = (this.#colorPicker = new ColorPicker({
+        editor: this,
+      }));
+      return [["colorPicker", colorPicker]];
     }
-    return toolbar;
+    return super.toolbarButtons;
   }
 
   /** @inheritdoc */

src/display/editor/signature.js

@@ -244,27 +244,18 @@ class SignatureEditor extends DrawingEditor {
   }
 
   /** @inheritdoc */
-  async addEditToolbar() {
-    const toolbar = await super.addEditToolbar();
-    if (!toolbar) {
-      return null;
-    }
-    if (this._uiManager.signatureManager && this.#description !== null) {
-      await toolbar.addEditSignatureButton(
-        this._uiManager.signatureManager,
-        this.#signatureUUID,
-        this.#description
-      );
-      toolbar.show();
+  get toolbarButtons() {
+    if (this._uiManager.signatureManager) {
+      return [["editSignature", this._uiManager.signatureManager]];
     }
-    return toolbar;
+    return super.toolbarButtons;
   }
 
   addSignature(data, heightInPage, description, uuid) {
     const { x: savedX, y: savedY } = this;
     const { outline } = (this.#signatureData = data);
     this.#isExtracted = outline instanceof ContourDrawOutline;
-    this.#description = description;
+    this.description = description;
     this.div.setAttribute("data-l10n-args", JSON.stringify({ description }));
     let drawingOptions;
     if (this.#isExtracted) {

src/display/editor/stamp.js

@@ -128,8 +128,10 @@ class StampEditor extends AnnotationEditor {
       this._uiManager.useNewAltTextFlow &&
       this.#bitmap
     ) {
-      this._editToolbar.hide();
-      this._uiManager.editAltText(this, /* firstTime = */ true);
+      this.addEditToolbar().then(() => {
+        this._editToolbar.hide();
+        this._uiManager.editAltText(this, /* firstTime = */ true);
+      });
       return;
     }
 
@@ -336,6 +338,11 @@ class StampEditor extends AnnotationEditor {
     );
   }
 
+  /** @inheritdoc */
+  get toolbarButtons() {
+    return [["altText", this.createAltText()]];
+  }
+
   /** @inheritdoc */
   get isResizable() {
     return true;
@@ -356,7 +363,7 @@ class StampEditor extends AnnotationEditor {
     super.render();
     this.div.hidden = true;
 
-    this.addAltTextButton();
+    this.createAltText();
 
     if (!this.#missingCanvas) {
       if (this.#bitmap) {

src/display/editor/toolbar.js

@@ -69,8 +69,6 @@ class EditorToolbar {
       }% + var(--editor-toolbar-vert-offset))`;
     }
 
-    this.#addDeleteButton();
-
     return editToolbar;
   }
 
@@ -118,7 +116,7 @@ class EditorToolbar {
     this.#altText?.shown();
   }
 
-  #addDeleteButton() {
+  addDeleteButton() {
     const { editorType, _uiManager } = this.#editor;
 
     const button = document.createElement("button");
@@ -145,22 +143,39 @@ class EditorToolbar {
   async addAltText(altText) {
     const button = await altText.render();
     this.#addListenersToElement(button);
-    this.#buttons.prepend(button, this.#divider);
+    this.#buttons.append(button, this.#divider);
     this.#altText = altText;
   }
 
   addColorPicker(colorPicker) {
     this.#colorPicker = colorPicker;
     const button = colorPicker.renderButton();
     this.#addListenersToElement(button);
-    this.#buttons.prepend(button, this.#divider);
+    this.#buttons.append(button, this.#divider);
   }
 
   async addEditSignatureButton(signatureManager) {
     const button = (this.#signatureDescriptionButton =
       await signatureManager.renderEditButton(this.#editor));
     this.#addListenersToElement(button);
-    this.#buttons.prepend(button, this.#divider);
+    this.#buttons.append(button, this.#divider);
+  }
+
+  async addButton(name, tool) {
+    switch (name) {
+      case "colorPicker":
+        this.addColorPicker(tool);
+        break;
+      case "altText":
+        await this.addAltText(tool);
+        break;
+      case "editSignature":
+        await this.addEditSignatureButton(tool);
+        break;
+      case "delete":
+        this.addDeleteButton();
+        break;
+    }
   }
 
   updateEditSignatureButton(description) {

web/signature_manager.js

@@ -820,7 +820,9 @@ class SignatureManager {
     const button = document.createElement("button");
     button.classList.add("altText", "editDescription");
     button.tabIndex = 0;
-    button.title = editor.description;
+    if (editor.description) {
+      button.title = editor.description;
+    }
     const span = document.createElement("span");
     button.append(span);
     span.setAttribute(