[ Do not submit ] Prototype for invalidation analysis

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 614 matching lines @@
     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.
         contentHelper.appendTextRow(WebInspector.UIString("Elements affected"), event.args["elementCount"]);
         callStackLabel = WebInspector.UIString("Styles recalculation forced");
+        // FIXME: Show invalidation tracking for updating style.
         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"));
         callSiteStackTraceLabel = WebInspector.UIString("Layout invalidated");
         callStackLabel = WebInspector.UIString("Layout forced");
         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"), eventData["message"]);
         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 29 matching lines @@
         contentHelper.appendStackTrace(callStackLabel || WebInspector.UIString("Call Stack"), eventStackTrace);
 
     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);
+
+    // Show invalidation tracking.
+    if (event.styleInvalidationTrackingEvents && event.styleInvalidationTrackingEvents.length) {
+        contentHelper.element.appendChild(
+            this._buildInvalidationDetailsNode("Style invalidations", linkifier, event, event.styleInvalidationTrackingEvents));

[caseq, 2014/08/26 12:19:07]

Display strings should be passed via WebInspector.UIString()

+    }
+    if (event.layoutInvalidationTrackingEvents && event.layoutInvalidationTrackingEvents.length) {
+        contentHelper.element.appendChild(
+            this._buildInvalidationDetailsNode("Layout invalidations", linkifier, event, event.layoutInvalidationTrackingEvents));
+    }
+
     fragment.appendChild(contentHelper.element);
     return fragment;
 }
 
 /**
  * @param {!Object} total
  * @param {!WebInspector.TracingTimelineModel} model
  * @param {!WebInspector.TracingModel.Event} event
  * @return {boolean}
  */
@@ skipping 90 matching lines @@
     else if (recordType === recordTypes.BeginFrame)
         eventDivider.className += " timeline-frame-divider";
 
     if (title)
         eventDivider.title = title;
 
     return eventDivider;
 }
 
 /**
+ * TODO: write me
+ */
+WebInspector.TracingTimelineUIUtils._buildInvalidationDetailsNode = function(title, linkifier, event, 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);
+    var eventsList = document.createElement("ol");
+    detailsNode.appendChild(eventsList);
+
+    invalidationEvents.forEach(function(invalidationEvent, idx) {

[caseq, 2014/08/26 12:19:08]

Does this produce readable output for large invalidations?

+        var row = document.createElement("li");
+        eventsList.appendChild(row);
+
+        var nodeRow = document.createElement("div");
+        row.appendChild(nodeRow);
+        var target = event.thread.target();
+        var node = target.domModel.nodeForId(invalidationEvent.nodeId);

[caseq, 2014/08/26 12:19:07]

Does this actually work? It looks like it shouldn't...

+        if (node)
+            nodeRow.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeReference(node));
+        else if (invalidationEvent.nodeName)
+            nodeRow.textContent = '[' + invalidationEvent.nodeName + ']';
+        else
+            nodeRow.textContent = '[ unknown node ]';
+
+        var callstack = invalidationEvent.callstack ? JSON.parse(invalidationEvent.callstack) : [];
+        if (callstack.length > 0) {
+            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);
+                frameRow.appendChild(urlElement);
+            });
+        }
+    });
+    return detailsNode;
+}
+
+/**
  * @return {!Array.<string>}
  */
 WebInspector.TracingTimelineUIUtils._visibleTypes = function()
 {
     var eventStyles = WebInspector.TracingTimelineUIUtils._initEventStyles();
     var result = [];
     for (var name in eventStyles) {
         if (!eventStyles[name].hidden)
             result.push(name);
     }
     return result;
 }
 
 /**
  * @return {!WebInspector.TracingTimelineModel.Filter}
  */
 WebInspector.TracingTimelineUIUtils.hiddenEventsFilter = function()
 {
     return new WebInspector.TracingTimelineModel.InclusiveEventNameFilter(WebInspector.TracingTimelineUIUtils._visibleTypes());
 }