Implement invalidation tracking in devtools

Source/devtools/front_end/timeline/TracingTimelineUIUtils.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.TimelineUIUtils}
  */
 WebInspector.TracingTimelineUIUtils = function()
 {
@@ skipping 476 matching lines @@
     var relatedNode = null;
     var barrier = new CallbackBarrier();
     if (!event.previewElement && target) {
         if (event.imageURL)
             WebInspector.DOMPresentationUtils.buildImagePreviewContents(target, event.imageURL, false, barrier.createCallback(saveImage));
         else if (event.picture)
             WebInspector.TracingTimelineUIUtils.buildPicturePreviewContent(event, barrier.createCallback(saveImage));
     }
     if (event.backendNodeId && target)
         target.domModel.pushNodesByBackendIdsToFrontend([event.backendNodeId], barrier.createCallback(setRelatedNode));
+    if (target && event.invalidationTrackingEvents)

[caseq, 2014/10/15 16:24:54]

Please drop test for target (the one above is likely a legacy, targets shouldn't
be nullable now, I think).

[pdr., 2014/10/16 07:46:48]

Fixed, and removed the two above.

+        WebInspector.TracingTimelineUIUtils._resolveInvalidationTrackingNodeIds(event, barrier);
     barrier.callWhenDone(callbackWrapper);
 
     /**
      * @param {!Element=} element
      */
     function saveImage(element)
     {
         event.previewElement = element || null;
     }
 
@@ skipping 98 matching lines @@
     case recordTypes.PaintImage:
     case recordTypes.DecodeLazyPixelRef:
     case recordTypes.DecodeImage:
     case recordTypes.ResizeImage:
     case recordTypes.DrawLazyPixelRef:
         relatedNodeLabel = WebInspector.UIString("Image element");
         if (event.imageURL)
             contentHelper.appendElementRow(WebInspector.UIString("Image URL"), WebInspector.linkifyResourceAsNode(event.imageURL));
         break;
     case recordTypes.RecalculateStyles: // We don't want to see default details.
+        // FIXME: Show invalidation tracking for updating style.
         contentHelper.appendTextRow(WebInspector.UIString("Elements affected"), event.args["elementCount"]);
         break;
     case recordTypes.Layout:
         var beginData = event.args["beginData"];
         contentHelper.appendTextRow(WebInspector.UIString("Nodes that need layout"), beginData["dirtyObjects"]);
         contentHelper.appendTextRow(WebInspector.UIString("Layout tree size"), beginData["totalObjects"]);
         contentHelper.appendTextRow(WebInspector.UIString("Layout scope"),
                                     beginData["partialLayout"] ? WebInspector.UIString("Partial") : WebInspector.UIString("Whole document"));
         relatedNodeLabel = WebInspector.UIString("Layout root");
+        // FIXME: Show invalidation tracking for updating layout.
+        break;
+    case recordTypes.UpdateLayerTree:
+        // FIXME: Show invalidation tracking for updating the layer tree.
         break;
     case recordTypes.ConsoleTime:
         contentHelper.appendTextRow(WebInspector.UIString("Message"), event.name);
         break;
     case recordTypes.WebSocketCreate:
     case recordTypes.WebSocketSendHandshakeRequest:
     case recordTypes.WebSocketReceiveHandshakeResponse:
     case recordTypes.WebSocketDestroy:
         var initiatorData = initiator ? initiator.args["data"] : eventData;
         if (typeof initiatorData["webSocketURL"] !== "undefined")
@@ skipping 21 matching lines @@
 
     var warning = event.warning;
     if (warning) {
         var div = document.createElement("div");
         div.textContent = warning;
         contentHelper.appendElementRow(WebInspector.UIString("Warning"), div);
     }
     if (event.previewElement)
         contentHelper.appendElementRow(WebInspector.UIString("Preview"), event.previewElement);
 
-    if (event.stackTrace || (event.initiator && event.initiator.stackTrace))
-        WebInspector.TracingTimelineUIUtils._generateCauses(event, contentHelper);
+    if (event.stackTrace || (event.initiator && event.initiator.stackTrace) || event.invalidationTrackingEvents)
+        WebInspector.TracingTimelineUIUtils._generateCauses(event, linkifier, contentHelper);
 
     fragment.appendChild(contentHelper.element);
     return fragment;
 }
 
 /**
  * @param {!WebInspector.TracingModel.Event} event
+ * @param {!WebInspector.Linkifier} linkifier
  * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper
  */
