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

Side by Side Diff: chrome/browser/resources/ntp_search/new_tab.js

Issue 11564026: NTP5: Making Apps page taller. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Addressing Dan's comments Created 8 years 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 | Annotate | Revision Log
OLDNEW
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
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
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
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( 805 notificationContainer.addEventListener(
815 'webkitTransitionEnd', onNotificationTransitionEnd); 806 'webkitTransitionEnd', onNotificationTransitionEnd);
816 807
817 var mostVisited = new ntp.MostVisitedPage(); 808 var mostVisited = new ntp.MostVisitedPage();
818 newTabView.appendTilePage(mostVisited, 809 newTabView.appendTilePage(mostVisited,
819 loadTimeData.getString('mostvisited')); 810 loadTimeData.getString('mostvisited'));
820 chrome.send('getMostVisited'); 811 chrome.send('getMostVisited');
821 812
(...skipping 183 matching lines...) Expand 10 before | Expand all | Expand 10 after
1005 document.querySelector('#notification button').onclick = closeFunc; 996 document.querySelector('#notification button').onclick = closeFunc;
1006 document.addEventListener('dragstart', closeFunc); 997 document.addEventListener('dragstart', closeFunc);
1007 998
1008 notificationContainer.hidden = false; 999 notificationContainer.hidden = false;
1009 window.setTimeout(function() { 1000 window.setTimeout(function() {
1010 notificationContainer.classList.remove('inactive'); 1001 notificationContainer.classList.remove('inactive');
1011 }, 0); 1002 }, 0);
1012 1003
1013 var timeout = opt_timeout || 10000; 1004 var timeout = opt_timeout || 10000;
1014 notificationTimeout = window.setTimeout(hideNotification, timeout); 1005 notificationTimeout = window.setTimeout(hideNotification, timeout);
1006
1007 layout();
1015 } 1008 }
1016 1009
1017 /** 1010 /**
1018 * Hide the notification bubble. 1011 * Hide the notification bubble.
1019 */ 1012 */
1020 function hideNotification() { 1013 function hideNotification() {
1021 notificationContainer.classList.add('inactive'); 1014 notificationContainer.classList.add('inactive');
1015
1016 layout();
1022 } 1017 }
1023 1018
1024 /** 1019 /**
1025 * When done fading out, set hidden to true so the notification can't be 1020 * When done fading out, set hidden to true so the notification can't be
1026 * tabbed to or clicked. 1021 * tabbed to or clicked.
1027 * @param {Event} e The webkitTransitionEnd event. 1022 * @param {Event} e The webkitTransitionEnd event.
1028 */ 1023 */
1029 function onNotificationTransitionEnd(e) { 1024 function onNotificationTransitionEnd(e) {
1030 if (notificationContainer.classList.contains('inactive')) 1025 if (notificationContainer.classList.contains('inactive'))
1031 notificationContainer.hidden = true; 1026 notificationContainer.hidden = true;
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after
1097 } 1092 }
1098 1093
1099 function getCardSlider() { 1094 function getCardSlider() {
1100 return newTabView.cardSlider; 1095 return newTabView.cardSlider;
1101 } 1096 }
1102 1097
1103 function setAppToBeHighlighted(appId) { 1098 function setAppToBeHighlighted(appId) {
1104 newTabView.highlightAppId = appId; 1099 newTabView.highlightAppId = appId;
1105 } 1100 }
1106 1101
1107 function layout(opt_animate) { 1102 function layout() {
1108 newTabView.layout(opt_animate); 1103 newTabView.layout.apply(newTabView, arguments);
1109 } 1104 }
1110 1105
1111 function getContentHeight() { 1106 function getContentHeight() {
1112 return newTabView.contentHeight; 1107 return newTabView.contentHeight;
1113 } 1108 }
1114 1109
1115 function getContentWidth() { 1110 function getContentWidth() {
1116 return newTabView.contentWidth; 1111 return newTabView.contentWidth;
1117 } 1112 }
1118 1113
(...skipping 26 matching lines...) Expand all
1145 setRecentlyClosedTabs: noop, 1140 setRecentlyClosedTabs: noop,
1146 showNotification: showNotification, 1141 showNotification: showNotification,
1147 themeChanged: themeChanged, 1142 themeChanged: themeChanged,
1148 updateLogin: noop, 1143 updateLogin: noop,
1149 }; 1144 };
1150 }); 1145 });
1151 1146
1152 document.addEventListener('DOMContentLoaded', ntp.onLoad); 1147 document.addEventListener('DOMContentLoaded', ntp.onLoad);
1153 1148
1154 var toCssPx = cr.ui.toCssPx; 1149 var toCssPx = cr.ui.toCssPx;
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698