Implement style invalidation tracking

Source/devtools/front_end/timeline/TimelineModel.js

Index: Source/devtools/front_end/timeline/TimelineModel.js
diff --git a/Source/devtools/front_end/timeline/TimelineModel.js b/Source/devtools/front_end/timeline/TimelineModel.js
index cb65de9719c28e69f24126eb79a35b941a9247dd..18184371fbb5228c0ca2db2effa6fb0a7754cb36 100644
--- a/Source/devtools/front_end/timeline/TimelineModel.js
+++ b/Source/devtools/front_end/timeline/TimelineModel.js
@@ -74,7 +74,9 @@ WebInspector.TimelineModel.RecordType = {
     ScrollLayer: "ScrollLayer",
     CompositeLayers: "CompositeLayers",
 
+    ScheduleStyleInvalidationTracking: "ScheduleStyleInvalidationTracking",
     StyleRecalcInvalidationTracking: "StyleRecalcInvalidationTracking",
+    StyleInvalidatorInvalidationTracking: "StyleInvalidatorInvalidationTracking",
     LayoutInvalidationTracking: "LayoutInvalidationTracking",
     LayerInvalidationTracking: "LayerInvalidationTracking",
     PaintInvalidationTracking: "PaintInvalidationTracking",
@@ -945,11 +947,13 @@ WebInspector.TimelineModel.prototype = {
             this._lastRecalculateStylesEvent = event;
             break;
 
+        case recordTypes.ScheduleStyleInvalidationTracking:
         case recordTypes.StyleRecalcInvalidationTracking:
+        case recordTypes.StyleInvalidatorInvalidationTracking:
         case recordTypes.LayoutInvalidationTracking:
         case recordTypes.LayerInvalidationTracking:
         case recordTypes.PaintInvalidationTracking:
-            this._invalidationTracker.addInvalidation(event);
+            this._invalidationTracker.addInvalidation(new WebInspector.InvalidationTrackingEvent(event));
             break;
 
         case recordTypes.InvalidateLayout:
@@ -1634,20 +1638,47 @@ WebInspector.TracingTimelineSaver.prototype = {
  */
 WebInspector.InvalidationTrackingEvent = function(event)
 {
+    /** @type {string} */
     this.type = event.name;
-    this.frameId = event.args["data"]["frame"];
-    this.nodeId = event.args["data"]["nodeId"];
-    this.nodeName = event.args["data"]["nodeName"];
-    this.paintId = event.args["data"]["paintId"];
-
-    var reason = event.args["data"]["reason"];
-    var stackTrace = event.args["data"]["stackTrace"];
-
-    if (!reason && stackTrace && this.type === WebInspector.TimelineModel.RecordType.LayoutInvalidationTracking)
-        reason = "Layout forced";
-
-    if (reason || stackTrace)
-        this.cause = {reason: reason, stackTrace: stackTrace};
+    /** @type {number} */
+    this.startTime = event.startTime;
+    /** @type {!WebInspector.TracingModel.Event} */
+    this._tracingEvent = event;
+
+    var eventData = event.args["data"];
+
+    /** @type {number} */
+    this.frame = eventData["frame"];
+    /** @type {?number} */
+    this.nodeId = eventData["nodeId"];
+    /** @type {?string} */
+    this.nodeName = eventData["nodeName"];
+    /** @type {?number} */
+    this.paintId = eventData["paintId"];
+    /** @type {?number} */
+    this.invalidationSet = eventData["invalidationSet"];
+    /** @type {?string} */
+    this.invalidatedSelectorId = eventData["invalidatedSelectorId"];
+    /** @type {?string} */
+    this.changedId = eventData["changedId"];
+    /** @type {?string} */
+    this.changedClass = eventData["changedClass"];
+    /** @type {?string} */
+    this.changedAttribute = eventData["changedAttribute"];
+    /** @type {?string} */
+    this.changedPseudo = eventData["changedPseudo"];
+    /** @type {?string} */
+    this.selectorPart = eventData["selectorPart"];
+    /** @type {?string} */
+    this.extraData = eventData["extraData"];
+    /** @type {?Array.<!Object.<string, number>>} */
+    this.invalidationList = eventData["invalidationList"];
+    /** @type {!WebInspector.InvalidationCause} */
+    this.cause = {reason: eventData["reason"], stackTrace: eventData["stackTrace"]};
+
+    // FIXME: Move this to TimelineUIUtils.js.
+    if (!this.cause.reason && this.cause.stackTrace && this.type === WebInspector.TimelineModel.RecordType.LayoutInvalidationTracking)
+        this.cause.reason = "Layout forced";
 }
 
 /** @typedef {{reason: string, stackTrace: ?Array.<!ConsoleAgent.CallFrame>}} */
@@ -1663,11 +1694,10 @@ WebInspector.InvalidationTracker = function()
 
 WebInspector.InvalidationTracker.prototype = {
     /**
-     * @param {!WebInspector.TracingModel.Event} event
+     * @param {!WebInspector.InvalidationTrackingEvent} invalidation
      */
-    addInvalidation: function(event)
+    addInvalidation: function(invalidation)
     {
-        var invalidation = new WebInspector.InvalidationTrackingEvent(event);
         this._startNewFrameIfNeeded();
 
         if (!invalidation.nodeId && !invalidation.paintId) {
@@ -1687,14 +1717,24 @@ WebInspector.InvalidationTracker.prototype = {
             return;
         }
 
-        // StyleRecalcInvalidationTracking events can occur before and during
-        // recalc style. didRecalcStyle handles StyleRecalcInvalidationTracking
-        // events that occur before the recalc style event but we need to handle
-        // StyleRecalcInvalidationTracking events during recalc style here.
+        // Suppress StyleInvalidator StyleRecalcInvalidationTracking invalidations because they
+        // will be handled by StyleInvalidatorInvalidationTracking.
+        // FIXME: Investigate if we can remove StyleInvalidator invalidations entirely.
         if (invalidation.type === recordTypes.StyleRecalcInvalidationTracking) {
-            var duringRecalcStyle = event.startTime && this._lastRecalcStyle
-                && event.startTime >= this._lastRecalcStyle.startTime
-                && event.startTime <= this._lastRecalcStyle.endTime;
+            if (invalidation.cause.reason === "StyleInvalidator")

[caseq, 2014/12/02 14:59:42]

use && and merge in the if above?

[pdr., 2014/12/03 04:33:53]

Done.

+                return;
+        }
+
+        // Style invalidation events can occur before and during recalc style. didRecalcStyle
+        // handles style invalidations that occur before the recalc style event but we need to
+        // handle style recalc invalidations during recalc style here.
+        var styleRecalcInvalidation = (invalidation.type === recordTypes.ScheduleStyleInvalidationTracking
+            || invalidation.type === recordTypes.StyleInvalidatorInvalidationTracking
+            || invalidation.type === recordTypes.StyleRecalcInvalidationTracking);
+        if (styleRecalcInvalidation) {
+            var duringRecalcStyle = invalidation.startTime && this._lastRecalcStyle
+                && invalidation.startTime >= this._lastRecalcStyle.startTime
+                && invalidation.startTime <= this._lastRecalcStyle.endTime;
             if (duringRecalcStyle)
                 this._associateWithLastRecalcStyleEvent(invalidation);
         }
@@ -1722,8 +1762,10 @@ WebInspector.InvalidationTracker.prototype = {
     didRecalcStyle: function(recalcStyleEvent)
     {
         this._lastRecalcStyle = recalcStyleEvent;
-        this._forAllInvalidations(this._associateWithLastRecalcStyleEvent,
-            [WebInspector.TimelineModel.RecordType.StyleRecalcInvalidationTracking]);
+        var types = [WebInspector.TimelineModel.RecordType.ScheduleStyleInvalidationTracking,
+                     WebInspector.TimelineModel.RecordType.StyleInvalidatorInvalidationTracking,

[caseq, 2014/12/02 14:59:42]

wrong indent, please add 4 spaces relative to the line above for expression
continuation.

[pdr., 2014/12/03 04:33:53]

Done.

[pdr., 2014/12/03 04:33:53]

Done.

+                     WebInspector.TimelineModel.RecordType.StyleRecalcInvalidationTracking];
+        this._forAllInvalidations(this._associateWithLastRecalcStyleEvent, types);
     },
 
     /**
@@ -1733,12 +1775,85 @@ WebInspector.InvalidationTracker.prototype = {
     {
         if (invalidation.linkedRecalcStyleEvent)
             return;
+
+        var recordTypes = WebInspector.TimelineModel.RecordType;
         var recalcStyleFrameId = this._lastRecalcStyle.args["beginData"]["frame"];
-        this._addInvalidationToEvent(this._lastRecalcStyle, recalcStyleFrameId, invalidation);
+        if (invalidation.type === recordTypes.StyleInvalidatorInvalidationTracking) {
+            // Instead of calling _addInvalidationToEvent directly, we create synthetic
+            // StyleRecalcInvalidationTracking events which will be added in _addInvalidationToEvent.
+            this._addSyntheticStyleRecalcInvalidations(this._lastRecalcStyle, recalcStyleFrameId, invalidation);
+        } else if (invalidation.type === recordTypes.ScheduleStyleInvalidationTracking) {
+            // ScheduleStyleInvalidationTracking events are only used for adding information to
+            // StyleInvalidatorInvalidationTracking events. See: _addSyntheticStyleRecalcInvalidations.
+        } else {
+            this._addInvalidationToEvent(this._lastRecalcStyle, recalcStyleFrameId, invalidation);
+        }
+
         invalidation.linkedRecalcStyleEvent = true;
     },
 
     /**
+     * @param {!WebInspector.TracingModel.Event} event
+     * @param {number} frameId
+     * @param {!WebInspector.InvalidationTrackingEvent} styleInvalidatorInvalidation
+     */
+    _addSyntheticStyleRecalcInvalidations: function(event, frameId, styleInvalidatorInvalidation)
+    {
+        if (!styleInvalidatorInvalidation.invalidationList) {
+            createAndAddSyntheticStyleRecalcInvalidation(this, styleInvalidatorInvalidation._tracingEvent, styleInvalidatorInvalidation);
+            return;
+        }
+
+        for (var i = 0; i < styleInvalidatorInvalidation.invalidationList.length; i++) {
+            var setId = styleInvalidatorInvalidation.invalidationList[i]["id"];
+            var scheduleStyleRecalculation = findLastScheduleStyleRecalculation(this, frameId, setId, styleInvalidatorInvalidation);
+            if (!scheduleStyleRecalculation) {
+                console.error("Failed to lookup the event that scheduled a style invalidator invalidation.");
+                continue;
+            }
+            createAndAddSyntheticStyleRecalcInvalidation(this, scheduleStyleRecalculation._tracingEvent, styleInvalidatorInvalidation);
+        }
+
+
+        /**
+         * @param {!WebInspector.InvalidationTracker} tracker
+         * @param {!WebInspector.TracingModel.Event} baseEvent
+         * @param {!WebInspector.InvalidationTrackingEvent} styleInvalidatorInvalidation
+         */
+        function createAndAddSyntheticStyleRecalcInvalidation(tracker, baseEvent, styleInvalidatorInvalidation)

[caseq, 2014/12/02 14:59:42]

why is this not a member function?

[pdr., 2014/12/03 04:33:53]

Done.

+        {
+            var invalidation = new WebInspector.InvalidationTrackingEvent(baseEvent);
+            invalidation.type = WebInspector.TimelineModel.RecordType.StyleRecalcInvalidationTracking;
+            invalidation.synthetic = true;
+            if (styleInvalidatorInvalidation.cause.reason)
+                invalidation.cause.reason = styleInvalidatorInvalidation.cause.reason;
+            if (styleInvalidatorInvalidation.selectorPart)
+                invalidation.selectorPart = styleInvalidatorInvalidation.selectorPart;
+
+            tracker.addInvalidation(invalidation);
+            if (!invalidation.linkedRecalcStyleEvent)
+                tracker._associateWithLastRecalcStyleEvent(invalidation);
+        }
+
+        /**
+         * @param {!WebInspector.InvalidationTracker} tracker
+         * @param {number} frameId
+         * @param {number} setId
+         * @param {!WebInspector.InvalidationTrackingEvent} styleInvalidatorInvalidation
+         * @return {?WebInspector.InvalidationTrackingEvent}
+         */
+        function findLastScheduleStyleRecalculation(tracker, frameId, setId, styleInvalidatorInvalidation)

[caseq, 2014/12/02 14:59:42]

ditto.

[pdr., 2014/12/03 04:33:53]

Done. I ended up moving this into _addSyntheticStyleRecalcInvalidations and
added an inner function instead of the inline function I had here.

+        {
+            var lastScheduleStyleRecalculation;
+            tracker._forAllInvalidations(function(invalidation) {
+                if (invalidation.frame === frameId && invalidation.nodeId === styleInvalidatorInvalidation.nodeId && invalidation.invalidationSet === setId)
+                    lastScheduleStyleRecalculation = invalidation;
+            }, [WebInspector.TimelineModel.RecordType.ScheduleStyleInvalidationTracking]);
+            return lastScheduleStyleRecalculation;
+        }
+    },
+
+    /**
      * @param {!WebInspector.TracingModel.Event} layoutEvent
      */
     didLayout: function(layoutEvent)
@@ -1780,7 +1895,10 @@ WebInspector.InvalidationTracker.prototype = {
 
         var effectivePaintId = this._lastPaintWithLayer.args["data"]["nodeId"];
         var paintFrameId = paintEvent.args["data"]["frame"];
-        this._forAllInvalidations(associateWithPaintEvent);
+        var types = [WebInspector.TimelineModel.RecordType.StyleRecalcInvalidationTracking,
+                     WebInspector.TimelineModel.RecordType.LayoutInvalidationTracking,

[caseq, 2014/12/02 14:59:42]

wrong indent.

[pdr., 2014/12/03 04:33:53]

Done.

+                     WebInspector.TimelineModel.RecordType.PaintInvalidationTracking];
+        this._forAllInvalidations(associateWithPaintEvent, types);
 
         /**
          * @param {!WebInspector.InvalidationTrackingEvent} invalidation
@@ -1801,7 +1919,7 @@ WebInspector.InvalidationTracker.prototype = {
      */
     _addInvalidationToEvent: function(event, eventFrameId, invalidation)
     {
-        if (eventFrameId !== invalidation.frameId)
+        if (eventFrameId !== invalidation.frame)
             return;
         if (!event.invalidationTrackingEvents)
             event.invalidationTrackingEvents = [ invalidation ];