Bug 1733639 - Use toBlob instead of toDataURL. r=Gijs

Differential Revision: https://phabricator.services.mozilla.com/D127303
sylvestre · Oct 14, 2021 · cc86983 · cc86983
1 parent 72d9ef1
commit cc86983
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/browser/components/screenshots/content/screenshots.html b/browser/components/screenshots/content/screenshots.html
@@ -6,7 +6,7 @@
   <head>
     <meta charset="utf-8">
     <title></title>
-    <meta http-equiv="Content-Security-Policy" content="default-src chrome:;img-src data:; object-src 'none'">
+    <meta http-equiv="Content-Security-Policy" content="default-src chrome:;img-src blob:; object-src 'none'">
 
     <link rel="localization" href="browser/screenshots.ftl">
 
@@ -33,7 +33,6 @@
         </div>
         <div class="preview-image">
           <div id="preview-image-div" class="preview-image-area">
-            <img id="placeholder-image"/>
           </div>
         </div>
       </div>

diff --git a/browser/components/screenshots/content/screenshots.js b/browser/components/screenshots/content/screenshots.js
@@ -50,6 +50,7 @@ class ScreenshotsUI extends HTMLElement {
     let browsingContext = BrowsingContext.get(browsingContextId);
     let win = browsingContext.top.embedderElement.ownerGlobal;
     Services.obs.notifyObservers(win, "toggle-screenshot-disable", "false");
+    URL.revokeObjectURL(document.getElementById("placeholder-image").src);
     window.close();
   }
 
@@ -102,10 +103,11 @@ class ScreenshotsUI extends HTMLElement {
       // add the download to the download list in the Downloads list in the Browser UI
       list.add(download);
 
-      this.close();
-
       // Await successful completion of the save via the download manager
       await download.start();
+
+      // need to close after download because blob url is revoked on close
+      this.close();
     } catch (ex) {}
   }
 
@@ -203,8 +205,15 @@ class ScreenshotsUI extends HTMLElement {
 
     context.drawImage(snapshot, 0, 0);
 
-    let imgEle = this.ownerDocument.getElementById("placeholder-image");
-    imgEle.src = canvas.toDataURL();
+    canvas.toBlob(function(blob) {
+      let newImg = document.createElement("img");
+      let url = URL.createObjectURL(blob);
+
+      newImg.setAttribute("id", "placeholder-image");
+
+      newImg.src = url;
+      document.getElementById("preview-image-div").appendChild(newImg);
+    });
 
     snapshot.close();
   }