diff options
Diffstat (limited to 'chrome/browser')
-rw-r--r-- | chrome/browser/resources/ntp_search/apps_page.css | 4 | ||||
-rw-r--r-- | chrome/browser/resources/ntp_search/apps_page.js | 2 | ||||
-rw-r--r-- | chrome/browser/resources/ntp_search/mock/debug.css | 4 | ||||
-rw-r--r-- | chrome/browser/resources/ntp_search/nav_dot.css | 2 | ||||
-rw-r--r-- | chrome/browser/resources/ntp_search/new_tab.css | 14 | ||||
-rw-r--r-- | chrome/browser/resources/ntp_search/new_tab.html | 1 | ||||
-rw-r--r-- | chrome/browser/resources/ntp_search/new_tab.js | 58 | ||||
-rw-r--r-- | chrome/browser/resources/ntp_search/tile_page.css | 7 | ||||
-rw-r--r-- | chrome/browser/resources/ntp_search/tile_page.js | 11 | ||||
-rw-r--r-- | chrome/browser/ui/search/search_ui.h | 2 |
10 files changed, 81 insertions, 24 deletions
diff --git a/chrome/browser/resources/ntp_search/apps_page.css b/chrome/browser/resources/ntp_search/apps_page.css index 8a3a96f..8bce3f5 100644 --- a/chrome/browser/resources/ntp_search/apps_page.css +++ b/chrome/browser/resources/ntp_search/apps_page.css @@ -3,7 +3,7 @@ * found in the LICENSE file. */ .apps-page .tile-cell { - -webkit-margin-start: 12px; + -webkit-margin-start: 22px; margin-bottom: 12px; } @@ -22,7 +22,7 @@ .apps-page .app .title { color: #777; font-size: 0.9166em; - margin-top: 2px; + margin-top: 4px; } .app-contents { diff --git a/chrome/browser/resources/ntp_search/apps_page.js b/chrome/browser/resources/ntp_search/apps_page.js index 92abdb3..c24d6b0 100644 --- a/chrome/browser/resources/ntp_search/apps_page.js +++ b/chrome/browser/resources/ntp_search/apps_page.js @@ -578,7 +578,7 @@ cr.define('ntp', function() { // The width of a cell. cellWidth: 70, // The start margin of a cell (left or right according to text direction). - cellMarginStart: 12, + cellMarginStart: 22, // The maximum number of Tiles to be displayed. maxTileCount: 20, // Whether the TilePage content will be scrollable. diff --git a/chrome/browser/resources/ntp_search/mock/debug.css b/chrome/browser/resources/ntp_search/mock/debug.css index 0baa16d..84e4a1d 100644 --- a/chrome/browser/resources/ntp_search/mock/debug.css +++ b/chrome/browser/resources/ntp_search/mock/debug.css @@ -44,6 +44,10 @@ background: rgb(255, 255, 119); } +.debug #bookmark-bar-spacer { + background: rgb(255, 255, 119); +} + .debug .hide-col-0 .tile-col-0, .debug .hide-col-1 .tile-col-1, .debug .hide-col-2 .tile-col-2, diff --git a/chrome/browser/resources/ntp_search/nav_dot.css b/chrome/browser/resources/ntp_search/nav_dot.css index 8027fde..bc255e8 100644 --- a/chrome/browser/resources/ntp_search/nav_dot.css +++ b/chrome/browser/resources/ntp_search/nav_dot.css @@ -4,7 +4,7 @@ #dot-list { height: 15px; - margin: 10px 0 8px; + margin: 0; overflow: hidden; padding: 0; } diff --git a/chrome/browser/resources/ntp_search/new_tab.css b/chrome/browser/resources/ntp_search/new_tab.css index 4f2fbd7..557610e 100644 --- a/chrome/browser/resources/ntp_search/new_tab.css +++ b/chrome/browser/resources/ntp_search/new_tab.css @@ -72,7 +72,7 @@ body { #bottom-panel { -webkit-transition: opacity 200ms; position: absolute; - top: 364px; + top: 300px; visibility: hidden; width: 100%; } @@ -82,7 +82,7 @@ body { } #card-slider-frame { - height: 92px; + height: 100px; overflow: hidden; } @@ -95,17 +95,21 @@ body { #bottom-panel-header, #bottom-panel-footer, #bottom-panel-toolbar { - margin: 10px auto; + margin: 0 auto; text-align: center; } #bottom-panel-header { - margin-bottom: 20px; + padding: 10px 0 20px; } #bottom-panel-toolbar { height: 18px; - margin-top: 8px; + padding: 10px 0; +} + +#bookmark-bar-spacer { + height: 48px; } #promo-bubble-anchor { diff --git a/chrome/browser/resources/ntp_search/new_tab.html b/chrome/browser/resources/ntp_search/new_tab.html index 5af6659..38b028a 100644 --- a/chrome/browser/resources/ntp_search/new_tab.html +++ b/chrome/browser/resources/ntp_search/new_tab.html @@ -99,6 +99,7 @@ </div> </div> </div> + <div id="bookmark-bar-spacer"></div> </div> </div> <div id="promo-bubble-anchor"></div> diff --git a/chrome/browser/resources/ntp_search/new_tab.js b/chrome/browser/resources/ntp_search/new_tab.js index b6daae5..a8659bc 100644 --- a/chrome/browser/resources/ntp_search/new_tab.js +++ b/chrome/browser/resources/ntp_search/new_tab.js @@ -37,7 +37,7 @@ cr.define('ntp', function() { * @type {number} * @const */ - var HEIGHT_FOR_BOTTOM_PANEL = 558; + var HEIGHT_FOR_BOTTOM_PANEL = 531; /** * The Bottom Panel width required to show 6 cols of Tiles, which is used @@ -75,6 +75,12 @@ cr.define('ntp', function() { */ var NORMAL_BOTTOM_PANEL_WIDTH = 500; + /** + * @type {number} + * @const + */ + var TILE_ROW_HEIGHT = 100; + //---------------------------------------------------------------------------- /** @@ -112,6 +118,27 @@ cr.define('ntp', function() { var startTime; /** + * The top position of the Bottom Panel. + * @type {number|undefined} + * @private + */ + var bottomPanelOffsetTop; + + /** + * The height of the Bottom Panel Header, in pixels. + * @type {number|undefined} + * @private + */ + var headerHeight; + + /** + * The height of the Bottom Panel Footer, in pixels. + * @type {number|undefined} + * @private + */ + var footerHeight; + + /** * The time in milliseconds for most transitions. This should match what's * in new_tab.css. Unfortunately there's no better way to try to time * something to occur until after a transition has completed. @@ -713,10 +740,29 @@ cr.define('ntp', function() { // Finally, dispatch the layout method to the current page. var currentPage = opt_page || this.cardSlider.currentCardValue; + + var contentHeight = TILE_ROW_HEIGHT; + if (!opt_page && currentPage.config.scrollable) { + contentHeight = viewHeight - bottomPanelOffsetTop - + headerHeight - footerHeight; + contentHeight = Math.max(TILE_ROW_HEIGHT, contentHeight); + contentHeight = Math.min(2 * TILE_ROW_HEIGHT, contentHeight); + } + this.contentHeight_ = contentHeight; + + $('card-slider-frame').style.height = contentHeight + 'px'; + currentPage.layout(opt_animate); }, /** + * @return {number} The height of the Bottom Panel's content. + */ + get contentHeight() { + return this.contentHeight_; + }, + + /** * @return {number} The width of the Bottom Panel's content. */ get contentWidth() { @@ -768,6 +814,10 @@ cr.define('ntp', function() { newTabView = new NewTabView(); + bottomPanelOffsetTop = $('bottom-panel').offsetTop; + headerHeight = $('bottom-panel-header').offsetHeight; + footerHeight = $('bottom-panel-footer').offsetHeight; + notificationContainer = getRequiredElement('notification-container'); notificationContainer.addEventListener( 'webkitTransitionEnd', onNotificationTransitionEnd); @@ -1074,6 +1124,10 @@ cr.define('ntp', function() { newTabView.layout(opt_animate); } + function getContentHeight() { + return newTabView.contentHeight; + } + function getContentWidth() { return newTabView.contentWidth; } @@ -1081,12 +1135,14 @@ cr.define('ntp', function() { // Return an object with all the exports return { APP_LAUNCH: APP_LAUNCH, + TILE_ROW_HEIGHT: TILE_ROW_HEIGHT, appAdded: appAdded, appMoved: appMoved, appRemoved: appRemoved, appsPrefChangeCallback: appsPrefChangeCallback, getAppsCallback: getAppsCallback, getCardSlider: getCardSlider, + getContentHeight: getContentHeight, getContentWidth: getContentWidth, getThumbnailUrl: getThumbnailUrl, incrementHoveredThumbnailCount: incrementHoveredThumbnailCount, diff --git a/chrome/browser/resources/ntp_search/tile_page.css b/chrome/browser/resources/ntp_search/tile_page.css index c1f5a4c..e9419be 100644 --- a/chrome/browser/resources/ntp_search/tile_page.css +++ b/chrome/browser/resources/ntp_search/tile_page.css @@ -35,7 +35,7 @@ .tile-row { -webkit-transition: opacity 200ms; - height: 92px; + height: 100px; text-align: start; white-space: nowrap; } @@ -118,11 +118,6 @@ Scroll Bars ----------------------------------------------------------------------------- */ -.tile-page-content { - /* TODO(pedrosimonetti): Remove this when fixing the Apps page height. */ - height: 92px; -} - .scrollable { overflow-y: auto; } diff --git a/chrome/browser/resources/ntp_search/tile_page.js b/chrome/browser/resources/ntp_search/tile_page.js index 019a87e..25db675 100644 --- a/chrome/browser/resources/ntp_search/tile_page.js +++ b/chrome/browser/resources/ntp_search/tile_page.js @@ -19,12 +19,6 @@ cr.define('ntp', function() { * @type {number} * @const */ - var TILE_ROW_HEIGHT = 92; - - /** - * @type {number} - * @const - */ var SCROLL_BAR_WIDTH = 12; //---------------------------------------------------------------------------- @@ -576,7 +570,7 @@ cr.define('ntp', function() { if (isRTL()) col = colCount - col - 1; var config = this.config; - var top = TILE_ROW_HEIGHT * row; + var top = ntp.TILE_ROW_HEIGHT * row; var left = col * (config.cellWidth + config.cellMarginStart); return {top: top, left: left}; }, @@ -690,6 +684,9 @@ cr.define('ntp', function() { * @param {boolean=} opt_animate Whether the layout be animated. */ layout: function(opt_animate) { + var contentHeight = ntp.getContentHeight(); + this.content_.style.height = contentHeight + 'px'; + var contentWidth = ntp.getContentWidth(); var colCount = this.getColCountForWidth_(contentWidth); var lastColCount = this.colCount_; diff --git a/chrome/browser/ui/search/search_ui.h b/chrome/browser/ui/search/search_ui.h index 152792a..3c24887 100644 --- a/chrome/browser/ui/search/search_ui.h +++ b/chrome/browser/ui/search/search_ui.h @@ -12,7 +12,7 @@ namespace search { // should be visible. This value is calculated from the // chrome/browser/resources/ntp_search/ tile_page.js // HEIGHT_FOR_BOTTOM_PANEL constant. -static const int kMinContentHeightForBottomBookmarkBar = 558; +static const int kMinContentHeightForBottomBookmarkBar = 531; // The maximum width of the detached bookmark bar. static const int kMaxWidthForBottomBookmarkBar = 720; |