Retry r88137:

chrome/browser/resources/ntp4/most_visited_page.js

 // Copyright (c) 2011 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('ntp4', function() {
   'use strict';
 
   var TilePage = ntp4.TilePage;
 
   /**
+   */
+  var tileID = 0;
+
+  /**
    * Creates a new Most Visited object for tiling.
    * @constructor
    * @extends {HTMLAnchorElement}
    */
   function MostVisited() {
     var el = cr.doc.createElement('a');
     el.__proto__ = MostVisited.prototype;
     el.initialize();
 
     return el;
@@ skipping 35 matching lines @@
                 // thumbnail-shield provides a gradient fade effect.
                 '<div class="thumbnail-shield fills-parent"></div>' +
               '</span>' +
               '<span class="color-bar"></span>' +
             '</span>' +
             '<span class="title"></span>' +
           '</div>';
 
       this.tabIndex = -1;
       this.data_ = null;
+      this.removeAttribute('id');
     },
 
     /**
      * Update the appearance of this tile according to |data|.
      * @param {Object} data A dictionary of relevant data for the page.
      */
     updateForData: function(data) {
       if (!data || data.filler) {
         if (this.data_)
           this.reset();
         return;
       }
 
+      var id = tileID++;
+      this.setAttribute('id', 'tile' + id);
       this.data_ = data;
       this.tabIndex = 0;
       this.classList.remove('filler');
 
       var colorBar = this.querySelector('.color-bar');
       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;
       title.dir = data.direction;
 
       var thumbnailUrl = data.thumbnailUrl || 'chrome://thumb/' + data.url;
       this.querySelector('.thumbnail').style.backgroundImage =
           url(thumbnailUrl);
 
       this.href = data.url;
 
       this.updatePinnedState_();
     },
 
     /**
+     * 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.
      */
     handleClick_: function(e) {
       var target = e.target;
 
       // Don't navigate on edit bar clicks.
       if (this.querySelector('.edit-bar').contains(target))
         e.preventDefault();
 
@@ skipping 270 matching lines @@
 
     // 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;
   };
 
+  function setFaviconDominantColor(id, color) {
+    var tile = $('tile' + id);
+    if (tile)
+      tile.setBarColor(color);
+  };
+
   return {
     MostVisitedPage: MostVisitedPage,
     refreshData: refreshData,
+    setFaviconDominantColor: setFaviconDominantColor,
   };
 });