Fast NTP support for themes, dark themes, favicons.

chrome/browser/resources/local_ntp/most_visited_single.js

Index: chrome/browser/resources/local_ntp/most_visited_single.js
diff --git a/chrome/browser/resources/local_ntp/most_visited_single.js b/chrome/browser/resources/local_ntp/most_visited_single.js
index a1f6108ad560a612143a9e7a94f2f47e0e2f1389..ee4da6e200701c87c437507059956809b8513dcd 100644
--- a/chrome/browser/resources/local_ntp/most_visited_single.js
+++ b/chrome/browser/resources/local_ntp/most_visited_single.js
@@ -117,12 +117,50 @@ var handlePostMessage = function(event) {
   } 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.
@@ -172,6 +210,8 @@ var showTiles = function() {
 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 {