Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(335)

Side by Side Diff: chrome/browser/resources/local_ntp/local_ntp_fast.js

Issue 1011393004: Fast NTP support for themes, dark themes, favicons. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 // Copyright 2015 The Chromium Authors. All rights reserved. 1 // Copyright 2015 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 5
6 /** 6 /**
7 * @fileoverview The local InstantExtended NTP. 7 * @fileoverview The local InstantExtended NTP.
8 */ 8 */
9 9
10 10
(...skipping 169 matching lines...) Expand 10 before | Expand all | Expand 10 after
180 * @type {number} 180 * @type {number}
181 * @const 181 * @const
182 */ 182 */
183 var MIN_TOTAL_HORIZONTAL_PADDING = 200; 183 var MIN_TOTAL_HORIZONTAL_PADDING = 200;
184 184
185 185
186 /** 186 /**
187 * The color of the title in RRGGBBAA format. 187 * The color of the title in RRGGBBAA format.
188 * @type {?string} 188 * @type {?string}
189 */ 189 */
190 var titleColor = null; 190 var titleColor = null;
huangs 2015/03/19 19:13:13 I don't think this is used outside of renderTheme(
fserb 2015/03/19 20:02:52 Done.
191 191
192 192
193 /** 193 /**
194 * Heuristic to determine whether a theme should be considered to be dark, so 194 * Heuristic to determine whether a theme should be considered to be dark, so
195 * the colors of various UI elements can be adjusted. 195 * the colors of various UI elements can be adjusted.
196 * @param {ThemeBackgroundInfo|undefined} info Theme background information. 196 * @param {ThemeBackgroundInfo|undefined} info Theme background information.
197 * @return {boolean} Whether the theme is dark. 197 * @return {boolean} Whether the theme is dark.
198 * @private 198 * @private
199 */ 199 */
200 function getIsThemeDark(info) { 200 function getIsThemeDark(info) {
(...skipping 21 matching lines...) Expand all
222 } 222 }
223 223
224 var info = ntpApiHandle.themeBackgroundInfo; 224 var info = ntpApiHandle.themeBackgroundInfo;
225 var isThemeDark = getIsThemeDark(info); 225 var isThemeDark = getIsThemeDark(info);
226 ntpContents.classList.toggle(CLASSES.DARK, isThemeDark); 226 ntpContents.classList.toggle(CLASSES.DARK, isThemeDark);
227 if (!info) { 227 if (!info) {
228 titleColor = NTP_DESIGN.titleColor; 228 titleColor = NTP_DESIGN.titleColor;
229 return; 229 return;
230 } 230 }
231 231
232 if (!info.usingDefaultTheme && info.textColorRgba) { 232 if (!info.usingDefaultTheme && info.textColorRgba) {
huangs 2015/03/19 19:13:12 info.textColorRgba might not always be around. Mov
fserb 2015/03/19 20:02:52 Done.
233 titleColor = convertToRRGGBBAAColor(info.textColorRgba); 233 titleColor = convertToRRGGBBAAColor(info.textColorRgba);
234 } else { 234 } else {
235 titleColor = isThemeDark ? 235 titleColor = isThemeDark ?
236 NTP_DESIGN.titleColorAgainstDark : NTP_DESIGN.titleColor; 236 NTP_DESIGN.titleColorAgainstDark : NTP_DESIGN.titleColor;
237 } 237 }
238 238
239 var background = [convertToRGBAColor(info.backgroundColorRgba), 239 var background = [convertToRGBAColor(info.backgroundColorRgba),
240 info.imageUrl, 240 info.imageUrl,
241 info.imageTiling, 241 info.imageTiling,
242 info.imageHorizontalAlignment, 242 info.imageHorizontalAlignment,
243 info.imageVerticalAlignment].join(' ').trim(); 243 info.imageVerticalAlignment].join(' ').trim();
244 244
245 document.body.style.background = background; 245 document.body.style.background = background;
246 document.body.classList.toggle(CLASSES.ALTERNATE_LOGO, info.alternateLogo); 246 document.body.classList.toggle(CLASSES.ALTERNATE_LOGO, info.alternateLogo);
247 updateThemeAttribution(info.attributionUrl); 247 updateThemeAttribution(info.attributionUrl);
248 setCustomThemeStyle(info); 248 setCustomThemeStyle(info);
249
250 var themeinfo = {cmd: 'updateTheme'};
251 if (!info.usingDefaultTheme) {
252 themeinfo.tileBorderColor = convertToRGBAColor(info.sectionBorderColorRgba);
253 themeinfo.tileHoverBorderColor = convertToRGBAColor(info.headerColorRgba);
254 }
255 themeinfo.isThemeDark = isThemeDark;
256 themeinfo.tileTitleColor = convertToRGBAColor(info.textColorRgba);
257
258 $('mv-single').contentWindow.postMessage(themeinfo, '*');
249 } 259 }
250 260
251 261
252 /** 262 /**
253 * Updates the NTP based on the current theme, then rerenders all tiles. 263 * Updates the NTP based on the current theme, then rerenders all tiles.
254 * @private 264 * @private
255 */ 265 */
256 function onThemeChange() { 266 function onThemeChange() {
257 renderTheme(); 267 renderTheme();
258 } 268 }
(...skipping 437 matching lines...) Expand 10 before | Expand all | Expand 10 after
696 ntpApiHandle = topLevelHandle.newTabPage; 706 ntpApiHandle = topLevelHandle.newTabPage;
697 ntpApiHandle.onthemechange = onThemeChange; 707 ntpApiHandle.onthemechange = onThemeChange;
698 ntpApiHandle.onmostvisitedchange = onMostVisitedChange; 708 ntpApiHandle.onmostvisitedchange = onMostVisitedChange;
699 709
700 ntpApiHandle.oninputstart = onInputStart; 710 ntpApiHandle.oninputstart = onInputStart;
701 ntpApiHandle.oninputcancel = restoreNtp; 711 ntpApiHandle.oninputcancel = restoreNtp;
702 712
703 if (ntpApiHandle.isInputInProgress) 713 if (ntpApiHandle.isInputInProgress)
704 onInputStart(); 714 onInputStart();
705 715
706 renderTheme();
707
708 searchboxApiHandle = topLevelHandle.searchBox; 716 searchboxApiHandle = topLevelHandle.searchBox;
709 717
710 if (fakebox) { 718 if (fakebox) {
711 // Listener for updating the key capture state. 719 // Listener for updating the key capture state.
712 document.body.onmousedown = function(event) { 720 document.body.onmousedown = function(event) {
713 if (isFakeboxClick(event)) 721 if (isFakeboxClick(event))
714 searchboxApiHandle.startCapturingKeyStrokes(); 722 searchboxApiHandle.startCapturingKeyStrokes();
715 else if (isFakeboxFocused()) 723 else if (isFakeboxFocused())
716 searchboxApiHandle.stopCapturingKeyStrokes(); 724 searchboxApiHandle.stopCapturingKeyStrokes();
717 }; 725 };
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after
763 } 771 }
764 772
765 args.push('removeTooltip=' + 773 args.push('removeTooltip=' +
766 encodeURIComponent(configData.translatedStrings.removeThumbnailTooltip)); 774 encodeURIComponent(configData.translatedStrings.removeThumbnailTooltip));
767 775
768 iframe.src = '//most-visited/single.html?' + args.join('&'); 776 iframe.src = '//most-visited/single.html?' + args.join('&');
769 $(IDS.TILES).appendChild(iframe); 777 $(IDS.TILES).appendChild(iframe);
770 778
771 iframe.onload = function() { 779 iframe.onload = function() {
772 reloadTiles(); 780 reloadTiles();
781 renderTheme();
773 }; 782 };
774 783
775 window.addEventListener('message', handlePostMessage); 784 window.addEventListener('message', handlePostMessage);
776 } 785 }
777 786
778 787
779 /** 788 /**
780 * Binds event listeners. 789 * Binds event listeners.
781 */ 790 */
782 function listen() { 791 function listen() {
783 document.addEventListener('DOMContentLoaded', init); 792 document.addEventListener('DOMContentLoaded', init);
784 } 793 }
785 794
786 return { 795 return {
787 init: init, 796 init: init,
788 listen: listen 797 listen: listen
789 }; 798 };
790 } 799 }
791 800
792 if (!window.localNTPUnitTest) { 801 if (!window.localNTPUnitTest) {
793 LocalNTP().listen(); 802 LocalNTP().listen();
794 } 803 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698