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

ui/file_manager/gallery/css/gallery.css

Index: ui/file_manager/gallery/css/gallery.css
diff --git a/ui/file_manager/gallery/css/gallery.css b/ui/file_manager/gallery/css/gallery.css
index 8194639b4d1f2e39f0de4b5bac5244f5103c56b0..a8ef0bf6d8a58cef3b3dbc5ada5341194381bb9e 100644
--- a/ui/file_manager/gallery/css/gallery.css
+++ b/ui/file_manager/gallery/css/gallery.css
@@ -43,7 +43,7 @@ input[type='checkbox']:checked {
 }
 
 /* Common background for both mosaic and slide mode. */
-.gallery .content {
+.gallery > .content {
   background-color: black;
 }
 
@@ -157,13 +157,12 @@ input[type='checkbox']:checked {
   -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;
@@ -176,6 +175,7 @@ input[type='checkbox']:checked {
 
 .gallery > .toolbar.bottom {
   bottom: 0;
+  height: 55px;
 }
 
 .gallery > .toolbar.bottom > .slide-mode-toolbar {
@@ -303,6 +303,7 @@ input[type='checkbox']:checked {
 /* Filename */
 
 .gallery .filename-spacer {
+  -webkit-margin-start: 16px;
   flex: 1 0 auto;
   height: 100%;
   min-width: 140px;
@@ -335,7 +336,7 @@ input[type='checkbox']:checked {
   padding: 0 3px;
   position: absolute;
   text-overflow: ellipsis;
-  top: 15px;
+  top: 13px;
   white-space: nowrap;
   width: 100%;
 }
@@ -730,95 +731,72 @@ input[type='checkbox']:checked {
   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[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);
-}
-
-.gallery[mode='mosaic'] > .toolbar button.mode {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_1up.png) 1x,
-      url(../images/200/icon_1up.png) 2x);
-}
-
-.gallery[mode='mosaic'] > .toolbar button.mode:active {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_1up_selected.png) 1x,
-      url(../images/200/icon_1up_selected.png) 2x);
-}
-
-.gallery > .toolbar button.slideshow {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_slideshow.png) 1x,
-      url(../images/200/icon_slideshow.png) 2x);
+.gallery > .toolbar paper-button {
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 32px;
+  margin: 0 8px;
+  min-width: 32px;
+  width: 32px;
 }
 
-.gallery > .toolbar button.slideshow:active,
-.gallery > .toolbar button.slideshow[pressed] {
-  background-image: -webkit-image-set(
-      url(../images/100/icon_slideshow_selected.png) 1x,
-      url(../images/200/icon_slideshow_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 > .toolbar button.delete {
+.gallery > .toolbar paper-button.edit {
   background-image: -webkit-image-set(
-      url(../images/100/icon_delete.png) 1x,
-      url(../images/200/icon_delete.png) 2x);
+      url(../images/100/edit.png) 1x,
+      url(../images/200/edit.png) 2x);
 }
 
-.gallery > .toolbar button.delete:active {
+.gallery > .toolbar paper-button.print {
   background-image: -webkit-image-set(
-      url(../images/100/icon_delete_selected.png) 1x,
-      url(../images/200/icon_delete_selected.png) 2x);
+      url(../images/100/print.png) 1x,
+      url(../images/200/print.png) 2x);
 }
 
-.gallery > .toolbar button.edit {
+.gallery > .toolbar paper-button.delete {
   background-image: -webkit-image-set(
-      url(../images/100/icon_edit.png) 1x,
-      url(../images/200/icon_edit.png) 2x);
+      url(../images/100/delete.png) 1x,
+      url(../images/200/delete.png) 2x);
 }
 
-.gallery > .toolbar button.edit:active,
-.gallery > .toolbar button.edit[pressed] {
+.gallery > .toolbar paper-button.slide-mode {
   background-image: -webkit-image-set(
-      url(../images/100/icon_edit_selected.png) 1x,
-      url(../images/200/icon_edit_selected.png) 2x);
+      url(../images/100/slide_view.png) 1x,
+      url(../images/200/slide_view.png) 2x);
 }
 
-.gallery > .toolbar button.print {
+.gallery > .toolbar paper-button.mosaic-mode {
   background-image: -webkit-image-set(
-      url(../images/100/icon_print.png) 1x,
-      url(../images/200/icon_print.png) 2x);
+      url(../images/100/mosaic_view.png) 1x,
+      url(../images/200/mosaic_view.png) 2x);
 }
 
-.gallery > .toolbar button.print:active,
-.gallery > .toolbar button.print[pressed] {
+.gallery > .toolbar paper-button.slideshow {
   background-image: -webkit-image-set(
-      url(../images/100/icon_print_selected.png) 1x,
-      url(../images/200/icon_print_selected.png) 2x);
+      url(../images/100/slideshow.png) 1x,
+      url(../images/200/slideshow.png) 2x);
 }
 
-.gallery > .toolbar button.share {
+.gallery > .toolbar paper-button.share {
   background-image: -webkit-image-set(
-      url(../images/100/icon_share.png) 1x,
-      url(../images/200/icon_share.png) 2x);
+      url(../images/100/share.png) 1x,
+      url(../images/200/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[editing] > .toolbar paper-button.edit {
+  opacity: 0.5;
+  pointer-events: none;
 }
 
-.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;
 }