Add the window decoration buttons and restyle the dialog's top bar.

This patch adds the maximize and close buttons. Moreover, the gear button as well as the search box has been restyled to match the recent spec. Along the way, cleared some css.

TEST=Run with --file-manager-new-ui. Check also if the legacy old ui is not broken.
BUG=226912

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

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@194146 0039d316-1c4b-4281-b951-d872f2087c98

11 files changed, 103 insertions, 64 deletions

diff --git a/chrome/browser/resources/file_manager/css/common.css b/chrome/browser/resources/file_manager/css/common.css
index 9d2e50a..d94a533 100644
--- a/chrome/browser/resources/file_manager/css/common.css
+++ b/chrome/browser/resources/file_manager/css/common.css
@@ -118,7 +118,8 @@ input.common[type='checkbox']::after {
 }
 
 .buttonbar.right {
-  float: right;
+  -webkit-box-flex: 1.0;
+  -webkit-box-pack: end;
 }
 
 .buttonbar button:first-child {
@@ -153,7 +154,6 @@ input.common[type='checkbox']::after {
   box-sizing: content-box;
   color: #444;
   cursor: default;
-  display: inline-block;
   font-size: 13px;
   height: 27px;
   line-height: 27px;
diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index 4f172a1..6c16d73 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -83,6 +83,10 @@ body[new-ui] ::-webkit-scrollbar-thumb {
   z-index: 2;
 }
 
+body[new-ui] #butter-bar {
+  -webkit-app-region: no-drag;
+}
+
 #butter-bar:not(.visible) {
   opacity: 0;
   pointer-events: none;
@@ -398,14 +402,33 @@ body[new-ui] #directory-tree:focus:hover .tree-row[anchor]:hover {
 
 body[new-ui] .dialog-header {
   -webkit-app-region: drag;
+  -webkit-margin-start: 7px;
 }
 
 body[new-ui] .dialog-header #search-box,
 body[new-ui] .dialog-header #autocomplete-list,
-body[new-ui] .dialog-header .buttonbar {
+body[new-ui] .dialog-header .buttonbar button {
   -webkit-app-region: no-drag;
 }
 
+body[new-ui] .dialog-header #gear-button {
+  background-image: -webkit-image-set(
+    url('../images/files/ui/new-ui/topbar_button_settings.png') 1x,
+    url('../images/files/ui/new-ui/2x/topbar_button_settings.png') 2x);
+}
+
+body[new-ui] .dialog-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] .dialog-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);
+}
+
 body[maximized][type='full-page'] .dialog-header {
   -webkit-padding-end: 75px;
 }
@@ -554,31 +577,18 @@ body[new-ui] .breadcrumb-path:not(.breadcrumb-last) {
   width: 25px;
 }
 
-.dialog-header div[role=button] {
-  -webkit-border-radius: 2px;
-  -webkit-transition: border-color 130ms linear;
-  background-color: transparent;
-  background-position: center center;
+body[new-ui] .dialog-header button {
+  background-image: none;
+  background-position: center;
   background-repeat: no-repeat;
-  border: 1px solid transparent;
-  height: 29px;
+  min-width: 29px;
+  padding: 0;
   width: 29px;
 }
 
-.dialog-header div[role=button]:focus {
-  -webkit-transition: border-color 200ms;
-  border-color: rgb(77, 144, 254);
-  outline: none;
-}
-
-.dialog-header div[role=button][disabled],
-.dialog-header div[role=button]:hover,
-.dialog-header div[role=button]:active {
-  border-color: #ddd;
-}
-
-.dialog-header div[role=button][disabled] {
-  background-color: #f1f1f1;
+body[new-ui] .dialog-header button:not(:hover):not(focus) {
+  background-color: transparent;
+  border-color: transparent;
 }
 
 #search-box,
@@ -606,13 +616,22 @@ body[new-ui] .breadcrumb-path:not(.breadcrumb-last) {
   width: 150px;
 }
 
+body[new-ui] #search-box {
+  border-color: white;
+}
+
 #search-box:hover {
   border: 1px solid #b9b9b9;
   border-top: 1px solid #a0a0a0;
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 }
 
