Files.app: Add subfolders in the left nav

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

-// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Copyright (c) 2013 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.
 
 // This variable is checked in SelectFileDialogExtensionBrowserTest.
 var JSErrorCount = 0;
 
 /**
  * Count uncaught exceptions.
  */
 window.onerror = function() { JSErrorCount++ };
@@ skipping 498 matching lines @@
         this.onCopyManagerOperationComplete_.bind(this));
 
     var controller = this.fileTransferController_ =
         new FileTransferController(this.document_,
                                    this.copyManager_,
                                    this.directoryModel_);
     controller.attachDragSource(this.table_.list);
     controller.attachDropTarget(this.table_.list);
     controller.attachDragSource(this.grid_);
     controller.attachDropTarget(this.grid_);
-    controller.attachDropTarget(this.rootsList_, true);
+    controller.attachDropTarget(this.directoryTree_, true);

[mtomasz, 2013/03/14 10:15:39]

nit: Please add comment what is that 'true' argument.

[yoshiki, 2013/03/14 13:43:42]

Done.

     controller.attachBreadcrumbsDropTarget(this.breadcrumbs_);
     controller.attachCopyPasteHandlers();
     controller.addEventListener('selection-copied',
         this.blinkSelection.bind(this));
     controller.addEventListener('selection-cut',
         this.blinkSelection.bind(this));
   };
 
   /**
      * One-time initialization of context menus.
      */
   FileManager.prototype.initContextMenus_ = function() {
     this.fileContextMenu_ = this.dialogDom_.querySelector('#file-context-menu');
     cr.ui.Menu.decorate(this.fileContextMenu_);
 
     cr.ui.contextMenuHandler.setContextMenu(this.grid_, this.fileContextMenu_);
     cr.ui.contextMenuHandler.setContextMenu(this.table_.querySelector('.list'),
         this.fileContextMenu_);
     cr.ui.contextMenuHandler.setContextMenu(
         this.document_.querySelector('.drive-welcome.page'),
         this.fileContextMenu_);
 
     this.rootsContextMenu_ =
         this.dialogDom_.querySelector('#roots-context-menu');
     cr.ui.Menu.decorate(this.rootsContextMenu_);
 
+    this.directoryTree_.setContextMenu(this.rootsContextMenu_);
+
     this.textContextMenu_ =
         this.dialogDom_.querySelector('#text-context-menu');
     cr.ui.Menu.decorate(this.textContextMenu_);
 
     this.gearButton_ = this.dialogDom_.querySelector('#gear-button');
     this.gearButton_.addEventListener('menushow',
         this.refreshRemainingSpace_.bind(this,
                                          false /* Without loading caption. */));
     cr.ui.decorate(this.gearButton_, cr.ui.MenuButton);
 
@@ skipping 20 matching lines @@
       cr.ui.Command.decorate(commands[i]);
 
     var doc = this.document_;
 
     CommandUtil.registerCommand(doc, 'newfolder',
         Commands.newFolderCommand, this, this.directoryModel_);
 
     CommandUtil.registerCommand(doc, 'newwindow',
         Commands.newWindowCommand, this);
 
-    CommandUtil.registerCommand(this.rootsList_, 'unmount',
-        Commands.unmountCommand, this.rootsList_, this);
+    CommandUtil.registerCommand(this.directoryTree_, 'unmount',
+        Commands.unmountCommand, this.directoryTree_, this);
 
     CommandUtil.registerCommand(doc, 'format',
-        Commands.formatCommand, this.rootsList_, this, this.directoryModel_);
+        Commands.formatCommand, this.directoryTree_, this,
+        this.directoryModel_);
 
-    CommandUtil.registerCommand(this.rootsList_, 'import-photos',
-        Commands.importCommand, this.rootsList_);
+    CommandUtil.registerCommand(this.directoryTree_, 'import-photos',
+        Commands.importCommand, this.directoryTree_);
 
     CommandUtil.registerCommand(doc, 'delete',
         Commands.deleteFileCommand, this);
 
     CommandUtil.registerCommand(doc, 'rename',
         Commands.renameFileCommand, this);
 
     CommandUtil.registerCommand(doc, 'volume-help',
         Commands.volumeHelpCommand, this);
 
