Timeline: make frames in TimelineView selectable

Source/devtools/front_end/timeline/TimelineView.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 28 matching lines @@
 WebInspector.TimelineView = function(delegate, model)
 {
     WebInspector.HBox.call(this);
     this.element.classList.add("timeline-view");
 
     this._delegate = delegate;
     this._model = model;
     this._presentationModel = new WebInspector.TimelinePresentationModel(model);
     this._calculator = new WebInspector.TimelineCalculator(model);
     this._linkifier = new WebInspector.Linkifier();
+    this._frameStripByFrame = new Map();
 
     this._boundariesAreValid = true;
     this._scrollTop = 0;
 
     this._recordsView = this._createRecordsView();
     this._recordsView.addEventListener(WebInspector.SplitView.Events.SidebarSizeChanged, this._sidebarResized, this);
     this._recordsView.show(this.element);
     this._headerElement = this.element.createChild("div", "fill");
     this._headerElement.id = "timeline-graph-records-header";
 
@@ skipping 76 matching lines @@
             var divider = WebInspector.TimelineUIUtils.createEventDivider(record.type(), WebInspector.TimelineUIUtils.recordTitle(record, this._model));
             divider.style.left = dividerPosition + "px";
             dividers[dividerPosition] = divider;
         }
         this._timelineGrid.addEventDividers(dividers);
     },
 
     _updateFrameBars: function(frames)
     {
         var clientWidth = this._graphRowsElementWidth;
-        if (this._frameContainer)
+        if (this._frameContainer) {
             this._frameContainer.removeChildren();
-        else {
+        } else {
             const frameContainerBorderWidth = 1;
             this._frameContainer = document.createElement("div");
             this._frameContainer.classList.add("fill");
             this._frameContainer.classList.add("timeline-frame-container");
             this._frameContainer.style.height = WebInspector.TimelinePanel.rowHeight + frameContainerBorderWidth + "px";
             this._frameContainer.addEventListener("dblclick", this._onFrameDoubleClicked.bind(this), false);
+            this._frameContainer.addEventListener("click", this._onFrameClicked.bind(this), false);
         }
+        this._frameStripByFrame.clear();
 
         var dividers = [];
 
         for (var i = 0; i < frames.length; ++i) {
             var frame = frames[i];
             var frameStart = this._calculator.computePosition(frame.startTime);
             var frameEnd = this._calculator.computePosition(frame.endTime);
 
             var frameStrip = document.createElement("div");
             frameStrip.className = "timeline-frame-strip";
             var actualStart = Math.max(frameStart, 0);
             var width = frameEnd - actualStart;
             frameStrip.style.left = actualStart + "px";
             frameStrip.style.width = width + "px";
             frameStrip._frame = frame;
+            this._frameStripByFrame.put(frame, frameStrip);
 
             const minWidthForFrameInfo = 60;
             if (width > minWidthForFrameInfo)
                 frameStrip.textContent = Number.millisToString(frame.endTime - frame.startTime, true);
 
             this._frameContainer.appendChild(frameStrip);
 
             if (actualStart > 0) {
                 var frameMarker = WebInspector.TimelineUIUtils.createEventDivider(WebInspector.TimelineModel.RecordType.BeginFrame);
                 frameMarker.style.left = frameStart + "px";
                 dividers.push(frameMarker);
             }
         }
         this._timelineGrid.addEventDividers(dividers);
         this._headerElement.appendChild(this._frameContainer);
     },
 
     _onFrameDoubleClicked: function(event)
     {
         var frameBar = event.target.enclosingNodeOrSelfWithClass("timeline-frame-strip");
         if (!frameBar)
             return;
         this._delegate.requestWindowTimes(frameBar._frame.startTime, frameBar._frame.endTime);
     },
 
+    _onFrameClicked: function(event)
+    {
+        var frameBar = event.target.enclosingNodeOrSelfWithClass("timeline-frame-strip");
+        if (!frameBar)
+            return;
+        this._delegate.select(WebInspector.TimelineSelection.fromFrame(frameBar._frame));
+    },
+
     /**
      * @param {!WebInspector.TimelineModel.Record} record
      */
     addRecord: function(record)
     {
         this._presentationModel.addRecord(record);
         this._invalidateAndScheduleRefresh(false, false);
     },
 
     /**
@@ skipping 100 matching lines @@
     /**
      * @param {boolean} preserveBoundaries
      * @param {boolean} userGesture
      */
     _invalidateAndScheduleRefresh: function(preserveBoundaries, userGesture)
     {
         this._presentationModel.invalidateFilteredRecords();
         this._scheduleRefresh(preserveBoundaries, userGesture);
     },
 
+    _clearSelection: function()
+    {
+        this._delegate.select(null);
+    },
+
     /**
      * @param {?WebInspector.TimelinePresentationModel.Record} presentationRecord
      */
     _selectRecord: function(presentationRecord)
     {
-        if (presentationRecord && presentationRecord.coalesced()) {
+        if (presentationRecord.coalesced()) {
             // Presentation record does not have model record to highlight.
             this._innerSetSelectedRecord(presentationRecord);
             var aggregatedStats = {};
             var presentationChildren = presentationRecord.presentationChildren();
             for (var i = 0; i < presentationChildren.length; ++i)
                 WebInspector.TimelineUIUtils.aggregateTimeByCategory(aggregatedStats, presentationChildren[i].record().aggregatedStats);
             var idle = presentationRecord.record().endTime() - presentationRecord.record().startTime();
             for (var category in aggregatedStats)
                 idle -= aggregatedStats[category];
             aggregatedStats["idle"] = idle;
             var pieChart = WebInspector.TimelineUIUtils.generatePieChart(aggregatedStats);
             this._delegate.showInDetails(WebInspector.TimelineUIUtils.recordStyle(presentationRecord.record()).title, pieChart);
             return;
         }
-        this._delegate.selectRecord(presentationRecord ? presentationRecord.record() : null);
+        this._delegate.select(WebInspector.TimelineSelection.fromRecord(presentationRecord.record()));
     },
 
     /**
-     * @param {?WebInspector.TimelineModel.Record} record
+     * @param {?WebInspector.TimelineSelection} selection
      */
-    setSelectedRecord: function(record)
+    setSelection: function(selection)
     {
-        this._innerSetSelectedRecord(this._presentationModel.toPresentationRecord(record));
+        if (!selection) {
+            this._innerSetSelectedRecord(null);
+            this._setSelectedFrame(null);
+            return;
+        }
+        if (selection.type() === WebInspector.TimelineSelection.Type.Record) {
+            var record = /** @type {!WebInspector.TimelineModel.Record} */ (selection.object());
+            this._innerSetSelectedRecord(this._presentationModel.toPresentationRecord(record));
+            this._setSelectedFrame(null);
+        } else if (selection.type() === WebInspector.TimelineSelection.Type.Frame) {
+            var frame = /** @type {!WebInspector.TimelineFrame} */ (selection.object());
+            this._innerSetSelectedRecord(null);
+            this._setSelectedFrame(frame);
+        }
     },
 
     /**
      * @param {?WebInspector.TimelinePresentationModel.Record} presentationRecord
      */
     _innerSetSelectedRecord: function(presentationRecord)
     {
         if (presentationRecord === this._lastSelectedRecord)
             return;
 
@@ skipping 10 matching lines @@
             return;
 
         this._innerRevealRecord(presentationRecord);
         if (presentationRecord.listRow())
             presentationRecord.listRow().renderAsSelected(true);
         if (presentationRecord.graphRow())
             presentationRecord.graphRow().renderAsSelected(true);
     },
 
     /**
+     * @param {?WebInspector.TimelineFrame} frame
+     */
+    _setSelectedFrame: function(frame)
+    {
+        if (this._lastSelectedFrame === frame)
+            return;
+        var oldStripElement = this._lastSelectedFrame && this._frameStripByFrame.get(this._lastSelectedFrame);
+        if (oldStripElement)
+            oldStripElement.classList.remove("selected");
+        var newStripElement = frame && this._frameStripByFrame.get(frame);
+        if (newStripElement)
+            newStripElement.classList.add("selected");
+        this._lastSelectedFrame = frame;
+    },
+
+    /**
      * @param {number} startTime
      * @param {number} endTime
      */
     setWindowTimes: function(startTime, endTime)
     {
         this._windowStartTime = startTime;
         this._windowEndTime = endTime;
         this._presentationModel.setWindowTimes(startTime, endTime);
         this._automaticallySizeWindow = false;
         this._invalidateAndScheduleRefresh(false, true);
-        this._selectRecord(null);
+        this._clearSelection();
     },
 
     /**
      * @param {boolean} preserveBoundaries
      * @param {boolean} userGesture
      */
     _scheduleRefresh: function(preserveBoundaries, userGesture)
     {
         this._closeRecordDetails();
         this._boundariesAreValid &= preserveBoundaries;
@@ skipping 85 matching lines @@
 
         var rowHeight = WebInspector.TimelinePanel.rowHeight;
         var headerHeight = WebInspector.TimelinePanel.headerHeight;
 
         // Convert visible area to visible indexes. Always include top-level record for a visible nested record.
         var startIndex = Math.max(0, Math.min(Math.floor((visibleTop - headerHeight) / rowHeight), recordsInWindow.length - 1));
         var endIndex = Math.min(recordsInWindow.length, Math.ceil(visibleBottom / rowHeight));
         var lastVisibleLine = Math.max(0, Math.floor((visibleBottom - headerHeight) / rowHeight));
         if (this._automaticallySizeWindow && recordsInWindow.length > lastVisibleLine) {
             this._automaticallySizeWindow = false;
-            this._selectRecord(null);
+            this._clearSelection();
             // If we're at the top, always use real timeline start as a left window bound so that expansion arrow padding logic works.
             var windowStartTime = startIndex ? recordsInWindow[startIndex].record().startTime() : this._model.minimumRecordTime();
             var windowEndTime = recordsInWindow[Math.max(0, lastVisibleLine - 1)].record().endTime();
             this._delegate.requestWindowTimes(windowStartTime, windowEndTime);
             recordsInWindow = this._presentationModel.filteredRecords();
             endIndex = Math.min(recordsInWindow.length, lastVisibleLine);
         }
 
         // Resize gaps first.
         this._topGapElement.style.height = (startIndex * rowHeight) + "px";
@@ skipping 162 matching lines @@
         // Prevent the container from being scrolled off the end.
         if ((this._scrollTop + this._containerElementHeight) > totalHeight + 1)
             this._containerElement.scrollTop = (totalHeight - this._containerElement.offsetHeight);
     },
 
     _getPopoverAnchor: function(element)
     {
         var anchor = element.enclosingNodeOrSelfWithClass("timeline-graph-bar");
         if (anchor && anchor._tasksInfo)
             return anchor;
-        return element.enclosingNodeOrSelfWithClass("timeline-frame-strip");
+        return null;
     },
 
     _mouseOut: function()
     {
         this._hideQuadHighlight();
     },
 
     /**
      * @param {?Event} e
      */
@@ skipping 111 matching lines @@
             delete this._highlightedQuadRecord;
         }
     },
 
     /**
      * @param {!Element} anchor
      * @param {!WebInspector.Popover} popover
      */
     _showPopover: function(anchor, popover)
     {
-        if (anchor.classList.contains("timeline-frame-strip")) {
-            var frame = anchor._frame;
-            popover.show(WebInspector.TimelineUIUtils.generatePopupContentForFrame(frame), anchor);
-        } else if (anchor._tasksInfo) {
-            popover.show(WebInspector.TimelineUIUtils.generateMainThreadBarPopupContent(this._model, anchor._tasksInfo), anchor, null, null, WebInspector.Popover.Orientation.Bottom);
-        }
-
-        function showCallback(popupContent)
-        {
-            popover.show(popupContent, anchor);
-        }
+        if (!anchor._tasksInfo)
+            return;
+        popover.show(WebInspector.TimelineUIUtils.generateMainThreadBarPopupContent(this._model, anchor._tasksInfo), anchor, null, null, WebInspector.Popover.Orientation.Bottom);
     },
 
     _closeRecordDetails: function()
     {
         this._popoverHelper.hidePopover();
     },
 
     /**
      * @param {?WebInspector.TimelineModel.Record} record
      * @param {string=} regex
@@ skipping 418 matching lines @@
             this._element.classList.remove("hidden");
         } else
             this._element.classList.add("hidden");
     },
 
     _dispose: function()
     {
         this._element.remove();
     }
 }