Re-factor navigateTo() in bookmark_manager/js/main.js

chrome/browser/resources/bookmark_manager/js/main.js

 // Copyright (c) 2012 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.
 
 /** @const */ var BookmarkList = bmm.BookmarkList;
 /** @const */ var BookmarkTree = bmm.BookmarkTree;
 /** @const */ var Command = cr.ui.Command;
 /** @const */ var CommandBinding = cr.ui.CommandBinding;
 /** @const */ var LinkKind = cr.LinkKind;
 /** @const */ var ListItem = cr.ui.ListItem;
@@ skipping 82 matching lines @@
 
 var recentTreeItem = new TreeItem({
   icon: 'images/bookmark_manager_recent.png',
   bookmarkId: 'recent'
 });
 bmm.treeLookup[recentTreeItem.bookmarkId] = recentTreeItem;
 
 BookmarkTree.decorate(tree);
 
 tree.addEventListener('change', function() {
-  navigateTo(tree.selectedItem.bookmarkId);
+  navigateTo(tree.selectedItem.bookmarkId, updateHash);
 });
 
 /**
  * Adds an event listener to a node that will remove itself after firing once.
  * @param {!Element} node The DOM node to add the listener to.
  * @param {string} name The name of the event listener to add to.
  * @param {function(Event)} handler Function called when the event fires.
  */
 function addOneShotEventListener(node, name, handler) {
   var f = function(e) {
     handler(e);
     node.removeEventListener(name, f);
   };
   node.addEventListener(name, f);
 }
 
 /**
  * Updates the location hash to reflect the current state of the application.
  */
 function updateHash() {
   window.location.hash = tree.selectedItem.bookmarkId;
 }
 
 /**
  * Navigates to a bookmark ID.
  * @param {string} id The ID to navigate to.
- * @param {boolean=} opt_updateHashNow Whether to immediately update the
- *     location.hash. If false, then it is updated in a timeout.
+ * @param {function()} callback Function called when list view loaded or
+ *     displayed specified folder.
  */
