Fix #3481, add setting to control binary or base64 upload

This adds $SCREENSHOTS_UPLOAD_BINARY=true to turn the feature on.

.env.dev

@@ -11,5 +11,6 @@ LOG_LEVEL=debug
 #SET_CACHE=true
 LOCALHOST_SSL=""
 
-USER_SETTINGS=true;
-ENABLE_ANNOTATIONS=true;
+USER_SETTINGS=true
+ENABLE_ANNOTATIONS=true
+SCREENSHOTS_UPLOAD_BINARY=true

addon/webextension/background/takeshot.js

@@ -1,4 +1,4 @@
-/* globals communication, shot, main, auth, catcher, analytics */
+/* globals communication, shot, main, auth, catcher, analytics, buildSettings */
 
 "use strict";
 
@@ -31,9 +31,15 @@ this.takeshot = (function() {
         });
       });
     }
-    if (!imageBlob) {
+    let convertBlobPromise = Promise.resolve();
+    if (buildSettings.uploadBinary && !imageBlob) {
       imageBlob = base64ToBinary(shot.getClip(shot.clipNames()[0]).image.url);
       shot.getClip(shot.clipNames()[0]).image.url = "";
+    } else if (!buildSettings.uploadBinary && imageBlob) {
+      convertBlobPromise = blobToDataUrl(imageBlob).then((dataUrl) => {
+        shot.getClip(shot.clipNames()[0]).image.url = dataUrl;
+      });
+      imageBlob = null;
     }
     let shotAbTests = {};
     let abTests = auth.getAbTests();
@@ -46,6 +52,8 @@ this.takeshot = (function() {
       shot.abTests = shotAbTests;
     }
     return catcher.watchPromise(capturePromise.then(() => {
+      return convertBlobPromise;
+    }).then(() => {
       return browser.tabs.create({url: shot.creatingUrl})
     }).then((tab) => {
       openedTab = tab;
@@ -119,6 +127,10 @@ this.takeshot = (function() {
     return blob;
   }
 
+  function binaryToDataUrl(blob) {
+
+  }
+
   /** Combines two buffers or Uint8Array's */
   function concatBuffers(buffer1, buffer2) {
     var tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength);
@@ -138,6 +150,16 @@ this.takeshot = (function() {
     });
   }
 
+  function blobToDataUrl(blob) {
+    return new Promise((resolve, reject) => {
+      let reader = new FileReader();
+      reader.addEventListener("loadend", function() {
+        resolve(reader.result);
+      });
+      reader.readAsDataURL(blob);
+    });
+  }
+
   /** Creates a multipart TypedArray, given {name: value} fields
       and {name: blob} files
 
@@ -176,10 +198,17 @@ this.takeshot = (function() {
     let headers;
     return auth.authHeaders().then((_headers) => {
       headers = _headers;
-      return createMultipart(
-        {shot: JSON.stringify(shot.asJson())},
-        "blob", "screenshot.png", blob
-      );
+      if (blob) {
+        return createMultipart(
+          {shot: JSON.stringify(shot.asJson())},
+          "blob", "screenshot.png", blob
+        );
+      } else {
+        return {
+          "content-type": "application/json",
+          body: JSON.stringify(shot.asJson())
+        };
+      }
     }).then((submission) => {
       headers["content-type"] = submission["content-type"];
       sendEvent("upload", "started", {eventValue: Math.floor(submission.body.length / 1000)});

addon/webextension/buildSettings.js.template

@@ -1,6 +1,7 @@
 window.buildSettings = {
   defaultSentryDsn: process.env.SCREENSHOTS_SENTRY,
   logLevel: process.env.SCREENSHOTS_LOG_LEVEL || "warn",
-  captureText: (process.env.SCREENSHOTS_CAPTURE_TEXT === "true")
+  captureText: (process.env.SCREENSHOTS_CAPTURE_TEXT === "true"),
+  uploadBinary: (process.env.SCREENSHOTS_UPLOAD_BINARY === "true")
 };
 null;