1488031 - DevTools Variable Fonts Inspector table col widths should be adjustable

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Dave Crossland]

Attachment: 2018-08-28 ffox vf editor.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3534.0 Safari/537.36

Steps to reproduce:

Looked at https://www.axis-praxis.org/specimens/decovar and then loaded the devtools Variable Fonts Editor, and saw axes information in a table.


Actual results:

The axis name col's width is are not adjustable, so when the cell contents are long, it looks bad, and there is no way to make it look good. 

Also, there is no col showing the axes tag (the 4 char label). 


Expected results:

I can adjust table col widths

Comment 1

[Razvan Caliman [:rcaliman]]

Thanks for reporting, Dave!

The axis labels are not in a table structure, therefore there is no column to be resized by the user. I assume the issue is that longer labels get broken up onto multiple lines. Perhaps we can adjust the flex-grow of the label such that it takes up proportionally more space as it becomes available, thus giving a chance for longer labels to show up on one line. Regarding showing the axis tag name, would a tooltip visible on hover over the label suffice? This would help conserve space for narrower panel sizes where the range input slider could become unreasonably short.

Cursory exploration of available variable fonts showed us that most of them (so far) only define a very small number of axes and their labels tend to be short. Decovar is a demo font with an unusual number of custom axes.

Comment 2

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1488031 - Font editor: show labels for min and max values for axes on hover and focus. r=gl

Comment 3

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1488031 - Trim axis labels, show variation axis tag when available. r=gl

Comment 4

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

Comment on attachment 9007194 [details]
Bug 1488031 - Font editor: show labels for min and max values for axes on hover and focus. r=gl

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

Comment 5

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

Comment on attachment 9007195 [details]
Bug 1488031 - Trim axis labels, show variation axis tag when available. r=gl

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

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/075ad27d064b
Trim axis labels, show variation axis tag when available. r=gl

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ee4b2d3fd97a
Font editor: show labels for min and max values for axes on hover and focus. r=gl

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/11a9019dbafa
acked out changeset ee4b2d3fd97a for failing dt at devtools/client/inspector/fonts/test/browser_fontinspector_editor-font-size-conversion.js on a CLOSED TREE

Comment 9

[Andreea Pavel [:apavel]]

Backed out for failing dt at devtools/client/inspector/fonts/test/browser_fontinspector_editor-font-size-conversion.js

Push that started the failures:  https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=ee4b2d3fd97ab313008588dd78d0c2766158836b

Failure log: https://treeherder.mozilla.org/logviewer.html#?job_id=199097082&repo=autoland&lineNumber=3114

Backout: https://hg.mozilla.org/integration/autoland/rev/11a9019dbafa1b066bcbcace23ddbbdcfdd4d9a5

Comment 10

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/075ad27d064b
https://hg.mozilla.org/mozilla-central/rev/ee4b2d3fd97a
https://hg.mozilla.org/mozilla-central/rev/11a9019dbafa

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cacbaf825e3a
Font editor: show labels for min and max values for axes on hover and focus. r=gl

Comment 12

[Razvan Caliman [:rcaliman]]

Reopened and pushed a fix for the failing test.

Comment 13

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/cacbaf825e3a

Comment 14

[Razvan Caliman [:rcaliman]]

Comment on attachment 9007195 [details]
Bug 1488031 - Trim axis labels, show variation axis tag when available. r=gl

Approval Request Comment
[Feature/Bug causing the regression]:
https://bugzilla.mozilla.org/show_bug.cgi?id=1488031

[User impact if declined]:
Labels for variable font axis names can span multiple lines causing a jarring layout of the new Font Editor.

[Is this code covered by automated tests?]:
Yes

[Has the fix been verified in Nightly?]:
Yes

[Needs manual test from QE? If yes, steps to reproduce]: 
No

[List of other uplifts needed for the feature/fix]:
None

[Is the change risky?]:
No

[Why is the change risky/not risky?]:
It fixes an issue with CSS layout for a new tool.

[String changes made/needed]:
None.

Comment 15

[Razvan Caliman [:rcaliman]]

Comment on attachment 9007194 [details]
Bug 1488031 - Font editor: show labels for min and max values for axes on hover and focus. r=gl

Approval Request Comment
[Feature/Bug causing the regression]:
https://bugzilla.mozilla.org/show_bug.cgi?id=1488031

[User impact if declined]:
The DevTools Font Editor UI will lack additional information about min/max values for variable font axes.

[Is this code covered by automated tests?]:
Yes

[Has the fix been verified in Nightly?]:
Yes

[Needs manual test from QE? If yes, steps to reproduce]: 
No

[List of other uplifts needed for the feature/fix]:
This patch must be applied *after* the other patch attached to this bug (Bug 1488031 - Trim axis labels, show variation axis tag when available. r=gl)

[Is the change risky?]:
No

[Why is the change risky/not risky?]:
This patch adds additional UI information relevant to users.

[String changes made/needed]:
None

Comment 16

[Pascal Chevrel:pascalc (PTO until April 26)]

Comment on attachment 9007194 [details]
Bug 1488031 - Font editor: show labels for min and max values for axes on hover and focus. r=gl

Bug fix a new 63 feature affecting only devtools, uplift accepted for 63 beta 11, thanks.

Comment 17

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/4b4c5b5fe54d
https://hg.mozilla.org/releases/mozilla-beta/rev/8834420ffad4