[filebrowser] Add left panel with roots.

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

Index: chrome/browser/resources/file_manager/js/file_manager.js
===================================================================
--- chrome/browser/resources/file_manager/js/file_manager.js	(revision 110472)
+++ chrome/browser/resources/file_manager/js/file_manager.js	(working copy)
@@ -67,7 +67,7 @@
   // TODO(dgozman): This will be changed to LocaleInfo.
   this.locale_ = new v8Locale(navigator.language);
 
-  this.resolveRoots_();
+  this.requestFileSystem_();
   this.initDom_();
   this.initDialogType_();
   this.dialogDom_.style.opacity = '1';
@@ -469,50 +469,85 @@
   // Instance methods.
 
   /**
-   * Request file system and get root entries asynchronously. Invokes init_
-   * when have finished.
+   * Request local file system, resolve roots and init_ after that.
    */
-  FileManager.prototype.resolveRoots_ = function(callback) {
-    var rootPaths = ['Downloads', 'removable', 'archive'];
+  FileManager.prototype.requestFileSystem_ = function() {

[Dmitry Zvorygin, 2011/11/22 14:42:47]

It might be better to move requestFileSystem_ to init, or at least rename to
initFileSystem. Because this function should be only called once.

[dgozman, 2011/11/22 14:51:37]

Renamed.

+    util.installFileErrorToString();
+    metrics.startInterval('RequestLocalFileSystem');
 
-    metrics.startInterval('RequestLocalFileSystem');
     var self = this;
     chrome.fileBrowserPrivate.requestLocalFileSystem(function(filesystem) {
-      self.filesystem_ = filesystem;
-      util.installFileErrorToString();
-
       metrics.recordTime('RequestLocalFileSystem');
       console.log('Found filesystem: ' + filesystem.name, filesystem);
 
-      var rootEntries = [];
-
-      function onAllRootsFound() {
+      self.filesystem_ = filesystem;
+      self.resolveRoots_(function(rootEntries) {
         self.rootEntries_ = rootEntries;
         self.init_();
-      }
+      });
+    });
+  };
 
-      function onPathError(path, err) {
-        console.error('Error locating root path: ' + path + ': ' + err);
+  /**
+   * Get root entries asynchronously. Invokes callback
+   * when have finished.
+   */
+  FileManager.prototype.resolveRoots_ = function(callback) {
+    var rootPaths = [DOWNLOADS_DIRECTORY, ARCHIVE_DIRECTORY,
+        REMOVABLE_DIRECTORY].map(function(s) { return s.substring(1); });
+    var rootEntries = [];
+
+    // The number of entries left to enumerate to get all roots.
+    // When equals to zero, we are done.
+    // Initially is 100 to prevent finishing before these entries themselves
+    // are found.
+    var entriesToEnumerate = 100;

[Vladislav Kaznacheev, 2011/11/22 13:16:35]

Seems quite hacky. How about having a set of directories we must visit and
removing the ones we already visited, and exiting when it is empty?

[dgozman, 2011/11/22 14:15:14]

We do not know the whole set in advance. Even worse: we can finish enumerating
first directory, and only then find out the second one. 

+
+    function onAllRootsFound() {

[Vladislav Kaznacheev, 2011/11/22 13:16:35]

It is only called from one place, lets inline it.

[dgozman, 2011/11/22 14:15:14]

Done.

+      callback(rootEntries);
+    }
+
+    function onPathError(path, err) {
+      console.error('Error locating root path: ' + path + ': ' + err);
+    }
+
+    function onRootFound(root) {
+      if (root) {
+        rootEntries.push(root);
+      } else {
+        entriesToEnumerate--;
+        if (entriesToEnumerate == 0)
+          onAllRootsFound();
       }
+    }
 
-      function onEntryFound(entry) {
-        if (entry) {
-          rootEntries.push(entry);
+    function onEntryFound(entry) {
+      if (entry) {
+        entriesToEnumerate++;
+        var path = entry.fullPath;
+        if (path == ARCHIVE_DIRECTORY || path == REMOVABLE_DIRECTORY) {
+          // All removable devices and mounted archives are considered
+          // roots, and are shown in the sidebar.
+          util.forEachDirEntry(entry, onRootFound);
         } else {
-          onAllRootsFound();
+          onRootFound(entry);
+          onRootFound(null);
         }
+      } else {
+        // No more entries to enumerate - remove fake 100.
+        entriesToEnumerate -= 100;
       }
+    }
 
-      metrics.startInterval('EnumerateRoots');
-      if (filesystem.name.match(/^chrome-extension_\S+:external/i)) {
-        // We've been handed the local filesystem, whose root directory
-        // cannot be enumerated.
-        util.getDirectories(filesystem.root, {create: false}, rootPaths,
-                            onEntryFound, onPathError);
-      } else {
-        util.forEachDirEntry(filesystem.root, onEntryFound);
-      }
-    });
+    metrics.startInterval('EnumerateRoots');

[Dmitry Zvorygin, 2011/11/22 14:42:47]

Should be corresponding metrics.recordTime or something ilke this

[dgozman, 2011/11/22 14:51:37]

Done.

+    if (this.filesystem_.name.match(/^chrome-extension_\S+:external/i)) {
+      // We've been handed the local filesystem, whose root directory
+      // cannot be enumerated.
+      util.getDirectories(this.filesystem_.root, {create: false}, rootPaths,
+                          onEntryFound, onPathError);
+    } else {
+      util.forEachDirEntry(this.filesystem_.root, onEntryFound);
+    }
   };
 
   /**
@@ -520,6 +555,7 @@
    */
   FileManager.prototype.init_ = function() {
     metrics.startInterval('InitFileManager');
+    this.initCommands_();
     this.initFileList_();
     this.initDialogs_();
 
@@ -593,8 +629,6 @@
         self.mountPoints_ = mountPoints;
     });
 
-    this.initCommands_();
-
     this.setupCurrentDirectory_();
 
     this.summarizeSelection_();
@@ -616,6 +650,8 @@
     for (var i = 0; i < commands.length; i++) {
       var command = commands[i];
       cr.ui.Command.decorate(command);
+      command.label = command.textContent;
+      command.textContent = '';
       this.commands_[command.id] = command;
     }
 
@@ -653,7 +689,6 @@
     this.taskButtons_ = this.dialogDom_.querySelector('.task-buttons');
     this.okButton_ = this.dialogDom_.querySelector('.ok');
     this.cancelButton_ = this.dialogDom_.querySelector('.cancel');
-    this.newFolderButton_ = this.dialogDom_.querySelector('.new-folder');
     this.deleteButton_ = this.dialogDom_.querySelector('.delete-button');
 
     this.downloadsWarning_ =
@@ -684,8 +719,11 @@
     this.okButton_.addEventListener('click', this.onOk_.bind(this));
     this.cancelButton_.addEventListener('click', this.onCancel_.bind(this));
 
-    this.dialogDom_.querySelector('button.new-folder').addEventListener(
-        'click', this.onNewFolderButtonClick_.bind(this));
+    this.dialogDom_.querySelector('div.open-sidebar').addEventListener(
+        'click', this.onToggleSidebar_.bind(this));
+    this.dialogDom_.querySelector('div.close-sidebar').addEventListener(
+        'click', this.onToggleSidebar_.bind(this));
+    this.dialogContainer_ = this.dialogDom_.querySelector('.dialog-container');
 
     this.dialogDom_.querySelector('button.detail-view').addEventListener(
         'click', this.onDetailViewButtonClick_.bind(this));
@@ -738,6 +776,7 @@
 
     this.initTable_();
     this.initGrid_();
+    this.initRootsList_();
 
     this.setListType(FileManager.ListType.DETAIL);
 
@@ -746,6 +785,39 @@
     this.textSearchState_ = {text: '', date: new Date()};
   };
 
