Gallery: Replace buttons in top toolbar with paper-button and new icons.

ui/file_manager/gallery/css/gallery.css

 /* Copyright (c) 2014 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. */
 
 body {
   -webkit-user-select: none;
   font-size: 84%;
   margin: 0;
 }
 
@@ skipping 25 matching lines @@
 .gallery .content {
   bottom: 0;
   left: 0;
   overflow: hidden;
   position: absolute;
   right: 0;
   top: 0;
 }
 
 /* Common background for both mosaic and slide mode. */
-.gallery .content {
+.gallery > .content {
   background-color: black;
 }
 
 /* Image container and canvas elements */
 
 .gallery .image-container {
   cursor: none;   /* Only visible when the toolbar is active */
   height: 100%;
   position: absolute;
   width: 100%;
@@ skipping 93 matching lines @@
   }
 }
 
 /* Toolbar */
 
 .gallery > .toolbar {
   -webkit-box-align: stretch;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
   background-color: rgba(40, 42, 45, 0.9);
-  border-top: 1px solid rgba(50, 50, 50, 0.8);
   display: flex;
-  height: 55px;
+  height: 48px;
   left: 0;
   opacity: 0;
   overflow: hidden;
-  padding: 0 10px;
+  padding: 0;
   pointer-events: none;
   position: absolute;
   right: 0;
   transition: opacity 300ms ease;
 }
 
 .gallery > .toolbar.top {
   top: 0;
 }
 
 .gallery > .toolbar.bottom {
   bottom: 0;
+  height: 55px;
 }
 
 .gallery > .toolbar.bottom > .slide-mode-toolbar {
   left: 0;
   opacity: 1;
   position: absolute;
   visibility: visible;
   width: 100%;
 }
 
@@ skipping 107 matching lines @@
   pointer-events: none;
 }
 
 .gallery[tools][editing] [dimmed] {
   opacity: 0.2;
 }
 
 /* Filename */
 
 .gallery .filename-spacer {
+  -webkit-margin-start: 16px;
   flex: 1 0 auto;
   height: 100%;
   min-width: 140px;
   overflow: hidden;
   position: relative;
 }
 
 .gallery .filename-spacer > * {
   background-color: transparent;
   overflow: hidden;
@@ skipping 12 matching lines @@
   box-sizing: border-box;
   cursor: pointer;
   display: block;
   font-size: 120%;
   height: 22px;
   outline: none;
   overflow: hidden;
   padding: 0 3px;
   position: absolute;
   text-overflow: ellipsis;
-  top: 15px;
+  top: 13px;
   white-space: nowrap;
   width: 100%;
 }
 
 .gallery .filename-spacer .namebox[disabled] {
   -webkit-user-select: none;
   cursor: default;
 }
 
 .gallery .filename-spacer .namebox:not([disabled]):not(:focus):hover {
@@ skipping 374 matching lines @@
 .gallery > .toolbar button[disabled],
 .gallery[tools][locked] > .toolbar button {
   opacity: 0.5;
   pointer-events: none;
 }
 
 .gallery > .toolbar button[hidden] {
   display: none;
 }
 
-.gallery[mode='slide'] > .toolbar button.mode {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_mosaic.png) 1x,
-      url(../images/200/icon_mosaic.png) 2x);
+.gallery > .toolbar paper-button {
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 32px;
+  margin: 0 8px;
+  min-width: 32px;
+  width: 32px;
 }
 
-.gallery[mode='slide'] > .toolbar button.mode:active {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_mosaic_selected.png) 1x,
-      url(../images/200/icon_mosaic_selected.png) 2x);
+/* Since currently Gallery does not use shadow dom with Polymer, ::shadow
+ * selector does not work correctly. */
+.gallery > .toolbar paper-button::shadow paper-ripple,
+.gallery > .toolbar paper-button > paper-ripple {
+  color: white;
 }
 
-.gallery[mode='mosaic'] > .toolbar button.mode {
+.gallery > .toolbar paper-button.edit {
   background-image: -webkit-image-set(
-      url(../images/100/icon_1up.png) 1x,
-      url(../images/200/icon_1up.png) 2x);
+      url(../images/100/edit.png) 1x,
+      url(../images/200/edit.png) 2x);
 }
 
