New highlight method

[sapjax]

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API
https://developer.mozilla.org/en-US/docs/Web/API/Highlight

We can use the Highlight API above to highlight the text, which should be more efficient than the existing PAINT methods.

I have been using it in my extension for some time, and it works well.

[ator-dev]

WOW. You have seriously made my week. Thank you for bringing my attention to an API so sorely absent from browsers and the spec, for such a long time! I'm quite certain this didn't exist when I originally (actively) developed Mark My Search, because I searched for alternate highlighting methods obsessively - it was my resolute conviction that we should be able to mark up a webpage without breaking it that led me to develop the PAINT highlighter.

I am proud of what I achieved with PAINT, because for what it is, it has been surprisingly efficient at highlighting - but I never got it to work quite well enough.

Although I'll likely remove PAINT at some point, I'll probably keep CLASSIC forever, mainly because it has potential for interaction with screenreaders. This API takes the cake however.

Thank you again, and congrats on your extension!

[sapjax]

Your extension is excellent. I found your extension when I was looking for a way to highlight the text without modifying the DOM structure. I still can't understand some codes in the PAINT methods. Later, I found that the browser added a new Highlight API, which is very simple to use, but it does have some shortcomings, such as the screenreaders you mentioned.

[ator-dev]

I'm glad you like it, thank you (:

I still can't understand some codes in the PAINT methods

I'm not too proud of my old code - in fact, I recently started a big effort to make it more approachable! Feel free to ask me about anything you're stuck on.

This API will revolutionise the search-highlighter space for sure, and I hope it lands in Firefox soon too 😅

[ator-dev]

Now added to my answer on Stack Overflow.

https://stackoverflow.com/a/76191632/16376459

[sapjax]

Now added to my answer on Stack Overflow.

https://stackoverflow.com/a/76191632/16376459

Great! I remember I saw this answer before.

The advantage of using Highlight API is we don't need to create elements over text ranges, we can just style the Ranges, but without elements it's hard to interact with highlights, currently, I use range.getBoundingClientRect match with the mouse position to check if a Range is under the mouse, good news seems Browser has a plan to implement events interaction for Highlights.

[ator-dev]

@sapjax I'm commenting to let you know that I have completed my initial refactoring of the highlighter code. If you want to understand how PAINT works, it should now be easier!

Old structure: PAINT and CLASSIC (now ELEMENT) highlighting functions were just roughly grouped together and called each other essentially at random.

New structure:

• AbstractEngine is an interface common to all highlighters, used to begin highlighting, insert scroll markers, etc.
• ElementEngine (previously named CLASSIC) relies on inserting elements.
• PaintEngine relies on painting on top of elements.
  • AbstractMethod is an interface common to all modes of PAINT.
  • PaintMethod uses CSS Houdini Paint and the CSS paint() function.
  • ElementMethod uses the Firefox-specific CSS element() function.
  • UrlMethod uses the CSS url() function to draw an SVG.
• HighlightEngine (not present) relies on CSS Custom Highlights and the CSS highlight() function.

---

without elements it's hard to interact with highlights

That's a good point. Luckily MMS does not especially need highlight interaction, but it would definitely be a useful ability to have.

[ator-dev]

I didn't mean to close this! However, the highlight engine ("HIGHLIGHT") is now at a very good stage, and I am trying to bring Mark My Search back to a releasable state after rewriting many of its components.

Incidentally, it is possible to try out Firefox's implementation of the Custom Highlight API. It's not complete - for example, it currently lacks support for text-decoration - but it's nice to see where Mozilla has got to, and it allows interested users to try out the faster and safer highlighting engines it enables.

Here is preference to set in about:config:

dom.customHighlightAPI.enabled