Bug 1175794 - Use task with setTimeout and send messages to continuously update PageInfo Media tab. r=florian

browser/base/content/content.js

@@ -14,6 +14,7 @@ Cu.import("resource:///modules/ContentWebRTC.jsm");
 Cu.import("resource:///modules/ContentObservers.jsm");
 Cu.import("resource://gre/modules/InlineSpellChecker.jsm");
 Cu.import("resource://gre/modules/InlineSpellCheckerContent.jsm");
+Cu.import("resource://gre/modules/Task.jsm");
 
 XPCOMUtils.defineLazyModuleGetter(this, "BrowserUtils",
   "resource://gre/modules/BrowserUtils.jsm");
@@ -879,8 +880,7 @@ let PageInfoListener = {
     sendAsyncMessage("PageInfo:data", pageInfoData);
 
     // Separate step so page info dialog isn't blank while waiting for this to finish.
-    let pageInfoMediaData = {imageViewRows: this.getMediaInfo(document, window, strings)};
-    sendAsyncMessage("PageInfo:mediaData", pageInfoMediaData);
+    this.getMediaInfo(document, window, strings);
   },
 
   getMetaInfo: function(document) {
@@ -965,7 +965,7 @@ let PageInfoListener = {
   getMediaInfo: function(document, window, strings)
   {
     let frameList = this.goThroughFrames(document, window);
-    return this.processFrames(document, frameList, strings);
+    Task.spawn(() => this.processFrames(document, frameList, strings));
   },
 
   goThroughFrames: function(document, window)
@@ -982,21 +982,29 @@ let PageInfoListener = {
     return frameList;
   },
 
-  processFrames: function(document, frameList, strings)
+  processFrames: function*(document, frameList, strings)
   {
-    let imageViewRows = [];
+    let nodeCount = 0;
     for (let doc of frameList) {
       let iterator = doc.createTreeWalker(doc, content.NodeFilter.SHOW_ELEMENT);
 
+      // Goes through all the elements on the doc. imageViewRows takes only the media elements.
       while (iterator.nextNode()) {
         let mediaNode = this.getMediaNode(document, strings, iterator.currentNode);
 
         if (mediaNode) {
-          imageViewRows.push(mediaNode);
+          sendAsyncMessage("PageInfo:mediaData",
+                           {imageViewRow: mediaNode, isComplete: false});
+        }
+
+        if (++nodeCount % 500 == 0) {
+          // setTimeout every 500 elements so we don't keep blocking the content process.
+          yield new Promise(resolve => setTimeout(resolve, 10));
         }
       }
     }
-    return imageViewRows;
+    // Send that page info media fetching has finished.
+    sendAsyncMessage("PageInfo:mediaData", {isComplete: true});
   },
 
   getMediaNode: function(document, strings, elem)

browser/base/content/pageinfo/pageInfo.js

@@ -364,7 +364,7 @@ function loadPageInfo(frameOuterWindowID)
   mm.sendAsyncMessage("PageInfo:getData", {strings: gStrings,
                       frameOuterWindowID: frameOuterWindowID});
 
-  let pageInfoData = null;
+  let pageInfoData;
 
   // Get initial pageInfoData needed to display the general, feeds, permission and security tabs.
   mm.addMessageListener("PageInfo:data", function onmessage(message) {
@@ -389,12 +389,22 @@ function loadPageInfo(frameOuterWindowID)
   });
 
   // Get the media elements from content script to setup the media tab.
-  mm.addMessageListener("PageInfo:mediaData", function onmessage(message){
-    mm.removeMessageListener("PageInfo:mediaData", onmessage);
-    makeMediaTab(message.data.imageViewRows);
+  mm.addMessageListener("PageInfo:mediaData", function onmessage(message) {
+    // Page info window was closed.
+    if (window.closed) {
+      mm.removeMessageListener("PageInfo:mediaData", onmessage);
+      return;
+    }
 
-    // Loop through onFinished and execute the functions on it.
-    onFinished.forEach(function(func) { func(pageInfoData); });
+    // The page info media fetching has been completed.
+    if (message.data.isComplete) {
+      mm.removeMessageListener("PageInfo:mediaData", onmessage);
+      onFinished.forEach(function(func) { func(pageInfoData); });
+      return;
+    }
+
+    addImage(message.data.imageViewRow);
+    selectImage();
   });
 
   /* Call registered overlay init functions */
@@ -580,18 +590,10 @@ function makeGeneralTab(metaViewRows, docInfo)
   });
 }
 
-function makeMediaTab(imageViewRows)
+function addImage(imageViewRow)
 {
-  // Call addImage passing in the image rows to add to the view on the Media Tab.
-  for (let image of imageViewRows) {
-    let [url, type, alt, elem, isBg] = image;
-    addImage(url, type, alt, elem, isBg);
-  }
-  selectImage();
-}
+  let [url, type, alt, elem, isBg] = imageViewRow;
 
-function addImage(url, type, alt, elem, isBg)
-{
   if (!url)
     return;