| OLD | NEW |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 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 * @fileoverview New tab page | 6 * @fileoverview New tab page |
| 7 * This is the main code for the new tab page. NewTabView manages page list, | 7 * This is the main code for the new tab page. NewTabView manages page list, |
| 8 * dot list and handles apps pages callbacks from backend. It also handles | 8 * dot list and handles apps pages callbacks from backend. It also handles |
| 9 * the layout of the Bottom Panel and the global UI states of the New Tab Page. | 9 * the layout of the Bottom Panel and the global UI states of the New Tab Page. |
| 10 */ | 10 */ |
| (...skipping 114 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 125 var bottomPanelOffsetTop; | 125 var bottomPanelOffsetTop; |
| 126 | 126 |
| 127 /** | 127 /** |
| 128 * The height of the Bottom Panel Header, in pixels. | 128 * The height of the Bottom Panel Header, in pixels. |
| 129 * @type {number|undefined} | 129 * @type {number|undefined} |
| 130 * @private | 130 * @private |
| 131 */ | 131 */ |
| 132 var headerHeight; | 132 var headerHeight; |
| 133 | 133 |
| 134 /** | 134 /** |
| 135 * The height of the Bottom Panel Footer, in pixels. | |
| 136 * @type {number|undefined} | |
| 137 * @private | |
| 138 */ | |
| 139 var footerHeight; | |
| 140 | |
| 141 /** | |
| 142 * The time in milliseconds for most transitions. This should match what's | 135 * The time in milliseconds for most transitions. This should match what's |
| 143 * in new_tab.css. Unfortunately there's no better way to try to time | 136 * in new_tab.css. Unfortunately there's no better way to try to time |
| 144 * something to occur until after a transition has completed. | 137 * something to occur until after a transition has completed. |
| 145 * @type {number} | 138 * @type {number} |
| 146 * @const | 139 * @const |
| 147 */ | 140 */ |
| 148 var DEFAULT_TRANSITION_TIME = 500; | 141 var DEFAULT_TRANSITION_TIME = 500; |
| 149 | 142 |
| 150 /** | 143 /** |
| 151 * See description for these values in ntp_stats.h. | 144 * See description for these values in ntp_stats.h. |
| (...skipping 577 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 729 this.contentWidth_ = width; | 722 this.contentWidth_ = width; |
| 730 $('bottom-panel-footer').style.width = width + 'px'; | 723 $('bottom-panel-footer').style.width = width + 'px'; |
| 731 } | 724 } |
| 732 | 725 |
| 733 // Finally, dispatch the layout method to the current page. | 726 // Finally, dispatch the layout method to the current page. |
| 734 var currentPage = opt_page || this.cardSlider.currentCardValue; | 727 var currentPage = opt_page || this.cardSlider.currentCardValue; |
| 735 | 728 |
| 736 var contentHeight = TILE_ROW_HEIGHT; | 729 var contentHeight = TILE_ROW_HEIGHT; |
| 737 if (!opt_page && currentPage.config.scrollable) { | 730 if (!opt_page && currentPage.config.scrollable) { |
| 738 contentHeight = viewHeight - bottomPanelOffsetTop - | 731 contentHeight = viewHeight - bottomPanelOffsetTop - |
| 739 headerHeight - footerHeight; | 732 headerHeight - $('bottom-panel-footer').offsetHeight; |
| 740 contentHeight = Math.max(TILE_ROW_HEIGHT, contentHeight); | 733 contentHeight = Math.max(TILE_ROW_HEIGHT, contentHeight); |
| 741 contentHeight = Math.min(2 * TILE_ROW_HEIGHT, contentHeight); | |
| 742 } | 734 } |
| 743 this.contentHeight_ = contentHeight; | 735 this.contentHeight_ = contentHeight; |
| 744 | 736 |
| 745 $('card-slider-frame').style.height = contentHeight + 'px'; | 737 $('card-slider-frame').style.height = contentHeight + 'px'; |
| 746 | 738 |
| 747 currentPage.layout(opt_animate); | 739 currentPage.layout(opt_animate); |
| 748 }, | 740 }, |
| 749 | 741 |
| 750 /** | 742 /** |
| 751 * @return {number} The height of the Bottom Panel's content. | 743 * @return {number} The height of the Bottom Panel's content. |
| (...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 801 * Invoked at startup once the DOM is available to initialize the app. | 793 * Invoked at startup once the DOM is available to initialize the app. |
| 802 */ | 794 */ |
| 803 function onLoad() { | 795 function onLoad() { |
| 804 // Load the current theme colors. | 796 // Load the current theme colors. |
| 805 themeChanged(); | 797 themeChanged(); |
| 806 | 798 |
| 807 newTabView = new NewTabView(); | 799 newTabView = new NewTabView(); |
| 808 | 800 |
| 809 bottomPanelOffsetTop = $('bottom-panel').offsetTop; | 801 bottomPanelOffsetTop = $('bottom-panel').offsetTop; |
| 810 headerHeight = $('bottom-panel-header').offsetHeight; | 802 headerHeight = $('bottom-panel-header').offsetHeight; |
| 811 footerHeight = $('bottom-panel-footer').offsetHeight; | |
| 812 | 803 |
| 813 notificationContainer = getRequiredElement('notification-container'); | 804 notificationContainer = getRequiredElement('notification-container'); |
| 814 notificationContainer.addEventListener( | |
| 815 'webkitTransitionEnd', onNotificationTransitionEnd); | |
| 816 | 805 |
| 817 var mostVisited = new ntp.MostVisitedPage(); | 806 var mostVisited = new ntp.MostVisitedPage(); |
| 818 newTabView.appendTilePage(mostVisited, | 807 newTabView.appendTilePage(mostVisited, |
| 819 loadTimeData.getString('mostvisited')); | 808 loadTimeData.getString('mostvisited')); |
| 820 chrome.send('getMostVisited'); | 809 chrome.send('getMostVisited'); |
| 821 | 810 |
| 822 if (loadTimeData.valueExists('bubblePromoText')) { | 811 if (loadTimeData.valueExists('bubblePromoText')) { |
| 823 promoBubble = new cr.ui.Bubble; | 812 promoBubble = new cr.ui.Bubble; |
| 824 promoBubble.anchorNode = getRequiredElement('promo-bubble-anchor'); | 813 promoBubble.anchorNode = getRequiredElement('promo-bubble-anchor'); |
| 825 promoBubble.arrowLocation = cr.ui.ArrowLocation.BOTTOM_START; | 814 promoBubble.arrowLocation = cr.ui.ArrowLocation.BOTTOM_START; |
| (...skipping 173 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 999 function closeFunc(e) { | 988 function closeFunc(e) { |
| 1000 if (opt_closeHandler) | 989 if (opt_closeHandler) |
| 1001 opt_closeHandler(); | 990 opt_closeHandler(); |
| 1002 hideNotification(); | 991 hideNotification(); |
| 1003 } | 992 } |
| 1004 | 993 |
| 1005 document.querySelector('#notification button').onclick = closeFunc; | 994 document.querySelector('#notification button').onclick = closeFunc; |
| 1006 document.addEventListener('dragstart', closeFunc); | 995 document.addEventListener('dragstart', closeFunc); |
| 1007 | 996 |
| 1008 notificationContainer.hidden = false; | 997 notificationContainer.hidden = false; |
| 1009 window.setTimeout(function() { | |
| 1010 notificationContainer.classList.remove('inactive'); | |
| 1011 }, 0); | |
| 1012 | 998 |
| 1013 var timeout = opt_timeout || 10000; | 999 var timeout = opt_timeout || 10000; |
| 1014 notificationTimeout = window.setTimeout(hideNotification, timeout); | 1000 notificationTimeout = window.setTimeout(hideNotification, timeout); |
| 1001 |
| 1002 layout(); |
| 1015 } | 1003 } |
| 1016 | 1004 |
| 1017 /** | 1005 /** |
| 1018 * Hide the notification bubble. | 1006 * Hide the notification bubble. |
| 1019 */ | 1007 */ |
| 1020 function hideNotification() { | 1008 function hideNotification() { |
| 1021 notificationContainer.classList.add('inactive'); | 1009 notificationContainer.hidden = true; |
| 1022 } | |
| 1023 | 1010 |
| 1024 /** | 1011 layout(); |
| 1025 * When done fading out, set hidden to true so the notification can't be | |
| 1026 * tabbed to or clicked. | |
| 1027 * @param {Event} e The webkitTransitionEnd event. | |
| 1028 */ | |
| 1029 function onNotificationTransitionEnd(e) { | |
| 1030 if (notificationContainer.classList.contains('inactive')) | |
| 1031 notificationContainer.hidden = true; | |
| 1032 } | 1012 } |
| 1033 | 1013 |
| 1034 function setMostVisitedPages(dataList, hasBlacklistedUrls) { | 1014 function setMostVisitedPages(dataList, hasBlacklistedUrls) { |
| 1035 var page = newTabView.mostVisitedPage; | 1015 var page = newTabView.mostVisitedPage; |
| 1036 var state = page.getTileRepositioningState(); | 1016 var state = page.getTileRepositioningState(); |
| 1037 if (state) { | 1017 if (state) { |
| 1038 if (state.isRemoving) | 1018 if (state.isRemoving) |
| 1039 page.animateTileRemoval(state.index, dataList); | 1019 page.animateTileRemoval(state.index, dataList); |
| 1040 else | 1020 else |
| 1041 page.animateTileRestoration(state.index, dataList); | 1021 page.animateTileRestoration(state.index, dataList); |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1097 } | 1077 } |
| 1098 | 1078 |
| 1099 function getCardSlider() { | 1079 function getCardSlider() { |
| 1100 return newTabView.cardSlider; | 1080 return newTabView.cardSlider; |
| 1101 } | 1081 } |
| 1102 | 1082 |
| 1103 function setAppToBeHighlighted(appId) { | 1083 function setAppToBeHighlighted(appId) { |
| 1104 newTabView.highlightAppId = appId; | 1084 newTabView.highlightAppId = appId; |
| 1105 } | 1085 } |
| 1106 | 1086 |
| 1107 function layout(opt_animate) { | 1087 function layout() { |
| 1108 newTabView.layout(opt_animate); | 1088 newTabView.layout.apply(newTabView, arguments); |
| 1109 } | 1089 } |
| 1110 | 1090 |
| 1111 function getContentHeight() { | 1091 function getContentHeight() { |
| 1112 return newTabView.contentHeight; | 1092 return newTabView.contentHeight; |
| 1113 } | 1093 } |
| 1114 | 1094 |
| 1115 function getContentWidth() { | 1095 function getContentWidth() { |
| 1116 return newTabView.contentWidth; | 1096 return newTabView.contentWidth; |
| 1117 } | 1097 } |
| 1118 | 1098 |
| (...skipping 26 matching lines...) Expand all Loading... |
| 1145 setRecentlyClosedTabs: noop, | 1125 setRecentlyClosedTabs: noop, |
| 1146 showNotification: showNotification, | 1126 showNotification: showNotification, |
| 1147 themeChanged: themeChanged, | 1127 themeChanged: themeChanged, |
| 1148 updateLogin: noop, | 1128 updateLogin: noop, |
| 1149 }; | 1129 }; |
| 1150 }); | 1130 }); |
| 1151 | 1131 |
| 1152 document.addEventListener('DOMContentLoaded', ntp.onLoad); | 1132 document.addEventListener('DOMContentLoaded', ntp.onLoad); |
| 1153 | 1133 |
| 1154 var toCssPx = cr.ui.toCssPx; | 1134 var toCssPx = cr.ui.toCssPx; |
| OLD | NEW |