DevTools: brush up new details cards on timeline.

third_party/WebKit/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 570 matching lines @@
  */
 WebInspector.TimelineUIUtils._buildTraceEventDetailsSynchronously = function(event, model, linkifier, detailed, relatedNodesMap)
 {
     var fragment = createDocumentFragment();
     var stats = {};
     var recordTypes = WebInspector.TimelineModel.RecordType;
 
     // This message may vary per event.name;
     var relatedNodeLabel;
 
-    var contentHelper = new WebInspector.TimelineDetailsContentHelper(model.target(), linkifier, relatedNodesMap, false);
-
-    if (event.warning)
-        contentHelper.appendWarningRow(event);
-
-    if (detailed) {
-        contentHelper.appendTextRow(WebInspector.UIString("Type"), WebInspector.TimelineUIUtils.eventTitle(event));
-        contentHelper.appendTextRow(WebInspector.UIString("Total Time"), Number.millisToString(event.duration || 0, true));
-        contentHelper.appendTextRow(WebInspector.UIString("Self Time"), Number.millisToString(event.selfTime, true));
-    }
-    if (event.previewElement)
-        contentHelper.appendElementRow(WebInspector.UIString("Preview"), event.previewElement);
+    var contentHelper = new WebInspector.TimelineDetailsContentHelper(model.target(), linkifier, relatedNodesMap, WebInspector.TimelineUIUtils.eventTitle(event), WebInspector.TimelineUIUtils.eventStyle(event).category);
 
     var eventData = event.args["data"];
     var initiator = event.initiator;
 
+    if (event.warning)
+        contentHelper.appendWarningRow(event);
+    if (event.name === recordTypes.JSFrame) {
+        var deoptReason = eventData["deoptReason"];
+        if (deoptReason && deoptReason != "no reason")
+            contentHelper.appendWarningRow(event, WebInspector.TimelineModel.WarningType.V8Deopt);
+    }
+
+    if (detailed) {
+        contentHelper.appendTextRow(WebInspector.UIString("Self Time"), Number.millisToString(event.selfTime, true));
+        contentHelper.appendTextRow(WebInspector.UIString("Total Time"), Number.millisToString(event.duration || 0, true));
+        contentHelper.element.classList.add("timeline-details-lineup");

[caseq, 2015/12/09 00:47:19]

What does this do?

+    }
+
     switch (event.name) {
     case recordTypes.GCEvent:
     case recordTypes.MajorGC:
     case recordTypes.MinorGC:
         var delta = event.args["usedHeapSizeBefore"] - event.args["usedHeapSizeAfter"];
         contentHelper.appendTextRow(WebInspector.UIString("Collected"), Number.bytesToString(delta));
         break;
     case recordTypes.JSFrame:
         var detailsNode = WebInspector.TimelineUIUtils.buildDetailsNodeForTraceEvent(event, model.target(), linkifier);
         if (detailsNode)
             contentHelper.appendElementRow(WebInspector.UIString("Function"), detailsNode);
-        var deoptReason = eventData["deoptReason"];
-        if (deoptReason && deoptReason != "no reason")
-            contentHelper.appendWarningRow(event, WebInspector.TimelineModel.WarningType.V8Deopt);
         break;
     case recordTypes.TimerFire:
     case recordTypes.TimerInstall:
     case recordTypes.TimerRemove:
         contentHelper.appendTextRow(WebInspector.UIString("Timer ID"), eventData["timerId"]);
         if (event.name === recordTypes.TimerInstall) {
             contentHelper.appendTextRow(WebInspector.UIString("Timeout"), Number.millisToString(eventData["timeout"]));
             contentHelper.appendTextRow(WebInspector.UIString("Repeats"), !eventData["singleShot"]);
         }
         break;
@@ skipping 56 matching lines @@
         var url = eventData["styleSheetUrl"];
         if (url)
             contentHelper.appendElementRow(WebInspector.UIString("Stylesheet URL"), WebInspector.linkifyResourceAsNode(url));
         break;
     case recordTypes.UpdateLayoutTree: // We don't want to see default details.
     case recordTypes.RecalculateStyles:
         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"]);

[alph, 2015/12/09 01:07:11]

may be keep total, e.g.: 16 of 33.

-        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");
         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;
@@ skipping 33 matching lines @@
         contentHelper.appendTextRow(WebInspector.UIString("Type"), eventData["type"]);
         break;
 
     default:
         var detailsNode = WebInspector.TimelineUIUtils.buildDetailsNodeForTraceEvent(event, model.target(), linkifier);
         if (detailsNode)
             contentHelper.appendElementRow(WebInspector.UIString("Details"), detailsNode);
         break;
     }
 
+    if (event.previewElement) {
+        contentHelper = new WebInspector.TimelineDetailsContentHelper(model.target(), linkifier, relatedNodesMap);

[caseq, 2015/12/09 00:51:33]

What is this meant to do? What happens to the content of previous helper?

+        contentHelper.appendElementRow(WebInspector.UIString("Preview"), event.previewElement);
+    }
+
     var relatedNode = contentHelper.nodeForBackendId(event.backendNodeId);
     if (relatedNode)
         contentHelper.appendElementRow(relatedNodeLabel || WebInspector.UIString("Related Node"), WebInspector.DOMPresentationUtils.linkifyNodeReference(relatedNode));
 
-    if (eventData && eventData["scriptName"] && event.name !== recordTypes.FunctionCall)
+    if (eventData && eventData["scriptName"] && event.name !== recordTypes.FunctionCall) {
+        fragment.appendChild(contentHelper.element);
+        contentHelper = new WebInspector.TimelineDetailsContentHelper(model.target(), linkifier, relatedNodesMap);
         contentHelper.appendLocationRow(WebInspector.UIString("Function Call"), eventData["scriptName"], eventData["scriptLine"]);
+    }
 
-    if (event.stackTrace || (event.initiator && event.initiator.stackTrace) || event.invalidationTrackingEvents)
+    if (event.stackTrace || (event.initiator && event.initiator.stackTrace) || event.invalidationTrackingEvents) {
+        fragment.appendChild(contentHelper.element);
+        contentHelper = new WebInspector.TimelineDetailsContentHelper(model.target(), linkifier, relatedNodesMap, WebInspector.UIString("Call Stacks"));
         WebInspector.TimelineUIUtils._generateCauses(event, model.target(), contentHelper);
+    }
 
     var showPieChart = detailed && WebInspector.TimelineUIUtils._aggregatedStatsForTraceEvent(stats, model, event);
     if (showPieChart) {
+        fragment.appendChild(contentHelper.element);
+        contentHelper = new WebInspector.TimelineDetailsContentHelper(model.target(), linkifier, relatedNodesMap, WebInspector.UIString("Aggregated Time"));
         var pieChart = WebInspector.TimelineUIUtils.generatePieChart(stats, WebInspector.TimelineUIUtils.eventStyle(event).category, event.selfTime);
-        contentHelper.appendElementRow(WebInspector.UIString("Aggregated Time"), pieChart);
+        contentHelper.appendElementRow("", pieChart);
     }
-
     fragment.appendChild(contentHelper.element);
 
     return fragment;
 }
 
 WebInspector.TimelineUIUtils._aggregatedStatsKey = Symbol("aggregatedStats");
 
 /**
  * @param {!WebInspector.TimelineModel} model
  * @param {number} startTime
@@ skipping 32 matching lines @@
             continue;
         }
         WebInspector.TimelineUIUtils._collectAggregatedStatsForRecord(task, startTime, endTime, aggregatedStats);
     }
 
     var aggregatedTotal = 0;
     for (var categoryName in aggregatedStats)
         aggregatedTotal += aggregatedStats[categoryName];
     aggregatedStats["idle"] = Math.max(0, endTime - startTime - aggregatedTotal);
 
-    var contentHelper = new WebInspector.TimelineDetailsContentHelper(null, null, null, false);
+    var startOffset = startTime - model.minimumRecordTime();
+    var endOffset = endTime - model.minimumRecordTime();
+
+    var contentHelper = new WebInspector.TimelineDetailsContentHelper(null, null, null, WebInspector.UIString("Range:  %s \u2013 %s", Number.millisToString(startOffset), Number.millisToString(endOffset)));
     var pieChart = WebInspector.TimelineUIUtils.generatePieChart(aggregatedStats);
 
-    var startOffset = startTime - model.minimumRecordTime();
-    var endOffset = endTime - model.minimumRecordTime();
-    contentHelper.appendTextRow(WebInspector.UIString("Range"), WebInspector.UIString("%s \u2013 %s", Number.millisToString(startOffset), Number.millisToString(endOffset)));
-    contentHelper.appendElementRow(WebInspector.UIString("Aggregated Time"), pieChart);
+    contentHelper.appendElementRow("", pieChart);
 
     return contentHelper.element;
 }
 
 /**
  * @param {!WebInspector.TimelineModel.Record} record
  * @param {number} startTime
  * @param {number} endTime
  * @param {!Object} aggregatedStats
  */
