Move preview panel's components to toolbar and footer.

ui/file_manager/file_manager/foreground/css/file_manager.css

Index: ui/file_manager/file_manager/foreground/css/file_manager.css
diff --git a/ui/file_manager/file_manager/foreground/css/file_manager.css b/ui/file_manager/file_manager/foreground/css/file_manager.css
index aa22019f8ec895001df96b97341b3a8b81dd8132..911855e7af5348cbb1c05a4de8f6b6e65d8a5649 100644
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css
+++ b/ui/file_manager/file_manager/foreground/css/file_manager.css
@@ -141,7 +141,7 @@ a:focus {
   min-width: 100px;
   overflow: hidden;
   position: relative;
-  width: 272px;
+  width: 240px;
 }
 
 .dialog-navigation-list-contents {
@@ -278,21 +278,37 @@ div.splitter {
   flex: auto;
 }
 
+.dialog-header button {
+  text-transform: uppercase;
+}
+
 .dialog-header button,
-.dialog-header paper-button {
+.dialog-header button:hover {
+  color: white;
+}
+
+.dialog-header .icon-button {
+  -webkit-margin-end: 4px;
+  -webkit-margin-start: 0;
+  background: transparent;
+  border: 0;
   height: 32px;
-  margin-right: 4px;
+  line-height: 16px;
   min-width: 32px;
+  padding: 0;
   width: 32px;
 }
 
-.dialog-header button,
-.dialog-header button:hover {
-  color: white;
+.dialog-header .icon-button:hover,
+.dialog-header .icon-button:focus {
+  background: rgba(204, 204, 204, 0.15);
+}
+
+.dialog-header .icon-button[disabled] {
+  display: none !important;
 }
 
-.dialog-header button > core-icon,
-.dialog-header paper-button > core-icon {
+.dialog-header .icon-button > core-icon {
   height: 16px;
   width: 16px;
 }
@@ -301,10 +317,8 @@ div.splitter {
   padding: 8px;
 }
 
-#gear-button,
-#cloud-import-button {
+.dialog-header button.icon-button {
   -webkit-app-region: no-drag;
-  -webkit-margin-end: 10px;
   background-color: transparent;
   background-image: none;
   background-position: center;
@@ -319,11 +333,17 @@ div.splitter {
   width: 32px;
 }
 
-#gear-button > core-icon,
-#cloud-import-button > core-icon {
+.dialog-header button.icon-button > core-icon {
   margin: 8px;
 }
 
+#files-selected-label {
+  /* TODO(fukino): Move dynamically with the navigation area's separator. */
+  left: 252px;
+  position: absolute;
+  top: 18px;
+}
+
 /* Search box */
 #search-box {
   display: flex;
@@ -1135,24 +1155,6 @@ li[renaming=''] .filename-label {
   flex: auto;
 }
 
-#delete-button {
-  min-width: 21px;  /* overrride */
-  padding: 0;  /* overrride */
-  width: 21px;
-}
-
-#delete-button::before {
-  /* Background image should be specified in the before pseudo element because
-   * border image fill is specified to delete-button. */
-  background: -webkit-image-set(
-    url(../images/files/ui/onbutton_trash.png) 1x,
-    url(../images/files/ui/2x/onbutton_trash.png) 2x) no-repeat center;
-  content: '';
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
 #delete-button[disabled] {
   display: none;
 }