1588796 - Use new search highlight styles for "Find in file…"

Status: RESOLVED FIXED

(DevTools :: Debugger, enhancement)

Description

[Florens Verschelde :fvsch]

Attachment: debugger-file-search-highlight.png

What: we want to use a similar highlight style for search results across devtools. Some places used yellow, orange, white-on-blue, gray borders/backgrounds, etc.

We settled on the yellow style in this UI spec: https://github.com/firefox-devtools/ux/issues/14#issuecomment-537047482
Implemented or in progress: bug 1588294, bug 1582702

Design question

How should we style the "current" match?

Our current style (see attached screenshot) use gray borders for matches, and a gray background for the current match.

In the Style Editor, matches use a light yellow background, and the current match uses a darker shade of yellow.

Technical question

Our gray border style is defined in devtools/client/debugger/src/components/Editor/Highlight.css. But I couldn't find where the gray background is defined?

When I try to inspect the gray background I can't reach it, even after adding opacity: 0; pointer-events: none to the elements in front of it. The color seems to be #b0b0b0 (light theme) but I can't find it in the codebase. Any pointers where it's created?

Comment 1

[Jason Laster [:jlast]]

Thanks. I've also looked for the grey and could not find it... My guess is it is codemirror.

In addition to being consistent within devtools, it would be nice to learn from popular editors.

Comment 2

[Florens Verschelde :fvsch]

Attachment: style-editor-search-highlight.png

Found the gray background style, it's .CodeMirror-selected.

The Style Editor seems to use the same gray background, but their yellow highlight on top of it has a partial opacity, hence the "darker yellow" style.

Comment 3

[Florens Verschelde :fvsch]

Attachment: vscode-selection-and-search-match.png

So here's what VS Code seems to do. They paint in 3 layers (that we're concerned with):

• Bottom: Search matches, tend to be an orange or brown shade.
• Middle: Selection background, tends to be a blue or gray shade with partial opacity.
• Top: text.

For them the "current match" is just the search match background and the selection background overlayed. When you had a text selection and then search, you lose your previous selection and the first match gets selected. When you hit Cmd+G to go to the next match, it removes the previous text selection and selects the text for that second match.

On the CodeMirror side:

