Add window buttons (close and maximize) to the Files.app's new UI.

chrome/browser/resources/file_manager/css/gallery.css

Index: chrome/browser/resources/file_manager/css/gallery.css
diff --git a/chrome/browser/resources/file_manager/css/gallery.css b/chrome/browser/resources/file_manager/css/gallery.css
index e7f15b9627b443bc2e3bbe1c82a975aab8885bff..79a7a53215b27abccada857f8260bc70c7ec8123 100644
--- a/chrome/browser/resources/file_manager/css/gallery.css
+++ b/chrome/browser/resources/file_manager/css/gallery.css
@@ -28,7 +28,7 @@ body {
 
 /* We actually want (left,top) to be (0,0) but for some weird reason
   this triggers :hover style on page reload which is ugly. */
-.gallery > .close {
+.gallery > .back-button {
   cursor: pointer;
   left: 1px;
   position: absolute;
@@ -36,14 +36,14 @@ body {
   z-index: 200;
 }
 
-body[new-ui] .tools .gallery > .close {
+body[new-ui] .tools .gallery > .back-button {
   opacity: 0;
 }
 
 /* The close icon is in a nested div so that its opacity can be manipulated
    independently from its parent (which can be dimmed when the crop frame
    overlaps it) */
-.gallery > .close div {
+.gallery > .back-button div {
   background-image: -webkit-image-set(
     url('../images/gallery/back_to_files.png') 1x,
     url('../images/gallery/2x/back_to_files.png') 2x);
@@ -54,11 +54,11 @@ body[new-ui] .tools .gallery > .close {
   width: 64px;
 }
 
-.gallery[tools] > .close div {
+.gallery[tools] > .back-button div {
   opacity: 0.5;
 }
 
-.gallery[tools] > .close div:hover {
+.gallery[tools] > .back-button div:hover {
   opacity: 1;
 }
 
@@ -179,9 +179,8 @@ body[new-ui] .gallery > .header,
   background-color: rgba(18, 18, 18, 0.875);
   display: -webkit-box;
   left: 0;
-  min-width: 800px;
   opacity: 0;
-  padding: 0 8px;
+  padding: 0 10px;
   pointer-events: none;
   position: absolute;
   right: 0;
@@ -193,7 +192,10 @@ body[new-ui] .gallery > .toolbar {
 }
 
 body[new-ui] .gallery > .header {
+  -webkit-box-align: center;
+  -webkit-box-pack: end;
   border-bottom: 1px solid rgba(50, 50, 50, 0.8);
+  display: -webkit-box;
   height: 45px;
   top: 0;
 }
@@ -202,6 +204,7 @@ body[new-ui] .gallery > .header {
   border-top: 1px solid rgba(31, 31, 31, 0.7);
   bottom: 0;
   height: 55px;
+  min-width: 800px;
 }
 
 body[new-ui] .gallery > .toolbar {
@@ -298,12 +301,15 @@ body[new-ui] .gallery[tools]:not([slideshow]) > .header,
 
 /* The editor marks elements with 'dimmed' attribute to get them out of the way
  of the crop frame */
-.gallery[tools][editing] *[dimmed],
-.gallery[tools][editing] *[dimmed] * {
+body:not([new-ui]) .gallery[tools][editing] *[dimmed],
+body[new-ui] .gallery[tools][editing] *[dimmed],
+body:not([new-ui]) .gallery[tools][editing] *[dimmed] *,
+body[new-ui] .gallery[tools][editing] *[dimmed] * {
   pointer-events: none;
 }
 
-.gallery[tools][editing] *[dimmed] {
+body:not([new-ui]) .gallery[tools][editing] *[dimmed],
+body[new-ui] .gallery[tools][editing] *[dimmed] {
   opacity: 0.2;
 }
 
@@ -569,7 +575,8 @@ body[new-ui] .gallery .image-wrapper > img:not(.cached) {
   visibility: visible;
 }
 
-body .gallery > .toolbar button {
+body .gallery button,
+body .gallery button[disabled] {
   -webkit-box-align: center;
   -webkit-box-flex: 0;
   -webkit-box-orient: horizontal;
@@ -579,20 +586,22 @@ body .gallery > .toolbar button {
   background-position: center;
   background-repeat: no-repeat;
   border: none;
-  box-sizing: content-box;
   color: white;
   cursor: pointer;
   display: -webkit-box;
-  height: 40px;
-  margin: 8px 0 7px 3px;
-  min-width: 40px;  /* Reset. */
   opacity: 0.99;  /* Workaround for http://crosbug.com/21065 */
-  padding: 0;
+  padding: 1px;  /* Instead of a border. */
   position: relative;
-  width: 40px;
   z-index: 10;
 }
 
+body .gallery button {
+  height: 40px;
+  margin: 6px 0;
+  min-width: 40px;  /* Reset. */
+  width: 40px;
+}
+
 /* By default, labels are hidden. */
 .gallery > .toolbar button span {
   display: none;
@@ -614,14 +623,14 @@ body .gallery > .toolbar button {
 
 }
 
-.gallery > .toolbar button:hover {
+body .gallery button:hover {
   background-color: rgba(31, 31, 31, 1);
   color: white;
 }
 
-.gallery > .toolbar button:active,
-.gallery > .toolbar button[pressed],
-.gallery > .toolbar button[pressed]:hover {
+body .gallery button:active,
+body .gallery button[pressed],
+body .gallery button[pressed]:hover {
   background-color: rgba(240, 240, 240, 1);
   color: black;
 }
@@ -979,7 +988,7 @@ body .gallery > .toolbar button {
   -webkit-box-align: center;
 }
 
-.gallery .prompt-wrapper[pos=center] .close {
+.gallery .prompt-wrapper[pos=center] .back-button {
   display: none;
 }
 
@@ -1017,7 +1026,7 @@ body .gallery > .toolbar button {
   padding-right: 10px;
 }
 
-.gallery .prompt .close {
+.gallery .prompt .back-button {
   background-image: -webkit-image-set(
     url('../images/gallery/butterbar_close_x.png') 1x,
     url('../images/gallery/2x/butterbar_close_x.png') 2x);
@@ -1030,7 +1039,7 @@ body .gallery > .toolbar button {
   width: 16px;
 }
 
-.gallery .prompt .close:hover {
+.gallery .prompt .back-button:hover {
   background-color: rgba(81, 81, 81, 1);
   opacity: 1.0;
 }
@@ -1345,3 +1354,21 @@ body .gallery > .toolbar button {
     url('../images/gallery/2x/slideshow-end.png') 2x);
   margin-left: -2px;
 }
+
+body[new-ui] .gallery > .header > button {
+  height: 27px;
+  min-width: 29px;
+  width: 29px;
+}
+
+body[new-ui] .gallery > .header > .maximize-button {
+  background-image: -webkit-image-set(
+    url('../images/files/ui/new-ui/topbar_button_maximize.png') 1x,
+    url('../images/files/ui/new-ui/2x/topbar_button_maximize.png') 2x);
+}
+
+body[new-ui] .gallery > .header > .close-button {
+  background-image: -webkit-image-set(
+    url('../images/files/ui/new-ui/topbar_button_close.png') 1x,
+    url('../images/files/ui/new-ui/2x/topbar_button_close.png') 2x);
+}