[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..66c62028ddb2031fc114b31f84f71fbd25d25560 100644
--- a/chrome/browser/resources/sync_internals/events.js
+++ b/chrome/browser/resources/sync_internals/events.js
@@ -2,33 +2,50 @@
 // 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;
-  var detailsNode = originatingButton.parentNode.getElementsByClassName(
-      'details')[0];
+cr.define('chrome.sync.events_tab', function() {
+  'use strict';
 
-  if (detailsNode.getAttribute('hidden') != null) {
-    detailsNode.removeAttribute('hidden');
-  } else {
-    detailsNode.setAttribute('hidden', 'hidden');
-  }
-}
+  function toggleDisplay(event) {
+    var originatingButton = event.target;
+    if (originatingButton.className != 'toggle-button') {
+      return;
+    }
+    var detailsNode = originatingButton.parentNode.getElementsByClassName(
+        'details')[0];
+    var detailsColumn = detailsNode.parentNode;
+    var detailsRow = detailsColumn.parentNode;
 
-var syncEvents = $('sync-events');
+    if (detailsRow.className == 'event-row-minimized') {

[rlarocque, 2014/08/21 23:39:31]

nit:

You can have more than one className on an element.  You might be able to make
this code cleaner by taking advantage of it.  ie. Make 'minimized' a separate
class, and toggle it off and on.

See https://developer.mozilla.org/en-US/docs/Web/API/Element.classList

[Nicolas Zea, 2014/08/22 00:06:29]

Switched to classLists

+      detailsRow.className = 'event-row-expanded';
+      detailsColumn.setAttribute('colspan', 4);
+      detailsNode.removeAttribute('hidden');
+    } else {
+      detailsNode.setAttribute('hidden', '');
+      detailsColumn.removeAttribute('colspan');
+      detailsRow.className = 'event-row-minimized';
+    }
+  };
 
-var entries = chrome.sync.log.entries;
-var displaySyncEvents = function() {
-  var eventTemplateContext = {
-    eventList: entries,
+  function displaySyncEvents() {
+    var entries = chrome.sync.log.entries;
+    var eventTemplateContext = {
+      eventList: entries,
+    };
+    var context = new JsEvalContext(eventTemplateContext);
+    jstProcess(context, $('sync-events'));
   };
-  var context = new JsEvalContext(eventTemplateContext);
-  jstProcess(context, syncEvents);
-}
 
-syncEvents.addEventListener('click', toggleDisplay);
-chrome.sync.log.addEventListener('append', function(event) {
-  displaySyncEvents();
+  function onLoad() {
+    $('sync-events').addEventListener('click', toggleDisplay);
+    chrome.sync.log.addEventListener('append', function(event) {
+      displaySyncEvents();
+    });
+  }
+
+  return {
+    onLoad: onLoad
+  };
 });
-})();
+
+document.addEventListener(
+    'DOMContentLoaded', chrome.sync.events_tab.onLoad, false);