1588294 - Use new search highlight styles for "Search in Files…" results

Status: RESOLVED FIXED

(DevTools :: Debugger, enhancement)

Description

[Florens Verschelde :fvsch]

In bug 1582702 we came up with a style for highlighting search results, with the intent of generalizing it to other places, including Debugger.

Let's start with the "Search in Files..." results. Currently the highlighted text fragments use our "selection" colors, white text on a blue background.

UI spec: https://github.com/firefox-devtools/ux/issues/14#issuecomment-537047482

Comment 1

[Florens Verschelde :fvsch]

Attachment: Bug 1588294 - Project search results style tweaks, new highlight colors; r=davidwalsh

• Use tabular numbers in search input message to reduce layout shifts that impact the loader icon
• Use new highlight colors in search results
• Use standard code font-family (platform-dependent) and font-size (11px); change result row height to 18px (from 16px)
• Add row hover background color, similar to Network request list
• And a few more spacing tweaks

Comment 2

[Florens Verschelde :fvsch]

Attachment: project-search-result-before-after.png

I took the opportunity to tweak spacing a bit, add a hover style (borrowed from the Network panel), fix a few tiny CSS issues. Here's the before/after.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/a7cbe630a6ca
Project search results style tweaks, new highlight colors; r=davidwalsh

Comment 4

[Oana Pop-Rus]

https://hg.mozilla.org/mozilla-central/rev/a7cbe630a6ca