[filebrowser] Add left panel with roots.

Not the final UI yet.
Additional improvements:
- file name is selected in save-as dialog at start;
- new folder moved to context menu, button deleted.

BUG=chromium-os:20168,chromium-os:22106,chromium-os:22105,chromium-os:22032,chromium-os:20547,chromium-os:20549
TEST=Manual

Review URL: http://codereview.chromium.org/8554003

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

chrome/app/generated_resources.grd

@@ -9704,9 +9704,6 @@ Some features may be unavailable.  Please check that the profile exists and you
       <message name="IDS_FILE_BROWSER_ROOT_DIRECTORY_LABEL" desc="Root directory label.">
         Files
       </message>
-      <message name="IDS_FILE_BROWSER_DOWNLOADS_DIRECTORY_LABEL" desc="/Downloads directory label.">
-        File Shelf
-      </message>
       <message name="IDS_FILE_BROWSER_ARCHIVE_DIRECTORY_LABEL" desc="/archive directory label.">
         Archives
       </message>

chrome/browser/extensions/extension_file_browser_private_api.cc

@@ -1523,9 +1523,9 @@ bool FileDialogStringsFunction::RunImpl() {
   SET_STRING(IDS, WEB_FONT_SIZE);
 
   SET_STRING(IDS_FILE_BROWSER, ROOT_DIRECTORY_LABEL);
-  SET_STRING(IDS_FILE_BROWSER, DOWNLOADS_DIRECTORY_LABEL);
   SET_STRING(IDS_FILE_BROWSER, ARCHIVE_DIRECTORY_LABEL);
   SET_STRING(IDS_FILE_BROWSER, REMOVABLE_DIRECTORY_LABEL);
+  SET_STRING(IDS_FILE_BROWSER, CHROMEBOOK_DIRECTORY_LABEL);
   SET_STRING(IDS_FILE_BROWSER, NAME_COLUMN_LABEL);
   SET_STRING(IDS_FILE_BROWSER, SIZE_COLUMN_LABEL);
   SET_STRING(IDS_FILE_BROWSER, TYPE_COLUMN_LABEL);

chrome/browser/resources/component_extension_resources.grd

@@ -47,6 +47,12 @@
         <include name="IDR_FILE_MANAGER_MEDIA_ENQUEUE_ICON" file="file_manager/images/icon_add_to_queue_16x16.png" type="BINDATA" />
         <include name="IDR_FILE_MANAGER_ARCHIVE_MOUNT_ICON" file="file_manager/images/icon_mount_archive_16x16.png" type="BINDATA" />
         <include name="IDR_FILE_MANAGER_ARCHIVE_UNMOUNT_ICON" file="file_manager/images/icon_unmount_archive_16x16.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_OPEN_SIDEBAR_ICON" file="file_manager/images/open_sidebar.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_CLOSE_SIDEBAR_ICON" file="file_manager/images/close_sidebar.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_EJECT_ICON" file="file_manager/images/eject.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_ADD_DRIVE_ICON" file="file_manager/images/add_drive.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_CHROMEBOOK_24_ICON" file="file_manager/images/chromebook_24x24.png" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_CHROMEBOOK_28_ICON" file="file_manager/images/chromebook_28x28.png" type="BINDATA" />
 
         <include name="IDR_FILE_MANAGER_IMG_FILETYPE_AUDIO" file="file_manager/images/filetype_audio.png" type="BINDATA" />
         <include name="IDR_FILE_MANAGER_IMG_FILETYPE_DEVICE" file="file_manager/images/filetype_device.png" type="BINDATA" />

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

@@ -100,25 +100,176 @@ input[type='submit'][disabled]:hover {
   padding-bottom: 8px;
 }
 
+/* Main part of the dialog between header and footer. */
+.dialog-container {
+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+  -webkit-box-align: stretch;
+  overflow: hidden;
+  -webkit-box-flex: 1;
+}
+
+/* List/grid and preview are inside this container. */
+.dialog-main {
+  -webkit-box-flex: 1;
+  display:-webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
+}
+
+/* Roots list at the left. */
+.dialog-sidebar {
+  position: relative;
+  -webkit-box-flex: 0;
+  width: 200px;
+  margin-left: -200px;
+  background-color: rgba(240, 240, 240, 1);
+  margin-bottom: 15px;
+  margin-top: 15px;
+  -webkit-border-top-right-radius: 4px;
+  -webkit-border-top-left-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+  -webkit-transition: margin-left 180ms ease;
+  overflow: hidden;
+}
+
+.dialog-container[sidebar] .dialog-sidebar {
+  margin-left: 15px;
+}
+
+/* Roots list at the left. */
+list.roots-list {
+  width: 100%;
+}
+
+list.roots-list > * {
+  border: none;
+  border-radius: 0;
+  line-height: 35px;
+  margin: 0;
+  padding: 0 5px;
+  background-color: rgba(240,240,240,1);
+}
+
+list.roots-list > [lead],
+list.roots-list > [selected],
+list.roots-list > [anchor] {
+  background-color: hsl(214,91%,89%);
+}
+
+list.roots-list > [lead]:hover,
+list.roots-list > [selected]:hover,
+list.roots-list > [anchor]:hover {
+  background-color: hsl(214,91%,87%);
+}
+
+list.roots-list li.root-item {
+  display: -webkit-box;
+  -webkit-box-align: center;
+  -webkit-box-pack: start;
+}
+
+li.root-item > * {
+  display: block;
+  margin-right: 5px;
+}
+
+li.root-item > .text {
+  max-width: 130px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+li.root-item > .spacer {
+  -webkit-box-flex: 1;
+}
+
+img.root-eject {
+  opacity: 0.5;
+  cursor: pointer;
+  width: 15px;
+  height: 12px;
+}
+
+img.root-eject:hover {
+  opacity: 1;
+}
+
 /* Breadcrumbs and things under the title but above the list view. */
 .dialog-header {
   -webkit-box-orient: horizontal;
   -webkit-box-align: center;
   display: -webkit-box;
-  margin: 15px;
+  margin-top: 15px;
+  margin-right: 15px;
   margin-bottom: 4px;
-}
+  margin-left: 15px;
+  -webkit-transition: all 180ms ease;
+ }
 
 /* Container for the detail and thumbnail (not implemented yet) list views. */
+.dialog-container[sidebar] .dialog-header {
+  margin-left: 0;
+}
+
+/* Close sidebar button. */
+div.close-sidebar {
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: 2px;
+  display: none;
+  z-index: 10;
+  background-color: white;
+  border: 1px solid rgba(200,200,200,1);
+  width: 13px;
+  height: 24px;
+}
+
+div.close-sidebar:hover {
+  background-color: rgba(240,240,240,1);
+}
+
+/* Open sidebar button. */
+div.open-sidebar {
+  cursor: pointer;
+  margin-right: 10px;
+  background-color: white;
+  width: 13px;
+  height: 24px;
+}
+
+div.open-sidebar:hover {
+  background-color: rgba(240,240,240,1);
+}
+
+.dialog-container[sidebar] div.open-sidebar {
+  display: none;;
+}
+
+.dialog-container[sidebar] div.close-sidebar {
+  display: block;
+}
+
+/* Container for the detail and thumbnail list views. */
 .dialog-body {
   -webkit-box-orient: vertical;
   -webkit-box-flex: 1;
   border: 1px #aaa solid;
   border-radius: 4px;
   display: -webkit-box;
-  margin: 15px;
-  margin-top: 0;
+  margin-right: 15px;
+  margin-bottom: 15px;
+  margin-left: 15px;
   overflow: hidden;
+  -webkit-transition: all 180ms ease;
+}
+
+.dialog-container[sidebar] .dialog-body {
+  -webkit-border-top-left-radius: 0;
+  -webkit-border-bottom-left-radius: 0;
+  margin-left: 0;
 }
 
 /* Container for the ok/cancel buttons. */
@@ -134,6 +285,7 @@ input[type='submit'][disabled]:hover {
   -webkit-box-orient: horizontal;
   -webkit-box-flex: 1;
   display: -webkit-box;
+  -webkit-box-align: center;
   font-size: 15px;
   line-height: 15px;
   height: 18px;
@@ -142,6 +294,20 @@ input[type='submit'][disabled]:hover {
   white-space: nowrap;
 }
 
+.dialog-container[sidebar] .breadcrumbs {
+  margin-left: 10px;
+}
+
+/* Icon at the start of breadcrumb path. Corresponds to the root selected. */
+.breadcrumb-icon {
+  margin-right: 5px;
+  display: block;
+}
+
+.dialog-container[sidebar] .breadcrumb-icon {
+  display: none;
+}
+
 /* A single directory name in the list of path breadcrumbs. */
 .breadcrumb-path {
   color: #265692;
@@ -210,10 +376,7 @@ button.thumbnail-view > img {
 
 /* The cr.ui.Grid representing the detailed file list. */
 .thumbnail-grid {
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 0;
+  width: 100%;
   overflow-y: scroll;
 }
 
@@ -268,9 +431,7 @@ div.img-container > img {
 
 /* The cr.ui.Table representing the detailed file list. */
 .detail-table {
-  position: absolute;
-  top: 0;
-  left: 0;
+  width: 100%;
   border: 0;
 }
 

chrome/browser/resources/file_manager/js/harness.js

@@ -19,7 +19,11 @@ var harness = {
       console.log('Filesystem found.');
       self.filesystem = filesystem;
       util.getOrCreateDirectory(filesystem.root, '/Downloads', function () {});
-      util.getOrCreateDirectory(filesystem.root, '/media', function () {});
+      util.getOrCreateDirectory(filesystem.root, '/removable', function () {});
+      util.getOrCreateDirectory(filesystem.root, '/removable/disk1',
+          function () {});
+      util.getOrCreateDirectory(filesystem.root, '/removable/disk2',
+          function () {});
     };
 
     window.webkitRequestFileSystem(window.PERSISTENT, 16 * 1024 * 1024,

chrome/browser/resources/file_manager/js/mock_chrome.js

@@ -217,7 +217,7 @@ chrome.fileBrowserPrivate = {
       PARENT_DIRECTORY: 'Parent Directory',
 
       ROOT_DIRECTORY_LABEL: 'Files',
-      DOWNLOADS_DIRECTORY_LABEL: 'File Shelf',
+      CHROMEBOOK_DIRECTORY_LABEL: 'Chromebook',
       DOWNLOADS_DIRECTORY_WARNING: "<strong>Caution:</strong> These files are temporary and may be automatically deleted to free up disk space.  <a href='javascript://'>Learn More</a>",
       MEDIA_DIRECTORY_LABEL: 'External Storage',
       NAME_COLUMN_LABEL: 'Name',

chrome/browser/resources/file_manager/main.html

@@ -109,59 +109,69 @@
   <body i18n-values=".style.fontFamily:WEB_FONT_FAMILY;
                      .style.fontSize:WEB_FONT_SIZE">
     <commands>
-      <command id="cut"></command>
-      <command id="copy"></command>
-      <command id="paste"></command>
-      <command id="rename"></command>
-      <command id="delete"></command>
+      <command id="cut" i18n-values="label:CUT_BUTTON_LABEL"></command>
+      <command id="copy" i18n-values="label:COPY_BUTTON_LABEL"></command>
+      <command id="paste" i18n-values="label:PASTE_BUTTON_LABEL"></command>
+      <command id="rename" i18n-values="label:RENAME_BUTTON_LABEL"></command>
+      <command id="delete" i18n-values="label:DELETE_BUTTON_LABEL"></command>
+      <command id="newfolder" i18n-values="label:NEW_FOLDER_BUTTON_LABEL"></command>
     </commands>
 
     <menu class=file-context-menu>
-      <menuitem i18n-content=CUT_BUTTON_LABEL command='#cut'></menuitem>
-      <menuitem i18n-content=COPY_BUTTON_LABEL command='#copy'></menuitem>
-      <menuitem i18n-content=PASTE_BUTTON_LABEL command='#paste'></menuitem>
+      <menuitem command='#cut'></menuitem>
+      <menuitem command='#copy'></menuitem>
+      <menuitem command='#paste'></menuitem>
       <hr>
-      <menuitem i18n-content=RENAME_BUTTON_LABEL command='#rename'></menuitem>
-      <menuitem i18n-content=DELETE_BUTTON_LABEL command='#delete'></menuitem>
+      <menuitem command='#rename'></menuitem>
+      <menuitem command='#delete'></menuitem>
+      <hr visibleif='this.dialogType_ == "saveas-file" ||
+                     this.dialogType_ == "full-page"'>
+      <menuitem command='#newfolder'
+          visibleif='this.dialogType_ == "saveas-file" ||
+                     this.dialogType_ == "full-page"'></menuitem>
     </menu>
 
     <div class=dialog-title visibleif='this.dialogType_ != "full-page"'
          >[TITLE]</div>
-    <div class=dialog-header>
-      <div class=breadcrumbs></div>
-      <button class=detail-view tabindex=4
-              ><img src='images/icon-detail-view.png'></button
-      ><button class=thumbnail-view tabindex=5
-              ><img src='images/icon-thumb-view.png'></button>
-      <button i18n-content=NEW_FOLDER_BUTTON_LABEL class='new-folder'
-              tabindex=6
-              visibleif='this.dialogType_ == "saveas-file" ||
-                         this.dialogType_ == "full-page"'
-              ></button>
-    </div>
-    <div class=dialog-body>
-      <div class=filelist-panel>
-        <div class=list-container>
-          <div class=detail-table tabindex=0></div>
-          <grid class=thumbnail-grid tabindex=0></grid>
-        </div>
-        <div class=downloads-warning hidden>
-          <img src=images/warning_icon_square_26x26.png>
-          <div></div>
-        </div>
+    <div class=dialog-container>
+      <div class=dialog-sidebar>
+        <div class=close-sidebar><img src='images/close_sidebar.png'></div>
+        <list class=roots-list></list>
       </div>
-      <div class=preview-panel visibility=hidden>
-        <div><div class=preview-thumbnails></div></div>
-        <div><div class=preview-summary></div></div>
-        <div class=task-buttons></div>
-        <div>
-          <button class='delete-button task-button' command='#delete'
-                  onclick='fileManager.deleteEntries(
-                           fileManager.selection.entries, false)'
-                  visibleif='this.dialogType_ == "full-page"'
-             ><img src='images/button-icon-delete.png'
-              ><div i18n-content=DELETE_BUTTON_LABEL></div
-          ></button>
+      <div class=dialog-main>
+        <div class=dialog-header>
+          <div class=open-sidebar><img src='images/open_sidebar.png'></div>
+          <div class=breadcrumbs></div>
+          <button class=detail-view tabindex=4
+                  ><img src='images/icon-detail-view.png'></button
+          ><button class=thumbnail-view tabindex=5
+                  ><img src='images/icon-thumb-view.png'></button>
+        </div>
+        <div class=dialog-body>
+          <div class=filelist-panel>
+            <div class=list-container>
+              <div class=detail-table tabindex=0></div>
+              <grid class=thumbnail-grid tabindex=0></grid>
+            </div>
+            <div class=downloads-warning hidden>
+              <img src=images/warning_icon_square_26x26.png>
+              <div></div>
+            </div>
+          </div>
+          <div class=preview-panel visibility=hidden>
+            <div><div class=preview-thumbnails></div></div>
+            <div><div class=preview-summary></div></div>
+            <div class=task-buttons></div>
+            <div>
+              <button class='delete-button task-button' command='#delete'
+                      onclick='fileManager.deleteEntries(
+                               fileManager.selection.entries, false)'
+                      visibleif='this.dialogType_ == "full-page"'
+                  ><img src='images/button-icon-delete.png'
+                  ><div i18n-content=DELETE_BUTTON_LABEL></div
+              ></button>
+            </div>
+          </div>
         </div>
       </div>
     </div>

chrome/browser/resources/file_manager/manifest.json

@@ -88,14 +88,6 @@
         "filesystem:*.zip"
       ]
     },
-    {
-      "id": "unmount-archive",
-      "default_title": "__MSG_UNMOUNT_ARCHIVE__",
-      "default_icon": "images/icon_unmount_archive_16x16.png",
-      "file_filters": [
-        "filesystem:*.mounted_zip"
-      ]
-    },
     {
       "id": "gallery",
       "default_title": "__MSG_GALLERY__",