1536237 - Add Letter Spacing to the fonts panel

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P1)

Description

[Nicolaos Skimas]

As best I can see, the fonts panel currently shows font-size, line-spacing, font-weight, font-family, and the italics toggle. It'd be awesome if it could include the selected element's letter-spacing value as well.

Comment 1

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1536237 - Add support for letter spacing in Font Editor.

• Reads the value for the letter-spacing CSS property and shows it in the Font Editor. When it is default, show the "normal" identifier. As soon as the user tries to edit it using the value slider, switch to an em-based value.

• Tweaks the unit conversion method to support letter-spacing: using correct reference node for em units, returning high-precision results even for pixels (allow sub-pixel precision)

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e78a1f8b81db
Add support for letter spacing in Font Editor. r=gl

Comment 3

[Stefan Hindli [:stefan_hindli]]

Backed out changeset e78a1f8b81db (Bug 1536237) for ES lint failure in /builds/worker/checkouts/gecko/devtools/client/inspector/fonts/fonts.js CLOSED TREE

https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception&classifiedState=unclassified&selectedJob=237301313

https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=237301313&repo=autoland&lineNumber=272

Comment 4

[Pulsebot]

Backout by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d24a6d9f361d
Backed out changeset e78a1f8b81db for ES lint failure in /builds/worker/checkouts/gecko/devtools/client/inspector/fonts/fonts.js CLOSED TREE

Comment 5

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1536237 - Refactor unit conversion in Font Editor. r=pbro

Depends on D25087
Simplified the convertUnits() method by externalizing the logic to get the reference node, reference box and reference font size value used when converting between units.

The result is easier to read, but more importantly it reduces the cyclomatic complexity which trips the ESlint "complexity" rule and triggers a backout.

Comment 6

[Razvan Caliman [:rcaliman]]

This is failing because code in the method to convert between units trips the "complexity" rule of ESlint.
Rewriting the rule to reduce its complexity and trying again.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ef359a791d6a
Add support for letter spacing in Font Editor. r=gl
https://hg.mozilla.org/integration/autoland/rev/3239894a7402
Refactor unit conversion in Font Editor. r=pbro

Comment 8

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/ef359a791d6a
https://hg.mozilla.org/mozilla-central/rev/3239894a7402

Comment 9

[Razvan Caliman [:rcaliman]]

Attachment: Video demo of letter spacing UI control in Font Editor

Comment 10

[Patrick Brosset <:pbro>]

Attachment: letter-spacing.gif

Also attaching a demo GIF, for the sake of having an image we can include in the firefox-dev newsletter later today.