Gallery WebUI: replace paper-slider with cr-slider in image editor

Making cr-slider tabindex=0 when enabled so it can be focused using
|slider.focus()|. When a control is selected in the image editor, the
first control in the group is given focus (for example when clicking on
the brightness/contrast button, the brightness slider should have
focus.

Added css variables to allow for a different color scheme for image
editor sliders.

Bug: 902873
Change-Id: I4cf9c5082f81c9a8b50529c4e7f59537c4e4cfa6
Reviewed-on: https://chromium-review.googlesource.com/c/1357652Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#615623}

chrome/test/data/webui/cr_elements/cr_slider_test.js

@@ -17,6 +17,9 @@ suite('cr-slider', function() {
     assertEquals(
         expected,
         window.getComputedStyle(crSlider)['pointer-events'] == 'none');
+    const expectedTabindex = expected ? '-1' : '0';
+    assertEquals(expectedTabindex, crSlider.getAttribute('tabindex'));
+    assertEquals(expectedTabindex, crSlider.$.knob.getAttribute('tabindex'));
   }
 
   function pressArrowRight() {

ui/file_manager/gallery/css/gallery.css

@@ -934,7 +934,7 @@ button[disabled] {
   width: 16px;
 }
 
-paper-slider {
+cr-slider {
   width: 172px;
 }
 

ui/file_manager/gallery/gallery.html

@@ -16,12 +16,12 @@
   <script src="chrome://resources/js/util.js"></script>
 
   <link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
+  <link rel="import" href="chrome://resources/cr_elements/cr_slider/cr_slider.html">
   <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
   <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
   <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
   <link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
   <link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
-  <link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
   <link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_ripple.html">
   <link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_toast.html">
   <link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_toggle_ripple.html">
@@ -45,11 +45,11 @@
         --cr-checkbox-size: 14px;
         --cr-checkbox-unchecked-box-color: white;
       }
-      paper-slider {
-        --paper-slider-active-color: white;
-        --paper-slider-container-color: rgba(255, 255, 255, 0.2);
-        --paper-slider-knob-color: white;
-        --paper-slider-secondary-color: transparent;
+      cr-slider {
+        --cr-slider-active-color: white;
+        --cr-slider-container-color: rgba(255, 255, 255, 0.2);
+        --cr-slider-knob-color: white;
+        --cr-slider-secondary-color: transparent;
       }
       paper-progress {
         --paper-progress-container-color: rgba(0, 0, 0, 0.3);

ui/file_manager/gallery/js/image_editor/image_editor_toolbar.js

@@ -278,14 +278,14 @@ ImageEditorToolbar.prototype.addRange = function(
   range.appendChild(label);
 
   var scale = opt_scale || 1;
-  var slider = document.createElement('paper-slider');
+  var slider = document.createElement('cr-slider');
   slider.min = Math.ceil(min * scale);
   slider.max = Math.floor(max * scale);
   slider.value = value * scale;
-  slider.addEventListener('change', function(event) {
+  slider.addEventListener('value-changed', () => {
     if (this.updateCallback_)
       this.updateCallback_(this.getOptions());
-  }.bind(this));
+  });
   range.appendChild(slider);
 
   range.name = name;
@@ -343,7 +343,7 @@ ImageEditorToolbar.prototype.show = function(on) {
   // Focus the first input on the toolbar.
   if (on) {
     var input = this.container_.querySelector(
-        'button, paper-button, input, paper-slider, cr-input');
+        'button, paper-button, input, cr-slider, cr-input');
     if (input)
       input.focus();
   }

ui/file_manager/integration_tests/gallery/photo_editor.js

@@ -140,43 +140,50 @@ function exposureImage(testVolumeName, volumeType) {
     var origMetadata = null;
 
     // Click the exposure button.
-    return gallery.waitAndClickElement(appId, buttonQuery).then(function() {
-      // Wait until the edit controls appear.
-      return Promise.all([
-        gallery.waitForElement(appId, '.brightness > paper-slider'),
-        gallery.waitForElement(appId, '.contrast > paper-slider'),
-      ]);
-    }).then(function() {
-      return gallery.callRemoteTestUtil(
-          'changeValue', appId, ['.brightness > paper-slider', 20]);
-    }).then(function() {
-      return gallery.callRemoteTestUtil(
-          'changeValue', appId, ['.contrast > paper-slider', -20]);
-    }).then(function() {
-      return gallery.callRemoteTestUtil('getMetadata', null, [url]);
-    }).then(function(metadata) {
-      origMetadata = metadata;
-
-      // Push the Enter key.
-      return gallery.fakeKeyDown(appId, 'body', 'Enter', false, false, false);
-    }).then(function() {
-      // Wait until the image is updated.
-      return repeatUntil(function() {
-        return gallery.callRemoteTestUtil('getMetadata', null, [url])
+    return gallery.waitAndClickElement(appId, buttonQuery)
+        .then(function() {
+          // Wait until the edit controls appear.
+          return Promise.all([
+            gallery.waitForElement(appId, '.brightness > cr-slider'),
+            gallery.waitForElement(appId, '.contrast > cr-slider'),
+          ]);
+        })
+        .then(function() {
+          return gallery.callRemoteTestUtil(
+              'changeValue', appId, ['.brightness > cr-slider', 20]);
+        })
+        .then(function() {
+          return gallery.callRemoteTestUtil(
+              'changeValue', appId, ['.contrast > cr-slider', -20]);
+        })
+        .then(function() {
+          return gallery.callRemoteTestUtil('getMetadata', null, [url]);
+        })
         .then(function(metadata) {
-          if (origMetadata.modificationTime != metadata.modificationTime) {
-            return true;
-          } else {
-            return pending(
-                '%s is not updated. ' +
-                    'First last modified: %s, Second last modified: %s.',
-                url,
-                origMetadata.modificationTime,
-                metadata.modificationTime);
-          }
+          origMetadata = metadata;
+
+          // Push the Enter key.
+          return gallery.fakeKeyDown(
+              appId, 'body', 'Enter', false, false, false);
+        })
+        .then(function() {
+          // Wait until the image is updated.
+          return repeatUntil(function() {
+            return gallery.callRemoteTestUtil('getMetadata', null, [url])
+                .then(function(metadata) {
+                  if (origMetadata.modificationTime !=
+                      metadata.modificationTime) {
+                    return true;
+                  } else {
+                    return pending(
+                        '%s is not updated. First ' +
+                            'last modified: %s, Second last modified: %s.',
+                        url, origMetadata.modificationTime,
+                        metadata.modificationTime);
+                  }
+                });
+          });
         });
-      });
-    });
   });
 }
 

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

@@ -15,6 +15,7 @@
         --cr-slider-position-transition: 80ms ease;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
         cursor: default;
+        outline: none;
         user-select: none;
       }
 
@@ -37,7 +38,7 @@
       }
 
       #barContainer {
-        border-top-color: var(--google-blue-600-opacity-24);
+        border-top-color: var(--cr-slider-container-color, var(--google-blue-600-opacity-24));
         height: var(--cr-slider-bar-height);
         margin: 0 16px;
         position: absolute;
@@ -89,7 +90,7 @@
       }
 
       paper-ripple {
-        color: var(--google-blue-600);
+        color: var(--cr-slider-knob-color, var(--google-blue-600));
         height: 32px;
         left: -11px;
         pointer-events: none;
@@ -206,8 +207,7 @@
         </div>
       </div>
       <div id="knobContainer">
-        <div id="knob" tabindex="0" on-transitionend="onKnobTransitionEnd_">
-        </div>
+        <div id="knob" on-transitionend="onKnobTransitionEnd_"></div>
       </div>
       <div id="labelContainer" aria-label="[[label_]]">
         <div id="label">[[label_]]</div>

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

@@ -265,7 +265,8 @@ cr_slider.SliderTick;
 
     /** @private */
     onDisabledChanged_: function() {
-      this.$.knob.setAttribute('tabindex', this.disabled_ ? '-1' : '0');
+      this.setAttribute('tabindex', this.disabled_ ? -1 : 0);
+      this.$.knob.setAttribute('tabindex', this.disabled_ ? -1 : 0);
       this.blur();
     },