Merge pull request #17533 from calixteman/caret_mode

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

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-selected-bg-color: rgb(0 100 0);
+    --highlight-bg-color: rgb(180 0 170 / 0.25);
+    --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-selected-bg-color: ButtonText;
+      --highlight-bg-color: transparent;
+      --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 */