Files app: Set custom style for activated buttons on white toolbar.

The default ripple color for toolbar buttons is white, which is invisible on
white background.
We need to set custom style to make the ripple visible.

Bug: 740836
Change-Id: I7dc62bef120d5a06e8f42247cc1e5c604c6fd4ff
Reviewed-on: https://chromium-review.googlesource.com/566981Reviewed-by: Tatsuhisa Yamaguchi <yamaguchi@chromium.org>
Commit-Queue: Naoki Fukino <fukino@chromium.org>
Cr-Commit-Position: refs/heads/master@{#485857}

ui/file_manager/file_manager/foreground/js/toolbar_controller.js

@@ -153,11 +153,15 @@ ToolbarController.prototype.onSelectionChanged_ = function() {
   // controller which controls whole app window. Or, both toolbar and FileGrid
   // should listen to the FileSelectionHandler.
   if (this.directoryModel_.getFileListSelection().multiple) {
-    this.filesSelectedLabel_.ownerDocument.body.classList.toggle(
-        'selecting', selection.totalCount > 0);
-    this.filesSelectedLabel_.ownerDocument.body.classList.toggle(
-        'check-select',
-        this.directoryModel_.getFileListSelection().getCheckSelectMode());
+    var bodyClassList = this.filesSelectedLabel_.ownerDocument.body.classList;
+    bodyClassList.toggle('selecting', selection.totalCount > 0);
+    if (bodyClassList.contains('check-select') !=
+        this.directoryModel_.getFileListSelection().getCheckSelectMode()) {
+      bodyClassList.toggle('check-select');
+      // Some custom styles depend on |check-select| class. We need to
+      // re-evaluate the custom styles when the class value is changed.
+      Polymer.updateStyles();
+    }
   }
 }
 

ui/file_manager/file_manager/main.html

@@ -60,6 +60,21 @@
       paper-progress {
         --paper-progress-active-color: rgb(26, 194, 34);
       }
+
+      body.check-select .dialog-header files-toggle-ripple {
+        --files-toggle-ripple: {
+          background-color: black;
+        };
+        --files-toggle-ripple-activated: {
+          opacity: 0.08;
+        };
+      }
+
+      body.check-select .dialog-header files-ripple {
+        --files-ripple: {
+          background-color: black;
+        }
+      }
     </style>
 
     <script src="foreground/js/elements_importer.js"></script>