[NTP4] Remove promo text horizontal transitions on NTP opening.

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('ntp', function() {
   'use strict';
 
   // We can't pass the currently dragging tile via dataTransfer because of
   // http://crbug.com/31037
   var currentlyDraggingTile = null;
@@ skipping 801 matching lines @@
       // leftMargin centers the grid within the avaiable space.
       var minMargin = wide ? MIN_WIDE_MARGIN : 0;
       var leftMargin =
           Math.max(minMargin,
                    (this.tileGrid_.clientWidth - effectiveGridWidth) / 2);
 
       var rowHeight = this.heightForWidth(realTileValues.tileWidth) +
           realTileValues.interTileSpacing;
 
       this.layoutValues_ = {
+        colWidth: realTileValues.offsetX,
+        gridWidth: effectiveGridWidth,
+        leftMargin: leftMargin,
         numRowTiles: numRowTiles,
-        leftMargin: leftMargin,
-        colWidth: realTileValues.offsetX,
         rowHeight: rowHeight,
         tileWidth: realTileValues.tileWidth,
         wide: wide,
       };
 
       // We need to update the top margin as well.
       this.updateTopMargin_();
 
       this.firePageLayoutEvent_();
     },
 
     /**
      * Dispatches the custom pagelayout event.
      * @private
      */
     firePageLayoutEvent_: function() {
       cr.dispatchSimpleEvent(this, 'pagelayout', true, true);
     },
 
     /**
+     * @return {number} The animated left margin for the current layout.

[Evan Stade, 2012/07/23 21:51:15]

needs better English description of "animated left margin"

[Dan Beam, 2012/07/24 00:52:56]

Done.

+     */
+    getAnimatedLeftMargin_: function() {
+      if (this.layoutValues_.wide)
+        return 0;
+
+      var grid = this.gridValues_;
+      return (grid.minWideWidth - MIN_WIDE_MARGIN - grid.narrowWidth) / 2;
+    },
+
+    /**
      * Calculates the x/y coordinates for an element and moves it there.
      * @param {number} index The index of the element to be positioned.
      * @param {number} indexOffset If provided, this is added to |index| when
      *     positioning the tile. The effect is that the tile will be positioned
      *     in a non-default location.
      * @private
      */
     positionTile_: function(index, indexOffset) {
       var grid = this.gridValues_;
       var layout = this.layoutValues_;
 
       indexOffset = typeof indexOffset != 'undefined' ? indexOffset : 0;
       // Add the offset _after_ the modulus division. We might want to show the
       // tile off the side of the grid.
       var col = index % layout.numRowTiles + indexOffset;
       var row = Math.floor(index / layout.numRowTiles);
       // Calculate the final on-screen position for the tile.
       var realX = col * layout.colWidth + layout.leftMargin;
       var realY = row * layout.rowHeight;
 
       // Calculate the portion of the tile's position that should be animated.
       var animatedTileValues = layout.wide ?
           grid.wideTileValues : grid.narrowTileValues;
       // Animate the difference between three-wide and six-wide.
-      var animatedLeftMargin = layout.wide ?
-          0 : (grid.minWideWidth - MIN_WIDE_MARGIN - grid.narrowWidth) / 2;
+      var animatedLeftMargin = this.getAnimatedLeftMargin_();
       var animatedX = col * animatedTileValues.offsetX + animatedLeftMargin;
       var animatedY = row * (this.heightForWidth(animatedTileValues.tileWidth) +
                              animatedTileValues.interTileSpacing);
 
       var tile = this.tileElements_[index];
       tile.setGridPosition(animatedX, animatedY);
       tile.firstChild.setBounds(layout.tileWidth,
                                 realX - animatedX,
                                 realY - animatedY);
 
@@ skipping 133 matching lines @@
       this.topMarginIsForWide_ = layout.wide;
       this.topMarginPx_ = newMargin;
       this.topMargin_.style.marginTop =
           toCssPx(this.topMarginPx_ - this.animatedTopMarginPx_);
     },
 
     /**
      * 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';
-      }
+      var notification = this.notification;
+      if (!notification || notification.hidden)
+        return;
+
+      // Update the top position.
+      notification.style.marginTop = -notification.offsetHeight + 'px';
+
+      // Update the horizontal position.
+      var animatedLeftMargin = this.getAnimatedLeftMargin_();
+      notification.style.WebkitMarginStart = animatedLeftMargin + 'px';
+      var leftOffset = (this.layoutValues_.leftMargin - animatedLeftMargin) *
+                       (isRTL() ? -1 : 1);
+      notification.style.WebkitTransform = 'translateX(' + leftOffset + 'px)';
+
+      // Update the allowable widths of the text.
+      var buttonWidth = notification.querySelector('button').offsetWidth + 8;
+      notification.querySelector('span').style.maxWidth =
+          this.layoutValues_.gridWidth - buttonWidth + 'px';
+
+      // This makes sure the text doesn't condense smaller than the narrow size
+      // of the grid (e.g. when a user makes the window really small).
+      notification.style.minWidth =
+          this.gridValues_.narrowWidth - buttonWidth + 'px';
     },
 
     /**
      * Handles final setup that can only happen after |this| is inserted into
      * the page.
      * @private
      */
     onNodeInsertedIntoDocument_: function(e) {
       this.calculateLayoutValues_();
       this.heightChanged_();
@@ skipping 299 matching lines @@
       assert(false);
     },
   };
 
   return {
     getCurrentlyDraggingTile: getCurrentlyDraggingTile,
     setCurrentDropEffect: setCurrentDropEffect,
     TilePage: TilePage,
   };
 });