1431600 - Style unused fonts similar to unset css variables

Status: RESOLVED WONTFIX

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[Gabriel Luong [:gl] (ΦωΦ)]

Currently, we style the used font with an underline. Typically, we use color contrast to highlight matches. An example is our rule selectors. For CSS variables, we also use grey to indicate that a variable is not used or unset. 

I am proposing that we use the same styling for the font family matching instead of the underline.

Comment 1

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Screen Shot 2018-01-18 at 9.54.18 PM.png

Comment 2

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Bug 1431600 - Style unused fonts similar to unset css variables.

Review commit: https://reviewboard.mozilla.org/r/214220/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/214220/

Comment 3

[Patrick Brosset <:pbro>]

When we implemented bug 994559, the reason we chose to underline fonts instead of greying them out was because there may be cases like this:

font-family: foo, bar;

if none of these fonts exist, the browser will fallback to something else, and everything will be greyed-out here.
Is this a problem? I'm not sure. I think there's a chance it's confusing.
At the same time, this case might not happen very often. So I think this might better decided by Victoria ultimately.

Comment 4

[Victoria Wang [:victoria]]

I'm wondering if we need four states:

Font being used: magenta with underline
Font not being used, but exists in this computer: magenta, no underline
Font doesn't exist: gray
None of the fonts specified exist: gray, with little info icon that explains this

(after I wrote this, I found this comment in which :sebo suggests the same thing re: info icon :) https://bugzilla.mozilla.org/show_bug.cgi?id=994559#c15 )

I thought about the idea of graying anything that's unused — in some cases I think there would be too much gray, both in selectors and in the font names, e.g. when there's a group of many selectors as seen on bugzilla:

body, td, th, input, select, option, optgroup, button, .text_input {
    font-family: "Fira Sans", "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

Also, unused status for a font is less of an error-like state than undefined css variables, so maybe the gray is a little strong as an indicator.

However, I feel it would be super useful to know about the case of fonts not existing, and *none* of the fonts existing also seems useful to know.

Comment 5

[Patrick Brosset <:pbro>]

(In reply to Victoria Wang [:victoria] from comment #4)
> Font not being used, but exists in this computer: magenta, no underline
> Font doesn't exist: gray
I don't think that we can currently differentiate those 2 cases. We should look at the platform API we use for this, to see whether it could be extended to provide this information. But, for now at least, we can only know which font(s) was(were) used given some range on a webpage. So if there were more in the font-family property, then we can't know if they weren't used because they don't exist, or if they do but another font was used instead.

Comment 6

[Victoria Wang [:victoria]]

Ah, I see, that's too bad. I guess I would continue with the current styling then, due to the reasons I mentioned (it would be too much gray, and looks a little too much like something's wrong). It's less like a unset variable and more like the styles that have been overridden, though a strikeout styling seems stronger than necessary too.

Comment 7

[Patrick Brosset <:pbro>]

Comment on attachment 8943864 [details]
Bug 1431600 - Style unused fonts similar to unset css variables.

Based on Victoria's comment, let's cancel the review and WONTFIX the bug.