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

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

Issue 2670123003: [Local NTP] Cleanup: Remove support for "icons" layout (Closed)
Patch Set: Created 3 years, 10 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 15 matching lines...) Expand all
26 } 26 }
27 27
28 28
29 /** 29 /**
30 * Specifications for an NTP design (not comprehensive). 30 * Specifications for an NTP design (not comprehensive).
31 * 31 *
32 * fakeboxWingSize: Extra distance for fakebox to extend beyond beyond the list 32 * fakeboxWingSize: Extra distance for fakebox to extend beyond beyond the list
33 * of tiles. 33 * of tiles.
34 * fontFamily: Font family to use for title and thumbnail iframes. 34 * fontFamily: Font family to use for title and thumbnail iframes.
35 * fontSize: Font size to use for the iframes, in px. 35 * fontSize: Font size to use for the iframes, in px.
36 * mainClass: Class applied to #ntp-contents to control CSS.
37 * numTitleLines: Number of lines to display in titles. 36 * numTitleLines: Number of lines to display in titles.
38 * showFavicon: Whether to show favicon. 37 * showFavicon: Whether to show favicon.
39 * thumbnailTextColor: The 4-component color that thumbnail iframe may use to 38 * thumbnailTextColor: The 4-component color that thumbnail iframe may use to
40 * display text message in place of missing thumbnail. 39 * display text message in place of missing thumbnail.
41 * thumbnailFallback: (Optional) A value in THUMBNAIL_FALLBACK to specify the 40 * thumbnailFallback: (Optional) A value in THUMBNAIL_FALLBACK to specify the
42 * thumbnail fallback strategy. If unassigned, then the thumbnail.html 41 * thumbnail fallback strategy. If unassigned, then the thumbnail.html
43 * iframe would handle the fallback. 42 * iframe would handle the fallback.
44 * tileWidth: The width of each suggestion tile, in px. 43 * tileWidth: The width of each suggestion tile, in px.
45 * tileMargin: Spacing between successive tiles, in px. 44 * tileMargin: Spacing between successive tiles, in px.
46 * titleColor: The 4-component color of title text. 45 * titleColor: The 4-component color of title text.
47 * titleColorAgainstDark: The 4-component color of title text against a dark 46 * titleColorAgainstDark: The 4-component color of title text against a dark
48 * theme. 47 * theme.
49 * titleTextAlign: (Optional) The alignment of title text. If unspecified, the 48 * titleTextAlign: (Optional) The alignment of title text. If unspecified, the
50 * default value is 'center'. 49 * default value is 'center'.
51 * titleTextFade: (Optional) The number of pixels beyond which title 50 * titleTextFade: (Optional) The number of pixels beyond which title
52 * text begins to fade. This overrides the default ellipsis style. 51 * text begins to fade. This overrides the default ellipsis style.
53 * 52 *
54 * @type {{ 53 * @type {{
55 * fakeboxWingSize: number, 54 * fakeboxWingSize: number,
56 * fontFamily: string, 55 * fontFamily: string,
57 * fontSize: number, 56 * fontSize: number,
58 * mainClass: string,
59 * numTitleLines: number, 57 * numTitleLines: number,
60 * showFavicon: boolean, 58 * showFavicon: boolean,
61 * thumbnailTextColor: string, 59 * thumbnailTextColor: string,
62 * thumbnailFallback: string|null|undefined, 60 * thumbnailFallback: string|null|undefined,
63 * tileWidth: number, 61 * tileWidth: number,
64 * tileMargin: number, 62 * tileMargin: number,
65 * titleColor: string, 63 * titleColor: string,
66 * titleColorAgainstDark: string, 64 * titleColorAgainstDark: string,
67 * titleTextAlign: string|null|undefined, 65 * titleTextAlign: string|null|undefined,
68 * titleTextFade: number|null|undefined 66 * titleTextFade: number|null|undefined
69 * }} 67 * }}
70 */ 68 */
71 var NTP_DESIGN = { 69 var NTP_DESIGN = {
72 fakeboxWingSize: 0, 70 fakeboxWingSize: 0,
73 fontFamily: 'arial, sans-serif', 71 fontFamily: 'arial, sans-serif',
74 fontSize: 12, 72 fontSize: 12,
75 mainClass: 'thumb-ntp',
76 numTitleLines: 1, 73 numTitleLines: 1,
77 showFavicon: true, 74 showFavicon: true,
78 thumbnailTextColor: [50, 50, 50, 255], 75 thumbnailTextColor: [50, 50, 50, 255],
79 thumbnailFallback: 'dot', // Draw single dot. 76 thumbnailFallback: 'dot', // Draw single dot.
80 tileWidth: 154, 77 tileWidth: 154,
81 tileMargin: 16, 78 tileMargin: 16,
82 titleColor: [50, 50, 50, 255], 79 titleColor: [50, 50, 50, 255],
83 titleColorAgainstDark: [210, 210, 210, 255], 80 titleColorAgainstDark: [210, 210, 210, 255],
84 titleTextAlign: 'inherit', 81 titleTextAlign: 'inherit',
85 titleTextFade: 122 - 36 // 112px wide title with 32 pixel fade at end. 82 titleTextFade: 122 - 36 // 112px wide title with 32 pixel fade at end.
86 }; 83 };
87 84
88 85
89 /** 86 /**
90 * Modifies NTP_DESIGN parameters for icon NTP.
91 */
92 function modifyNtpDesignForIcons() {
93 NTP_DESIGN.fakeboxWingSize = 132;
94 NTP_DESIGN.mainClass = 'icon-ntp';
95 NTP_DESIGN.numTitleLines = 2;
96 NTP_DESIGN.showFavicon = false;
97 NTP_DESIGN.thumbnailFallback = null;
98 NTP_DESIGN.tileWidth = 48 + 2 * 18;
99 NTP_DESIGN.tileMargin = 60 - 18 * 2;
100 NTP_DESIGN.titleColor = [120, 120, 120, 255];
101 NTP_DESIGN.titleColorAgainstDark = [210, 210, 210, 255];
102 NTP_DESIGN.titleTextAlign = 'center';
103 delete NTP_DESIGN.titleTextFade;
104 }
105
106
107 /**
108 * Enum for classnames. 87 * Enum for classnames.
109 * @enum {string} 88 * @enum {string}
110 * @const 89 * @const
111 */ 90 */
112 var CLASSES = { 91 var CLASSES = {
113 ALTERNATE_LOGO: 'alternate-logo', // Shows white logo if required by theme 92 ALTERNATE_LOGO: 'alternate-logo', // Shows white logo if required by theme
114 DARK: 'dark', 93 DARK: 'dark',
115 DEFAULT_THEME: 'default-theme', 94 DEFAULT_THEME: 'default-theme',
116 DELAYED_HIDE_NOTIFICATION: 'mv-notice-delayed-hide', 95 DELAYED_HIDE_NOTIFICATION: 'mv-notice-delayed-hide',
117 FAKEBOX_DISABLE: 'fakebox-disable', // Makes fakebox non-interactive 96 FAKEBOX_DISABLE: 'fakebox-disable', // Makes fakebox non-interactive
(...skipping 606 matching lines...) Expand 10 before | Expand all | Expand 10 after
724 */ 703 */
725 function handlePostMessage(event) { 704 function handlePostMessage(event) {
726 var cmd = event.data.cmd; 705 var cmd = event.data.cmd;
727 var args = event.data; 706 var args = event.data;
728 if (cmd == 'tileBlacklisted') { 707 if (cmd == 'tileBlacklisted') {
729 showNotification(); 708 showNotification();
730 lastBlacklistedTile = args.tid; 709 lastBlacklistedTile = args.tid;
731 710
732 ntpApiHandle.deleteMostVisitedItem(args.tid); 711 ntpApiHandle.deleteMostVisitedItem(args.tid);
733 } 712 }
713 // TODO(treib): Should we also handle the 'loaded' message from the iframe
714 // here? We could hide the page until it arrives, to avoid flicker.
734 } 715 }
735 716
736 717
737 /** 718 /**
738 * Prepares the New Tab Page by adding listeners, rendering the current 719 * Prepares the New Tab Page by adding listeners, rendering the current
739 * theme, the most visited pages section, and Google-specific elements for a 720 * theme, the most visited pages section, and Google-specific elements for a
740 * Google-provided page. 721 * Google-provided page.
741 */ 722 */
742 function init() { 723 function init() {
743 notification = $(IDS.NOTIFICATION); 724 notification = $(IDS.NOTIFICATION);
(...skipping 13 matching lines...) Expand all
757 '" autocomplete="off" tabindex="-1" type="url" aria-hidden="true">'); 738 '" autocomplete="off" tabindex="-1" type="url" aria-hidden="true">');
758 fakeboxHtml.push('<div id="cursor"></div>'); 739 fakeboxHtml.push('<div id="cursor"></div>');
759 fakebox.innerHTML = fakeboxHtml.join(''); 740 fakebox.innerHTML = fakeboxHtml.join('');
760 741
761 ntpContents.insertBefore(fakebox, ntpContents.firstChild); 742 ntpContents.insertBefore(fakebox, ntpContents.firstChild);
762 ntpContents.insertBefore(logo, ntpContents.firstChild); 743 ntpContents.insertBefore(logo, ntpContents.firstChild);
763 } else { 744 } else {
764 document.body.classList.add(CLASSES.NON_GOOGLE_PAGE); 745 document.body.classList.add(CLASSES.NON_GOOGLE_PAGE);
765 } 746 }
766 747
767 // Modify design for experimental icon NTP, if specified.
768 if (configData.useIcons)
769 modifyNtpDesignForIcons();
770 document.querySelector('#ntp-contents').classList.add(NTP_DESIGN.mainClass);
771
772 // Hide notifications after fade out, so we can't focus on links via keyboard. 748 // Hide notifications after fade out, so we can't focus on links via keyboard.
773 notification.addEventListener('webkitTransitionEnd', hideNotification); 749 notification.addEventListener('webkitTransitionEnd', hideNotification);
774 750
775 var notificationMessage = $(IDS.NOTIFICATION_MESSAGE); 751 var notificationMessage = $(IDS.NOTIFICATION_MESSAGE);
776 notificationMessage.textContent = 752 notificationMessage.textContent =
777 configData.translatedStrings.thumbnailRemovedNotification; 753 configData.translatedStrings.thumbnailRemovedNotification;
778 754
779 var undoLink = $(IDS.UNDO_LINK); 755 var undoLink = $(IDS.UNDO_LINK);
780 undoLink.addEventListener('click', onUndo); 756 undoLink.addEventListener('click', onUndo);
781 registerKeyHandler(undoLink, KEYCODE.ENTER, onUndo); 757 registerKeyHandler(undoLink, KEYCODE.ENTER, onUndo);
(...skipping 80 matching lines...) Expand 10 before | Expand all | Expand 10 after
862 838
863 var iframe = document.createElement('iframe'); 839 var iframe = document.createElement('iframe');
864 // Change the order of tabbing the page to start with NTP tiles. 840 // Change the order of tabbing the page to start with NTP tiles.
865 iframe.setAttribute('tabindex', '1'); 841 iframe.setAttribute('tabindex', '1');
866 iframe.id = 'mv-single'; 842 iframe.id = 'mv-single';
867 843
868 var args = []; 844 var args = [];
869 845
870 if (searchboxApiHandle.rtl) 846 if (searchboxApiHandle.rtl)
871 args.push('rtl=1'); 847 args.push('rtl=1');
872 if (window.configData.useIcons)
873 args.push('icons=1');
874 if (NTP_DESIGN.numTitleLines > 1) 848 if (NTP_DESIGN.numTitleLines > 1)
875 args.push('ntl=' + NTP_DESIGN.numTitleLines); 849 args.push('ntl=' + NTP_DESIGN.numTitleLines);
876 850
877 args.push('removeTooltip=' + 851 args.push('removeTooltip=' +
878 encodeURIComponent(configData.translatedStrings.removeThumbnailTooltip)); 852 encodeURIComponent(configData.translatedStrings.removeThumbnailTooltip));
879 853
880 iframe.src = '//most-visited/single.html?' + args.join('&'); 854 iframe.src = '//most-visited/single.html?' + args.join('&');
881 $(IDS.TILES).appendChild(iframe); 855 $(IDS.TILES).appendChild(iframe);
882 856
883 iframe.onload = function() { 857 iframe.onload = function() {
(...skipping 14 matching lines...) Expand all
898 872
899 return { 873 return {
900 init: init, 874 init: init,
901 listen: listen 875 listen: listen
902 }; 876 };
903 } 877 }
904 878
905 if (!window.localNTPUnitTest) { 879 if (!window.localNTPUnitTest) {
906 LocalNTP().listen(); 880 LocalNTP().listen();
907 } 881 }
OLDNEW
« no previous file with comments | « chrome/browser/resources/local_ntp/local_ntp.html ('k') | chrome/browser/search/local_ntp_source.cc » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698