Make text selection more visible (bug 1879559) by wooorm · Pull Request #20981 · mozilla/pdf.js

wooorm · 2026-03-26T11:41:28Z

References https://bugzilla.mozilla.org/show_bug.cgi?id=1879559 (“In HCM, the text selection is barely visible”).

Continues work from @calixteman who had a partial patch.

This PR improves viewer text-selection highlighting by rendering selection shapes in the draw layer.

add selection overlay rendering in the draw layer; significant code relates to selections spanning multiple text layers/pages, and edges/end-of-content boundaries
clear selection on rotate/scale/scroll/spread changes

My main question is: how should it appear?
I don’t have access to the Figma file linked on bugzilla.

In the CSS (draw_layer-builder.css) there are 3 blocks:

default:
@supports for browsers supporting backdrop-filter:
forced-colors mode:

So it’s possible to design for those (or more).
Personally, the backdrop-filter: invert(1) is the most contrast, so perhaps it’s better to use something else as the default, and to use invert(1) if high contrast mode is used (maybe with a prefers-contrast media query instead)?

codecov-commenter · 2026-03-26T11:42:52Z

Codecov Report

❌ Patch coverage is 35.97403% with 493 lines in your changes missing coverage. Please review.
✅ Project coverage is 63.86%. Comparing base (652700d) to head (b020c5e).
⚠️ Report is 33 commits behind head on master.

Files with missing lines	Patch %	Lines
src/display/draw_layer.js	28.14%	411 Missing ⚠️
src/display/filter_factory.js	60.89%	61 Missing ⚠️
src/display/display_utils.js	50.00%	21 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #20981      +/-   ##
==========================================
+ Coverage   63.32%   63.86%   +0.54%     
==========================================
  Files         177      177              
  Lines      124719   125704     +985     
==========================================
+ Hits        78980    80284    +1304     
+ Misses      45739    45420     -319