-.gallery[mode='mosaic'] > .toolbar button.mode:active {
+.gallery > .toolbar paper-button.print {
   background-image: -webkit-image-set(
-      url(../images/100/icon_1up_selected.png) 1x,
-      url(../images/200/icon_1up_selected.png) 2x);
+      url(../images/100/print.png) 1x,
+      url(../images/200/print.png) 2x);
 }
 
-.gallery > .toolbar button.slideshow {
+.gallery > .toolbar paper-button.delete {
   background-image: -webkit-image-set(
-      url(../images/100/icon_slideshow.png) 1x,
-      url(../images/200/icon_slideshow.png) 2x);
+      url(../images/100/delete.png) 1x,
+      url(../images/200/delete.png) 2x);
 }
 
-.gallery > .toolbar button.slideshow:active,
-.gallery > .toolbar button.slideshow[pressed] {
+.gallery > .toolbar paper-button.slide-mode {
   background-image: -webkit-image-set(
-      url(../images/100/icon_slideshow_selected.png) 1x,
-      url(../images/200/icon_slideshow_selected.png) 2x);
+      url(../images/100/slide_view.png) 1x,
+      url(../images/200/slide_view.png) 2x);
 }
 
-.gallery > .toolbar button.delete {
+.gallery > .toolbar paper-button.mosaic-mode {
   background-image: -webkit-image-set(
-      url(../images/100/icon_delete.png) 1x,
-      url(../images/200/icon_delete.png) 2x);
+      url(../images/100/mosaic_view.png) 1x,
+      url(../images/200/mosaic_view.png) 2x);
 }
 
-.gallery > .toolbar button.delete:active {
+.gallery > .toolbar paper-button.slideshow {
   background-image: -webkit-image-set(
-      url(../images/100/icon_delete_selected.png) 1x,
-      url(../images/200/icon_delete_selected.png) 2x);
+      url(../images/100/slideshow.png) 1x,
+      url(../images/200/slideshow.png) 2x);
 }
 
-.gallery > .toolbar button.edit {
+.gallery > .toolbar paper-button.share {
   background-image: -webkit-image-set(
-      url(../images/100/icon_edit.png) 1x,
-      url(../images/200/icon_edit.png) 2x);
+      url(../images/100/share.png) 1x,
+      url(../images/200/share.png) 2x);
 }
 
-.gallery > .toolbar button.edit:active,
-.gallery > .toolbar button.edit[pressed] {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_edit_selected.png) 1x,
-      url(../images/200/icon_edit_selected.png) 2x);
+.gallery[editing] > .toolbar paper-button.edit {
+  opacity: 0.5;
+  pointer-events: none;
 }
 
-.gallery > .toolbar button.print {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_print.png) 1x,
-      url(../images/200/icon_print.png) 2x);
-}
-
-.gallery > .toolbar button.print:active,
-.gallery > .toolbar button.print[pressed] {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_print_selected.png) 1x,
-      url(../images/200/icon_print_selected.png) 2x);
-}
-
-.gallery > .toolbar button.share {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_share.png) 1x,
-      url(../images/200/icon_share.png) 2x);
-}
-
-.gallery > .toolbar button.share:active,
-.gallery > .toolbar button.share[pressed] {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_share_selected.png) 1x,
-      url(../images/200/icon_share_selected.png) 2x);
-}
-
-.gallery > .toolbar button.share[disabled] {
+.gallery[mode='slide'] > .toolbar paper-button.slide-mode,
+.gallery[mode='mosaic'] > .toolbar paper-button.mosaic-mode,
+.gallery > .toolbar paper-button[disabled] {
   display: none;
 }
 
 /* Secondary toolbar (mode-specific tools) */
 
 .gallery .edit-modal {
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   bottom: 80px;
   display: -webkit-box;
@@ skipping 514 matching lines @@
   background-color: rgba(255, 0, 0, 0.3);
 }
 
 .debug-me .load-target-external-metadata::before {
   background-color: rgba(0, 255, 0, 0.3);
 }
 
 .debug-me .load-target-file-entry::before {
   background-color: rgba(0, 0, 255, 0.3);
 }