Merge pull request #17581 from calixteman/editor_highlight_cursor

[Editor] Change the cursors for highlighting (bug 1876588)
mozilla · Jan 26, 2024 · e63fafd · e63fafd
2 parents 3192d37 + f3bdbed
commit e63fafd
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 10 deletions.
diff --git a/gulpfile.mjs b/gulpfile.mjs
@@ -1089,7 +1089,8 @@ function buildComponents(defines, dir) {
     "web/images/loading-icon.gif",
     "web/images/altText_*.svg",
     "web/images/editor-toolbar-*.svg",
-    "web/images/toolbarButton-menuArrow.svg",
+    "web/images/toolbarButton-{editorHighlight,menuArrow}.svg",
+    "web/images/cursor-*.svg",
   ];
 
   return merge([

diff --git a/src/display/editor/annotation_editor_layer.js b/src/display/editor/annotation_editor_layer.js
@@ -334,7 +334,7 @@ class AnnotationEditorLayer {
         "pointerdown",
         this.#boundTextLayerPointerDown
       );
-      this.#textLayer.div.classList.add("drawing");
+      this.#textLayer.div.classList.add("highlighting");
     }
   }
 
@@ -345,7 +345,7 @@ class AnnotationEditorLayer {
         "pointerdown",
         this.#boundTextLayerPointerDown
       );
-      this.#textLayer.div.classList.remove("drawing");
+      this.#textLayer.div.classList.remove("highlighting");
     }
   }
 
@@ -359,11 +359,19 @@ class AnnotationEditorLayer {
         // Do nothing on right click.
         return;
       }
+      this.#textLayer.div.classList.add("free");
       HighlightEditor.startHighlighting(
         this,
         this.#uiManager.direction === "ltr",
         event
       );
+      this.#textLayer.div.addEventListener(
+        "pointerup",
+        () => {
+          this.#textLayer.div.classList.remove("free");
+        },
+        { once: true }
+      );
       event.preventDefault();
     }
   }

diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css
@@ -38,19 +38,31 @@
       var(--outline-around-width)
   );
   --editorFreeText-editing-cursor: text;
-  /*#if COMPONENTS*/
-  --editorInk-editing-cursor: pointer;
-  /*#else*/
   --editorInk-editing-cursor: url(images/cursor-editorInk.svg) 0 16, pointer;
-  /*#endif*/
+  --editorHighlight-editing-cursor: url(images/cursor-editorTextHighlight.svg)
+      23 23,
+    text;
+  --editorFreeHighlight-editing-cursor: url(images/toolbarButton-editorHighlight.svg)
+      0 16,
+    pointer;
+}
+
+.textLayer.highlighting {
+  cursor: var(--editorFreeHighlight-editing-cursor);
+
+  &:not(.free) span {
+    cursor: var(--editorHighlight-editing-cursor);
+  }
+
+  &.free span {
+    cursor: var(--editorFreeHighlight-editing-cursor);
+  }
 }
 
 @media (min-resolution: 1.1dppx) {
   :root {
-    /*#if !COMPONENTS*/
     --editorFreeText-editing-cursor: url(images/cursor-editorFreeText.svg) 0 16,
       text;
-    /*#endif*/
   }
 }
 

diff --git a/web/images/cursor-editorTextHighlight.svg b/web/images/cursor-editorTextHighlight.svg
diff --git a/web/text_layer_builder.css b/web/text_layer_builder.css
@@ -26,7 +26,7 @@
   z-index: 2;
   caret-color: CanvasText;
 
-  &.drawing {
+  &.highlighting {
     touch-action: none;
   }