WebUI: slider style refresh

cr-slider wraps paper-slider and applies the necessary style changes.
paper-slider needed two small changes to allow this to work.

This CL changes the style for sliders in settings. A subsequent CL will
change the slider styles outside of settings (all usages of
paper-slider will be replaced with cr-slider).

Bug: 850243
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I70771521ff2d4cb7ec9ef69b0dca7cc0e436ad5f
Reviewed-on: https://chromium-review.googlesource.com/1102158
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#570186}

chrome/browser/resources/settings/controls/BUILD.gn

@@ -93,7 +93,7 @@ js_library("settings_radio_group") {
 
 js_library("settings_slider") {
   deps = [
-    "//third_party/polymer/v1_0/components-chromium/paper-slider:paper-slider-extracted",
+    "//ui/webui/resources/cr_elements/cr_slider:cr_slider",
     "//ui/webui/resources/cr_elements/policy:cr_policy_pref_behavior",
     "//ui/webui/resources/js:assert",
   ]

chrome/browser/resources/settings/controls/settings_slider.html

@@ -2,7 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_behavior.html">
 <link rel="import" href="chrome://resources/html/assert.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_slider/cr_slider.html">
 
 <dom-module id="settings-slider">
   <template>
@@ -50,25 +50,15 @@
       #label-end {
         -webkit-margin-begin: 4px;
       }
-
-      paper-slider {
-        /* Make the slider bar always grey. */
-        --paper-slider-active-color: var(--paper-grey-400);
-        /* Make the knob always blue. */
-        --paper-slider-knob-start-color: var(--google-blue-700);
-        --paper-slider-knob-start-border-color: var(--google-blue-700);
-        width: 100%;
-      }
     </style>
     <template is="dom-if" if="[[pref.controlledBy]]" restamp>
       <cr-policy-pref-indicator pref="[[pref]]"></cr-policy-pref-indicator>
     </template>
     <div class="outer">
-      <paper-slider id="slider"
-          disabled$="[[disableSlider_]]" snaps
+      <cr-slider id="slider" disabled$="[[disableSlider_]]" snaps
           on-immediate-value-changed="onSliderChanged_" max="[[max]]"
-          min="[[min]]" on-up="resetTrackLock_">
-      </paper-slider>
+          min="[[min]]">
+      </cr-slider>
       <div id="labels" disabled$="[[disableSlider_]]">
         <div id="label-begin">[[labelMin]]</div>
         <div id="label-end">[[labelMax]]</div>

chrome/browser/resources/settings/controls/settings_slider.js

@@ -21,7 +21,10 @@ Polymer({
     pref: Object,
 
     /** @type {!Array<number>} Values corresponding to each tick. */
-    tickValues: {type: Array, value: []},
+    tickValues: {
+      type: Array,
+      value: () => [],
+    },
 
     /**
      * A scale factor used to support fractional pref values since paper-slider
@@ -148,13 +151,4 @@ Polymer({
     assert(typeof closestIndex != 'undefined');
     return closestIndex;
   },
-
-  /**
-   * TODO(scottchen): temporary fix until polymer gesture bug resolved. See:
-   * https://github.com/PolymerElements/paper-slider/issues/186
-   * @private
-   */
-  resetTrackLock_: function() {
-    Polymer.Gestures.gestures.tap.reset();
-  },
 });

chrome/test/data/webui/settings/device_page_tests.js

@@ -530,7 +530,7 @@ cr.define('device_page_tests', function() {
         const slider = assert(pointersPage.$$('#mouse settings-slider'));
         expectEquals(4, slider.pref.value);
         MockInteractions.pressAndReleaseKeyOn(
-            slider.$$('#slider'), 37 /* left */);
+            slider.$$('cr-slider').$$('#slider'), 37 /* left */);
         expectEquals(3, devicePage.prefs.settings.mouse.sensitivity2.value);
 
         pointersPage.set('prefs.settings.mouse.sensitivity2.value', 5);
@@ -546,7 +546,7 @@ cr.define('device_page_tests', function() {
         const slider = assert(pointersPage.$$('#touchpad settings-slider'));
         expectEquals(3, slider.pref.value);
         MockInteractions.pressAndReleaseKeyOn(
-            slider.$$('#slider'), 39 /* right */);
+            slider.$$('cr-slider').$$('#slider'), 39 /* right */);
         expectEquals(4, devicePage.prefs.settings.touchpad.sensitivity2.value);
 
         pointersPage.set('prefs.settings.touchpad.sensitivity2.value', 2);
@@ -637,9 +637,12 @@ cr.define('device_page_tests', function() {
             // Test interaction with the settings-slider's underlying
             // paper-slider.
             MockInteractions.pressAndReleaseKeyOn(
-                keyboardPage.$$('#delaySlider').$$('#slider'), 37 /* left */);
+                keyboardPage.$$('#delaySlider').$$('cr-slider').$$('#slider'),
+                37 /* left */);
             MockInteractions.pressAndReleaseKeyOn(
-                keyboardPage.$$('#repeatRateSlider').$$('#slider'),
+                keyboardPage.$$('#repeatRateSlider')
+                    .$$('cr-slider')
+                    .$$('#slider'),
                 39 /* right */);
             const language = devicePage.prefs.settings.language;
             expectEquals(1000, language.xkb_auto_repeat_delay_r2.value);

chrome/test/data/webui/settings/settings_slider_tests.js

@@ -4,14 +4,14 @@
 
 /** @fileoverview Suite of tests for settings-slider. */
 suite('SettingsSlider', function() {
-  /** @type {!CrSliderElement} */
+  /** @type {!SettingsSliderElement} */
   let slider;
 
   /**
    * paper-slider instance wrapped by settings-slider.
-   * @type {!PaperSliderElement}
+   * @type {!CrSliderElement}
    */
-  let paperSlider;
+  let crSlider;
 
   const tickValues = [2, 4, 8, 16, 32, 64, 128];
 
@@ -23,7 +23,7 @@ suite('SettingsSlider', function() {
       value: 16,
     };
     document.body.appendChild(slider);
-    paperSlider = slider.$$('paper-slider');
+    crSlider = slider.$$('cr-slider');
   });
 
   test('enforce value', function() {
@@ -45,43 +45,43 @@ suite('SettingsSlider', function() {
   test('set value', function() {
     slider.tickValues = tickValues;
     slider.set('pref.value', 16);
-    expectEquals(6, paperSlider.max);
-    expectEquals(3, paperSlider.value);
-    expectEquals(3, paperSlider.immediateValue);
+    expectEquals(6, crSlider.max);
+    expectEquals(3, crSlider.value);
+    expectEquals(3, crSlider.immediateValue);
 
     // settings-slider only supports snapping to a range of tick values.
     // Setting to an in-between value should snap to an indexed value.
     slider.set('pref.value', 70);
-    expectEquals(5, paperSlider.value);
-    expectEquals(5, paperSlider.immediateValue);
+    expectEquals(5, crSlider.value);
+    expectEquals(5, crSlider.immediateValue);
     expectEquals(64, slider.pref.value);
 
     // Setting the value out-of-range should clamp the slider.
     slider.set('pref.value', -100);
-    expectEquals(0, paperSlider.value);
-    expectEquals(0, paperSlider.immediateValue);
+    expectEquals(0, crSlider.value);
+    expectEquals(0, crSlider.immediateValue);
     expectEquals(2, slider.pref.value);
   });
 
   test('move slider', function() {
     slider.tickValues = tickValues;
     slider.set('pref.value', 30);
-    expectEquals(4, paperSlider.value);
+    expectEquals(4, crSlider.value);
 
-    MockInteractions.pressAndReleaseKeyOn(paperSlider, 39 /* right */);
-    expectEquals(5, paperSlider.value);
+    MockInteractions.pressAndReleaseKeyOn(crSlider.$.slider, 39 /* right */);
+    expectEquals(5, crSlider.value);
     expectEquals(64, slider.pref.value);
 
-    MockInteractions.pressAndReleaseKeyOn(paperSlider, 39 /* right */);
-    expectEquals(6, paperSlider.value);
+    MockInteractions.pressAndReleaseKeyOn(crSlider.$.slider, 39 /* right */);
+    expectEquals(6, crSlider.value);
     expectEquals(128, slider.pref.value);
 
-    MockInteractions.pressAndReleaseKeyOn(paperSlider, 39 /* right */);
-    expectEquals(6, paperSlider.value);
+    MockInteractions.pressAndReleaseKeyOn(crSlider.$.slider, 39 /* right */);
+    expectEquals(6, crSlider.value);
     expectEquals(128, slider.pref.value);
 
-    MockInteractions.pressAndReleaseKeyOn(paperSlider, 37 /* left */);
-    expectEquals(5, paperSlider.value);
+    MockInteractions.pressAndReleaseKeyOn(crSlider.$.slider, 37 /* left */);
+    expectEquals(5, crSlider.value);
     expectEquals(64, slider.pref.value);
   });
 
@@ -114,14 +114,14 @@ suite('SettingsSlider', function() {
   test('scaled slider', function() {
     slider.scale = 10;
     slider.set('pref.value', 2);
-    expectEquals(20, paperSlider.value);
+    expectEquals(20, crSlider.value);
 
-    MockInteractions.pressAndReleaseKeyOn(paperSlider, 39 /* right */);
-    expectEquals(21, paperSlider.value);
+    MockInteractions.pressAndReleaseKeyOn(crSlider.$.slider, 39 /* right */);
+    expectEquals(21, crSlider.value);
     expectEquals(2.1, slider.pref.value);
 
-    MockInteractions.pressAndReleaseKeyOn(paperSlider, 39 /* right */);
-    expectEquals(22, paperSlider.value);
+    MockInteractions.pressAndReleaseKeyOn(crSlider.$.slider, 39 /* right */);
+    expectEquals(22, crSlider.value);
     expectEquals(2.2, slider.pref.value);
   });
 });

third_party/polymer/README.chromium

@@ -40,6 +40,8 @@ the Crisper tool (https://github.com/PolymerLabs/crisper).
   Polymer's <paper-ripple>.
 - Removed CSS properties that are not needed in Chromium using
   css_strip_prefixes.py script.
+- For paper-slider, added mixin for the pin text and removed custom focus change
+  handler code which was hiding ripples for pointer interactions.
 
 To restore a content of the 'components-chromium' directory from scratch, run
 ./v1_0/reproduce.sh on a Linux machine.

third_party/polymer/v1_0/chromium.patch

@@ -9,7 +9,7 @@ index 7a24999..4eefcba 100644
 -<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic">
 -<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700">
 +<link rel="stylesheet" href="chrome://resources/css/roboto.css">
-diff --git a/components-chromium/paper-input/paper-input-extracted.js b/third_party/polymer/v1_0/components-chromium/paper-input/paper-input-extracted.js
+diff --git a/components-chromium/paper-input/paper-input-extracted.js b/components-chromium/paper-input/paper-input-extracted.js
 index 754820fb5d0c..3f8e640ffa71 100644
 --- a/components-chromium/paper-input/paper-input-extracted.js
 +++ b/components-chromium/paper-input/paper-input-extracted.js
@@ -139,3 +139,44 @@ index 082b0c1e4af2..d985829702a2 100644
 \ No newline at end of file
 +</body></html>
 \ No newline at end of file
+diff --git a/components-chromium/paper-slider/paper-slider.html b/components-chromium/paper-slider/paper-slider.html
+index 646c22c2fb93..952818290c1e 100644
+--- a/components-chromium/paper-slider/paper-slider.html
++++ b/components-chromium/paper-slider/paper-slider.html
+@@ -279,6 +279,7 @@ Custom property | Description | Default
+ 
+       .pin.expand > .slider-knob > .slider-knob-inner::after {
+         transform: scale(1) translate(0, -17px);
++        @apply --paper-slider-pin-text;
+       }
+ 
+       /* paper-input */
+diff --git a/components-chromium/paper-slider/paper-slider-extracted.js b/components-chromium/paper-slider/paper-slider-extracted.js
+index 2e63d3731be1..217c7ff1414c 100644
+--- a/components-chromium/paper-slider/paper-slider-extracted.js
++++ b/components-chromium/paper-slider/paper-slider-extracted.js
+@@ -385,24 +385,6 @@ Polymer({
+         this._rippleContainer = this.$.sliderKnob;
+         return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
+       },
+-
+-      // Hide the ripple when user is not interacting with keyboard.
+-      // This behavior is different from other ripple-y controls, but is
+-      // according to spec: https://www.google.com/design/spec/components/sliders.html
+-      _focusedChanged: function(receivedFocusFromKeyboard) {
+-        if (receivedFocusFromKeyboard) {
+-          this.ensureRipple();
+-        }
+-        if (this.hasRipple()) {
+-          // note, ripple must be un-hidden prior to setting `holdDown`
+-          if (receivedFocusFromKeyboard) {
+-            this._ripple.style.display = '';
+-          } else {
+-            this._ripple.style.display = 'none';
+-          }
+-          this._ripple.holdDown = receivedFocusFromKeyboard;
+-        }
+-      }
+     });
+ 
+     /**

third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider-extracted.js

@@ -385,24 +385,6 @@ Polymer({
         this._rippleContainer = this.$.sliderKnob;
         return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
       },
-
-      // Hide the ripple when user is not interacting with keyboard.
-      // This behavior is different from other ripple-y controls, but is
-      // according to spec: https://www.google.com/design/spec/components/sliders.html
-      _focusedChanged: function(receivedFocusFromKeyboard) {
-        if (receivedFocusFromKeyboard) {
-          this.ensureRipple();
-        }
-        if (this.hasRipple()) {
-          // note, ripple must be un-hidden prior to setting `holdDown`
-          if (receivedFocusFromKeyboard) {
-            this._ripple.style.display = '';
-          } else {
-            this._ripple.style.display = 'none';
-          }
-          this._ripple.holdDown = receivedFocusFromKeyboard;
-        }
-      }
     });
 
     /**

third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider.html

@@ -279,6 +279,7 @@ Custom property | Description | Default
 
       .pin.expand > .slider-knob > .slider-knob-inner::after {
         transform: scale(1) translate(0, -17px);
+        @apply --paper-slider-pin-text;
       }
 
       /* paper-input */

ui/webui/resources/cr_elements/BUILD.gn

@@ -18,6 +18,7 @@ group("closure_compile") {
     "cr_link_row:closure_compile",
     "cr_profile_avatar_selector:closure_compile",
     "cr_radio_button:closure_compile",
+    "cr_slider:closure_compile",
     "cr_toast:closure_compile",
     "cr_toggle:closure_compile",
     "policy:closure_compile",

ui/webui/resources/cr_elements/cr_slider/BUILD.gn

+# Copyright 2018 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+import("//third_party/closure_compiler/compile_js.gni")
+
+js_type_check("closure_compile") {
+  deps = [
+    ":cr_slider",
+  ]
+}
+
+js_library("cr_slider") {
+  deps = [
+    "//third_party/polymer/v1_0/components-chromium/paper-slider:paper-slider-extracted",
+  ]
+}

ui/webui/resources/cr_elements/cr_slider/cr_slider.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
+
+<dom-module id="cr-slider">
+  <template>
+    <style>
+      paper-slider {
+        --paper-slider-active-color: var(--google-blue-600);
+        --paper-slider-container-color: rgba(26, 115, 232, 0.24);
+        --paper-slider-knob-color: var(--google-blue-600);
+        --paper-slider-knob-start-color: var(--google-blue-600);
+        --paper-slider-knob-start-border-color: var(--google-blue-600);
+        --paper-slider-pin-color: var(--google-blue-600);
+        --paper-slider-pin-start-color: var(--google-blue-600);
+        --paper-slider-markers-color: rgba(255, 255, 255, 0.54);
+        --paper-slider-disabled-active-color: var(--google-grey-600);
+        --paper-slider-disabled-knob-color: var(--google-grey-600);
+        width: 100%;
+
+        --paper-slider-pin-text: {
+          font-family:  Roboto;
+          font-size: 12px;
+          font-weight: 500;
+          line-height: 14px;
+        };
+      }
+
+      :host-context([dir=rtl]) paper-slider {
+        --paper-slider-pin-text: {
+          font-family:  Roboto;
+          font-size: 12px;
+          font-weight: 500;
+          line-height: 14px;
+          transform: scale(-1, 1) translate(0, -17px);
+        };
+      }
+
+      paper-slider[disabled] {
+        --paper-slider-container-color: rgba(128, 134, 139, 0.24);
+      }
+    </style>
+    <paper-slider id="slider"
+        disabled$="[[disabled]]" snaps="[[snaps]]" on-change="onChange_"
+        max="[[max]]" min="[[min]]" on-up="resetTrackLock_" value="{{value}}"
+        max-markers="[[maxMarkers]]" immediate-value="{{immediateValue}}"
+        dragging="{{dragging}}">
+    </paper-slider>
+  </template>
+  <script src="cr_slider.js"></script>
+</dom-module>

ui/webui/resources/cr_elements/cr_slider/cr_slider.js

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview 'cr-slider' is a wrapper around paper-slider to alter the
+ * styling. The bahavior of the slider remains the same.
+ */
+Polymer({
+  is: 'cr-slider',
+
+  properties: {
+    min: Number,
+
+    max: Number,
+
+    snaps: {
+      type: Boolean,
+      value: true,
+    },
+
+    disabled: {
+      type: Boolean,
+      observer: 'onDisabledChanged_',
+    },
+
+    value: Number,
+    maxMarkers: Number,
+    immediateValue: Number,
+    dragging: Boolean,
+  },
+
+  listeners: {
+    'focus': 'onFocus_',
+    'blur': 'onBlur_',
+    'keydown': 'onKeyDown_',
+    'pointerdown': 'onPointerDown_',
+    'pointerup': 'onPointerUp_',
+  },
+
+  /** @type {boolean} */
+  usedMouse: false,
+
+  /** @override */
+  attached: function() {
+    this.onDisabledChanged_();
+  },
+
+  /** @private */
+  onFocus_: function() {
+    this.$.slider.getRipple().holdDown = true;
+    this.$.slider._expandKnob();
+  },
+
+  /** @private */
+  onBlur_: function() {
+    this.$.slider.getRipple().holdDown = false;
+    this.$.slider._resetKnob();
+  },
+
+  /** @private */
+  onChange_: function() {
+    this.$.slider._setExpand(!this.usedMouse);
+    this.$.slider.getRipple().holdDown = !this.usedMouse;
+    this.usedMouse = false;
+  },
+
+  /** @private */
+  onKeyDown_: function() {
+    this.usedMouse = false;
+    if (!this.disabled)
+      this.onFocus_();
+  },
+
+  /**
+   * @param {!MouseEvent} event
+   * @private
+   */
+  onPointerDown_: function(event) {
+    if (this.disabled || event.button != 0) {
+      event.preventDefault();
+      return;
+    }
+    this.usedMouse = true;
+    setTimeout(() => {
+      this.$.slider.getRipple().holdDown = true;
+    });
+  },
+
+  /**
+   * @param {!MouseEvent} event
+   * @private
+   */
+  onPointerUp_: function(event) {
+    if (event.button != 0)
+      return;
+    this.$.slider.getRipple().holdDown = false;
+  },
+
+  /**
+   * The style is being set in this way to keep the knob size the same
+   * regardless of the state or properties set in the paper-slider. paper-slider
+   * styles alter the size in multiple places making it difficult to introduce
+   * one or two mixins to override the existing paper-slider knob styling.
+   * @private
+   */
+  onDisabledChanged_: function() {
+    const knob = this.$.slider.$$('.slider-knob-inner');
+    if (this.disabled) {
+      knob.style.transform = 'scale(1.2)';
+      knob.style.border = '2px solid white';
+    } else {
+      knob.style.margin = '11px';
+      knob.style.height = '10px';
+      knob.style.width = '10px';
+      knob.style.transform = 'unset';
+    }
+  },
+
+  /**
+   * TODO(scottchen): temporary fix until polymer gesture bug resolved. See:
+   * https://github.com/PolymerElements/paper-slider/issues/186
+   * @private
+   */
+  resetTrackLock_: function() {
+    Polymer.Gestures.gestures.tap.reset();
+  },
+});

ui/webui/resources/cr_elements_resources.grdp

@@ -110,6 +110,14 @@
              file="cr_elements/cr_radio_button/cr_radio_button_style_css.html"
              type="chrome_html"
              compress="gzip" />
+  <structure name="IDR_CR_ELEMENTS_CR_SLIDER_HTML"
+             file="cr_elements/cr_slider/cr_slider.html"
+             type="chrome_html"
+             compress="gzip" />
+  <structure name="IDR_CR_ELEMENTS_CR_SLIDER_JS"
+             file="cr_elements/cr_slider/cr_slider.js"
+             type="chrome_html"
+             compress="gzip" />
   <if expr="chromeos">
     <structure name="IDR_CR_ELEMENTS_CHROMEOS_CR_PICTURE_CR_CAMERA_HTML"
                file="cr_elements/chromeos/cr_picture/cr_camera.html"