Show the font preview tooltip for font shorthand too.

NEW
Unassigned

Status

()

Firefox
Developer Tools: CSS Rules Inspector
P3
enhancement
2 years ago
3 months ago

People

(Reporter: sworddragon2, Unassigned)

Tracking

45 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

2 years ago
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:45.0) Gecko/20100101 Firefox/45.0
Build ID: 20160317093216

Steps to reproduce:

1. Go to the menu bar -> Tools -> "Web Developer" -> "Web Console" and choose the "Inspector" register.
2. In the right box hover over the values of some CSS attributes.


Actual results:

Some values of attributes like font-family are providing a preview (like the text "The quick brown fox jumps over the lazy dog" with the related font).


Expected results:

There are various ways to enhance this a bit:

1. In the provided example with font-family the box containing the text has an arrow at the left bottom which seems to point to a random location. I think the arrow should point to the related CSS value to avoid confusing the user.
2. Hovering the value of font-family does show the example text but hovering the value of font does not. Since font does also contain a typeface there could be also a preview, potentially keeping the other explicit and default values also in mind.
3. The preview could be extended to other attributes. Sizes could get a bit tricky but for example colors could show a small square with the related color as preview.
(Reporter)

Updated

2 years ago
Severity: normal → enhancement

Updated

2 years ago
Component: Untriaged → Developer Tools: CSS Rules Inspector
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3
(In reply to sworddragon2 from comment #0)
> 1. In the provided example with font-family the box containing the text has
> an arrow at the left bottom which seems to point to a random location. I
> think the arrow should point to the related CSS value to avoid confusing the
> user.
I believed this has been fixed since then.
> 2. Hovering the value of font-family does show the example text but hovering
> the value of font does not. Since font does also contain a typeface there
> could be also a preview, potentially keeping the other explicit and default
> values also in mind.
This still isn't implemented, however if you expand the font shorthand (with the little expander triangle icon next to it, then you get the preview on the font-family long-hand below that).
> 3. The preview could be extended to other attributes. Sizes could get a bit
> tricky but for example colors could show a small square with the related
> color as preview.
Let's file new bugs for each of these. We already of a few of them I think, like for angle and time. We also implemented it for transform.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: Enhancing the CSS attribute preview → Show the font preview tooltip for font shorthand too.
You need to log in before you can comment on or make changes to this bug.