net-internals: Use jstemplate for QUIC view.

Review URL: https://chromiumcodereview.appspot.com/14273027

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

2 files changed, 31 insertions, 78 deletions

diff --git a/chrome/browser/resources/net_internals/quic_view.html b/chrome/browser/resources/net_internals/quic_view.html
index 3ef4ac2..4ad7e97 100644
--- a/chrome/browser/resources/net_internals/quic_view.html
+++ b/chrome/browser/resources/net_internals/quic_view.html
@@ -1,24 +1,38 @@
 <div id=quic-view-tab-content class=content-box>
   <ul style='margin-top:0'>
-    <li>QUIC Enabled: <span id=quic-view-enabled-span>????</span></li>
-    <li>Use SPDY over QUIC: <span id=quic-view-use-spdy-over-quic-span>????</span></li>
-    <li>Origin Port To Force QUIC On: <span id=quic-view-force-port-span>????</span></li>
+    <li>QUIC Enabled: <span jscontent="!!quic_enabled"></span></li>
+    <li>Use SPDY over QUIC: <span jscontent="!!$this.use_spdy_over_quic"></span></li>
+    <li>Origin Port To Force QUIC On: <span jscontent="origin_port_to_force_quic_on"></span></li>
   </ul>
 
   <h4>QUIC sessions</h4>
     <!-- Only one of these two are shown -->
-    <span id=quic-view-session-none-span>None</span>
-    <span id=quic-view-session-link-span style="display: none;">
+    <div jsdisplay="!($this.sessions && sessions.length > 0)">None</div>
+    <div jsdisplay="$this.sessions && sessions.length > 0">
       <a href="#events&q=type:QUIC_SESSION%20is:active">View live QUIC sessions</a>
-    </span>
-  <p>
-    <div id=quic-view-session-div>
+      <p>
+        <table class="styled-table">
+          <thead>
+            <tr>
+              <th>Host</th>
+              <th>Peer address</th>
+              <th>GUID</th>
+              <th>Active streams</th>
+              <th>Total streams</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr jsselect="sessions">
+              <td><span jscontent="host_port_pair"></span>
+                  <span jscontent="$this.aliases ? $this.aliases.join(' ') : ''">
+              </td>
+              <td jscontent="peer_address"></td>
+              <td jscontent="guid"></td>
+              <td jscontent="open_streams"></td>
+              <td jscontent="total_streams"></td>
+            </tr>
+          </tbody>
+        </table>
+      </p>
     </div>
-  </p>
-
-  <h4>Alternate Protocol Mappings</h4>
-  <p>
-    <div id=quic-view-alternate-protocol-mappings-div>
-    </div>
-  </p>
 </div>
diff --git a/chrome/browser/resources/net_internals/quic_view.js b/chrome/browser/resources/net_internals/quic_view.js
index ea08478..7cd8490 100644
--- a/chrome/browser/resources/net_internals/quic_view.js
+++ b/chrome/browser/resources/net_internals/quic_view.js
@@ -22,14 +22,6 @@ var QuicView = (function() {
     superClass.call(this, QuicView.MAIN_BOX_ID);
 
     g_browser.addQuicInfoObserver(this, true);
-
-    this.quicEnabledSpan_ = $(QuicView.ENABLED_SPAN_ID);
-    this.quicUseSpdyOverQuicSpan_ = $(QuicView.USE_SPDY_OVER_QUIC_SPAN_ID);
-    this.quicForcePortSpan_ = $(QuicView.FORCE_PORT_SPAN_ID);
-
-    this.quicSessionNoneSpan_ = $(QuicView.SESSION_NONE_SPAN_ID);
-    this.quicSessionLinkSpan_ = $(QuicView.SESSION_LINK_SPAN_ID);
-    this.quicSessionDiv_ = $(QuicView.SESSION_DIV_ID);
   }
 
   QuicView.TAB_ID = 'tab-handle-quic';
@@ -38,12 +30,6 @@ var QuicView = (function() {
 
   // IDs for special HTML elements in quic_view.html
   QuicView.MAIN_BOX_ID = 'quic-view-tab-content';
-  QuicView.ENABLED_SPAN_ID = 'quic-view-enabled-span';
-  QuicView.USE_SPDY_OVER_QUIC_SPAN_ID = 'quic-view-use-spdy-over-quic-span';
-  QuicView.FORCE_PORT_SPAN_ID = 'quic-view-force-port-span';
-  QuicView.SESSION_NONE_SPAN_ID = 'quic-view-session-none-span';
-  QuicView.SESSION_LINK_SPAN_ID = 'quic-view-session-link-span';
-  QuicView.SESSION_DIV_ID = 'quic-view-session-div';
 
   cr.addSingletonGetter(QuicView);
 
@@ -60,60 +46,13 @@ var QuicView = (function() {
      * information on each QUIC session.  Otherwise, displays "None".
      */
     onQuicInfoChanged: function(quicInfo) {
-      this.quicSessionDiv_.innerHTML = '';
-
-      var hasNoSession =
-          (!quicInfo || !quicInfo.sessions || quicInfo.sessions.length == 0);
-      setNodeDisplay(this.quicSessionNoneSpan_, hasNoSession);
-      setNodeDisplay(this.quicSessionLinkSpan_, !hasNoSession);
-
-      // Only want to be hide the tab if there's no data.  In the case of having
-      // data but no sessions, still show the tab.
       if (!quicInfo)
         return false;
-
-      this.quicEnabledSpan_.textContent = !!quicInfo.quic_enabled;
-      this.quicUseSpdyOverQuicSpan_.textContent = !!quicInfo.use_spdy_over_quic;
-      this.quicForcePortSpan_.textContent =
-          quicInfo.origin_port_to_force_quic_on;
-
-      if (!hasNoSession) {
-        var tablePrinter = createSessionTablePrinter(quicInfo.sessions);
-        tablePrinter.toHTML(this.quicSessionDiv_, 'styled-table');
-      }
-
+      var input = new JsEvalContext(quicInfo);
+      jstProcess(input, $(QuicView.MAIN_BOX_ID));
       return true;
     },
   };
 
-  /**
-   * Creates a table printer to print out the state of list of QUIC sessions.
-   */
-  function createSessionTablePrinter(quicSessions) {
-    var tablePrinter = new TablePrinter();
-
-    tablePrinter.addHeaderCell('Host');
-    tablePrinter.addHeaderCell('Peer address');
-    tablePrinter.addHeaderCell('GUID');
-    tablePrinter.addHeaderCell('Active streams');
-    tablePrinter.addHeaderCell('Total streams');
-
-    for (var i = 0; i < quicSessions.length; i++) {
-      var session = quicSessions[i];
-      tablePrinter.addRow();
-
-      var host = session.host_port_pair;
-      if (session.aliases)
-        host += ' ' + session.aliases.join(' ');
-      tablePrinter.addCell(host);
-
-      tablePrinter.addCell(session.peer_address);
-      tablePrinter.addCell(session.guid);
-      tablePrinter.addCell(session.open_streams);
-      tablePrinter.addCell(session.total_streams);
-    }
-    return tablePrinter;
-  }
-
   return QuicView;
 })();