Merge pull request #17533 from calixteman/caret_mode

Make the caret visible in the text layer in caret browsing mode

src/display/base_factory.js

@@ -30,7 +30,7 @@ class BaseFilterFactory {
     return "none";
   }
 
-  addHighlightHCMFilter(fgColor, bgColor, newFgColor, newBgColor) {
+  addHighlightHCMFilter(filterName, fgColor, bgColor, newFgColor, newBgColor) {
     return "none";
   }
 

src/display/display_utils.js

@@ -57,17 +57,7 @@ class DOMFilterFactory extends BaseFilterFactory {
 
   #document;
 
-  #hcmFilter;
+  #_hcmCache;
-
-  #hcmKey;
-
-  #hcmUrl;
-
-  #hcmHighlightFilter;
-
-  #hcmHighlightKey;
-
-  #hcmHighlightUrl;
 
   #id = 0;
 
@@ -81,6 +71,10 @@ class DOMFilterFactory extends BaseFilterFactory {
     return (this.#_cache ||= new Map());
   }
 
+  get #hcmCache() {
+    return (this.#_hcmCache ||= new Map());
+  }
+
   get #defs() {
     if (!this.#_defs) {
       const div = this.#document.createElement("div");
@@ -161,16 +155,28 @@ class DOMFilterFactory extends BaseFilterFactory {
 
   addHCMFilter(fgColor, bgColor) {
     const key = `${fgColor}-${bgColor}`;
-    if (this.#hcmKey === key) {
+    const filterName = "base";
-      return this.#hcmUrl;
+    let info = this.#hcmCache.get(filterName);
+    if (info?.key === key) {
+      return info.url;
     }
 
-    this.#hcmKey = key;
+    if (info) {
-    this.#hcmUrl = "none";
+      info.filter?.remove();
-    this.#hcmFilter?.remove();
+      info.key = key;
+      info.url = "none";
+      info.filter = null;
+    } else {
+      info = {
+        key,
+        url: "none",
+        filter: null,
+      };
+      this.#hcmCache.set(filterName, info);
+    }
 
     if (!fgColor || !bgColor) {
-      return this.#hcmUrl;
+      return info.url;
     }
 
     const fgRGB = this.#getRGB(fgColor);
@@ -183,7 +189,7 @@ class DOMFilterFactory extends BaseFilterFactory {
       (fgColor === "#000000" && bgColor === "#ffffff") ||
       fgColor === bgColor
     ) {
-      return this.#hcmUrl;
+      return info.url;
     }
 
     // https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_Colors_and_Luminance
@@ -203,7 +209,7 @@ class DOMFilterFactory extends BaseFilterFactory {
     const table = map.join(",");
 
     const id = `g_${this.#docId}_hcm_filter`;
-    const filter = (this.#hcmHighlightFilter = this.#createFilter(id));
+    const filter = (info.filter = this.#createFilter(id));
     this.#addTransferMapConversion(table, table, table, filter);
     this.#addGrayConversion(filter);
 
@@ -223,22 +229,33 @@ class DOMFilterFactory extends BaseFilterFactory {
       filter
     );
 
-    this.#hcmUrl = `url(#${id})`;
+    info.url = `url(#${id})`;
-    return this.#hcmUrl;
+    return info.url;
   }
 
-  addHighlightHCMFilter(fgColor, bgColor, newFgColor, newBgColor) {
+  addHighlightHCMFilter(filterName, fgColor, bgColor, newFgColor, newBgColor) {
     const key = `${fgColor}-${bgColor}-${newFgColor}-${newBgColor}`;
-    if (this.#hcmHighlightKey === key) {
+    let info = this.#hcmCache.get(filterName);
-      return this.#hcmHighlightUrl;
+    if (info?.key === key) {
+      return info.url;
     }
 
-    this.#hcmHighlightKey = key;
+    if (info) {
-    this.#hcmHighlightUrl = "none";
+      info.filter?.remove();
-    this.#hcmHighlightFilter?.remove();
+      info.key = key;
+      info.url = "none";
+      info.filter = null;
+    } else {
+      info = {
+        key,
+        url: "none",
+        filter: null,
+      };
+      this.#hcmCache.set(filterName, info);
+    }
 
     if (!fgColor || !bgColor) {
-      return this.#hcmHighlightUrl;
+      return info.url;
     }
 
     const [fgRGB, bgRGB] = [fgColor, bgColor].map(this.#getRGB.bind(this));
@@ -294,8 +311,8 @@ class DOMFilterFactory extends BaseFilterFactory {
       return arr.join(",");
     };
 
-    const id = `g_${this.#docId}_hcm_highlight_filter`;
+    const id = `g_${this.#docId}_hcm_${filterName}_filter`;
-    const filter = (this.#hcmHighlightFilter = this.#createFilter(id));
+    const filter = (info.filter = this.#createFilter(id));
 
     this.#addGrayConversion(filter);
     this.#addTransferMapConversion(
@@ -305,12 +322,12 @@ class DOMFilterFactory extends BaseFilterFactory {
       filter
     );
 
-    this.#hcmHighlightUrl = `url(#${id})`;
+    info.url = `url(#${id})`;
-    return this.#hcmHighlightUrl;
+    return info.url;
   }
 
   destroy(keepHCM = false) {
-    if (keepHCM && (this.#hcmUrl || this.#hcmHighlightUrl)) {
+    if (keepHCM && this.#hcmCache.size !== 0) {
       return;
     }
     if (this.#_defs) {

web/annotation_layer_builder.css

@@ -28,7 +28,6 @@
     --input-disabled-border-color: GrayText;
     --input-hover-border-color: Highlight;
     --link-outline: 1.5px solid LinkText;
-    --hcm-highlight-filter: invert(100%);
 
     .textWidgetAnnotation :is(input, textarea):required,
     .choiceWidgetAnnotation select:required,

web/pdf_page_view.js

@@ -284,6 +284,17 @@ class PDFPageView {
       this._container?.style.setProperty(
         "--hcm-highlight-filter",
         pdfPage.filterFactory.addHighlightHCMFilter(
+          "highlight",
+          "CanvasText",
+          "Canvas",
+          "HighlightText",
+          "Highlight"
+        )
+      );
+      this._container?.style.setProperty(
+        "--hcm-highlight-selected-filter",
+        pdfPage.filterFactory.addHighlightHCMFilter(
+          "highlight_selected",
           "CanvasText",
           "Canvas",
           "HighlightText",

web/pdf_viewer.css

@@ -62,6 +62,11 @@
   --scale-factor: 1;
 
   padding-bottom: var(--pdfViewer-padding-bottom);
+
+  --hcm-highlight-filter: none;
+  @media screen and (forced-colors: active) {
+    --hcm-highlight-filter: invert(100%);
+  }
 }
 
 .pdfViewer .canvasWrapper {

web/pdf_viewer.js

@@ -884,12 +884,23 @@ class PDFViewer {
           this.viewer.style.setProperty(
             "--hcm-highlight-filter",
             pdfDocument.filterFactory.addHighlightHCMFilter(
+              "highlight",
               "CanvasText",
               "Canvas",
               "HighlightText",
               "Highlight"
             )
           );
+          this.viewer.style.setProperty(
+            "--hcm-highlight-selected-filter",
+            pdfDocument.filterFactory.addHighlightHCMFilter(
+              "highlight_selected",
+              "CanvasText",
+              "Canvas",
+              "HighlightText",
+              "ButtonText"
+            )
+          );
         }
 
         for (let pageNum = 1; pageNum <= pagesCount; ++pageNum) {

web/text_layer_builder.css

@@ -18,12 +18,13 @@
   text-align: initial;
   inset: 0;
   overflow: hidden;
-  opacity: 0.25;
+  opacity: 1;
   line-height: 1;
   text-size-adjust: none;
   forced-color-adjust: none;
   transform-origin: 0 0;
   z-index: 2;
+  caret-color: CanvasText;
 
   &.drawing {
     touch-action: none;
@@ -47,17 +48,25 @@
   /*#endif*/
 
   .highlight {
-    --highlight-bg-color: rgb(180 0 170);
+    --highlight-bg-color: rgb(180 0 170 / 0.25);
-    --highlight-selected-bg-color: rgb(0 100 0);
+    --highlight-selected-bg-color: rgb(0 100 0 / 0.25);
+    --highlight-backdrop-filter: none;
+    --highlight-selected-backdrop-filter: none;
+    --mix-blend-mode: exclusion;
 
     @media screen and (forced-colors: active) {
-      --highlight-bg-color: Highlight;
+      --highlight-bg-color: transparent;
-      --highlight-selected-bg-color: ButtonText;
+      --highlight-selected-bg-color: transparent;
+      --highlight-backdrop-filter: var(--hcm-highlight-filter);
+      --highlight-selected-backdrop-filter: var(
+        --hcm-highlight-selected-filter
+      );
     }
 
     margin: -1px;
     padding: 1px;
     background-color: var(--highlight-bg-color);
+    backdrop-filter: var(--highlight-backdrop-filter);
     border-radius: 4px;
 
     &.appended {
@@ -78,14 +87,16 @@
 
     &.selected {
       background-color: var(--highlight-selected-bg-color);
+      backdrop-filter: var(--highlight-selected-backdrop-filter);
     }
   }
 
   ::selection {
     /*#if !MOZCENTRAL*/
-    background: blue;
+    background: rgba(0 0 255 / 0.25);
     /*#endif*/
-    background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */
+    /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
+    background: color-mix(in srgb, AccentColor, transparent 75%);
   }
 
   /* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */