| OLD | NEW |
| 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 Loading... |
| 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 Loading... |
| 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 Loading... |
| 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 Loading... |
| 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 Loading... |
| 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 } |
| OLD | NEW |