Implement style invalidation tracking

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 721 matching lines @@
 
     /**
      * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
      */
     function groupInvalidationsByCause(invalidations)
     {
         var causeToInvalidationMap = {};
         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"] + ".";
                     causeKey += stackFrame["url"] + ".";
                     causeKey += stackFrame["lineNumber"] + ".";
                     causeKey += stackFrame["columnNumber"] + ".";
                 });
             }
 
             if (causeToInvalidationMap[causeKey])
@@ skipping 10 matching lines @@
      */
     function appendInvalidationGroup(parentElement, invalidations)
     {
         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 && 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));
         else
             header.createTextChild(WebInspector.UIString("Unknown cause for "));
 
         appendTruncatedNodeList(header, invalidations);
 
         if (topFrame) {
             header.createTextChild(WebInspector.UIString(". "));
@@ skipping 22 matching lines @@
         }
     }
 
     /**
      * @param {!Element} parentElement
      * @param {!Array.<!WebInspector.InvalidationTrackingEvent>} invalidations
      */
     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]);
         } 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} 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
      */
     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 && first.cause.stackTrace) {
+        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");
-        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));
+                }
+            }
+        }
     }
 }
 
 /**
  * @param {!WebInspector.TracingModel.Event} event
  * @param {!WebInspector.Target} target
  * @param {function(?Array.<number>, ?Array.<number>)} callback
  */
 WebInspector.TimelineUIUtils._pushInvalidationNodeIdsToFrontend = function(event, target, callback)
 {
@@ skipping 585 matching lines @@
      * @param {!ConsoleAgent.CallFrame} stackFrame
      */
     appendStackFrame: function(parentElement, stackFrame)
     {
         parentElement.createTextChild(WebInspector.beautifyFunctionName(stackFrame.functionName));
         parentElement.createTextChild(" @ ");
         var urlElement = this._linkifier.linkifyScriptLocation(this._target, stackFrame.scriptId, stackFrame.url, stackFrame.lineNumber - 1, stackFrame.columnNumber - 1);
         parentElement.appendChild(urlElement);
     }
 }