Timeline: show record details as a tabbed pane

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 359 matching lines @@
          rowElement.createTextChild(WebInspector.UIString("%s %s", formatter(value), category.title));
     }
     return element;
 }
 
 /**
  * @param {!WebInspector.TimelineFrameModel} frameModel
  * @param {!WebInspector.TimelineFrame} frame
  * @return {!Element}
  */
-WebInspector.TimelineUIUtils.generatePopupContentForFrame = function(frameModel, frame)
+WebInspector.TimelineUIUtils.generateDetailsContentForFrame = function(frameModel, frame)
 {
-    var contentHelper = new WebInspector.TimelinePopupContentHelper(WebInspector.UIString("Frame"));
+    var contentHelper = new WebInspector.TimelineDetailsContentHelper(null, null, true);
     var durationInMillis = frame.endTime - frame.startTime;
     var durationText = WebInspector.UIString("%s (at %s)", Number.millisToString(frame.endTime - frame.startTime, true),
         Number.millisToString(frame.startTimeOffset, true));
     contentHelper.appendTextRow(WebInspector.UIString("Duration"), durationText);
     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"),
         WebInspector.TimelineUIUtils._generateAggregatedInfo(frame.timeByCategory));
     if (WebInspector.experimentsSettings.layersPanel.isEnabled() && frame.layerTree) {
         contentHelper.appendElementRow(WebInspector.UIString("Layer tree"),
                                        WebInspector.Linkifier.linkifyUsingRevealer(frame.layerTree, WebInspector.UIString("show")));
     }
-    return contentHelper.contentTable();
-}
-
-/**
- * @param {!WebInspector.FrameStatistics} statistics
- * @return {!Element}
- */
-WebInspector.TimelineUIUtils.generatePopupContentForFrameStatistics = function(statistics)
-{
-    /**
-     * @param {number} time
-     */
-    function formatTimeAndFPS(time)
-    {
-        return WebInspector.UIString("%s (%.0f FPS)", Number.millisToString(time, true), 1 / time);
-    }
-
-    var contentHelper = new WebInspector.TimelineDetailsContentHelper(null, null, false);
-    contentHelper.appendTextRow(WebInspector.UIString("Minimum Time"), formatTimeAndFPS(statistics.minDuration));
-    contentHelper.appendTextRow(WebInspector.UIString("Average Time"), formatTimeAndFPS(statistics.average));
-    contentHelper.appendTextRow(WebInspector.UIString("Maximum Time"), formatTimeAndFPS(statistics.maxDuration));
-    contentHelper.appendTextRow(WebInspector.UIString("Standard Deviation"), Number.millisToString(statistics.stddev, true));
-
     return contentHelper.element;
 }
 
 /**
  * @param {!CanvasRenderingContext2D} context
  * @param {number} width
  * @param {number} height
  * @param {string} color0
  * @param {string} color1
  * @param {string} color2
@@ skipping 39 matching lines @@
        "}";
 }
 
 /**
  * @param {!WebInspector.TimelineModel.Record} record
  * @param {!WebInspector.TimelineModel} model
  * @param {!WebInspector.Linkifier} linkifier
  * @param {function(!DocumentFragment)} callback
  * @param {boolean} loadedFromFile
  */
-WebInspector.TimelineUIUtils.generatePopupContent = function(record, model, linkifier, callback, loadedFromFile)
+WebInspector.TimelineUIUtils.generateDetailsContent = function(record, model, linkifier, callback, loadedFromFile)
 {
     var imageElement = /** @type {?Element} */ (record.getUserObject("TimelineUIUtils::preview-element") || null);
     var relatedNode = null;
     var recordData = record.data();
     var barrier = new CallbackBarrier();
     if (!imageElement && WebInspector.TimelineUIUtils.needsPreviewElement(record.type()))
         WebInspector.DOMPresentationUtils.buildImagePreviewContents(record.target(), recordData["url"], false, barrier.createCallback(saveImage));
     if (recordData["backendNodeId"])
         record.target().domModel.pushNodesByBackendIdsToFrontend([recordData["backendNodeId"]], barrier.createCallback(setRelatedNode));
     barrier.callWhenDone(callbackWrapper);
@@ skipping 11 matching lines @@
      * @param {?Array.<!DOMAgent.NodeId>} nodeIds
      */
     function setRelatedNode(nodeIds)
     {
         if (nodeIds)
             relatedNode = record.target().domModel.nodeForId(nodeIds[0]);
     }
 
     function callbackWrapper()
     {
-        callback(WebInspector.TimelineUIUtils._generatePopupContentSynchronously(record, model, linkifier, imageElement, relatedNode, loadedFromFile));
+        callback(WebInspector.TimelineUIUtils._generateDetailsContentSynchronously(record, model, linkifier, imageElement, relatedNode, loadedFromFile));
     }
 }
 
 /**
  * @param {!WebInspector.TimelineModel.Record} record
  * @param {!WebInspector.TimelineModel} model
  * @param {!WebInspector.Linkifier} linkifier
  * @param {?Element} imagePreviewElement
  * @param {?WebInspector.DOMNode} relatedNode
  * @param {boolean} loadedFromFile
  * @return {!DocumentFragment}
  */
-WebInspector.TimelineUIUtils._generatePopupContentSynchronously = function(record, model, linkifier, imagePreviewElement, relatedNode, loadedFromFile)
+WebInspector.TimelineUIUtils._generateDetailsContentSynchronously = function(record, model, linkifier, imagePreviewElement, relatedNode, loadedFromFile)
 {
     var fragment = document.createDocumentFragment();
     if (record.children().length)
         fragment.appendChild(WebInspector.TimelineUIUtils.generatePieChart(record.aggregatedStats(), record.category(), record.selfTime()));
     else
         fragment.appendChild(WebInspector.TimelineUIUtils.generatePieChart(record.aggregatedStats()));
 
     const recordTypes = WebInspector.TimelineModel.RecordType;
 
     // The messages may vary per record.type();
@@ skipping 478 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(this._target, stackFrame.url, stackFrame.lineNumber - 1);
             row.appendChild(urlElement);
         }
     }
 }