ntp4 - manual tile layout

This doesn't do any tile size adjustment yet, but will appropriately display 3-wide or 6-wide formatting.

BUG=none
TEST=manual

Review URL: http://codereview.chromium.org/6693048

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@80360 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 92 insertions, 13 deletions

diff --git a/chrome/browser/resources/ntp4/apps_page.js b/chrome/browser/resources/ntp4/apps_page.js
index 0d0b111..c4338ed 100644
--- a/chrome/browser/resources/ntp4/apps_page.js
+++ b/chrome/browser/resources/ntp4/apps_page.js
@@ -25,7 +25,7 @@ cr.define('ntp4', function() {
     initialize: function() {
       assert(this.appData.id, 'Got an app without an ID');
 
-      this.className = 'app';
+      this.className = 'app tile';
       this.setAttribute('app-id', this.appData.id);
 
       var appImg = this.ownerDocument.createElement('img');
@@ -74,6 +74,9 @@ cr.define('ntp4', function() {
     return el;
   }
 
+  var MAX_ROW_TILE_COUNT = 6;
+  var MIN_ROW_TILE_COUNT = 3;
+
   AppsPage.prototype = {
     __proto__: HTMLDivElement.prototype,
 
@@ -81,6 +84,19 @@ cr.define('ntp4', function() {
       this.className = 'apps-page';
       /* Ordered list of our apps. */
       this.appElements = this.getElementsByClassName('app');
+
+      this.lastWidth_ = this.clientWidth;
+
+      this.eventTracker = new EventTracker();
+      this.eventTracker.add(window, 'resize', this.onResize_.bind(this));
+    },
+
+    /**
+     * Cleans up resources that are no longer needed after this AppsPage
+     * instance is removed from the DOM.
+     */
+    tearDown: function() {
+      this.eventTracker.removeAll();
     },
 
     /**
@@ -91,7 +107,70 @@ cr.define('ntp4', function() {
     appendApp: function(appData) {
       var appElement = new App(appData);
       this.appendChild(appElement);
-    }
+      this.positionApp_(this.appElements.length - 1);
+    },
+
+    /**
+     * Calculates the x/y coordinates for an element and moves it there.
+     * @param {number} The index of the element to be positioned.
+     */
+    positionApp_: function(index) {
+      var width = this.clientWidth;
+      // Vertical and horizontal spacing between tiles.
+      var innerSpacing = 28;
+
+      // Try to show 6 elements per row. If there's not enough space, go for
+      // 3.
+      var numRowTiles = MAX_ROW_TILE_COUNT;
+      var minSixupTileSize = 128;
+      var tileSize = (width - (numRowTiles - 1) * innerSpacing) / numRowTiles;
+      if (tileSize < minSixupTileSize) {
+        numRowTiles = MIN_ROW_TILE_COUNT;
+        tileSize = minSixupTileSize;
+      }
+
+      var row = Math.floor(index / numRowTiles);
+      var col = index % numRowTiles;
+
+      var usedWidth = numRowTiles * tileSize + (numRowTiles - 1) * innerSpacing;
+      var leftSpacing = (width - usedWidth) / 2;
+      var x = col * (innerSpacing + tileSize) + leftSpacing;
+      var topSpacing = 50;
+      var y = row * (innerSpacing + tileSize) + topSpacing;
+
+      var tileElement = this.appElements[index];
+      tileElement.style.left = x + 'px';
+      tileElement.style.top = y + 'px';
+    },
+
+    /**
+     * Find the index within the page of the given application.
+     * returns {int} The index of the app.
+     */
+    indexOf_: function(appElement) {
+      for (var i = 0; i < this.appElements.length; i++) {
+        if (appElement == this.appElements[i])
+          return i;
+      }
+
+      return -1;
+    },
+
+    /**
+     * Window resize event handler. Window resizes may trigger re-layouts.
+     * @param {Object} e The resize event.
+     */
+    onResize_: function(e) {
+      // Do nothing if the width didn't change.
+      if (this.lastWidth_ == this.clientWidth)
+        return;
+
+      this.lastWidth_ = this.clientWidth;
+
+      for (var i = 0; i < this.appElements.length; i++) {
+        this.positionApp_(i);
+      }
+    },
   };
 
   return {
diff --git a/chrome/browser/resources/ntp4/new_tab.css b/chrome/browser/resources/ntp4/new_tab.css
index c2710b3..c2911ac 100644
--- a/chrome/browser/resources/ntp4/new_tab.css
+++ b/chrome/browser/resources/ntp4/new_tab.css
@@ -49,35 +49,32 @@ body {
 .apps-page {
   margin-left: auto;
   margin-right: auto;
-  max-width: 1100px;
-  padding: 29px;
+  min-width: 480px;
+  max-width: 960px;
   position: relative;
-  width: 960px;
+  width: 100%;
   -webkit-box-sizing: border-box;
 }
 
 .app {
   display: inline-block;
   height: 128px;
+  position: absolute;
   text-align: center;
   width: 128px;
   /* Animate effects to/from the grabbed state, and the position when drop
      is cancelled.  I'd like to also animate movement when an app is
      re-positioned, but since chrome is doing the layout there is no property
-     to animate.
-     TODO(rbyers): Should we take over responsibility for app layout ourself
-     like the classic NTP's most-visited icons?  Or should we extend webkit
-     somehow to support animation of the position of browser laid-out
-     elements. */
-  -webkit-transition-property: -webkit-transform, opacity, zIndex;
-  -webkit-transition-duration: 200ms;
+     to animate. */
+  -webkit-transition: -webkit-transform 200ms, opacity 200ms, zIndex 200ms,
+                      left 0, top 0;
   /* Don't offer the context menu on long-press. */
   -webkit-touch-callout: none;
 }
 
 .app span {
+  display: block;
   text-decoration: none;
-  /* TODO(rbyers): why isn't ellipsis working? */
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
diff --git a/chrome/browser/resources/ntp4/new_tab.js b/chrome/browser/resources/ntp4/new_tab.js
index 89f4685..9b7a665 100644
--- a/chrome/browser/resources/ntp4/new_tab.js
+++ b/chrome/browser/resources/ntp4/new_tab.js
@@ -241,6 +241,9 @@ var ntp = (function() {
     // uninstall. Could we re-use the existing page and dot elements?  It seems
     // unfortunate to have Chrome send us the entire apps list after an
     // uninstall.
+    for (var i = 0; i < appsPages.length; i++) {
+      appsPages[i].tearDown();
+    }
     removeChildrenByClassName(appsPageList, 'apps-page');
     removeChildrenByClassName(dotList, 'dot');