Show font family tooltips for 'inherit', 'unset' and 'initial' font family values

NEW
Unassigned

Status

enhancement
P2
normal
3 years ago
2 months ago

People

(Reporter: julienw, Unassigned)

Tracking

Trunk

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

Reporter

Description

3 years ago
STR:
1. Open the inspector on the attached file.
2. Inspect the text "Hello World".

Look at the CSS rules. All we see is that the value for "font" is "inherit". This is very much useless.

I don't have a good UX idea to show what is inherited. Possibilities include:
* show it at hover
* show it at the right of the value
* show it in a sub-box below, just like a normal rule, so that we know where it's defined as well.
In this case, the value set on #div1 is invalid: "font: sans-serif". 
If you use "font-family: sans-serif", you will see it when selecting "div2" in the "inherited section".

See the modified here.

Unless I missed something, I think this matches your last suggestion:
> * show it in a sub-box below, just like a normal rule, so that we know where it's defined as well.
Flags: needinfo?(felash)
s/See the modified here/See the modified attachment here
I agree with Julian, the inherited value will (in most cases) already be displayed in the rule-view, below, since we show inherited rules.

In case there are none, then we also have an option to show browser styles (in the settings panel), which you could use to see what UA property was inherited.
Reporter

Comment 4

3 years ago
Actually I got this issue from a real-world website and I tried to do a testcase from it.

I just checked in the website and you're right, the inherited information is displayed, but it's struck (like in your example). This is extremely confusing and when I looked at it I had a very hard time to find which font was used.

As a reference, the real-workd website is http://romy.tetue.net/works/?lang=es, and the inspected element is the paragraph starting with "Co-diseño". There is the same issue with the paragraph starting with "En los últimos años".
Reporter

Updated

3 years ago
Flags: needinfo?(felash)
Maybe related: bug 1099234

I felt like there was some other bug in this area as well, but I can't find it now.
Assignee: nobody → jdescottes
Severity: normal → enhancement
Priority: -- → P2
Rediscussed this bug in triage and there are several ways we could improve the situation here.  

(In reply to Julien Wajsberg [:julienw] from comment #4)
> the inherited information is displayed, but it's struck

I think this still makes sense, as the value is indeed overridden by "inherited". IMO we should focus on making it easier to discover the computed value for a user looking at the "inherited" value. Some ideas:
- show an indicator next to a value if it differs from the computed value, with a tooltip showing the computed value
- make the font preview tooltip work on "inherit" values
- make the font preview tooltip work font properties (only works on font-family at the moment)
- add the font name in the font preview tooltip

I will open bugs to work on the items listed above.
Duplicate of this bug: 1013829
See Also: → 1378519
(In reply to Julian Descottes [:jdescottes] from comment #6)
> (In reply to Julien Wajsberg [:julienw] from comment #4)
> > the inherited information is displayed, but it's struck
> 
> I think this still makes sense, as the value is indeed overridden by
> "inherited". IMO we should focus on making it easier to discover the
> computed value for a user looking at the "inherited" value. Some ideas:
> - show an indicator next to a value if it differs from the computed value,
> with a tooltip showing the computed value

For reference, this was filed as bug 1306054.

> - make the font preview tooltip work on "inherit" values

The same applies to "initial" and "unset" values as mentioned in bug 1013829, so I've broadened the summary accordingly.
The related font family can be retrieved via DOMUtils.getUsedFontFaces() (as long as it is not overwritten somewhere else).

> - make the font preview tooltip work font properties (only works on
> font-family at the moment)

I've created bug 1378519 for this.

> - add the font name in the font preview tooltip

For reference, this was filed as bug 1305986.

Sebastian
Summary: [CSS Rules Inspector] "inherit" values should show what is inherited → Show font family tooltips for 'inherit', 'unset' and 'initial' font family values

Updated

Last year
Product: Firefox → DevTools
Assignee: jdescottes → nobody
You need to log in before you can comment on or make changes to this bug.