Bug 1462385 - Add notches to Weight slider in Font Editor. r=pbro
authorRazvan Caliman <rcaliman@mozilla.com>
Wed, 16 May 2018 20:15:05 +0200
changeset 418833 b06d48ccb1383b0a3c5c66d6bed2066a845e8bea
parent 418832 5afad9b7fd2114e7fd63d6b3674e7d9f169c2565
child 418834 4fb6bc1d33561b6f23ecb7b0733a2901c201154c
push id34014
push useraciure@mozilla.com
push dateFri, 18 May 2018 22:04:52 +0000
treeherdermozilla-central@b54f574a1dd2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1462385
milestone62.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 1462385 - Add notches to Weight slider in Font Editor. r=pbro MozReview-Commit-ID: 5A3zmsQFaLS
devtools/client/inspector/fonts/components/FontPropertyValue.js
devtools/client/themes/fonts.css
--- a/devtools/client/inspector/fonts/components/FontPropertyValue.js
+++ b/devtools/client/inspector/fonts/components/FontPropertyValue.js
@@ -51,16 +51,17 @@ class FontPropertyValue extends PureComp
       step: this.props.step || 1,
       value: this.props.value || this.props.defaultValue,
     };
 
     const range = dom.input(
       {
         ...defaults,
         className: "font-value-slider",
+        name: this.props.name,
         title: this.props.label,
         type: "range",
       }
     );
 
     const input = dom.input(
       {
         ...defaults,
--- a/devtools/client/themes/fonts.css
+++ b/devtools/client/themes/fonts.css
@@ -155,16 +155,32 @@
 }
 
 .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: 2px;
+  /* 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);
+  /* Offset the background so the notch aligns with the center of the slider thumb */
+  background-position: 7px 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)) 90%;
+}
+
 .font-value-slider:-moz-focusring {
   outline: none;
 }
 
 .font-value-slider::-moz-focus-outer {
   border: 0;
 }