[Editor] Add the ability to make a free highlight (i.e. without having to select some text) (bug 1856218)

The free highlighting is enabled when the mouse pointer isn't on some text.
Then we draw a shape with smoothed borders corresponding to the movement of
the mouse.
Printing/saving and changing the thickness will come later.

web/annotation_editor_layer_builder.css

@@ -942,25 +942,25 @@
 
 .annotationEditorLayer {
   &[data-main-rotation="0"] {
-    .highlightEditor > .editToolbar {
+    .highlightEditor:not(.free) > .editToolbar {
       rotate: 0deg;
     }
   }
 
   &[data-main-rotation="90"] {
-    .highlightEditor > .editToolbar {
+    .highlightEditor:not(.free) > .editToolbar {
       rotate: 270deg;
     }
   }
 
   &[data-main-rotation="180"] {
-    .highlightEditor > .editToolbar {
+    .highlightEditor:not(.free) > .editToolbar {
       rotate: 180deg;
     }
   }
 
   &[data-main-rotation="270"] {
-    .highlightEditor > .editToolbar {
+    .highlightEditor:not(.free) > .editToolbar {
       rotate: 90deg;
     }
   }
@@ -969,14 +969,17 @@
     position: absolute;
     background: transparent;
     z-index: 1;
-    transform-origin: 0 0;
     cursor: auto;
     max-width: 100%;
     max-height: 100%;
     border: none;
     outline: none;
     pointer-events: none;
-    transform: none;
+    transform-origin: 0 0;
+
+    &:not(.free) {
+      transform: none;
+    }
 
     .internal {
       position: absolute;

web/draw_layer_builder.css

@@ -44,7 +44,10 @@
 
       position: absolute;
       mix-blend-mode: var(--blend-mode);
-      fill-rule: evenodd;
+
+      &:not(.free) {
+        fill-rule: evenodd;
+      }
     }
 
     &.highlightOutline {

web/text_layer_builder.css

@@ -25,6 +25,10 @@
   transform-origin: 0 0;
   z-index: 2;
 
+  &.drawing {
+    touch-action: none;
+  }
+
   :is(span, br) {
     color: transparent;
     position: absolute;