Bug 1309596, use updateDragImage for tab dragging on Windows and Mac so that a proper drag feedback image is used rather than the panel, r=felipe

browser/base/content/tabbrowser.xml

@@ -6465,44 +6465,58 @@
         // to get a full-resolution drag image for use on HiDPI displays.
         let windowUtils = window.getInterface(Ci.nsIDOMWindowUtils);
         let scale = windowUtils.screenPixelsPerCSSPixel / windowUtils.fullZoom;
-        let canvas = this._dndCanvas ? this._dndCanvas
-                                     : document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
-        canvas.mozOpaque = true;
+        let canvas = this._dndCanvas;
+        if (!canvas) {
+          this._dndCanvas = canvas =
+            document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+          canvas.style.width = "100%";
+          canvas.style.height = "100%";
+          canvas.mozOpaque = true;
+        }
+
         canvas.width = 160 * scale;
         canvas.height = 90 * scale;
-        let toDrag;
+        let toDrag = canvas;
         let dragImageOffset = -16;
         if (gMultiProcessBrowser) {
           var context = canvas.getContext('2d');
           context.fillStyle = "white";
           context.fillRect(0, 0, canvas.width, canvas.height);
-          // Create a panel to use it in setDragImage
-          // which will tell xul to render a panel that follows
-          // the pointer while a dnd session is on.
-          if (!this._dndPanel) {
-            this._dndCanvas = canvas;
-            this._dndPanel = document.createElement("panel");
-            this._dndPanel.className = "dragfeedback-tab";
-            this._dndPanel.setAttribute("type", "drag");
-            let wrapper = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
-            wrapper.style.width = "160px";
-            wrapper.style.height = "90px";
-            wrapper.appendChild(canvas);
-            canvas.style.width = "100%";
-            canvas.style.height = "100%";
-            this._dndPanel.appendChild(wrapper);
-            document.documentElement.appendChild(this._dndPanel);
+
+          let captureListener;
+          let platform = this.tabbrowser.AppConstants.platform;
+          // On Windows and Mac we can update the drag image during a drag
+          // using updateDragImage. On Linux, we can use a panel.
+          if (platform == "win" || platform == "macosx") {
+            captureListener = function() {
+              dt.updateDragImage(canvas, dragImageOffset, dragImageOffset);
+            }
+          }
+          else {
+            // Create a panel to use it in setDragImage
+            // which will tell xul to render a panel that follows
+            // the pointer while a dnd session is on.
+            if (!this._dndPanel) {
+              this._dndCanvas = canvas;
+              this._dndPanel = document.createElement("panel");
+              this._dndPanel.className = "dragfeedback-tab";
+              this._dndPanel.setAttribute("type", "drag");
+              let wrapper = document.createElementNS("http://www.w3.org/1999/xhtml", "div");
+              wrapper.style.width = "160px";
+              wrapper.style.height = "90px";
+              wrapper.appendChild(canvas);
+              this._dndPanel.appendChild(wrapper);
+              document.documentElement.appendChild(this._dndPanel);
+            }
+            toDrag = this._dndPanel;
           }
           // PageThumb is async with e10s but that's fine
-          // since we can update the panel during the dnd.
-          PageThumbs.captureToCanvas(browser, canvas);
-          toDrag = this._dndPanel;
+          // since we can update the image during the dnd.
+          PageThumbs.captureToCanvas(browser, canvas, captureListener);
         } else {
           // For the non e10s case we can just use PageThumbs
-          // sync. No need for xul magic, the native dnd will
-          // be fine, so let's use the canvas for setDragImage.
+          // sync, so let's use the canvas for setDragImage.
           PageThumbs.captureToCanvas(browser, canvas);
-          toDrag = canvas;
           dragImageOffset = dragImageOffset * scale;
         }
         dt.setDragImage(toDrag, dragImageOffset, dragImageOffset);