-function navigateTo(id, opt_updateHashNow) {
-  // console.info('navigateTo', 'from', window.location.hash, 'to', id);
-  // Update the location hash using a timer to prevent reentrancy. This is how
-  // often we add history entries and the time here is a bit arbitrary but was
-  // picked as the smallest time a human perceives as instant.
+function navigateTo(id, callback) {
+  if (list.parentId == id) {
+    callback();
+    return;
+  }
 
-  clearTimeout(navigateTo.timer_);
-  if (opt_updateHashNow)
-    updateHash();
-  else
-    navigateTo.timer_ = setTimeout(updateHash, 250);
-
+  addOneShotEventListener(list, 'load', callback);
   updateParentId(id);
 }
 
 /**
  * Updates the parent ID of the bookmark list and selects the correct tree item.
  * @param {string} id The id.
  */
 function updateParentId(id) {
+  // Setting list.parentId fires 'load' event.
   list.parentId = id;
-  if (id in bmm.treeLookup)
-    tree.selectedItem = bmm.treeLookup[id];
+
+  // When tree.selectedItem changed, tree view calls navigatTo() then it
+  // calls updateHash() when list view displayed specified folder.
+  tree.selectedItem = bmm.treeLookup[id] || tree.selectedItem;
 }
 
 // Process the location hash. This is called by onhashchange and when the page
 // is first loaded.
 function processHash() {
   var id = window.location.hash.slice(1);
   if (!id) {
     // If we do not have a hash, select first item in the tree.
     id = tree.items[0].bookmarkId;
   }
@@ skipping 12 matching lines @@
       // After the list reloads, edit the desired bookmark.
       var editBookmark = function(e) {
         var index = list.dataModel.findIndexById(bookmarkNode.id);
         if (index != -1) {
           var sm = list.selectionModel;
           sm.anchorIndex = sm.leadIndex = sm.selectedIndex = index;
           scrollIntoViewAndMakeEditable(index);
         }
       };
 
-      if (list.parentId == bookmarkNode.parentId) {
-        // Clear the e= from the hash so that future attemps to edit the same
-        // entry will show up as a hash change.
-        updateHash();
-        editBookmark();
-      } else {
-        // Navigate to the parent folder (which will update the hash). Once
-        // it's loaded, edit the bookmark.
-        addOneShotEventListener(list, 'load', editBookmark);
-        updateParentId(bookmarkNode.parentId);
-      }
+      navigateTo(bookmarkNode.parentId, editBookmark);
     });
 
     // We handle the two cases of navigating to the bookmark to be edited
     // above. Don't run the standard navigation code below.
     return;
   } else if (/^q=/.test(id)) {
     // In case we got a search hash, update the text input and the
     // bmm.treeLookup to use the new id.
     setSearch(id.slice(2));
     valid = true;
@@ skipping 55 matching lines @@
   if (searchText) {
     tree.add(searchTreeItem);
     tree.selectedItem = searchTreeItem;
   } else {
     // Go "home".
     tree.selectedItem = tree.items[0];
     id = tree.selectedItem.bookmarkId;
   }
 
   // Navigate now and update hash immediately.
-  navigateTo(id, true);
+  navigateTo(id, updateHash);
 }
 
 // Handle the logo button UI.
 // When the user clicks the button we should navigate "home" and focus the list.
 document.querySelector('button.logo').onclick = function(e) {
   setSearch('');
   $('list').focus();
 };
 
 /**
@@ skipping 1009 matching lines @@
     dataModel.splice(index, 1);
   }
 });
 
 /**
  * Navigates to the folder that the selected item is in and selects it. This is
  * used for the show-in-folder command.
  */
 function showInFolder() {
   var bookmarkNode = list.selectedItem;
+  if (!bookmarkNode)
+    return;
   var parentId = bookmarkNode.parentId;
 
   // After the list is loaded we should select the revealed item.
-  function f(e) {
-    var index;
-    if (bookmarkNode &&
-        (index = list.dataModel.findIndexById(bookmarkNode.id)) != -1) {
-      var sm = list.selectionModel;
-      sm.anchorIndex = sm.leadIndex = sm.selectedIndex = index;
-      list.scrollIndexIntoView(index);
-    }
-    list.removeEventListener('load', f);
+  function selectItem() {
+    var index = list.dataModel.findIndexById(bookmarkNode.id);
+    if (index == -1)
+      return;
+    var sm = list.selectionModel;
+    sm.anchorIndex = sm.leadIndex = sm.selectedIndex = index;
+    list.scrollIndexIntoView(index);
   }
-  list.addEventListener('load', f);
+
   var treeItem = bmm.treeLookup[parentId];
   treeItem.reveal();
 
-  navigateTo(parentId);
+  navigateTo(parentId, selectItem);
 }
 
 var linkController;
 
 /**
  * @return {!cr.LinkController} The link controller used to open links based on
  *     user clicks and keyboard actions.
  */
 function getLinkController() {
   return linkController ||
@@ skipping 70 matching lines @@
   });
 }
 
 /**
  * Opens an item in the list.
  */
 function openItem() {
   var bookmarkNodes = getSelectedBookmarkNodes();
   // If we double clicked or pressed enter on a single folder, navigate to it.
   if (bookmarkNodes.length == 1 && bmm.isFolder(bookmarkNodes[0])) {
-    navigateTo(bookmarkNodes[0].id);
+    navigateTo(bookmarkNodes[0].id, updateHash);
   } else {
     openBookmarks(LinkKind.FOREGROUND_TAB);
   }
 }
 
 /**
  * Deletes the selected bookmarks. The bookmarks are saved in memory in case
  * the user needs to undo the deletion.
  */
 function deleteBookmarks() {
@@ skipping 87 matching lines @@
   // Callback is called after tree and list data model updated.
   function createFolder(callback) {
     chrome.bookmarks.create({
       title: loadTimeData.getString('new_folder_name'),
       parentId: parentId
     }, callback);
   }
 
   if (document.activeElement == tree) {
     createFolder(function(newNode) {
-      newItem = bmm.treeLookup[newNode.id];
-      tree.selectedItem = newItem;
-      newItem.editing = true;
+      navigateTo(newNode.id, function() {
+        bmm.treeLookup[newNode.id].editing = true;
+      });
     });
     return;
   }
 
   function editNewFolderInList() {
     createFolder(function() {
       var index = list.dataModel.length - 1;
       var sm = list.selectionModel;
       sm.anchorIndex = sm.leadIndex = sm.selectedIndex = index;
       scrollIntoViewAndMakeEditable(index);
     });
   }
 
-  if (parentId == list.parentId) {
-    editNewFolderInList();
-    return;
-  }
-
-  addOneShotEventListener(list, 'load', editNewFolderInList);
-  navigateTo(parentId, true);
+  navigateTo(parentId, editNewFolderInList);
 }
 
 /**
  * Scrolls the list item into view and makes it editable.
  * @param {number} index The index of the item to make editable.
  */
 function scrollIntoViewAndMakeEditable(index) {
   list.scrollIndexIntoView(index);
   // onscroll is now dispatched asynchronously so we have to postpone
   // the rest.
@@ skipping 19 matching lines @@
       id: 'new'
     };
     var dataModel = list.dataModel;
     var length = dataModel.length;
     dataModel.splice(length, 0, fakeNode);
     var sm = list.selectionModel;
     sm.anchorIndex = sm.leadIndex = sm.selectedIndex = length;
     scrollIntoViewAndMakeEditable(length);
   };
 
-  if (parentId == list.parentId) {
-    editNewBookmark();
-    return;
-  }
-
-  addOneShotEventListener(list, 'load', editNewBookmark);
-  navigateTo(parentId, true);
+  navigateTo(parentId, editNewBookmark);
 }
 
 /**
  * This function is used to select items after a user action such as paste, drop
  * add page etc.
  * @param {BookmarkList|BookmarkTree} target The target of the user action.
  * @param {=string} opt_selectedTreeId If provided, then select that tree id.
  */
 function selectItemsAfterUserAction(target, opt_selectedTreeId) {
   // We get one onCreated event per item so we delay the handling until we get
@@ skipping 146 matching lines @@
   document.addEventListener('copy', handle('copy-command'));
   document.addEventListener('cut', handle('cut-command'));
 
   var pasteHandler = handle('paste-command');
   document.addEventListener('paste', function(e) {
     // Paste is a bit special since we need to do an async call to see if we can
     // paste because the paste command might not be up to date.
     updatePasteCommand(pasteHandler);
   });
 })();