trickle-ice: show url and relayProtocol if present (#1561)

* trickle-ice: show url and relayProtocol if present

note: this will work in M105+ once
  https://chromiumdash.appspot.com/commit/1fe14f2752a35932bea6d6ccff7433a6716c6391
is available

It will attempt to polyfill the url attribute from stats

Author: fippo

src/content/peerconnection/trickle-ice/css/main.css

@@ -69,3 +69,7 @@ th:nth-child(6),td:nth-child(6) {
 #error-note {
   display: none;
 }
+
+div#container {
+  max-width: 90em;
+}

src/content/peerconnection/trickle-ice/index.html

@@ -125,9 +125,11 @@ <h2>ICE options</h2>
                 <th>Address</th>
                 <th>Port</th>
                 <th>Priority</th>
+                <th>relayProtocol (if present)</th>
                 <th>Mid</th>
                 <th>MLine Index</th>
                 <th>Username Fragment</th>
+                <th>URL (if present)</th>
             </tr>
             </thead>
             <tbody id="candidatesBody"></tbody>

src/content/peerconnection/trickle-ice/js/main.js

@@ -202,9 +202,7 @@ function getFinalResult() {
     const server = JSON.parse(servers[0].value);
 
     // get the candidates types (host, srflx, relay)
-    const types = candidates.map(function(cand) {
-      return cand.type;
-    });
+    const types = candidates.map((cand) => cand.type);
 
     // If the server is a TURN server we should have a relay candidate.
     // If we did not get a relay candidate but a srflx candidate
@@ -231,7 +229,7 @@ function getFinalResult() {
   return result;
 }
 
-function iceCallback(event) {
+async function iceCallback(event) {
   const elapsed = ((window.performance.now() - begin) / 1000).toFixed(3);
   const row = document.createElement('tr');
   appendCell(row, elapsed);
@@ -240,16 +238,31 @@ function iceCallback(event) {
       return;
     }
     const {candidate} = event;
+    let url;
+    // Until url is available from the candidate, to to polyfill.
+    if (['srflx', 'relay'].includes(candidate.type) && !candidate.url) {
+      const stats = await pc.getStats();
+      stats.forEach(report => {
+        if (!url && report.type === 'local-candidate' &&
+            report.address === candidate.address &&
+            report.port === candidate.port) {
+          url = report.url;
+        }
+      });
+    }
+
     appendCell(row, candidate.component);
     appendCell(row, candidate.type);
     appendCell(row, candidate.foundation);
     appendCell(row, candidate.protocol);
     appendCell(row, candidate.address);
     appendCell(row, candidate.port);
     appendCell(row, formatPriority(candidate.priority));
+    appendCell(row, candidate.relayProtocol || '');
     appendCell(row, candidate.sdpMid);
     appendCell(row, candidate.sdpMLineIndex);
     appendCell(row, candidate.usernameFragment);
+    appendCell(row, candidate.url || url || '');
     candidates.push(candidate);
   }
   candidateTBody.appendChild(row);