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

chrome/browser/resources/sync_internals/events.js

 // Copyright (c) 2011 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.
 
 (function() {
 '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');
 
 var entries = chrome.sync.log.entries;
 var displaySyncEvents = function() {
   var eventTemplateContext = {
     eventList: entries,
   };
   var context = new JsEvalContext(eventTemplateContext);
   jstProcess(context, syncEvents);
-}
+};
 
 syncEvents.addEventListener('click', toggleDisplay);
 chrome.sync.log.addEventListener('append', function(event) {
   displaySyncEvents();
 });
 })();