Flag	Coverage Δ
fonttest	`8.05% <ø> (+0.41%)`	⬆️
unittestcli	`63.84% <35.97%> (+0.54%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

calixteman · 2026-03-26T12:15:54Z

My idea was to create a specific filter for mapping the foreground color (usually black) on a color A and the background one (usually white) on a color B.
So we could use a filter similar to the one we use for HCM:

pdf.js/src/display/filter_factory.js

Line 188 in 777251d

addHCMFilter(fgColor, bgColor) {

and then we can map the two colors on their system counterparts (Highlight and HighlightText):
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color#:~:text=HighlightText

This way we've by default the same colors as the system has.
And for the future, we could use another kind of filter.

wooorm · 2026-03-30T12:47:25Z

@calixteman I think you mean something like this patch.

This ignores the SelectedItem/SelectedItemText things from the bugzilla entry.

FF light:

FF with custom colors in about:preferences:

chrome:

Sadly, this does not work in Safari. It reports that the color filter is supported, but doesn’t, and no selection is thus visible

wooorm · 2026-03-30T15:34:38Z

Alright, another small patch, now using highlight and highlighttext.

Importantly, though, is that Chrome and Safari do not use the user’s preferred theme colors for that. Probably for security, to prevent fingerprinting.

Safari also has a bug where it does not support SVG filters in backdropFilter. Maybe due to performance?

For that reason, I now gated this as a Firefox only thing. Other browsers get the normal CSS, which now uses a blue background, with some transparency.

It may be possible to gate this entire approach for FF only. Or for non-Safari. I opted not to. I think it keeps the code simpler.

wooorm · 2026-03-30T15:38:52Z

Screenshots:

safari:

chrome:

firefox automatic (system color)

firefox custom colors:

calixteman · 2026-03-30T17:01:02Z

In HCM, the colors are wrong:

wooorm · 2026-03-31T08:20:05Z

@calixteman a) how can I reproduce your example (it seems different than what I am testing wtih) and b) what would the expected output be?

calixteman · 2026-03-31T08:24:01Z

@calixteman a) how can I reproduce your example (it seems different than what I am testing wtih) and b) what would the expected output be?

On Windows, switch to HCM (High Contrast Mode: it's one of the a11y settings) and switch to Night Sky theme.
It should be the opposite: purple background and dark grey foreground.
So it's probably just because you swapped some values.

wooorm · 2026-03-31T08:54:21Z

I can do that:

I am noticing another problem.

When on macOS I set graphite as the Appearance -> “text highlight color”, which corresponds to Highlight in FF CSS, and in dark mode (meaning foreground, aka HighlightText, is white), the text then is barely visible:

Graphite in light mode (foreground is black):

Another color, orange in dark mode (foreground is white), for reference:

Orange in light mode (foreground is black):

We may want some a11y formula in the code to force a specific contrast.
Either here, or perhaps, that should be in FF itself?

wooorm · 2026-03-31T09:53:37Z

@calixteman fascinatingly, it seems to be "Highlight" -> [ 255, 255, 255 ] and "HighlightText" -> [ 251, 251, 254 ].

That made me think, what about the alpha? Highlight -> rgba(255, 255, 255, 0.247) and HighlightText -> rgb(251, 251, 254)

calixteman · 2026-03-31T09:58:46Z

IRL, do you have some alpha ? or do you wonder ?

wooorm · 2026-03-31T10:19:21Z

Yes, I get alpha back from macOS.
Canvas/CanvasText/HighlightText probably never have that, which is why it wasn’t noticed before. But Highlight is different.
I am trying to account for that. Some things are looking better now. Still some bugs though.

wooorm · 2026-03-31T10:39:44Z

The problem with these colors in dark mode + graphite (Highlight -> rgba(255, 255, 255, 0.247), HighlightText -> rgb(251, 251, 254)) is that they work expecting that there is some black background. But PDF.js shows a white page with black text.

In light mode, the PDF.js pages match with what the system expects.

wooorm · 2026-04-13T14:21:55Z

@calixteman re starting a selection and dragging outside of the page, that did already work on Chrome but not Firefox and Safari. I pushed a fix to make it work there too.

And, tests.

calixteman · 2026-04-14T13:23:33Z

The draw layer creation depends on having a annotationEditorUIManager:

pdf.js/web/pdf_page_view.js

Line 1196 in 419c265

if (!annotationEditorUIManager) {

For protected documents, the UIManager isn't created.

calixteman · 2026-04-14T13:36:41Z

+    let hasViewerRange = false;
+    for (let i = 0, ii = selection.rangeCount; i < ii; i++) {
+      if (
+        this.viewer.contains(selection.getRangeAt(i).commonAncestorContainer)


contains can potentially walk all the DOM. If the selection is in the text layer then selection.getRangeAt(i).commonAncestorContainer then is the text layer div so maybe we could have a fast path here. Generally, using closest should be faster.

simplified the code!

calixteman · 2026-04-14T13:39:03Z

    if (this._pagesRotation === rotation) {
      return; // The rotation didn't change.
    }
+    this.clearSelection();


Can't we keep the selection ?
If not, it would be a "regression" (quoted because it's likely not a big deal).

I tried some things but it’s not easy. Though I don’t have the entire project in my head.
I think it means capturing all the selected text nodes (node index, textContent index * start, end), and then selecting all text nodes after draw and restoring.
Which sounds possible, renaming clearSelection to captureSelection / applySelection.

But I think it’s acceptable that a selection is lost when a user does something that like, changes the PDF (rotate) or goes somewhere different (another page).

calixteman · 2026-04-14T13:40:11Z

        return;
      }
-      this.drawLayer ||= new DrawLayerBuilder();
+      this.drawLayer ||= new DrawLayerBuilder({


As said, previously it should be created whatever we've annotationEditorUIManager.

Sorry i don’t quite understand, i think you mean b020c5e right?

I forced that branch and the new selection then still worked

calixteman · 2026-04-14T13:41:56Z

+      return [...rgb, 1];
+    }
+
+    const alpha = MathClamp(


You can create a new function getRGBA similar to getRGB.
I mean add it in display_utils and avoid to call getRGB if we have "rgba(".

calixteman · 2026-04-14T13:50:22Z

+        // Track mouse selection state to preserve selections during
+        // cross-boundary drags.
+        document.addEventListener(
+          "mousedown",


Can't we use pointer instead of mouse ?

yeah, done; I think that should work

calixteman · 2026-04-14T14:00:06Z

+    }
+    for (const textLayer of this.#textLayerSet) {
+      if (!selectedTextLayers.has(textLayer)) {
+        this.#cleanupTextLayerSelection(textLayer);


On every selection change within the same text layer, we clean the selection div when we could just update the path in the svg element and it'd avoid needless DOM churn, right ? or am I missing something ?

Hmm you mean, you are seeing this in the devtools right?
2 lines before your comment there’s a let i = 1. I don’t know why that was there.
I think the current layer (0) should be a selectedTextLayers, and not cleaned up. That also works. So I pushed that.

(If you mean even less cleaning up, say by setting d on path to something empty or so: possible too, but then you end up with more DOM nodes I guess)

wooorm temporarily deployed to code-coverage March 26, 2026 11:41 — with GitHub Actions Inactive

timvandermeij added the text-selection label Mar 26, 2026

wooorm temporarily deployed to code-coverage March 30, 2026 12:51 — with GitHub Actions Inactive

wooorm temporarily deployed to code-coverage March 30, 2026 15:27 — with GitHub Actions Inactive

wooorm temporarily deployed to code-coverage March 31, 2026 08:58 — with GitHub Actions Inactive

Snuffleupagus reviewed Mar 31, 2026

View reviewed changes

Comment thread web/app.js Outdated

wooorm temporarily deployed to code-coverage March 31, 2026 11:21 — with GitHub Actions Inactive

wooorm added 7 commits April 13, 2026 10:29

blend into canvas

3412d53

move selection clearing into pdf viewer

53c7cf2

revert some changes

70a2d26

abort controller

4b52eaa

math clamp

091d320

keep selection when dragging outside page

663b28e

tests

d7ed612

wooorm force-pushed the wooorm/hcm branch from 7a2f204 to d7ed612 Compare April 13, 2026 14:13

wooorm temporarily deployed to code-coverage April 13, 2026 14:13 — with GitHub Actions Inactive

calixteman reviewed Apr 14, 2026

View reviewed changes

wooorm added 4 commits April 16, 2026 13:25

faster clear selection

7eadc1f

move rgba utility to display_utils

16c75bb

pointers

d4512d5

i = 0

c7353c4

wooorm temporarily deployed to code-coverage April 16, 2026 14:28 — with GitHub Actions Inactive

wooorm temporarily deployed to code-coverage April 16, 2026 14:29 — with GitHub Actions Inactive

also add a draw layer if there is no annotation editor

b020c5e

wooorm temporarily deployed to code-coverage April 16, 2026 14:35 — with GitHub Actions Inactive

Conversation

wooorm commented Mar 26, 2026

Uh oh!

codecov-commenter commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

calixteman commented Mar 26, 2026

Uh oh!

wooorm commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wooorm commented Mar 30, 2026

Uh oh!

wooorm commented Mar 30, 2026

Uh oh!

calixteman commented Mar 30, 2026

Uh oh!

wooorm commented Mar 31, 2026

Uh oh!

calixteman commented Mar 31, 2026

Uh oh!

wooorm commented Mar 31, 2026

Uh oh!

wooorm commented Mar 31, 2026

Uh oh!

calixteman commented Mar 31, 2026

Uh oh!

wooorm commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wooorm commented Mar 31, 2026

Uh oh!

Uh oh!

wooorm commented Apr 13, 2026

Uh oh!

calixteman commented Apr 14, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wooorm Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

calixteman Apr 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wooorm Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

codecov-commenter commented Mar 26, 2026 •

edited

Loading

wooorm commented Mar 30, 2026 •

edited

Loading

wooorm commented Mar 31, 2026 •

edited

Loading

wooorm Apr 16, 2026 •

edited

Loading

calixteman Apr 14, 2026 •

edited

Loading

wooorm Apr 16, 2026 •

edited

Loading