[filebrowser] Add left panel with roots.

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

 // Copyright (c) 2011 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.
 
 // Setting the src of an img to an empty string can crash the browser, so we
 // use an empty 1x1 gif instead.
 const EMPTY_IMAGE_URI = 'data:image/gif;base64,'
         + 'R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw%3D%3D';
 
 var g_slideshow_data = null;
@@ skipping 47 matching lines @@
   metrics.recordEnum('Create', this.dialogType_,
       [FileManager.DialogType.SELECT_FOLDER,
       FileManager.DialogType.SELECT_SAVEAS_FILE,
       FileManager.DialogType.SELECT_OPEN_FILE,
       FileManager.DialogType.SELECT_OPEN_MULTI_FILE,
       FileManager.DialogType.FULL_PAGE]);
 
   // TODO(dgozman): This will be changed to LocaleInfo.
   this.locale_ = new v8Locale(navigator.language);
 
-  this.resolveRoots_();
+  this.initFileSystem_();
   this.initDom_();
   this.initDialogType_();
   this.dialogDom_.style.opacity = '1';
 }
 
 FileManager.prototype = {
   __proto__: cr.EventTarget.prototype
 };
 
 // Anonymous "namespace".
@@ skipping 381 matching lines @@
     chrome.fileBrowserPrivate.getStrings(function(strings) {
       localStrings = new LocalStrings(strings);
       if (callback)
         callback();
     });
   };
 
   // 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.initFileSystem_ = function() {
+    util.installFileErrorToString();
+    metrics.startInterval('RequestLocalFileSystem');
 
-    metrics.startInterval('RequestLocalFileSystem');
     var self = this;
 
     // The list of active mount points to distinct them from other directories.
     chrome.fileBrowserPrivate.getMountPoints(function(mountPoints) {
       self.mountPoints_ = mountPoints;
       onDone();
     });
 
     function onDone() {
       if (self.mountPoints_ && self.rootEntries_)
         self.init_();
     }
 
     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;
         onDone();
