4 files changed, 13 insertions, 6 deletions
diff --git a/chrome/browser/resources/ntp4/apps_page.js b/chrome/browser/resources/ntp4/apps_page.js
index 73d8e54..04d68c7 100644
--- a/chrome/browser/resources/ntp4/apps_page.js
+++ b/chrome/browser/resources/ntp4/apps_page.js
@@ -33,7 +33,7 @@ cr.define('ntp4', function() {
       var menu = new cr.ui.Menu;
       cr.ui.decorate(menu, cr.ui.Menu);
       menu.classList.add('app-context-menu');
-      this.menu_ = menu;
+      this.menu = menu;
 
       this.launch_ = this.appendMenuItem_();
       this.launch_.addEventListener('activate', this.onLaunch_.bind(this));
@@ -71,13 +71,13 @@ cr.define('ntp4', function() {
     },
 
     /**
-     * Appends a menu item to |this.menu_|.
+     * Appends a menu item to |this.menu|.
      * @param {?String} textId If non-null, the ID for the localized string
      *     that acts as the item's label.
      */
     appendMenuItem_: function(textId) {
       var button = cr.doc.createElement('button');
-      this.menu_.appendChild(button);
+      this.menu.appendChild(button);
       cr.ui.decorate(button, cr.ui.MenuItem);
       if (textId)
         button.textContent = localStrings.getString(textId);
diff --git a/chrome/browser/resources/ntp4/new_tab.css b/chrome/browser/resources/ntp4/new_tab.css
index a323e97..0aecb3f3 100644
--- a/chrome/browser/resources/ntp4/new_tab.css
+++ b/chrome/browser/resources/ntp4/new_tab.css
@@ -123,6 +123,7 @@ body {
   bottom: 0;
   position: fixed;
   width: 100%;
+  z-index: 5;
 }
 
 /* TODO(estade): remove this border hack and replace with a webkit-gradient
diff --git a/chrome/browser/resources/ntp4/tile_page.css b/chrome/browser/resources/ntp4/tile_page.css
index 8f580d3..626baa0 100644
--- a/chrome/browser/resources/ntp4/tile_page.css
+++ b/chrome/browser/resources/ntp4/tile_page.css
@@ -49,7 +49,6 @@
   overflow: hidden;
   position: relative;
   width: 100%;
-  z-index: 100;
 }
 
 .tile {
@@ -60,6 +59,13 @@
   -webkit-user-drag: element;
 }
 
+/* I don't know why this is necessary. -webkit-user-drag: element on .tile
+ * should be enough. If we don't do this, we get 2 drag representations for
+ * the image. */
+.tile img {
+  -webkit-user-drag: none;
+}
+
 .doppleganger {
   left: 0 !important;
   top: 0 !important;
@@ -72,7 +78,7 @@
 .tile.drag-representation {
   pointer-events: none;
   position: fixed;
-  z-index: 10;
+  z-index: 3;
 }
 
 .tile.drag-representation.placing > * {
diff --git a/chrome/browser/resources/ntp4/tile_page.js b/chrome/browser/resources/ntp4/tile_page.js
index 3f77117..c78b6a3 100644
--- a/chrome/browser/resources/ntp4/tile_page.js
+++ b/chrome/browser/resources/ntp4/tile_page.js
@@ -101,7 +101,7 @@ cr.define('ntp4', function() {
       // image masks.
       this.dragClone = this.cloneNode(true);
       this.dragClone.classList.add('drag-representation');
-      this.ownerDocument.body.appendChild(this.dragClone);
+      $('card-slider-frame').appendChild(this.dragClone);
       this.eventTracker.add(this.dragClone, 'webkitTransitionEnd',
                             this.onDragCloneTransitionEnd_.bind(this));