[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 681 matching lines @@
         callSiteStackLabel = WebInspector.UIString("First layout invalidation");
         stackLabel = WebInspector.UIString("Layout forced");
         break;
     }
 
     // Direct cause.
     if (event.stackTrace)
         contentHelper.appendStackTrace(stackLabel || WebInspector.UIString("Stack trace"), event.stackTrace);
 
     // Indirect causes.
-    if (event.invalidationTrackingEvents) { // Full invalidation tracking (experimental).
+    if (event.invalidationTrackingEvents && target) { // Full invalidation tracking (experimental).
         WebInspector.TimelineUIUtils._generateInvalidations(event, target, contentHelper);
     } else if (initiator && initiator.stackTrace) { // Partial invalidation tracking.
         contentHelper.appendStackTrace(callSiteStackLabel || WebInspector.UIString("First invalidated"), initiator.stackTrace);
     }
 }
 
 /**
  * @param {!WebInspector.TracingModel.Event} event
- * @param {?WebInspector.Target} target
+ * @param {!WebInspector.Target} target
  * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper
  */
 WebInspector.TimelineUIUtils._generateInvalidations = function(event, target, contentHelper)
 {
     if (!event.invalidationTrackingEvents)
         return;
 
     var invalidations = {};
     event.invalidationTrackingEvents.forEach(function(invalidation) {
         if (!invalidations[invalidation.type])
             invalidations[invalidation.type] = [invalidation];
         else
             invalidations[invalidation.type].push(invalidation);
     });
 
     Object.keys(invalidations).forEach(function(type) {
         WebInspector.TimelineUIUtils._generateInvalidationsForType(
             type, target, invalidations[type], contentHelper);
     });
 }
 
 /**
  * @param {string} type
- * @param {?WebInspector.Target} target
+ * @param {!WebInspector.Target} target
  * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
  * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper
  */
 WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, target, invalidations, contentHelper)
 {
     var title;
     switch (type) {
     case WebInspector.TimelineModel.RecordType.StyleRecalcInvalidationTracking:
         title = WebInspector.UIString("Style invalidations");
         break;
     case WebInspector.TimelineModel.RecordType.LayoutInvalidationTracking:
         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 invalidationsTreeOutline = new TreeOutlineInShadow();
+    invalidationsTreeOutline.registerRequiredCSS("timeline/invalidationsTree.css");
+    invalidationsTreeOutline.element.classList.add("timeline-details-view-row-value");

[pfeldman, 2015/04/09 10:15:52]

classList.add(a, b, c) would work.

[pdr., 2015/04/09 18:20:34]

Done.

+    invalidationsTreeOutline.element.classList.add("invalidations-tree");
+    detailsNode.appendChild(invalidationsTreeOutline.element);
+
     var invalidationGroups = groupInvalidationsByCause(invalidations);
     invalidationGroups.forEach(function(group) {
-        appendInvalidationGroup(eventsList, group);
+        var groupElement = new WebInspector.TimelineUIUtils.InvalidationsGroupElement(target, contentHelper, group);
+        invalidationsTreeOutline.appendChild(groupElement);
     });
     contentHelper.element.appendChild(detailsNode);
 
     /**
      * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
      */
     function groupInvalidationsByCause(invalidations)
     {
         var causeToInvalidationMap = {};
         for (var index = 0; index < invalidations.length; index++) {
@@ skipping 11 matching lines @@
                 });
             }
 
             if (causeToInvalidationMap[causeKey])
                 causeToInvalidationMap[causeKey].push(invalidation);
             else
                 causeToInvalidationMap[causeKey] = [ invalidation ];
         }
         return Object.values(causeToInvalidationMap);
     }
