Improve layout for bookmark-apps. Add a 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 702c751b33db0502ee4729f6d1dc326f296e9051..bfcb5b403955a61ae3df7bb9e133d7198415a90c 100644
--- a/chrome/browser/resources/ntp4/apps_page.js
+++ b/chrome/browser/resources/ntp4/apps_page.js
@@ -178,15 +178,38 @@ cr.define('ntp4', function() {
 
       this.className = 'app';
 
+      if (!this.appData_.icon_big_exists && this.appData_.icon_small_exists)
+        this.use_small_icon_ = true;

[Evan Stade, 2011/07/27 16:31:45]

useSmallIcon_

[Greg Billock, 2011/07/27 19:52:24]

Done.

+
       var appImg = this.ownerDocument.createElement('img');
-      appImg.src = this.appData_.icon_big;
+      if (this.use_small_icon_)

[Evan Stade, 2011/07/27 16:31:45]

ternary operator

[Greg Billock, 2011/07/27 19:52:24]

Done.

+        appImg.src = this.appData_.icon_small;
+      else
+        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);
+      // image when it's touched. (Note: we elsewhere set mask-rect to 100%)
+      if (this.use_small_icon_)

[Evan Stade, 2011/07/27 16:31:45]

appImg.style.WebkitMaskImage = url(apImg.src)

[Greg Billock, 2011/07/27 19:52:24]

I'm not sure this mask image is doing anything for us -- it's getting overridden
elsewhere to be 100% of the area, which is probably right. Shall I just scrap
this?

[Evan Stade, 2011/07/27 23:04:31]

yea I guess

[Greg Billock, 2011/07/28 16:59:59]

Done.

+        appImg.style.WebkitMaskImage = url(this.appData_.icon_small);
+      else
+        appImg.style.WebkitMaskImage = url(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));
-      this.appendChild(appImg);
+      if (this.use_small_icon_) {
+        var imgDiv = this.ownerDocument.createElement('div');
+        imgDiv.style.display = '-webkit-box';

[Evan Stade, 2011/07/27 16:31:45]

all this style stuff should be in a css file, and all you'd do here is add a
class.

[Greg Billock, 2011/07/27 19:52:24]

Done.

+        imgDiv.style['-webkit-box-align'] = 'center';
+        imgDiv.style['vertical-align'] = 'middle';

[Evan Stade, 2011/07/27 16:31:45]

notwithstanding my above comment, the way you'd do this is

imgDiv.style.WebkitBoxAlign = ...
imgDiv.style.verticalAlign = ...

basically everything after a hyphen gets capitalized

[Greg Billock, 2011/07/27 19:52:24]

ah HA! :-)

+        imgDiv.style.border = '1px solid gray';
+        imgDiv.style['border-radius'] = '4px';
+        imgDiv.style.cursor = 'pointer';
+        imgDiv.appendChild(appImg);
+        imgDiv.addEventListener('click', this.onClick_.bind(this));
+        this.imgDiv_ = imgDiv;
+        this.appendChild(imgDiv);
+      } else {
+        this.appendChild(appImg);
+      }
       this.appImg_ = appImg;
 
       var appSpan = this.ownerDocument.createElement('span');
@@ -206,8 +229,20 @@ cr.define('ntp4', function() {
      *     animate.
      */
     setBounds: function(size, x, y) {
-      this.appImg_.style.width = this.appImg_.style.height =
-          (size * APP_IMG_SIZE_FRACTION) + 'px';
+      if (this.use_small_icon_) {
+        this.imgDiv_.style.width = (size * APP_IMG_SIZE_FRACTION) + 'px';
+        this.imgDiv_.style.height = (size * APP_IMG_SIZE_FRACTION - 4) + 'px';
+        this.appImg_.style.width = this.appImg_.style.height = '32px';
+        var margin = (size - (size * APP_IMG_SIZE_FRACTION)) / 2;
+        this.imgDiv_.style['margin-left'] = margin + 'px';
+        this.imgDiv_.style['margin-right'] = margin + 'px';
+        this.imgDiv_.style['margin-bottom'] = '4px';
+      }
+      else {
+        this.appImg_.style.width = this.appImg_.style.height =
+            (size * APP_IMG_SIZE_FRACTION) + 'px';
+      }
+
       this.style.width = this.style.height = size + 'px';
 
       this.style.left = x + 'px';