Font panel: Add hover effect to font names to create a stronger association with the in-page highlight
Categories
(DevTools :: Inspector, enhancement)
Tracking
(firefox68 fixed)
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.
Assignee | ||
Comment 1•5 years ago
|
||
(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?
Comment 2•5 years ago
•
|
||
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.
Assignee | ||
Updated•5 years ago
|
Assignee | ||
Comment 3•5 years ago
|
||
Assignee | ||
Comment 4•5 years ago
|
||
Depends on D25598
Assignee | ||
Comment 5•5 years ago
|
||
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
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
Comment 7•5 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/d06d70fe82a5
https://hg.mozilla.org/mozilla-central/rev/281f1757c40e
Updated•3 years ago
|
Description
•