Introduce a button to toggle hiding/showing of the details in the events tab.

chrome/browser/resources/sync_internals/events.js

Index: chrome/browser/resources/sync_internals/events.js
diff --git a/chrome/browser/resources/sync_internals/events.js b/chrome/browser/resources/sync_internals/events.js
index 0cda0860a6c521b6e6e31fc79c06bab09677f89f..aad1adc51f4175644864851a65fe88a225f43fac 100644
--- a/chrome/browser/resources/sync_internals/events.js
+++ b/chrome/browser/resources/sync_internals/events.js
@@ -3,6 +3,15 @@
 // found in the LICENSE file.
 
 (function() {
+function toggleDisplayDetails() {
+  var detailsNode = this.parentNode.getElementsByClassName('details')[0];
+  if (detailsNode.style.display == 'block') {
+    detailsNode.style.display = 'none';

[rlarocque, 2013/11/04 23:21:49]

I think I'd prefer to have this manipulated via a CSS class, rather than
modifying the style directly.  That's probably a more "hygenic" way to do it. 
In theory, the JavaScript shouldn't be tied this closely to the display /
layout.

It probably doesn't matter in this case, though.

I'll defer to Kamil for style advice on this one.

[kjiwa, 2013/11/04 23:47:26]

A CSS class is preferable. With one you can implement this as:

/* in your CSS file */
.hidden {
  display: none;
}

// in your JS
if (detailsNode.classList.contains('hidden')) {
  detailsNode.classList.remove('hidden');
} else {
  detailsNode.classList.add('hidden');
}

+  } else {
+    detailsNode.style.display = 'block';
+  }
+}
+
 function makeLogEntryNode(entry) {

[rlarocque, 2013/11/04 23:21:49]

nit: I think the style

var makeLogEntryNode = function(entry) {
...
}

is preferred.  I realize this isn't your fault, but you're welcome to clean up
this (and other function definitions) while you're modifying this file anyway.

   var timeNode = document.createElement('td');
   timeNode.textContent = entry.date;
@@ -15,7 +24,13 @@ function makeLogEntryNode(entry) {
 
   var details = document.createElement('pre');
   details.textContent = JSON.stringify(entry.details, null, 2);
+  details.style.display = 'none';
+  details.className = 'details';
+  var detailsToggleButton = document.createElement('button');
+  detailsToggleButton.addEventListener('click', toggleDisplayDetails, false);
+  detailsToggleButton.textContent = 'Show/Hide Details';
   var detailsNode = document.createElement('td');
+  detailsNode.appendChild(detailsToggleButton);
   detailsNode.appendChild(details);
 
   var node = document.createElement('tr');