Bug 1474731 - Custom styles for select elements in font editor. r=gl
authorRazvan Caliman <rcaliman@mozilla.com>
Wed, 15 Aug 2018 12:11:17 +0000
changeset 486720 8f6dd1a7738bf26cb62ed917e844d37a9aa39eab
parent 486719 f2d4f411057dae5f1e8c88982a0fa4a0015dbcd7
child 486721 e7b659d978e1a945a3de7859d6196e48d9422557
push id9719
push userffxbld-merge
push dateFri, 24 Aug 2018 17:49:46 +0000
treeherdermozilla-beta@719ec98fba77 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1474731
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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 Differential Revision: https://phabricator.services.mozilla.com/D3232
devtools/client/inspector/fonts/components/FontEditor.js
devtools/client/inspector/fonts/components/FontPropertyValue.js
devtools/client/inspector/fonts/test/browser_fontinspector_editor-values.js
devtools/client/inspector/fonts/test/head.js
devtools/client/jar.mn
devtools/client/netmonitor/src/assets/icons/drop-down.svg
devtools/client/netmonitor/src/assets/styles/Toolbar.css
devtools/client/netmonitor/src/assets/styles/variables.css
devtools/client/responsive.html/images/moz.build
devtools/client/responsive.html/images/select-arrow.svg
devtools/client/responsive.html/index.css
devtools/client/themes/fonts.css
devtools/client/themes/images/select-arrow.svg
devtools/client/themes/variables.css
--- a/devtools/client/inspector/fonts/components/FontEditor.js
+++ b/devtools/client/inspector/fonts/components/FontEditor.js
@@ -53,54 +53,48 @@ class FontEditor extends PureComponent {
     } else if (delta <= 100) {
       step = 0.1;
     }
 
     return step.toString();
   }
 
   /**
-   * Get a container with the rendered FontPropertyValue components with editing controls
+   * Get an array of FontPropertyValue components with editing controls
    * for of the given variable font axes. If no axes were given, return null.
    * If an axis has a value in the fontEditor store (i.e.: it was declared in CSS or
    * it was changed using the font editor), use its value, otherwise use the font axis
    * default.
    *
    * @param  {Array} fontAxes
    *         Array of font axis instances
    * @param  {Object} editedAxes
    *         Object with axes and values edited by the user or predefined in the CSS
    *         declaration for font-variation-settings.
-   * @return {DOMNode|null}
+   * @return {Array|null}
    */
   renderAxes(fontAxes = [], editedAxes) {
     if (!fontAxes.length) {
       return null;
     }
 
-    const controls = fontAxes.map(axis => {
+    return fontAxes.map(axis => {
       return FontPropertyValue({
         key: axis.tag,
+        className: "font-control-axis",
+        label: axis.name,
         min: axis.minValue,
         max: axis.maxValue,
-        value: editedAxes[axis.tag] || axis.defaultValue,
-        step: this.getAxisStep(axis.minValue, axis.maxValue),
-        label: axis.name,
         name: axis.tag,
         onChange: this.props.onPropertyChange,
-        unit: null
+        step: this.getAxisStep(axis.minValue, axis.maxValue),
+        unit: null,
+        value: editedAxes[axis.tag] || axis.defaultValue,
       });
     });
-
-    return dom.div(
-      {
-        className: "font-axes-controls"
-      },
-      controls
-    );
   }
 
   renderFamilesNotUsed(familiesNotUsed = []) {
     if (!familiesNotUsed.length) {
       return null;
     }
 
     const familiesList = familiesNotUsed.map(family => {
@@ -252,17 +246,17 @@ class FontEditor extends PureComponent {
         },
         instance.name
       )
     );
 
     // Generate the dropdown.
     const instanceSelect = dom.select(
       {
-        className: "font-control-input",
+        className: "font-control-input font-value-select",
         onChange: (e) => {
           const instance = fontInstances.find(inst => e.target.value === inst.name);
           instance && this.props.onInstanceChange(instance.name, instance.values);
         }
       },
       instanceOptions
     );
 
--- a/devtools/client/inspector/fonts/components/FontPropertyValue.js
+++ b/devtools/client/inspector/fonts/components/FontPropertyValue.js
@@ -12,16 +12,17 @@ const { KeyCodes } = require("devtools/c
 // Milliseconds between auto-increment interval iterations.
 const AUTOINCREMENT_DELAY = 300;
 const UNITS = ["em", "rem", "%", "px", "vh", "vw"];
 
 class FontPropertyValue extends PureComponent {
   static get propTypes() {
     return {
       allowAutoIncrement: PropTypes.bool,
+      className: PropTypes.string,
       defaultValue: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
       label: PropTypes.string.isRequired,
       min: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
       max: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
       name: PropTypes.string.isRequired,
       onChange: PropTypes.func.isRequired,
       showUnit: PropTypes.bool,
       step: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
@@ -283,34 +284,34 @@ class FontPropertyValue extends PureComp
       // The unit conversion function will use a 1-to-1 scale for unrecognized units.
       const options = UNITS.includes(this.props.unit) ?
         UNITS
         :
         UNITS.concat([this.props.unit]);
 
       unitDropdown = dom.select(
         {
-          className: "font-unit-select",
+          className: "font-value-select",
           onChange: this.onUnitChange,
         },
         options.map(unit => {
           return dom.option(
             {
               selected: unit === this.props.unit,
               value: unit,
             },
             unit
           );
         })
       );
     }
 
     return dom.label(
       {
-        className: "font-control",
+        className: `font-control ${this.props.className || ""}`,
       },
       dom.span(
         {
           className: "font-control-label",
         },
         this.props.label
       ),
       dom.div(
--- a/devtools/client/inspector/fonts/test/browser_fontinspector_editor-values.js
+++ b/devtools/client/inspector/fonts/test/browser_fontinspector_editor-values.js
@@ -9,32 +9,22 @@ add_task(async function() {
   await pushPref("devtools.inspector.fonteditor.enabled", true);
   const { inspector, view } = await openFontInspectorForURL(TEST_URI);
   const viewDoc = view.document;
 
   await testDiv(inspector, viewDoc);
   await testNestedSpan(inspector, viewDoc);
 });
 
-function getFontSize(viewDoc) {
-  const number =
-    viewDoc.querySelector("#font-editor .font-value-slider[name=font-size]").value;
-  const units =
-    viewDoc.querySelector(`#font-editor .font-value-slider[name=font-size]
-    ~ .font-unit-select`).value;
-
-  return number + units;
-}
-
 async function testDiv(inspector, viewDoc) {
   await selectNode("DIV", inspector);
-  const fontSize = getFontSize(viewDoc);
+  const { value, unit } = getPropertyValue(viewDoc, "font-size");
 
-  is(fontSize, "1em", "DIV should be have font-size of 1em");
+  is(value + unit, "1em", "DIV should be have font-size of 1em");
 }
 
 async function testNestedSpan(inspector, viewDoc) {
   await selectNode(".nested-span", inspector);
-  const fontSize = getFontSize(viewDoc);
+  const { value, unit } = getPropertyValue(viewDoc, "font-size");
 
-  isnot(fontSize, "1em", "Nested span should not reflect parent's font size.");
-  is(fontSize, "36px", "Nested span should have computed font-size of 36px");
+  isnot(value + unit, "1em", "Nested span should not reflect parent's font size.");
+  is(value + unit, "36px", "Nested span should have computed font-size of 36px");
 }
--- a/devtools/client/inspector/fonts/test/head.js
+++ b/devtools/client/inspector/fonts/test/head.js
@@ -224,18 +224,18 @@ function getFamilyName(fontEl) {
  */
 function getPropertyValue(viewDoc, name) {
   const selector = `#font-editor .font-value-slider[name=${name}]`;
   return {
     // Ensure value input exists before querying its value
     value: viewDoc.querySelector(selector) &&
            parseFloat(viewDoc.querySelector(selector).value),
     // Ensure unit dropdown exists before querying its value
-    unit: viewDoc.querySelector(selector + ` ~ .font-unit-select`) &&
-          viewDoc.querySelector(selector + ` ~ .font-unit-select`).value
+    unit: viewDoc.querySelector(selector + ` ~ .font-value-select`) &&
+          viewDoc.querySelector(selector + ` ~ .font-value-select`).value
   };
 }
 
 /**
  * Wait for a predicate to return a result.
  *
  * @param  {Function} condition
  *         Invoked every 10ms for a maximum of 500 retries until it returns a truthy
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -259,16 +259,17 @@ devtools.jar:
     skin/images/security-state-weak.svg (themes/images/security-state-weak.svg)
     skin/images/diff.svg (themes/images/diff.svg)
     skin/images/import.svg (themes/images/import.svg)
     skin/images/pane-collapse.svg (themes/images/pane-collapse.svg)
     skin/images/pane-expand.svg (themes/images/pane-expand.svg)
     skin/images/help.svg (themes/images/help.svg)
     skin/images/read-only.svg (themes/images/read-only.svg)
     skin/images/reveal.svg (themes/images/reveal.svg)
+    skin/images/select-arrow.svg (themes/images/select-arrow.svg)
 
     # Debugger
     skin/images/debugger/angular.svg (themes/images/debugger/angular.svg)
     skin/images/debugger/arrow.svg (themes/images/debugger/arrow.svg)
     skin/images/debugger/back.svg (themes/images/debugger/back.svg)
     skin/images/debugger/blackBox.svg (themes/images/debugger/blackBox.svg)
     skin/images/debugger/breakpoint.svg (themes/images/debugger/breakpoint.svg)
     skin/images/debugger/close.svg (themes/images/debugger/close.svg)
@@ -296,17 +297,16 @@ devtools.jar:
     content/netmonitor/src/assets/styles/netmonitor.css (netmonitor/src/assets/styles/netmonitor.css)
     content/netmonitor/src/assets/styles/NetworkDetailsPanel.css (netmonitor/src/assets/styles/NetworkDetailsPanel.css)
     content/netmonitor/src/assets/styles/RequestList.css (netmonitor/src/assets/styles/RequestList.css)
     content/netmonitor/src/assets/styles/StatisticsPanel.css (netmonitor/src/assets/styles/StatisticsPanel.css)
     content/netmonitor/src/assets/styles/StatusBar.css (netmonitor/src/assets/styles/StatusBar.css)
     content/netmonitor/src/assets/styles/Toolbar.css (netmonitor/src/assets/styles/Toolbar.css)
     content/netmonitor/src/assets/styles/variables.css (netmonitor/src/assets/styles/variables.css)
     content/netmonitor/src/assets/icons/play.svg (netmonitor/src/assets/icons/play.svg)
-    content/netmonitor/src/assets/icons/drop-down.svg (netmonitor/src/assets/icons/drop-down.svg)
     content/netmonitor/index.html (netmonitor/index.html)
 
     # Application panel
     content/application/index.html (application/index.html)
 
     # Devtools-components
     skin/images/devtools-components/arrow.svg (themes/images/devtools-components/arrow.svg)
 
--- a/devtools/client/netmonitor/src/assets/styles/Toolbar.css
+++ b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
@@ -75,17 +75,17 @@
 
 .devtools-button.devtools-har-button {
   margin: 0 0 0 2px;
   padding: 0;
 }
 
 /* style for dropdown button */
 .devtools-drop-down-button {
-  background-image: var(--drop-down-icon-url)  !important;
+  background-image: var(--select-arrow-image)  !important;
   background-repeat: no-repeat !important;
   margin-inline-start: 6px;
   fill: var(--theme-toolbar-photon-icon-color);
   -moz-context-properties: fill;
 }
 
 /* style for title holder inside a dropdown button */
 .devtools-drop-down-button .title {
--- a/devtools/client/netmonitor/src/assets/styles/variables.css
+++ b/devtools/client/netmonitor/src/assets/styles/variables.css
@@ -37,17 +37,16 @@
 }
 
 :root {
   --primary-toolbar-height: 29px;
 
   /* Icons */
   --play-icon-url: url("chrome://devtools/content/netmonitor/src/assets/icons/play.svg");
   --pause-icon-url: url("chrome://devtools/skin/images/pause.svg");
-  --drop-down-icon-url: url("chrome://devtools/content/netmonitor/src/assets/icons/drop-down.svg");
 
   /* HTTP status codes */
   --status-code-color-1xx: var(--theme-highlight-blue);
   --status-code-color-2xx: var(--theme-highlight-green);
   --status-code-color-3xx: transparent;
   --status-code-color-4xx: var(--theme-highlight-pink);
   --status-code-color-5xx: var(--theme-highlight-red);
 }
--- a/devtools/client/responsive.html/images/moz.build
+++ b/devtools/client/responsive.html/images/moz.build
@@ -3,11 +3,10 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
     'grippers.svg',
     'rotate-viewport.svg',
     'screenshot.svg',
-    'select-arrow.svg',
     'touch-events.svg',
 )
deleted file mode 100644
--- a/devtools/client/responsive.html/images/select-arrow.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg"
-     width="16" height="16" viewBox="0 0 16 16">
-  <path fill="context-fill" d="M7.9 16.3c-.3 0-.6-.1-.8-.4l-4-4.8c-.2-.3-.3-.5-.1-.8.1-.3.5-.3.9-.3h8c.4 0 .7 0 .9.3.2.4.1.6-.1.9l-4 4.8c-.2.3-.5.3-.8.3zM7.8 0c.3 0 .6.1.7.4L12.4 5c.2.3.3.4.1.7-.1.4-.5.3-.8.3H3.9c-.4 0-.8.1-.9-.2-.2-.4-.1-.6.1-.9L7 .3c.2-.3.5-.3.8-.3z"/>
-</svg>
-
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -7,27 +7,25 @@
 
 .theme-light {
   --rdm-box-shadow: 0 4px 4px 0 rgba(155, 155, 155, 0.26);
   --submit-button-active-background-color: rgba(0,0,0,0.12);
   --submit-button-active-color: var(--theme-body-color);
   --viewport-color: #999797;
   --viewport-hover-color: var(--theme-body-color);
   --viewport-active-color: #3b3b3b;
-  --viewport-selection-arrow: url("./images/select-arrow.svg");
 }
 
 .theme-dark {
   --rdm-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
   --submit-button-active-background-color: var(--theme-toolbar-hover-active);
   --submit-button-active-color: var(--theme-selection-color);
   --viewport-color: #c6ccd0;
   --viewport-hover-color: #dde1e4;
   --viewport-active-color: #fcfcfc;
-  --viewport-selection-arrow: url("./images/select-arrow.svg");
 }
 
 * {
   box-sizing: border-box;
 }
 
 :root,
 input,
@@ -166,17 +164,17 @@ select > option.divider {
 
 /**
  * Common background for dropdowns like select and toggle menu
  */
 .toolbar-dropdown,
 .toolbar-dropdown.devtools-button,
 .toolbar-dropdown.devtools-button:hover:not(:empty):not(:disabled):not(.checked) {
   background-color: var(--theme-toolbar-background);
-  background-image: var(--viewport-selection-arrow);
+  background-image: var(--select-arrow-image);
   background-position: 100% 50%;
   background-repeat: no-repeat;
   background-size: 7px;
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 /**
--- a/devtools/client/themes/fonts.css
+++ b/devtools/client/themes/fonts.css
@@ -1,36 +1,61 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* CSS Variables specific to the font editor that aren't defined by the themes */
+:root {
+  --slider-thumb-color: var(--grey-50);
+  --slider-track-color: var(--grey-30);
+  --toggle-thumb-color: white;
+  --toggle-track-color: var(--grey-30);
+  --input-background-color: white;
+  --input-border-color: var(--grey-30);
+  --input-text-color: var(--grey-90);
+}
+
+:root.theme-dark {
+  --slider-thumb-color: var(--grey-40);
+  --slider-track-color: var(--grey-50);
+  --toggle-thumb-color: var(--grey-40);
+  --toggle-track-color: var(--grey-50);
+  --input-background-color: var(--grey-70);
+  --input-border-color: var(--grey-70);
+  --input-text-color: var(--grey-40);
+}
+
 #sidebar-panel-fontinspector {
   margin: 0;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   overflow: auto;
 }
 
 #font-container {
   flex: auto;
 }
 
 #font-editor {
-  padding-bottom: .8em;
+  padding-bottom: .5em;
 }
 
 #font-editor summary {
   -moz-user-select: none;
   cursor: pointer;
-  margin-bottom: .7em;
+  margin-bottom: .4em;
   width: -moz-fit-content;
 }
 
+#font-editor details {
+  padding-bottom: .5em;
+}
+
 #font-editor details .label-open,
 #font-editor details .label-close {
   display: none;
 }
 
 #font-editor details[open] .label-close {
   display: inline-block;
 }
@@ -42,17 +67,17 @@
 .fonts-list {
   padding: 0;
   margin: 0;
   list-style: none;
 }
 
 .font {
   border: 1px solid var(--theme-splitter-color);
-  border-width: 0 1px 1px 0;
+  border-width: 0 0 1px 0;
   display: grid;
   grid-template-columns: 1fr auto;
   grid-column-gap: 10px;
   padding: 10px 20px;
   overflow: auto;
 }
 
 #font-container .theme-twisty {
@@ -139,37 +164,45 @@
   color: var(--theme-body-color-inactive);
   border-radius: 3px;
   border-style: solid;
   border-width: 1px;
   text-align: center;
   vertical-align: middle;
 }
 
-.font-axes-controls {
-  border-top: 1px solid var(--theme-splitter-color);
-  margin-top: .8em;
-  padding-top: .8em;
-}
-
 .font-control {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: space-between;
   align-items: center;
-  padding: 4px 18px;
+  padding: 0 18px;
+  margin: .6em 0;
+}
+
+/* Style *all* axis controls with a top separator. See reset below. */
+.font-control-axis {
+  border-top: 1px solid var(--theme-splitter-color);
+  padding-top: 1.1em;
+}
+
+/* Remove styles form all axis controls aside from the first one.
+   Workaround for :first-of-type which doesn't work with class names. */
+.font-control-axis ~ .font-control-axis {
+  border-top: unset;
+  padding-top: unset;
 }
 
 .font-control-family {
   align-items: flex-start;
   border-bottom: 1px solid var(--theme-splitter-color);
-  margin-bottom: .8em;
-  padding-top: .6em;
-  padding-bottom: .4em;
+  margin-top: 0;
+  margin-bottom: 1em;
+  padding-top: 1em;
 }
 
 .font-control-box,
 .font-control-input {
   flex: 4;
   min-width: 100px;
 }
 
@@ -185,70 +218,105 @@
   font-size: 12px;
   max-width: 70px;
   margin-right: 10px;
   -moz-user-select: none;
 }
 
 .font-family-unused {
   margin-bottom: .3em;
+  margin-left: 1.15em;
   color: var(--grey-50);
 }
 
-.font-instance-select:active{
-  outline: none;
-}
-
 .font-value-input {
   margin-left: 10px;
   text-align: right;
   width: 60px;
+  padding: 2px 3px;
+}
+
+.font-value-input,
+.font-value-select {
+  color: var(--input-text-color);
+  border: 1px solid var(--input-border-color);
+  background-color: var(--input-background-color);
 }
 
 /* Do not use browser "invalid" state */
 .font-value-slider:-moz-ui-invalid,
 .font-value-input:-moz-ui-invalid {
   box-shadow: none;
 }
 
 /* Do not show dotted line focus outline */
 .font-value-input:-moz-focusring {
   outline: none;
 }
 
 /* Add space between input text from number stepper */
-.font-value-input[type=number]::-moz-number-spin-box{
+.font-value-input[type=number]::-moz-number-spin-box {
   margin-left: 3px;
 }
 
+/* Make native number steppers darker to fit the dark theme */
+.theme-dark .font-value-input[type=number]::-moz-number-spin-box {
+  filter: invert(25%);
+}
+
 /* Do not show number stepper for font-size */
 .font-value-input[name=font-size] {
   -moz-appearance: textfield;
-  margin-right: 5px;
   padding-right: 5px;
+  border-right: none;
+}
+
+/* Mock separator because inputs don't have distinguishable borders in dark theme */
+.theme-dark .font-value-input + .font-value-select {
+  margin-left: 2px;
 }
 
-.font-unit-select {
-  padding: 2px;
+/* Custom styles for <select> elements within the font editor. */
+.font-value-select {
+  background-image: var(--select-arrow-image);
+  background-repeat: no-repeat;
+  background-position: right 4px center;
+  fill: var(--theme-toolbar-photon-icon-color);
+  -moz-context-properties: fill;
+  -moz-appearance: none;
+  box-shadow: none;
+  padding: 1px 10px 1px 2px;
+}
+
+.font-value-select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 var(--input-text-color);
+}
+
+.font-value-input:focus,
+.font-value-select:focus {
+  outline: 1px solid var(--blue-55);
+  outline-offset: -1px;
 }
 
 .font-value-slider {
   flex: 1;
   margin: 0;
   min-width: 50px;
 }
 
 /*
   The value of font-weight goes from 100 to 900 in increments of 100.
   Decorate the slider for font-weight to have 9 vertical notches using a linear gradient.
 */
 .font-value-slider[name=font-weight] {
   --notch-size: 3px;
   /* Draw a vertical line to get one notch per background-image instance */
-  background-image: linear-gradient(90deg, var(--grey-30) var(--notch-size), transparent 0);
+  background-image: linear-gradient(90deg, var(--slider-track-color) var(--notch-size),
+   transparent 0);
   /* Offset the background so the notch aligns with the center of the slider thumb */
   background-position: 5px center;
   /* Repeat the background-image horizontally */
   background-repeat: repeat-x;
   /* Size the background to get nine visible notch instances. */
   background-size: calc(12.5% - var(--notch-size) / 2) 7px;
 }
 
@@ -256,65 +324,84 @@
   outline: none;
 }
 
 .font-value-slider::-moz-focus-outer {
   border: 0;
 }
 
 .font-value-slider::-moz-range-thumb {
-  background: var(--grey-50);
+  background-color: var(--slider-thumb-color);
   border: 0;
 }
 
+.font-value-slider:focus::-moz-range-thumb {
+  background-color: var(--blue-55);
+}
+
 .font-value-slider::-moz-range-track {
-  background: var(--grey-30);
+  background-color: var(--slider-track-color);
   height: 3px;
 }
 
 /*
   Restyle a native checkbox input to look like a toggle with a "thumb".
   Build the decoration using solid shapes created with radial- and linear-gradient
   background images. Animate the position of the "thumb" using background-position.
  */
 .font-value-toggle {
   --x-pos: .15em;
   /* Reset native checkbox styling. */
   -moz-appearance: none;
-  background-color: var(--grey-30);
+  background-color: var(--toggle-track-color);
   cursor: pointer;
   /* Change font-size to scale. */
   font-size: 16px;
   width: 2em;
   height: 1em;
   border-radius: 1em;
   /* Animate the thumb position between states of the checkbox. */
   transition: background-color .1s ease-out;
+  /* border: 1px solid transparent; */
+  /* box-sizing: content-box; */
+}
+
+.font-value-toggle:focus {
+  box-shadow: 0 0 0 1px var(--blue-55);
+}
+
+.font-value-toggle:checked:focus {
+  background-color: var(--blue-40);
+  box-shadow: none;
 }
 
 .font-value-toggle:checked {
   --x-pos: 1.15em;
   background-color: var(--blue-55);
 }
 
 .font-value-toggle::before {
   position: relative;
   width: calc(1em - .3em);
   height: calc(1em - .3em);
   transform: translateY(.15em) translateX(var(--x-pos));
   border-radius: 100%;
   display: block;
   content: "";
-  background-color: white;
+  background-color: var(--toggle-thumb-color);
   transition: transform .1s ease-out;
 }
 
+.font-value-toggle:checked::before {
+  background-color: white;
+}
+
 .font-origin {
-  margin-top: .2em;
-  color: var(--grey-50);
+  margin-top: -.25em;
+  color: var(--theme-comment);
   justify-self: start;
 }
 
 .font-origin.system {
   text-transform: capitalize;
 }
 
 .font-origin.remote {
@@ -336,19 +423,22 @@
   width: 12px;
   height: 12px;
   place-self: center;
 
   background: url(chrome://devtools/skin/images/copy.svg) no-repeat;
   background-size: 12px;
   background-position-x: -1px;
   -moz-context-properties: fill;
-  fill: var(--theme-toolbar-color);
-
+  fill: var(--grey-50);
 }
 
 #font-container .accordion {
   border-top: 1px solid var(--theme-splitter-color);
 }
 
+#font-container .accordion ._content {
+  padding: 0;
+}
+
 #font-container .accordion + .accordion {
   border-top: none;
 }
