Improve appearance of Reader Mode's font size slider.

Bug: 952034
Change-Id: I6debbcb4e8474cacdcd8b5add471a9c04c0a4dc5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1853862
Commit-Queue: Aran Gilman <gilmanmh@google.com>
Reviewed-by: Wei-Yin Chen (陳威尹) <wychen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#707908}

components/dom_distiller/core/css/distilledpage_desktop.css

@@ -4,6 +4,13 @@
 
 /* This file should contain style used on desktop but not Android or iOS. */
 
+:root {
+  --fontSizePercent: 22%;
+  --mdblue: rgb(26, 115, 232);
+  --mdblue-faint: rgba(26, 115, 232, .2);
+  --mdblue-focus: rgba(26, 115, 232, .2);
+}
+
 fieldset {
   border: none;
   background: transparent;
@@ -75,7 +82,7 @@ fieldset {
   box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3),
               0 4px 8px 3px rgba(60, 64, 67, 0.15);
   width: 320px;
-  height: 144px;
+  height: 168px;
   padding: 16px;
   box-sizing: border-box;
   font-size: 16px;
@@ -147,7 +154,7 @@ select#fontFamilySelection {
 }
 
 .themeOption input[type="radio"]:checked {
-  border: 2px solid blue;
+  border: 2px solid var(--mdblue);
 }
 
 #fontSizeWrapper {
@@ -155,5 +162,85 @@ select#fontFamilySelection {
 }
 
 #fontSizeSelection {
+  -webkit-appearance: none;
   width: 100%;
+  margin: 0;
+  background: transparent;
+}
+
+#fontSizeSelection:focus {
+  outline: none;
+}
+
+#fontSizeSelection::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border-radius: 50%;
+  background-color: var(--mdblue);
+  width: 10px;
+  height: 10px;
+
+  /* Position the thumb over the slider track. */
+  margin-top: -4px;
+
+  /* Render the thumb on top of the tickmarks. We can't just rearrange the HTML
+   * because the tickmarks need to render above the slider's track. */
+  position: relative;
+  z-index: 1;
+}
+
+#fontSizeSelection:focus::-webkit-slider-thumb {
+  box-shadow: 0px 0px 0px 11px var(--mdblue-focus);
+}
+
+#fontSizeSelection::-webkit-slider-container {
+  /* Increase the clickable area of the slider. */
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+}
+
+#fontSizeSelection::-webkit-slider-runnable-track {
+  height: 2px;
+  width: 100%;
+
+  /* Make the track opaque blue to the left of the thumb and mostly transparent
+   * to the right of the thumb. */
+  background: linear-gradient(
+    to right, var(--mdblue), var(--mdblue) var(--fontSizePercent),
+    var(--mdblue-faint) var(--fontSizePercent), var(--mdblue-faint));
+}
+
+.tickmarks {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-top: 0;
+  height: 2px;
+
+  /* Position the tickmarks over the slider track. */
+  margin-top: -20px;
+
+  /* Restrict the height of individual options to that of their containing
+   * datalist. Setting the height property directly does not seem to have an
+   * impact. */
+  overflow: hidden;
+}
+
+.tickmarks option {
+  width: 1px;
+  padding: 0;
+}
+
+.tickmarks option.beforeThumb {
+  background: white;
+}
+
+.tickmarks option.afterThumb {
+  background: var(--mdblue);
+}
+
+.label-container {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  padding-top: 8px;
 }

components/dom_distiller/core/html/dom_distiller_viewer.html

@@ -77,10 +77,26 @@ found in the LICENSE file.
               <input id="fontSizeSelection"
                      type="range"
                      name="fontSize"
-                     min="14"
-                     max="48"
-                     step="2"
-                     value="16">
+                     list="tickmarks"
+                     min="0"
+                     max="9"
+                     value="2">
+              <datalist class="tickmarks">
+                <option value="0" class="beforeThumb" aria-labelledby="slider-label-min"></option>
+                <option value="1" class="beforeThumb"></option>
+                <option value="2" class="afterThumb"></option>
+                <option value="3" class="afterThumb"></option>
+                <option value="4" class="afterThumb"></option>
+                <option value="5" class="afterThumb"></option>
+                <option value="6" class="afterThumb"></option>
+                <option value="7" class="afterThumb"></option>
+                <option value="8" class="afterThumb"></option>
+                <option value="9" class="afterThumb" aria-labelledby="slider-label-max"></option>
+              </datalist>
+              <div class="label-container">
+                <span id="slider-label-min">Small</span>
+                <span id="slider-label-max">Large</span>
+              </div>
             </div>
           </div>
         </dialog>

components/dom_distiller/core/javascript/dom_distiller_viewer.js

@@ -136,6 +136,23 @@ function maybeSetWebFont() {
   document.head.appendChild(e);
 }
 
+const supportedTextSizes = [14, 15, 16, 18, 20, 24, 28, 32, 40, 48];
+function updateSlider(position) {
+  document.documentElement.style.setProperty(
+      '--fontSizePercent', (position / 9 * 100) + '%');
+  for (let i = 0; i < supportedTextSizes.length; i++) {
+    let optionClasses =
+        document.querySelector('.tickmarks option[value="' + i + '"]')
+            .classList;
+    removeAll(optionClasses, ['beforeThumb', 'afterThumb']);
+    if (i < position) {
+      optionClasses.add('beforeThumb');
+    } else {
+      optionClasses.add('afterThumb');
+    }
+  }
+}
+
 // Add a listener to the "View Original" link to report opt-outs.
 document.getElementById('closeReaderView')
     .addEventListener('click', function(e) {
@@ -407,7 +424,12 @@ document.querySelector('#themeSelection').addEventListener('change', (e) => {
 });
 
 document.querySelector('#fontSizeSelection').addEventListener('change', (e) => {
-  document.body.style.fontSize = e.target.value + 'px';
+  document.body.style.fontSize = supportedTextSizes[e.target.value] + 'px';
+  updateSlider(e.target.value);
+});
+
+document.querySelector('#fontSizeSelection').addEventListener('input', (e) => {
+  updateSlider(e.target.value);
 });
 
 document.querySelector('#fontFamilySelection')