Replace the expand/collapse button with details/summary tags to have the automatic expand/collapse behavior.

BUG=


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

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

2 files changed, 15 insertions, 36 deletions

diff --git a/content/browser/resources/media/webrtc_internals.css b/content/browser/resources/media/webrtc_internals.css
index ae1c2c7..f48a722 100644
--- a/content/browser/resources/media/webrtc_internals.css
+++ b/content/browser/resources/media/webrtc_internals.css
@@ -2,22 +2,10 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-li {
-  clear: both;
-}
-
-textarea {
-  width: 100%;
-}
-
 .log-container {
   float: left;
 }
 
-.log-header-event {
-  min-width: 600px;
-}
-
 .stats-table-container {
   float: left;
   padding: 0 0 0 0;
@@ -28,8 +16,8 @@ body {
   padding: 20px;
 }
 
-button {
-  margin-left: 1em;
+details {
+  width: 30em;
 }
 
 h3 + div {
@@ -52,16 +40,12 @@ h3 {
 }
 
 li {
+  clear: both;
   list-style-type: none;
   margin: none;
   padding: none;
 }
 
-span {
-  width: 17em;
-  display: inline-block;
-}
-
 table {
   border: none;
   margin: 0 1em 1em 0;
@@ -80,6 +64,7 @@ td:first-child {
 textarea {
   border: none;
   outline: none;
+  width: 100%;
 }
 
 table > tr {
diff --git a/content/browser/resources/media/webrtc_internals.js b/content/browser/resources/media/webrtc_internals.js
index c624f18f..af29ac9 100644
--- a/content/browser/resources/media/webrtc_internals.js
+++ b/content/browser/resources/media/webrtc_internals.js
@@ -62,29 +62,23 @@ function addToPeerConnectionLog(logElement, update) {
   logElement.appendChild(row);
 
   var expandable = (update.value.length > 0);
-  row.innerHTML = '<td>' + (new Date()).toLocaleString() + '</td>' +
-                  '<td><span>' + update.type + '</span>' +
-                  (expandable ? '<button>Expand/Collapse</button>' : '') +
-                  '</td>';
+  // details.open is true initially so that we can get the real scrollHeight
+  // of the textareas.
+  row.innerHTML =
+      '<td>' + (new Date()).toLocaleString() + '</td>' +
+      (expandable ?
+          '<td><details open><summary>' + update.type + '</summary>' +
+              '</details></td>' :
+          '<td>' + update.type + '</td>');
   if (!expandable)
     return;
 
   var valueContainer = document.createElement('textarea');
-  row.cells[1].appendChild(valueContainer);
+  var details = row.cells[1].childNodes[0];
+  details.appendChild(valueContainer);
   valueContainer.value = update.value;
   valueContainer.style.height = valueContainer.scrollHeight + 'px';
-  valueContainer.style.display = 'none';
-
-  // Hide or reveal the update details on clicking the button.
-  row.cells[1].childNodes[1].addEventListener('click', function(event) {
-      var element = event.target.nextSibling;
-      if (element.style.display == 'none') {
-        element.style.display = 'block';
-      }
-      else {
-        element.style.display = 'none';
-      }
-  });
+  details.open = false;
 }
 
 // Ensure the DIV container for the stats tables is created as a child of