[Sync] Make about:sync events page more selection friendly

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 25b9ba48c73138d1b9e94d888756691605b75812..b5c406fc92c7d12f89fd1495756094bd193edf55 100644
--- a/chrome/browser/resources/sync_internals/events.js
+++ b/chrome/browser/resources/sync_internals/events.js
@@ -6,15 +6,33 @@
 'use strict';
 var toggleDisplay = function(event) {
   var originatingButton = event.target;
+  if (originatingButton.className != 'toggleButton') {
+    return;
+  }
   var detailsNode = originatingButton.parentNode.getElementsByClassName(
       'details')[0];
+  var detailsColumn = detailsNode.parentNode;
+  var detailsRow = detailsColumn.parentNode;
 
   if (detailsNode.getAttribute('hidden') != null) {

[rlarocque, 2014/08/07 22:49:12]

hasAttribute()?

[Nicolas Zea, 2014/08/21 22:29:57]

Done.

+    for (var node in detailsRow.childNodes) {

[rlarocque, 2014/08/07 22:49:12]

Rather than iterate and change the DOM structure like this, it might make more
sense to toggle a CSS class to make these structures toggle between a normal
state and "display: none".

[Nicolas Zea, 2014/08/21 22:29:57]

Done.

+      if (detailsRow.childNodes[node].nodeType == 1) {

[rlarocque, 2014/08/07 22:49:12]

== Node.ELEMENT_NODE?

Better yet, why not just iterate over elements?
(try detailsRow.children)

[Nicolas Zea, 2014/08/21 22:29:57]

I'd still have to check the nodeType though right? the |length| attribute is
considered an element (and included in the children iterator).

Although this is a moot point now that I'm using CSS for this.

+        detailsRow.childNodes[node].setAttribute('hidden', 'hidden');

[rlarocque, 2014/08/07 22:49:12]

set value to ''?  A hidden=hidden attribute seems weird.

[Nicolas Zea, 2014/08/21 22:29:57]

Done.

+      }
+    }
+    detailsColumn.removeAttribute('hidden');
+    detailsColumn.setAttribute('colspan', 4);
     detailsNode.removeAttribute('hidden');
   } else {
     detailsNode.setAttribute('hidden', 'hidden');
+    detailsColumn.removeAttribute('colspan');
+    for (var node in detailsRow.childNodes) {
+      if (detailsRow.childNodes[node].nodeType == 1) {
+        detailsRow.childNodes[node].removeAttribute('hidden');
+      }
+    }
   }
-}
+};
 
 var syncEvents = $('sync-events');
 
@@ -25,7 +43,7 @@ var displaySyncEvents = function() {
   };
   var context = new JsEvalContext(eventTemplateContext);
   jstProcess(context, syncEvents);
-}
+};
 
 syncEvents.addEventListener('click', toggleDisplay);
 chrome.sync.log.addEventListener('append', function(event) {