Refactoring the NTP.

chrome/browser/resources/ntp_search/most_visited_page.js

Index: chrome/browser/resources/ntp_search/most_visited_page.js
diff --git a/chrome/browser/resources/ntp_search/most_visited_page.js b/chrome/browser/resources/ntp_search/most_visited_page.js
new file mode 100644
index 0000000000000000000000000000000000000000..c8da10d388099921eb3268d8d72acd9635c0bade
--- /dev/null
+++ b/chrome/browser/resources/ntp_search/most_visited_page.js
@@ -0,0 +1,154 @@
+// 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.
+
+cr.define('ntp', function() {
+  'use strict';
+
+  var Thumbnail = ntp.Thumbnail;
+  var ThumbnailPage = ntp.ThumbnailPage;
+
+  /**
+   * Creates a new Most Visited object for tiling.
+   * @constructor
+   * @extends {HTMLAnchorElement}
+   */
+  function MostVisited() {

[jeremycho_google, 2012/07/31 03:09:16]

Pass in gridValues?

[jeremycho_google, 2012/07/31 03:09:16]

This doesn't seem to get called.

[pedrosimonetti2, 2012/08/03 18:14:01]

Done. See comments on the new CL.

[pedrosimonetti2, 2012/08/03 18:14:01]

Done.

+    var el = cr.doc.createElement('a');
+    el.__proto__ = MostVisited.prototype;
+    el.initialize();
+
+    return el;
+  }
+
+  MostVisited.prototype = {
+    __proto__: Thumbnail.prototype,
+  };
+
+  var THUMBNAIL_COUNT = 8;
+
+  /**
+   * Creates a new MostVisitedPage object.
+   * @constructor
+   * @extends {TilePage}
+   */
+  function MostVisitedPage() {
+    var el = new ThumbnailPage();
+    el.__proto__ = MostVisitedPage.prototype;
+    el.initialize();
+
+    return el;
+  }
+
+  MostVisitedPage.prototype = {
+    __proto__: ThumbnailPage.prototype,
+
+    set data(data) {

[jeremycho_google, 2012/07/31 03:09:16]

Is it possible to avoid duplicating this from Thumbnail Page?

[pedrosimonetti2, 2012/08/03 18:14:01]

I replaced the code from ThumbnailPage.prototype.set data() with an error
message because that's a virtual setter.

On 2012/07/31 03:09:16, jeremycho wrote:

+      var startTime = Date.now();
+
+      // The first time data is set, create the tiles.
+      if (!this.data_) {
+        this.createTiles_();
+        this.data_ = data.slice(0, THUMBNAIL_COUNT);
+      } else {
+        this.data_ = refreshData(this.data_, data);
+      }
+
+      this.updateTiles_();
+      logEvent('mostVisited.layout: ' + (Date.now() - startTime));
+    },
+  };
+
+  /**
+   * Executed once the NTP has loaded. Checks if the Most Visited pane is
+   * shown or not. If it is shown, the 'mostVisitedSelected' message is sent
+   * to the C++ code, to record the fact that the user has seen this pane.
+   */
+  MostVisitedPage.onLoaded = function() {
+    if (ntp.getCardSlider() &&
+        ntp.getCardSlider().currentCardValue &&
+        ntp.getCardSlider().currentCardValue.classList
+        .contains('most-visited-page')) {
+      chrome.send('mostVisitedSelected');
+    }
+  }
+
+  /**
+   * We've gotten additional Most Visited data. Update our old data with the
+   * new data. The ordering of the new data is not important, except when a
+   * page is pinned. Thus we try to minimize re-ordering.
+   * @param {Array} oldData The current Most Visited page list.
+   * @param {Array} newData The new Most Visited page list.
+   * @return {Array} The merged page list that should replace the current page
+   *     list.
+   */
+  function refreshData(oldData, newData) {
+    oldData = oldData.slice(0, THUMBNAIL_COUNT);
+    newData = newData.slice(0, THUMBNAIL_COUNT);
+
+    // Copy over pinned sites directly.
+    for (var j = 0; j < newData.length; j++) {
+      if (newData[j].pinned) {
+        oldData[j] = newData[j];
+        // Mark the entry as 'updated' so we don't try to update again.
+        oldData[j].updated = true;
+        // Mark the newData page as 'used' so we don't try to re-use it.
+        newData[j].used = true;
+      }
+    }
+
+    // Look through old pages; if they exist in the newData list, keep them
+    // where they are.
+    for (var i = 0; i < oldData.length; i++) {
+      if (!oldData[i] || oldData[i].updated)
+        continue;
+
+      for (var j = 0; j < newData.length; j++) {
+        if (newData[j].used)
+          continue;
+
+        if (newData[j].url == oldData[i].url) {
+          // The background image and other data may have changed.
+          oldData[i] = newData[j];
+          oldData[i].updated = true;
+          newData[j].used = true;
+          break;
+        }
+      }
+    }
+
+    // Look through old pages that haven't been updated yet; replace them.
+    for (var i = 0; i < oldData.length; i++) {
+      if (oldData[i] && oldData[i].updated)
+        continue;
+
+      for (var j = 0; j < newData.length; j++) {
+        if (newData[j].used)
+          continue;
+
+        oldData[i] = newData[j];
+        oldData[i].updated = true;
+        newData[j].used = true;
+        break;
+      }
+
+      if (oldData[i] && !oldData[i].updated)
+        oldData[i] = null;
+    }
+
+    // Clear 'updated' flags so this function will work next time it's called.
+    for (var i = 0; i < THUMBNAIL_COUNT; i++) {
+      if (oldData[i])
+        oldData[i].updated = false;
+    }
+
+    return oldData;
+  };
+
+  return {
+    MostVisitedPage: MostVisitedPage,
+    refreshData: refreshData,
+  };
+});
+
+document.addEventListener('ntpLoaded', ntp.MostVisitedPage.onLoaded);