Files.app: Update toolbar layout and icons on it.

ui/file_manager/file_manager/foreground/css/file_manager.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. */
 
 /* Special attribute used in HTML to hide elements. */
 body[type='folder'] [invisibleif~='folder'],
 body[type='upload-folder'] [invisibleif~='upload-folder'],
 body[type='saveas-file'] [invisibleif~='saveas-file'],
 body[type='open-file'] [invisibleif~='open-file'],
 body[type='open-multi-file'] [invisibleif~='open-multi-file'],
@@ skipping 264 matching lines @@
   color: white;
 }
 
 body.selecting button,
 body.selecting button:hover {
   color: rgb(90, 90, 90);
 }
 
 .dialog-header .icon-button {
   -webkit-margin-end: 4px;
-  -webkit-margin-start: 0;
-  background: transparent;
+  -webkit-margin-start: 12px;
+  background-color: transparent;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
   border: 0;
+  border-radius: 16px;
   height: 32px;
   line-height: 16px;
   min-width: 32px;
   padding: 0;
   width: 32px;
 }
 
+.dialog-header .icon-button paper-ripple {
+  color: black;
+}
+
+body.selecting .dialog-header .icon-button paper-ripple {
+  rgb(90, 90, 90);
+}
+
 .dialog-header .icon-button:hover,
 .dialog-header .icon-button:focus,
 .dialog-header .combobutton:hover,
 .dialog-header .combobutton:focus {
-  background: rgba(204, 204, 204, 0.20);
+  background-color: rgba(90, 90, 90, 0.15);
 }
 
 body.selecting .dialog-header .icon-button:hover,
 body.selecting .dialog-header .icon-button:focus,
 body.selecting .dialog-header .combobutton:hover,
 body.selecting .dialog-header .combobutton:focus {
-  background: rgba(153, 153, 153, 0.20);
+  background-color: rgba(153, 153, 153, 0.20);
 }
 
 .dialog-header .icon-button[disabled]:not(.manual-display) {
   display: none !important;
 }
 
-.dialog-header core-icon {
+.dialog-header core-icon,
+.dialog-header .icon {
   height: 16px;
   width: 16px;
 }
 
 .dialog-header paper-button::shadow > .button-content {
   padding: 8px;
 }
 
 .dialog-header button.icon-button {
   -webkit-app-region: no-drag;
   background-color: transparent;
   background-image: none;
   background-position: center;
   background-repeat: no-repeat;
   border: 0;
   box-shadow: none;
   display: block;
   height: 32px;
   min-width: 0;
   outline: none;
   padding: 0;
   width: 32px;
 }
 
 .dialog-header button.icon-button > core-icon {
   margin: 8px;
 }
 
+#search-button {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/search_white.png) 1x,
+      url(../images/files/ui/2x/search_white.png) 2x);
+}
+
+body.selecting #search-button {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/search.png) 1x,
+      url(../images/files/ui/2x/search.png) 2x);
+}
+
+#share-button {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/share_white.png) 1x,
+      url(../images/files/ui/2x/share_white.png) 2x);
+}
+
+body.selecting #share-button {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/share.png) 1x,
+      url(../images/files/ui/2x/share.png) 2x);
+}
+
+#delete-button {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/delete_white.png) 1x,
+      url(../images/files/ui/2x/delete_white.png) 2x);
+}
+
+body.selecting #delete-button {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/delete.png) 1x,
+      url(../images/files/ui/2x/delete.png) 2x);
+}
+
+#view-button {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/view_list_white.png) 1x,
+      url(../images/files/ui/2x/view_list_white.png) 2x);
+}
+
+body.selecting #view-button {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/view_list.png) 1x,
+      url(../images/files/ui/2x/view_list.png) 2x);
+}
+
+#view-button.thumbnail {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/view_thumbnail_white.png) 1x,
+      url(../images/files/ui/2x/view_thumbnail_white.png) 2x);
+}
+
+body.selecting #view-button.thumbnail {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/view_thumbnail.png) 1x,
+      url(../images/files/ui/2x/view_thumbnail.png) 2x);
+}
+
+#gear-button {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/menu_white.png) 1x,
+      url(../images/files/ui/2x/menu_white.png) 2x);
+}
+
+body.selecting #gear-button {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/menu.png) 1x,
+      url(../images/files/ui/2x/menu.png) 2x);
+}
+
 #cloud-import-details-button {
   margin-left: -15px;
 }
 
 #cloud-import-details {
   background-color: white;
   border-radius: 4px;
   box-shadow: 2px 2px 6px #555555;
   line-height: 1.5em;
   position: absolute;
@@ skipping 67 matching lines @@
 #files-selected-label {
   display: none;
   margin: 0 10px;
 }
 
 body.selecting #files-selected-label {
   display: block;
 }
 
 #cancel-selection-button {
+  margin: 0 8px;
   text-transform: none;
   display: none

[yawano, 2015/02/17 09:36:04]

Order should be display < margin.

[fukino, 2015/02/17 09:57:25]

Done.

 }
 
+#cancel-selection-button .icon-arrow-back {
+  -webkit-margin-end: 8px;
+  background-image: -webkit-image-set(
+      url(../images/files/ui/back.png) 1x,
+      url(../images/files/ui/2x/back.png) 2x);
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 16px;
+  width: 16px;
+}
+
 #cancel-selection-button-wrapper {
   width: 240px;  /* initial value, same as .dialog-navigation-list's width. */
 }
 
 #cancel-selection-button > core-icon {
   -webkit-margin-end: 6px;
 }
 
 body.selecting #cancel-selection-button {
   display: inline-block;
@@ skipping 172 matching lines @@
   white-space: nowrap;
 }
 
 /* The final breadcrumb, representing the current directory. */
 .breadcrumb-path.breadcrumb-last {
   cursor: default;
 }
 
 /* The > arrow between breadcrumbs. */
 .breadcrumbs .separator {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/arrow_right_white.png) 1x,
+      url(../images/files/ui/2x/arrow_right_white.png) 2x);
   height: 16px;
+  margin: 0 5px;
   width: 16px;
 }
 
 html[dir='rtl'] .breadcrumbs .separator {
   -webkit-transform: scaleX(-1);
 }
 
 #filename-input-box input {
   border: 1px solid #c8c8c8;
   border-radius: 1px;
@@ skipping 1192 matching lines @@
   padding: 20px 15px;
 }
 
 .text-measure {
   pointer-events: none;
   position: absolute;
   top: 0;
   visibility: hidden;
   z-index: -1;
 }