[Editor] Change the cursors for highlighting (bug 1876588)

mozilla · Jan 26, 2024 · 13afb81 · 13afb81
1 parent 4ec4348
commit 13afb81
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 3 deletions.
diff --git a/gulpfile.mjs b/gulpfile.mjs
@@ -1090,6 +1090,8 @@ function buildComponents(defines, dir) {
     "web/images/altText_*.svg",
     "web/images/editor-toolbar-*.svg",
     "web/images/toolbarButton-menuArrow.svg",
+    "web/images/cursor-*.svg",
+    "web/images/toolbarButton-editorHighlight.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
@@ -43,6 +43,24 @@
   /*#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) {

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;
   }