1587795 - Network Panel Search - The color highlighted in the right side panel is different depending on what has been selected

Status: NEW

(DevTools :: Netmonitor, defect, P3)

Description

[Marcela (Please NI request to Brindusa Tot)]

Attachment: Highlighted_different_colors.mov

After focusing a matches result on the left side panel, the color highlighted on the right side panel is different depending on what has been selected

Affected versions
Firefox versions Nightly 71.0a1

Affected platforms
Windows 10

Steps to reproduce

• Launch the Firefox Browser and open https://edition.cnn.com/ and Open Network Panel Search.
• Write the following word "a" and press Enter key
• Expand any search result files in the left search panel look for any request and Click over it.

Expected Result
All Request matches highlighted should have same look&feel

Actual Result
When a match is focused, the color highlighted on the right side panel is different depending on what has been selected

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Harald, Florens, do we have a decision on the highlight color?
Honza

Comment 2

[Florens Verschelde :fvsch]

Yes, we're sharing a few design tokens for both "flash to get attention" and "search match" highlights, defined here:
https://github.com/firefox-devtools/ux/issues/14#issuecomment-537047482

We've implemented them for the Network search results (in the left sidebar), but not for highlighting results in different parts of request details.

.search-match {
  border-bottom: 1px solid var(--theme-contrast-border);
  color: var(--theme-contrast-color);
  background-color: var(--theme-contrast-background);
}

Then if the search match appears in a data row which has the white-on-blue "selected" style, we can invert the selection colors:

.selected .search-match {
  border-bottom: none;
  color: var(--theme-selection-background);
  background-color: var(--theme-selection-color);
}

which I'm tentatively doing for the Debugger in bug 1588294.

Note that this might conflict with ::selection styles (manual text selection, possible where we don't use user-select: none). This is a wider problem that should probably get fixed by changing the ::selection colors (using something other than white-on-blue for those).

Comment 3

[Florens Verschelde :fvsch]

Re. this bug specifically: it looks like when we reveal the selected search result in the request details, we tend to highlight a complete row or line of code. But the style we came up with is meant for highlighting a fragment of text (a substring) and not a full line.

So we have to decide if we want to do:
a) highlight the line where the matched text fragment appears
b) highlight the matched text fragment
c) both

Comment 4

[ovidiu boca[:Ovidiu]]

I can't reproduce this on Mac OS X 10.14 with FF Beta 71.0b9.

Comment 5

[:Harald Kirschner :digitarald]

Clearing ni?, Florens made the call.