[NTP4] Redesign of notification promo.

chrome/browser/resources/ntp4/tile_page.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('ntp4', function() {
   'use strict';
 
   // We can't pass the currently dragging tile via dataTransfer because of
   // http://crbug.com/31037
   var currentlyDraggingTile = null;
@@ skipping 485 matching lines @@
     /**
      * Returns any extra padding to insert to the bottom of a tile page.  By
      * default there is none, but subclasses can override.
      * @type {number}
      */
     get extraBottomPadding() {
       return 0;
     },
 
     /**
+     * The notification content of this tile (if any, otherwise null).
+     * @type {!HTMLElement}
+     */
+    get notification() {
+      return this.topMargin_.nextElementSibling.id == 'notification-container' ?
+          this.topMargin_.nextElementSibling : null;
+    },
+    /**
+     * The notification content of this tile (if any, otherwise null).
+     * @param {!HTMLElement}
+     */
+    set notification(node) {
+      assert(node instanceof HTMLElement, '|node| isn\'t an HTMLElement!');
+      // NOTE: Implicitly removes from DOM if |node| is inside it.
+      this.content_.insertBefore(node, this.topMargin_.nextElementSibling);
+      this.positionNotification_();
+    },
+
+    /**
      * Removes the tilePage from the DOM and cleans up event handlers.
      */
     remove: function() {
       // This checks arguments.length as most remove functions have a boolean
       // |opt_animate| argument, but that's not necesarilly applicable to
       // removing a tilePage. Selecting a different card in an animated way and
       // deleting the card afterward is probably a better choice.
       assert(typeof arguments[0] != 'boolean',
              'This function takes no |opt_animate| argument.');
       this.tearDown_();
@@ skipping 387 matching lines @@
         return;
       }
 
       this.calculateLayoutValues_();
 
       this.lastWidth_ = this.clientWidth;
       this.lastHeight_ = this.clientHeight;
       this.classList.add('animating-tile-page');
       this.heightChanged_();
 
+      this.positionNotification_();
       this.repositionTiles_();
     },
 
     /**
      * The tile grid has an image mask which fades at the edges. We only show
      * the mask when there is an active drag; it obscures doppleganger tiles
      * as they enter or exit the grid.
      * @private
      */
     updateMask_: function() {
@@ skipping 54 matching lines @@
             this.animatedTopMarginPx_ + 'px';
       }
 
       this.topMarginIsForWide_ = layout.wide;
       this.topMarginPx_ = newMargin;
       this.topMargin_.style.marginTop =
           (this.topMarginPx_ - this.animatedTopMarginPx_) + 'px';
     },
 
     /**
+     * Position the notification if there's one showing.
+     */
+    positionNotification_: function() {
+      if (this.notification && !this.notification.hidden) {
+        this.notification.style.margin =
+            -this.notification.offsetHeight + 'px ' +
+            this.layoutValues_.leftMargin + 'px 0';
+      }
+    },
+
+    /**
      * Handles final setup that can only happen after |this| is inserted into
      * the page.
      * @private
      */
     onNodeInsertedIntoDocument_: function(e) {
       this.calculateLayoutValues_();
       this.heightChanged_();
     },
 
     /**
@@ skipping 292 matching lines @@
       assert(false);
     },
   };
 
   return {
     getCurrentlyDraggingTile: getCurrentlyDraggingTile,
     setCurrentDropEffect: setCurrentDropEffect,
     TilePage: TilePage,
   };
 });