[Editor] Add a button to explicitly add an image (bug 1848108)

The main stamp button will be used to just enter in a add/edit image mode:
 - the user can add a new image in using the new button.
 - the user can edit an image in resizing, moving it.
In image mode, when the user clicks outside on the page but not on an editor,
then all the selected editors will be unselected.

web/annotation_editor_params.js

@@ -31,6 +31,7 @@ class AnnotationEditorParams {
     editorInkColor,
     editorInkThickness,
     editorInkOpacity,
+    editorStampAddImage,
   }) {
     const dispatchEvent = (typeStr, value) => {
       this.eventBus.dispatch("switchannotationeditorparams", {
@@ -54,6 +55,9 @@ class AnnotationEditorParams {
     editorInkOpacity.addEventListener("input", function () {
       dispatchEvent("INK_OPACITY", this.valueAsNumber);
     });
+    editorStampAddImage.addEventListener("click", () => {
+      dispatchEvent("CREATE");
+    });
 
     this.eventBus._on("annotationeditorparamschanged", evt => {
       for (const [type, value] of evt.details) {

web/toolbar.js

@@ -218,6 +218,7 @@ class Toolbar {
     editorInkButton,
     editorInkParamsToolbar,
     editorStampButton,
+    editorStampParamsToolbar,
   }) {
     const editorModeChanged = ({ mode }) => {
       toggleCheckedBtn(
@@ -230,7 +231,11 @@ class Toolbar {
         mode === AnnotationEditorType.INK,
         editorInkParamsToolbar
       );
-      toggleCheckedBtn(editorStampButton, mode === AnnotationEditorType.STAMP);
+      toggleCheckedBtn(
+        editorStampButton,
+        mode === AnnotationEditorType.STAMP,
+        editorStampParamsToolbar
+      );
 
       const isDisable = mode === AnnotationEditorType.DISABLE;
       editorFreeTextButton.disabled = isDisable;

web/viewer.css

@@ -118,6 +118,7 @@
   --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd.svg);
   --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven.svg);
   --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);
+  --editorParams-stampAddImage-icon: url(images/toolbarButton-zoomIn.svg);
 }
 
 :root:dir(rtl) {
@@ -576,6 +577,11 @@ body {
   margin-bottom: -4px;
 }
 
+#editorStampParamsToolbar {
+  inset-inline-end: 40px;
+  background-color: var(--toolbar-bg-color);
+}
+
 #editorInkParamsToolbar {
   inset-inline-end: 68px;
   background-color: var(--toolbar-bg-color);
@@ -586,6 +592,10 @@ body {
   background-color: var(--toolbar-bg-color);
 }
 
+#editorStampAddImage::before {
+  mask-image: var(--editorParams-stampAddImage-icon);
+}
+
 .doorHanger,
 .doorHangerRight {
   border-radius: 2px;

web/viewer.html

@@ -198,6 +198,14 @@ See https://github.com/adobe-type-tools/cmap-resources
           </div>
         </div>
 
+        <div class="editorParamsToolbar hidden doorHangerRight" id="editorStampParamsToolbar">
+          <div class="editorParamsToolbarContainer">
+            <button id="editorStampAddImage" class="secondaryToolbarButton" title="Add image" tabindex="105" data-l10n-id="editor_stamp_add_image">
+              <span data-l10n-id="editor_stamp_add_image_label">Add image</span>
+            </button>
+          </div>
+        </div>
+
         <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
           <div id="secondaryToolbarButtonContainer">
 <!--#if GENERIC-->
@@ -343,8 +351,8 @@ See https://github.com/adobe-type-tools/cmap-resources
                   <button id="editorInk" class="toolbarButton" disabled="disabled" title="Draw" role="radio" aria-checked="false" aria-controls="editorInkParamsToolbar" tabindex="35" data-l10n-id="editor_ink2">
                     <span data-l10n-id="editor_ink2_label">Draw</span>
                   </button>
-                  <button id="editorStamp" class="toolbarButton hidden" disabled="disabled" title="Image" role="radio" aria-checked="false" tabindex="36" data-l10n-id="editor_stamp">
-                    <span data-l10n-id="editor_stamp_label">Image</span>
+                  <button id="editorStamp" class="toolbarButton hidden" disabled="disabled" title="Add or edit images" role="radio" aria-checked="false" tabindex="36" data-l10n-id="editor_stamp1">
+                    <span data-l10n-id="editor_stamp1_label">Add or edit images</span>
                   </button>
                 </div>
 

web/viewer.js

@@ -64,6 +64,9 @@ function getViewerConfiguration() {
       editorInkButton: document.getElementById("editorInk"),
       editorInkParamsToolbar: document.getElementById("editorInkParamsToolbar"),
       editorStampButton: document.getElementById("editorStamp"),
+      editorStampParamsToolbar: document.getElementById(
+        "editorStampParamsToolbar"
+      ),
       download: document.getElementById("download"),
     },
     secondaryToolbar: {
@@ -160,6 +163,7 @@ function getViewerConfiguration() {
       editorInkColor: document.getElementById("editorInkColor"),
       editorInkThickness: document.getElementById("editorInkThickness"),
       editorInkOpacity: document.getElementById("editorInkOpacity"),
+      editorStampAddImage: document.getElementById("editorStampAddImage"),
     },
     printContainer: document.getElementById("printContainer"),
     openFileInput: