Implement style invalidation tracking

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 85957601719ab8b18fe1c48e34bee40cff36e8bd..3edc3947f912653536a151cfd517e860eef24ff5 100644
--- a/Source/devtools/front_end/timeline/TimelineUIUtils.js
+++ b/Source/devtools/front_end/timeline/TimelineUIUtils.js
@@ -739,9 +739,9 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
         for (var index = 0; index < invalidations.length; index++) {
             var invalidation = invalidations[index];
             var causeKey = "";
-            if (invalidation.cause && invalidation.cause.reason)
+            if (invalidation.cause.reason)
                 causeKey += invalidation.cause.reason + ".";
-            if (invalidation.cause && invalidation.cause.stackTrace) {
+            if (invalidation.cause.stackTrace) {
                 invalidation.cause.stackTrace.forEach(function(stackFrame) {
                     causeKey += stackFrame["functionName"] + ".";
                     causeKey += stackFrame["scriptId"] + ".";
@@ -772,8 +772,8 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
         });
 
         var first = invalidations[0];
-        var reason = first.cause && first.cause.reason;
-        var topFrame = first.cause && first.cause.stackTrace && first.cause.stackTrace[0];
+        var reason = first.cause.reason;
+        var topFrame = first.cause.stackTrace && first.cause.stackTrace[0];
 
         if (reason)
             header.createTextChild(WebInspector.UIString("%s for ", reason));
@@ -816,11 +816,15 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
     function appendTruncatedNodeList(parentElement, invalidations)
     {
         var invalidationNodes = [];
-        invalidations.forEach(function(invalidation) {
+        var invalidationNodeIdMap = {};
+        for (var i = 0; i < invalidations.length; i++) {
+            var invalidation = invalidations[i];
             var invalidationNode = createInvalidationNode(invalidation, false);
-            if (invalidationNode)
+            if (invalidationNode && !invalidationNodeIdMap[invalidation.nodeId]) {
                 invalidationNodes.push(invalidationNode);
-        });
+                invalidationNodeIdMap[invalidation.nodeId] = true;
+            }
+        }
 
         if (invalidationNodes.length === 1) {
             parentElement.appendChild(invalidationNodes[0]);
@@ -837,24 +841,6 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
     }
 
     /**
-     * @param {!Element} parentElement
-     * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
-     */
-    function appendNodeList(parentElement, invalidations)
-    {
-        var firstNode = true;
-        invalidations.forEach(function(invalidation) {
-            var invalidationNode = createInvalidationNode(invalidation, true);
-            if (invalidationNode) {
-                if (!firstNode)
-                    parentElement.createTextChild(WebInspector.UIString(", "));
-                parentElement.appendChild(invalidationNode);
-                firstNode = false;
-            }
-        });
-    }
-
-    /**
      * @param {!Element} header
      * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
      */
@@ -882,7 +868,7 @@ WebInspector.TimelineUIUtils._generateInvalidationsForType = function(type, targ
         var content = parentElement.createChild("div", "content");
 
         var first = invalidations[0];
-        if (first.cause && first.cause.stackTrace) {
+        if (first.cause.stackTrace) {
             var stack = content.createChild("div");
             stack.createTextChild(WebInspector.UIString("Stack trace:"));
             contentHelper.createChildStackTraceElement(stack, first.cause.stackTrace);
@@ -890,7 +876,40 @@ 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");
-        appendNodeList(nodeList, invalidations);
+        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));
+                }
+            }
+        }
     }
 }