rename from devtools/client/netmonitor/src/assets/icons/drop-down.svg
rename to devtools/client/themes/images/select-arrow.svg
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -76,20 +76,16 @@
   --theme-graphs-purple: #b693eb;
   --theme-graphs-yellow: #efc052;
   --theme-graphs-orange: #d97e00;
   --theme-graphs-red: #e57180;
   --theme-graphs-grey: #cccccc;
   --theme-graphs-full-red: #f00;
   --theme-graphs-full-blue: #00f;
 
-  /* Images */
-  --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
-  --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
-
   /* Icon filters */
   --theme-icon-checked-filter: url(chrome://devtools/skin/images/filters.svg#icon-checked-light);
 
   /* Tooltips */
   --theme-tooltip-border: #d9e1e8;
   --theme-tooltip-background: rgba(255, 255, 255, .9);
   --theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
 
@@ -185,20 +181,16 @@
   --theme-graphs-purple: #df80ff;
   --theme-graphs-yellow: #d99b28;
   --theme-graphs-orange: #d96629;
   --theme-graphs-red: #eb5368;
   --theme-graphs-grey: #757873;
   --theme-graphs-full-red: #f00;
   --theme-graphs-full-blue: #00f;
 
-  /* Images */
-  --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
-  --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
-
   /* Icon filters */
   --theme-icon-checked-filter: url(chrome://devtools/skin/images/filters.svg#icon-checked-dark);
 
   /* Tooltips */
   --theme-tooltip-border: #434850;
   --theme-tooltip-background: rgba(19, 28, 38, .9);
   --theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
 
@@ -239,16 +231,21 @@
   --toolbarbutton-checked-background: var(--theme-selection-background);
   --toolbarbutton-checked-color: var(--theme-selection-color);
   --toolbarbutton-checked-border-color: var(--toolbarbutton-border-color);
   --toolbarbutton-checked-focus-background: var(--blue-60);
 
   /* The photon animation curve */
   --animation-curve: cubic-bezier(.07,.95,0,1);
 
+  /* Images */
+  --select-arrow-image: url(chrome://devtools/skin/images/select-arrow.svg);
+  --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
+  --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
+
   /* Firefox Colors CSS Variables v1.0.3
    * Colors are taken from: https://github.com/FirefoxUX/design-tokens */
   --magenta-50: #ff1ad9;
   --magenta-65: #dd00a9;
   --magenta-70: #b5007f;
 
   --purple-50: #9400ff;
   --purple-60: #8000d7;