+}
+
+/**
+ * @param {!Set<number>} nodeIds
+ * @param {!WebInspector.InvalidationTrackingEvent} invalidations
+ */
+WebInspector.TimelineUIUtils._collectInvalidationNodeIds = function(nodeIds, invalidations)
+{
+    for (var i = 0; i < invalidations.length; ++i) {
+        if (invalidations[i].nodeId)
+            nodeIds.add(invalidations[i].nodeId);
+    }
+}
+
+/**
+  * @constructor
+  * @param {!WebInspector.Target} target
+  * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper
+  * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
+  * @extends {TreeElement}
+  */
+WebInspector.TimelineUIUtils.InvalidationsGroupElement = function(target, contentHelper, invalidations)
+{
+    TreeElement.call(this, "", true);
+
+    this.listItemElement.classList.add("header");
+    this.selectable = false;
+    this.toggleOnClick = true;
+
+    this._contentHelper = contentHelper;
+    this._invalidations = invalidations;
+    this.title = this._createTitle(target);
+}
+
+WebInspector.TimelineUIUtils.InvalidationsGroupElement.prototype = {
+
+    /**
+     * @param {!WebInspector.Target} target
+     * @return {!Element}
+     */
+    _createTitle: function(target)
+    {
+        var first = this._invalidations[0];
+        var reason = first.cause.reason;
+        var topFrame = first.cause.stackTrace && first.cause.stackTrace[0];
+
+        var title = createElement("span");
+        if (reason)
+            title.createTextChild(WebInspector.UIString("%s for ", reason));
+        else
+            title.createTextChild(WebInspector.UIString("Unknown cause for "));
+
+        this._appendTruncatedNodeList(title, this._invalidations);
+
+        if (topFrame && this._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(this._contentHelper.linkifier().linkifyConsoleCallFrame(target, topFrame));
+        }
+
+        return title;
+    },
+
+    /**
+     * @override
+     */
+    onpopulate: function()
+    {
+        var content = createElementWithClass("div", "content");
+
+        var first = this._invalidations[0];
+        if (first.cause.stackTrace) {
+            var stack = content.createChild("div");
+            stack.createTextChild(WebInspector.UIString("Stack trace:"));
+            this._contentHelper.createChildStackTraceElement(stack, first.cause.stackTrace);
+        }
+
+        content.createTextChild(this._invalidations.length > 1 ? WebInspector.UIString("Nodes:") : WebInspector.UIString("Node:"));
+        var nodeList = content.createChild("div", "node-list");
+        var firstNode = true;
+        for (var i = 0; i < this._invalidations.length; i++) {
+            var invalidation = this._invalidations[i];
+            var invalidationNode = this._createInvalidationNode(invalidation, true);
+            if (invalidationNode) {
+                if (!firstNode)
+                    nodeList.createTextChild(WebInspector.UIString(", "));
+                firstNode = false;
+
+                nodeList.appendChild(invalidationNode);
+
+                var extraData = invalidation.extraData ? ", " + invalidation.extraData : "";
+                if (invalidation.changedId) {

[pfeldman, 2015/04/09 10:15:52]

All one-liners? Drop the {}!

[pdr., 2015/04/09 18:20:34]

Dropped. -20bytes!

+                    nodeList.createTextChild(WebInspector.UIString("(changed id to \"%s\"%s)", invalidation.changedId, extraData));
+                } else if (invalidation.changedClass) {
+                    nodeList.createTextChild(WebInspector.UIString("(changed class to \"%s\"%s)", invalidation.changedClass, extraData));
+                } else if (invalidation.changedAttribute) {
+                    nodeList.createTextChild(WebInspector.UIString("(changed attribute to \"%s\"%s)", invalidation.changedAttribute, extraData));
+                } else if (invalidation.changedPseudo) {
+                    nodeList.createTextChild(WebInspector.UIString("(changed pesudo to \"%s\"%s)", invalidation.changedPseudo, extraData));
+                } else if (invalidation.selectorPart) {
+                    nodeList.createTextChild(WebInspector.UIString("(changed \"%s\"%s)", invalidation.selectorPart, extraData));
+                }
+            }
+        }
+
+        var contentTreeElement = new TreeElement(content, false);
+        contentTreeElement.selectable = false;
+        this.appendChild(contentTreeElement);
+    },
 
     /**
      * @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");
-        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];
-
-        if (reason)
-            header.createTextChild(WebInspector.UIString("%s for ", reason));
-        else
-            header.createTextChild(WebInspector.UIString("Unknown cause for "));
-
-        appendTruncatedNodeList(header, invalidations);
-
-        if (topFrame && contentHelper.linkifier()) {
-            header.createTextChild(WebInspector.UIString(". "));
-            var stack = header.createChild("span", "monospace");
-
-            stack.createChild("span").textContent = WebInspector.beautifyFunctionName(topFrame.functionName);
-            stack.createChild("span").textContent = " @ ";
-            stack.createChild("span").appendChild(contentHelper.linkifier().linkifyConsoleCallFrame(target, topFrame));
-        }
-    }
-
-    /**
-     * @param {!WebInspector.InvalidationTrackingEvent} invalidation
-     * @param {boolean} showUnknownNodes
-     */
-    function createInvalidationNode(invalidation, showUnknownNodes)
-    {
-        var node = contentHelper.nodeForBackendId(invalidation.nodeId);
-        if (node)
-            return WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
-        if (invalidation.nodeName) {
-            var nodeSpan = createElement("span");
-            nodeSpan.textContent = WebInspector.UIString("[ %s ]", invalidation.nodeName);
-            return nodeSpan;
-        }
-        if (showUnknownNodes) {
-            var nodeSpan = createElement("span");
-            return nodeSpan.createTextChild(WebInspector.UIString("[ unknown node ]"));
-        }
-    }
-
-    /**
-     * @param {!Element} parentElement
-     * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
-     */
-    function appendTruncatedNodeList(parentElement, invalidations)
+    _appendTruncatedNodeList: function(parentElement, invalidations)
     {
         var invalidationNodes = [];
         var invalidationNodeIdMap = {};
         for (var i = 0; i < invalidations.length; i++) {
             var invalidation = invalidations[i];
-            var invalidationNode = createInvalidationNode(invalidation, false);
+            var invalidationNode = this._createInvalidationNode(invalidation, false);
+            invalidationNode.addEventListener("click", consumeEvent, 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));
         }
-    }
+
+        /**
+         * Consume clicks on nodes to prevent tree element expansion.
+         * @param {!Event} event
+         */
+        function consumeEvent(event)

