Put each PeerConnection into a tab on webrtc-internals

Also collapse the stats tables by default to avoid spamming page with uninteresting stats.

A screenshot of the new layout:
https://chromium.googlecode.com/issues/attachment?aid=2446480001000&name=Screenshot+from+2013-11-06+11%3A57%3A55.png&token=NZG93vkzJxi_nPIPcE5GAq9_hfI%3A1383768028226&inline=1

BUG=244648

Review URL: https://codereview.chromium.org/26852007

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@233953 0039d316-1c4b-4281-b951-d872f2087c98

6 files changed, 172 insertions, 70 deletions

diff --git a/content/browser/resources/media/stats_graph_helper.js b/content/browser/resources/media/stats_graph_helper.js
index ce9e718..1a20666 100644
--- a/content/browser/resources/media/stats_graph_helper.js
+++ b/content/browser/resources/media/stats_graph_helper.js
@@ -87,6 +87,7 @@ var statsNameBlackList = {
   'googComponent': true,
   'googLocalAddress': true,
   'googRemoteAddress': true,
+  'googFingerprint': true,
 };
 
 var graphViews = {};
diff --git a/content/browser/resources/media/stats_table.js b/content/browser/resources/media/stats_table.js
index 6b3ae52..3134847 100644
--- a/content/browser/resources/media/stats_table.js
+++ b/content/browser/resources/media/stats_table.js
@@ -56,6 +56,9 @@ var StatsTable = (function(ssrcInfoManager) {
         container = document.createElement('div');
         container.id = containerId;
         container.className = 'stats-table-container';
+        var head = document.createElement('div');
+        head.textContent = 'Stats Tables';
+        container.appendChild(head);
         peerConnectionElement.appendChild(container);
       }
       return container;
@@ -78,8 +81,14 @@ var StatsTable = (function(ssrcInfoManager) {
       var table = $(tableId);
       if (!table) {
         var container = this.ensureStatsTableContainer_(peerConnectionElement);
+        var details = document.createElement('details');
+        container.appendChild(details);
+        var summary = document.createElement('summary');
+        summary.textContent = report.id;
+        details.appendChild(summary);
+
         table = document.createElement('table');
-        container.appendChild(table);
+        details.appendChild(table);
         table.id = tableId;
         table.border = 1;
 
diff --git a/content/browser/resources/media/tab_view.js b/content/browser/resources/media/tab_view.js
new file mode 100644
index 0000000..953ec2f
--- /dev/null
+++ b/content/browser/resources/media/tab_view.js
@@ -0,0 +1,119 @@
+// Copyright 2013 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * A TabView provides the ability to create tabs and switch between tabs. It's
+ * responsible for creating the DOM and managing the visibility of each tab.
+ * The first added tab is active by default and the others hidden.
+ */
+var TabView = (function() {
+  'use strict';
+
+  /**
+   * @constructor
+   * @param {Element} root The root DOM element containing the tabs.
+   */
+  function TabView(root) {
+    this.root_ = root;
+    this.ACTIVE_TAB_HEAD_CLASS_ = 'active-tab-head';
+    this.ACTIVE_TAB_BODY_CLASS_ = 'active-tab-body';
+    this.TAB_HEAD_CLASS_ = 'tab-head';
+    this.TAB_BODY_CLASS_ = 'tab-body';
+
+    /**
+     * A mapping for an id to the tab elements.
+     * @type {!Object<string, !TabDom>}
+     * @private
+     */
+    this.tabElements_ = {};
+
+    this.headBar_ = null;
+    this.activeTabId_ = null;
+    this.initializeHeadBar_();
+  }
+
+  // Creates a simple object containing the tab head and body elements.
+  function TabDom(h, b) {
+    this.head = h;
+    this.body = b;
+  }
+
+  TabView.prototype = {
+    /**
+     * Adds a tab with the specified id and title.
+     * @param {string} id
+     * @param {string} title
+     * @return {!Element} The tab body element.
+     */
+    addTab: function(id, title) {
+      if (this.tabElements_[id])
+        throw 'Tab already exists: ' + id;
+
+      var head = document.createElement('div');
+      head.className = this.TAB_HEAD_CLASS_;
+      head.textContent = id;
+      head.title = title;
+      this.headBar_.appendChild(head);
+      head.addEventListener('click', this.switchTab_.bind(this, id));
+
+      var body = document.createElement('div');
+      body.className = this.TAB_BODY_CLASS_;
+      body.id = id;
+      this.root_.appendChild(body);
+
+      this.tabElements_[id] = new TabDom(head, body);
+
+      if (!this.activeTabId_) {
+        this.switchTab_(id);
+      }
+      return this.tabElements_[id].body;
+    },
+
+    /** Removes the tab. @param {string} id */
+    removeTab: function(id) {
+      if (!this.tabElements_[id])
+        return;
+      this.tabElements_[id].head.parentNode.removeChild(
+          this.tabElements_[id].head);
+      this.tabElements_[id].body.parentNode.removeChild(
+          this.tabElements_[id].body);
+
+      delete this.tabElements_[id];
+      if (this.activeTabId_ == id) {
+        this.switchTab_(Object.keys(this.tabElements_)[0]);
+      }
+    },
+
+    /**
+     * Switches the specified tab into view.
+     *
+     * @param {string} activeId The id the of the tab that should be switched to
+     *     active state.
+     * @private
+     */
+    switchTab_: function(activeId) {
+      if (this.activeTabId_ && this.tabElements_[this.activeTabId_]) {
+        this.tabElements_[this.activeTabId_].body.classList.remove(
+            this.ACTIVE_TAB_BODY_CLASS_);
+        this.tabElements_[this.activeTabId_].head.classList.remove(
+            this.ACTIVE_TAB_HEAD_CLASS_);
+      }
+      this.activeTabId_ = activeId;
+      if (this.tabElements_[activeId]) {
+        this.tabElements_[activeId].body.classList.add(
+            this.ACTIVE_TAB_BODY_CLASS_);
+        this.tabElements_[activeId].head.classList.add(
+            this.ACTIVE_TAB_HEAD_CLASS_);
+      }
+    },
+
+    /** Initializes the bar containing the tab heads. */
+    initializeHeadBar_: function() {
+      this.headBar_ = document.createElement('div');
+      this.root_.appendChild(this.headBar_);
+      this.headBar_.style.textAlign = 'center';
+    },
+  };
+  return TabView;
+})();
diff --git a/content/browser/resources/media/webrtc_internals.css b/content/browser/resources/media/webrtc_internals.css
index c0ac402..096a227 100644
--- a/content/browser/resources/media/webrtc_internals.css
+++ b/content/browser/resources/media/webrtc_internals.css
@@ -8,12 +8,10 @@
   padding-bottom: 3px;
 }
 
-.peer-connection-hidden > *:not(h3) {
-  display:none;
-}
-
 .update-log-container {
   float: left;
+  width: 50em;
+  overflow: auto;
 }
 
 .ssrc-info-block {
@@ -47,43 +45,19 @@
 .stats-table-container {
   float: left;
   padding: 0 0 0 0;
+  width: 50em;
+  overflow: auto;
 }
 
-body {
-  font-family: 'Lucida Grande', sans-serif;
-  padding: 20px;
-}
-
-details {
-  min-width: 30em;
-}
-
-h3 + div {
+.stats-table-container >div:first-child {
   font-size: 0.8em;
-  margin: 0 0 1.2em 0;
-}
-
-h2 {
-  border-bottom: 1px solid #eee;
-  color: #666;
-  font-size: 1.1em;
-  margin: 0 0 1.6em 0;
-  padding: 0 0 0.7em 0;
-}
-
-h3 {
-  color: #555;
-  cursor: pointer;
-  font-size: 0.9em;
-  margin: 2em 0 0.5em 0;
-  text-decoration: underline;
+  font-weight: bold;
+  text-align: center;
+  padding: 0 0 1em 0;
 }
 
-li {
-  clear: both;
-  list-style-type: none;
-  margin: none;
-  padding: none;
+body {
+  font-family: 'Lucida Grande', sans-serif;
 }
 
 table {
@@ -95,10 +69,8 @@ td {
   border: none;
   font-size: 0.8em;
   padding: 0 1em 0.5em 0;
-}
-
-td:first-child {
-  padding-top: 0.3em;
+  min-width: 10em;
+  word-break: break-all;
 }
 
 table > tr {
@@ -111,8 +83,24 @@ th {
   padding: 0 0 0.5em 0;
 }
 
-ul {
-  margin: none;
-  padding: none;
-  -webkit-padding-start: 0px;
+.tab-head {
+  background-color: rgb(220, 220, 220);
+  margin: 10px 5px 0 5px;
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+  width: 32%;
+}
+.active-tab-head {
+  background-color: turquoise;
+  font-weight: bold;
+}
+.tab-body {
+  border: 1px solid turquoise;
+  border-top-width: 3px;
+  padding: 0 10px 500px 10px;
+  display: none;
+}
+.active-tab-body {
+  display: block;
 }
diff --git a/content/browser/resources/media/webrtc_internals.html b/content/browser/resources/media/webrtc_internals.html
index 53ca9e0..b6a538f 100644
--- a/content/browser/resources/media/webrtc_internals.html
+++ b/content/browser/resources/media/webrtc_internals.html
@@ -8,10 +8,7 @@
     <script src="webrtc_internals.js"></script>
   </head>
   <body>
-    <h2>WebRTC Internals</h2>
-    <p>
-      <ul id="peer-connections-list">
-      </ul>
+    <p id='content-root'>
     </p>
   </body>
 </html>
diff --git a/content/browser/resources/media/webrtc_internals.js b/content/browser/resources/media/webrtc_internals.js
index 5bc56da..6d3cfc1 100644
--- a/content/browser/resources/media/webrtc_internals.js
+++ b/content/browser/resources/media/webrtc_internals.js
@@ -2,8 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-
-var peerConnectionsListElem = null;
+var tabView = null;
 var ssrcInfoManager = null;
 var peerConnectionUpdateTable = null;
 var statsTable = null;
@@ -79,6 +78,7 @@ var PeerConnectionRecord = (function() {
 // will be shifted out when the buffer is full.
 var MAX_STATS_DATA_POINT_BUFFER_SIZE = 1000;
 
+<include src="tab_view.js"/>
 <include src="data_series.js"/>
 <include src="ssrc_info_manager.js"/>
 <include src="stats_graph_helper.js"/>
@@ -88,8 +88,8 @@ var MAX_STATS_DATA_POINT_BUFFER_SIZE = 1000;
 
 
 function initialize() {
-  peerConnectionsListElem = $('peer-connections-list');
-  dumpCreator = new DumpCreator(peerConnectionsListElem);
+  dumpCreator = new DumpCreator($('content-root'));
+  tabView = new TabView($('content-root'));
   ssrcInfoManager = new SsrcInfoManager();
   peerConnectionUpdateTable = new PeerConnectionUpdateTable();
   statsTable = new StatsTable(ssrcInfoManager);
@@ -98,7 +98,7 @@ function initialize() {
 
   // Requests stats from all peer connections every second.
   window.setInterval(function() {
-    if (peerConnectionsListElem.getElementsByTagName('li').length > 0)
+    if (Object.keys(peerConnectionDataStore).length > 0)
       chrome.send('getAllStats');
   }, 1000);
 }
@@ -158,7 +158,7 @@ function removePeerConnection(data) {
   var element = $(getPeerConnectionId(data));
   if (element) {
     delete peerConnectionDataStore[element.id];
-    peerConnectionsListElem.removeChild(element);
+    tabView.removeTab(element.id);
   }
 }
 
@@ -180,23 +180,11 @@ function addPeerConnection(data) {
 
   var peerConnectionElement = $(id);
   if (!peerConnectionElement) {
-    peerConnectionElement = document.createElement('li');
-    peerConnectionsListElem.appendChild(peerConnectionElement);
-    peerConnectionElement.id = id;
+    peerConnectionElement = tabView.addTab(id, data.url);
   }
   peerConnectionElement.innerHTML =
-      '<h3>PeerConnection ' + peerConnectionElement.id + '</h3>' +
-      '<div>' + data.url + ' ' + data.servers + ' ' + data.constraints +
-      '</div>';
-
-  // Clicking the heading can expand or collapse the peer connection item.
-  peerConnectionElement.firstChild.title = 'Click to collapse or expand';
-  peerConnectionElement.firstChild.addEventListener('click', function(e) {
-    if (e.target.parentElement.className == '')
-      e.target.parentElement.className = 'peer-connection-hidden';
-    else
-      e.target.parentElement.className = '';
-  });
+      '<p>' + data.url + ' ' + data.servers + ' ' + data.constraints +
+      '</p>';
 
   return peerConnectionElement;
 }