Revert "Gallery: use native header."

This reverts commit 6a31c05f.

TBR=fukino@chromium.org
BUG=488227

Review URL: https://codereview.chromium.org/1173863003.

Cr-Commit-Position: refs/heads/master@{#333680}

ui/file_manager/gallery/css/gallery.css

@@ -152,17 +152,14 @@ input[type='checkbox']:checked {
 
 /* 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;
@@ -170,10 +167,35 @@ input[type='checkbox']:checked {
   transition: opacity 300ms ease;
 }
 
-.gallery > .toolbar.top {
+.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: 45px; /* Header height. */
+}
+
 .gallery > .toolbar.bottom {
   bottom: 0;
 }
@@ -204,6 +226,7 @@ input[type='checkbox']:checked {
   visibility: visible;
 }
 
+.gallery[tools]:not([slideshow]) > .header,
 .gallery[tools]:not([slideshow]) > .toolbar {
   opacity: 1;
   pointer-events: auto;
@@ -566,7 +589,9 @@ input[type='checkbox']:checked {
   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;
@@ -583,12 +608,17 @@ input[type='checkbox']:checked {
   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;
 }
@@ -617,13 +647,17 @@ input[type='checkbox']:checked {
 
 }
 
+.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;
@@ -1169,7 +1203,7 @@ input[type='checkbox']:checked {
   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;
@@ -1329,6 +1363,35 @@ input[type='checkbox']:checked {
   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 {

ui/file_manager/gallery/js/background.js

@@ -9,13 +9,11 @@
  */
 var windowCreateOptions = {
   id: 'gallery',
-  outerBounds: {
+  innerBounds: {
     minWidth: 820,
     minHeight: 554
   },
-  frame: {
-    color: '#1E2023'
-  }
+  frame: 'none'
 };
 
 /**

ui/file_manager/gallery/js/gallery.js

@@ -29,6 +29,15 @@ function Gallery(volumeManager) {
    */
   this.context_ = {
     appWindow: chrome.app.window.current(),
+    onClose: function() { window.close(); },
+    onMaximize: function() {
+      var appWindow = chrome.app.window.current();
+      if (appWindow.isMaximized())
+        appWindow.restore();
+      else
+        appWindow.maximize();
+    },
+    onMinimize: function() { chrome.app.window.current().minimize(); },
     onAppRegionChanged: function() {},
     readonlyDirName: '',
     displayStringFunction: function() { return ''; },
@@ -90,6 +99,29 @@ function Gallery(volumeManager) {
   this.topToolbar_ = queryRequiredElement(document, '#top-toolbar');
   this.bottomToolbar_ = queryRequiredElement(document, '#bottom-toolbar');
 
+  var preventDefault = function(event) { event.preventDefault(); };
+
+  var minimizeButton = util.createChild(this.header_,
+                                        'minimize-button tool dimmable',
+                                        'button');
+  minimizeButton.tabIndex = -1;
+  minimizeButton.addEventListener('click', this.onMinimize_.bind(this));
+  minimizeButton.addEventListener('mousedown', preventDefault);
+
+  var maximizeButton = util.createChild(this.header_,
+                                        'maximize-button tool dimmable',
+                                        'button');
+  maximizeButton.tabIndex = -1;
+  maximizeButton.addEventListener('click', this.onMaximize_.bind(this));
+  maximizeButton.addEventListener('mousedown', preventDefault);
+
+  var closeButton = util.createChild(this.header_,
+                                     'close-button tool dimmable',
+                                     'button');
+  closeButton.tabIndex = -1;
+  closeButton.addEventListener('click', this.onClose_.bind(this));
+  closeButton.addEventListener('mousedown', preventDefault);
+
   this.filenameSpacer_ = queryRequiredElement(this.topToolbar_,
       '.filename-spacer');
   this.filenameEdit_ = util.createChild(this.filenameSpacer_,
@@ -387,6 +419,45 @@ Gallery.prototype.loadInternal_ = function(entries, selectedEntries) {
   });
 };
 
+/**
+ * Handles user's 'Close' action.
+ * @private
+ */
+Gallery.prototype.onClose_ = function() {
+  this.executeWhenReady(this.context_.onClose);
+};
+
+/**
+ * Handles user's 'Maximize' action (Escape or a click on the X icon).
+ * @private
+ */
+Gallery.prototype.onMaximize_ = function() {
+  this.executeWhenReady(this.context_.onMaximize);
+};
+
+/**
+ * Handles user's 'Maximize' action (Escape or a click on the X icon).
+ * @private
+ */
+Gallery.prototype.onMinimize_ = function() {
+  this.executeWhenReady(this.context_.onMinimize);
+};
+
+/**
+ * Executes a function when the editor is done with the modifications.
+ * @param {function()} callback Function to execute.
+ */
+Gallery.prototype.executeWhenReady = function(callback) {
+  this.currentMode_.executeWhenReady(callback);
+};
+
+/**
+ * @return {!Object} File manager private API.
+ */
+Gallery.getFileManagerPrivate = function() {
+  return chrome.fileManagerPrivate || window.top.chrome.fileManagerPrivate;
+};
+
 /**
  * @return {boolean} True if some tool is currently active.
  */

ui/file_manager/gallery/js/slide_mode.js

@@ -203,7 +203,6 @@ function SlideMode(container, content, topToolbar, bottomToolbar, prompt,
    */
   this.spinnerTimer_ = null;
 
-  this.context_.appWindow.onRestored.addListener(this.onRestored_.bind(this));
   window.addEventListener('resize', this.onResize_.bind(this));
 
   // ----------------------------------------------------------------
@@ -1114,9 +1113,7 @@ SlideMode.prototype.onKeyDown = function(event) {
 
   if (this.isSlideshowOn_()) {
     switch (keyID) {
-      // Escape key is captured by the platform to exit full screen. We handle
-      // it by onRestored event.
-
+      case 'U+001B':  // Escape exits the slideshow.
       case 'MediaStop':
         this.stopSlideshow_(event);
         break;
@@ -1220,17 +1217,6 @@ SlideMode.prototype.onKeyDown = function(event) {
   return true;
 };
 
-/**
- * Restored event handler.
- * @private
- */
-SlideMode.prototype.onRestored_ = function() {
-  // Leave slide show since the window should not be in full screen when
-  // onRestored event is dispatched.
-  if (this.isSlideshowOn_())
-    this.stopSlideshow_();
-};
-
 /**
  * Resize handler.
  * @private

ui/file_manager/integration_tests/gallery/open_image_files.js

@@ -16,7 +16,7 @@ function openSingleImage(testVolumeName, volumeType) {
   var launchedPromise = launch(testVolumeName, volumeType, [ENTRIES.desktop]);
   return launchedPromise.then(function(args) {
     var WIDTH = 880;
-    var HEIGHT = 603; /* Inner height 570px + native header 33px. */
+    var HEIGHT = 570;
     var appId = args.appId;
     var resizedWindowPromise = gallery.callRemoteTestUtil(
         'resizeWindow', appId, [WIDTH, HEIGHT]