Closed Bug 1539989 Opened 5 years ago Closed 5 years ago

Font panel: Add hover effect to font names to create a stronger association with the in-page highlight

Categories

(DevTools :: Inspector, enhancement)

enhancement
Not set
normal

Tracking

(firefox68 fixed)

RESOLVED FIXED
Firefox 68
Tracking Status
firefox68 --- fixed

People

(Reporter: victoria, Assigned: pbro)

References

Details

Attachments

(3 files)

We can use the same colors used in the markup view's row hover.

The rectangle should have a radius of 3px and padding of 7px left/right and 4px top/bottom. (Hit target should be the same)

--

Other related item — we may want to consider making the in-page highlight the same blue as in the box model highlight, as it might be a little more obvious than the system highlight. It would need to be translucent so we can still retain the nice visual overlap in lines of text that overlap.

(In reply to Victoria Wang [:victoria] from comment #0)

Other related item — we may want to consider making the in-page highlight the same blue as in the box model highlight, as it might be a little more obvious than the system highlight. It would need to be translucent so we can still retain the nice visual overlap in lines of text that overlap.

Yes, I agree we need to change this. We currently use the system text selection highlights. This means 2 things:

  • it's the color that the user has configured in their system preferences when the content area is focused
  • it's a shade of gray when the content are isn't focused

This is a problem because very often DevTools is the one having the focus because you, say, just clicked on the Fonts panel. So the font highlighter is really hard to see.

I'm really hoping that we keep using the text selection API to draw this highlighter though, cause that's really the fastest way for us to do this (this way we don't need to measure anything, or position overlay DIVs all across the page, or transform them, scroll them when needed, etc.)

We can use ::selection in CSS to customize the color to our needs, but the problem persists that if the content are does not have focus, then it defaults back to gray.

Jonathan: would it be possible for us to avoid this? Basically we'd need to be able to select text in content, assign a custom color to this selection, and keep this color visible even if the content area isn't focused. Could that be a chrome-only feature we add?

Flags: needinfo?(jfkthame)

The problem with the selection color has been discussed in bug 1479760. I think the discussion should happen there so we don't have 2 items on this bug.

See Also: → 1479760
Assignee: nobody → pbrosset
Status: NEW → ASSIGNED

The fact that ::selection remains styled even on inactive elements is being fixed by Jonathan in bug 1479760. Resetting the needinfo.
Let's keep this bug just for the styling side of things:

  • Defining the background color and hot zone in the Fonts editor
  • Defining the background color on the ::selection pseudos in the page
Flags: needinfo?(jfkthame)
Pushed by pbrosset@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/d06d70fe82a5
Change the font highlighter's background color to match other highlighters; r=rcaliman
https://hg.mozilla.org/integration/autoland/rev/281f1757c40e
Add a background on :hover of font names; r=rcaliman
Status: ASSIGNED → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
Depends on: 1541938
Component: Inspector: Fonts → Inspector
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: