ntp4: respect non-default apps promo logo

BUG=none
TEST=manual (set logo to something else in preferences file)


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

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

chrome/browser/resources/ntp4/apps_page.css

@@ -26,15 +26,19 @@
   white-space: nowrap;
 }
 
-.app-contents > img {
+.app-img-container {
   cursor: pointer;
-  display: block;
   margin-left: auto;
   margin-right: auto;
   /* -webkit-mask-image set by JavaScript to the image source */
   -webkit-mask-size: 100% 100%;
 }
 
+.app-img-container > * {
+  height: 100%;
+  width: 100%;
+}
+
 .app-icon-div {
   /* TODO(gbillock): find a better style for this div. Better border color? */
   border: 1px solid gray;
@@ -68,6 +72,22 @@
   display: none;
 }
 
+.tile:only-of-type > .has-promo .app-img-container > .apps-promo-logo {
+  display: block;
+}
+
+.apps-promo-logo {
+  display: none;
+}
+
+.tile:only-of-type > .has-promo .app-img-container > img:first-child {
+  display: none;
+}
+
+.app-img-container > img:first-child {
+  display: block;
+}
+
 /* TODO(estade): animation? */
 .tile:only-of-type > .has-promo > .apps-promo-extras {
   display: block;

chrome/browser/resources/ntp4/apps_page.js

@@ -181,22 +181,28 @@ cr.define('ntp4', function() {
       var appContents = this.ownerDocument.createElement('div');
       appContents.className = 'app-contents';
 
+      var appImgContainer = this.ownerDocument.createElement('div');
+      appImgContainer.className = 'app-img-container';
+      this.appImgContainer_ = appImgContainer;
+
       if (!this.appData_.icon_big_exists && this.appData_.icon_small_exists)
         this.useSmallIcon_ = true;
 
       var appImg = this.ownerDocument.createElement('img');
       appImg.src = this.useSmallIcon_ ? this.appData_.icon_small :
                                         this.appData_.icon_big;
+      appImgContainer.appendChild(appImg);
+
       if (this.useSmallIcon_) {
         var imgDiv = this.ownerDocument.createElement('div');
         imgDiv.className = 'app-icon-div';
-        imgDiv.appendChild(appImg);
+        imgDiv.appendChild(appImgContainer);
         imgDiv.addEventListener('click', this.onClick_.bind(this));
         this.imgDiv_ = imgDiv;
         appContents.appendChild(imgDiv);
       } else {
-        appImg.addEventListener('click', this.onClick_.bind(this));
-        appContents.appendChild(appImg);
+        appImgContainer.addEventListener('click', this.onClick_.bind(this));
+        appContents.appendChild(appImgContainer);
       }
       this.appImg_ = appImg;
 
@@ -205,6 +211,7 @@ cr.define('ntp4', function() {
       appSpan.addEventListener('click', this.onClick_.bind(this));
       appContents.appendChild(appSpan);
       this.appendChild(appContents);
+      this.appContents_ = appContents;
 
       this.addEventListener('keydown', cr.ui.contextMenuHandler);
       this.addEventListener('keyup', cr.ui.contextMenuHandler);
@@ -239,12 +246,15 @@ cr.define('ntp4', function() {
       this.appsPromoHide_ =
           this.appsPromoExtras_.querySelector('.apps-promo-hide');
 
+      this.appsPromoLogo_ = this.ownerDocument.createElement('img');
+      this.appsPromoLogo_.className = 'apps-promo-logo';
+      this.appImgContainer_.appendChild(this.appsPromoLogo_);
+
       this.appsPromoHide_.addEventListener('click',
                                            this.onHidePromoClicked_.bind(this));
 
       this.appendChild(this.appsPromoExtras_);
       this.appsPromoExtras_.hidden = false;
-      // TODO(estade): A ping url needs to be set for the app icon.
     },
 
     /**
@@ -274,6 +284,7 @@ cr.define('ntp4', function() {
       this.appsPromoLink_.href = data.promoLink;
       this.appsPromoLink_.textContent = data.promoButton;
       this.appsPromoHide_.textContent = data.promoExpire;
+      this.appsPromoLogo_.src = data.promoLogo;
     },
 
     /**
@@ -285,10 +296,9 @@ cr.define('ntp4', function() {
      */
     setBounds: function(size, x, y) {
       var imgSize = size * APP_IMG_SIZE_FRACTION;
-      this.appImg_.style.width = this.appImg_.style.height =
+      this.appImgContainer_.style.width = this.appImgContainer_.style.height =
           this.useSmallIcon_ ? '32px' : imgSize + 'px';
 
-
       this.style.width = this.style.height = size + 'px';
       if (this.isStore_)
         this.appsPromoExtras_.style.left = size + (imgSize - size) / 2 + 'px';

chrome/browser/resources/ntp4/nav_dot.js

@@ -198,8 +198,10 @@ cr.define('ntp4', function() {
      */
     doDrop: function(e) {
       e.stopPropagation();
-      if (ntp4.getCurrentlyDraggingTile)
+      if (ntp4.getCurrentlyDraggingTile) {
         this.page_.appendDraggingTile();
+        this.page_.cleanupDrag();
+      }
       // TODO(estade): handle non-tile drags.
 
       this.cancelDelayedSwitch_();

chrome/browser/resources/ntp4/tile_page.js

@@ -901,8 +901,9 @@ cr.define('ntp4', function() {
               this.tileElements_[adjustedIndex]);
           this.tileMoved(currentlyDraggingTile);
         } else {
+          var originalPage = currentlyDraggingTile.tilePage;
           this.addDragData(e.dataTransfer, adjustedIndex);
-          currentlyDraggingTile.tilePage.cleanupDrag();
+          originalPage.cleanupDrag();
         }
 
         // Dropping the icon may cause topMargin to change, but changing it
@@ -924,7 +925,7 @@ cr.define('ntp4', function() {
       if (originalPage == this)
         return;
 
-      this.addDragData(null, this.tileElements_.length - 1);
+      this.addDragData(null, this.tileElements_.length);
       originalPage.cleanupDrag();
     },