Sections about rendered fonts and families are confusing

VERIFIED FIXED in Firefox 63

Status

enhancement
P2
normal
VERIFIED FIXED
11 months ago
9 months ago

People

(Reporter: mbalfanz, Assigned: rcaliman)

Tracking

unspecified
Firefox 63
Dependency tree / graph

Firefox Tracking Flags

(firefox63 verified, firefox64 verified)

Details

Attachments

(8 attachments, 2 obsolete attachments)

196.87 KB, image/png
Details
218.92 KB, image/png
Details
46 bytes, text/x-phabricator-request
Details | Review
46 bytes, text/x-phabricator-request
Details | Review
46 bytes, text/x-phabricator-request
Details | Review
46 bytes, text/x-phabricator-request
Details | Review
46 bytes, text/x-phabricator-request
Details | Review
46 bytes, text/x-phabricator-request
Details | Review
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
Posted file show all fonts used on page (obsolete) —
MozReview-Commit-ID: 2AapXAgeCCe
Posted file group font faces by family name (obsolete) —
MozReview-Commit-ID: 7SlV9YOR73d

Depends on D3531
> 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).
Posted image 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.
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.)
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?
Attachment #9001688 - Attachment is obsolete: true
Attachment #9001689 - Attachment is obsolete: true
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.
Removes logic pertaining to filtering by members of CSS font-family declaration.
This changes the structure of the used fonts list. It groups fonts by family name and removes URL and copy capabilities.

Depends on D3805
- 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 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.
Attachment #9002523 - Flags: review+
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.
Attachment #9002488 - Flags: review+
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.
Attachment #9002486 - Flags: review+
Comment on attachment 9002790 [details]
Bug 1483929 - (Part 4) Group used fonts by family name. r=gl

Gabriel [:gl] (ΦωΦ) has approved the revision.
Attachment #9002790 - Flags: review+
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.
Attachment #9002793 - Flags: review+
Adjusts tests in response to grouping of font names by font family.

Depends on D3895
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.
Attachment #9003098 - Flags: review+
Pushed by rcaliman@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/4a4b4a9b58d3
(Part 1) Remove Rendered Fonts accordion; Add All Fonts accordion for Font Editor. r=gl
Pushed by rcaliman@mozilla.com:
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
Pushed by rcaliman@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/ab010295820f
(Part 3) Revert to showing all used fontsfonts used on the selected element. r=gl
Pushed by rcaliman@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/ec5152902eb7
(Part 4) Group used fonts by family name. r=gl
Pushed by rcaliman@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/15ae8f3946b4
(Part 5) Reuse FontName component for in-context font highlighting. r=gl
Pushed by rcaliman@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c80c839f05d1
(Part 6) Update tests to account for the restructured used fonts section. r=gl
QA Contact: catalin.sasca
Flags: qe-verify+
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).
Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.