-      }
-
-      function onPathError(path, err) {
-        console.error('Error locating root path: ' + path + ': ' + err);
-      }
-
-      function onEntryFound(entry) {
-        if (entry) {
-          rootEntries.push(entry);
-        } else {
-          onAllRootsFound();
-        }
-      }
-
-      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);
-      }
+      });
     });
   };
 
   /**
+   * 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.
+    var entriesToEnumerate = 0;
+    // Entries may be enumerated faster than next one appears, so we have this
+    // guard to not finish too early.
+    var allEntriesFound = false;
+
+    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 && allEntriesFound) {
+          metrics.recordTime('EnumerateRoots');
+          callback(rootEntries);
+        }
+      }
+    }
+
+    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 {
+          onRootFound(entry);
+          onRootFound(null);
+        }
+      } else {
+        allEntriesFound = true;
+      }
+    }
+
+    metrics.startInterval('EnumerateRoots');
+    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);
+    }
+  };
+
+  /**
    * Continue initializing the file manager after resolving roots.
    */
   FileManager.prototype.init_ = function() {
     metrics.startInterval('InitFileManager');
+    this.initCommands_();
 
     // TODO(rginda): 6/22/11: Remove this test when createDateTimeFormat is
     // available in all chrome trunk builds.
     if ('createDateTimeFormat' in this.locale_) {
       this.shortDateFormatter_ =
         this.locale_.createDateTimeFormat({'dateType': 'medium'});
     } else {
       this.shortDateFormatter_ = {
         format: function(d) {
           return (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
@@ skipping 37 matching lines @@
     window.addEventListener('unload', this.onUnload_.bind(this));
 
     this.addEventListener('directory-changed',
                           this.onDirectoryChanged_.bind(this));
     this.addEventListener('selection-summarized',
                           this.onSelectionSummarized_.bind(this));
 
     // The list of archives requested to mount. We will show contents once
     // archive is mounted, but only for mounts from within this filebrowser tab.
     this.mountRequests_ = [];
+    this.unmountRequests_ = [];
     chrome.fileBrowserPrivate.onMountCompleted.addListener(
         this.onMountCompleted_.bind(this));
 
     chrome.fileBrowserPrivate.onFileChanged.addListener(
         this.onFileChanged_.bind(this));
 
     var self = this;
 
     // The list of callbacks to be invoked during the directory rescan after
     // all paste tasks are complete.
     this.pasteSuccessCallbacks_ = [];
 
-    this.initCommands_();
-
     this.setupCurrentDirectory_();
 
     this.summarizeSelection_();
 
     this.dataModel_.sort('cachedMtime_', 'desc');
 
     this.refocus();
 
     this.createMetadataProvider_();
     metrics.recordTime('InitFileManager');
     metrics.recordTime('TotalLoad');
   };
 
   /**
    * One-time initialization of commands.
    */
   FileManager.prototype.initCommands_ = function() {
     var commands = this.dialogDom_.querySelectorAll('command');
     for (var i = 0; i < commands.length; i++) {
       var command = commands[i];
       cr.ui.Command.decorate(command);
+      command.label = command.textContent;

[SeRya, 2011/11/28 10:30:55]

Right way to int-ze the labes is using 'i18-values="label:STRING_ID;"'

[dgozman, 2011/11/28 11:45:53]

Done.

+      command.textContent = '';
       this.commands_[command.id] = command;
     }
 
     this.fileContextMenu_ = this.dialogDom_.querySelector('.file-context-menu');
     cr.ui.Menu.decorate(this.fileContextMenu_);
 
     this.document_.addEventListener('canExecute',
                                     this.onCanExecute_.bind(this));
     this.document_.addEventListener('command', this.onCommand_.bind(this));
   }
@@ skipping 17 matching lines @@
     // Cache nodes we'll be manipulating.
     this.previewThumbnails_ =
         this.dialogDom_.querySelector('.preview-thumbnails');
     this.previewPanel_ = this.dialogDom_.querySelector('.preview-panel');
     this.previewFilename_ = this.dialogDom_.querySelector('.preview-filename');
     this.previewSummary_ = this.dialogDom_.querySelector('.preview-summary');
     this.filenameInput_ = this.dialogDom_.querySelector('.filename-input');
     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_ =
         this.dialogDom_.querySelector('.downloads-warning');
     var html = util.htmlUnescape(str('DOWNLOADS_DIRECTORY_WARNING'));
     this.downloadsWarning_.lastElementChild.innerHTML = html;
     var link = this.downloadsWarning_.querySelector('a');
     link.addEventListener('click', this.onDownloadsWarningClick_.bind(this));
 
     this.document_.addEventListener('keydown', this.onKeyDown_.bind(this));
@@ skipping 10 matching lines @@
         'keyup', this.onFilenameInputKeyUp_.bind(this));
     this.filenameInput_.addEventListener(
         'focus', this.onFilenameInputFocus_.bind(this));
 
     var listContainer = this.dialogDom_.querySelector('.list-container');
     listContainer.addEventListener('keydown', this.onListKeyDown_.bind(this));
     listContainer.addEventListener('keypress', this.onListKeyPress_.bind(this));
     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));
     this.dialogDom_.querySelector('button.thumbnail-view').addEventListener(
         'click', this.onThumbnailViewButtonClick_.bind(this));
 
     this.dialogDom_.ownerDocument.defaultView.addEventListener(
         'resize', this.onResize_.bind(this));
 
     var ary = this.dialogDom_.querySelectorAll('[visibleif]');
@@ skipping 32 matching lines @@
     if (this.dialogType_ == FileManager.DialogType.SELECT_OPEN_FILE ||
         this.dialogType_ == FileManager.DialogType.SELECT_OPEN_FOLDER ||
         this.dialogType_ == FileManager.DialogType.SELECT_SAVEAS_FILE) {
       this.selectionModelClass_ = cr.ui.ListSingleSelectionModel;
     } else {
       this.selectionModelClass_ = cr.ui.ListSelectionModel;
     }
 
     this.initTable_();
     this.initGrid_();
+    this.initRootsList_();
 
     this.setListType(FileManager.ListType.DETAIL);
 
     this.onResize_();
 
     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 = self.rootsList_.dataModel;
+      var args = [0, dataModel.length].concat(rootEntries);
+      dataModel.splice.apply(dataModel, args);
+
+      self.updateRootsListSelection_();
+
+      if (opt_changeDirectoryTo)
+        self.changeDirectory(opt_changeDirectoryTo);
+    });
+  };
+
   /**
    * Get the icon type for a given Entry.
    *
    * @param {Entry} entry An Entry subclass (FileEntry or DirectoryEntry).
    * @return {string}
    */
   FileManager.prototype.getIconType = function(entry) {
     if (!('cachedIconType_' in entry))
       entry.cachedIconType_ = this.computeIconType_(entry);
     return entry.cachedIconType_;
@@ skipping 299 matching lines @@
                 !isSystemDirEntry(this.currentDirEntry_));
 
       case 'delete':
         return (// Initialized to the point where we have a current directory
                 this.currentDirEntry_ &&
                 // Rename not in progress.
                 !this.renameInput_.currentEntry &&
                 !isSystemDirEntry(this.currentDirEntry_)) &&
                 this.selection &&
                 this.selection.totalCount > 0;
