[Editor] Add the possibility to change the thickness of a free highlight (bug 1876096)

web/annotation_editor_layer_builder.css

@@ -1094,20 +1094,21 @@
   height: auto;
   padding-inline: 10px;
   padding-block: 10px 16px;
+  gap: 16px;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
 
+  .editorParamsLabel {
+    width: fit-content;
+    inset-inline-start: 0;
+  }
+
   .colorPicker {
     display: flex;
     flex-direction: column;
     gap: 8px;
 
-    #highlightColorPickerLabel {
-      width: fit-content;
-      inset-inline-start: 0;
-    }
-
     .dropdown {
       display: flex;
       justify-content: space-between;
@@ -1145,4 +1146,58 @@
       }
     }
   }
+
+  #editorHighlightThickness {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    align-self: stretch;
+
+    .editorParamsLabel {
+      width: 100%;
+      height: auto;
+      align-self: stretch;
+    }
+
+    .thicknessPicker {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      align-self: stretch;
+
+      --example-color: #bfbfc9;
+
+      @media (prefers-color-scheme: dark) {
+        --example-color: #80808e;
+      }
+
+      @media screen and (forced-colors: active) {
+        --example-color: HighlightText;
+      }
+
+      &::before {
+        content: "";
+        width: 8px;
+        aspect-ratio: 1;
+        display: block;
+        border-radius: 100%;
+        background-color: var(--example-color);
+      }
+
+      .editorParamsSlider {
+        width: unset;
+        height: 14px;
+      }
+
+      &::after {
+        content: "";
+        width: 24px;
+        aspect-ratio: 1;
+        display: block;
+        border-radius: 100%;
+        background-color: var(--example-color);
+      }
+    }
+  }
 }

web/annotation_editor_params.js

@@ -32,6 +32,7 @@ class AnnotationEditorParams {
     editorInkThickness,
     editorInkOpacity,
     editorStampAddImage,
+    editorFreeHighlightThickness,
   }) {
     const dispatchEvent = (typeStr, value) => {
       this.eventBus.dispatch("switchannotationeditorparams", {
@@ -58,6 +59,9 @@ class AnnotationEditorParams {
     editorStampAddImage.addEventListener("click", () => {
       dispatchEvent("CREATE");
     });
+    editorFreeHighlightThickness.addEventListener("input", function () {
+      dispatchEvent("HIGHLIGHT_THICKNESS", this.valueAsNumber);
+    });
 
     this.eventBus._on("annotationeditorparamschanged", evt => {
       for (const [type, value] of evt.details) {
@@ -77,6 +81,9 @@ class AnnotationEditorParams {
           case AnnotationEditorParamsType.INK_OPACITY:
             editorInkOpacity.value = value;
             break;
+          case AnnotationEditorParamsType.HIGHLIGHT_THICKNESS:
+            editorFreeHighlightThickness.value = value;
+            break;
         }
       }
     });

web/viewer.html

@@ -176,6 +176,12 @@ See https://github.com/adobe-type-tools/cmap-resources
             <div id="editorHighlightColorPicker" class="colorPicker">
               <span id="highlightColorPickerLabel" class="editorParamsLabel" data-l10n-id="pdfjs-editor-highlight-colorpicker-label">Highlight color</span>
             </div>
+            <div id="editorHighlightThickness">
+              <label for="editorFreeHighlightThickness" class="editorParamsLabel" data-l10n-id="pdfjs-editor-free-highlight-thickness-input">Thickness</label>
+              <div class="thicknessPicker">
+                <input type="range" id="editorFreeHighlightThickness" class="editorParamsSlider" value="12" min="8" max="24" step="1" tabindex="101">
+              </div>
+            </div>
           </div>
         </div>
 

web/viewer.js

@@ -172,6 +172,9 @@ function getViewerConfiguration() {
       editorInkThickness: document.getElementById("editorInkThickness"),
       editorInkOpacity: document.getElementById("editorInkOpacity"),
       editorStampAddImage: document.getElementById("editorStampAddImage"),
+      editorFreeHighlightThickness: document.getElementById(
+        "editorFreeHighlightThickness"
+      ),
     },
     printContainer: document.getElementById("printContainer"),
     openFileInput: