Bug 1624054 - break apart the raw candidate table in about:webrtc;r=bwc

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

--HG--
extra : moz-landing-system : lando

toolkit/content/aboutwebrtc/aboutWebrtc.js

@@ -780,23 +780,26 @@ ICEStats.prototype = {
   },
 
   renderRawICECandidates() {
-    let div = document.createElement("div");
-
-    let tbody = [];
-    let rows = this.generateRawICECandidates();
-    for (let row of rows) {
-      tbody.push([row.local, row.remote]);
+    const div = document.createElement("div");
+    const candidates = direction => {
+      return [
+        ...new Set(
+          direction == "local"
+            ? this._report.rawLocalCandidates.sort()
+            : this._report.rawRemoteCandidates.sort()
+        ),
+      ]
+        .filter(i => `${i}` != "")
+        .map(i => [i]);
+    };
+    for (const direction of ["local", "remote"]) {
+      const statsTable = new SimpleTable(
+        [getString(`raw_${direction}_candidate`)],
+        candidates(direction)
+      ).render();
+      statsTable.className = "raw-candidate";
+      div.appendChild(statsTable);
     }
-
-    let statsTable = new SimpleTable(
-      [getString("raw_local_candidate"), getString("raw_remote_candidate")],
-      tbody
-    ).render();
-
-    // we want different formatting on the raw stats table (namely, left-align)
-    statsTable.className = "raw-candidate";
-    div.appendChild(statsTable);
-
     return div;
   },
 
@@ -818,29 +821,6 @@ ICEStats.prototype = {
     return section;
   },
 
-  generateRawICECandidates() {
-    let rows = [];
-    let row;
-
-    let rawLocals = this._report.rawLocalCandidates.sort();
-    // add to a Set (to remove duplicates) because some of these come from
-    // candidates in use and some come from the raw trickled candidates
-    // received that may have been dropped because no stream was found or
-    // they were for a component id that was too high.
-    let rawRemotes = [...new Set(this._report.rawRemoteCandidates)].sort();
-    let rowCount = Math.max(rawLocals.length, rawRemotes.length);
-    for (var i = 0; i < rowCount; i++) {
-      let rawLocal = rawLocals[i];
-      let rawRemote = rawRemotes[i];
-      row = {
-        local: rawLocal || "",
-        remote: rawRemote || "",
-      };
-      rows.push(row);
-    }
-    return rows;
-  },
-
   renderIceMetric(labelName, value) {
     let info = document.createElement("div");