style: use group opacity for text selection to fix overlapping artifacts

[kairosci]

Description

This PR addresses visual artifacts where text selection boxes would overlap incorrectly.
By applying group opacity and using mix-blend-mode, we ensure that the selection highlight renders correctly on Chrome and other browsers.

Issue fixed

Fixes #17561

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[nicolo-ribaudo]

/botio preview

[moz-tools-bot]

From: Bot.io (Linux m4)

---

Received

Command cmd_preview from @nicolo-ribaudo received. Current queue size: 0

Live output at: http://54.241.84.105:8877/ec4a36296087ca7/output.txt

[moz-tools-bot]

From: Bot.io (Windows)

---

Received

Command cmd_preview from @nicolo-ribaudo received. Current queue size: 0

Live output at: http://54.193.163.58:8877/229f1fcad949cbc/output.txt

[moz-tools-bot]

From: Bot.io (Linux m4)

---

Success

Full output at http://54.241.84.105:8877/ec4a36296087ca7/output.txt

Total script time: 1.00 mins

Published

• Viewer: http://54.241.84.105:8877/ec4a36296087ca7/web/viewer.html
• Viewer (legacy): http://54.241.84.105:8877/ec4a36296087ca7/legacy/web/viewer.html

[moz-tools-bot]

From: Bot.io (Windows)

---

Success

Full output at http://54.193.163.58:8877/229f1fcad949cbc/output.txt

Total script time: 3.51 mins

Published

• Viewer: http://54.193.163.58:8877/229f1fcad949cbc/web/viewer.html
• Viewer (legacy): http://54.193.163.58:8877/229f1fcad949cbc/legacy/web/viewer.html

[nicolo-ribaudo]

Unfortunately this PR completely breaks selection in high contrast mode.

Before:

After:

To test it, go in Firefox to about:preferences, look for "Contrast Control", and set it to "Custom".

[kairosci]

I tested it with HC active on Gnome and I viewed this.
I don't seem to see any overlaps, and it seems to work with high contrast.

And this is the fix regression result without HC

[nicolo-ribaudo]

/botio preview

[moz-tools-bot]

From: Bot.io (Linux m4)

---

Received

Command cmd_preview from @nicolo-ribaudo received. Current queue size: 0

Live output at: http://54.241.84.105:8877/9c5be3bf74e6c36/output.txt

[moz-tools-bot]

From: Bot.io (Windows)

---

Received

Command cmd_preview from @nicolo-ribaudo received. Current queue size: 0

Live output at: http://54.193.163.58:8877/deadfac15add5fc/output.txt

[moz-tools-bot]

From: Bot.io (Linux m4)

---

Success

Full output at http://54.241.84.105:8877/9c5be3bf74e6c36/output.txt

Total script time: 1.01 mins

Published

• Viewer: http://54.241.84.105:8877/9c5be3bf74e6c36/web/viewer.html
• Viewer (legacy): http://54.241.84.105:8877/9c5be3bf74e6c36/legacy/web/viewer.html

[moz-tools-bot]

From: Bot.io (Windows)

---

Success

Full output at http://54.193.163.58:8877/deadfac15add5fc/output.txt

Total script time: 3.31 mins

Published

• Viewer: http://54.193.163.58:8877/deadfac15add5fc/web/viewer.html
• Viewer (legacy): http://54.193.163.58:8877/deadfac15add5fc/legacy/web/viewer.html

[calixteman]

Basically you're reverting a part of what it has been done in:
83c78db
The goal was to make the caret visible so the first thing to do is to check if the care is still visible...

There are several problems with this patch:

• the caret is barely visible in light mode:

• the floating toolbar is barely visible:

• in HCM, the rendering is broken with Chrome

I don't understand how it's possible to miss the floating toolbar being barely visible... It's the first thing I saw...
Anyway, it's pretty cool to want to help us but (sorry there's a but):

• we're humans, we need to sleep and a day is ~24h... we don't have that much time at the end
• reviewing patches, testing them especially ones like this one which require some manual testing in different configurations take some time and sometimes a lot of time.

So I've the feeling you're using a LLM or something like that: I don't have any concern with that but some LLM are just tools here to help us but not to do the job.
So before patching, try to ask questions about the patch you want to partially revert, questions like "What's the caret browsing mode ?", "How to switch to HCM ?", ...

Note that I take the time to write this answer, so try to make a good use of your time and ours ! thank you.

[nicolo-ribaudo]

Unfortunately in that second screenshot the tooltip on the bottom-right of the highlight is still significantly transparent, while it should be opaque.

[kairosci]

Hey, sorry for the mess earlier.

My local Git env was completely acting up, I couldn't get staging to work and ended up having to do a fresh reinstall to fix it. That's why the last push was such a wreck.

My setup is solid now and I’ve double-checked that everything is included. I’ve manually tested the opacity, floating bar, and HCM on Chrome, and it’s all looking good.

Regarding the AI comment, it was really just me rushing with a broken environment, no LLM involved. I’ve spent more time testing this version to make sure it’s right.

Could you give it one last look? Attached are the screenshots

[kairosci]

@calixteman , @timvandermeij , @nicolo-ribaudo As soon as you can, could you take a look at it? I think I've fixed the problems. I made a slight change, making the floating bar an “independent” element, moving the floating toolbar to AnnotationEditorLayer to keep it opaque, and maintaining mix-blend-mode to avoid overlaps and making the selection lighter by adding 0.25 as the color opacity. I also added screenshots of how it looks on Brave and Firefox.

[kairosci]

I would like to point out that this behavior seems to allow for better selection of underlined text. In Firefox, when I try to select an underlined element, it almost never works, but with this approach, I seem to notice improvements.