+  FileManager.prototype.initRootsList_ = function() {
+    this.rootsList_ = this.dialogDom_.querySelector('.roots-list');
+    cr.ui.List.decorate(this.rootsList_);
+
+    var self = this;
+    this.rootsList_.itemConstructor = function(entry) {
+      return self.renderRoot_(entry);
+    };
+
+    this.rootsList_.selectionModel = new cr.ui.ListSingleSelectionModel();
+    this.rootsList_.selectionModel.addEventListener(
+        'change', this.onRootsSelectionChanged_.bind(this));
+
+    // TODO(dgozman): add "Add a drive" item.
+    this.rootsList_.dataModel = new cr.ui.ArrayDataModel(this.rootEntries_);
+  };
+
+  FileManager.prototype.updateRoots_ = function(opt_changeDirectoryTo) {
+    var self = this;
+    this.resolveRoots_(function(rootEntries) {
+      self.rootEntries_ = rootEntries;
+
+      var dataModel = this.rootsList_.dataModel;
+      var args = [0, dataModel.length].concat(rootEntries);
+      dataModel.splice.apply(dataModel, args);
+
+      this.updateRootsListSelection_();
+
+      if (opt_changeDirectoryTo)
+        self.changeDirectory(opt_changeDirectoryTo);
+    });
+  };
+
   /**
    * Get the icon type for a given Entry.
    *
@@ -1065,6 +1137,11 @@
                 !isSystemDirEntry(this.currentDirEntry_)) &&
                 this.selection &&
                 this.selection.totalCount > 0;
+
+      case 'newfolder':
+        return this.currentDirEntry_ &&
+               (this.dialogType_ == 'saveas-file' ||
+                this.dialogType_ == 'full-page');
     }
   };
 
@@ -1270,6 +1347,10 @@
       case 'delete':
         this.deleteEntries(this.selection.entries);
         return;
+
+      case 'newfolder':
+        this.onNewFolderCommand_(event);
+        return;
     }
   };
 
@@ -1293,10 +1374,6 @@
   FileManager.prototype.onResize_ = function() {
     this.table_.style.height = this.grid_.style.height =
       this.grid_.parentNode.clientHeight + 'px';
-    this.table_.style.width = this.grid_.style.width =
-      this.grid_.parentNode.clientWidth + 'px';
-
-    this.table_.list_.style.width = this.table_.parentNode.clientWidth + 'px';
     this.table_.list_.style.height = (this.table_.clientHeight - 1 -
                                       this.table_.header_.clientHeight) + 'px';
 
@@ -1309,6 +1386,10 @@
     } else {
       this.currentList_.redraw();
     }
+
+    this.rootsList_.style.height =
+        this.rootsList_.parentNode.clientHeight + 'px';
+    this.rootsList_.redraw();
   };
 
   FileManager.prototype.resolvePath = function(
@@ -1342,22 +1423,11 @@
     // No preset given, find a good place to start.
     // Check for removable devices, if there are none, go to Downloads.
     var removableDirectoryEntry = this.rootEntries_.filter(function(rootEntry) {
-      return rootEntry.fullPath == REMOVABLE_DIRECTORY;
+      return isParentPath(REMOVABLE_DIRECTORY, rootEntry.fullPath);
     })[0];
-    if (!removableDirectoryEntry) {
-      this.changeDirectory(DOWNLOADS_DIRECTORY, CD_NO_HISTORY);
-      return;
-    }
-
-    var foundRemovable = false;
-    util.forEachDirEntry(removableDirectoryEntry, function(result) {
-      if (result) {
-        foundRemovable = true;
-      } else {  // Done enumerating, and we know the answer.
-        this.changeDirectory(foundRemovable ? '/' : DOWNLOADS_DIRECTORY,
-                             CD_NO_HISTORY);
-      }
-    }.bind(this));
+    this.changeDirectory(
+        removableDirectoryEntry.fullPath || DOWNLOADS_DIRECTORY,
+        CD_NO_HISTORY);
   };
 
   FileManager.prototype.setupPath_ = function(path) {
@@ -1394,6 +1464,7 @@
       function onLeafError(err) {
         // Set filename first so OK button will update in changeDirectoryEntry.
         self.filenameInput_.value = leafName;
+        self.selectDefaultPathInFilenameInput_();
         if (err = FileError.NOT_FOUND_ERR) {
           // Leaf does not exist, it's just a suggested file name.
           self.changeDirectoryEntry(baseDirEntry, CD_NO_HISTORY);
@@ -1409,6 +1480,7 @@
     function onBaseError(err) {
       // Set filename first so OK button will update in changeDirectory.
       self.filenameInput_.value = leafName;
+      self.selectDefaultPathInFilenameInput_();
       console.log('Unexpected error resolving default base "' +
                   baseName + '": ' + err);
       self.changeDirectory('/', CD_NO_HISTORY);
@@ -1649,19 +1721,72 @@
 
   FileManager.prototype.getLabelForRootPath_ = function(path) {
     // This hack lets us localize the top level directories.
-    if (path == 'Downloads')
-      return str('DOWNLOADS_DIRECTORY_LABEL');
+    if (path == DOWNLOADS_DIRECTORY)
+      return str('CHROMEBOOK_DIRECTORY_LABEL');
 
-    if (path == 'archive')
+    if (path == ARCHIVE_DIRECTORY)
       return str('ARCHIVE_DIRECTORY_LABEL');
+    if (isParentPath(ARCHIVE_DIRECTORY, path))
+      return path.substring(ARCHIVE_DIRECTORY.length + 1);
 
-    if (path == 'removable')
+    if (path == REMOVABLE_DIRECTORY)
       return str('REMOVABLE_DIRECTORY_LABEL');
+    if (isParentPath(REMOVABLE_DIRECTORY, path))
+      return path.substring(REMOVABLE_DIRECTORY.length + 1);
 
     return path || str('ROOT_DIRECTORY_LABEL');
   };
 
+  FileManager.prototype.getRootIconUrl_ = function(path, opt_small) {
+    var iconUrl = opt_small ? 'images/chromebook_28x28.png' :
+        'images/chromebook_24x24.png';
+    if (isParentPath(REMOVABLE_DIRECTORY, path))
+      iconUrl = 'images/filetype_device.png';
+    if (isParentPath(ARCHIVE_DIRECTORY, path))
+      iconUrl = 'images/icon_mount_archive_16x16.png';
+    return chrome.extension.getURL(iconUrl);
+  };
+
+  FileManager.prototype.renderRoot_ = function(entry) {
+    var li = this.document_.createElement('li');
+    li.className = 'root-item';
+
+    var icon = this.document_.createElement('img');
+    icon.setAttribute('src', this.getRootIconUrl_(entry.fullPath, false));
+    li.appendChild(icon);
+
+    var div = this.document_.createElement('div');
+    div.textContent = this.getLabelForRootPath_(entry.fullPath);
+    li.appendChild(div);
+
+    if (isParentPath(REMOVABLE_DIRECTORY, entry.fullPath) ||
+        isParentPath(ARCHIVE_DIRECTORY, entry.fullPath)) {
+      var spacer = this.document_.createElement('div');
+      spacer.className = 'spacer';
+      li.appendChild(spacer);
+
+      var eject = this.document_.createElement('img');
+      eject.className = 'root-eject';
+      eject.setAttribute('src', chrome.extension.getURL('images/eject.png'));
+      eject.addEventListener('click', this.onEjectClick_.bind(this, entry));
+      li.appendChild(eject);
+    }
+
+    cr.defineProperty(li, 'lead', cr.PropertyKind.BOOL_ATTR);
+    cr.defineProperty(li, 'selected', cr.PropertyKind.BOOL_ATTR);
+    return li;
+  };
+
   /**
+   * Handler for eject button clicked.
+   * @param {Entry} entry Entry to eject.
+   * @param {Event} event The event.
+   */
+  FileManager.prototype.onEjectClick_ = function(entry, event) {
+    chrome.fileBrowserPrivate.removeMount(entry.fullPath);
+  };
+
+  /**
    * Render the Name column of the detail table.
    *
    * Invoked by cr.ui.Table when a file needs to be rendered.
@@ -1674,11 +1799,7 @@
     var label = this.document_.createElement('div');
     label.entry = entry;
     label.className = 'detail-name filename-label';
-    if (this.currentDirEntry_.name == '') {
-      label.textContent = this.getLabelForRootPath_(entry.name);
-    } else {
-      label.textContent = entry.name;
-    }
+    label.textContent = entry.name;
 
     return label;
   };
@@ -1990,7 +2111,6 @@
 
     // These are done in separate functions, as the checks require
     // asynchronous function calls.
-    this.maybeRenderUnmountTask_(selection);
     this.maybeRenderFormattingTask_(selection);
   };
 
@@ -2012,38 +2132,6 @@
   };
 
   /**
-   * Checks whether unmount task should be displayed and if the answer is
-   * affirmative renders it.
-   * @param {Object} selection Selected files object.
-   */
-  FileManager.prototype.maybeRenderUnmountTask_ = function(selection) {
-    for (var index = 0; index < selection.urls.length; ++index) {
-      // Each url should be a mount point.
-      var path = selection.entries[index].fullPath;
-      var found = false;
-      for (var i = 0; i < this.mountPoints_.length; i++) {
-        var mountPath = this.mountPoints_[i].mountPath;
-        if (mountPath[0] != '/') {
-          mountPath = '/' + mountPath;
-        }
-        if (mountPath == path && this.mountPoints_[i].mountType == 'file') {
-          found = true;
-          break;
-        }
-      }
-      if (!found)
-        return;
-    }
-    this.renderTaskButton_({
-        taskId: this.getExtensionId_() + '|unmount-archive',
-        iconUrl:
-            chrome.extension.getURL('images/icon_unmount_archive_16x16.png'),
-        title: str('UNMOUNT_ARCHIVE'),
-        internal: true
-    });
-   };
-
-  /**
    * Checks whether formatting task should be displayed and if the answer is
    * affirmative renders it. Includes asynchronous calls, so it's splitted into
    * three parts.
@@ -2123,13 +2211,14 @@
   FileManager.prototype.onMountCompleted_ = function(event) {
     var self = this;
     chrome.fileBrowserPrivate.getMountPoints(function(mountPoints) {
+      // TODO(dgozman): update rootsList in sidebar.
       self.mountPoints_ = mountPoints;
       if (event.eventType == 'mount') {
         for (var index = 0; index < self.mountRequests_.length; ++index) {
           if (self.mountRequests_[index] == event.sourceUrl) {
             self.mountRequests_.splice(index, 1);
             if (event.status == 'success') {
-              self.changeDirectory(event.mountPath);
+              self.updateRoots_(event.mountPath);
             } else {
               // Report mount error.
               if (event.mountType == 'file') {
@@ -2158,8 +2247,6 @@
           rescanDirectoryNeeded = true;
         }
       }
-      // TODO(dgozman): rescan directory, only if it contains mounted points,
-      // when mounts location will be decided.
       if (rescanDirectoryNeeded)
         self.rescanDirectory_(null, 300);
     });
@@ -2180,10 +2267,6 @@
         this.mountRequests_.push(urls[index]);
         chrome.fileBrowserPrivate.addMount(urls[index], 'file', {});
       }
-    } else if (id == 'unmount-archive') {
-      for (var index = 0; index < urls.length; ++index) {
-        chrome.fileBrowserPrivate.removeMount(urls[index]);
-      }
     } else if (id == 'format-device') {
       this.confirm.show(str('FORMATTING_WARNING'), function() {
         chrome.fileBrowserPrivate.formatDevice(urls[0]);
@@ -2261,6 +2344,15 @@
     galleryFrame.focus();
   };
 
+  FileManager.prototype.getRootForPath_ = function(path) {
+    for (var index = 0; index < this.rootEntries_.length; index++) {
+      if (isParentPath(this.rootEntries_[index].fullPath, path)) {
+        return this.rootEntries_[index];
+      }
+    }
+    return null;
+  };
+
   /**
    * Update the breadcrumb display to reflect the current directory.
    */