• what I understood as "current match" is also a selection style
• the selected style can be gray or light blue depending on where the focus is (I'm not 100% clear on that)
• our paint order is the other way round: selection behind, search highlight on top

Comment 4

[Florens Verschelde :fvsch]

Attachment: codemirror-selection-and-search-matches.png

Given the paint order we have, we can probably use a partial opacity yellow for the match background. Here's how it looks without any change to the selection color, and a 60% opacity yellow (using a more saturated yellow to compensate the lower opacity).

Comment 5

[Florens Verschelde :fvsch]

Attachment: debugger-hover-yellow-highlight.png

When paused on a breakpoint and hovering some values in the function body before the breakpoint, we're showing a yellow highlight to make it clear which expression or element we're showing a tooltip for. (Note: only in the light theme, it's purple in the dark theme.)

Maybe this conflicts a bit with yellow for search results?
We could change that hover color to something else, I'm thinking a cool hue maybe (blue, teal, green or gray)?

Comment 6

[Victoria Wang [:victoria]]

Neat, I like the concept behind overlapping the 'selected' color for the current search. Unfortunately it looks a tad muted/hard to read for me (same with VSCode's version). Previously we were talking about a green styling like Firefox's Find in Page, but I guess it might require changing the text color in order to deal with the green syntax highlighting.

Would you mind trying out something along the lines of these green colors, with bright green underlines, no change to text color?

Comment 7

[Florens Verschelde :fvsch]

Would love to go with the green style for the current search.

But we're blocked on the technical side because CodeMirror doesn't highlight the "currently selected search" (neither does VS Code). Schematically what we get looks like:

<div z-index="1">
   <span class="CodeMirror-selected"></span>
</div>

<div z-index="2">
   Some
   <span class="cm-highlight">code</span>
   with two search results for the word "
   <span class="cm-highlight">code</span>
   ".
</div>

The cm-highlight class is what I use for the yellow highlights. The CodeMirror-selected class is used by CodeMirror to paint the selection background behind the actual content. CodeMirror doesn't have a concept of "current search result", instead it highlights all search results and creates a text selection that matches the first one (then the next one if you hit Cmd+G).

To achieve a specific style for "selected search result" we would need CodeMirror to add a specific class to the right highlight, e.g. <span class="cm-highlight cm-highlight-current">code</span>.

Comment 8

[Florens Verschelde :fvsch]

Attachment: search-highlight-translucent.png

Here's what I came up with:

1. Tweak the text selection colors:

   • Light theme: the unfocused selection color (gray) was much darker than the focused one (light blue) which doesn't make sense, so I'm lightening it.
   • Dark theme: our selection color (same color for focused/unfocused states) was barely perceptible, due to a change I did in June (in my defense, the variable has "hover" in its name so it was hard to figure out it would be used for CodeMirror selections). I'm restoring the old color, which is barely more contrasted but that's a start.

2. Figure out translucent colors for search highlights:

   • Light theme: Yellow 50 at 40% opacity
   • Dark theme: Yellow 50 at 22% opacity (tried 25-28% initially but it was really hard to read for some code colors)

And I have a patch that implements this style for Debugger + Style Editor.

Comment 9

[Florens Verschelde :fvsch]

Attachment: codemirror-search-highlight-update-screenshots.png

Here's the result in light and dark themes.

I'm a bit concerned about the dark theme selection color not showing through the yellow highlight. But we can revisit the dark theme selection color later; pretty sure we can make it more visible.

Note: the Style Editor seems to use this Search add-on for CodeMirror:
https://codemirror.net/demo/search.html
But it does not seem to mark the "current search result" in the DOM either.

Comment 10

[Florens Verschelde :fvsch]

Attachment: Bug 1588796 - New search-in-file highlight style in Debugger and Style Editor; r=davidwalsh,gl

Comment 11

[Florens Verschelde :fvsch]

Comment on attachment 9101586 [details]
codemirror-search-highlight-update-screenshots.png

Hi Victoria, do you think those results work well?

This screenshot shows Yellow 50 backgrounds at 40% opacity (light theme) and 22% opacity (dark theme).
You can see them in isolation, with a comparison with Yellow 50 @ 25% opacity:
https://bugzilla.mozilla.org/show_bug.cgi?id=1588796#c8

I tentatively updated the UI spec in a new GitHub comment here:
https://github.com/firefox-devtools/ux/issues/14#issuecomment-542877666

Comment 12

[Victoria Wang [:victoria]]

Attachment: image.png

Great stuff!

Tiny thing I noticed - these two underlines (attached) are a different color.

For dark theme, I wonder about lowering the opacity of the yellow even more but brightening up the underline.

Comment 13

[Florens Verschelde :fvsch]

Tiny thing I noticed - these two underlines (attached) are a different color.

I think what happens is that the two highlights overlap each other by 1px, so the semi-transparent yellow from the bottom one lightens the border from the top one.

One solution would be to use an inset box-shadow to draw the border. But keeping a border can be an advantage because in Windows High Contrast mode, backgrounds and box-shadows are removed, but the border would be kept (and colored with a high-contrast color).

For now I'd keep it like this, and if comes up as an issue we can switch to an inset box-shadow later.

Comment 14

[Florens Verschelde :fvsch]

Attachment: dark-theme-search-highlight-shades-of-yellow.png

Testing different yellows with the dark theme:

• Border: Yellow 65, Yellow 60, Yellow 50
• Background: Yellow 50 at 15% opacity and 10% opacity

For comparison, the style in attachment 9101582 [details] and attachment 9101586 [details] was:

• Border: Yellow 70
• Background: Yellow 50 at 22% opacity

Comment 15

[Victoria Wang [:victoria]]

Thanks for testing these dark alternatives! My favorite is the top left. I like the border being at 65 - bold but doesn't overpower the text. Readability is still iffy for the selected highlight, but as far as tradeoffs go, that seems better than the 10% variant where the highlight effect starts to get lost. (If it looks like only an underline, then it doesn't seem like a search result anymore.)

I think what happens is that the two highlights overlap each other by 1px, so the semi-transparent yellow from the bottom one lightens the border from the top one.

Ah, it also looks like it's not happening in the Debugger examples. Maybe the Style Editor just needs 1px higher line height. (Or 1px less top highlight?) Either way I agree it's not a blocker.

Comment 16

[Florens Verschelde :fvsch]

Thanks for the review :)

• Updated the UI spec on GitHub.
• Opened bug 1589233 for the Style Editor line-height.
• Updated the patch, and landing now.

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/344582ee889b
New search-in-file highlight style in Debugger and Style Editor; r=davidwalsh,gl

Comment 18

[Gabriel Luong [:gl] (ΦωΦ)]

(In reply to Florens Verschelde :fvsch from comment #16)

Thanks for the review :)

• Updated the UI spec on GitHub.
• Opened bug 1589233 for the Style Editor line-height.
• Updated the patch, and landing now.

Thanks for doing this Florens. I love how we are able to document the decisions we make and turn it into spec.

Comment 19

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/344582ee889b