Bug 1237087. Send screenshot of visible window when reporting site issues. r=sebastian, margaret

mobile/android/chrome/content/WebcompatReporter.js

@@ -59,14 +59,43 @@ var WebcompatReporter = {
     this.menuItem = NativeWindow.menu.add({
       name: this.strings.GetStringFromName("webcompat.menu.name"),
       callback: () => {
-        let currentURI = BrowserApp.selectedTab.browser.currentURI.spec;
-        this.reportIssue(currentURI);
+        Promise.resolve(BrowserApp.selectedTab).then(this.getScreenshot)
+                                               .then(this.reportIssue)
+                                               .catch(Cu.reportError);
       },
       enabled: false,
       visible: visible,
     });
   },
 
+  getScreenshot: (tab) => {
+    return new Promise((resolve) => {
+      try {
+        let win = tab.window;
+        let dpr = win.devicePixelRatio;
+        let canvas = win.document.createElement("canvas");
+        let ctx = canvas.getContext("2d");
+        // Grab the visible viewport coordinates
+        let x = win.document.documentElement.scrollLeft;
+        let y = win.document.documentElement.scrollTop;
+        let w = win.innerWidth;
+        let h = win.innerHeight;
+        // Scale according to devicePixelRatio and coordinates
+        canvas.width = dpr * w;
+        canvas.height = dpr * h;
+        ctx.scale(dpr, dpr);
+        ctx.drawWindow(win, x, y, w, h, '#ffffff');
+        let screenshot = canvas.toDataURL();
+        resolve({url: tab.browser.currentURI.spec, data: screenshot});
+      } catch (e) {
+        // drawWindow can fail depending on memory or surface size. Rather than reject here, 
+        // we resolve the URL so the user can continue to file an issue without a screenshot.
+        Cu.reportError("WebCompatReporter: getting a screenshot failed: " + e);
+        resolve({url: tab.browser.currentURI.spec});
+      }
+    });
+  },
+
   isReportableUrl: function(url) {
     return url && !(url.startsWith("about") ||
                     url.startsWith("chrome") ||
@@ -75,24 +104,38 @@ var WebcompatReporter = {
   },
 
   reportDesktopModePrompt: function() {
-    let currentURI = BrowserApp.selectedTab.browser.currentURI.spec;
     let message = this.strings.GetStringFromName("webcompat.reportDesktopMode.message");
     let options = {
       action: {
         label: this.strings.GetStringFromName("webcompat.reportDesktopModeYes.label"),
-        callback: () => this.reportIssue(currentURI)
+        callback: () => this.reportIssue({url: BrowserApp.selectedTab.browser.currentURI.spec})
       }
     };
     Snackbars.show(message, Snackbars.LENGTH_LONG, options);
   },
 
-  reportIssue: function(url) {
-    let webcompatURL = `https://webcompat.com/?open=1&url=${url}`;
-    if (PrivateBrowsingUtils.isBrowserPrivate(BrowserApp.selectedTab.browser)) {
-      BrowserApp.addTab(webcompatURL, {parentId: BrowserApp.selectedTab.id, isPrivate: true});
-    } else {
-      BrowserApp.addTab(webcompatURL);
-    }
+  reportIssue: (tabData) => {
+    return new Promise((resolve) => {
+      const WEBCOMPAT_ORIGIN = "https://webcompat.com";
+      let selectedTab = BrowserApp.selectedTab;
+      let webcompatURL = `${WEBCOMPAT_ORIGIN}/?open=1&url=${tabData.url}`;
+
+      if (tabData.data && typeof tabData.data === "string") {
+        BrowserApp.deck.addEventListener("DOMContentLoaded", function sendDataToTab(event) {
+          BrowserApp.deck.removeEventListener("DOMContentLoaded", sendDataToTab, false);
+
+          if (event.target.defaultView.location.origin === WEBCOMPAT_ORIGIN) {
+            // Waive Xray vision so event.origin is not chrome://browser on the other side.
+            let win = Cu.waiveXrays(event.target.defaultView);
+            win.postMessage(tabData.data, WEBCOMPAT_ORIGIN);
+          }
+        }, false);
+      }
+
+      let isPrivateTab = PrivateBrowsingUtils.isBrowserPrivate(selectedTab.browser);
+      BrowserApp.addTab(webcompatURL, {parentId: selectedTab.id, isPrivate: isPrivateTab});
+      resolve();
+    });
   }
 };