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 71ac70614b4c89b9225dd258eb0a36c75a1ee362..cef4b5091b998623965cf3e3d811d70b284cf38d 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] * {

[yoshiki, 2013/05/07 04:01:30]

Why do you specify both 'body[new-ui]' and 'body:not([new-ui])'? You can remove
them as following.

.gallery[tools][editing] *[dimmed],
.gallery[tools][editing] *[dimmed] * {

[mtomasz, 2013/05/07 04:03:42]

Body is required to override original style. Eg. if we have:

Eg. for:
body[new-ui] A { opacity: 1.0 }

A[dimmed] { opacity: 0.5 } will not override it, but
body[new-ui] A[dimmed] { opacity: 0.5 } will.

[yoshiki, 2013/05/07 04:05:55]

Got it. Please add comments for the feature. Thanks.

   pointer-events: none;
 }
 
-.gallery[tools][editing] *[dimmed] {
+body:not([new-ui]) .gallery[tools][editing] *[dimmed],
+body[new-ui] .gallery[tools][editing] *[dimmed] {

[yoshiki, 2013/05/07 04:01:30]

ditto

   opacity: 0.2;
 }
 
@@ -569,7 +575,7 @@ body[new-ui] .gallery .image-wrapper > img:not(.cached) {
   visibility: visible;
 }
 
-body .gallery > .toolbar button {
+body .gallery button {
   -webkit-box-align: center;
   -webkit-box-flex: 0;
   -webkit-box-orient: horizontal;
@@ -579,22 +585,24 @@ 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 > .toolbar > button {
+  height: 40px;
+  margin: 6px 0;
+  min-width: 40px;  /* Reset. */
+  width: 40px;
+}
+
 /* By default, labels are hidden. */
-.gallery > .toolbar button span {
+.gallery > button span {
   display: none;
 }
 
@@ -603,25 +611,25 @@ body .gallery > .toolbar button {
 
   .gallery .edit-main button {
     background-position: 5px center;
-    min-width: 0;  /* Reset. */
+    min-width: 0;  /* R. */

[yoshiki, 2013/05/07 04:01:30]

Unintentional change?

[mtomasz, 2013/05/07 09:03:30]

Done.

     padding: 0 10px 0 35px;
     width: auto;
   }
 
-  .gallery > .toolbar button span {
+  .gallery button span {
     display: inline;
   }
 
 }
 
-.gallery > .toolbar button:hover {
+body .gallery button:hover {

[yoshiki, 2013/05/07 04:01:30]

Remove 'body'. It should be unnecessary.

[mtomasz, 2013/05/07 09:03:30]

We need it. Done.

   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,

[yoshiki, 2013/05/07 04:01:30]

ditt

[mtomasz, 2013/05/07 09:03:30]

Done.

+body .gallery button[pressed],

[yoshiki, 2013/05/07 04:01:30]

ditto

[mtomasz, 2013/05/07 09:03:30]

Done.

+body .gallery button[pressed]:hover {

[yoshiki, 2013/05/07 04:01:30]

ditto

[mtomasz, 2013/05/07 09:03:30]

Done.

   background-color: rgba(240, 240, 240, 1);
   color: black;
 }
@@ -979,7 +987,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 +1025,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 +1038,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 +1353,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);
+}