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

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 166 matching lines...) Expand 10 before | Expand all | Expand 10 after
177 /** 177 /**
178 * Minimum total padding to give to the left and right of the most visited 178 * Minimum total padding to give to the left and right of the most visited
179 * section. Used to determine how many tiles to show. 179 * section. Used to determine how many tiles to show.
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.
188 * @type {?string}
189 */
190 var titleColor = null;
191
192
193 /**
194 * Heuristic to determine whether a theme should be considered to be dark, so 187 * Heuristic to determine whether a theme should be considered to be dark, so
195 * the colors of various UI elements can be adjusted. 188 * the colors of various UI elements can be adjusted.
196 * @param {ThemeBackgroundInfo|undefined} info Theme background information. 189 * @param {ThemeBackgroundInfo|undefined} info Theme background information.
197 * @return {boolean} Whether the theme is dark. 190 * @return {boolean} Whether the theme is dark.
198 * @private 191 * @private
199 */ 192 */
200 function getIsThemeDark(info) { 193 function getIsThemeDark(info) {
201 if (!info) 194 if (!info)
202 return false; 195 return false;
203 // Heuristic: light text implies dark theme. 196 // Heuristic: light text implies dark theme.
(...skipping 14 matching lines...) Expand all
218 if (configData.translatedStrings.searchboxPlaceholder) { 211 if (configData.translatedStrings.searchboxPlaceholder) {
219 fakeboxText.textContent = 212 fakeboxText.textContent =
220 configData.translatedStrings.searchboxPlaceholder; 213 configData.translatedStrings.searchboxPlaceholder;
221 } 214 }
222 } 215 }
223 216
224 var info = ntpApiHandle.themeBackgroundInfo; 217 var info = ntpApiHandle.themeBackgroundInfo;
225 var isThemeDark = getIsThemeDark(info); 218 var isThemeDark = getIsThemeDark(info);
226 ntpContents.classList.toggle(CLASSES.DARK, isThemeDark); 219 ntpContents.classList.toggle(CLASSES.DARK, isThemeDark);
227 if (!info) { 220 if (!info) {
228 titleColor = NTP_DESIGN.titleColor;
229 return; 221 return;
230 } 222 }
231 223
232 if (!info.usingDefaultTheme && info.textColorRgba) {
233 titleColor = convertToRRGGBBAAColor(info.textColorRgba);
234 } else {
235 titleColor = isThemeDark ?
236 NTP_DESIGN.titleColorAgainstDark : NTP_DESIGN.titleColor;
237 }
238
239 var background = [convertToRGBAColor(info.backgroundColorRgba), 224 var background = [convertToRGBAColor(info.backgroundColorRgba),
240 info.imageUrl, 225 info.imageUrl,
241 info.imageTiling, 226 info.imageTiling,
242 info.imageHorizontalAlignment, 227 info.imageHorizontalAlignment,
243 info.imageVerticalAlignment].join(' ').trim(); 228 info.imageVerticalAlignment].join(' ').trim();
244 229
245 document.body.style.background = background; 230 document.body.style.background = background;
246 document.body.classList.toggle(CLASSES.ALTERNATE_LOGO, info.alternateLogo); 231 document.body.classList.toggle(CLASSES.ALTERNATE_LOGO, info.alternateLogo);
247 updateThemeAttribution(info.attributionUrl); 232 updateThemeAttribution(info.attributionUrl);
248 setCustomThemeStyle(info); 233 setCustomThemeStyle(info);
234
235 var themeinfo = {cmd: 'updateTheme'};
236 if (!info.usingDefaultTheme) {
237 themeinfo.tileBorderColor = convertToRGBAColor(info.sectionBorderColorRgba);
238 themeinfo.tileHoverBorderColor = convertToRGBAColor(info.headerColorRgba);
239 }
240 themeinfo.isThemeDark = isThemeDark;
241
242 var titleColor = NTP_DESIGN.titleColor;
243 if (!info.usingDefaultTheme && info.textColorRgba) {
244 titleColor = convertToRRGGBBAAColor(info.textColorRgba);
huangs 2015/03/19 23:45:01 Sorry should have caught this, too: Just assign
245 } else if (isThemeDark) {
246 NTP_DESIGN.titleColorAgainstDark;
huangs 2015/03/19 23:45:01 Assign to titleColor.
247 }
248 themeinfo.tileTitleColor = convertToRGBAColor(titleColor);
249
250 $('mv-single').contentWindow.postMessage(themeinfo, '*');
249 } 251 }
250 252
251 253
252 /** 254 /**
253 * Updates the NTP based on the current theme, then rerenders all tiles. 255 * Updates the NTP based on the current theme, then rerenders all tiles.
254 * @private 256 * @private
255 */ 257 */
256 function onThemeChange() { 258 function onThemeChange() {
257 renderTheme(); 259 renderTheme();
258 } 260 }
(...skipping 437 matching lines...) Expand 10 before | Expand all | Expand 10 after
696 ntpApiHandle = topLevelHandle.newTabPage; 698 ntpApiHandle = topLevelHandle.newTabPage;
697 ntpApiHandle.onthemechange = onThemeChange; 699 ntpApiHandle.onthemechange = onThemeChange;
698 ntpApiHandle.onmostvisitedchange = onMostVisitedChange; 700 ntpApiHandle.onmostvisitedchange = onMostVisitedChange;
699 701
700 ntpApiHandle.oninputstart = onInputStart; 702 ntpApiHandle.oninputstart = onInputStart;
701 ntpApiHandle.oninputcancel = restoreNtp; 703 ntpApiHandle.oninputcancel = restoreNtp;
702 704
703 if (ntpApiHandle.isInputInProgress) 705 if (ntpApiHandle.isInputInProgress)
704 onInputStart(); 706 onInputStart();
705 707
706 renderTheme();
707
708 searchboxApiHandle = topLevelHandle.searchBox; 708 searchboxApiHandle = topLevelHandle.searchBox;
709 709
710 if (fakebox) { 710 if (fakebox) {
711 // Listener for updating the key capture state. 711 // Listener for updating the key capture state.
712 document.body.onmousedown = function(event) { 712 document.body.onmousedown = function(event) {
713 if (isFakeboxClick(event)) 713 if (isFakeboxClick(event))
714 searchboxApiHandle.startCapturingKeyStrokes(); 714 searchboxApiHandle.startCapturingKeyStrokes();
715 else if (isFakeboxFocused()) 715 else if (isFakeboxFocused())
716 searchboxApiHandle.stopCapturingKeyStrokes(); 716 searchboxApiHandle.stopCapturingKeyStrokes();
717 }; 717 };
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after
763 } 763 }
764 764
765 args.push('removeTooltip=' + 765 args.push('removeTooltip=' +
766 encodeURIComponent(configData.translatedStrings.removeThumbnailTooltip)); 766 encodeURIComponent(configData.translatedStrings.removeThumbnailTooltip));
767 767
768 iframe.src = '//most-visited/single.html?' + args.join('&'); 768 iframe.src = '//most-visited/single.html?' + args.join('&');
769 $(IDS.TILES).appendChild(iframe); 769 $(IDS.TILES).appendChild(iframe);
770 770
771 iframe.onload = function() { 771 iframe.onload = function() {
772 reloadTiles(); 772 reloadTiles();
773 renderTheme();
773 }; 774 };
774 775
775 window.addEventListener('message', handlePostMessage); 776 window.addEventListener('message', handlePostMessage);
776 } 777 }
777 778
778 779
779 /** 780 /**
780 * Binds event listeners. 781 * Binds event listeners.
781 */ 782 */
782 function listen() { 783 function listen() {
783 document.addEventListener('DOMContentLoaded', init); 784 document.addEventListener('DOMContentLoaded', init);
784 } 785 }
785 786
786 return { 787 return {
787 init: init, 788 init: init,
788 listen: listen 789 listen: listen
789 }; 790 };
790 } 791 }
791 792
792 if (!window.localNTPUnitTest) { 793 if (!window.localNTPUnitTest) {
793 LocalNTP().listen(); 794 LocalNTP().listen();
794 } 795 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698