Revert 94715 - Revert 94714 - Improve layout for bookmark-apps. Add treatment for small icons.

chrome/browser/resources/ntp4/apps_page.js

 // Copyright (c) 2011 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';
 
   var localStrings = new LocalStrings;
 
   var APP_LAUNCH = {
@@ skipping 163 matching lines @@
 
     initialize: function() {
       assert(this.appData_.id, 'Got an app without an ID');
       this.id = this.appData_.id;
 
       this.className = 'app';
 
       var appContents = this.ownerDocument.createElement('div');
       appContents.className = 'app-contents';
 
+      if (!this.appData_.icon_big_exists && this.appData_.icon_small_exists)
+        this.useSmallIcon_ = true;
+
       var appImg = this.ownerDocument.createElement('img');
-      appImg.src = this.appData_.icon_big;
-      // We use a mask of the same image so CSS rules can highlight just the
-      // image when it's touched.
-      appImg.style.WebkitMaskImage = url(this.appData_.icon_big);
+      appImg.src = this.useSmallIcon_ ? this.appData_.icon_small :
+                                        this.appData_.icon_big;
       // We put a click handler just on the app image - so clicking on the
       // margins between apps doesn't do anything.
       appImg.addEventListener('click', this.onClick_.bind(this));
-      appContents.appendChild(appImg);
+      if (this.useSmallIcon_) {
+        var imgDiv = this.ownerDocument.createElement('div');
+        imgDiv.setAttribute('class', 'app-icon-div');

[Evan Stade, 2011/08/02 21:47:14]

imgDiv.class = 

[Greg Billock, 2011/08/03 19:05:50]

Done. (className)

+        imgDiv.appendChild(appImg);
+        imgDiv.addEventListener('click', this.onClick_.bind(this));
+        this.imgDiv_ = imgDiv;
+        appContents.appendChild(imgDiv);
+      } else {
+        appContents.appendChild(appImg);
+      }
       this.appImg_ = appImg;
 
       var appSpan = this.ownerDocument.createElement('span');
       appSpan.textContent = this.appData_.name;
       appContents.appendChild(appSpan);
       this.appendChild(appContents);
 
       this.addEventListener('keydown', cr.ui.contextMenuHandler);
       this.addEventListener('keyup', cr.ui.contextMenuHandler);
 
@@ skipping 54 matching lines @@
 
     /**
      * Set the size and position of the app tile.
      * @param {number} size The total size of |this|.
      * @param {number} x The x-position.
      * @param {number} y The y-position.
      *     animate.
      */
     setBounds: function(size, x, y) {
       var imgSize = size * APP_IMG_SIZE_FRACTION;
-      this.appImg_.style.width = this.appImg_.style.height = imgSize + 'px';
+      if (this.useSmallIcon_) {
+        this.imgDiv_.style.width = imgSize + 'px';
+        this.imgDiv_.style.height = (imgSize - 4) + 'px';
+        this.appImg_.style.width = this.appImg_.style.height = '32px';

[Evan Stade, 2011/08/02 21:47:14]

define in css file

[Greg Billock, 2011/08/03 19:05:50]

These should really come from the icon size we choose to use, but it gets set
here in the else clause, so I want to keep it explicit.

+        var margin = (size - imgSize) / 2;
+        this.imgDiv_.style['margin-left'] = margin + 'px';

[Evan Stade, 2011/08/02 21:47:14]

marginLeft

but I feel like you should be able to use css to center, e.g., margin-left: auto
margin-right: auto ought to work.

[Greg Billock, 2011/08/03 19:05:50]

Yeah, I moved these and got it looking better with the div size compared to the
recommended icon sizes, too.

On 2011/08/02 21:47:14, Evan Stade wrote:

+        this.imgDiv_.style['margin-right'] = margin + 'px';
+        this.imgDiv_.style['margin-bottom'] = '4px';

[Evan Stade, 2011/08/02 21:47:14]

define in css file

[Greg Billock, 2011/08/03 19:05:50]

Done.

+      }

[Evan Stade, 2011/08/02 21:47:14]

else on same line

[Greg Billock, 2011/08/03 19:05:50]

Done.

+      else {
+        this.appImg_.style.width = this.appImg_.style.height = imgSize + 'px';
+      }
+
       this.style.width = this.style.height = size + 'px';
       if (this.isStore_)
         this.appsPromoExtras_.style.left = size + (imgSize - size) / 2 + 'px';
 
       this.style.left = x + 'px';
       this.style.right = x + 'px';
       this.style.top = y + 'px';
     },
 
     /**
@@ skipping 154 matching lines @@
   AppsPage.setPromo = function(data) {
     var store = document.querySelector('.webstore');
     if (store)
       store.setAppsPromoData(data);
   };
 
   return {
     AppsPage: AppsPage,
   };
 });