[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 736 matching lines @@
         title = WebInspector.UIString("Layout invalidations");
         break;
     default:
         title = WebInspector.UIString("Other invalidations");
         break;
     }
 
     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);
 
     /**
      * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
      */
     function groupInvalidationsByCause(invalidations)
     {
         var causeToInvalidationMap = {};
         for (var index = 0; index < invalidations.length; index++) {
@@ skipping 13 matching lines @@
 
             if (causeToInvalidationMap[causeKey])
                 causeToInvalidationMap[causeKey].push(invalidation);
             else
                 causeToInvalidationMap[causeKey] = [ invalidation ];
         }
         return Object.values(causeToInvalidationMap);
     }
 
     /**
-     * @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);
+
+        appendTruncatedNodeList(title, invalidations);
 
         if (topFrame && contentHelper.linkifier()) {
-            header.createTextChild(WebInspector.UIString(". "));
-            var stack = header.createChild("span", "monospace");
-
+            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);
+        }
     }
 
     /**
      * @param {!WebInspector.InvalidationTrackingEvent} invalidation
      * @param {boolean} showUnknownNodes
      */
     function createInvalidationNode(invalidation, showUnknownNodes)
     {
         var node = contentHelper.nodeForBackendId(invalidation.nodeId);
         if (node)
@@ skipping 13 matching lines @@
      * @param {!Element} parentElement
      * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
      */
     function appendTruncatedNodeList(parentElement, invalidations)
     {
         var invalidationNodes = [];
         var invalidationNodeIdMap = {};
         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;
             }
         }
 
         if (invalidationNodes.length === 1) {
             parentElement.appendChild(invalidationNodes[0]);
         } else if (invalidationNodes.length === 2) {
             parentElement.appendChild(invalidationNodes[0]);
             parentElement.createTextChild(WebInspector.UIString(" and "));
             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} 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
      */
     function createInvalidationGroupDetails(parentElement, invalidations)
     {
         var content = parentElement.createChild("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 timeline-details-view-row-stack-trace");
+        var nodeList = content.createChild("div", "node-list");
         appendDetailedNodeList(nodeList, invalidations);
     }
 
     /**
      * @param {!Element} parentElement
      * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
      */
     function appendDetailedNodeList(parentElement, invalidations)
     {
         var firstNode = true;
@@ skipping 919 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);
     }
 
 }