1462385 - Font editor: improve input styling to match designs

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[Razvan Caliman [:rcaliman]]

Designs: https://mozilla.invisionapp.com/share/Z3F7OGCTK#/screens/279202133

Comment 1

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1462385 - Add notches to Weight slider in Font Editor.

Review commit: https://reviewboard.mozilla.org/r/244706/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/244706/

Comment 2

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1462385 - Add styling to Italic toggle in Font Editor.

Review commit: https://reviewboard.mozilla.org/r/244708/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/244708/

Comment 3

[Patrick Brosset <:pbro>]

Comment on attachment 8976613 [details]
Bug 1462385 - Add notches to Weight slider in Font Editor.

https://reviewboard.mozilla.org/r/244706/#review250754

Cool. Love using linear-gradients for this!

Comment 4

[Patrick Brosset <:pbro>]

Comment on attachment 8976614 [details]
Bug 1462385 - Add styling to Italic toggle in Font Editor.

https://reviewboard.mozilla.org/r/244708/#review251056

The CSS code is very well commented and the feature works on both Mac and Windows fine. So looks good to me.

Comment 5

[Patrick Brosset <:pbro>]

Attachment: control-size.png

One comment about the UI in general though (and this is on Windows with a HiDPI monitor): the UI seems "big". 
The text is the right size. But if you compare the rule-view (where everything is pretty small, compact, thin), and the fonts editor UI (where the slider lines are thicker, and the thumbs quite big too), the difference is striking.

That's for another bug anyway, and I know we've not spent a lot of time polishing this yet. But to keep in mind before rolling this out.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b06d48ccb138
Add notches to Weight slider in Font Editor. r=pbro
https://hg.mozilla.org/integration/autoland/rev/4fb6bc1d3356
Add styling to Italic toggle in Font Editor. r=pbro

Comment 7

[Andrei Ciure[:aciure]]

https://hg.mozilla.org/mozilla-central/rev/b06d48ccb138
https://hg.mozilla.org/mozilla-central/rev/4fb6bc1d3356