@@ skipping 297 matching lines @@
 
     var fileListFocusBound = this.onFileListFocus_.bind(this);
     var fileListBlurBound = this.onFileListBlur_.bind(this);
 
     this.table_.list.addEventListener('focus', fileListFocusBound);
     this.grid_.addEventListener('focus', fileListFocusBound);
 
     this.table_.list.addEventListener('blur', fileListBlurBound);
     this.grid_.addEventListener('blur', fileListBlurBound);
 
-    this.initRootsList_();
+    this.initSidebar_();
 
     this.table_.addEventListener('column-resize-end',
                                  this.updateStartupPrefs_.bind(this));
 
     this.setListType(prefs.listType || FileManager.ListType.DETAIL);
 
     if (prefs.columns) {
       var cm = this.table_.columnModel;
       for (var i = 0; i < cm.totalSize; i++) {
         if (prefs.columns[i] > 0)
@@ skipping 12 matching lines @@
     // Update metadata to change 'Today' and 'Yesterday' dates.
     var today = new Date();
     today.setHours(0);
     today.setMinutes(0);
     today.setSeconds(0);
     today.setMilliseconds(0);
     setTimeout(this.dailyUpdateModificationTime_.bind(this),
                today.getTime() + MILLISECONDS_IN_DAY - Date.now() + 1000);
   };
 
-  FileManager.prototype.initRootsList_ = function() {
-    this.rootsList_ = this.dialogDom_.querySelector('#roots-list');
-    cr.ui.List.decorate(this.rootsList_);
+  FileManager.prototype.initSidebar_ = function() {
+    this.directoryTree_ = this.dialogDom_.querySelector('#directory-tree');
+    DirectoryTree.decorate(this.directoryTree_, this.directoryModel_);
 
-    // Overriding default role 'list' set by cr.ui.List.decorate() to 'listbox'
-    // role for better accessibility on ChromeOS.
-    this.rootsList_.setAttribute('role', 'listbox');
-
-    var self = this;
-    this.rootsList_.itemConstructor = function(entry) {
-      return self.renderRoot_(entry.fullPath);
-    };
-
-    this.rootsList_.selectionModel =
-        this.directoryModel_.getRootsListSelectionModel();
-
-    // TODO(dgozman): add "Add a drive" item.
-    this.rootsList_.dataModel = this.directoryModel_.getRootsList();
+    this.directoryTree_.addEventListener('change', function() {
+      var currentPath = this.directoryTree_.getCurrentPath() ||

[mtomasz, 2013/03/14 10:15:39]

Indentation is off? I think we can align.

[yoshiki, 2013/03/14 13:43:42]

Done.

+                          this.directoryModel_.getDefaultDirectory();
+      this.directoryModel_.changeDirectory(currentPath);
+    }.bind(this));
   };
 
   FileManager.prototype.updateStartupPrefs_ = function() {
     var sortStatus = this.directoryModel_.getFileList().sortStatus;
     var prefs = {
       sortField: sortStatus.field,
       sortDirection: sortStatus.direction,
       columns: []
     };
     var cm = this.table_.columnModel;
@@ skipping 48 matching lines @@
    */
   FileManager.prototype.getSelectedFilterIndex_ = function() {
     var index = Number(this.fileTypeSelector_.selectedIndex);
     if (index < 0)  // Nothing selected.
       return 0;
     if (this.params_.includeAllFiles)  // Already 1-based.
       return index;
     return index + 1;  // Convert to 1-based;
   };
 
-  FileManager.prototype.getRootEntry_ = function(index) {
-    if (index == -1)
-      return null;
-
-    return this.rootsList_.dataModel.item(index);
-  };
-
   FileManager.prototype.setListType = function(type) {
     if (type && type == this.listType_)
       return;
 
     this.table_.list.startBatchUpdates();
     this.grid_.startBatchUpdates();
 
     // TODO(dzvorygin): style.display and dataModel setting order shouldn't
     // cause any UI bugs. Currently, the only right way is first to set display
     // style and only then set dataModel.
@@ skipping 187 matching lines @@
       g.startBatchUpdates();
       setTimeout(function() {
         g.columns = 0;
         g.redraw();
         g.endBatchUpdates();
       }, 0);
     } else {
       this.table_.redraw();
     }
 
-    this.rootsList_.redraw();
     this.breadcrumbs_.truncate();
     this.searchBreadcrumbs_.truncate();
 
     this.updateWindowState_();
   };
 
   FileManager.prototype.updateWindowState_ = function() {
     util.platform.getWindowStatus(function(wnd) {
       if (wnd.state == 'maximized') {
         this.dialogDom_.setAttribute('maximized', 'maximized');
@@ skipping 196 matching lines @@
     }
 
     this.okButton_.textContent = okLabel;
 
     var dialogTitle = this.params_.title || defaultTitle;
     this.dialogDom_.querySelector('.dialog-title').textContent = dialogTitle;
 
     this.dialogDom_.setAttribute('type', this.dialogType);
   };
 
-  FileManager.prototype.renderRoot_ = function(path) {
-    var li = this.document_.createElement('li');
-    li.className = 'root-item';
-    li.setAttribute('role', 'option');
-    var dm = this.directoryModel_;
-    var handleClick = function() {
-      if (li.selected && path !== dm.getCurrentDirPath()) {
-        dm.changeDirectory(path);
-      }
-    };
-    li.addEventListener('mousedown', handleClick);
-    li.addEventListener(cr.ui.TouchHandler.EventType.TOUCH_START, handleClick);
-
-    var rootType = PathUtil.getRootType(path);
-
-    var iconDiv = this.document_.createElement('div');
-    iconDiv.className = 'volume-icon';
-    iconDiv.setAttribute('volume-type-icon', rootType);
-    if (rootType === RootType.REMOVABLE) {
-      iconDiv.setAttribute('volume-subtype',
-          this.volumeManager_.getDeviceType(path));
-    }
-    li.appendChild(iconDiv);
-
-    var div = this.document_.createElement('div');
-    div.className = 'root-label';
-
-    div.textContent = PathUtil.getRootLabel(path);
-    li.appendChild(div);
-
-    if (rootType === RootType.ARCHIVE || rootType === RootType.REMOVABLE) {
-      var eject = this.document_.createElement('div');
-      eject.className = 'root-eject';
-      eject.addEventListener('click', function(event) {
-        event.stopPropagation();
-        var unmountCommand = this.dialogDom_.querySelector('command#unmount');
-        // Let's make sure 'canExecute' state of the command is properly set for
-        // the root before executing it.
-        unmountCommand.canExecuteChange(li);
-        unmountCommand.execute(li);
-      }.bind(this));
-      // Block other mouse handlers.
-      eject.addEventListener('mouseup', function(e) { e.stopPropagation() });
-      eject.addEventListener('mousedown', function(e) { e.stopPropagation() });
-      li.appendChild(eject);
-    }
-
-    if (rootType != RootType.DRIVE && rootType != RootType.DOWNLOADS)
-      cr.ui.contextMenuHandler.setContextMenu(li, this.rootsContextMenu_);
-
-    cr.defineProperty(li, 'lead', cr.PropertyKind.BOOL_ATTR);
-    cr.defineProperty(li, 'selected', cr.PropertyKind.BOOL_ATTR);
-
-    return li;
-  };
-
   /**
    * Unmounts device.
    * @param {string} path Path to a volume to unmount.
    */
   FileManager.prototype.unmountVolume = function(path) {
-    var listItem = this.rootsList_.getListItemByIndex(
-        this.directoryModel_.findRootsListIndex(path));
-    if (listItem)
-      listItem.setAttribute('disabled', '');
     var onError = function(error) {
-      if (listItem)
-        listItem.removeAttribute('disabled');
       this.alert.showHtml('', str('UNMOUNT_FAILED'));
     };
     this.volumeManager_.unmount(path, function() {}, onError.bind(this));
   };
 
   FileManager.prototype.refreshCurrentDirectoryMetadata_ = function() {
     var entries = this.directoryModel_.getFileList().slice();
     var directoryEntry = this.directoryModel_.getCurrentDirEntry();
     // We don't pass callback here. When new metadata arrives, we have an
     // observer registered to update the UI.
@@ skipping 1618 matching lines @@
       callback(this.preferences_);
       return;
     }
 
     chrome.fileBrowserPrivate.getPreferences(function(prefs) {
       this.preferences_ = prefs;
       callback(prefs);
     }.bind(this));
   };
 })();