Revert "Gallery: use native header."

ui/file_manager/gallery/css/gallery.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. */
 
 body {
   -webkit-user-select: none;
   font-size: 84%;
   margin: 0;
 }
 
@@ skipping 134 matching lines @@
     opacity: 1 !important;
     position: static !important;
     transform: none !important;
     visibility: visible !important;
     width: auto !important;
   }
 }
 
 /* Toolbar */
 
+.gallery > .header,
 .gallery > .toolbar {
   -webkit-box-align: stretch;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
-  background-color: rgba(40, 42, 45, 0.9);
-  border-top: 1px solid rgba(50, 50, 50, 0.8);
   display: flex;
-  height: 55px;
   left: 0;
   opacity: 0;
-  overflow: hidden;
   padding: 0 10px;
   pointer-events: none;
   position: absolute;
   right: 0;
   transition: opacity 300ms ease;
 }
 
+.gallery > .header {
+  -webkit-app-region: drag;
+  -webkit-box-align: center;
+  -webkit-box-pack: end;
+  background-color: rgba(30, 30, 30, 0.8);
+  border-bottom: 1px solid rgba(50, 50, 50, 0.8);
+  display: -webkit-box;
+  height: 45px;
+  top: 0;
+}
+
+.gallery > .toolbar {
+  background-color: rgba(40, 42, 45, 0.9);
+}
+
+.gallery .header button {
+  -webkit-app-region: no-drag;
+}
+
+.gallery > .toolbar {
+  border-top: 1px solid rgba(50, 50, 50, 0.8);
+  height: 55px;
+  overflow: hidden;
+}
+
 .gallery > .toolbar.top {
-  top: 0;
+  top: 45px; /* Header height. */
 }
 
 .gallery > .toolbar.bottom {
   bottom: 0;
 }
 
 .gallery > .toolbar.bottom > .slide-mode-toolbar {
   left: 0;
   opacity: 1;
   position: absolute;
@@ skipping 12 matching lines @@
 .gallery[editing] > .toolbar.bottom > .slide-mode-toolbar {
   opacity: 0;
   visibility: hidden;
 }
 
 .gallery[editing] > .toolbar.bottom > .edit-mode-toolbar {
   opacity: 1;
   visibility: visible;
 }
 
+.gallery[tools]:not([slideshow]) > .header,
 .gallery[tools]:not([slideshow]) > .toolbar {
   opacity: 1;
   pointer-events: auto;
 }
 
 /* Hide immediately when entering the slideshow. */
 .gallery[tools][slideshow] > .toolbar {
   transition-duration: 0ms;
 }
 
@@ skipping 342 matching lines @@
   overflow: visible;
 }
 
 .gallery[editing] .edit-bar-spacer {
   opacity: 1.0;
   pointer-events: auto;
   transition-delay: 100ms, 100ms;
   visibility: visible;
 }
 
+.gallery .header button,
 .gallery .toolbar button,
+.gallery .header button[disabled],
 .gallery .toolbar button[disabled] {
   background-color: rgba(0, 0, 0, 0);
   background-position: center;
   background-repeat: no-repeat;
   border: none;
   box-shadow: none;
   color: white;
   cursor: pointer;
   display: inline-block;
   flex: none;
   opacity: 0.99;  /* Workaround for http://crosbug.com/21065 */
   padding: 1px;  /* Instead of a border. */
   position: relative;
   z-index: 10;
 }
 
+.gallery .header button,
 .gallery .toolbar button {
   height: 40px;
   min-width: 40px;  /* Reset. */
   width: 40px;
 }
 
+.gallery .header button {
+  margin: 6px 0;
+}
+
 .gallery .toolbar button:focus {
   z-index: 11;
 }
 
 /* By default, labels are hidden. */
 .gallery > .toolbar button span {
   display: none;
 }
 
 /* Show labels if there is enough space. */
 @media (min-width: 1180px) {
 
   .gallery .edit-main button,
   .gallery .edit-main button[disabled] {
       background-position: 5px center;
     max-width: 60px;
     min-width: 0;  /* Reset. */
     padding: 0 10px 0 35px;
     width: auto;
   }
 
   .gallery > .toolbar button span {
     display: inline;
     white-space: nowrap;
   }
 
 }
 
+.gallery .header button:hover,
 .gallery .toolbar button:hover {
   background-color: rgba(31, 31, 31, 1);
   color: white;
 }
 
+.gallery .header button:active,
 .gallery .toolbar button:active,
+.gallery .header button[pressed],
 .gallery .toolbar button[pressed],
+.gallery .header button[pressed]:hover,
 .gallery .toolbar button[pressed]:hover {
   background-color: rgba(240, 240, 240, 1);
   color: black;
 }
 
 .gallery > .toolbar button.autofix {
   background-image: -webkit-image-set(
       url(../images/100/icon_autofix.png) 1x,
       url(../images/200/icon_autofix.png) 2x);
 }
@@ skipping 525 matching lines @@
 }
 
 /* Mosaic view. */
 .mosaic {
   bottom: 0;
   left: 0;
   overflow-x: scroll;
   overflow-y: hidden;
   position: absolute;
   right: 0;
-  top: 55px; /* Toolbar height. */
+  top: 100px; /* Header + Toolbar height. */
 
   /* transition-duration is set in Javascript. */
   transition-property: transform;
   transition-timing-function: linear;
 }
 
 .mosaic::-webkit-scrollbar {
   background: transparent;
 }
 
@@ skipping 139 matching lines @@
       url(../images/200/slideshow-pause.png) 2x);
 }
 
 .slideshow-toolbar > .slideshow-end {
   background-image: -webkit-image-set(
       url(../images/100/slideshow-end.png) 1x,
       url(../images/200/slideshow-end.png) 2x);
   margin-left: -2px;
 }
 
+.gallery > .header > button {
+  -webkit-margin-start: 10px;
+  cursor: default;
+  height: 32px;
+  min-width: 32px;
+  width: 32px;
+}
+
+.gallery > .header > .minimize-button {
+  background: -webkit-image-set(
+      url(chrome://resources/images/apps/topbar_button_minimize.png) 1x,
+      url(chrome://resources/images/2x/apps/topbar_button_minimize.png) 2x)
+      center;
+}
+
+.gallery > .header > .maximize-button {
+  background: -webkit-image-set(
+      url(chrome://resources/images/apps/topbar_button_maximize.png) 1x,
+      url(chrome://resources/images/2x/apps/topbar_button_maximize.png) 2x)
+      center;
+}
+
+.gallery > .header > .close-button {
+  background: -webkit-image-set(
+      url(chrome://resources/images/apps/topbar_button_close.png) 1x,
+      url(chrome://resources/images/2x/apps/topbar_button_close.png) 2x)
+      center;
+}
+
 .debug-me .load-target-content-metadata::before,
 .debug-me .load-target-external-metadata::before,
 .debug-me .load-target-file-entry::before {
   bottom: 0;
   content: '';
   display: block;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
   z-index: 1;
 }
 
 .debug-me .load-target-content-metadata::before {
   background-color: rgba(255, 0, 0, 0.3);
 }
 
 .debug-me .load-target-external-metadata::before {
   background-color: rgba(0, 255, 0, 0.3);
 }
 
 .debug-me .load-target-file-entry::before {
   background-color: rgba(0, 0, 255, 0.3);
 }