@@ -2268,23 +2360,44 @@
     var bc = this.dialogDom_.querySelector('.breadcrumbs');
     bc.innerHTML = '';
 
-    var fullPath = this.currentDirEntry_.fullPath.replace(/\/$/, '');
-    var pathNames = fullPath.split('/');
-    var path = '';
+    var fullPath = this.currentDirEntry_.fullPath;
+    var root = this.getRootForPath_(fullPath);
+    if (!root) {
+      console.error('Not root for: ' + fullPath);
+      return;
+    }
 
+    var icon = this.document_.createElement('img');
+    icon.className = 'breadcrumb-icon';
+    icon.setAttribute('src', this.getRootIconUrl_(root.fullPath, true));
+    bc.appendChild(icon);
+
+    var rootPath = root.fullPath;
+    var relativePath = fullPath.substring(rootPath.length);
+    var pathNames = relativePath.replace(/\/$/, '').split('/');
+    if (pathNames[0] == '')
+      pathNames.splice(0, 1);
+
+    // We need a first breadcrumb for root, so placing last name from
+    // rootPath as first name of relativePath.
+    var rootPathNames = rootPath.replace(/\/$/, '').split('/');
+    pathNames.splice(0, 0, rootPathNames[rootPathNames.length - 1]);
+    rootPathNames.splice(rootPathNames.length - 1, 1);
+    var path = rootPathNames.join('/') + '/';
+
     for (var i = 0; i < pathNames.length; i++) {
       var pathName = pathNames[i];
-      path += pathName + '/';
+      path += pathName;
 
       var div = this.document_.createElement('div');
       div.className = 'breadcrumb-path';
-      if (i <= 1) {
-        // i == 0: root directory itself, i == 1: the files it contains.
-        div.textContent = this.getLabelForRootPath_(pathName);
+      if (i == 0) {
+        div.textContent = this.getLabelForRootPath_(path);
       } else {
         div.textContent = pathName;
       }
 
+      path = path + '/';
       div.path = path;
       div.addEventListener('click', this.onBreadcrumbClick_.bind(this));
 
@@ -2417,6 +2530,20 @@
     }
   };
 
