Bug 1818610 - add refresh button to peerconnection entries in about:webrtc;r=mjf,fluent-reviewers,flod

Depends on D181934

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

toolkit/content/aboutwebrtc/aboutWebrtc.mjs

@@ -403,6 +403,11 @@ class ShowTab extends Control {
   const content = document.querySelector("#content");
   content.append(peerConnections, connectionLog, userPrefs);
 
+  // Adding a pcid to this list will cause the stats for that list to be refreshed
+  // on the next update interval. This is useful for one time refreshes like the
+  // "Refresh" button. The list is cleared at the end of each refresh interval.
+  const forceRefreshList = [];
+
   // This does not handle the auto-refresh, only the manual refreshes needed
   // for certain user actions, and the initial population of the data
   function refresh() {
@@ -423,7 +428,9 @@ class ShowTab extends Control {
           "about-webrtc-stats-clear"
         ),
       ]),
-      ...reports.map(renderPeerConnection),
+      ...reports.map(r =>
+        renderPeerConnection(r, () => forceRefreshList.push(r.pcid))
+      ),
     ]);
     const logDiv = renderElements("div", { className: "log" }, [
       renderElements("span", { className: "section-heading" }, [
@@ -467,8 +474,11 @@ class ShowTab extends Control {
     return frag;
   }
 
+  // Used by the renderTransportStats function to calculate stat deltas
+  const hist = {};
+  // This handles autorefresh and forced refresh, not initial document loading
   window.setInterval(
-    async hist => {
+    async () => {
       const statReports = await getStats();
       const rndr = elemRenderer;
 
@@ -485,7 +495,8 @@ class ShowTab extends Control {
           statReports
             .filter(
               ({ pcid }) =>
-                document.getElementById(`autorefresh-${pcid}`)?.checked
+                document.getElementById(`autorefresh-${pcid}`)?.checked ||
+                forceRefreshList.includes(pcid)
             )
             .flatMap(report => [
               translateSection(report, "ice-stats", renderICEStats),
@@ -506,9 +517,12 @@ class ShowTab extends Control {
         element.replaceWith(translated);
       }
       document.l10n.resumeObserving();
+      while (forceRefreshList.length) {
+        forceRefreshList.pop();
+      }
     },
     250,
-    {}
+    null
   );
 })();
 
@@ -524,13 +538,13 @@ function renderCopyTextToClipboardButton(rndr, id, l10n_id, getTextFn) {
   );
 }
 
-function renderPeerConnection(report) {
+function renderPeerConnection(report, forceRefreshFn) {
   const rndr = elemRenderer;
   const { pcid, configuration } = report;
   const pcStats = report.peerConnectionStats[0];
 
   const pcDiv = renderElement("div", { className: "peer-connection" });
-  pcDiv.append(renderPeerConnectionTools(rndr, report));
+  pcDiv.append(renderPeerConnectionTools(rndr, report, forceRefreshFn));
   {
     const section = renderFoldableSection(pcDiv);
     section.append(
@@ -575,7 +589,7 @@ function renderPeerConnection(report) {
   return pcDiv;
 }
 
-function renderPeerConnectionTools(rndr, report) {
+function renderPeerConnectionTools(rndr, report, forceRefreshFn) {
   const { pcid, timestamp, closed: isClosed, browserId } = report;
   const id = pcid.match(/id=(\S+)/)[1];
   const url = pcid.match(/url=([^)]+)/)[1];
@@ -604,6 +618,15 @@ function renderPeerConnectionTools(rndr, report) {
     type: "checkbox",
     checked: Services.prefs.getBoolPref("media.aboutwebrtc.auto_refresh"),
   });
+  const forceRefreshButton = rndr.elem_button(
+    {
+      id: `force-refresh-pc-${id}`,
+      onclick() {
+        forceRefreshFn();
+      },
+    },
+    "about-webrtc-force-refresh-button"
+  );
   const autorefreshLabel = rndr.elem_label(
     {},
     "about-webrtc-auto-refresh-label"
@@ -630,6 +653,7 @@ function renderPeerConnectionTools(rndr, report) {
       () => JSON.stringify({ ...report }, null, 2)
     ),
     ...copyHistButton,
+    forceRefreshButton,
     autorefreshButton,
     autorefreshLabel,
   ]);

toolkit/locales/en-US/toolkit/about/aboutWebrtc.ftl

@@ -27,6 +27,10 @@ about-webrtc-auto-refresh-label = Auto Refresh
 # Determines the default state of the Auto Refresh check boxes
 about-webrtc-auto-refresh-default-label = Auto Refresh By Default
 
+# A button which forces a refresh of displayed statistics
+about-webrtc-force-refresh-button = Refresh
+
+
 # "PeerConnection" is a proper noun associated with the WebRTC module. "ID" is
 # an abbreviation for Identifier. This string should not normally be translated
 # and is used as a data label.