Rename VolumeList -> NavigationList in Files.app

BUG=268812
TEST=Files.app runs without error. All tests pass.
R=mtomasz@chromium.org

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

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

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

@@ -415,7 +415,7 @@ function onExecute(action, details) {
         defaultPath: details.entries[0].fullPath,
       };
       // For mounted devices just focus any Files.app window. The mounted
-      // volume will appear on the volume list.
+      // volume will appear on the navigation list.
       var type = action == 'auto-open' ? LaunchType.FOCUS_ANY_OR_CREATE :
           LaunchType.FOCUS_SAME_OR_CREATE;
       launchFileManager(appState,

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

@@ -448,7 +448,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
     controller.attachDragSource(this.grid_);
     controller.attachFileListDropTarget(this.grid_);
     controller.attachTreeDropTarget(this.directoryTree_);
-    controller.attachVolumesDropTarget(this.volumeList_, true);
+    controller.attachNavigationListDropTarget(this.navigationList_, true);
     controller.attachCopyPasteHandlers();
     controller.addEventListener('selection-copied',
         this.blinkSelection.bind(this));
@@ -474,7 +474,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
     this.rootsContextMenu_ =
         this.dialogDom_.querySelector('#roots-context-menu');
     cr.ui.Menu.decorate(this.rootsContextMenu_);
-    this.volumeList_.setContextMenu(this.rootsContextMenu_);
+    this.navigationList_.setContextMenu(this.rootsContextMenu_);
 
     this.directoryTreeContextMenu_ =
         this.dialogDom_.querySelector('#directory-tree-context-menu');
@@ -565,14 +565,14 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
     CommandUtil.registerCommand(this.dialogContainer_, 'change-default-app',
         Commands.changeDefaultAppCommand, this);
 
-    CommandUtil.registerCommand(this.volumeList_, 'unmount',
-        Commands.unmountCommand, this.volumeList_, this);
+    CommandUtil.registerCommand(this.navigationList_, 'unmount',
+        Commands.unmountCommand, this.navigationList_, this);
 
-    CommandUtil.registerCommand(this.volumeList_, 'import-photos',
-        Commands.importCommand, this.volumeList_);
+    CommandUtil.registerCommand(this.navigationList_, 'import-photos',
+        Commands.importCommand, this.navigationList_);
 
     CommandUtil.registerCommand(this.dialogContainer_, 'format',
-        Commands.formatCommand, this.volumeList_, this,
+        Commands.formatCommand, this.navigationList_, this,
         this.directoryModel_);
 
     CommandUtil.registerCommand(this.dialogContainer_, 'delete',
@@ -624,7 +624,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
       CommandUtil.registerCommand(this.dialogContainer_,
                                   'volume-switch-' + i,
                                   Commands.volumeSwitchCommand,
-                                  this.volumeList_,
+                                  this.navigationList_,
                                   i);
     }
 
@@ -1181,10 +1181,10 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
       this.updateMiddleBarVisibility_(true);
     }.bind(this));
 
