1 files changed, 279 insertions, 13 deletions

diff --git a/toolkit/components/pdfjs/content/web/viewer.css b/toolkit/components/pdfjs/content/web/viewer.css
index 238df7ce7f..2999c89f3a 100644
--- a/toolkit/components/pdfjs/content/web/viewer.css
+++ b/toolkit/components/pdfjs/content/web/viewer.css
@@ -23,7 +23,6 @@
   text-size-adjust:none;
   forced-color-adjust:none;
   transform-origin:0 0;
-  z-index:2;
   caret-color:CanvasText;
 
   &.highlighting{
@@ -162,7 +161,6 @@
   left:0;
   pointer-events:none;
   transform-origin:0 0;
-  z-index:3;
 
   &[data-main-rotation="90"] .norotate{
     transform:rotate(270deg) translateX(-100%);
@@ -853,6 +851,208 @@
   }
 }
 
+.toggle-button{
+  --button-background-color:#f0f0f4;
+  --button-background-color-hover:#e0e0e6;
+  --button-background-color-active:#cfcfd8;
+  --color-accent-primary:#0060df;
+  --color-accent-primary-hover:#0250bb;
+  --color-accent-primary-active:#054096;
+  --border-interactive-color:#8f8f9d;
+  --border-radius-circle:9999px;
+  --border-width:1px;
+  --size-item-small:16px;
+  --size-item-large:32px;
+  --color-canvas:white;
+
+  @media (prefers-color-scheme: dark){
+    --button-background-color:color-mix(in srgb, currentColor 7%, transparent);
+    --button-background-color-hover:color-mix(
+      in srgb,
+      currentColor 14%,
+      transparent
+    );
+    --button-background-color-active:color-mix(
+      in srgb,
+      currentColor 21%,
+      transparent
+    );
+    --color-accent-primary:#0df;
+    --color-accent-primary-hover:#80ebff;
+    --color-accent-primary-active:#aaf2ff;
+    --border-interactive-color:#bfbfc9;
+    --color-canvas:#1c1b22;
+  }
+
+  @media (forced-colors: active){
+    --color-accent-primary:ButtonText;
+    --color-accent-primary-hover:SelectedItem;
+    --color-accent-primary-active:SelectedItem;
+    --border-interactive-color:ButtonText;
+    --button-background-color:ButtonFace;
+    --border-interactive-color-hover:SelectedItem;
+    --border-interactive-color-active:SelectedItem;
+    --border-interactive-color-disabled:GrayText;
+    --color-canvas:ButtonText;
+  }
+
+  --toggle-background-color:var(--button-background-color);
+  --toggle-background-color-hover:var(--button-background-color-hover);
+  --toggle-background-color-active:var(--button-background-color-active);
+  --toggle-background-color-pressed:var(--color-accent-primary);
+  --toggle-background-color-pressed-hover:var(--color-accent-primary-hover);
+  --toggle-background-color-pressed-active:var(--color-accent-primary-active);
+  --toggle-border-color:var(--border-interactive-color);
+  --toggle-border-color-hover:var(--toggle-border-color);
+  --toggle-border-color-active:var(--toggle-border-color);
+  --toggle-border-radius:var(--border-radius-circle);
+  --toggle-border-width:var(--border-width);
+  --toggle-height:var(--size-item-small);
+  --toggle-width:var(--size-item-large);
+  --toggle-dot-background-color:var(--toggle-border-color);
+  --toggle-dot-background-color-hover:var(--toggle-dot-background-color);
+  --toggle-dot-background-color-active:var(--toggle-dot-background-color);
+  --toggle-dot-background-color-on-pressed:var(--color-canvas);
+  --toggle-dot-margin:1px;
+  --toggle-dot-height:calc(
+    var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 *
+      var(--toggle-border-width)
+  );
+  --toggle-dot-width:var(--toggle-dot-height);
+  --toggle-dot-transform-x:calc(
+    var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width)
+  );
+
+  appearance:none;
+  padding:0;
+  margin:0;
+  border:var(--toggle-border-width) solid var(--toggle-border-color);
+  height:var(--toggle-height);
+  width:var(--toggle-width);
+  border-radius:var(--toggle-border-radius);
+  background:var(--toggle-background-color);
+  box-sizing:border-box;
+  flex-shrink:0;
+
+  &:focus-visible{
+    outline:var(--focus-outline);
+    outline-offset:var(--focus-outline-offset);
+  }
+
+  &:enabled:hover{
+    background:var(--toggle-background-color-hover);
+    border-color:var(--toggle-border-color);
+  }
+
+  &:enabled:active{
+    background:var(--toggle-background-color-active);
+    border-color:var(--toggle-border-color);
+  }
+
+  &[aria-pressed="true"]{
+    background:var(--toggle-background-color-pressed);
+    border-color:transparent;
+  }
+
+  &[aria-pressed="true"]:enabled:hover{
+    background:var(--toggle-background-color-pressed-hover);
+    border-color:transparent;
+  }
+
+  &[aria-pressed="true"]:enabled:active{
+    background:var(--toggle-background-color-pressed-active);
+    border-color:transparent;
+  }
+
+  &::before{
+    display:block;
+    content:"";
+    background-color:var(--toggle-dot-background-color);
+    height:var(--toggle-dot-height);
+    width:var(--toggle-dot-width);
+    margin:var(--toggle-dot-margin);
+    border-radius:var(--toggle-border-radius);
+    translate:0;
+  }
+
+  &[aria-pressed="true"]::before{
+    translate:var(--toggle-dot-transform-x);
+    background-color:var(--toggle-dot-background-color-on-pressed);
+  }
+
+  &[aria-pressed="true"]:enabled:hover::before,
+  &[aria-pressed="true"]:enabled:active::before{
+    background-color:var(--toggle-dot-background-color-on-pressed);
+  }
+
+  &[aria-pressed="true"]:-moz-locale-dir(rtl)::before,
+  &[aria-pressed="true"]:dir(rtl)::before{
+    translate:calc(-1 * var(--toggle-dot-transform-x));
+  }
+
+  @media (prefers-reduced-motion: no-preference){
+    &::before{
+      transition:translate 100ms;
+    }
+  }
+
+  @media (prefers-contrast){
+    &:enabled:hover{
+      border-color:var(--toggle-border-color-hover);
+    }
+
+    &:enabled:active{
+      border-color:var(--toggle-border-color-active);
+    }
+
+    &[aria-pressed="true"]:enabled{
+      border-color:var(--toggle-border-color);
+      position:relative;
+    }
+
+    &[aria-pressed="true"]:enabled:hover,
+    &[aria-pressed="true"]:enabled:hover:active{
+      border-color:var(--toggle-border-color-hover);
+    }
+
+    &[aria-pressed="true"]:enabled:active{
+      background-color:var(--toggle-dot-background-color-active);
+      border-color:var(--toggle-dot-background-color-hover);
+    }
+
+    &:hover::before,
+    &:active::before{
+      background-color:var(--toggle-dot-background-color-hover);
+    }
+  }
+
+  @media (forced-colors){
+    --toggle-dot-background-color:var(--color-accent-primary);
+    --toggle-dot-background-color-hover:var(--color-accent-primary-hover);
+    --toggle-dot-background-color-active:var(--color-accent-primary-active);
+    --toggle-dot-background-color-on-pressed:var(--button-background-color);
+    --toggle-background-color-disabled:var(--button-background-color-disabled);
+    --toggle-border-color-hover:var(--border-interactive-color-hover);
+    --toggle-border-color-active:var(--border-interactive-color-active);
+    --toggle-border-color-disabled:var(--border-interactive-color-disabled);
+
+    &[aria-pressed="true"]:enabled::after{
+      border:1px solid var(--button-background-color);
+      content:"";
+      position:absolute;
+      height:var(--toggle-height);
+      width:var(--toggle-width);
+      display:block;
+      border-radius:var(--toggle-border-radius);
+      inset:-2px;
+    }
+
+    &[aria-pressed="true"]:enabled:active::after{
+      border-color:var(--toggle-border-color-active);
+    }
+  }
+}
+
 :root{
   --outline-width:2px;
   --outline-color:#0060df;
@@ -878,6 +1078,19 @@
   --editorHighlight-editing-cursor:url(images/cursor-editorTextHighlight.svg) 24 24, text;
   --editorFreeHighlight-editing-cursor:url(images/cursor-editorFreeHighlight.svg) 1 18, pointer;
 }