-WebInspector.TracingTimelineUIUtils._generateCauses = function(event, contentHelper)
+WebInspector.TracingTimelineUIUtils._generateCauses = function(event, linkifier, contentHelper)
 {
     var recordTypes = WebInspector.TracingTimelineModel.RecordType;
 
     var callSiteStackLabel;
     var stackLabel;
+    var initiator = event.initiator;
 
     switch (event.name) {
     case recordTypes.TimerFire:
         callSiteStackLabel = WebInspector.UIString("Timer installed");
         break;
     case recordTypes.FireAnimationFrame:
         callSiteStackLabel = WebInspector.UIString("Animation frame requested");
         break;
     case recordTypes.RecalculateStyles:
         stackLabel = WebInspector.UIString("Stack when style recalculation was forced");
         break;
     case recordTypes.Layout:
         callSiteStackLabel = WebInspector.UIString("First layout invalidation");
         stackLabel = WebInspector.UIString("Stack when layout was forced");
         break;
     }
 
     // Direct cause.
     if (event.stackTrace)
         contentHelper.appendStackTrace(stackLabel || WebInspector.UIString("Stack when this event occurred"), event.stackTrace);
 
-    // Indirect cause / invalidation.
-    var initiator = event.initiator;
-    if (initiator && initiator.stackTrace)
+    // Indirect causes.
+    if (event.invalidationTrackingEvents) { // Full invalidation tracking (experimental).
+        WebInspector.TracingTimelineUIUtils._generateInvalidations(event, linkifier, contentHelper);
+    } else if (initiator && initiator.stackTrace) { // Partial invalidation tracking.
         contentHelper.appendStackTrace(callSiteStackLabel || WebInspector.UIString("Stack when first invalidated"), initiator.stackTrace);
+    }
 }
 
 /**
+ * @param {!WebInspector.TracingModel.Event} event
+ * @param {!WebInspector.Linkifier} linkifier
+ * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper
+ */
+WebInspector.TracingTimelineUIUtils._generateInvalidations = function(event, linkifier, contentHelper)
+{
+    if (!event.invalidationTrackingEvents)
+        return;
+
+    var target = event.thread.target();
+    var styleInvalidations = [];

[kouhei (in TOK), 2014/10/15 05:34:00]

We might want to use a map of arrays here, as we expect to have more
invalidation event types in future.

[caseq, 2014/10/15 16:24:53]

+1

[pdr., 2014/10/16 07:46:48]

Excellent point. Refactored!

+    var layoutInvalidations = [];
+    var layerInvalidations = [];
+    event.invalidationTrackingEvents.forEach(function(invalidation) {
+        switch (invalidation.type) {
+        case WebInspector.TracingTimelineModel.RecordType.StyleRecalcInvalidationTracking:
+            styleInvalidations.push(invalidation);
+            break;
+        case WebInspector.TracingTimelineModel.RecordType.LayoutInvalidationTracking:
+            layoutInvalidations.push(invalidation);
+            break;
+        case WebInspector.TracingTimelineModel.RecordType.LayerInvalidationTracking:
+            layerInvalidations.push(invalidation);
+            break;
+        default:
+            console.error("Unknown invalidation tracking event.");
+            console.error(invalidation);
+        }
+    });
+    if (styleInvalidations.length)

[caseq, 2014/10/15 16:24:54]

style: here and below, please use {} for multi-line statements under if.

[pdr., 2014/10/16 07:46:48]

Refactored this to be much cleaner. I'm not sure who wrote this gross code.

+        contentHelper.element.appendChild(
+            WebInspector.TracingTimelineUIUtils._buildInvalidationDetailsNode(WebInspector.UIString("Style invalidations"), linkifier, target, styleInvalidations));
+    if (layoutInvalidations.length)
+        contentHelper.element.appendChild(
+            WebInspector.TracingTimelineUIUtils._buildInvalidationDetailsNode(WebInspector.UIString("Layout invalidations"), linkifier, target, layoutInvalidations));
+    if (layerInvalidations.length)
+        contentHelper.element.appendChild(
+            WebInspector.TracingTimelineUIUtils._buildInvalidationDetailsNode(WebInspector.UIString("Layer invalidations"), linkifier, target, layerInvalidations));
+}
+
+/**
+ * @param {string} title
+ * @param {!WebInspector.Linkifier} linkifier
+ * @param {?WebInspector.Target} target
+ * @param {!WebInspector.TimelineDetailsContentHelper} contentHelper
+ */
+WebInspector.TracingTimelineUIUtils._buildInvalidationDetailsNode = function(title, linkifier, target, invalidationEvents)
+{
+    var detailsNode = document.createElement("div");
+    detailsNode.className = "timeline-details-view-row";
+    var titleElement = document.createElement("span");
+    titleElement.className = "timeline-details-view-row-title";
+    titleElement.textContent = WebInspector.UIString("%s: ", title);
+    detailsNode.appendChild(titleElement);

[caseq, 2014/10/15 16:24:54]

nit: var titleElement = detailsNode.createChild("span",
"timeline-details-view-row-title")

+    var eventsList = document.createElement("ol");
+    detailsNode.appendChild(eventsList);

[caseq, 2014/10/15 16:24:53]

ditto

+
+    invalidationEvents.forEach(function(invalidation, idx) {
+        var row = document.createElement("li");
+        eventsList.appendChild(row);

[caseq, 2014/10/15 16:24:54]

ditto

+
+        var nodeRow = document.createElement("div");
+        row.appendChild(nodeRow);

[caseq, 2014/10/15 16:24:53]

ditto

+        var node = target.domModel.nodeForId(invalidation.frontendNodeId);
+        if (node)
+            nodeRow.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeReference(node));
+        else if (invalidation.nodeName)
+            nodeRow.textContent = '[' + invalidation.nodeName + ']';

[caseq, 2014/10/15 16:24:53]

WebInspector.UIString("[ %s ]", invalidation.nodeName)

+        else
+            nodeRow.textContent = '[ unknown node ]';

[caseq, 2014/10/15 16:24:53]

WebInspector.UISreing("[ unknown node ]")

+
+        if (invalidation.reason) {
+            var reasonRow = document.createElement("div");
+            reasonRow.textContent = 'Reason: ' + invalidation.reason + (invalidation.reason.endsWith('.') ? '' : '.');

[caseq, 2014/10/15 16:24:53]

ditto

+            row.appendChild(reasonRow);
+        }
+
+        var callstack = invalidation.callstack ? JSON.parse(invalidation.callstack) : [];

[caseq, 2014/10/15 16:24:53]

I think we need to capture callstacks the usual way we do (i.e. an adjacent
trace event that produces a structured call stack using 
InspectorCallStackEvent)

[pdr., 2014/10/16 07:46:48]

I wasn't able to find the benefit of this, but I may misunderstand. Could you
explain a bit more?

+        if (callstack.length > 0) {

[caseq, 2014/10/15 16:24:53]

if (callstack.length)

+            var callstackRow = document.createElement("div");
+            row.appendChild(callstackRow);
+            callstack.forEach(function(stackFrame) {
+                var frameRow = document.createElement("div");
+                frameRow.className = "timeline-details-view-row monospace";
+                callstackRow.appendChild(frameRow);
+                frameRow.textContent = stackFrame.functionName || WebInspector.UIString("(anonymous function)");
+                frameRow.textContent += " @ ";
+                var urlElement = linkifier.linkifyScriptLocation(target, stackFrame.scriptId, stackFrame.url, stackFrame.lineNumber - 1, stackFrame.columnNumber - 1);

[kouhei (in TOK), 2014/10/15 05:34:00]

This part looks similar to
WebInspector.TimelineDetailsContentHelper.appendStackTrace. dedupe?

[pdr., 2014/10/16 07:46:48]

Factored this out into the content helper itself.

+                frameRow.appendChild(urlElement);
+            });
+        }
+    });
+
+    return detailsNode;
+}
+
+/**
+ * @param {!WebInspector.TracingModel.Event} event
+ * @param {!CallbackBarrier} barrier
+ */
+WebInspector.TracingTimelineUIUtils._resolveInvalidationTrackingNodeIds = function(event, barrier)
+{
+    var backendNodeIdSet = {};
+    if (event.nodeId)
+        backendNodeIdSet[event.nodeId] = true;
+    event.invalidationTrackingEvents.forEach(function(invalidation) {
+        if (invalidation.nodeId)
+            backendNodeIdSet[invalidation.nodeId] = true;
+    });

[kouhei (in TOK), 2014/10/15 05:34:00]

This looks a bit complicated. If Object.keys(backendNodeIdSet).length is small
enough, can we just keep an array of int and then uniq it?

[pdr., 2014/10/16 07:46:48]

This is the simplest way I know how to create a set in javascript. Can you
expand on this a bit more concretely? Unfortunately, javascript arrays don't
have a nice unique function.

+
+    var backendNodeIds = [];
+    Object.keys(backendNodeIdSet).forEach(function(backendNodeId) {
+        backendNodeIds.push(parseInt(backendNodeId));

[kouhei (in TOK), 2014/10/15 05:34:00]

in other words, can we only use backendNodeIds?

[pdr., 2014/10/16 07:46:48]

It's the opposite--we can only use frontendNodeIds in the inspector UI, but we
only have backend node ids from tracing. This function is just handling the
asynchronous calls to do the mapping from backend to frontend. We could even
delete the nodeId after updating the frontend node id.

+    });
+    event.thread.target().domModel.pushNodesByBackendIdsToFrontend(
+        backendNodeIds, barrier.createCallback(updateInvalidationNodeIds));

[caseq, 2014/10/15 16:24:53]

You're calling barrier.createCallback() exactly once, so perhaps just pass a
callback, not barrier?

[pdr., 2014/10/16 07:46:48]

I think we need to use the barrier as it increments the barrier's pending
callback count and prevents callWhenDone from being called up in the caller.

+
+    function updateInvalidationNodeIds(frontendNodeIds)
+    {
+        if (!frontendNodeIds)
+            return;
+        if (frontendNodeIds.length != backendNodeIds.length) {
+            console.error('Did not resolve the correct number of frontend node ids.');
+            return;
+        }
+
+        var backendToFrontendNodeIdMap = {};
+        backendNodeIds.forEach(function(backendNodeId, index) {
+            backendToFrontendNodeIdMap[backendNodeId] = frontendNodeIds[index];
+        });
+
+        if (event.nodeId)
+            event.frontendNodeId = backendToFrontendNodeIdMap[event.nodeId];
+        event.invalidationTrackingEvents.forEach(function(invalidation) {
+            if (invalidation.nodeId)
+                invalidation.frontendNodeId = backendToFrontendNodeIdMap[invalidation.nodeId];
+        });
+    }
+}
+
+/**
  * @param {!Object} total
  * @param {!WebInspector.TracingTimelineModel} model
  * @param {!WebInspector.TracingModel.Event} event
  * @return {boolean}
  */
 WebInspector.TracingTimelineUIUtils._aggregatedStatsForTraceEvent = function(total, model, event)
 {
     var events = model.inspectedTargetEvents();
     /**
      * @param {number} startTime
@@ skipping 115 matching lines @@
     return result;
 }
 
 /**
  * @return {!WebInspector.TracingTimelineModel.Filter}
  */
 WebInspector.TracingTimelineUIUtils.hiddenEventsFilter = function()
 {
     return new WebInspector.TracingTimelineModel.InclusiveEventNameFilter(WebInspector.TracingTimelineUIUtils._visibleTypes());
 }