1483929 - Sections about rendered fonts and families are confusing

Status: VERIFIED FIXED

(DevTools :: Inspector, enhancement, P2)

Description

[Martin Balfanz [:mbalfanz]]

Early user feedback suggests that the font editor sections seem redundant and confusing.  It is not clear which section is showing what is rendered, sections often show the same.  It's also unclear why the same font family is shown multiple times sometimes.

Razvan and I developed a list of adjustments we want to make to simplify the UI:

1. Rename the "Family" section to "Used Fonts"
2. Change the section to show all fonts used to render content in the selected node, not just the ones that are declared.
3. Remove the "Rendered Fonts" panel as this will be obsolete with step 2
4. Rename "Other fonts in page" to "All fonts in page" and remove its filtering to show all fonts that are used and / or declared in the whole page
5. In the "Used Fonts" section, group font-faces together by font-family and display the rendered font-faces as comma separated list
6. Remove the URL/System information and copy icon in the "Used Fonts" section.  Instead, show this information on hover for every font-face.
7. Remove "Unused font families" section
8. Add a label to each section for the editor UI (specifically slider/controls)

Bonus: Apply font rendering highlight on hover for each font-face instead of the font-family.


As a reminder why 'used fonts' is broader than the font-family declaration, see Bug 1472116 for details

Comment 1

[Razvan Caliman [:rcaliman]]

Attachment: show all fonts used on page

MozReview-Commit-ID: 2AapXAgeCCe

Comment 2

[Razvan Caliman [:rcaliman]]

Attachment: group font faces by family name

MozReview-Commit-ID: 7SlV9YOR73d

Depends on D3531

Comment 3

[Florens Verschelde :fvsch]

> 6. Remove the URL/System information and copy icon in the "Used Fonts" section.  Instead, show this information on hover for every font-face.

Two objections to this plan:

a. Not all users will be able to access the information (requires a pointing device and fine motor control).
b. In my work in a web agency we often use the current font inspector to check if a web font was correctly loaded and used. Having the 'system' or URL information available at a glance does help.

Maybe not deal-breakers, and clarity of the overall information takes precedence over my second point (b).

Comment 4

[Martin Balfanz [:mbalfanz]]

Attachment: prototype-v1

Thanks for raising those concerns, Florens.

Attached is a screenshot of the first prototype.  The functionality you miss for point b would still be available in the "All fonts on page" section, where you have a full overview of all fonts incl. URL vs. system and @font-face code block.  Do you think that would support your workflow?

To your point a, that is a valid concern that I wouldn't rely on it if that was the only way to access the information.  I will bring this back to the discussion board.

Comment 5

[Florens Verschelde :fvsch]

Attachment: fonts-format-info.png

It looks pretty good.

Alternative label for "Fonts Used", since this is the "Fonts" panel already: "Used" or "In Use". Might work better with localization too.

I think it works for my use case, but could work even better if the font format was easily visible. And look, if you add it you can use "system" as a format.
(Just a quick suggestion, not 100% sure it works.)

Comment 6

[Victoria Wang [:victoria]]

Love the direction this is going in! A few thoughts:

- I'd use the label "Fonts in Use" because I think it sounds a tad more clear. Having the redundant "Fonts" in there seems worth it because names won't necessarily be recognizable as font names.

- Florens' badges to show format/system seems nice!

- The URL in tooltip is interesting as a compact way to check the resource. Re: the try build, I found the 'open in new' icons confusing - what if we replaced that with the format/system badge?

Comment 7

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1483929 - (Part 1) Remove Rendered Fonts accordion; Add All Fonts accordion for Font Editor. r=gl

This patch replaces the Other Fonts and Rendered Fonts accordions with a single All Fonts accordion while the Font Editor pref is on.
When thhe pref for the Font Editor is off, the Element Fonts and Other Fonts accordions are kept until we deprecate the old Font Inspector code.

Comment 8

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1483929 - (Part 2) Update tests to account for removal of Rendered Fonts and Other Fonts, and addition of All Fonts accordccordions. r=gl

