DevTools: complete the move of UI builders from timeline presentation record to timeline ui uti…

Source/devtools/front_end/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 414 matching lines @@
         ".timeline-details-view .timeline-" + category.name + ", " +
         ".timeline-category-" + category.name + " .timeline-tree-icon"
 
     return selector + " { background-image: linear-gradient(" +
        category.fillColorStop0 + ", " + category.fillColorStop1 + " 25%, " + category.fillColorStop1 + " 25%, " + category.fillColorStop1 + ");" +
        " border-color: " + category.borderColor +
        "}";
 }
 
 /**
+ * @param {!WebInspector.TimelinePresentationModel.Record} record
+ * @param {!WebInspector.Linkifier} linkifier
+ * @param {function(!DocumentFragment)} callback
+ */
+WebInspector.TimelineUIUtils.generatePopupContent = function(record, linkifier, callback)
+{
+    var imageElement = /** @type {?Element} */ (record.getUserObject("TimelinePresentationModel::preview-element") || null);
+    var relatedNode = /** @type {?WebInspector.DOMNode} */ (record.getUserObject("TimelinePresentationModel::related-node") || null);
+
+    var barrier = new CallbackBarrier();
+    if (!imageElement && WebInspector.TimelineUIUtils.needsPreviewElement(record.type))
+        WebInspector.DOMPresentationUtils.buildImagePreviewContents(record.url, false, barrier.createCallback(saveImage));
+    if (!relatedNode && record.relatedBackendNodeId())
+        WebInspector.domAgent.pushNodeByBackendIdToFrontend(record.relatedBackendNodeId(), barrier.createCallback(saveNode));
+    barrier.callWhenDone(callbackWrapper);
+
+    /**
+     * @param {!Element=} element
+     */
+    function saveImage(element)
+    {
+        imageElement = element || null;
+        record.setUserObject("TimelinePresentationModel::preview-element", element);
+    }
+
+    /**
+     * @param {?DOMAgent.NodeId} nodeId
+     */
+    function saveNode(nodeId)
+    {
+        if (nodeId !== null) {
+            relatedNode = WebInspector.domAgent.nodeForId(nodeId);
+            record.setUserObject("TimelinePresentationModel::related-node", relatedNode);
+        }
+    }
+
+    /**
+     * @this {WebInspector.TimelinePresentationModel.Record}
+     */
+    function callbackWrapper()
+    {
+        callback(WebInspector.TimelineUIUtils._generatePopupContentSynchronously(record, linkifier, imageElement, relatedNode));
+    }
+}
+
+/**
+ * @param {!WebInspector.TimelinePresentationModel.Record} record
+ * @param {!WebInspector.Linkifier} linkifier
+ * @param {?Element} imagePreviewElement
+ * @param {?WebInspector.DOMNode} relatedNode
+ * @return {!DocumentFragment}
+ */
+WebInspector.TimelineUIUtils._generatePopupContentSynchronously = function(record, linkifier, imagePreviewElement, relatedNode)
+{
+    var fragment = document.createDocumentFragment();
+    if (!record.coalesced && record.children.length)
+        fragment.appendChild(WebInspector.TimelineUIUtils.generatePieChart(record.aggregatedStats, record.category, record.selfTime));
+    else
+        fragment.appendChild(WebInspector.TimelineUIUtils.generatePieChart(record.aggregatedStats));
+
+    if (record.coalesced)
+        return fragment;
+
+    const recordTypes = WebInspector.TimelineModel.RecordType;
+
+    // The messages may vary per record type;
+    var callSiteStackTraceLabel;
+    var callStackLabel;
+    var relatedNodeLabel;
+
+    var contentHelper = new WebInspector.TimelineDetailsContentHelper(linkifier, true);
+    contentHelper.appendTextRow(WebInspector.UIString("Self Time"), Number.millisToString(record.selfTime, true));
+    contentHelper.appendTextRow(WebInspector.UIString("Start Time"), Number.millisToString(record.startTimeOffset));
+
+    switch (record.type) {
+        case recordTypes.GCEvent:
+            contentHelper.appendTextRow(WebInspector.UIString("Collected"), Number.bytesToString(record.data["usedHeapSizeDelta"]));
+            break;
+        case recordTypes.TimerFire:
+            callSiteStackTraceLabel = WebInspector.UIString("Timer installed");
+            // Fall-through intended.
+
+        case recordTypes.TimerInstall:
+        case recordTypes.TimerRemove:
+            contentHelper.appendTextRow(WebInspector.UIString("Timer ID"), record.data["timerId"]);
+            if (typeof record.timeout === "number") {
+                contentHelper.appendTextRow(WebInspector.UIString("Timeout"), Number.millisToString(record.timeout));
+                contentHelper.appendTextRow(WebInspector.UIString("Repeats"), !record.singleShot);
+            }
+            break;
+        case recordTypes.FireAnimationFrame:
+            callSiteStackTraceLabel = WebInspector.UIString("Animation frame requested");
+            contentHelper.appendTextRow(WebInspector.UIString("Callback ID"), record.data["id"]);
+            break;
+        case recordTypes.FunctionCall:
+            if (record.scriptName)
+                contentHelper.appendLocationRow(WebInspector.UIString("Location"), record.scriptName, record.scriptLine);
+            break;
+        case recordTypes.ScheduleResourceRequest:
+        case recordTypes.ResourceSendRequest:
+        case recordTypes.ResourceReceiveResponse:
+        case recordTypes.ResourceReceivedData:
+        case recordTypes.ResourceFinish:
+            contentHelper.appendElementRow(WebInspector.UIString("Resource"), WebInspector.linkifyResourceAsNode(record.url));
+            if (imagePreviewElement)
+                contentHelper.appendElementRow(WebInspector.UIString("Preview"), imagePreviewElement);
+            if (record.data["requestMethod"])
+                contentHelper.appendTextRow(WebInspector.UIString("Request Method"), record.data["requestMethod"]);
+            if (typeof record.data["statusCode"] === "number")
+                contentHelper.appendTextRow(WebInspector.UIString("Status Code"), record.data["statusCode"]);
+            if (record.data["mimeType"])
+                contentHelper.appendTextRow(WebInspector.UIString("MIME Type"), record.data["mimeType"]);
+            if (record.data["encodedDataLength"])
+                contentHelper.appendTextRow(WebInspector.UIString("Encoded Data Length"), WebInspector.UIString("%d Bytes", record.data["encodedDataLength"]));
+            break;
+        case recordTypes.EvaluateScript:
+            if (record.data && record.url)
+                contentHelper.appendLocationRow(WebInspector.UIString("Script"), record.url, record.data["lineNumber"]);
+            break;
+        case recordTypes.Paint:
+            var clip = record.data["clip"];
+            if (clip) {
+                contentHelper.appendTextRow(WebInspector.UIString("Location"), WebInspector.UIString("(%d, %d)", clip[0], clip[1]));
+                var clipWidth = WebInspector.TimelinePresentationModel.quadWidth(clip);
+                var clipHeight = WebInspector.TimelinePresentationModel.quadHeight(clip);
+                contentHelper.appendTextRow(WebInspector.UIString("Dimensions"), WebInspector.UIString("%d × %d", clipWidth, clipHeight));
+            } else {
+                // Backward compatibility: older version used x, y, width, height fields directly in data.
+                if (typeof record.data["x"] !== "undefined" && typeof record.data["y"] !== "undefined")
+                    contentHelper.appendTextRow(WebInspector.UIString("Location"), WebInspector.UIString("(%d, %d)", record.data["x"], record.data["y"]));
+                if (typeof record.data["width"] !== "undefined" && typeof record.data["height"] !== "undefined")
+                    contentHelper.appendTextRow(WebInspector.UIString("Dimensions"), WebInspector.UIString("%d\u2009\u00d7\u2009%d", record.data["width"], record.data["height"]));
+            }
+            // Fall-through intended.
+
+        case recordTypes.PaintSetup:
+        case recordTypes.Rasterize:
+        case recordTypes.ScrollLayer:
+            relatedNodeLabel = WebInspector.UIString("Layer root");
+            break;
+        case recordTypes.AutosizeText:
+            relatedNodeLabel = WebInspector.UIString("Root node");
+            break;
+        case recordTypes.DecodeImage:
+        case recordTypes.ResizeImage:
+            relatedNodeLabel = WebInspector.UIString("Image element");
+            if (record.url)
+                contentHelper.appendElementRow(WebInspector.UIString("Image URL"), WebInspector.linkifyResourceAsNode(record.url));
+            break;
+        case recordTypes.RecalculateStyles: // We don't want to see default details.
+            if (record.data["elementCount"])
+                contentHelper.appendTextRow(WebInspector.UIString("Elements affected"), record.data["elementCount"]);
+            callStackLabel = WebInspector.UIString("Styles recalculation forced");
+            break;
+        case recordTypes.Layout:
+            if (record.data["dirtyObjects"])
+                contentHelper.appendTextRow(WebInspector.UIString("Nodes that need layout"), record.data["dirtyObjects"]);
+            if (record.data["totalObjects"])
+                contentHelper.appendTextRow(WebInspector.UIString("Layout tree size"), record.data["totalObjects"]);
+            if (typeof record.data["partialLayout"] === "boolean") {
+                contentHelper.appendTextRow(WebInspector.UIString("Layout scope"),
+                   record.data["partialLayout"] ? WebInspector.UIString("Partial") : WebInspector.UIString("Whole document"));
+            }
+            callSiteStackTraceLabel = WebInspector.UIString("Layout invalidated");
+            callStackLabel = WebInspector.UIString("Layout forced");
+            relatedNodeLabel = WebInspector.UIString("Layout root");
+            break;
+        case recordTypes.ConsoleTime:
+            contentHelper.appendTextRow(WebInspector.UIString("Message"), record.data["message"]);
+            break;
+        case recordTypes.WebSocketCreate:
+        case recordTypes.WebSocketSendHandshakeRequest:
+        case recordTypes.WebSocketReceiveHandshakeResponse:
+        case recordTypes.WebSocketDestroy:
+            if (typeof record.webSocketURL !== "undefined")
+                contentHelper.appendTextRow(WebInspector.UIString("URL"), record.webSocketURL);
+            if (typeof record.webSocketProtocol !== "undefined")
+                contentHelper.appendTextRow(WebInspector.UIString("WebSocket Protocol"), record.webSocketProtocol);
+            if (typeof record.data["message"] !== "undefined")
+                contentHelper.appendTextRow(WebInspector.UIString("Message"), record.data["message"]);
+            break;
+        case recordTypes.EmbedderCallback:
+            contentHelper.appendTextRow(WebInspector.UIString("Callback Function"), record.embedderCallbackName);
+            break;
+        default:
+            var detailsNode = WebInspector.TimelineUIUtils.buildDetailsNode(record, linkifier);
+            if (detailsNode)
+                contentHelper.appendElementRow(WebInspector.UIString("Details"), detailsNode);
+            break;
+    }
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     */
+    function createNodeAnchor(node)
+    {
+        var span = document.createElement("span");
+        span.classList.add("node-link");
+        span.addEventListener("click", WebInspector.Revealer.reveal.bind(WebInspector.Revealer, node, undefined), false);
+        WebInspector.DOMPresentationUtils.decorateNodeLabel(node, span);
+        return span;
+    }
+
+    if (relatedNode)
+        contentHelper.appendElementRow(relatedNodeLabel || WebInspector.UIString("Related node"), createNodeAnchor(relatedNode));
+
+    if (record.scriptName && record.type !== recordTypes.FunctionCall)
+        contentHelper.appendLocationRow(WebInspector.UIString("Function Call"), record.scriptName, record.scriptLine);
+
+    if (record.jsHeapSizeUsed) {
+        if (record.usedHeapSizeDelta) {
+            var sign = record.usedHeapSizeDelta > 0 ? "+" : "-";
+            contentHelper.appendTextRow(WebInspector.UIString("Used JavaScript Heap Size"),
+                WebInspector.UIString("%s (%s%s)", Number.bytesToString(record.jsHeapSizeUsed), sign, Number.bytesToString(Math.abs(record.usedHeapSizeDelta))));
+        } else if (record.category === WebInspector.TimelineUIUtils.categories().scripting)
+            contentHelper.appendTextRow(WebInspector.UIString("Used JavaScript Heap Size"), Number.bytesToString(record.jsHeapSizeUsed));
+    }
+
+    if (record.callSiteStackTrace)
+        contentHelper.appendStackTrace(callSiteStackTraceLabel || WebInspector.UIString("Call Site stack"), record.callSiteStackTrace);
+
+    if (record.stackTrace)
+        contentHelper.appendStackTrace(callStackLabel || WebInspector.UIString("Call Stack"), record.stackTrace);
+
+    if (record.warnings) {
+        var ul = document.createElement("ul");
+        for (var i = 0; i < record.warnings.length; ++i)
+            ul.createChild("li").textContent = record.warnings[i];
+        contentHelper.appendElementRow(WebInspector.UIString("Warning"), ul);
+    }
+    fragment.appendChild(contentHelper.element);
+    return fragment;
+}
+
+/**
+ * @param {!WebInspector.TimelinePresentationModel.Record} record
+ * @param {!WebInspector.Linkifier} linkifier
+ * @return {?Node}
+ */
+WebInspector.TimelineUIUtils.buildDetailsNode = function(record, linkifier)
+{
+    var details;
+    var detailsText;
+    if (record.coalesced) {
+        var node = document.createElement("span");
+        node.textContent = WebInspector.UIString("× %d", record.children.length);
+        return node;
+    }
+
+    switch (record.type) {
+    case WebInspector.TimelineModel.RecordType.GCEvent:
+        detailsText = WebInspector.UIString("%s collected", Number.bytesToString(record.data["usedHeapSizeDelta"]));
+        break;
+    case WebInspector.TimelineModel.RecordType.TimerFire:
+        details = linkifyScriptLocation();
+        detailsText = record.data["timerId"];
+        break;
+    case WebInspector.TimelineModel.RecordType.FunctionCall:
+        if (record.scriptName)
+            details = linkifyLocation(record.scriptName, record.scriptLine, 0);
+        break;
+    case WebInspector.TimelineModel.RecordType.FireAnimationFrame:
+        details = linkifyScriptLocation();
+        detailsText = record.data["id"];
+        break;
+    case WebInspector.TimelineModel.RecordType.EventDispatch:
+        detailsText = record.data ? record.data["type"] : null;
+        break;
+    case WebInspector.TimelineModel.RecordType.Paint:
+        var width = record.data.clip ? WebInspector.TimelinePresentationModel.quadWidth(record.data.clip) : record.data.width;
+        var height = record.data.clip ? WebInspector.TimelinePresentationModel.quadHeight(record.data.clip) : record.data.height;
+        if (width && height)
+            detailsText = WebInspector.UIString("%d\u2009\u00d7\u2009%d", width, height);
+        break;
+    case WebInspector.TimelineModel.RecordType.TimerInstall:
+    case WebInspector.TimelineModel.RecordType.TimerRemove:
+        details = linkifyTopCallFrame();
+        detailsText = record.data["timerId"];
+        break;
+    case WebInspector.TimelineModel.RecordType.RequestAnimationFrame:
+    case WebInspector.TimelineModel.RecordType.CancelAnimationFrame:
+        details = linkifyTopCallFrame();
+        detailsText = record.data["id"];
+        break;
+    case WebInspector.TimelineModel.RecordType.ParseHTML:
+    case WebInspector.TimelineModel.RecordType.RecalculateStyles:
+        details = linkifyTopCallFrame();
+        break;
+    case WebInspector.TimelineModel.RecordType.EvaluateScript:
+        details = record.url ? linkifyLocation(record.url, record.data["lineNumber"], 0) : null;
+        break;
+    case WebInspector.TimelineModel.RecordType.XHRReadyStateChange:
+    case WebInspector.TimelineModel.RecordType.XHRLoad:
+    case WebInspector.TimelineModel.RecordType.ScheduleResourceRequest:
+    case WebInspector.TimelineModel.RecordType.ResourceSendRequest:
+    case WebInspector.TimelineModel.RecordType.ResourceReceivedData:
+    case WebInspector.TimelineModel.RecordType.ResourceReceiveResponse:
+    case WebInspector.TimelineModel.RecordType.ResourceFinish:
+    case WebInspector.TimelineModel.RecordType.DecodeImage:
+    case WebInspector.TimelineModel.RecordType.ResizeImage:
+        detailsText = WebInspector.displayNameForURL(record.url);
+        break;
+    case WebInspector.TimelineModel.RecordType.ConsoleTime:
+        detailsText = record.data["message"];
+        break;
+    case WebInspector.TimelineModel.RecordType.EmbedderCallback:
+        detailsText = record.data["callbackName"];
+        break;
+    default:
+        details = record.scriptName ? linkifyLocation(record.scriptName, record.scriptLine, 0) : linkifyTopCallFrame();
+        break;
+    }
+
+    if (!details && detailsText)
+        details = document.createTextNode(detailsText);
+    return details;
+
+    /**
+     * @param {string} url
+     * @param {number} lineNumber
+     * @param {number=} columnNumber
+     */
+    function linkifyLocation(url, lineNumber, columnNumber)
+    {
+        // FIXME(62725): stack trace line/column numbers are one-based.
+        columnNumber = columnNumber ? columnNumber - 1 : 0;
+        return linkifier.linkifyLocation(url, lineNumber - 1, columnNumber, "timeline-details");
+    }
+
+    /**
+     * @param {!ConsoleAgent.CallFrame} callFrame
+     */
+    function linkifyCallFrame(callFrame)
+    {
+        return linkifyLocation(callFrame.url, callFrame.lineNumber, callFrame.columnNumber);
+    }
+
+    /**
+     * @return {?Element}
+     */
+    function linkifyTopCallFrame()
+    {
+        if (record.stackTrace)
+            return linkifyCallFrame(record.stackTrace[0]);
+        if (record.callSiteStackTrace)
+            return linkifyCallFrame(record.callSiteStackTrace[0]);
+        return null;
+    }
+
+    /**
+     * @return {?Element}
+     */
+    function linkifyScriptLocation()
+    {
+        return record.scriptName ? linkifyLocation(record.scriptName, record.scriptLine, 0) : null;
+    }
+}
+
+/**
  * @constructor
  * @extends {WebInspector.Object}
  * @param {string} name
  * @param {string} title
  * @param {number} overviewStripGroupIndex
  * @param {string} borderColor
  * @param {string} fillColorStop0
  * @param {string} fillColorStop1
  */
 WebInspector.TimelineCategory = function(name, title, overviewStripGroupIndex, borderColor, fillColorStop0, fillColorStop1)
@@ skipping 162 matching lines @@
         for (var i = 0; i < stackTrace.length; ++i) {
             var stackFrame = stackTrace[i];
             var row = stackTraceElement.createChild("div");
             row.createTextChild(stackFrame.functionName || WebInspector.UIString("(anonymous function)"));
             row.createTextChild(" @ ");
             var urlElement = this._linkifier.linkifyLocation(stackFrame.url, stackFrame.lineNumber - 1);
             row.appendChild(urlElement);
         }
     }
 }