Merge pull request #545 from janekptacijarabaci/devtools_eyedropper_slow_1

DevTools - Eyedropper Tool - Used "createImageBitmap(canvas.toBlob())" instead of "createImageBitmap(ctx.getImageData())"

1 files changed, 16 insertions, 14 deletions

diff --git a/devtools/server/actors/highlighters/eye-dropper.js b/devtools/server/actors/highlighters/eye-dropper.js
index a90ec22bd..bbfa2d78c 100644
--- a/devtools/server/actors/highlighters/eye-dropper.js
+++ b/devtools/server/actors/highlighters/eye-dropper.js
@@ -191,20 +191,22 @@ EyeDropper.prototype = {
   },
 
   prepareImageCapture() {
-    // Get the image data from the content window.
-    let imageData = getWindowAsImageData(this.win);
-
-    // We need to transform imageData to something drawWindow will consume. An ImageBitmap
-    // works well. We could have used an Image, but doing so results in errors if the page
-    // defines CSP headers.
-    this.win.createImageBitmap(imageData).then(image => {
-      this.pageImage = image;
-      // We likely haven't drawn anything yet (no mousemove events yet), so start now.
-      this.draw();
+    // Get the canvas from the content window.
+    let canvas = getWindowAsImageData(this.win);
+
+    canvas.toBlob(blob => {
+      // We need to transform imageData to something drawWindow will consume. An ImageBitmap
+      // works well. We could have used an Image, but doing so results in errors if the page
+      // defines CSP headers.
+      this.win.createImageBitmap(blob).then(image => {
+        this.pageImage = image;
+        // We likely haven't drawn anything yet (no mousemove events yet), so start now.
+        this.draw();
 
-      // Set an attribute on the root element to be able to run tests after the first draw
-      // was done.
-      this.getElement("root").setAttribute("drawn", "true");
+        // Set an attribute on the root element to be able to run tests after the first draw
+        // was done.
+        this.getElement("root").setAttribute("drawn", "true");
+      });
     });
   },
 
@@ -486,7 +488,7 @@ function getWindowAsImageData(win) {
   ctx.scale(scale, scale);
   ctx.drawWindow(win, win.scrollX, win.scrollY, width, height, "#fff");
 
-  return ctx.getImageData(0, 0, canvas.width, canvas.height);
+  return canvas;
 }
 
 /**