Bug 1726911 - Reload button re-renders about:third-party without reloading the page. r=Gijs

browser_aboutthirdparty.js intermittently failed because showing DOM parts was
completed before the background tasks are completed and the reload button was
not hidden.

Clicking the reload button called `location.reload()`, but it was not a good
idea because reloading the page triggers the background tasks again though
we already have the results.

This patch makes the button to re-render the DOM parts without reloading the page.

Differential Revision: https://phabricator.services.mozilla.com/D130179

toolkit/components/aboutthirdparty/content/aboutThirdParty.js

@@ -327,6 +327,13 @@ function visualizeData(aData) {
   document.getElementById("main").appendChild(mainContentFragment);
 }
 
+function clearVisualizedData() {
+  const mainDiv = document.getElementById("main");
+  while (mainDiv.firstChild) {
+    mainDiv.firstChild.remove();
+  }
+}
+
 async function collectCrashInfo() {
   const parseBigInt = maybeBigInt => {
     try {
@@ -396,10 +403,22 @@ async function onLoad() {
         return;
       }
 
+      // Add {once: true} to prevent multiple listeners from being scheduled
       const button = document.getElementById("button-reload");
-      button.addEventListener("click", () => {
-        location.reload();
-      });
+      button.addEventListener(
+        "click",
+        async event => {
+          // Update the content with data we've already collected.
+          clearVisualizedData();
+          visualizeData(await fetchData());
+          event.target.hidden = true;
+        },
+        { once: true }
+      );
+
+      // Coming here means visualizeData is completed before the background
+      // tasks are completed.  Because the page does not show full information,
+      // we show the reload button to call visualizeData again.
       button.hidden = false;
     })
     .catch(Cu.reportError);

toolkit/components/aboutthirdparty/tests/browser/browser_aboutthirdparty.js

@@ -85,16 +85,23 @@ add_task(async () => {
         { childList: true },
         () => mainDiv.childElementCount > 0
       );
+      Assert.ok(content.fetchDataDone, "onLoad() is complated.");
+    }
+
+    const reload = content.document.getElementById("button-reload");
+    if (!reload.hidden) {
+      reload.click();
+      await BrowserTestUtils.waitForMutationCondition(
+        reload,
+        { attributes: true, attributeFilter: ["hidden"] },
+        () => reload.hidden
+      );
     }
 
     Assert.ok(
       content.document.getElementById("no-data").hidden,
       "The no-data message is hidden."
     );
-    Assert.ok(
-      content.document.getElementById("button-reload").hidden,
-      "The reload button is hidden."
-    );
 
     const cards = getCardsByName(content.document, kExtensionModuleName);
     Assert.equal(cards.length, 1, "Only one card matching the module exists.");