+
+      case 'newfolder':
+        return this.currentDirEntry_ &&
+               (this.dialogType_ == 'saveas-file' ||
+                this.dialogType_ == 'full-page');
     }
   };
 
   FileManager.prototype.updateCommonActionButtons_ = function() {
     if (this.deleteButton_)
       this.deleteButton_.disabled = !this.canExecute_('delete');
   };
 
   FileManager.prototype.setListType = function(type) {
     if (type && type == this.listType_)
@@ skipping 187 matching lines @@
                        leadIndex);
           return;
         }
 
         this.initiateRename_(label);
         return;
 
       case 'delete':
         this.deleteEntries(this.selection.entries);
         return;
+
+      case 'newfolder':
+        this.onNewFolderCommand_(event);
+        return;
     }
   };
 
   /**
    * Respond to the back and forward buttons.
    */
   FileManager.prototype.onPopState_ = function(event) {
     // TODO(serya): We should restore selected items here.
     if (this.rootEntries_)
       this.setupCurrentDirectory_();
   };
 
   FileManager.prototype.requestResize_ = function(timeout) {
     var self = this;
     setTimeout(function() { self.onResize_() }, timeout || 0);
   };
 
   /**
    * Resize details and thumb views to fit the new window size.
    */
   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';
 
     if (this.listType_ == FileManager.ListType.THUMBNAIL) {
       var self = this;
       setTimeout(function() {
           self.grid_.columns = 0;
           self.grid_.redraw();
       }, 0);
     } else {
       this.currentList_.redraw();
     }
+
+    this.rootsList_.style.height =
+        this.rootsList_.parentNode.clientHeight + 'px';
+    this.rootsList_.redraw();
   };
 
   FileManager.prototype.resolvePath = function(
       path, resultCallback, errorCallback) {
     return util.resolvePath(this.filesystem_.root, path, resultCallback,
                             errorCallback);
   };
 
   /**
    * Restores current directory and may be a selected item after page load (or
@@ skipping 13 matching lines @@
       this.setupPath_(this.params_.defaultPath);
     } else {
       this.setupDefaultPath_();
     }
   };
 
   FileManager.prototype.setupDefaultPath_ = function() {
     // 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,

[SeRya, 2011/11/28 10:30:55]

removableDirectoryEntry may be undefined. Access to .fullPath would cause an
exception in this case.

[dgozman, 2011/11/28 11:45:53]

Done.

+        CD_NO_HISTORY);
   };
 
   FileManager.prototype.setupPath_ = function(path) {
     // Split the dirname from the basename.
     var ary = path.match(/^(?:(.*)\/)?([^\/]*)$/);
     if (!ary) {
       console.warn('Unable to split default path: ' + path);
       self.changeDirectory('/', CD_NO_HISTORY);
       return;
     }
@@ skipping 16 matching lines @@
           return;
         }
 
         // Leaf is an existing file, cd to its parent directory and select it.
         self.changeDirectoryEntry(baseDirEntry, CD_NO_HISTORY, leafEntry.name);
       }
 
       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);
         } else {
           console.log('Unexpected error resolving default leaf: ' + err);
           self.changeDirectoryEntry('/', CD_NO_HISTORY);
         }
       }
 
       self.resolvePath(path, onLeafFound, onLeafError);
     }
 
     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);
     }
 
     if (baseName) {
       this.filesystem_.root.getDirectory(
           baseName, {create: false}, onBaseFound, onBaseError);
     } else {
       onBaseFound(this.filesystem_.root);
@@ skipping 243 matching lines @@
 
     var icon = this.document_.createElement('div');
     icon.className = 'detail-icon';
     this.getIconType(entry);
     icon.setAttribute('iconType', entry.cachedIconType_);
     div.appendChild(icon);
 
     return div;
   };
 
   FileManager.prototype.getLabelForRootPath_ = function(path) {

[SeRya, 2011/11/28 10:30:55]

Looks like meaning of the parameter has changed. Now the path is assumed to be
absolute (starting with '/'). Please, write a comment to reflect that.

[dgozman, 2011/11/28 11:45:53]

Done.

     // 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');

[SeRya, 2011/11/28 10:30:55]

path == '/', right?

[dgozman, 2011/11/28 11:45:53]

Path may be arbitrary here. Changed to remove |path| and removed
ROOT_DIRECTORY_LABEL string entirely.

   };
 
+  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) {
+    this.unmountRequests_.push(entry.toURL());
+    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.
    *
    * @param {Entry} entry The Entry object to render.
    * @param {string} columnId The id of the column to be rendered.
    * @param {cr.ui.Table} table The table doing the rendering.
    */
   FileManager.prototype.renderName_ = function(entry, columnId, table) {
@@ skipping 328 matching lines @@
           // Skip the button creation.
           if (!str('ENABLE_PHOTO_EDITOR')) continue;
           this.galleryTask_ = task;
         }
       }
       this.renderTaskButton_(task);
     }
 
     // These are done in separate functions, as the checks require
     // asynchronous function calls.
