Closed Bug 1536237 Opened 5 years ago Closed 5 years ago

Add Letter Spacing to the fonts panel


(DevTools :: Inspector, enhancement, P1)



(firefox68 fixed)

Firefox 68
Tracking Status
firefox68 --- fixed


(Reporter: contact, Assigned: rcaliman)


(Blocks 1 open bug)


(Keywords: dev-doc-needed)


(4 files)

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.

Ever confirmed: true
Priority: -- → P2
Assignee: nobody → rcaliman
Blocks: 1280059
Priority: P2 → P1
  • 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)

Attachment #9053946 - Attachment description: Bug 1536237 - Add support for letter spacing to Font Editor. → Bug 1536237 - Add support for letter spacing in Font Editor.
Pushed by
Add support for letter spacing in Font Editor. r=gl
Backout by
Backed out changeset e78a1f8b81db for ES lint failure in /builds/worker/checkouts/gecko/devtools/client/inspector/fonts/fonts.js CLOSED TREE

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.

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.

Flags: needinfo?(rcaliman)
Pushed by
Add support for letter spacing in Font Editor. r=gl
Refactor unit conversion in Font Editor. r=pbro
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
Attached image 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.

Component: Inspector: Fonts → Inspector
You need to log in before you can comment on or make changes to this bug.