MD Bookmarks: Scroll and select items that are added to the main list

chrome/browser/resources/md_bookmarks/api_listener.js

 // Copyright 2017 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.
 
 /**
  * @fileoverview Listener functions which translate events from the
  * chrome.bookmarks API into actions to modify the local page state.
  */
 
 cr.define('bookmarks.ApiListener', function() {
 
   /** @type {?number} */
   var timerHandle;
+  /** @type {boolean} */
+  var trackUpdates = false;
+  /** @type {!Array<string>} */
+  var updatedItems = [];
+  /** @type {boolean} */
+  var shouldHighlightAfterBatch = false;

[calamity, 2017/07/20 05:49:03]

As discussed, it would be nice to have a resettable, single-task, promise-based
debouncer here instead. Then we can have

  function batchUIUpdates() {
    if (debouncer.done()) {
      debouncer = new Debouncer(bookmarks.Store.getInstance().endBatchUpdate);
      bookmarks.Store.getInstance().beginBatchUpdate();
    }

    debouncer.debounce();
  }

  function highlightUpdatedItems() {
    debouncer.promise.then(highlightUpdatedItemsImpl);
  }

[tsergeant, 2017/07/25 00:13:00]

Done.

 
   /**
    * Batches UI updates so that no changes will be made to UI until the next
    * task after the last call to this method. This is useful for listeners which
    * can be called in a tight loop by UI actions.
    */
   function batchUIUpdates() {
     if (timerHandle)
       clearTimeout(timerHandle);
     else
       bookmarks.Store.getInstance().beginBatchUpdate();
 
     timerHandle = setTimeout(function() {
       bookmarks.Store.getInstance().endBatchUpdate();
       timerHandle = null;
+
+      if (shouldHighlightAfterBatch)
+        highlightUpdatedItemsImpl();
     });
   }
 
+  /**
+   * Tracks any items that are created or moved.
+   */
+  function trackUpdatedItems() {
+    trackUpdates = true;
+  }
+
+  function highlightUpdatedItemsImpl() {
+    if (!trackUpdates)
+      return;
+
+    document.dispatchEvent(new CustomEvent('highlight-items', {
+      detail: updatedItems,
+    }));
+    updatedItems = [];
+    trackUpdates = false;
+    shouldHighlightAfterBatch = false;
+  }
+
+  /**
+   * Highlights any items that have been updated since |trackUpdatedItems| was
+   * called. Should be called after a user action causes new items to appear in
+   * the main list.
+   */
+  function highlightUpdatedItems() {
+    // Ensure that the items are highlighted after the current batch update (if
+    // there is one) is completed.
+    if (timerHandle)
+      shouldHighlightAfterBatch = true;
+    else
+      highlightUpdatedItemsImpl();
+  }
+
   /** @param {Action} action */
   function dispatch(action) {
     bookmarks.Store.getInstance().dispatch(action);
   }
 
   /**
    * @param {string} id
    * @param {{title: string, url: (string|undefined)}} changeInfo
    */
   function onBookmarkChanged(id, changeInfo) {
     dispatch(bookmarks.actions.editBookmark(id, changeInfo));
   }
 
   /**
    * @param {string} id
    * @param {BookmarkTreeNode} treeNode
    */
   function onBookmarkCreated(id, treeNode) {
     batchUIUpdates();
+    if (trackUpdatedItems)
+      updatedItems.push(id);
     dispatch(bookmarks.actions.createBookmark(id, treeNode));
   }
 
   /**
    * @param {string} id
    * @param {{parentId: string, index: number}} removeInfo
    */
   function onBookmarkRemoved(id, removeInfo) {
     batchUIUpdates();
     var nodes = bookmarks.Store.getInstance().data.nodes;
     dispatch(bookmarks.actions.removeBookmark(
         id, removeInfo.parentId, removeInfo.index, nodes));
   }
 
   /**
    * @param {string} id
    * @param {{
    *    parentId: string,
    *    index: number,
    *    oldParentId: string,
    *    oldIndex: number
    * }} moveInfo
    */
   function onBookmarkMoved(id, moveInfo) {
     batchUIUpdates();
+    if (trackUpdatedItems)
+      updatedItems.push(id);
     dispatch(bookmarks.actions.moveBookmark(
         id, moveInfo.parentId, moveInfo.index, moveInfo.oldParentId,
         moveInfo.oldIndex));
   }
 
   /**
    * @param {string} id
    * @param {{childIds: !Array<string>}} reorderInfo
    */
   function onChildrenReordered(id, reorderInfo) {
@@ skipping 23 matching lines @@
     dispatch(bookmarks.actions.setIncognitoAvailability(availability));
   }
 
   /**
    * @param {boolean} canEdit
    */
   function onCanEditBookmarksChanged(canEdit) {
     dispatch(bookmarks.actions.setCanEditBookmarks(canEdit));
   }
 
+  var listeners = [
+    {api: chrome.bookmarks.onChanged, fn: onBookmarkChanged},
+    {api: chrome.bookmarks.onChildrenReordered, fn: onChildrenReordered},
+    {api: chrome.bookmarks.onCreated, fn: onBookmarkCreated},
+    {api: chrome.bookmarks.onMoved, fn: onBookmarkMoved},
+    {api: chrome.bookmarks.onRemoved, fn: onBookmarkRemoved},
+    {api: chrome.bookmarks.onImportBegan, fn: onImportBegan},
+    {api: chrome.bookmarks.onImportEnded, fn: onImportEnded},
+  ];
+
   function init() {
-    chrome.bookmarks.onChanged.addListener(onBookmarkChanged);
-    chrome.bookmarks.onChildrenReordered.addListener(onChildrenReordered);
-    chrome.bookmarks.onCreated.addListener(onBookmarkCreated);
-    chrome.bookmarks.onMoved.addListener(onBookmarkMoved);
-    chrome.bookmarks.onRemoved.addListener(onBookmarkRemoved);
-    chrome.bookmarks.onImportBegan.addListener(onImportBegan);
-    chrome.bookmarks.onImportEnded.addListener(onImportEnded);
+    listeners.forEach((listener) => listener.api.addListener(listener.fn));
 
     cr.sendWithPromise('getIncognitoAvailability')
         .then(onIncognitoAvailabilityChanged);
     cr.addWebUIListener(
         'incognito-availability-changed', onIncognitoAvailabilityChanged);
 
     cr.sendWithPromise('getCanEditBookmarks').then(onCanEditBookmarksChanged);
     cr.addWebUIListener(
         'can-edit-bookmarks-changed', onCanEditBookmarksChanged);
   }
 
+  function destroy() {
+    listeners.forEach((listener) => listener.api.removeListener(listener.fn));
+    cr.removeWebUIListener(
+        'incognito-availability-changed', onIncognitoAvailabilityChanged);
+    cr.removeWebUIListener(
+        'can-edit-bookmarks-changed', onCanEditBookmarksChanged);
+  }
+
   return {
     init: init,
+    destroy: destroy,
+    trackUpdatedItems: trackUpdatedItems,
+    highlightUpdatedItems: highlightUpdatedItems,
   };
 });