[pfeldman, 2015/04/09 10:15:52]

You don't seem to need to preventDefault, so you could just use "consumeEvent"
symbol from DOMExtensions.js

[pdr., 2015/04/09 18:20:34]

Oh my.. Didn't realize this already existed.

+        {
+            event.consume(true);
+            return;
+        }
+    },
 
     /**
-     * @param {!Element} header
-     * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
+     * @param {!WebInspector.InvalidationTrackingEvent} invalidation
+     * @param {boolean} showUnknownNodes
      */
-    function toggleDetails(header, invalidations)
+    _createInvalidationNode: function(invalidation, showUnknownNodes)
     {
-        var wasExpanded = header.classList.contains("expanded");
-        header.classList.toggle("expanded", !wasExpanded);
-        header.parentElement.classList.toggle("expanded", !wasExpanded);
+        var node = this._contentHelper.nodeForBackendId(invalidation.nodeId);
+        if (node)
+            return WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
+        if (invalidation.nodeName) {
+            var nodeSpan = createElement("span");
+            nodeSpan.textContent = WebInspector.UIString("[ %s ]", invalidation.nodeName);
+            return nodeSpan;
+        }
+        if (showUnknownNodes) {
+            var nodeSpan = createElement("span");
+            return nodeSpan.createTextChild(WebInspector.UIString("[ unknown node ]"));
+        }
+    },
 
-        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");
-        appendDetailedNodeList(nodeList, invalidations);
-    }
-
-    /**
-     * @param {!Element} parentElement
-     * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
-     */
-    function appendDetailedNodeList(parentElement, invalidations)
-    {
-        var firstNode = true;
-        for (var i = 0; i < invalidations.length; i++) {
-            var invalidation = invalidations[i];
-            var invalidationNode = createInvalidationNode(invalidation, true);
-            if (invalidationNode) {
-                if (!firstNode)
-                    parentElement.createTextChild(WebInspector.UIString(", "));
-                firstNode = false;
-
-                parentElement.appendChild(invalidationNode);
-
-                var extraData = invalidation.extraData ? ", " + invalidation.extraData : "";
-                if (invalidation.changedId) {
-                    parentElement.createTextChild(WebInspector.UIString("(changed id to \"%s\"%s)", invalidation.changedId, extraData));
-                } else if (invalidation.changedClass) {
-                    parentElement.createTextChild(WebInspector.UIString("(changed class to \"%s\"%s)", invalidation.changedClass, extraData));
-                } else if (invalidation.changedAttribute) {
-                    parentElement.createTextChild(WebInspector.UIString("(changed attribute to \"%s\"%s)", invalidation.changedAttribute, extraData));
-                } else if (invalidation.changedPseudo) {
-                    parentElement.createTextChild(WebInspector.UIString("(changed pesudo to \"%s\"%s)", invalidation.changedPseudo, extraData));
-                } else if (invalidation.selectorPart) {
-                    parentElement.createTextChild(WebInspector.UIString("(changed \"%s\"%s)", invalidation.selectorPart, extraData));
-                }
-            }
-        }
-    }
+    __proto__: TreeElement.prototype
 }
 
 /**
- * @param {!Set<number>} nodeIds
- * @param {!WebInspector.InvalidationTrackingEvent} invalidations
- */
-WebInspector.TimelineUIUtils._collectInvalidationNodeIds = function(nodeIds, invalidations)
-{
-    for (var i = 0; i < invalidations.length; ++i) {
-        if (invalidations[i].nodeId)
-            nodeIds.add(invalidations[i].nodeId);
-    }
-}
-
-/**
  * @param {!Object} total
  * @param {!WebInspector.TimelineModel.Record} record
  */
 WebInspector.TimelineUIUtils.aggregateTimeForRecord = function(total, record)
 {
     var traceEvent = record.traceEvent();
     var model = record.timelineModel();
     WebInspector.TimelineUIUtils._aggregatedStatsForTraceEvent(total, model, traceEvent);
 }
 
@@ skipping 869 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);
     }
 
 }