1474731 - Font Editor: A few more minor visual tweaks (mainly spacing and dark mode)

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P2)

Description

[Victoria Wang [:victoria]]

The font editor is looking great! I finally got a chance to go into the toolbox and poke around a bit - I found a few more spacing and color suggestions to tighten things up and make it look nicer in dark mode. Let me know if you have any questions!

.font-control-family {
padding-top: 1em;
padding-bottom: .8em; //More padding is needed when Unused Fonts is visible. However, when it's not there, there seems to be .6em extra spacing here (from font-control-box?). Not sure what the ideal solution is :).

.font-origin { 
//I would match the top spacing of the font name, so something like:
margin-top: -.25em;
//Also it would benefit from being a touch lighter: 
color: #939393;
//Btw, should we also remove the "https://www."?

.font-value-slider[name="font-weight"] {
background-size: calc(12.5% - var(--notch-size) / 2) 6px;
// the 7px notches look a bit too intense when there are so many notches
// could we make it so that the first and last notch are flush with the beginning/end of the track?

tighter input fields:
margin-top: -1px;
padding-top: 0;
padding-bottom: 0;
width: 46px; //On my screen if we change width from 60px to 46px it still fits 5 wide digits + period comfortably

.font-unit-select
padding: 2px 0;
width: 53px; // still enough room if longest option is rem

I realized the slider thumbs no longer turn blue when focused - was this intended? I loved having a focus indicator here. If that all-blue fill was too much, we could give them a 1px blue50 border when focused.

#font-editor summary {
    margin-bottom: .4em;

.font-family-unused {
    margin-left: 1.15em;

.font-origin .copy-icon
fill: #737373;

.font {
border-width: 0 0 1px 0;


//------------ everything below is for dark mode only

.font-name, .font origin {
color: var(--theme-comment);

text input fields: quick fix for dark mode:
background: #38383d;
border: 2px solid #38383d;
color: #b1b1b3;

<select> - in the future it would be great if this could be dark like some of the other dropdowns in DevTools, but the system widget is fine for now

.font-value-slider::-moz-range-thumb {
    background: var(--grey-40);

.font-value-slider::-moz-range-track {
    background: var(--grey-50);

.font-value-slider[name="font-weight"] {
    background-image: linear-gradient(90deg, var(--grey-50) var(--notch-size), transparent 0);

^ same thumb/track colors for the italic widget-off styling

Comment 1

[Victoria Wang [:victoria]]

One more thing - I think it will look better if the font control rows have slightly less top/bottom spacing, e.g.:

.font-control {
    padding: 3px 18px;

Comment 2

[Florens Verschelde :fvsch]

For the record, the <select> element's button can be styled easily in Firefox and other browsers.

.my-select {
  -moz-appearance: none;
  border: none;
  color: white
  background: black;
  /* etc */
}

Comment 3

[Razvan Caliman [:rcaliman]]

I tried to keep the system UI for these controls, but inconsistencies in spacing between the unit selct and the "Instance" select are jarring, especially on Windows (and this is after a lot of fiddling with them to make them _almost_ align on macOS). They should be replaced with custom styling which gives more control over alignment as suggested by Florens.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d6fa0293fe15
Custom styles for select elements in font editor. r=gl

Comment 5

[Tiberius Oros[:tiberius_oros]]

Backed out changeset d6fa0293fe15 (bug 1474731) for build bustages

Backout:
https://hg.mozilla.org/integration/autoland/rev/7fa9542af27771814577a9825c3c378841979476

Push with failures:
https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=d6fa0293fe155625da30bb6824074e267d95ef68

Failure log file:
https://treeherder.mozilla.org/logviewer.html#?job_id=193829142&repo=autoland&lineNumber=38293

Comment 6

[Razvan Caliman [:rcaliman]]

Attachment: Bug 1474731 - Custom styles for select elements in font editor. r=gl

MozReview-Commit-ID: GvDlrCdYfkL

Bug 1474731 - Misc styling tweaks for font editor. r=gl

MozReview-Commit-ID: IVQHbjrXtEl

Bug 1474731 - Dark theme for font editor. r=gl

MozReview-Commit-ID: 9dqTa6KXA1E

Comment 7

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

Comment on attachment 8999882 [details]
Bug 1474731 - Custom styles for select elements in font editor. r=gl

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

Comment 8

[Razvan Caliman [:rcaliman]]

The culprit for the build failure is apparently a file which I duplicated elsewhere. 
It seems that having files with identical contents is illegal:

```
ERROR: The following duplicated files are not allowed:
INFO -  package> Nightly.app/Contents/Resources/browser/chrome/devtools/content/netmonitor/src/assets/icons/drop-down.svg
INFO -  package> Nightly.app/Contents/Resources/browser/chrome/devtools/skin/images/select-arrow.svg
```

I'll follow-up with a patch to correct this.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8f6dd1a7738b
Custom styles for select elements in font editor. r=gl

Comment 10

[Razvan Caliman [:rcaliman]]

Try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=0b0076c2617d9406172bab5618a3940477b8be89&selectedJob=194065735

Comment 11

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/8f6dd1a7738b