[invalidations] Convert invalidations to use TreeOutline

Source/devtools/front_end/timeline/TimelineUIUtils.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 781 matching lines @@
 
     /**
      * @param {!Element} parentElement
      * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
      */
     function appendInvalidationGroup(parentElement, invalidations)
     {
         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];
         var reason = first.cause.reason;
         var topFrame = first.cause.stackTrace && first.cause.stackTrace[0];
 
         if (reason)
             header.createTextChild(WebInspector.UIString("%s for ", reason));
         else
             header.createTextChild(WebInspector.UIString("Unknown cause for "));
@@ skipping 55 matching lines @@
             parentElement.appendChild(invalidationNodes[1]);
         } else if (invalidationNodes.length >= 3) {
             parentElement.appendChild(invalidationNodes[0]);
             parentElement.createTextChild(WebInspector.UIString(", "));
             parentElement.appendChild(invalidationNodes[1]);
             parentElement.createTextChild(WebInspector.UIString(", and %s others", invalidationNodes.length - 2));
         }
     }
 
     /**
+     * @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);
         }
     }
 
     /**
      * @param {!Element} parentElement
      * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
      */
     function createInvalidationGroupDetails(parentElement, invalidations)
     {
         var content = parentElement.createChild("div", "content");
@@ skipping 939 matching lines @@
             return;
 
         var stackTraceElement = parentElement.createChild("div", "timeline-details-view-row-value timeline-details-view-row-stack-trace monospace");
 
         var callFrameElem = WebInspector.DOMPresentationUtils.buildStackTracePreviewContents(this._target, this._linkifier, stackTrace);
 
         stackTraceElement.appendChild(callFrameElem);
     }
 
 }