Retry r88137:

chrome/browser/resources/ntp4/most_visited_page.js

Index: chrome/browser/resources/ntp4/most_visited_page.js
diff --git a/chrome/browser/resources/ntp4/most_visited_page.js b/chrome/browser/resources/ntp4/most_visited_page.js
index 06c8329ad360c8f50b7ac426907aef9a911f7fda..a684d772aa94603a8d76a7b6388bfae1ce95103d 100644
--- a/chrome/browser/resources/ntp4/most_visited_page.js
+++ b/chrome/browser/resources/ntp4/most_visited_page.js
@@ -8,6 +8,10 @@ cr.define('ntp4', function() {
   var TilePage = ntp4.TilePage;
 
   /**
+   */
+  var tileID = 0;
+
+  /**
    * Creates a new Most Visited object for tiling.
    * @constructor
    * @extends {HTMLAnchorElement}
@@ -63,6 +67,7 @@ cr.define('ntp4', function() {
 
       this.tabIndex = -1;
       this.data_ = null;
+      this.removeAttribute('id');
     },
 
     /**
@@ -76,6 +81,8 @@ cr.define('ntp4', function() {
         return;
       }
 
+      var id = tileID++;
+      this.setAttribute('id', 'tile' + id);
       this.data_ = data;
       this.tabIndex = 0;
       this.classList.remove('filler');
@@ -84,7 +91,10 @@ cr.define('ntp4', function() {
       var faviconUrl = data.faviconUrl || 'chrome://favicon/' + data.url;
       colorBar.style.backgroundImage = url(faviconUrl);
       colorBar.dir = data.direction;
-      // TODO(estade): add a band of color based on the favicon.
+      if (data.faviconDominantColor)
+        this.setBarColor(data.faviconDominantColor);
+      else
+        chrome.send('getFaviconDominantColor', [faviconUrl, id]);
 
       var title = this.querySelector('.title');
       title.textContent = data.title;
@@ -100,6 +110,14 @@ cr.define('ntp4', function() {
     },
 
     /**
+     * Sets the color of the favicon dominant color bar.
+     * @param {string} color The css-parsable value for the color.
+     */
+    setBarColor: function(color) {
+      // TODO(estade): use color.
+    },
+
+    /**
      * Handles a click on the tile.
      * @param {Event} e The click event.
      */
@@ -390,8 +408,15 @@ cr.define('ntp4', function() {
     return oldData;
   };
 
+  function setFaviconDominantColor(id, color) {
+    var tile = $('tile' + id);
+    if (tile)
+      tile.setBarColor(color);
+  };
+
   return {
     MostVisitedPage: MostVisitedPage,
     refreshData: refreshData,
+    setFaviconDominantColor: setFaviconDominantColor,
   };
 });