Update pdf.js

next-theme · Jan 28, 2024 · afdd900 · afdd900
1 parent 8bd67ba
commit afdd900
Show file tree

Hide file tree

Showing 14 changed files with 989 additions and 907 deletions.
diff --git a/build/pdf.mjs b/build/pdf.mjs
diff --git a/build/pdf.mjs.map b/build/pdf.mjs.map
diff --git a/build/pdf.sandbox.mjs b/build/pdf.sandbox.mjs
diff --git a/build/pdf.sandbox.mjs.map b/build/pdf.sandbox.mjs.map
diff --git a/build/pdf.worker.mjs b/build/pdf.worker.mjs
diff --git a/build/pdf.worker.mjs.map b/build/pdf.worker.mjs.map
diff --git a/web/debugger.css b/web/debugger.css
@@ -50,7 +50,7 @@
 }
 .debuggerShowText,
 .debuggerHideText:hover {
-  background-color: rgb(255 255 0);
+  background-color: rgb(255 255 0 / 0.25);
 }
 #PDFBug .stats {
   font-family: courier;

diff --git a/web/images/cursor-editorTextHighlight.svg b/web/images/cursor-editorTextHighlight.svg
diff --git a/web/images/toolbarButton-editorFreeText.svg b/web/images/toolbarButton-editorFreeText.svg
diff --git a/web/locale/en-US/viewer.ftl b/web/locale/en-US/viewer.ftl
@@ -349,6 +349,10 @@ pdfjs-editor-ink-opacity-input = Opacity
 pdfjs-editor-stamp-add-image-button =
     .title = Add image
 pdfjs-editor-stamp-add-image-button-label = Add image
+# This refers to the thickness of the line used for free highlighting (not bound to text)
+pdfjs-editor-free-highlight-thickness-input = Thickness
+pdfjs-editor-free-highlight-thickness-title =
+    .title = Change thickness when highlighting items other than text
 
 pdfjs-free-text =
     .aria-label = Text Editor

diff --git a/web/viewer.css b/web/viewer.css
@@ -29,7 +29,7 @@
   caret-color:CanvasText;
 }
 
-.textLayer.drawing{
+.textLayer.highlighting{
     touch-action:none;
   }
 
@@ -51,7 +51,6 @@
     --highlight-selected-bg-color:rgb(0 100 0 / 0.25);
     --highlight-backdrop-filter:none;
     --highlight-selected-backdrop-filter:none;
-    --mix-blend-mode:exclusion;
 
     margin:-1px;
     padding:1px;
@@ -868,8 +867,22 @@
   );
   --editorFreeText-editing-cursor:text;
   --editorInk-editing-cursor:url(images/cursor-editorInk.svg) 0 16, pointer;
+  --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);
+}
+
+.textLayer.highlighting:not(.free) span{
+    cursor:var(--editorHighlight-editing-cursor);
+  }
+
+.textLayer.highlighting.free span{
+    cursor:var(--editorFreeHighlight-editing-cursor);
+  }
+
 @media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 1.1dppx){
   :root{
     --editorFreeText-editing-cursor:url(images/cursor-editorFreeText.svg) 0 16, text;
@@ -2096,23 +2109,24 @@
   height:auto;
   padding-inline:10px;
   padding-block:10px 16px;
+  gap:16px;
   display:flex;
   flex-direction:column;
   box-sizing:border-box;
 }
 
+#highlightParamsToolbarContainer .editorParamsLabel{
+    width:-moz-fit-content;
+    width:fit-content;
+    inset-inline-start:0;
+  }
+
 #highlightParamsToolbarContainer .colorPicker{
     display:flex;
     flex-direction:column;
     gap:8px;
   }
 
-#highlightParamsToolbarContainer .colorPicker #highlightColorPickerLabel{
-      width:-moz-fit-content;
-      width:fit-content;
-      inset-inline-start:0;
-    }
-
 #highlightParamsToolbarContainer .colorPicker .dropdown{
       display:flex;
       justify-content:space-between;
@@ -2150,6 +2164,70 @@
           outline:2px solid var(--hover-outline-color);
         }
 
+#highlightParamsToolbarContainer #editorHighlightThickness{
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    gap:4px;
+    align-self:stretch;
+  }
+
+#highlightParamsToolbarContainer #editorHighlightThickness .editorParamsLabel{
+      width:100%;
+      height:auto;
+      align-self:stretch;
+    }
+
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
+      display:flex;
+      justify-content:space-between;
+      align-items:center;
+      align-self:stretch;
+
+      --example-color:#bfbfc9;
+    }
+
+@media (prefers-color-scheme: dark){
+
+:where(html:not(.is-light)) #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
+        --example-color:#80808e;
+    }
+      }
+
+:where(html.is-dark) #highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
+        --example-color:#80808e;
+    }
+
+@media screen and (forced-colors: active){
+
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker{
+        --example-color:HighlightText;
+    }
+      }
+
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::before{
+        content:"";
+        width:8px;
+        aspect-ratio:1;
+        display:block;
+        border-radius:100%;
+        background-color:var(--example-color);
+      }
+
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker .editorParamsSlider{
+        width:unset;
+        height:14px;
+      }
+
+#highlightParamsToolbarContainer #editorHighlightThickness .thicknessPicker::after{
+        content:"";
+        width:24px;
+        aspect-ratio:1;
+        display:block;
+        border-radius:100%;
+        background-color:var(--example-color);
+      }
+
 :root{
   --viewer-container-height:0;
   --pdfViewer-padding-bottom:0;
@@ -2194,6 +2272,7 @@
   padding-bottom:var(--pdfViewer-padding-bottom);
 
   --hcm-highlight-filter:none;
+  --hcm-highlight-selected-filter:none;
 }
 
 @media screen and (forced-colors: active){

diff --git a/web/viewer.html b/web/viewer.html
@@ -122,6 +122,12 @@
             <div id="editorHighlightColorPicker" class="colorPicker">
               <span id="highlightColorPickerLabel" class="editorParamsLabel" data-l10n-id="pdfjs-editor-highlight-colorpicker-label">Highlight color</span>
             </div>
+            <div id="editorHighlightThickness">
+              <label for="editorFreeHighlightThickness" class="editorParamsLabel" data-l10n-id="pdfjs-editor-free-highlight-thickness-input">Thickness</label>
+              <div class="thicknessPicker">
+                <input type="range" id="editorFreeHighlightThickness" class="editorParamsSlider" data-l10n-id="pdfjs-editor-free-highlight-thickness-title" value="12" min="8" max="24" step="1" tabindex="101">
+              </div>
+            </div>
           </div>
         </div>