-    this.volumeList_ = this.dialogDom_.querySelector('#volume-list');
-    VolumeList.decorate(this.volumeList_,
-                        this.directoryModel_,
-                        this.folderShortcutsModel_);
+    this.navigationList_ = this.dialogDom_.querySelector('#volume-list');
+    NavigationList.decorate(this.navigationList_,
+                            this.directoryModel_,
+                            this.folderShortcutsModel_);
   };
 
   /**
@@ -1503,10 +1503,10 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
     if (this.directoryTree_)
       this.directoryTree_.relayout();
 
-    // TODO(mtomasz, yoshiki): Initialize volume list earlier, before
+    // TODO(mtomasz, yoshiki): Initialize navigation list earlier, before
     // file system is available.
-    if (this.volumeList_)
-      this.volumeList_.redraw();
+    if (this.navigationList_)
+      this.navigationList_.redraw();
 
     // Hide the search box if there is not enough space.
     this.searchBoxWrapper_.classList.toggle(

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

@@ -9,19 +9,19 @@ var CommandUtil = {};
 /**
  * Extracts path on which command event was dispatched.
  *
- * @param {DirectoryTree|DirectoryItem|VolumeList|HTMLLIElement|cr.ui.List}
+ * @param {DirectoryTree|DirectoryItem|NavigationList|HTMLLIElement|cr.ui.List}
  *     element Directory to extract a path from.
  * @return {?string} Path of the found node.
  */
 CommandUtil.getCommandPath = function(element) {
-  if (element instanceof VolumeList) {
-    // element is a VolumeList.
+  if (element instanceof NavigationList) {
+    // element is a NavigationList.
     return element.selectedItem;
-  } else if (element instanceof VolumeItem) {
-    // element is a subitem of VolumeList.
-    var volumeList = element.parentElement;
-    var index = volumeList.getIndexOfListItem(element);
-    return (index != -1) ? volumeList.dataModel.item(index) : null;
+  } else if (element instanceof NavigationListItem) {
+    // element is a subitem of NavigationList.
+    var navigationList = element.parentElement;
+    var index = navigationList.getIndexOfListItem(element);
+    return (index != -1) ? navigationList.dataModel.item(index) : null;
   } else if (element instanceof DirectoryTree) {
     // element is a DirectoryTree.
     var item = element.selectedItem;
@@ -44,11 +44,11 @@ CommandUtil.getCommandPath = function(element) {
 };
 
 /**
- * @param {VolumeList} volumeList Volume list to extract root node.
+ * @param {NavigationList} navigationList navigation list to extract root node.
  * @return {?RootType} Type of the found root.
  */
-CommandUtil.getCommandRootType = function(volumeList) {
-  var root = CommandUtil.getCommandPath(volumeList);
+CommandUtil.getCommandRootType = function(navigationList) {
+  var root = CommandUtil.getCommandPath(navigationList);
   return root && PathUtil.isRootPath(root) && PathUtil.getRootType(root);
 };
 
@@ -171,19 +171,19 @@ Commands.defaultCommand = {
 Commands.unmountCommand = {
   /**
    * @param {Event} event Command event.
-   * @param {VolumeList} volumeList Target volume list.
+   * @param {NavigationList} navigationList Target navigation list.
    */
-  execute: function(event, volumeList, fileManager) {
-    var root = CommandUtil.getCommandPath(volumeList);
+  execute: function(event, navigationList, fileManager) {
+    var root = CommandUtil.getCommandPath(navigationList);
     if (root)
       fileManager.unmountVolume(PathUtil.getRootPath(root));
   },
   /**
    * @param {Event} event Command event.
-   * @param {VolumeList} volumeList Target volume list.
+   * @param {NavigationList} navigationList Target navigation list.
    */
-  canExecute: function(event, volumeList) {
-    var rootType = CommandUtil.getCommandRootType(volumeList);
+  canExecute: function(event, navigationList) {
+    var rootType = CommandUtil.getCommandRootType(navigationList);
 
     event.canExecute = (rootType == RootType.ARCHIVE ||
                         rootType == RootType.REMOVABLE);
@@ -200,11 +200,11 @@ Commands.unmountCommand = {
 Commands.formatCommand = {
   /**
    * @param {Event} event Command event.
-   * @param {VolumeList} volumeList Target volume list.
+   * @param {NavigationList} navigationList Target navigation list.
    * @param {FileManager} fileManager The file manager instance.
    */
-  execute: function(event, volumeList, fileManager) {
-    var root = CommandUtil.getCommandPath(volumeList);
+  execute: function(event, navigationList, fileManager) {
+    var root = CommandUtil.getCommandPath(navigationList);
 
     if (root) {
       var url = util.makeFilesystemUrl(PathUtil.getRootPath(root));
@@ -215,12 +215,12 @@ Commands.formatCommand = {
   },
   /**
    * @param {Event} event Command event.
-   * @param {VolumeList} volumeList Target volume list.
+   * @param {NavigationList} navigationList Target navigation list.
    * @param {FileManager} fileManager The file manager instance.
    * @param {DirectoryModel} directoryModel The directory model instance.
    */
-  canExecute: function(event, volumeList, fileManager, directoryModel) {
-    var root = CommandUtil.getCommandPath(volumeList);
+  canExecute: function(event, navigationList, fileManager, directoryModel) {
+    var root = CommandUtil.getCommandPath(navigationList);
     var removable = root &&
                     PathUtil.getRootType(root) == RootType.REMOVABLE;
     var isReadOnly = root && directoryModel.isPathReadOnly(root);
@@ -235,10 +235,10 @@ Commands.formatCommand = {
 Commands.importCommand = {
   /**
    * @param {Event} event Command event.
-   * @param {VolumeList} volumeList Target volume list.
+   * @param {NavigationList} navigationList Target navigation list.
    */
-  execute: function(event, volumeList) {
-    var root = CommandUtil.getCommandPath(volumeList);
+  execute: function(event, navigationList) {
+    var root = CommandUtil.getCommandPath(navigationList);
     if (!root)
       return;
 
@@ -246,10 +246,10 @@ Commands.importCommand = {
   },
   /**
    * @param {Event} event Command event.
-   * @param {VolumeList} volumeList Target volume list.
+   * @param {NavigationList} navigationList Target navigation list.
    */
-  canExecute: function(event, volumeList) {
-    var rootType = CommandUtil.getCommandRootType(volumeList);
+  canExecute: function(event, navigationList) {
+    var rootType = CommandUtil.getCommandRootType(navigationList);
     event.canExecute = (rootType != RootType.DRIVE);
   }
 };
@@ -420,11 +420,11 @@ Commands.searchCommand = {
  * Activates the n-th volume.
  */
 Commands.volumeSwitchCommand = {
-  execute: function(event, volumeList, index) {
-    volumeList.selectByIndex(index - 1);
+  execute: function(event, navigationList, index) {
+    navigationList.selectByIndex(index - 1);
   },
-  canExecute: function(event, volumeList, index) {
-    event.canExecute = index > 0 && index <= volumeList.dataModel.length;
+  canExecute: function(event, navigationList, index) {
+    event.canExecute = index > 0 && index <= navigationList.dataModel.length;
   }
 };
 
@@ -579,7 +579,8 @@ Commands.createFolderShortcutCommand = {
     var target = event.target;
     // TODO(yoshiki): remove this after launching folder shortcuts feature.
     if (!fileManager.isFolderShortcutsEnabled() ||
-        !target instanceof VolumeItem && !target instanceof DirectoryItem) {
+        (!target instanceof NavigationListItem &&
+         !target instanceof DirectoryItem)) {
       event.command.setHidden(true);
       return;
     }
@@ -624,7 +625,8 @@ Commands.removeFolderShortcutCommand = {
     var target = event.target;
     // TODO(yoshiki): remove this after launching folder shortcut feature.
     if (!fileManager.isFolderShortcutsEnabled() ||
-        !target instanceof VolumeItem && !target instanceof DirectoryItem) {
+        (!target instanceof NavigationListItem &&
+         !target instanceof DirectoryItem)) {
       event.command.setHidden(true);
       return;
     }

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

@@ -99,9 +99,9 @@ FileTransferController.prototype = {
 
   /**
    * @this {FileTransferController}
-   * @param {VolumeList} tree Its sub items will could be drop target.
+   * @param {NavigationList} tree Its sub items will could be drop target.
    */
-  attachVolumesDropTarget: function(list) {
+  attachNavigationListDropTarget: function(list) {
     list.addEventListener('dragover',
         this.onDragOver_.bind(this, true /* onlyIntoDirectories */, list));
     list.addEventListener('dragenter',
@@ -409,7 +409,7 @@ FileTransferController.prototype = {
 
   /**
    * @this {FileTransferController}
-   * @param {VolumeList} list Drop target list.
+   * @param {NavigationList} list Drop target list.
    * @param {Event} event A dragenter event of DOM.
    */
   onDragEnterVolumesList_: function(list, event) {

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

@@ -247,6 +247,7 @@ FolderShortcutsDataModel.prototype = {
     // 1) 'change' event is not necessary to fire since it is covered by
     //    'permuted' event.
     // 2) 'splice' and 'sorted' events are not implemented. These events are
-    //    not used in VolumeListModel. We have to implement them when necessary.
+    //    not used in NavigationListModel. We have to implement them when
+    //    necessary.
   }
 };

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

@@ -92,11 +92,11 @@
 //<include src="file_type.js"/>
 //<include src="file_watcher.js"/>
 //<include src="folder_shortcuts_data_model.js"/>
+//<include src="navigation_list.js"/>
 //<include src="scrollbar.js"/>
 //<include src="share_client.js"/>
 //<include src="share_dialog.js"/>
 //<include src="tree.css.js"/>
-//<include src="volume_list.js"/>
 //<include src="volume_manager.js"/>
 //<include src="media/media_util.js"/>
 //<include src="metadata/metadata_cache.js"/>

chrome/browser/resources/file_manager/js/volume_list.js → chrome/browser/resources/file_manager/js/navigation_list.js

@@ -5,13 +5,13 @@
 'use strict';
 
 /**
- * A volume list model. This model combines the 2 lists.
+ * A navigation list model. This model combines the 2 lists.
  * @param {cr.ui.ArrayDataModel} volumesList The first list of the model.
  * @param {cr.ui.ArrayDataModel} pinnedList The second list of the model.
  * @constructor
  * @extends {cr.EventTarget}
  */
-function VolumeListModel(volumesList, pinnedList) {
+function NavigationListModel(volumesList, pinnedList) {
   this.volumesList_ = volumesList;
   this.pinnedList_ = pinnedList;
 
@@ -62,9 +62,9 @@ function VolumeListModel(volumesList, pinnedList) {
 }
 
 /**
- * VolumeList inherits cr.EventTarget.
+ * NavigationList inherits cr.EventTarget.
  */
-VolumeListModel.prototype = {
+NavigationListModel.prototype = {
   __proto__: cr.EventTarget.prototype,
   get length() { return this.length_(); }
 };
@@ -74,7 +74,7 @@ VolumeListModel.prototype = {
  * @param {number} index The index of the entry to get.
  * @return {?string} The path at the given index.
  */
-VolumeListModel.prototype.item = function(index) {
+NavigationListModel.prototype.item = function(index) {
   var offset = this.volumesList_.length;
   if (index < offset) {
     var entry = this.volumesList_.item(index);
@@ -85,10 +85,10 @@ VolumeListModel.prototype.item = function(index) {
 };
 
 /**
- * Type of the item on the volume list.
+ * Type of the item on the navigation list.
  * @enum {number}
  */
-VolumeListModel.ItemType = {
+NavigationListModel.ItemType = {
   ROOT: 1,
   PINNED: 2
 };
@@ -96,12 +96,12 @@ VolumeListModel.ItemType = {
 /**
  * Returns the type of the item at the given index.
  * @param {number} index The index of the entry to get.
- * @return {VolumeListModel.ItemType} The type of the item.
+ * @return {NavigationListModel.ItemType} The type of the item.
  */
-VolumeListModel.prototype.getItemType = function(index) {
+NavigationListModel.prototype.getItemType = function(index) {
   var offset = this.volumesList_.length;
   return index < offset ?
-      VolumeListModel.ItemType.ROOT : VolumeListModel.ItemType.PINNED;
+      NavigationListModel.ItemType.ROOT : NavigationListModel.ItemType.PINNED;
 };
 
 /**
@@ -109,7 +109,7 @@ VolumeListModel.prototype.getItemType = function(index) {
  * @return {number} The length of the model.
  * @private
  */
-VolumeListModel.prototype.length_ = function() {
+NavigationListModel.prototype.length_ = function() {
   return this.volumesList_.length + this.pinnedList_.length;
 };
 
@@ -120,7 +120,7 @@ VolumeListModel.prototype.length_ = function() {
  *     the {@code opt_fromIndex}.
  * @return {number} The index of the first found element or -1 if not found.
  */
-VolumeListModel.prototype.indexOf = function(item, opt_fromIndex) {
+NavigationListModel.prototype.indexOf = function(item, opt_fromIndex) {
   for (var i = opt_fromIndex || 0; i < this.length; i++) {
     if (item === this.item(i))
       return i;
@@ -129,20 +129,20 @@ VolumeListModel.prototype.indexOf = function(item, opt_fromIndex) {
 };
 
 /**
- * A volume item.
+ * A navigation list item.
  * @constructor
  * @extends {HTMLLIElement}
  */
-var VolumeItem = cr.ui.define('li');
+var NavigationListItem = cr.ui.define('li');
 
-VolumeItem.prototype = {
+NavigationListItem.prototype = {
   __proto__: HTMLLIElement.prototype,
 };
 
 /**
  * Decorate the item.
  */
-VolumeItem.prototype.decorate = function() {
+NavigationListItem.prototype.decorate = function() {
   // decorate() may be called twice: from the constructor and from
   // List.createItem(). This check prevents double-decorating.
   if (this.className)
@@ -167,9 +167,9 @@ VolumeItem.prototype.decorate = function() {
  * Associate a path with this item.
  * @param {string} path Path of this item.
  */
-VolumeItem.prototype.setPath = function(path) {
+NavigationListItem.prototype.setPath = function(path) {
   if (this.path_)
-    console.warn('VolumeItem.setPath should be called only once.');
+    console.warn('NavigationListItem.setPath should be called only once.');
 
   this.path_ = path;
 
@@ -205,10 +205,10 @@ VolumeItem.prototype.setPath = function(path) {
  * Associate a context menu with this item.
  * @param {cr.ui.Menu} menu Menu this item.
  */
-VolumeItem.prototype.maybeSetContextMenu = function(menu) {
+NavigationListItem.prototype.maybeSetContextMenu = function(menu) {
   if (!this.path_) {
-    console.error(
-        'VolumeItem.maybeSetContextMenu must be called after setPath().');
+    console.error('NavigationListItem.maybeSetContextMenu must be called ' +
+                  'after setPath().');
     return;
   }
 
@@ -223,17 +223,17 @@ VolumeItem.prototype.maybeSetContextMenu = function(menu) {
 };
 
 /**
- * A volume list.
+ * A navigation list.
  * @constructor
  * @extends {cr.ui.List}
  */
-function VolumeList() {
+function NavigationList() {
 }
 
 /**
- * VolumeList inherits cr.ui.List.
+ * NavigationList inherits cr.ui.List.
  */
-VolumeList.prototype.__proto__ = cr.ui.List.prototype;
+NavigationList.prototype.__proto__ = cr.ui.List.prototype;
 
 /**
  * @param {HTMLElement} el Element to be DirectoryItem.
@@ -241,8 +241,8 @@ VolumeList.prototype.__proto__ = cr.ui.List.prototype;
  * @param {cr.ui.ArrayDataModel} pinnedFolderModel Current model of the pinned
  *     folders.
  */
-VolumeList.decorate = function(el, directoryModel, pinnedFolderModel) {
-  el.__proto__ = VolumeList.prototype;
+NavigationList.decorate = function(el, directoryModel, pinnedFolderModel) {
+  el.__proto__ = NavigationList.prototype;
   el.decorate(directoryModel, pinnedFolderModel);
 };
 
@@ -251,9 +251,10 @@ VolumeList.decorate = function(el, directoryModel, pinnedFolderModel) {
  * @param {cr.ui.ArrayDataModel} pinnedFolderModel Current model of the pinned
  *     folders.
  */
-VolumeList.prototype.decorate = function(directoryModel, pinnedFolderModel) {
+NavigationList.prototype.decorate =
+    function(directoryModel, pinnedFolderModel) {
   cr.ui.List.decorate(this);
-  this.__proto__ = VolumeList.prototype;
+  this.__proto__ = NavigationList.prototype;
 
   this.directoryModel_ = directoryModel;
   this.volumeManager_ = VolumeManager.getInstance();
@@ -281,19 +282,19 @@ VolumeList.prototype.decorate = function(directoryModel, pinnedFolderModel) {
   this.pinnedItemList_ = pinnedFolderModel;
 
   this.dataModel =
-      new VolumeListModel(this.directoryModel_.getRootsList(),
-                          this.pinnedItemList_);
+      new NavigationListModel(this.directoryModel_.getRootsList(),
+                              this.pinnedItemList_);
 };
 
 /**
- * Creates an element of a volume. This method is called from cr.ui.List
- * internally.
+ * Creates an element of a navigation list. This method is called from
+ * cr.ui.List internally.
  * @param {string} path Path of the directory to be rendered.
- * @return {VolumeItem} Rendered element.
+ * @return {NavigationListItem} Rendered element.
  * @private
  */
-VolumeList.prototype.renderRoot_ = function(path) {
-  var item = new VolumeItem();
+NavigationList.prototype.renderRoot_ = function(path) {
+  var item = new NavigationListItem();
   item.setPath(path);
 
   var handleClick = function() {
@@ -330,7 +331,7 @@ VolumeList.prototype.renderRoot_ = function(path) {
  *
  * @param {cr.ui.Menu} menu Context menu.
  */
-VolumeList.prototype.setContextMenu = function(menu) {
+NavigationList.prototype.setContextMenu = function(menu) {
   this.contextMenu_ = menu;
 
   for (var i = 0; i < this.dataModel.length; i++) {
@@ -339,11 +340,11 @@ VolumeList.prototype.setContextMenu = function(menu) {
 };
 
 /**
- * Selects the n-th volume from the list.
- * @param {number} index Volume index.
+ * Selects the n-th item from the list.
+ * @param {number} index Item index.
  * @return {boolean} True for success, otherwise false.
  */
-VolumeList.prototype.selectByIndex = function(index) {
+NavigationList.prototype.selectByIndex = function(index) {
   if (index < 0 || index > this.dataModel.length - 1)
     return false;
 
@@ -364,7 +365,7 @@ VolumeList.prototype.selectByIndex = function(index) {
  * @param {Event} event The event.
  * @private
  */
-VolumeList.prototype.onBeforeSelectionChange_ = function(event) {
+NavigationList.prototype.onBeforeSelectionChange_ = function(event) {
   if (event.changes.length == 1 && !event.changes[0].selected)
     event.preventDefault();
 };
@@ -374,8 +375,8 @@ VolumeList.prototype.onBeforeSelectionChange_ = function(event) {
  * @param {Event} event The event.
  * @private
  */
-VolumeList.prototype.onSelectionChange_ = function(event) {
-  // This handler is invoked even when the volume list itself changes the
+NavigationList.prototype.onSelectionChange_ = function(event) {
+  // This handler is invoked even when the navigation list itself changes the
   // selection. In such case, we shouldn't handle the event.
   if (this.dontHandleSelectionEvent_)
     return;
@@ -388,12 +389,12 @@ VolumeList.prototype.onSelectionChange_ = function(event) {
  * @param {Event} event The event.
  * @private
  */
-VolumeList.prototype.onCurrentDirectoryChanged_ = function(event) {
+NavigationList.prototype.onCurrentDirectoryChanged_ = function(event) {
   var path = event.newDirEntry.fullPath || this.dataModel.getCurrentDirPath();
   var newRootPath = PathUtil.getRootPath(path);
 
-  // Synchronizes the volume list selection with the current directory, after
-  // it is changed outside of the volume list.
+  // Synchronizes the navigation list selection with the current directory,
+  // after it is changed outside of the navigation list.
 
   // (1) Select the nearest parent directory (including the pinned directories).
   var bestMatchIndex = -1;

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

@@ -410,7 +410,7 @@ test.util.async.selectVolume = function(contentWindow, iconName, callback) {
     },
     sendEvents: function() {
       // To change the selected volume, we have to send both events 'mousedown'
-      // and 'click' to the volume list.
+      // and 'click' to the navigation list.
       callback(test.util.sync.fakeMouseDown(contentWindow, query) &&
                test.util.sync.fakeMouseClick(contentWindow, query));
     }

chrome/browser/resources/file_manager/main.html

@@ -105,12 +105,12 @@
       <script src="js/file_type.js"></script>
       <script src="js/file_watcher.js"></script>
       <script src="js/folder_shortcuts_data_model.js"></script>
+      <script src="js/navigation_list.js"></script>
       <script src="js/scrollbar.js"></script>
       <script src="js/share_client.js"></script>
       <script src="js/share_dialog.js"></script>
       <script src="js/tree.css.js"></script>
       <script src="js/volume_manager.js"></script>
-      <script src="js/volume_list.js"></script>
       <script src="js/media/media_util.js"></script>
       <script src="js/metadata/metadata_cache.js"></script>
       <script src="js/default_action_dialog.js"></script>