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

chrome/browser/resources/ntp4/apps_page.js

Index: chrome/browser/resources/ntp4/apps_page.js
diff --git a/chrome/browser/resources/ntp4/apps_page.js b/chrome/browser/resources/ntp4/apps_page.js
index 50cfdd20b6ac22c4ea5117a49ffe4e48eb7d9d81..f0370f7918fba811ebf59f6b504972b7253d3912 100644
--- a/chrome/browser/resources/ntp4/apps_page.js
+++ b/chrome/browser/resources/ntp4/apps_page.js
@@ -181,15 +181,25 @@ cr.define('ntp4', function() {
       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));

[Evan Stade, 2011/08/03 19:17:15]

I think this is redundant in the useSmallIcon_ case

[Greg Billock, 2011/08/03 21:15:50]

Moved inside non-small-icon case and removed the comment.

-      appContents.appendChild(appImg);
+      if (this.useSmallIcon_) {
+        var imgDiv = this.ownerDocument.createElement('div');
+        imgDiv.className = 'app-icon-div';
+        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');
@@ -264,7 +274,12 @@ cr.define('ntp4', function() {
      */
     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_) {

[Evan Stade, 2011/08/03 19:17:15]

yay reduced complexity. now you can use ternary operator.

[Greg Billock, 2011/08/03 21:15:50]

Done.

+        this.appImg_.style.width = this.appImg_.style.height = '32px';
+      } 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';