Timeline: show selected event details in Tracing mode

Source/devtools/front_end/TimelineTracingView.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
  * @implements {WebInspector.TimelineModeView}
  * @implements {WebInspector.FlameChartDelegate}
  * @extends {WebInspector.VBox}
  * @param {!WebInspector.TimelineModeViewDelegate} delegate
  */
 WebInspector.TimelineTracingView = function(delegate)
 {
     WebInspector.VBox.call(this);
     this._delegate = delegate;
     this._tracingModel = new WebInspector.TracingModel();
     this.element.classList.add("timeline-flamechart");
     this.registerRequiredCSS("flameChart.css");
-    this._delegate = delegate;
     this._dataProvider = new WebInspector.TraceViewFlameChartDataProvider(this._tracingModel);
     this._mainView = new WebInspector.FlameChart(this._dataProvider, this, true, true);
     this._mainView.show(this.element);
     this._mainView.addEventListener(WebInspector.FlameChart.Events.EntrySelected, this._onEntrySelected, this);
 }
 
 WebInspector.TimelineTracingView.prototype = {
     timelineStarted: function()
     {
         if (this._recordingTrace)
@@ skipping 90 matching lines @@
     /**
      * @param {?WebInspector.TimelineModel.Record} record
      */
     setSelectedRecord: function(record) {},
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onEntrySelected: function(event)
     {
+        var index = /** @type {number} */ (event.data);
+        var record = this._dataProvider._recordAt(index);
+        if (!record || this._dataProvider._isHeaderRecord(record)) {
+            this._delegate.showInDetails("", document.createTextNode(""));
+            return;
+        }
+        var contentHelper = new WebInspector.TimelineDetailsContentHelper(new WebInspector.Linkifier(), false);
+        contentHelper.appendTextRow(WebInspector.UIString("Name"), record.name);
+        contentHelper.appendTextRow(WebInspector.UIString("Category"), record.category);
+        contentHelper.appendTextRow(WebInspector.UIString("Start"), Number.millisToString(this._dataProvider._toTimelineTime(record.startTime - this._tracingModel.minimumRecordTime()), true));
+        contentHelper.appendTextRow(WebInspector.UIString("Duration"), Number.millisToString(this._dataProvider._toTimelineTime(record.duration), true));
+        if (!Object.isEmpty(record.args)) {
+            var table = document.createElement("table");

[pfeldman, 2014/04/01 14:17:01]

Is there a screenshot?

+            for (var name in record.args) {
+                var row = table.createChild("tr");
+                row.createChild("td", "timeline-details-row-title").textContent = name + ":";
+                row.createChild("td", "timeline-details-row-data").textContent = record.args[name];
+            }
+            contentHelper.appendElementRow(WebInspector.UIString("Arguments"), table);
+        }
+        this._delegate.showInDetails(WebInspector.UIString("Selected Event"), contentHelper.element);
     },
 
     __proto__: WebInspector.VBox.prototype
 };
 
 /**
  * @constructor
  * @implements {WebInspector.FlameChartDataProvider}
  * @param {!WebInspector.TracingModel} model
  */
@@ skipping 53 matching lines @@
         return this._font;
     },
 
     /**
      * @param {number} entryIndex
      * @return {?string}
      */
     entryTitle: function(entryIndex)
     {
         var record = this._records[entryIndex];
-        if (record === this._threadHeaderRecord || record === this._processHeaderRecord)
+        if (this._isHeaderRecord(record))
             return this._headerTitles[entryIndex]
         return record.name;
     },
 
     /**
      * @param {number} startTime
      * @param {number} endTime
      * @return {?Array.<number>}
      */
     dividerOffsets: function(startTime, endTime)
@@ skipping 128 matching lines @@
     {
         return false;
     },
 
     /**
      * @param {number} entryIndex
      * @return {?{startTimeOffset: number, endTimeOffset: number}}
      */
     highlightTimeRange: function(entryIndex)
     {
-        return null;
+        var record = this._records[entryIndex];
+        if (!record || this._isHeaderRecord(record))
+            return null;
+        return {
+            startTimeOffset: this._toTimelineTime(record.startTime - this._zeroTime),
+            endTimeOffset: this._toTimelineTime(record.endTime  - this._zeroTime)
+        }
     },
 
     /**
      * @return {number}
      */
     paddingLeft: function()
     {
         return 0;
     },
 
@@ skipping 32 matching lines @@
         this._timelineData.entryOffsets[index] = this._toTimelineTime(record.startTime - this._zeroTime);
     },
 
     /**
      * @param {number} time
      * @return {number}
      */
     _toTimelineTime: function(time)
     {
         return time / 1000;
+    },
+
+    /**
+     * @param {!WebInspector.TracingModel.Event} record
+     */
+    _isHeaderRecord: function(record)
+    {
+        return record === this._threadHeaderRecord || record === this._processHeaderRecord;
+    },
+
+    /**
+     * @param {number} index
+     * @return {!WebInspector.TracingModel.Event|undefined}
+     */
+    _recordAt: function(index)
+    {
+        return this._records[index];
     }
 }
 
 // The below logic is shamelessly stolen from https://code.google.com/p/trace-viewer/source/browse/trunk/trace_viewer/tracing/color_scheme.js
 
 /**
  * @constructor
  */
 WebInspector.TraceViewPalette = function()
 {
@@ skipping 58 matching lines @@
     /**
      * @param {string} string
      * @return {string}
      */
     colorForString: function(string)
     {
         var hash = WebInspector.TraceViewPalette._stringHash(string);
         return this._palette[hash % this._palette.length];
     }
 };