Use canvas.drawWindow when it is available

mozilla-services · Feb 17, 2017 · b2c3b5a · b2c3b5a
1 parent 4a913d7
commit b2c3b5a
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 15 deletions.
diff --git a/webextension/background/takeshot.js b/webextension/background/takeshot.js
@@ -8,20 +8,26 @@ window.takeshot = (function () {
     let { captureType, captureText, scroll, selectedPos, shotId, shot } = options;
     shot = new Shot(main.getBackend(), shotId, shot);
     shot.deviceId = auth.getDeviceId();
-    screenshotPage(selectedPos, scroll).then((dataUrl) => {
-      shot.addClip({
-        createdDate: Date.now(),
-        image: {
-          url: dataUrl,
-          captureType,
-          text: captureText,
-          location: selectedPos,
-          dimensions: {
-            x: selectedPos.right - selectedPos.left,
-            y: selectedPos.bottom - selectedPos.top
+    let capturePromise = Promise.resolve();
+    if (! shot.clipNames().length) {
+      // canvas.drawWindow isn't available, so we fall back to captureVisibleTab
+      capturePromise = screenshotPage(selectedPos, scroll).then((dataUrl) => {
+        shot.addClip({
+          createdDate: Date.now(),
+          image: {
+            url: dataUrl,
+            captureType,
+            text: captureText,
+            location: selectedPos,
+            dimensions: {
+              x: selectedPos.right - selectedPos.left,
+              y: selectedPos.bottom - selectedPos.top
+            }
           }
-        }
+        });
       });
+    }
+    capturePromise.then(() => {
       return uploadShot(shot);
     }).then(() => {
       let id = makeUuid();
@@ -33,7 +39,6 @@ window.takeshot = (function () {
         message: "The link to your shot has been copied to the clipboard"
       });
       chrome.tabs.create({url: shot.viewUrl});
-      console.log("Accomplished my goal", JSON.stringify(shot.asJson()).length);
     }).catch((e) => {
       // FIXME: report
       console.error("Error uploading shot:", e);

diff --git a/webextension/selector/shooter.js b/webextension/selector/shooter.js
@@ -1,4 +1,4 @@
-/* globals callBackground, documentMetadata, uicontrol, util */
+/* globals callBackground, documentMetadata, uicontrol, util, ui */
 /* globals XMLHttpRequest, window, location, alert, console, domainFromUrl, randomString */
 /* globals document, setTimeout, location */
 
@@ -14,8 +14,47 @@ window.shooter = (function () { // eslint-disable-line no-unused-vars
     uicontrol.deactivate();
   };
 
+  function screenshotPage(selectedPos) {
+    let height = selectedPos.bottom - selectedPos.top;
+    let width = selectedPos.right - selectedPos.left;
+    let canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
+    canvas.width = width * window.devicePixelRatio;
+    canvas.height = height * window.devicePixelRatio;
+    let ctx = canvas.getContext('2d');
+    if (! ctx.drawWindow) {
+      return null;
+    }
+    if (window.devicePixelRatio !== 1) {
+      ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+    }
+    ui.iframe.hide();
+    try {
+      ctx.drawWindow(window, selectedPos.left, selectedPos.top, width, height, "#fff");
+    } finally {
+      ui.iframe.unhide();
+    }
+    return canvas.toDataURL();
+  }
+
   exports.takeShot = function (captureType, selectedPos) {
+    selectedPos = selectedPos.asJson();
     let captureText = util.captureEnclosedText(selectedPos);
+    let dataUrl = screenshotPage(selectedPos);
+    if (dataUrl) {
+      shot.addClip({
+        createdDate: Date.now(),
+        image: {
+          url: dataUrl,
+          captureType,
+          text: captureText,
+          location: selectedPos,
+          dimensions: {
+            x: selectedPos.right - selectedPos.left,
+            y: selectedPos.bottom - selectedPos.top
+          }
+        }
+      });
+    }
     callBackground("takeShot", {
       captureType,
       captureText,
@@ -25,7 +64,7 @@ window.shooter = (function () { // eslint-disable-line no-unused-vars
         innerHeight: window.innerHeight,
         innerWidth: window.innerWidth
       },
-      selectedPos: selectedPos.asJson(),
+      selectedPos,
       shotId: shot.id,
       shot: shot.asJson()
     });

diff --git a/webextension/selector/ui.js b/webextension/selector/ui.js
@@ -118,6 +118,14 @@ window.ui = (function () { // eslint-disable-line no-unused-vars
       });
     },
 
+    hide: function () {
+      this.element.style.display = "none";
+    },
+
+    unhide: function () {
+      this.element.style.display = "";
+    },
+
     updateElementSize: function (force) {
       // Note: if someone sizes down the page, then the iframe will keep the
       // document from naturally shrinking.  We use force to temporarily hide