-#search-box:focus {
+body[new-ui] #search-box:hover {
+  border-color: white;
+}
+
+#search-box:focus,
+body[new-ui] #search-box:focus {
   border: 1px solid rgb(77, 144, 254);
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
   outline: none;
@@ -1067,6 +1086,7 @@ body[new-ui] #default-actions-list:focus > [selected]:hover {
 /* Text box used for renaming in the detail list. */
 .table-row-cell input.rename {
   -webkit-margin-start: -3px;
+  border-width: 0;
   line-height: 20px;
 }
 
@@ -1697,7 +1717,7 @@ body[type='full-page'] [visibleif]:not([visibleif~='full-page']) {
   display: none;
 }
 
-#gear-button::before {
+body:not([new-ui]) #gear-button::before {
   background-image: url('../images/files/ui/settings.svg');
   background-position: 20px center;
   background-repeat: no-repeat;
@@ -1710,17 +1730,17 @@ body[type='full-page'] [visibleif]:not([visibleif~='full-page']) {
   top: 0;
 }
 
-#gear-button:hover::before {
+body:not([new-ui]) #gear-button:hover::before {
   opacity: 1;
 }
 
-#gear-button {
+body:not([new-ui]) #gear-button {
   overflow: hidden;
   text-align: left;
   width: 54px;
 }
 
-#gear-button span.disclosureindicator {
+body:not([new-ui]) #gear-button span.disclosureindicator {
   float: none;
   margin-left: 42px;
 }
diff --git a/chrome/browser/resources/file_manager/images/files/ui/new-ui/2x/topbar_button_close.png b/chrome/browser/resources/file_manager/images/files/ui/new-ui/2x/topbar_button_close.png
new file mode 100644
index 0000000..1025590
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/files/ui/new-ui/2x/topbar_button_close.png
diff --git a/chrome/browser/resources/file_manager/images/files/ui/new-ui/2x/topbar_button_maximize.png b/chrome/browser/resources/file_manager/images/files/ui/new-ui/2x/topbar_button_maximize.png
new file mode 100644
index 0000000..8684482
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/files/ui/new-ui/2x/topbar_button_maximize.png
diff --git a/chrome/browser/resources/file_manager/images/files/ui/new-ui/2x/topbar_button_settings.png b/chrome/browser/resources/file_manager/images/files/ui/new-ui/2x/topbar_button_settings.png
new file mode 100644
index 0000000..ad22660
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/files/ui/new-ui/2x/topbar_button_settings.png
diff --git a/chrome/browser/resources/file_manager/images/files/ui/new-ui/topbar_button_close.png b/chrome/browser/resources/file_manager/images/files/ui/new-ui/topbar_button_close.png
new file mode 100644
index 0000000..d0ff65e
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/files/ui/new-ui/topbar_button_close.png
diff --git a/chrome/browser/resources/file_manager/images/files/ui/new-ui/topbar_button_maximize.png b/chrome/browser/resources/file_manager/images/files/ui/new-ui/topbar_button_maximize.png
new file mode 100644
index 0000000..5efa2fb
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/files/ui/new-ui/topbar_button_maximize.png
diff --git a/chrome/browser/resources/file_manager/images/files/ui/new-ui/topbar_button_settings.png b/chrome/browser/resources/file_manager/images/files/ui/new-ui/topbar_button_settings.png
new file mode 100644
index 0000000..7a98e99
--- /dev/null
+++ b/chrome/browser/resources/file_manager/images/files/ui/new-ui/topbar_button_settings.png
diff --git a/chrome/browser/resources/file_manager/js/file_manager.js b/chrome/browser/resources/file_manager/js/file_manager.js
index 4defd9d..ad05600 100644
--- a/chrome/browser/resources/file_manager/js/file_manager.js
+++ b/chrome/browser/resources/file_manager/js/file_manager.js
@@ -515,7 +515,8 @@ DialogType.isModal = function(type) {
     controller.attachDragSource(this.grid_);
     controller.attachDropTarget(this.grid_);
     controller.attachTreeDropTarget(this.directoryTree_);
-    controller.attachBreadcrumbsDropTarget(this.breadcrumbs_);
+    if (!util.platform.newUI())
+      controller.attachBreadcrumbsDropTarget(this.breadcrumbs_);
     controller.attachCopyPasteHandlers();
     controller.addEventListener('selection-copied',
         this.blinkSelection.bind(this));
@@ -553,10 +554,25 @@ DialogType.isModal = function(type) {
         this.refreshRemainingSpace_.bind(this,
                                          false /* Without loading caption. */));
     cr.ui.decorate(this.gearButton_, cr.ui.MenuButton);
-
     this.dialogDom_.querySelector('#gear-menu').menuItemSelector =
       'menuitem, hr';
 
+    if (util.platform.newUI() && this.dialogType == DialogType.FULL_PAGE) {
+      var maximizeButton = this.dialogDom_.querySelector('#maximize-button');
+      maximizeButton.addEventListener('click', function() {
+        var appWindow = chrome.app.window.current();
+        if (appWindow.isMaximized())
+          appWindow.restore();
+        else
+          appWindow.maximize();
+      });
+
+      var closeButton = this.dialogDom_.querySelector('#close-button');
+      closeButton.addEventListener('click', function() {
+        window.close();
+      });
+    }
+
     this.syncButton.checkable = true;
     this.hostedButton.checkable = true;
   };