Depends on D3797

Comment 9

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1483929 - (Part 3) Revert to showing all used fontsfonts used on the selected element. r=gl

Removes logic pertaining to filtering by members of CSS font-family declaration.

Comment 10

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1483929 - (Part 4) Group used fonts by family name. r=gl

This changes the structure of the used fonts list. It groups fonts by family name and removes URL and copy capabilities.

Depends on D3805

Comment 11

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1483929 - (Part 5) Reuse FontName component for in-context font highlighting. r=gl

- Extracts a FontName component that's reused in the All fonts accordion and Fonts used list.
- Removes FontMeta component since it's no longer reused.
- Introcudes a FontOrigin component to encapsulate URI copying behavior.

Comment 12

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

Comment on attachment 9002523 [details]
Bug 1483929 - (Part 3) Revert to showing all used fontsfonts used on the selected element. r=gl

Gabriel [:gl] (ΦωΦ) has approved the revision.

Comment 13

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

Comment on attachment 9002488 [details]
Bug 1483929 - (Part 2) Update tests to account for removal of Rendered Fonts and Other Fonts, and addition of All Fonts accordccordions. r=gl

Gabriel [:gl] (ΦωΦ) has approved the revision.

Comment 14

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

Comment on attachment 9002486 [details]
Bug 1483929 - (Part 1) Remove Rendered Fonts accordion; Add All Fonts accordion for Font Editor. r=gl

Gabriel [:gl] (ΦωΦ) has approved the revision.

Comment 15

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

Comment on attachment 9002790 [details]
Bug 1483929 - (Part 4) Group used fonts by family name. r=gl

Gabriel [:gl] (ΦωΦ) has approved the revision.

Comment 16

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

Comment on attachment 9002793 [details]
Bug 1483929 - (Part 5) Reuse FontName component for in-context font highlighting. r=gl

Gabriel [:gl] (ΦωΦ) has approved the revision.

Comment 17

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1483929 - (Part 6) Update tests to account for the restructured used fonts section. r=gl

Adjusts tests in response to grouping of font names by font family.

Depends on D3895

Comment 18

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

Comment on attachment 9003098 [details]
Bug 1483929 - (Part 6) Update tests to account for the restructured used fonts section. r=gl

Gabriel [:gl] (ΦωΦ) has approved the revision.

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4a4b4a9b58d3
(Part 1) Remove Rendered Fonts accordion; Add All Fonts accordion for Font Editor. r=gl

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9b918e1a1de5
(Part 2) Update tests to account for removal of Rendered Fonts and Other Fonts, and addition of All Fonts accordccordions. r=gl

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ab010295820f
(Part 3) Revert to showing all used fontsfonts used on the selected element. r=gl

Comment 22

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ec5152902eb7
(Part 4) Group used fonts by family name. r=gl

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/15ae8f3946b4
(Part 5) Reuse FontName component for in-context font highlighting. r=gl

Comment 24

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c80c839f05d1
(Part 6) Update tests to account for the restructured used fonts section. r=gl

Comment 25

[Razvan Caliman [:rcaliman]]

Try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=63d728a9c6ac18552bedc86315fca6f70a09f552

Comment 26

[Tiberius Oros[:tiberius_oros]]

https://hg.mozilla.org/mozilla-central/rev/4a4b4a9b58d3
https://hg.mozilla.org/mozilla-central/rev/9b918e1a1de5
https://hg.mozilla.org/mozilla-central/rev/ab010295820f
https://hg.mozilla.org/mozilla-central/rev/ec5152902eb7
https://hg.mozilla.org/mozilla-central/rev/15ae8f3946b4
https://hg.mozilla.org/mozilla-central/rev/c80c839f05d1

Comment 27

[Catalin Sasca, Desktop Test Engineering [:csasca]]

I have verified the mentioned adjustments from Comment 0, and they are present on Firefox Beta 63.0b12 and latest Nightly 64.0a1 (2018-10-7).