@@ skipping 44 matching lines @@
 /**
  * @param {!WebInspector.TimelineModel.NetworkRequest} request
  * @param {!WebInspector.TimelineModel} model
  * @param {!WebInspector.Linkifier} linkifier
  * @return {!Promise<!DocumentFragment>}
  */
 WebInspector.TimelineUIUtils.buildNetworkRequestDetails = function(request, model, linkifier)
 {
     var fragment = createDocumentFragment();
     var target = model.target();
-    var contentHelper = new WebInspector.TimelineDetailsContentHelper(target, linkifier, null, true);
+    var contentHelper = new WebInspector.TimelineDetailsContentHelper(target, linkifier, null);
 
     var info = WebInspector.TimelineUIUtils.buildNetworkRequestInfo(request);
     for (var item of info) {
         if (typeof item.value === "string")
             contentHelper.appendTextRow(item.title, item.value);
         else
             contentHelper.appendElementRow(item.title, item.value);
     }
 
     /**
@@ skipping 57 matching lines @@
     case recordTypes.RecalculateStyles:
         stackLabel = WebInspector.UIString("Recalculation Forced");
         break;
     case recordTypes.Layout:
         callSiteStackLabel = WebInspector.UIString("First Layout Invalidation");
         stackLabel = WebInspector.UIString("Layout Forced");
         break;
     }
 
     // Direct cause.
-    if (event.stackTrace)
+    if (event.stackTrace && event.stackTrace.length)
         contentHelper.appendStackTrace(stackLabel || WebInspector.UIString("Stack Trace"), event.stackTrace);
 
     // Indirect causes.
     if (event.invalidationTrackingEvents && target) { // Full invalidation tracking (experimental).
         WebInspector.TimelineUIUtils._generateInvalidations(event, target, contentHelper);
     } else if (initiator && initiator.stackTrace) { // Partial invalidation tracking.
         contentHelper.appendStackTrace(callSiteStackLabel || WebInspector.UIString("First Invalidated"), initiator.stackTrace);
     }
 }
 
@@ skipping 557 matching lines @@
 }
 
 /**
  * @param {!WebInspector.TimelineFrameModelBase} frameModel
  * @param {!WebInspector.TimelineFrame} frame
  * @param {?WebInspector.FilmStripModel.Frame} filmStripFrame
  * @return {!Element}
  */
 WebInspector.TimelineUIUtils.generateDetailsContentForFrame = function(frameModel, frame, filmStripFrame)
 {
+    var result = createElementWithClass("div", "vbox");
     var pieChart = WebInspector.TimelineUIUtils.generatePieChart(frame.timeByCategory);
-    var contentHelper = new WebInspector.TimelineDetailsContentHelper(null, null, null, false);
+    var contentHelper = new WebInspector.TimelineDetailsContentHelper(null, null, null, WebInspector.UIString("Frame"));
+
+    if (frame.hasWarnings()) {
+        var value = createElement("span");
+        value.createTextChild(WebInspector.UIString("Long frame times are an indication of "));
+        value.appendChild(WebInspector.linkifyURLAsNode("https://developers.google.com/web/fundamentals/performance/rendering/",
+                                                      WebInspector.UIString("jank"), undefined, true));
+        value.createTextChild(".");
+        contentHelper.appendElementRow(WebInspector.UIString("Warning"), value, true);
+    }
+
     var duration = WebInspector.TimelineUIUtils.frameDuration(frame);
-    contentHelper.appendElementRow(WebInspector.UIString("Duration"), duration, frame.hasWarnings());
+    contentHelper.appendElementRow(WebInspector.UIString("Duration"), duration, false);
     if (filmStripFrame) {
         var filmStripPreview = createElementWithClass("img", "timeline-filmstrip-preview");
         filmStripFrame.imageDataPromise().then(onGotImageData.bind(null, filmStripPreview));
-        contentHelper.appendElementRow(WebInspector.UIString("Screenshot"), filmStripPreview);
+        contentHelper.appendElementRow("", filmStripPreview);
         filmStripPreview.addEventListener("click", frameClicked.bind(null, filmStripFrame), false);
     }
     var durationInMillis = frame.endTime - frame.startTime;
     contentHelper.appendTextRow(WebInspector.UIString("FPS"), Math.floor(1000 / durationInMillis));
     contentHelper.appendTextRow(WebInspector.UIString("CPU time"), Number.millisToString(frame.cpuTime, true));
-    contentHelper.appendElementRow(WebInspector.UIString("Aggregated Time"), pieChart);
+    result.appendChild(contentHelper.element);
+
     if (Runtime.experiments.isEnabled("layersPanel") && frame.layerTree) {
         contentHelper.appendElementRow(WebInspector.UIString("Layer tree"),
                                        WebInspector.Linkifier.linkifyUsingRevealer(frame.layerTree, WebInspector.UIString("show")));
     }
 
     /**
      * @param {!Element} image
      * @param {?string} data
      */
     function onGotImageData(image, data)
     {
         if (data)
             image.src = "data:image/jpg;base64," + data;
     }
 
     /**
      * @param {!WebInspector.FilmStripModel.Frame} filmStripFrame
      */
     function frameClicked(filmStripFrame)
     {
         new WebInspector.FilmStripView.Dialog(filmStripFrame, 0);
     }
 
-    return contentHelper.element;
+    result.appendChild(contentHelper.element);

[alph, 2015/12/09 01:07:11]

doing it twice.

+    return result;
 }
 
 /**
  * @param {!WebInspector.TimelineFrame} frame
  * @return {!Element}
  */
 WebInspector.TimelineUIUtils.frameDuration = function(frame)
 {
     var durationText = WebInspector.UIString("%s (at %s)", Number.millisToString(frame.endTime - frame.startTime, true),
         Number.millisToString(frame.startTimeOffset, true));
     var element = createElement("span");
     element.createTextChild(durationText);
-    if (!frame.hasWarnings())
-        return element;
-    element.createTextChild(WebInspector.UIString(". Long frame times are an indication of "));
-    element.appendChild(WebInspector.linkifyURLAsNode("https://developers.google.com/web/fundamentals/performance/rendering/",
-                                                      WebInspector.UIString("jank"), undefined, true));
-    element.createTextChild(".");
     return element;
 }
 
 /**
  * @param {!CanvasRenderingContext2D} context
  * @param {number} width
  * @param {number} height
  * @param {string} color0
  * @param {string} color1
  * @param {string} color2
@@ skipping 301 matching lines @@
         row.appendChild(cell);
         this._contentTable.appendChild(row);
     }
 }
 
 /**
  * @constructor
  * @param {?WebInspector.Target} target
  * @param {?WebInspector.Linkifier} linkifier
  * @param {?Map<number, ?WebInspector.DOMNode>} relatedNodesMap
- * @param {boolean} monospaceValues
+ * @param {string=} title
+ * @param {!WebInspector.TimelineCategory=} category
  */
-WebInspector.TimelineDetailsContentHelper = function(target, linkifier, relatedNodesMap, monospaceValues)
+WebInspector.TimelineDetailsContentHelper = function(target, linkifier, relatedNodesMap, title, category)
 {
     this._linkifier = linkifier;
     this._target = target;
     this._relatedNodesMap = relatedNodesMap;
-    this.element = createElement("div");
-    this.element.className = "timeline-details-view-block";
-    this._monospaceValues = monospaceValues;
+    this.element = createElementWithClass("div", "timeline-details-view-block");
+
+    if (title) {
+        var titleElement = this.element.createChild("div", "timeline-details-chip-title");
+        if (category)
+            titleElement.createChild("div", "timeline-" + category.name);
+        titleElement.createTextChild(title);
+    }
+    this._tableElement = this.element.createChild("div", "vbox timeline-details-chip-body");
 }
 
 WebInspector.TimelineDetailsContentHelper.prototype = {
     /**
      * @return {?WebInspector.Linkifier}
      */
     linkifier: function()
     {
         return this._linkifier;
     },
 
     /**
      * @param {?number} backendNodeId
      * @return {?WebInspector.DOMNode}
      */
     nodeForBackendId: function(backendNodeId)
     {
         if (!backendNodeId || !this._relatedNodesMap)
             return null;
         return this._relatedNodesMap.get(backendNodeId) || null;
     },
 
     /**
      * @param {string} title
      * @param {string|number|boolean} value
      */
     appendTextRow: function(title, value)
     {
-        var rowElement = this.element.createChild("div", "timeline-details-view-row");
+        var rowElement = this._tableElement.createChild("div", "timeline-details-view-row");
         rowElement.createChild("div", "timeline-details-view-row-title").textContent = title;
-        rowElement.createChild("div", "timeline-details-view-row-value" + (this._monospaceValues ? " monospace" : "")).textContent = value;
+        rowElement.createChild("div", "timeline-details-view-row-value").textContent = value;
     },
 
     /**
      * @param {string} title
      * @param {!Node|string} content
      * @param {boolean=} isWarning
+     * @param {boolean=} isStacked
      */
-    appendElementRow: function(title, content, isWarning)
+    appendElementRow: function(title, content, isWarning, isStacked)
     {
-        var rowElement = this.element.createChild("div", "timeline-details-view-row");
+        var rowElement = this._tableElement.createChild("div", "timeline-details-view-row");
         if (isWarning)
             rowElement.classList.add("timeline-details-warning");
+        if (isStacked)
+            rowElement.classList.add("timeline-details-stack-values");
         var titleElement = rowElement.createChild("div", "timeline-details-view-row-title");
         titleElement.textContent = title;
-        var valueElement = rowElement.createChild("div", "timeline-details-view-row-value" + (this._monospaceValues ? " monospace" : ""));
+        var valueElement = rowElement.createChild("div", "timeline-details-view-row-value");
         if (content instanceof Node)
             valueElement.appendChild(content);
         else
             valueElement.createTextChild(content || "");
     },
 
     /**
      * @param {string} title
      * @param {string} url
      * @param {number} startLine
@@ skipping 26 matching lines @@
 
     /**
      * @param {string} title
      * @param {!Array.<!ConsoleAgent.CallFrame>} stackTrace
      */
     appendStackTrace: function(title, stackTrace)
     {
         if (!this._linkifier || !this._target)
             return;
 
-        var rowElement = this.element.createChild("div", "timeline-details-view-row");
+        var rowElement = this._tableElement.createChild("div", "timeline-details-view-row");
         rowElement.createChild("div", "timeline-details-view-row-title").textContent = title;
         this.createChildStackTraceElement(rowElement, stackTrace);
     },
 
     /**
      * @param {!Element} parentElement
      * @param {!Array.<!ConsoleAgent.CallFrame>} stackTrace
      */
     createChildStackTraceElement: function(parentElement, stackTrace)
     {
         if (!this._linkifier || !this._target)
             return;
-
-        var stackTraceElement = parentElement.createChild("div", "timeline-details-view-row-value timeline-details-view-row-stack-trace monospace");
-
+        parentElement.classList.add("timeline-details-stack-values");
+        var stackTraceElement = parentElement.createChild("div", "timeline-details-view-row-value timeline-details-view-row-stack-trace");
         var callFrameElem = WebInspector.DOMPresentationUtils.buildStackTracePreviewContents(this._target, this._linkifier, stackTrace);
-
         stackTraceElement.appendChild(callFrameElem);
     },
 
     /**
      * @param {!WebInspector.TracingModel.Event} event
      * @param {string=} warningType
      */
     appendWarningRow: function(event, warningType)
     {
         var warning = WebInspector.TimelineUIUtils.eventWarning(event, warningType);
@@ skipping 30 matching lines @@
     case warnings.V8Deopt:
         span.appendChild(WebInspector.linkifyURLAsNode("https://github.com/GoogleChrome/devtools-docs/issues/53",
             WebInspector.UIString("Not optimized"), undefined, true));
         span.createTextChild(WebInspector.UIString(": %s", eventData["deoptReason"]));
         break;
     default:
         console.assert(false, "Unhandled TimelineModel.WarningType");
     }
     return span;
 }