Diff
Modified: branches/safari-601-branch/Source/WebInspectorUI/ChangeLog (193026 => 193027)
--- branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 18:32:44 UTC (rev 193026)
+++ branches/safari-601-branch/Source/WebInspectorUI/ChangeLog 2015-12-03 18:32:55 UTC (rev 193027)
@@ -1,5 +1,111 @@
2015-12-01 Timothy Hatcher <[email protected]>
+ Merge r187468. rdar://problem/23221163
+
+ 2015-07-27 Matt Baker <[email protected]>
+
+ Web Inspector: Clicking a frame in the Rendering Frames timeline should select the corresponding grid row
+ https://bugs.webkit.org/show_bug.cgi?id=147013
+
+ Reviewed by Timothy Hatcher.
+
+ Added ability to select (or highlight) a particular frame by clicking in the overview graph. A tick mark
+ appears above the selected frame inside the ruler, and the frame element's background color changes to a light
+ blue vertical highlight. Frame selection is synced across the timeline view's data grid, overview graph, and
+ navigation bar path components.
+
+ A few behaviors:
+ - Clicking a frame outside the current ruler selection selects the frame.
+ - Clicking the selected frame will deselect it.
+ - Resizing the ruler selection to exclude the selected frame will deselect it.
+
+ * UserInterface/Views/DataGrid.js:
+ (WebInspector.DataGridNode.prototype.select):
+ No need to generate two SelectedNodeChanged events when selecting a node causes
+ the currently selected node to be deselected.
+
+ * UserInterface/Views/LayoutTimelineOverviewGraph.js:
+ (WebInspector.LayoutTimelineOverviewGraph):
+ * UserInterface/Views/NetworkTimelineOverviewGraph.js:
+ (WebInspector.NetworkTimelineOverviewGraph):
+ * UserInterface/Views/ScriptTimelineOverviewGraph.js:
+ (WebInspector.ScriptTimelineOverviewGraph): Set TimelineOverview during construction.
+ Set TimelineOverview during construction.
+
+ * UserInterface/Views/RenderingFrameTimelineOverviewGraph.css:
+ (.timeline-overview-graph.rendering-frame > .frame-marker):
+ (body.window-inactive .timeline-overview-graph.rendering-frame > .frame-marker):
+ Added styles for selected frame marker.
+
+ * UserInterface/Views/RenderingFrameTimelineOverviewGraph.js:
+ (WebInspector.RenderingFrameTimelineOverviewGraph):
+ Set TimelineOverview during construction.
+ (WebInspector.RenderingFrameTimelineOverviewGraph.prototype._mouseClicked):
+ Added frame marker element and frame selection via mouse click.
+
+ * UserInterface/Views/RenderingFrameTimelineView.js:
+ (WebInspector.RenderingFrameTimelineView.prototype.treeElementDeselected):
+ Deselect grid node when frame is deselected from the overview graph.
+ (WebInspector.RenderingFrameTimelineView.prototype.filterDidChange): Deleted.
+ Removed unnecessary override.
+
+ * UserInterface/Views/TimelineOverview.js:
+ Added selectRecord method and RecordSelected event.
+ (WebInspector.TimelineOverview):
+ (WebInspector.TimelineOverview.prototype._timelineRulerMouseDown):
+ (WebInspector.TimelineOverview.prototype._timelineRulerMouseClicked):
+ Since timeline ruler specifies pointer-events: all, click events must be forwarded to the
+ underlying overview graph. Click events following changes to the ruler's selection are ignored.
+
+ (WebInspector.TimelineOverview.prototype._timeRangeSelectionChanged):
+ (WebInspector.TimelineOverview.prototype._recordSelected):
+ Forward RecordSelected events from child graphs to clients of the overview.
+
+ * UserInterface/Views/TimelineOverviewGraph.js:
+ Added RecordSelected event.
+ (WebInspector.TimelineOverviewGraph):
+ (WebInspector.TimelineOverviewGraph.prototype.get visible):
+ (WebInspector.TimelineOverviewGraph.prototype.get selectedRecord):
+ (WebInspector.TimelineOverviewGraph.prototype.set selectedRecord):
+ Added property for selecting a record in the graph. Derived graph types can implement record selection
+ and choose how to style the selected record.
+ (WebInspector.TimelineOverviewGraph.prototype.updateLayout):
+ (WebInspector.TimelineOverviewGraph.prototype.needsLayout):
+ Update frame marker during an animation frame.
+ (WebInspector.TimelineOverviewGraph.prototype.dispatchSelectedRecordChangedEvent):
+ Dispatch wrapper to simplify things.
+ (WebInspector.TimelineOverviewGraph.prototype.updateSelectedRecord):
+ (WebInspector.TimelineOverviewGraph.prototype._needsSelectedRecordLayout.update):
+ (WebInspector.TimelineOverviewGraph.prototype._needsSelectedRecordLayout):
+ Inform derived overview graph to optionally style the selected record.
+ (WebInspector.TimelineOverviewGraph.prototype.set timelineOverview): Deleted.
+ No longer needed. TimelineOverview set during construction.
+
+ * UserInterface/Views/TimelineRecordFrame.css:
+ (.timeline-record-frame):
+ (.timeline-record-frame.tall):
+ Limit the "fade out" effect to frames that are >= 95% of the graph height, otherwise the
+ gradient mask is noticeable when selecting a shorter frame.
+ (.timeline-record-frame.selected):
+ (body.window-inactive .timeline-record-frame.selected):
+ (.timeline-record-frame.selected > .frame):
+ Added highlight (and dimmed inactive highlight) for selected frame element.
+
+ * UserInterface/Views/TimelineRecordFrame.js:
+ (WebInspector.TimelineRecordFrame.prototype.get selected):
+ (WebInspector.TimelineRecordFrame.prototype.set selected):
+ Added property for setting selected style.
+
+ * UserInterface/Views/TimelineRecordingContentView.js:
+ (WebInspector.TimelineRecordingContentView):
+ (WebInspector.TimelineRecordingContentView.prototype._contentViewSelectionPathComponentDidChange):
+ Select record in overview in response to changing navigation path.
+ (WebInspector.TimelineRecordingContentView.prototype._recordSelected.get console):
+ (WebInspector.TimelineRecordingContentView.prototype._recordSelected):
+ Update selected tree element in response to changing record selection in the overview graph.
+
+2015-12-01 Timothy Hatcher <[email protected]>
+
Merge r187465. rdar://problem/23221163
2015-07-27 Joseph Pecoraro <[email protected]>
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DataGrid.js (193026 => 193027)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2015-12-03 18:32:44 UTC (rev 193026)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/DataGrid.js 2015-12-03 18:32:55 UTC (rev 193027)
@@ -1725,7 +1725,7 @@
return;
if (this.dataGrid.selectedNode)
- this.dataGrid.selectedNode.deselect();
+ this.dataGrid.selectedNode.deselect(true);
this._selected = true;
this.dataGrid.selectedNode = this;
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js (193026 => 193027)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js 2015-12-03 18:32:44 UTC (rev 193026)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/LayoutTimelineOverviewGraph.js 2015-12-03 18:32:55 UTC (rev 193027)
@@ -23,9 +23,9 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-WebInspector.LayoutTimelineOverviewGraph = function(timeline)
+WebInspector.LayoutTimelineOverviewGraph = function(timeline, timelineOverview)
{
- WebInspector.TimelineOverviewGraph.call(this, timeline);
+ WebInspector.TimelineOverviewGraph.call(this, timeline, timelineOverview);
this.element.classList.add("layout");
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.js (193026 => 193027)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.js 2015-12-03 18:32:44 UTC (rev 193026)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/NetworkTimelineOverviewGraph.js 2015-12-03 18:32:55 UTC (rev 193027)
@@ -24,9 +24,9 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-WebInspector.NetworkTimelineOverviewGraph = function(timeline)
+WebInspector.NetworkTimelineOverviewGraph = function(timeline, timelineOverview)
{
- WebInspector.TimelineOverviewGraph.call(this, timeline);
+ WebInspector.TimelineOverviewGraph.call(this, timeline, timelineOverview);
this.element.classList.add("network");
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css (193026 => 193027)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css 2015-12-03 18:32:44 UTC (rev 193026)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.css 2015-12-03 18:32:55 UTC (rev 193027)
@@ -46,3 +46,18 @@
color: hsl(0, 0%, 60%);
}
+
+.timeline-overview-graph.rendering-frame > .frame-marker {
+ position: absolute;
+ display: block;
+ height: 3px;
+ top: -5px;
+
+ background: -webkit-linear-gradient(left, hsl(210, 100%, 49%), hsl(210, 100%, 49%)) no-repeat 1px 0;
+
+ pointer-events: none;
+}
+
+body.window-inactive .timeline-overview-graph.rendering-frame > .frame-marker {
+ background-image: -webkit-linear-gradient(left, hsl(0, 0%, 60%), hsl(0, 0%, 60%));
+}
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js (193026 => 193027)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js 2015-12-03 18:32:44 UTC (rev 193026)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js 2015-12-03 18:32:55 UTC (rev 193027)
@@ -23,16 +23,21 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-WebInspector.RenderingFrameTimelineOverviewGraph = function(timeline)
+WebInspector.RenderingFrameTimelineOverviewGraph = function(timeline, timelineOverview)
{
- WebInspector.TimelineOverviewGraph.call(this, timeline);
+ WebInspector.TimelineOverviewGraph.call(this, timeline, timelineOverview);
this.element.classList.add(WebInspector.RenderingFrameTimelineOverviewGraph.StyleClassName);
+ this.element.addEventListener("click", this._mouseClicked.bind(this));
this._renderingFrameTimeline = timeline;
this._renderingFrameTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this._timelineRecordAdded, this);
+ this._selectedFrameMarker = document.createElement("div");
+ this._selectedFrameMarker.className = "frame-marker";
+
this._timelineRecordFrames = [];
+ this._selectedTimelineRecordFrame = null;
this._graphHeightSeconds = NaN;
this._framesPerSecondDividerMap = new Map;
@@ -70,6 +75,8 @@
this.element.removeChildren();
+ this.selectedRecord = null;
+
this._framesPerSecondDividerMap.clear();
},
@@ -107,8 +114,36 @@
}
this._updateDividers();
+ this._updateFrameMarker();
},
+ // Protected
+
+ updateSelectedRecord()
+ {
+ if (!this.selectedRecord) {
+ this._updateFrameMarker();
+ return;
+ }
+
+ const visibleDuration = this.timelineOverview.visibleDuration;
+ const frameIndex = this.selectedRecord.frameIndex;
+
+ // Reveal a newly selected record if it's outside the visible range.
+ if (frameIndex < Math.ceil(this.timelineOverview.scrollStartTime) || frameIndex >= this.timelineOverview.scrollStartTime + visibleDuration) {
+ var scrollStartTime = frameIndex;
+ if (!this._selectedTimelineRecordFrame || Math.abs(this._selectedTimelineRecordFrame.record.frameIndex - this.selectedRecord.frameIndex) > 1) {
+ scrollStartTime -= Math.floor(visibleDuration / 2);
+ scrollStartTime = Math.max(Math.min(scrollStartTime, this.timelineOverview.endTime), this.timelineOverview.startTime);
+ }
+
+ this.timelineOverview.scrollStartTime = scrollStartTime;
+ return;
+ }
+
+ this._updateFrameMarker();
+ },
+
// Private
_timelineRecordAdded(event)
@@ -154,13 +189,65 @@
createDividerAtPosition.call(this, 30);
},
- _updateElementPosition(element, newPosition, property)
+ _updateFrameMarker()
{
- newPosition *= 100;
- newPosition = newPosition.toFixed(2);
+ if (this._selectedTimelineRecordFrame) {
+ this._selectedTimelineRecordFrame.selected = false;
+ this._selectedTimelineRecordFrame = null;
+ }
- var currentPosition = parseFloat(element.style[property]).toFixed(2);
- if (currentPosition !== newPosition)
- element.style[property] = newPosition + "%";
+ if (!this.selectedRecord) {
+ if (this._selectedFrameMarker.parentElement)
+ this.element.removeChild(this._selectedFrameMarker);
+
+ this.dispatchSelectedRecordChangedEvent();
+ return;
+ }
+
+ var frameWidth = (1 / this.timelineOverview.secondsPerPixel);
+ this._selectedFrameMarker.style.width = frameWidth + "px";
+
+ var markerLeftPosition = this.selectedRecord.frameIndex - this.startTime;
+ this._selectedFrameMarker.style.left = ((markerLeftPosition / this.timelineOverview.visibleDuration) * 100).toFixed(2) + "%";
+
+ if (!this._selectedFrameMarker.parentElement)
+ this.element.appendChild(this._selectedFrameMarker);
+
+ // Find and update the selected frame element.
+ var index = this._timelineRecordFrames.binaryIndexOf(this.selectedRecord, function(record, frame) {
+ return frame.record ? record.frameIndex - frame.record.frameIndex : -1;
+ });
+
+ console.assert(index >= 0 && index < this._timelineRecordFrames.length, "Selected record not within visible graph duration.", this.selectedRecord);
+ if (index < 0 || index >= this._timelineRecordFrames.length)
+ return;
+
+ this._selectedTimelineRecordFrame = this._timelineRecordFrames[index];
+ this._selectedTimelineRecordFrame.selected = true;
+
+ this.dispatchSelectedRecordChangedEvent();
+ },
+
+ _mouseClicked: function(event)
+ {
+ var position = event.pageX - this.element.getBoundingClientRect().left;
+ var frameIndex = Math.floor(position * this.timelineOverview.secondsPerPixel + this.startTime);
+ if (frameIndex < 0 || frameIndex >= this._renderingFrameTimeline.records.length)
+ return;
+
+ var newSelectedRecord = this._renderingFrameTimeline.records[frameIndex];
+ // Clicking the selected frame causes it to be deselected.
+ if (this.selectedRecord === newSelectedRecord)
+ newSelectedRecord = null;
+
+ if (frameIndex >= this.timelineOverview.selectionStartTime && frameIndex < this.timelineOverview.selectionStartTime + this.timelineOverview.selectionDuration) {
+ this.selectedRecord = newSelectedRecord;
+ return;
+ }
+
+ // Clicking a frame outside the current ruler selection changes the selection to include the frame.
+ this.selectedRecord = newSelectedRecord;
+ this.timelineOverview.selectionStartTime = frameIndex;
+ this.timelineOverview.selectionDuration = 1;
}
};
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js (193026 => 193027)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js 2015-12-03 18:32:44 UTC (rev 193026)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineView.js 2015-12-03 18:32:55 UTC (rev 193027)
@@ -143,11 +143,6 @@
return pathComponents;
},
- filterDidChange: function()
- {
- WebInspector.TimelineView.prototype.filterDidChange.call(this);
- },
-
matchTreeElementAgainstCustomFilters: function(treeElement)
{
return this._dataGrid.treeElementMatchesActiveScopeFilters(treeElement);
@@ -180,6 +175,15 @@
WebInspector.TimelineView.prototype.showContentViewForTreeElement.call(this, treeElement);
},
+ treeElementDeselected: function(treeElement)
+ {
+ var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(treeElement);
+ if (!dataGridNode)
+ return;
+
+ dataGridNode.deselect();
+ },
+
treeElementSelected: function(treeElement, selectedByUser)
{
if (this._dataGrid.shouldIgnoreSelectionEvent())
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.js (193026 => 193027)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.js 2015-12-03 18:32:44 UTC (rev 193026)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/ScriptTimelineOverviewGraph.js 2015-12-03 18:32:55 UTC (rev 193027)
@@ -23,9 +23,9 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-WebInspector.ScriptTimelineOverviewGraph = function(timeline)
+WebInspector.ScriptTimelineOverviewGraph = function(timeline, timelineOverview)
{
- WebInspector.TimelineOverviewGraph.call(this, timeline);
+ WebInspector.TimelineOverviewGraph.call(this, timeline, timelineOverview);
this.element.classList.add("script");
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js (193026 => 193027)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2015-12-03 18:32:44 UTC (rev 193026)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2015-12-03 18:32:55 UTC (rev 193027)
@@ -45,6 +45,8 @@
this._timelineRuler = new WebInspector.TimelineRuler;
this._timelineRuler.allowsClippedLabels = true;
this._timelineRuler.allowsTimeRangeSelection = true;
+ this._timelineRuler.element.addEventListener("mousedown", this._timelineRulerMouseDown.bind(this));
+ this._timelineRuler.element.addEventListener("click", this._timelineRulerMouseClicked.bind(this));
this._timelineRuler.addEventListener(WebInspector.TimelineRuler.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
this._element.appendChild(this._timelineRuler.element);
@@ -76,6 +78,7 @@
this._mouseWheelDelta = 0;
this._scrollStartTime = 0;
this._cachedScrollContainerWidth = NaN;
+ this._timelineRulerSelectionChanged = false;
this.selectionStartTime = this._selectionStartValueSetting.value;
this.selectionDuration = this._selectionDurationSetting.value;
@@ -90,6 +93,7 @@
WebInspector.TimelineOverview.ScrollDeltaDenominator = 500;
WebInspector.TimelineOverview.Event = {
+ RecordSelected: "timeline-overview-record-selected",
TimeRangeSelectionChanged: "timeline-overview-time-range-selection-changed"
};
@@ -285,6 +289,18 @@
this.scrollStartTime = marker.time - (this.visibleDuration / 2);
},
+ selectRecord: function(timeline, record)
+ {
+ console.assert(this.canShowTimeline(timeline), timeline);
+
+ var overviewGraph = this._timelineOverviewGraphsMap.get(timeline);
+ console.assert(overviewGraph, "Missing overview graph for timeline type " + timeline.type);
+ if (!overviewGraph)
+ return;
+
+ overviewGraph.selectedRecord = record;
+ },
+
updateLayoutForResize: function()
{
this._cachedScrollContainerWidth = NaN;
@@ -456,8 +472,8 @@
if (!this.canShowTimeline(timeline))
return;
- var overviewGraph = new WebInspector.TimelineOverviewGraph(timeline);
- overviewGraph.timelineOverview = this;
+ var overviewGraph = new WebInspector.TimelineOverviewGraph(timeline, this);
+ overviewGraph.addEventListener(WebInspector.TimelineOverviewGraph.Event.RecordSelected, this._recordSelected, this);
this._timelineOverviewGraphsMap.set(timeline, overviewGraph);
this._graphsContainerElement.appendChild(overviewGraph.element);
},
@@ -472,22 +488,56 @@
console.assert(this._timelineOverviewGraphsMap.has(timeline), timeline);
var overviewGraph = this._timelineOverviewGraphsMap.take(timeline);
- overviewGraph.timelineOverview = null;
+ overviewGraph.removeEventListener(WebInspector.TimelineOverviewGraph.Event.RecordSelected, this._recordSelected, this);
this._graphsContainerElement.removeChild(overviewGraph.element);
},
+ _timelineRulerMouseDown: function(event)
+ {
+ this._timelineRulerSelectionChanged = false;
+ },
+
+ _timelineRulerMouseClicked: function(event)
+ {
+ if (this._timelineRulerSelectionChanged)
+ return;
+
+ for (var overviewGraph of this._timelineOverviewGraphsMap.values()) {
+ var graphRect = overviewGraph.element.getBoundingClientRect();
+ if (!(event.pageX >= graphRect.left && event.pageX <= graphRect.right && event.pageY >= graphRect.top && event.pageY <= graphRect.bottom))
+ continue;
+
+ // Clone the event to dispatch it on the overview graph element.
+ var newClickEvent = new event.constructor(event.type, event);
+ overviewGraph.element.dispatchEvent(newClickEvent);
+ return;
+ }
+ },
+
_timeRangeSelectionChanged: function(event)
{
+ this._timelineRulerSelectionChanged = true;
this._selectionStartValueSetting.value = this.selectionStartTime - this._startTime;
this._selectionDurationSetting.value = this.selectionDuration;
this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged);
},
+ _recordSelected: function(event)
+ {
+ for ([timeline, overviewGraph] of this._timelineOverviewGraphsMap) {
+ if (overviewGraph !== event.target)
+ continue;
+
+ this.dispatchEventToListeners(WebInspector.TimelineOverview.Event.RecordSelected, {timeline, record: event.data.record});
+ return;
+ }
+ },
+
_resetSelection: function()
{
this.secondsPerPixel = this._defaultSettingsValues.durationPerPixel;
this.selectionStartTime = this._defaultSettingsValues.selectionStartValue;
this.selectionDuration = this._defaultSettingsValues.selectionDuration;
- },
+ }
};
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js (193026 => 193027)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js 2015-12-03 18:32:44 UTC (rev 193026)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js 2015-12-03 18:32:55 UTC (rev 193027)
@@ -23,7 +23,7 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-WebInspector.TimelineOverviewGraph = function(timeline)
+WebInspector.TimelineOverviewGraph = function(timeline, timelineOverview)
{
if (this.constructor === WebInspector.TimelineOverviewGraph) {
// When instantiated directly return an instance of a type-based concrete subclass.
@@ -32,16 +32,16 @@
var timelineType = timeline.type;
if (timelineType === WebInspector.TimelineRecord.Type.Network)
- return new WebInspector.NetworkTimelineOverviewGraph(timeline);
+ return new WebInspector.NetworkTimelineOverviewGraph(timeline, timelineOverview);
if (timelineType === WebInspector.TimelineRecord.Type.Layout)
- return new WebInspector.LayoutTimelineOverviewGraph(timeline);
+ return new WebInspector.LayoutTimelineOverviewGraph(timeline, timelineOverview);
if (timelineType === WebInspector.TimelineRecord.Type.Script)
- return new WebInspector.ScriptTimelineOverviewGraph(timeline);
+ return new WebInspector.ScriptTimelineOverviewGraph(timeline, timelineOverview);
if (timelineType === WebInspector.TimelineRecord.Type.RenderingFrame)
- return new WebInspector.RenderingFrameTimelineOverviewGraph(timeline);
+ return new WebInspector.RenderingFrameTimelineOverviewGraph(timeline, timelineOverview);
throw Error("Can't make a graph for an unknown timeline.");
}
@@ -59,9 +59,17 @@
this._startTime = 0;
this._endTime = 5;
this._currentTime = 0;
- this._timelineOverview = null;
+ this._timelineOverview = timelineOverview;
+ this._selectedRecord = null;
+ this._selectedRecordChanged = false;
+ this._scheduledLayoutUpdateIdentifier = 0;
+ this._scheduledSelectedRecordLayoutUpdateIdentifier = 0;
};
+WebInspector.TimelineOverviewGraph.Event = {
+ RecordSelected: "timeline-overview-graph-record-selected"
+};
+
WebInspector.TimelineOverviewGraph.prototype = {
constructor: WebInspector.TimelineOverviewGraph,
__proto__: WebInspector.Object.prototype,
@@ -136,16 +144,27 @@
return this._timelineOverview;
},
- set timelineOverview(x)
+ get visible()
{
- this._timelineOverview = x;
+ return this._visible;
},
- get visible()
+ get selectedRecord()
{
- return this._visible;
+ return this._selectedRecord;
},
+ set selectedRecord(x)
+ {
+ if (this._selectedRecord === x)
+ return;
+
+ this._selectedRecord = x;
+ this._selectedRecordChanged = true;
+
+ this._needsSelectedRecordLayout();
+ },
+
shown: function()
{
this._visible = true;
@@ -166,7 +185,7 @@
{
if (this._scheduledLayoutUpdateIdentifier) {
cancelAnimationFrame(this._scheduledLayoutUpdateIdentifier);
- delete this._scheduledLayoutUpdateIdentifier;
+ this._scheduledLayoutUpdateIdentifier = 0;
}
// Implemented by sub-classes if needed.
@@ -190,5 +209,41 @@
return;
this._scheduledLayoutUpdateIdentifier = requestAnimationFrame(this.updateLayout.bind(this));
+ },
+
+ dispatchSelectedRecordChangedEvent: function()
+ {
+ if (!this._selectedRecordChanged)
+ return;
+
+ this._selectedRecordChanged = false;
+
+ this.dispatchEventToListeners(WebInspector.TimelineOverviewGraph.Event.RecordSelected, {record: this.selectedRecord});
+ },
+
+ updateSelectedRecord: function()
+ {
+ // Implemented by sub-classes if needed.
+ },
+
+ // Private
+
+ _needsSelectedRecordLayout: function()
+ {
+ // If layout is scheduled, abort since the selected record will be updated when layout happens.
+ if (this._scheduledLayoutUpdateIdentifier)
+ return;
+
+ if (this._scheduledSelectedRecordLayoutUpdateIdentifier)
+ return;
+
+ function update()
+ {
+ this._scheduledSelectedRecordLayoutUpdateIdentifier = 0;
+
+ this.updateSelectedRecord();
+ }
+
+ this._scheduledSelectedRecordLayoutUpdateIdentifier = requestAnimationFrame(update.bind(this));
}
};
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css (193026 => 193027)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css 2015-12-03 18:32:44 UTC (rev 193026)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css 2015-12-03 18:32:55 UTC (rev 193027)
@@ -31,7 +31,9 @@
width: 4px;
overflow: hidden;
+}
+.timeline-record-frame.tall {
-webkit-mask-image: -webkit-linear-gradient(hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 1) 10%);
}
@@ -47,6 +49,18 @@
box-sizing: border-box;
}
+.timeline-record-frame.selected {
+ background: -webkit-linear-gradient(left, hsl(210, 98%, 96%), hsl(210, 98%, 96%)) no-repeat 1px -1px;
+}
+
+body.window-inactive .timeline-record-frame.selected {
+ background: -webkit-linear-gradient(left, hsl(0, 0%, 96%), hsl(0, 0%, 96%)) no-repeat 1px -1px;
+}
+
+.timeline-record-frame.selected > .frame {
+ box-shadow: 0 -1px 0 white;
+}
+
.timeline-record-frame > .frame > .duration {
box-sizing: border-box;
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js (193026 => 193027)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js 2015-12-03 18:32:44 UTC (rev 193026)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js 2015-12-03 18:32:55 UTC (rev 193027)
@@ -63,6 +63,19 @@
this._record = record;
},
+ get selected()
+ {
+ return this._element.classList.contains("selected");
+ },
+
+ set selected(x)
+ {
+ if (this.selected === x)
+ return;
+
+ this._element.classList.toggle("selected");
+ },
+
refresh(graphDataSource)
{
if (!this._record)
@@ -235,8 +248,14 @@
this._record.__displayData.graphHeightSeconds = graphDataSource.graphHeightSeconds;
}
- this._updateElementPosition(frameElement, this._record.__displayData.frameDuration / graphDataSource.graphHeightSeconds, "height");
+ var frameHeight = this._record.__displayData.frameDuration / graphDataSource.graphHeightSeconds;
+ if (frameHeight >= 0.95)
+ this._element.classList.add("tall");
+ else
+ this._element.classList.remove("tall");
+ this._updateElementPosition(frameElement, frameHeight, "height");
+
for (var segment of this._record.__displayData.segments) {
var element = document.createElement("div");
this._updateElementPosition(element, segment.duration / this._record.__displayData.frameDuration, "height");
Modified: branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (193026 => 193027)
--- branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2015-12-03 18:32:44 UTC (rev 193026)
+++ branches/safari-601-branch/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2015-12-03 18:32:55 UTC (rev 193027)
@@ -41,6 +41,7 @@
this._renderingFrameTimelineOverview = new WebInspector.RenderingFrameTimelineOverview(this._recording);
this._renderingFrameTimelineOverview.addEventListener(WebInspector.TimelineOverview.Event.TimeRangeSelectionChanged, this._timeRangeSelectionChanged, this);
+ this._renderingFrameTimelineOverview.addEventListener(WebInspector.TimelineOverview.Event.RecordSelected, this._recordSelected, this);
this._currentTimelineOverview = this._linearTimelineOverview;
this.element.appendChild(this._currentTimelineOverview.element);
@@ -367,7 +368,15 @@
{
if (event.target !== this._contentViewContainer.currentContentView)
return;
+
this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
+
+ if (this.currentTimelineView === this._overviewTimelineView)
+ return;
+
+ var recordPathComponent = this.selectionPathComponents.find(function(element) { return element.representedObject instanceof WebInspector.TimelineRecord; });
+ var record = recordPathComponent ? recordPathComponent.representedObject : null;
+ this._currentTimelineOverview.selectRecord(event.target.representedObject, record);
},
_contentViewSupplementalRepresentedObjectsDidChange: function(event)
@@ -665,6 +674,32 @@
}.bind(this));
},
+ _recordSelected: function(event)
+ {
+ var timelineView = this._timelineViewMap.get(event.data.timeline);
+ console.assert(timelineView === this.currentTimelineView, timelineView);
+ if (timelineView !== this.currentTimelineView)
+ return;
+
+ var selectedTreeElement = this.currentTimelineView.navigationSidebarTreeOutline.selectedTreeElement;
+ if (!event.data.record) {
+ if (selectedTreeElement)
+ selectedTreeElement.deselect();
+ return;
+ }
+
+ var treeElement = this.currentTimelineView.navigationSidebarTreeOutline.findTreeElement(event.data.record);
+ console.assert(treeElement, "Timeline view has no tree element for record selected in timeline overview.", timelineView, event.data.record);
+ if (!treeElement)
+ return;
+
+ // Don't select the record's tree element if one of it's children is already selected.
+ if (selectedTreeElement && selectedTreeElement.hasAncestor(treeElement))
+ return;
+
+ treeElement.revealAndSelect(false, false, false, true);
+ },
+
_updateFrameSelection: function()
{
console.assert(this._renderingFrameTimeline);