-    this.maybeRenderUnmountTask_(selection);
     this.maybeRenderFormattingTask_(selection);
   };
 
   FileManager.prototype.renderTaskButton_ = function(task) {
     var button = this.document_.createElement('button');
     button.addEventListener('click',
         this.onTaskButtonClicked_.bind(this, task));
     button.className = 'task-button';
 
     var img = this.document_.createElement('img');
     img.src = task.iconUrl;
 
     button.appendChild(img);
     var label = this.document_.createElement('div');
     label.appendChild(this.document_.createTextNode(task.title))
     button.appendChild(label);
 
     this.taskButtons_.appendChild(button);
   };
 
   /**
-   * 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.
    * @param {Object} selection Selected files object.
    */
   FileManager.prototype.maybeRenderFormattingTask_ = function(selection) {
     // Not to make unnecessary getMountPoints() call we doublecheck if there is
     // only one selected entry.
     if (selection.entries.length != 1)
       return;
@@ skipping 60 matching lines @@
     chrome.fileBrowserPrivate.executeTask(task.taskId, urls);
   };
 
   /**
    * Event handler called when some volume was mounted or unmouted.
    */
   FileManager.prototype.onMountCompleted_ = function(event) {
     var self = this;
     chrome.fileBrowserPrivate.getMountPoints(function(mountPoints) {
       self.mountPoints_ = mountPoints;
+      var changeDirectoryTo = null;
+
       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);
-            } else {
-              // Report mount error.
-              if (event.mountType == 'file') {
-                var fileName = event.sourceUrl.substr(
-                    event.sourceUrl.lastIndexOf('/') + 1);
-                self.alert.show(strf('ARCHIVE_MOUNT_FAILED', fileName,
-                                     event.status));
-              }
-            }
-            return;
-          }
+        // Mount request finished - remove it.
+        var index = self.mountRequests_.indexOf(event.sourceUrl);
+        if (index != -1) {
+          self.mountRequests_.splice(index, 1);
+          // Go to mounted directory, if request was initiated from this tab.
+          if (event.status == 'success')
+            changeDirectoryTo = event.mountPath;
         }
       }
 
