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

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

 /* Copyright (c) 2012 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. */
 
 body {
   -webkit-user-select: none;
   font-family: Open Sans, Droid Sans Fallback, sans-serif;
   font-size: 84%;
   margin: 0;
 }
@@ skipping 10 matching lines @@
 
 /* Common background for both mosaic and slide mode. */
 .gallery .content {
   background-color: black;
 }
 
 /* Close button */
 
 /* 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;
   top: 1px;
   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);
   background-position: center center;
   background-repeat: no-repeat;
   height: 40px;
   opacity: 0;
   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;
 }
 
 /* Image container and canvas elements */
 
 .gallery .image-container {
   cursor: none;   /* Only visible when the toolbar is active */
   height: 100%;
   position: absolute;
   width: 100%;
@@ skipping 100 matching lines @@
 
 body[new-ui] .gallery > .header,
 .gallery > .toolbar {
   -webkit-box-align: stretch;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
   -webkit-transition: opacity 300ms ease;
   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;
 }
 
 body[new-ui] .gallery > .header,
 body[new-ui] .gallery > .toolbar {
   background-color: rgba(30, 30, 30, 0.8);
 }
 
 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;
 }
 
 .gallery > .toolbar {
   border-top: 1px solid rgba(31, 31, 31, 0.7);
   bottom: 0;
   height: 55px;
+  min-width: 800px;
 }
 
 body[new-ui] .gallery > .toolbar {
   border-top: 1px solid rgba(50, 50, 50, 0.8);
   bottom: 0;
   height: 55px;
 }
 
 body[new-ui] .gallery[tools]:not([slideshow]) > .header,
 .gallery[tools]:not([slideshow]) > .toolbar {
@@ skipping 76 matching lines @@
 .gallery[tools][editing][mousedrag] * {
   pointer-events: none;
 }
 
 .gallery[tools][editing][mousedrag] .image-container {
   pointer-events: auto;
 }
 
 /* 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;
 }
 
 /* Filename */
 
 .gallery .filename-spacer {
   position: relative;
   width: 270px;
 }
 
@@ skipping 245 matching lines @@
   overflow: visible;
 }
 
 .gallery[editing] .edit-bar-spacer {
   -webkit-transition-delay: 100ms, 100ms;
   opacity: 1.0;
   pointer-events: auto;
   visibility: visible;
 }
 
-body .gallery > .toolbar button {
+body .gallery button {
   -webkit-box-align: center;
   -webkit-box-flex: 0;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: end;
   -webkit-box-shadow: none;
   background-color: rgba(0, 0, 0, 0);
   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;
 }
 
 /* Show labels if there is enough space. */
 @media (min-width: 1000px) {
 
   .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;
 }
 
 .gallery > .toolbar button.autofix {
   background-image: -webkit-image-set(
     url('../images/gallery/icon_autofix.png') 1x,
     url('../images/gallery/2x/icon_autofix.png') 2x);
 }
 
@@ skipping 337 matching lines @@
 }
 
 .gallery .prompt-wrapper[pos=top] {
   -webkit-box-align: start;
 }
 
 .gallery .prompt-wrapper[pos=center] {
   -webkit-box-align: center;
 }
 
-.gallery .prompt-wrapper[pos=center] .close {
+.gallery .prompt-wrapper[pos=center] .back-button {
   display: none;
 }
 
 .gallery .prompt-wrapper > div.dimmable {
   -webkit-transition: opacity 220ms ease;
   opacity: 1;
 }
 
 .gallery .prompt {
   -webkit-box-align: center;
@@ skipping 17 matching lines @@
 
 .gallery .prompt[state='fadeout'] {
   opacity: 0;
   top: 0;
 }
 
 .gallery .prompt-wrapper[pos=top] .prompt {
   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);
   background-position: center center;
   background-repeat: no-repeat;
   height: 16px;
   margin-left: 16px;
   opacity: 0.65;
   pointer-events: auto;
   width: 16px;
 }
 
-.gallery .prompt .close:hover {
+.gallery .prompt .back-button:hover {
   background-color: rgba(81, 81, 81, 1);
   opacity: 1.0;
 }
 
 .gallery .share-menu {
   -webkit-border-radius: 1px;
   -webkit-box-align: stretch;
   -webkit-box-orient: vertical;
   -webkit-box-pack: start;
   -webkit-transition: opacity 500ms ease-in-out;
@@ skipping 294 matching lines @@
     url('../images/gallery/slideshow-pause.png') 1x,
     url('../images/gallery/2x/slideshow-pause.png') 2x);
 }
 
 .slideshow-toolbar > .slideshow-end {
   background-image: -webkit-image-set(
     url('../images/gallery/slideshow-end.png') 1x,
     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);
+}