[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..6e548fd8b10610fea12ad7a7c56191e04f1e8cdb 100644
--- a/Source/devtools/front_end/timeline/TimelineUIUtils.js
+++ b/Source/devtools/front_end/timeline/TimelineUIUtils.js
@@ -754,10 +754,14 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
     var detailsNode = createElementWithClass("div", "timeline-details-view-row");
     var titleElement = detailsNode.createChild("span", "timeline-details-view-row-title");
     titleElement.textContent = WebInspector.UIString("%s: ", title);
-    var eventsList = detailsNode.createChild("div", "timeline-details-view-row-value");
+
+    var eventsTreeOutline = new TreeOutlineInShadow();
+    eventsTreeOutline.element.classList.add("invalidations-tree");
+    detailsNode.appendChild(eventsTreeOutline.element);
+
     var invalidationGroups = groupInvalidationsByCause(invalidations);
     invalidationGroups.forEach(function(group) {
-        appendInvalidationGroup(eventsList, group);
+        appendInvalidationGroup(eventsTreeOutline, group);
     });
     contentHelper.element.appendChild(detailsNode);
 
@@ -791,39 +795,68 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
     }
 
     /**
-     * @param {!Element} parentElement
+     * @param {!TreeOutline} treeOutline
      * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
      */
-    function appendInvalidationGroup(parentElement, invalidations)
+    function appendInvalidationGroup(treeOutline, invalidations)
     {
         if (!target)
             return;
 
-        var row = parentElement.createChild("div", "invalidations-group section");
-        var header = row.createChild("div", "header");
-        header.addEventListener("click", function() {
-            toggleDetails(header, invalidations);
-        });
-
         var first = invalidations[0];
         var reason = first.cause.reason;
         var topFrame = first.cause.stackTrace && first.cause.stackTrace[0];
 
+        var title = createElement("span");
         if (reason)
-            header.createTextChild(WebInspector.UIString("%s for ", reason));
+            title.createTextChild(WebInspector.UIString("%s for ", reason));
         else
-            header.createTextChild(WebInspector.UIString("Unknown cause for "));
+            title.createTextChild(WebInspector.UIString("Unknown cause for "));
 
-        appendTruncatedNodeList(header, invalidations);
+        var treeElement = new TreeElement(title, true);
+        treeElement.listItemElement.classList.add("header");
+        treeElement.selectable = false;
+        treeElement.isEventWithinDisclosureTriangle = function() {return true;}

[pfeldman, 2015/04/07 15:02:09]

you should not need this.

[pdr., 2015/04/09 06:14:49]

Fixed. "toggleOnClick = true" was what I was looking for.

+        treeOutline.appendChild(treeElement);
 
-        if (topFrame && contentHelper.linkifier()) {
-            header.createTextChild(WebInspector.UIString(". "));
-            var stack = header.createChild("span", "monospace");
+        appendTruncatedNodeList(title, invalidations);
 
+        if (topFrame && contentHelper.linkifier()) {
+            title.createTextChild(WebInspector.UIString(". "));
+            var stack = title.createChild("span", "monospace");
             stack.createChild("span").textContent = WebInspector.beautifyFunctionName(topFrame.functionName);
             stack.createChild("span").textContent = " @ ";
             stack.createChild("span").appendChild(contentHelper.linkifier().linkifyConsoleCallFrame(target, topFrame));
         }
+
+        treeElement.onexpand = onExpand.bind(null, treeElement, invalidations);

[pfeldman, 2015/04/07 15:02:09]

We try not to do this. You should extend TreeElement instead.

[pdr., 2015/04/09 06:14:49]

Done. This is much cleaner but unfortunately makes this patch difficult to
review.

+
+        /**
+         * @param {!TreeElement} treeElement
+         * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
+         */
+        function onExpand(treeElement, invalidations)
+        {
+            if (treeElement.childCount() >= 1)

[pfeldman, 2015/04/07 15:02:09]

You should override onpopulate which is going to be called exactly once.

[pdr., 2015/04/09 06:14:49]

Done.

+                return;
+
+            var content = createElementWithClass("div", "content");
+
+            var first = invalidations[0];
+            if (first.cause.stackTrace) {
+                var stack = content.createChild("div");
+                stack.createTextChild(WebInspector.UIString("Stack trace:"));
+                contentHelper.createChildStackTraceElement(stack, first.cause.stackTrace);
+            }
+
+            content.createTextChild(invalidations.length > 1 ? WebInspector.UIString("Nodes:") : WebInspector.UIString("Node:"));
+            var nodeList = content.createChild("div", "node-list");
+            appendDetailedNodeList(nodeList, invalidations);
+
+            var contentTreeElement = new TreeElement(content, false);
+            contentTreeElement.selectable = false;
+            treeElement.appendChild(contentTreeElement);
+        }
     }
 
     /**
@@ -857,6 +890,10 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
         for (var i = 0; i < invalidations.length; i++) {
             var invalidation = invalidations[i];
             var invalidationNode = createInvalidationNode(invalidation, false);
+            invalidationNode.onclick = function(event) {

[pfeldman, 2015/04/07 15:02:09]

add named click listener please.

[pdr., 2015/04/09 06:14:49]

Done, and switched to "consume".

+                event.cancelBubble = true;
+                return false;
+            }
             if (invalidationNode && !invalidationNodeIdMap[invalidation.nodeId]) {
                 invalidationNodes.push(invalidationNode);
                 invalidationNodeIdMap[invalidation.nodeId] = true;
@@ -878,25 +915,6 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
     }
 
     /**
-     * @param {!Element} header
-     * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
-     */
-    function toggleDetails(header, invalidations)
-    {
-        var wasExpanded = header.classList.contains("expanded");
-        header.classList.toggle("expanded", !wasExpanded);
-        header.parentElement.classList.toggle("expanded", !wasExpanded);
-
-        if (wasExpanded) {
-            var content = header.nextElementSibling;
-            if (content)
-                content.remove();
-        } else {
-            createInvalidationGroupDetails(header.parentElement, invalidations);
-        }
-    }
-
-    /**
      * @param {!Element} parentElement
      * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
      */
@@ -912,7 +930,7 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
         }
 
         content.createTextChild(invalidations.length > 1 ? WebInspector.UIString("Nodes:") : WebInspector.UIString("Node:"));
-        var nodeList = content.createChild("div", "node-list timeline-details-view-row-stack-trace");
+        var nodeList = content.createChild("div", "node-list");
         appendDetailedNodeList(nodeList, invalidations);
     }