Fast NTP support for themes, dark themes, favicons.

chrome/browser/resources/local_ntp/most_visited_single.js

 /* Copyright 2015 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. */
 
  // Single iframe for NTP tiles.
 (function() {
 'use strict';
 
 
 /**
@@ skipping 99 matching lines @@
  * functions.
  **/
 var handlePostMessage = function(event) {
   var cmd = event.data.cmd;
 
   if (cmd == 'tile') {
     addTile(event.data);
   } else if (cmd == 'show') {
     showTiles();
     countLoad();
+  } else if (cmd == 'updateTheme') {
+    updateTheme(event.data);
   } else {
     console.error('Unknown command: ' + event.data);
   }
 };
 
 
+var updateTheme = function(info) {
+  console.log(info);

[huangs, 2015/03/19 19:13:13]

console.log()

[fserb, 2015/03/19 20:02:52]

Done.

+  var themeStyle = [];
+
+  if (info.tileBorderColor) {
+    themeStyle.push('.mv-tile {' +
+        'border: 1px solid ' + info.tileBorderColor + '; }');
+  }
+  if (info.tileHoverBorderColor) {
+    themeStyle.push('.mv-tile:hover {' +
+        'border-color: ' + info.tileHoverBorderColor + '; }');
+  }
+  if (info.isThemeDark) {
+    themeStyle.push('.mv-tile, .mv-empty-tile { background: rgb(51,51,51); }');
+    themeStyle.push('.mv-thumb.failed-img { background-color: #555; }');
+    themeStyle.push('.mv-thumb.failed-img::after { border-color: #333; }');
+    themeStyle.push('.mv-x { ' +
+        'background: linear-gradient(to left, ' +
+        'rgb(51,51,51) 60%, transparent); }');
+    themeStyle.push('html[dir=rtl] .mv-x { ' +
+        'background: linear-gradient(to right, ' +
+        'rgb(51,51,51) 60%, transparent); }');
+    themeStyle.push('.mv-x::after { ' +
+        'background-color: rgba(255,255,255,0.7); }');
+    themeStyle.push('.mv-x:hover::after { background-color: #FFF; }');

[huangs, 2015/03/19 19:13:13]

NIT: #fff

[fserb, 2015/03/19 20:02:52]

Done.

+    themeStyle.push('.mv-x:active::after { ' +
+        'background-color: rgba(255,255,255,0.5); }');

[huangs, 2015/03/19 19:13:13]

A bit odd that in the CSS file we have
  background-color: rgb(66,133,244);
i.e., opacity 1.

[fserb, 2015/03/19 20:02:52]

that's for the non-dark theme

+  }
+  if (info.tileTitleColor) {
+    themeStyle.push('body { color: ' + info.tileTitleColor + '; }');
+  }
+
+  document.querySelector('#custom-theme').textContent = themeStyle.join('\n');
+};
+
+
 /**
  * Called when the host page has finished sending us tile information and
  * we are ready to show the new tiles and drop the old ones.
  */
 var showTiles = function() {
   // Store the tiles on the current closure.
   var cur = tiles;
 
   // Create empty tiles until we have NUMBER_OF_TILES.
   while (cur.childNodes.length < NUMBER_OF_TILES) {
@@ skipping 29 matching lines @@
 
 /**
  * Called when the host page wants to add a suggestion tile.
  * For Most Visited, it grabs the data from Chrome and pass on.
  * For host page generated it just passes the data.
  * @param {object} args Data for the tile to be rendered.
  */
 var addTile = function(args) {
   if (args.rid) {
     var data = chrome.embeddedSearch.searchBox.getMostVisitedItemData(args.rid);
+    data.faviconUrl = 'chrome-search://favicon/size/16@' +
+        window.devicePixelRatio + 'x/' + data.renderViewId + '/' + data.rid;
     tiles.appendChild(renderTile(data));
     logEvent(LOG_TYPE.NTP_CLIENT_SIDE_SUGGESTION);
   } else {
     tiles.appendChild(renderTile(null));
   }
 };
 
 
 /**
  * Called when the user decided to add a tile to the blacklist.
@@ skipping 122 matching lines @@
     var html = document.querySelector('html');
     html.dir = 'rtl';
   }
 
   window.addEventListener('message', handlePostMessage);
 };
 
 
 window.addEventListener('DOMContentLoaded', init);
 })();