+      if (event.eventType == 'unmount') {
+        // Unmount request finished - remove it.
+        var index = self.unmountRequests_.indexOf(event.sourceUrl);
+        if (index != -1)
+          self.unmountRequests_.splice(index, 1);
+      }
+
+      if (event.eventType == 'mount' && event.status != 'success' &&
+          event.mountType == 'file') {
+        // Report mount error.
+        var fileName = event.sourceUrl.substr(
+            event.sourceUrl.lastIndexOf('/') + 1);
+        self.alert.show(strf('ARCHIVE_MOUNT_FAILED', fileName,
+                             event.status));
+      }
+
+      if (event.eventType == 'unmount' && event.status != 'success') {
+        // Report unmount error.
+        // TODO(dgozman): introduce string and show alert here.
+      }
+
       if (event.eventType == 'unmount' && event.status == 'success' &&
           self.currentDirEntry_ &&
           isParentPath(event.mountPath, self.currentDirEntry_.fullPath)) {
-        self.changeDirectory(getParentPath(event.mountPath));
-        return;
+        changeDirectoryTo = getParentPath(event.mountPath);
       }
 
-      var rescanDirectoryNeeded = (event.status == 'success');
-      for (var i = 0; i < mountPoints.length; i++) {
-        if (event.sourceUrl == mountPoints[i].sourceUrl &&
-            mountPoints[i].mountCondition != '') {
-          rescanDirectoryNeeded = true;
-        }
-      }
-      // TODO(dgozman): rescan directory, only if it contains mounted points,
-      // when mounts location will be decided.
-      if (rescanDirectoryNeeded)
-        self.rescanDirectory_(null, 300);
+      // In the case of success, roots are changed and should be rescanned.
+      if (event.status == 'success')
+        self.updateRoots_(changeDirectoryTo);
     });
   };
 
   /**
    * Event handler called when some internal task should be executed.
    */
   FileManager.prototype.onFileTaskExecute_ = function(id, details) {
     var urls = details.urls;
     if (id == 'preview') {
       g_slideshow_data = urls;
       chrome.tabs.create({url: "slideshow.html"});
     } else if (id == 'play' || id == 'enqueue') {
       chrome.fileBrowserPrivate.viewFiles(urls, id);
     } else if (id == 'mount-archive') {
       for (var index = 0; index < urls.length; ++index) {
         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]);
       });
     } else if (id == 'gallery') {
       // Pass to gallery all possible tasks except the gallery itself.
       var noGallery = [];
       for (var index = 0; index < details.task.allTasks.length; index++) {
         var task = details.task.allTasks[index];
         if (task.taskId != this.getExtensionId_() + '|gallery') {
@@ skipping 56 matching lines @@
           self.metadataProvider_,
           shareActions,
           str);
     };
 
     galleryFrame.src = 'js/image_editor/gallery.html';
     this.dialogDom_.appendChild(galleryFrame);
     galleryFrame.focus();
   };
 
+  FileManager.prototype.getRootForPath_ = function(path) {
+    for (var index = 0; index < this.rootEntries_.length; index++) {
+      if (isParentPath(this.rootEntries_[index].fullPath, path)) {
+        return index;
+      }
+    }
+    return -1;
+  };
+
   /**
    * Update the breadcrumb display to reflect the current directory.
    */
   FileManager.prototype.updateBreadcrumbs_ = function() {
     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 rootIndex = this.getRootForPath_(fullPath);
+    if (rootIndex == -1) {
+      console.error('Not root for: ' + fullPath);
+      return;
+    }
+    var root = this.rootEntries_[rootIndex];
+
+    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);

[SeRya, 2011/11/28 10:30:55]

Remove braces.

[dgozman, 2011/11/28 11:45:53]

Done.

       } else {
         div.textContent = pathName;
       }
 
+      path = path + '/';
       div.path = path;
       div.addEventListener('click', this.onBreadcrumbClick_.bind(this));
 
       bc.appendChild(div);
 
       if (i == pathNames.length - 1) {
         div.classList.add('breadcrumb-last');
       } else {
         var spacer = this.document_.createElement('div');
         spacer.className = 'breadcrumb-spacer';
@@ skipping 79 matching lines @@
     for (var i = 0; i < this.dataModel_.length; i++) {
       if (this.dataModel_.item(i).name == name) {
         this.currentList_.selectionModel.selectedIndex = i;
         this.currentList_.scrollIndexIntoView(i);
         this.currentList_.focus();
         return;
       }
     }
   };
 
