[invalidations] Convert invalidations to use TreeOutline

Source/devtools/front_end/timeline/TimelineUIUtils.js

Index: Source/devtools/front_end/timeline/TimelineUIUtils.js
diff --git a/Source/devtools/front_end/timeline/TimelineUIUtils.js b/Source/devtools/front_end/timeline/TimelineUIUtils.js
index a32b796afdf420e77bb7fee9098b290e5582e1ae..ead94c385caa4f505fb6fb5cbed1b6df167152b3 100644
--- a/Source/devtools/front_end/timeline/TimelineUIUtils.js
+++ b/Source/devtools/front_end/timeline/TimelineUIUtils.js
@@ -799,10 +799,11 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
         if (!target)
             return;
 
-        var row = parentElement.createChild("div", "invalidations-group section");
-        var header = row.createChild("div", "header");
+        var row = parentElement.createChild("div", "invalidations-group");
+        var header = row.createChild("div", "invalidations-header timeline-expandable-collapsed");
+        header.createChild("div", "timeline-expandable-arrow");

[caseq, 2015/03/30 17:38:28]

Did you consider using TreeOutline here?

         header.addEventListener("click", function() {
-            toggleDetails(header, invalidations);
+            toggleDetails(row, header, invalidations);
         });
 
         var first = invalidations[0];
@@ -878,21 +879,22 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
     }
 
     /**
+     * @param {!Element} row
      * @param {!Element} header
      * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
      */
-    function toggleDetails(header, invalidations)
+    function toggleDetails(row, header, invalidations)
     {
-        var wasExpanded = header.classList.contains("expanded");
-        header.classList.toggle("expanded", !wasExpanded);
-        header.parentElement.classList.toggle("expanded", !wasExpanded);
+        var wasExpanded = header.classList.contains("timeline-expandable-expanded");
+        header.classList.toggle("timeline-expandable-collapsed", wasExpanded);
+        header.classList.toggle("timeline-expandable-expanded", !wasExpanded);
 
         if (wasExpanded) {
             var content = header.nextElementSibling;
             if (content)
                 content.remove();
         } else {
-            createInvalidationGroupDetails(header.parentElement, invalidations);
+            createInvalidationGroupDetails(row, invalidations);
         }
     }