@@ -709,10 +725,12 @@ DialogType.isModal = function(type) {
     this.spinner_ = dom.querySelector('#spinner-with-text');
     this.showSpinner_(false);
 
-    this.breadcrumbs_ = new BreadcrumbsController(
-         dom.querySelector('#dir-breadcrumbs'));
-    this.breadcrumbs_.addEventListener(
-         'pathclick', this.onBreadcrumbClick_.bind(this));
+    if (!util.platform.newUI()) {
+      this.breadcrumbs_ = new BreadcrumbsController(
+           dom.querySelector('#dir-breadcrumbs'));
+      this.breadcrumbs_.addEventListener(
+           'pathclick', this.onBreadcrumbClick_.bind(this));
+    }
     this.searchBreadcrumbs_ = new BreadcrumbsController(
          dom.querySelector('#search-breadcrumbs'));
     this.searchBreadcrumbs_.addEventListener(
@@ -761,10 +779,13 @@ DialogType.isModal = function(type) {
         this.dialogDom_.querySelector('div.sidebar-splitter'));
 
     this.dialogContainer_ = this.dialogDom_.querySelector('.dialog-container');
-    this.dialogDom_.querySelector('#detail-view').addEventListener(
-        'click', this.onDetailViewButtonClick_.bind(this));
-    this.dialogDom_.querySelector('#thumbnail-view').addEventListener(
-        'click', this.onThumbnailViewButtonClick_.bind(this));
+
+    if (!util.platform.newUI()) {
+      this.dialogDom_.querySelector('#detail-view').addEventListener(
+          'click', this.onDetailViewButtonClick_.bind(this));
+      this.dialogDom_.querySelector('#thumbnail-view').addEventListener(
+          'click', this.onThumbnailViewButtonClick_.bind(this));
+    }
 
     this.syncButton = this.dialogDom_.querySelector('#drive-sync-settings');
     this.syncButton.addEventListener('activate', this.onDrivePrefClick_.bind(
@@ -1082,8 +1103,10 @@ DialogType.isModal = function(type) {
       this.table_.style.display = '';
       /** @type {cr.ui.List} */
       this.currentList_ = this.table_.list;
-      this.dialogDom_.querySelector('#detail-view').disabled = true;
-      this.dialogDom_.querySelector('#thumbnail-view').disabled = false;
+      if (!util.platform.newUI()) {
+        this.dialogDom_.querySelector('#detail-view').disabled = true;
+        this.dialogDom_.querySelector('#thumbnail-view').disabled = false;
+      }
     } else if (type == FileManager.ListType.THUMBNAIL) {
       this.grid_.dataModel = this.directoryModel_.getFileList();
       this.grid_.selectionModel = this.directoryModel_.getFileListSelection();
@@ -1094,8 +1117,10 @@ DialogType.isModal = function(type) {
       this.grid_.style.display = '';
       /** @type {cr.ui.List} */
       this.currentList_ = this.grid_;
-      this.dialogDom_.querySelector('#thumbnail-view').disabled = true;
-      this.dialogDom_.querySelector('#detail-view').disabled = false;
+      if (!util.platform.newUI()) {
+        this.dialogDom_.querySelector('#thumbnail-view').disabled = true;
+        this.dialogDom_.querySelector('#detail-view').disabled = false;
+      }
     } else {
       throw new Error('Unknown list type: ' + type);
     }
@@ -1299,7 +1324,9 @@ DialogType.isModal = function(type) {
       this.table_.redraw();
     }
 
-    this.breadcrumbs_.truncate();
+    if (!util.platform.newUI())
+      this.breadcrumbs_.truncate();
+
     this.searchBreadcrumbs_.truncate();
 
     this.updateWindowState_();
@@ -2355,9 +2382,11 @@ DialogType.isModal = function(type) {
     this.table_.list.startBatchUpdates();
     this.grid_.startBatchUpdates();
 
-    this.breadcrumbs_.update(
-        this.directoryModel_.getCurrentRootPath(),
-        this.directoryModel_.getCurrentDirPath());
+    if (!util.platform.newUI()) {
+      this.breadcrumbs_.update(
+          this.directoryModel_.getCurrentRootPath(),
+          this.directoryModel_.getCurrentDirPath());
+    }
 
     this.scanUpdatedAtLeastOnceOrCompleted_ = false;
     if (this.scanCompletedTimer_) {
diff --git a/chrome/browser/resources/file_manager/main.html b/chrome/browser/resources/file_manager/main.html
index 996ea16..a895456 100644
--- a/chrome/browser/resources/file_manager/main.html
+++ b/chrome/browser/resources/file_manager/main.html
@@ -224,9 +224,9 @@
           <div class="offline-icon"></div>
           <div class="offline-icon-space"></div>
           <div id="dir-breadcrumbs" class="breadcrumbs"></div>
-          <input id="search-box" type="search" tabindex="9"
-                 i18n-values="aria-label:SEARCH_TEXT_LABEL">
           <div class="right buttonbar">
+            <input id="search-box" type="search" tabindex="9"
+                   i18n-values="aria-label:SEARCH_TEXT_LABEL">
             <div>
               <button class="left small" id="detail-view" tabindex="10"
                       i18n-values="aria-label:DETAIL_VIEW_TOOLTIP">
diff --git a/chrome/browser/resources/file_manager/main_new_ui.html b/chrome/browser/resources/file_manager/main_new_ui.html
index 9bb2da3..52cece1 100644
--- a/chrome/browser/resources/file_manager/main_new_ui.html
+++ b/chrome/browser/resources/file_manager/main_new_ui.html
@@ -228,25 +228,15 @@
       <div class=sidebar-splitter></div>
       <div class=dialog-main>
         <div class=dialog-header>
-          <div id="dir-breadcrumbs" class="breadcrumbs"></div>
           <input id="search-box" type="search" tabindex="9"
                  i18n-values="aria-label:SEARCH_TEXT_LABEL">
           <div class="right buttonbar">
-            <div>
-              <button class="left small" id="detail-view" tabindex="10"
-                      i18n-values="aria-label:DETAIL_VIEW_TOOLTIP">
-              </button>
-              <div class="tooltip" i18n-content=DETAIL_VIEW_TOOLTIP></div>
-            </div>
-            <div>
-              <button class="right small" id="thumbnail-view" tabindex="11"
-                      i18n-values="aria-label:THUMBNAIL_VIEW_TOOLTIP">
-              </button>
-              <div class="tooltip" i18n-content=THUMBNAIL_VIEW_TOOLTIP></div>
-            </div>
-            <button class="menubutton" id="gear-button" tabindex="12"
+            <button class="menubutton" id="gear-button" tabindex="10"
                     menu="#gear-menu" visibleif="full-page">
-              <span class="disclosureindicator"></span>
+            </button>
+            <button id="maximize-button" visibleif="full-page" tabindex="-1">
+            </button>
+            <button id="close-button" visibleif="full-page" tabindex="-1">
             </button>
           </div>