+  FileManager.prototype.updateRootsListSelection_ = function() {
+    if (!this.currentDirEntry_) return;
+    for (var index = 0; index < this.rootEntries_.length; index++) {

[Vladislav Kaznacheev, 2011/11/22 13:16:35]

Consider having getRootPathFor_ return an index and using it here too.

[dgozman, 2011/11/22 14:15:14]

Done.

+      if (isParentPath(this.rootEntries_[index].fullPath,
+                       this.currentDirEntry_.fullPath)) {
+        this.rootsList_.selectionModel.selectedIndex = index;
+        return;
+      }
+    }
+    this.rootsList_.selectionModel.selectedIndex = 0;
+    console.error('No corresponding root for: ' +
+                  this.currentDirEntry_.fullPath);
+  };
+
   /**
    * Add the file/directory with given name to the current selection.
    *
@@ -2532,6 +2659,11 @@
       opt_saveHistory = !!opt_saveHistory;
     }
 
+    if (dirEntry.fullPath == '/' || dirEntry.fullPath == DOWNLOADS_DIRECTORY ||
+        dirEntry.fullPath == ARCHIVE_DIRECTORY) {

[Vladislav Kaznacheev, 2011/11/22 13:16:35]

Why? It would be nice to have a comment here.

[dgozman, 2011/11/22 14:15:14]

Comment added.

+      dirEntry = this.rootEntries_[0] || dirEntry;
+    }
+
     var location = '#' + encodeURI(dirEntry.fullPath);
     if (opt_saveHistory) {
       history.pushState(undefined, dirEntry.fullPath, location);
@@ -2768,6 +2900,25 @@
     }
   };
 
+  FileManager.prototype.onRootsSelectionChanged_ = function(event) {
+    var root = this.rootEntries_[this.rootsList_.selectionModel.selectedIndex];
+    this.changeDirectory(root.fullPath);
+  };
+
+  FileManager.prototype.selectDefaultPathInFilenameInput_ = function() {
+    var input = this.filenameInput_;
+    input.focus();
+    var selectionEnd = input.value.lastIndexOf('.');
+    if (selectionEnd == -1) {
+      input.select();
+    } else {
+      input.selectionStart = 0;
+      input.selectionEnd = selectionEnd;
+    }
+    // Clear, so we never do this again.
+    this.params_.defaultPath = '';
+  };
+
   /**
    * Update the UI when the selection model changes.
    *
@@ -2782,8 +2933,12 @@
 
       if (this.selection &&
           this.selection.totalCount == 1 &&
-          this.selection.entries[0].isFile)
+          this.selection.entries[0].isFile &&
+          this.filenameInput_.value != this.selection.entries[0].name) {
         this.filenameInput_.value = this.selection.entries[0].name;
+        if (this.params_.defaultPath == this.selection.entries[0].fullPath)
+          this.selectDefaultPathInFilenameInput_();
+      }
     }
 
     this.updateOkButton_();
@@ -2932,9 +3087,7 @@
 
     this.checkFreeSpace_(this.currentDirEntry_.fullPath);
 
-    // New folder should never be enabled in the root or media/ directories.
-    this.newFolderButton_.disabled = isSystemDirEntry(this.currentDirEntry_);
-
+    // TODO(dgozman): title may be better than this.
     this.document_.title = this.currentDirEntry_.fullPath;
 
     var self = this;
@@ -3030,6 +3183,7 @@
     this.currentList_.selectionModel.clear();
 
     this.updateBreadcrumbs_();
+    this.updateRootsListSelection_();
 
     if (this.currentDirEntry_.fullPath != '/') {
       // Add current request to pending result list
@@ -3365,7 +3519,16 @@
     }, 0);
   };
 
-  FileManager.prototype.onNewFolderButtonClick_ = function(event) {
+  FileManager.prototype.onToggleSidebar_ = function(event) {
+    if (this.dialogContainer_.hasAttribute('sidebar')) {
+      this.dialogContainer_.removeAttribute('sidebar');
+    } else {
+      this.dialogContainer_.setAttribute('sidebar', 'sidebar');
+    }
+    setTimeout(this.onResize_.bind(this), 300);
+  };
+
+  FileManager.prototype.onNewFolderCommand_ = function(event) {
     var self = this;
 
     function onNameSelected(name) {
@@ -3494,9 +3657,10 @@
         break;
 
       case 32:  // Ctrl-Space => New Folder.
-        if (this.newFolderButton_.style.display != 'none' && event.ctrlKey) {
+        if ((this.dialogType_ == 'saveas-file' ||
+             this.dialogType_ == 'full-page') && event.ctrlKey) {
           event.preventDefault();
-          this.onNewFolderButtonClick_();
+          this.onNewFolderCommand_();
         }
         break;