+.visuallyHidden{
+  position:absolute;
+  top:0;
+  left:0;
+  border:0;
+  margin:0;
+  padding:0;
+  width:0;
+  height:0;
+  overflow:hidden;
+  white-space:nowrap;
+  font-size:0;
+}
 
 .textLayer.highlighting{
   cursor:var(--editorFreeHighlight-editing-cursor);
@@ -926,7 +1139,6 @@
   font-size:calc(100px * var(--scale-factor));
   transform-origin:0 0;
   cursor:auto;
-  z-index:4;
 }
 
 .annotationEditorLayer.waiting{
@@ -995,10 +1207,12 @@
 }
 
 .annotationEditorLayer
-  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor){
+  :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor),
+.textLayer{
   .editToolbar{
     --editor-toolbar-delete-image:url(images/editor-toolbar-delete.svg);
     --editor-toolbar-bg-color:#f0f0f4;
+    --editor-toolbar-highlight-image:url(images/toolbarButton-editorHighlight.svg);
     --editor-toolbar-fg-color:#2e2e56;
     --editor-toolbar-border-color:#8f8f9d;
     --editor-toolbar-hover-border-color:var(--editor-toolbar-border-color);
@@ -1084,6 +1298,25 @@
         margin-inline:2px;
       }
 
+      .highlightButton{
+        width:var(--editor-toolbar-height);
+
+        &::before{
+          content:"";
+          mask-image:var(--editor-toolbar-highlight-image);
+          mask-repeat:no-repeat;
+          mask-position:center;
+          display:inline-block;
+          background-color:var(--editor-toolbar-fg-color);
+          width:100%;
+          height:100%;
+        }
+
+        &:hover::before{
+          background-color:var(--editor-toolbar-hover-fg-color);
+        }
+      }
+
       .delete{
         width:var(--editor-toolbar-height);
 
@@ -2003,7 +2236,12 @@
         --example-color:CanvasText;
       }
 
-      &::before{
+      :is(& > .editorParamsSlider[disabled]){
+        opacity:0.4;
+      }
+
+      &::before,
+      &::after{
         content:"";
         width:8px;
         aspect-ratio:1;
@@ -2011,20 +2249,46 @@
         border-radius:100%;
         background-color:var(--example-color);
       }
+      &::after{
+        width:24px;
+      }
 
       .editorParamsSlider{
         width:unset;
         height:14px;
       }
+    }
+  }
 