+  FileManager.prototype.updateRootsListSelection_ = function() {
+    if (!this.currentDirEntry_) return;
+    var index = this.getRootForPath_(this.currentDirEntry_.fullPath);
+    if (index == -1) {
+      this.rootsList_.selectionModel.selectedIndex = 0;
+    } else {
+      if (this.rootsList_.selectionModel.selectedIndex != index)
+        this.rootsList_.selectionModel.selectedIndex = index;
+    }
+  };
+
   /**
    * Add the file/directory with given name to the current selection.
    *
    * @param {string} name The name of the entry to select.
    * @return {boolean} Whether entry exists.
    */
   FileManager.prototype.addItemToSelection = function(name) {
     var entryExists = false;
     for (var i = 0; i < this.dataModel_.length; i++) {
       if (this.dataModel_.item(i).name == name) {
@@ skipping 95 matching lines @@
   FileManager.prototype.changeDirectoryEntry = function(dirEntry,
                                                         opt_saveHistory,
                                                         opt_selectedEntry,
                                                         opt_callback) {
     if (typeof opt_saveHistory == 'undefined') {
       opt_saveHistory = true;
     } else {
       opt_saveHistory = !!opt_saveHistory;
     }
 
-    var location = '#' + encodeURI(dirEntry.fullPath);
+    // Some directories are above roots, so we instead show the first root.
+    // There may be request to change directory above the roots. For example,
+    // when usb-dirve is removed, we try to change to the parent directory,
+    // which is REMOVABLE_DIRECTORY.
+    if (!dirEntry || dirEntry.fullPath == '/' ||
+        dirEntry.fullPath == REMOVABLE_DIRECTORY ||
+        dirEntry.fullPath == ARCHIVE_DIRECTORY) {
+      dirEntry = this.rootEntries_[0] || dirEntry;
+    }
+
+/*    var location = '#' + encodeURI(dirEntry.fullPath);

[SeRya, 2011/11/28 10:30:55]

Uncomment.

[dgozman, 2011/11/28 11:45:53]

Done.

     if (opt_saveHistory) {
       history.pushState(undefined, dirEntry.fullPath, location);
     } else if (window.location.hash != location) {
       // If the user typed URL manually that is not canonical it would be fixed
       // here. However it seems history.replaceState doesn't work properly
       // with rewritable URLs (while does with history.pushState). It changes
       // window.location but doesn't change content of the ombibox.
       history.replaceState(undefined, dirEntry.fullPath, location);
     }
-
+*/
     if (this.currentDirEntry_ &&
         this.currentDirEntry_.fullPath == dirEntry.fullPath) {
       // Directory didn't actually change.
       if (opt_selectedEntry)
         this.selectEntry(opt_selectedEntry);
       return;
     }
 
     var e = new cr.Event('directory-changed');
     e.previousDirEntry = this.currentDirEntry_;
@@ skipping 205 matching lines @@
       // then the default action of this click event fires and toggles the
       // checkbox back off.
       //
       // Since we're going to force checkboxes into the correct state for any
       // multi-selection, we can prevent this shift click from toggling the
       // checkbox and avoid the trouble.
       event.preventDefault();
     }
   };
 
+  FileManager.prototype.onRootsSelectionChanged_ = function(event) {
+    var root = this.rootEntries_[this.rootsList_.selectionModel.selectedIndex];
+    this.changeDirectoryEntry(root);
+  };
+
+  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.
    *
    * @param {cr.Event} event The change event.
    */
   FileManager.prototype.onSelectionChanged_ = function(event) {
     this.summarizeSelection_();
 
     if (this.dialogType_ == FileManager.DialogType.SELECT_SAVEAS_FILE) {
       // If this is a save-as dialog, copy the selected file into the filename
       // input text box.
 
       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_();
 
     var self = this;
     setTimeout(function() { self.onSelectionChangeComplete_(event) }, 0);
   };
 
   /**
    * Handle selection change related tasks that won't run properly during
@@ skipping 132 matching lines @@
    * Update the UI when the current directory changes.
    *
    * @param {cr.Event} event The directory-changed event.
    */
   FileManager.prototype.onDirectoryChanged_ = function(event) {
     this.updateCommands_();
     this.updateOkButton_();
 
     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;
 
     if (this.subscribedOnDirectoryChanges_) {
       chrome.fileBrowserPrivate.removeFileWatch(event.previousDirEntry.toURL(),
           function(result) {
             if (!result) {
               console.log('Failed to remove file watch');
             }
@@ skipping 75 matching lines @@
     // Updated when a user clicks on the label of a file, used to detect
     // when a click is eligible to trigger a rename.  Can be null, or
     // an object with 'path' and 'date' properties.
     this.lastLabelClick_ = null;
 
     // Clear the table first.
     this.dataModel_.splice(0, this.dataModel_.length);
     this.currentList_.selectionModel.clear();
 
     this.updateBreadcrumbs_();
+    this.updateRootsListSelection_();
 
-    if (this.currentDirEntry_.fullPath != '/') {
-      // Add current request to pending result list
-      this.pendingRescanQueue_.push({
-            onSuccess:opt_callback,
-            onError:opt_onError
-          });
+    // Add current request to pending result list
+    this.pendingRescanQueue_.push({
+          onSuccess:opt_callback,
+          onError:opt_onError
+        });
 
-      if (this.rescanRunning_)
-        return;
+    if (this.rescanRunning_)
+      return;
 
-      this.rescanRunning_ = true;
+    this.rescanRunning_ = true;
 
-      // The current list of callbacks is saved and reset.  Subsequent
-      // calls to rescanDirectory_ while we're still pending will be
-      // saved and will cause an additional rescan to happen after a delay.
-      var callbacks = this.pendingRescanQueue_;
+    // The current list of callbacks is saved and reset.  Subsequent
+    // calls to rescanDirectory_ while we're still pending will be
+    // saved and will cause an additional rescan to happen after a delay.
+    var callbacks = this.pendingRescanQueue_;
 
-      this.pendingRescanQueue_ = [];
+    this.pendingRescanQueue_ = [];
 
-      var self = this;
-      var reader;
+    var self = this;
+    var reader;
 
-      function onError() {
+    function onError() {
+      if (self.pendingRescanQueue_.length > 0) {
+        setTimeout(self.rescanDirectory_.bind(self),
+            SIMULTANEOUS_RESCAN_INTERVAL);
+      }
+
+      self.rescanRunning_ = false;
+
+      for (var i= 0; i < callbacks.length; i++) {
+        if (callbacks[i].onError)
+          try {
+            callbacks[i].onError();
+          } catch (ex) {
+            console.error('Caught exception while notifying about error: ' +
+                        name, ex);
+          }
+      }
+    }
+
+    function onReadSome(entries) {
+      if (entries.length == 0) {
+        metrics.recordTime('DirectoryScan');
+        if (self.currentDirEntry_.fullPath == DOWNLOADS_DIRECTORY) {
+          metrics.reportCount("DownloadsCount", self.dataModel_.length);
+        }
+
         if (self.pendingRescanQueue_.length > 0) {
           setTimeout(self.rescanDirectory_.bind(self),
               SIMULTANEOUS_RESCAN_INTERVAL);
         }
 
         self.rescanRunning_ = false;
-
         for (var i= 0; i < callbacks.length; i++) {
-          if (callbacks[i].onError)
+          if (callbacks[i].onSuccess)
             try {
-              callbacks[i].onError();
+              callbacks[i].onSuccess();
             } catch (ex) {
               console.error('Caught exception while notifying about error: ' +
                           name, ex);
             }
         }
+
+        return;
       }
 
-      function onReadSome(entries) {
-        if (entries.length == 0) {
-          metrics.recordTime('DirectoryScan');
-          if (self.currentDirEntry_.fullPath == DOWNLOADS_DIRECTORY) {
-            metrics.reportCount("DownloadsCount", self.dataModel_.length);
-          }
+      // Splice takes the to-be-spliced-in array as individual parameters,
+      // rather than as an array, so we need to perform some acrobatics...
+      var spliceArgs = [].slice.call(entries);
 
-          if (self.pendingRescanQueue_.length > 0) {
-            setTimeout(self.rescanDirectory_.bind(self),
-                SIMULTANEOUS_RESCAN_INTERVAL);
-          }
+      // Hide files that start with a dot ('.').
+      // TODO(rginda): User should be able to override this. Support for other
+      // commonly hidden patterns might be nice too.
+      if (self.filterFiles_) {
+        spliceArgs = spliceArgs.filter(function(e) {
+            return e.name.substr(0, 1) != '.';
+          });
+      }
 
-          self.rescanRunning_ = false;
-          for (var i= 0; i < callbacks.length; i++) {
-            if (callbacks[i].onSuccess)
-              try {
-                callbacks[i].onSuccess();
-              } catch (ex) {
-                console.error('Caught exception while notifying about error: ' +
-                            name, ex);
-              }
-          }
+      spliceArgs.unshift(0, 0);  // index, deleteCount
+      self.dataModel_.splice.apply(self.dataModel_, spliceArgs);
 
-          return;
-        }
+      // Keep reading until entries.length is 0.
+      reader.readEntries(onReadSome, onError);
+    };
 
-        // Splice takes the to-be-spliced-in array as individual parameters,
-        // rather than as an array, so we need to perform some acrobatics...
-        var spliceArgs = [].slice.call(entries);
+    metrics.startInterval('DirectoryScan');
 
-        // Hide files that start with a dot ('.').
-        // TODO(rginda): User should be able to override this. Support for other
-        // commonly hidden patterns might be nice too.
-        if (self.filterFiles_) {
-          spliceArgs = spliceArgs.filter(function(e) {
-              return e.name.substr(0, 1) != '.';
-            });
-        }
-
-        spliceArgs.unshift(0, 0);  // index, deleteCount
-        self.dataModel_.splice.apply(self.dataModel_, spliceArgs);
-
-        metrics.startInterval('DirectoryScan');
-
-        // Keep reading until entries.length is 0.
-        reader.readEntries(onReadSome, onError);
-      };
-
-      // If not the root directory, just read the contents.
-      reader = this.currentDirEntry_.createReader();
-      reader.readEntries(onReadSome, onError);
-      return;
-    }
-
-    // Otherwise, use the provided list of root subdirectories, since the
-    // real local filesystem root directory (the one we use outside the
-    // harness) can't be enumerated yet.
-    var spliceArgs = [].slice.call(this.rootEntries_);
-    spliceArgs.unshift(0, 0);  // index, deleteCount
-    this.dataModel_.splice.apply(this.dataModel_, spliceArgs);
-
-    if (opt_callback)
-      opt_callback();
+    // If not the root directory, just read the contents.
+    reader = this.currentDirEntry_.createReader();
+    reader.readEntries(onReadSome, onError);
   };
 
   FileManager.prototype.findListItem_ = function(event) {
     var node = event.srcElement;
     while (node) {
       if (node.tagName == 'LI')
         break;
       node = node.parentNode;
     }
 
@@ skipping 223 matching lines @@
         var selectionEnd = input.value.lastIndexOf('.');
         if (selectionEnd == -1) {
           input.select();
         } else {
           input.selectionStart = 0;
           input.selectionEnd = selectionEnd;
         }
     }, 0);
   };
 
-  FileManager.prototype.onNewFolderButtonClick_ = function(event) {
+  FileManager.prototype.onToggleSidebar_ = function(event) {
+    if (this.dialogContainer_.hasAttribute('sidebar')) {

[SeRya, 2011/11/28 10:30:55]

Now we have 3 attributes that does essentially the same things: hidden,
visibility and now 'sidebar'.

Moreover behavior is different. "Low disk space" and the bottom panel resize the
list with no delay then showing. We must have consistency with the animation and
avoid code duplication.

[dgozman, 2011/11/28 11:45:53]

I've filed a bug: crosbug.com/23455.

+      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) {
       var valid = self.validateFileName_(name, function() {
         promptForName(name);
       });
 
       if (!valid) {
         // Validation failed.  User will be prompted for a new name after they
         // dismiss the validation error dialog.
@@ skipping 108 matching lines @@
             this.dialogType_ != FileManager.SELECT_FOLDER) {
           event.preventDefault();
           this.onDirectoryAction(this.selection.entries[0]);
         } else if (!this.okButton_.disabled) {
           event.preventDefault();
           this.onOk_();
         }
         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;
 
       case 88:  // Ctrl-X => Cut.
         this.updateCommands_();
         if (!this.commands_['cut'].disabled) {
           event.preventDefault();
           this.commands_['cut'].execute();
         }
         break;
@@ skipping 308 matching lines @@
           });
       }, onError);
 
       function onError(err) {
         console.log('Error while checking free space: ' + err);
         setTimeout(doCheck, 1000 * 60);
       }
     }
   }
 })();