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

Side by Side Diff: chrome/browser/resources/ntp4/tile_page.js

Issue 1753783004: NTP4: erase notification promo UI (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: 1 more Created 4 years, 9 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
« no previous file with comments | « chrome/browser/resources/ntp4/tile_page.css ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 cr.define('ntp', function() { 5 cr.define('ntp', function() {
6 'use strict'; 6 'use strict';
7 7
8 // We can't pass the currently dragging tile via dataTransfer because of 8 // We can't pass the currently dragging tile via dataTransfer because of
9 // http://crbug.com/31037 9 // http://crbug.com/31037
10 var currentlyDraggingTile = null; 10 var currentlyDraggingTile = null;
(...skipping 482 matching lines...) Expand 10 before | Expand all | Expand 10 after
493 /** 493 /**
494 * Returns the width of the scrollbar, in pixels, if it is active, or 0 494 * Returns the width of the scrollbar, in pixels, if it is active, or 0
495 * otherwise. 495 * otherwise.
496 * @type {number} 496 * @type {number}
497 */ 497 */
498 get scrollbarWidth() { 498 get scrollbarWidth() {
499 return this.scrollbar_.hidden ? 0 : 13; 499 return this.scrollbar_.hidden ? 0 : 13;
500 }, 500 },
501 501
502 /** 502 /**
503 * The notification content of this tile (if any, otherwise null).
504 * @type {!HTMLElement}
505 */
506 get notification() {
507 return this.topMargin_.nextElementSibling.id == 'notification-container' ?
508 this.topMargin_.nextElementSibling : null;
509 },
510 /**
511 * The notification content of this tile (if any, otherwise null).
512 * @type {!HTMLElement}
513 */
514 set notification(node) {
515 assert(node instanceof HTMLElement, '|node| isn\'t an HTMLElement!');
516 // NOTE: Implicitly removes from DOM if |node| is inside it.
517 this.content_.insertBefore(node, this.topMargin_.nextElementSibling);
518 this.positionNotification_();
519 },
520
521 /**
522 * Fetches the size, in pixels, of the padding-top of the tile contents. 503 * Fetches the size, in pixels, of the padding-top of the tile contents.
523 * @type {number} 504 * @type {number}
524 */ 505 */
525 get contentPadding() { 506 get contentPadding() {
526 if (typeof this.contentPadding_ == 'undefined') { 507 if (typeof this.contentPadding_ == 'undefined') {
527 this.contentPadding_ = 508 this.contentPadding_ =
528 parseInt(window.getComputedStyle(this.content_).paddingTop, 10); 509 parseInt(window.getComputedStyle(this.content_).paddingTop, 10);
529 } 510 }
530 return this.contentPadding_; 511 return this.contentPadding_;
531 }, 512 },
(...skipping 429 matching lines...) Expand 10 before | Expand all | Expand 10 after
961 return; 942 return;
962 } 943 }
963 944
964 this.calculateLayoutValues_(); 945 this.calculateLayoutValues_();
965 946
966 this.lastWidth_ = this.clientWidth; 947 this.lastWidth_ = this.clientWidth;
967 this.lastHeight_ = this.clientHeight; 948 this.lastHeight_ = this.clientHeight;
968 this.classList.add('animating-tile-page'); 949 this.classList.add('animating-tile-page');
969 this.heightChanged_(); 950 this.heightChanged_();
970 951
971 this.positionNotification_();
972 this.repositionTiles_(); 952 this.repositionTiles_();
973 }, 953 },
974 954
975 /** 955 /**
976 * The tile grid has an image mask which fades at the edges. We only show 956 * The tile grid has an image mask which fades at the edges. We only show
977 * the mask when there is an active drag; it obscures doppleganger tiles 957 * the mask when there is an active drag; it obscures doppleganger tiles
978 * as they enter or exit the grid. 958 * as they enter or exit the grid.
979 * @private 959 * @private
980 */ 960 */
981 updateMask_: function() { 961 updateMask_: function() {
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after
1037 this.topMargin_.style.marginBottom = toCssPx(this.animatedTopMarginPx_); 1017 this.topMargin_.style.marginBottom = toCssPx(this.animatedTopMarginPx_);
1038 } 1018 }
1039 1019
1040 this.topMarginIsForWide_ = layout.wide; 1020 this.topMarginIsForWide_ = layout.wide;
1041 this.topMarginPx_ = newMargin; 1021 this.topMarginPx_ = newMargin;
1042 this.topMargin_.style.marginTop = 1022 this.topMargin_.style.marginTop =
1043 toCssPx(this.topMarginPx_ - this.animatedTopMarginPx_); 1023 toCssPx(this.topMarginPx_ - this.animatedTopMarginPx_);
1044 }, 1024 },
1045 1025
1046 /** 1026 /**
1047 * Position the notification if there's one showing.
1048 */
1049 positionNotification_: function() {
1050 var notification = this.notification;
1051 if (!notification || notification.hidden)
1052 return;
1053
1054 // Update the horizontal position.
1055 var animatedLeftMargin = this.getAnimatedLeftMargin_();
1056 notification.style.WebkitMarginStart = animatedLeftMargin + 'px';
1057 var leftOffset = (this.layoutValues_.leftMargin - animatedLeftMargin) *
1058 (isRTL() ? -1 : 1);
1059 notification.style.WebkitTransform = 'translateX(' + leftOffset + 'px)';
1060
1061 // Update the allowable widths of the text.
1062 var buttonWidth = notification.querySelector('button').offsetWidth + 8;
1063 notification.querySelector('span').style.maxWidth =
1064 this.layoutValues_.gridWidth - buttonWidth + 'px';
1065
1066 // This makes sure the text doesn't condense smaller than the narrow size
1067 // of the grid (e.g. when a user makes the window really small).
1068 notification.style.minWidth =
1069 this.gridValues_.narrowWidth - buttonWidth + 'px';
1070
1071 // Update the top position.
1072 notification.style.marginTop = -notification.offsetHeight + 'px';
1073 },
1074
1075 /**
1076 * Handles final setup that can only happen after |this| is inserted into 1027 * Handles final setup that can only happen after |this| is inserted into
1077 * the page. 1028 * the page.
1078 * @private 1029 * @private
1079 */ 1030 */
1080 onNodeInsertedIntoDocument_: function(e) { 1031 onNodeInsertedIntoDocument_: function(e) {
1081 this.calculateLayoutValues_(); 1032 this.calculateLayoutValues_();
1082 this.heightChanged_(); 1033 this.heightChanged_();
1083 }, 1034 },
1084 1035
1085 /** 1036 /**
(...skipping 288 matching lines...) Expand 10 before | Expand all | Expand 10 after
1374 }; 1325 };
1375 1326
1376 return { 1327 return {
1377 getCurrentlyDraggingTile: getCurrentlyDraggingTile, 1328 getCurrentlyDraggingTile: getCurrentlyDraggingTile,
1378 setCurrentDropEffect: setCurrentDropEffect, 1329 setCurrentDropEffect: setCurrentDropEffect,
1379 // Not used outside, just for usage in JSDoc inside this file. 1330 // Not used outside, just for usage in JSDoc inside this file.
1380 Tile: Tile, 1331 Tile: Tile,
1381 TilePage: TilePage, 1332 TilePage: TilePage,
1382 }; 1333 };
1383 }); 1334 });
OLDNEW
« no previous file with comments | « chrome/browser/resources/ntp4/tile_page.css ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698