-      &::after{
-        content:"";
-        width:24px;
-        aspect-ratio:1;
-        display:block;
-        border-radius:100%;
-        background-color:var(--example-color);
+  #editorHighlightVisibility{
+    display:flex;
+    flex-direction:column;
+    align-items:flex-start;
+    gap:8px;
+    align-self:stretch;
+
+    .divider{
+      --divider-color:#d7d7db;
+
+      @media (prefers-color-scheme: dark){
+        --divider-color:#8f8f9d;
+      }
+
+      @media screen and (forced-colors: active){
+        --divider-color:CanvasText;
       }
+
+      margin-block:4px;
+      width:100%;
+      height:1px;
+      background-color:var(--divider-color);
+    }
+
+    .toggler{
+      display:flex;
+      justify-content:space-between;
+      align-items:center;
+      align-self:stretch;
     }
   }
 }
@@ -2084,7 +2348,6 @@
   overflow:hidden;
   width:100%;
   height:100%;
-  z-index:1;
 }
 
 .pdfViewer .page{
@@ -2655,6 +2918,7 @@ body{
     font-style:normal;
   }
   .loadingInput:has(> &[data-status="pending"])::after{
+    display:block;
     visibility:visible;
   }
   &[data-status="notFound"]{
@@ -3249,6 +3513,7 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"]{
   transition-property:none;
 
   .loadingInput:has(> &.loading)::after{
+    display: block;
     visibility:visible;
 
     transition-property:visibility;
@@ -3260,6 +3525,7 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"]{
   &::after{
     position:absolute;
     visibility:hidden;
+    display: none;
     top:calc(50% - 8px);
     width:16px;
     height:16px;