Commit aab271fe authored by timothy@apple.com's avatar timothy@apple.com

Show the Resource and Record selection path in the navigation bar for Timeline views.

https://bugs.webkit.org/show_bug.cgi?id=127367

Reviewed by Joseph Pecoraro.

* UserInterface/LayoutTimelineView.js:
(WebInspector.LayoutTimelineView.prototype.treeElementPathComponentSelected):
(WebInspector.LayoutTimelineView.prototype._dataGridNodeSelected):
* UserInterface/NetworkTimelineView.js:
(WebInspector.NetworkTimelineView.prototype.treeElementPathComponentSelected):
(WebInspector.NetworkTimelineView.prototype._dataGridNodeSelected):
* UserInterface/OverviewTimelineView.js:
(WebInspector.OverviewTimelineView.prototype.get selectionPathComponents):
(WebInspector.OverviewTimelineView.prototype.treeElementPathComponentSelected):
(WebInspector.OverviewTimelineView.prototype._dataGridNodeSelected):
* UserInterface/ScriptTimelineView.js:
(WebInspector.ScriptTimelineView.prototype.treeElementPathComponentSelected):
(WebInspector.ScriptTimelineView.prototype._dataGridNodeSelected):
* UserInterface/TimelineContentView.js:
(WebInspector.TimelineContentView.prototype._timelineViewSelectionPathComponentsDidChange):
(WebInspector.TimelineContentView.prototype._showTimelineView):
* UserInterface/TimelineDataGrid.js:
(WebInspector.TimelineDataGrid.prototype.treeElementForDataGridNode):
(WebInspector.TimelineDataGrid.prototype.dataGridNodeForTreeElement):
* UserInterface/TimelineView.js:
(WebInspector.TimelineView.prototype.get selectionPathComponents):
(WebInspector.TimelineView.prototype.treeElementPathComponentSelected):

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162527 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 118a9a7a
2014-01-21 Timothy Hatcher <timothy@apple.com>
Show the Resource and Record selection path in the navigation bar for Timeline views.
https://bugs.webkit.org/show_bug.cgi?id=127367
Reviewed by Joseph Pecoraro.
* UserInterface/LayoutTimelineView.js:
(WebInspector.LayoutTimelineView.prototype.treeElementPathComponentSelected):
(WebInspector.LayoutTimelineView.prototype._dataGridNodeSelected):
* UserInterface/NetworkTimelineView.js:
(WebInspector.NetworkTimelineView.prototype.treeElementPathComponentSelected):
(WebInspector.NetworkTimelineView.prototype._dataGridNodeSelected):
* UserInterface/OverviewTimelineView.js:
(WebInspector.OverviewTimelineView.prototype.get selectionPathComponents):
(WebInspector.OverviewTimelineView.prototype.treeElementPathComponentSelected):
(WebInspector.OverviewTimelineView.prototype._dataGridNodeSelected):
* UserInterface/ScriptTimelineView.js:
(WebInspector.ScriptTimelineView.prototype.treeElementPathComponentSelected):
(WebInspector.ScriptTimelineView.prototype._dataGridNodeSelected):
* UserInterface/TimelineContentView.js:
(WebInspector.TimelineContentView.prototype._timelineViewSelectionPathComponentsDidChange):
(WebInspector.TimelineContentView.prototype._showTimelineView):
* UserInterface/TimelineDataGrid.js:
(WebInspector.TimelineDataGrid.prototype.treeElementForDataGridNode):
(WebInspector.TimelineDataGrid.prototype.dataGridNodeForTreeElement):
* UserInterface/TimelineView.js:
(WebInspector.TimelineView.prototype.get selectionPathComponents):
(WebInspector.TimelineView.prototype.treeElementPathComponentSelected):
2014-01-20 Timothy Hatcher <timothy@apple.com> 2014-01-20 Timothy Hatcher <timothy@apple.com>
Add the recording button back to the Timelines sidebar. Add the recording button back to the Timelines sidebar.
......
...@@ -61,6 +61,7 @@ WebInspector.LayoutTimelineView = function(recording) ...@@ -61,6 +61,7 @@ WebInspector.LayoutTimelineView = function(recording)
this._dataGrid = new WebInspector.LayoutTimelineDataGrid(this.navigationSidebarTreeOutline, columns); this._dataGrid = new WebInspector.LayoutTimelineDataGrid(this.navigationSidebarTreeOutline, columns);
this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this); this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
this.element.classList.add(WebInspector.LayoutTimelineView.StyleClassName); this.element.classList.add(WebInspector.LayoutTimelineView.StyleClassName);
this.element.appendChild(this._dataGrid.element); this.element.appendChild(this._dataGrid.element);
...@@ -120,6 +121,16 @@ WebInspector.LayoutTimelineView.prototype = { ...@@ -120,6 +121,16 @@ WebInspector.LayoutTimelineView.prototype = {
this._dataGrid.reset(); this._dataGrid.reset();
}, },
// Protected
treeElementPathComponentSelected: function(event)
{
var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
if (!dataGridNode)
return;
dataGridNode.revealAndSelect();
},
// Private // Private
_processPendingRecords: function() _processPendingRecords: function()
...@@ -152,6 +163,11 @@ WebInspector.LayoutTimelineView.prototype = { ...@@ -152,6 +163,11 @@ WebInspector.LayoutTimelineView.prototype = {
WebInspector.timelineSidebarPanel.updateFilter(); WebInspector.timelineSidebarPanel.updateFilter();
}, },
_dataGridNodeSelected: function(event)
{
this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
},
_treeElementSelected: function(treeElement, selectedByUser) _treeElementSelected: function(treeElement, selectedByUser)
{ {
if (this._dataGrid.shouldIgnoreSelectionEvent()) if (this._dataGrid.shouldIgnoreSelectionEvent())
......
...@@ -78,6 +78,7 @@ WebInspector.NetworkTimelineView = function(recording) ...@@ -78,6 +78,7 @@ WebInspector.NetworkTimelineView = function(recording)
this._dataGrid = new WebInspector.TimelineDataGrid(this.navigationSidebarTreeOutline, columns); this._dataGrid = new WebInspector.TimelineDataGrid(this.navigationSidebarTreeOutline, columns);
this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this); this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
this.element.classList.add(WebInspector.NetworkTimelineView.StyleClassName); this.element.classList.add(WebInspector.NetworkTimelineView.StyleClassName);
this.element.appendChild(this._dataGrid.element); this.element.appendChild(this._dataGrid.element);
...@@ -137,6 +138,16 @@ WebInspector.NetworkTimelineView.prototype = { ...@@ -137,6 +138,16 @@ WebInspector.NetworkTimelineView.prototype = {
this._dataGrid.reset(); this._dataGrid.reset();
}, },
// Protected
treeElementPathComponentSelected: function(event)
{
var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
if (!dataGridNode)
return;
dataGridNode.revealAndSelect();
},
// Private // Private
_processPendingRecords: function() _processPendingRecords: function()
...@@ -174,6 +185,11 @@ WebInspector.NetworkTimelineView.prototype = { ...@@ -174,6 +185,11 @@ WebInspector.NetworkTimelineView.prototype = {
WebInspector.timelineSidebarPanel.updateFilter(); WebInspector.timelineSidebarPanel.updateFilter();
}, },
_dataGridNodeSelected: function(event)
{
this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
},
_treeElementSelected: function(treeElement, selectedByUser) _treeElementSelected: function(treeElement, selectedByUser)
{ {
if (this._dataGrid.shouldIgnoreSelectionEvent()) if (this._dataGrid.shouldIgnoreSelectionEvent())
......
...@@ -32,7 +32,9 @@ WebInspector.OverviewTimelineView = function(recording) ...@@ -32,7 +32,9 @@ WebInspector.OverviewTimelineView = function(recording)
this.navigationSidebarTreeOutline.onselect = this._treeElementSelected.bind(this); this.navigationSidebarTreeOutline.onselect = this._treeElementSelected.bind(this);
var columns = {"graph": {width: "100%"}}; var columns = {"graph": {width: "100%"}};
this._dataGrid = new WebInspector.DataGrid(columns); this._dataGrid = new WebInspector.DataGrid(columns);
this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(this._contentTreeOutline, this._dataGrid); this._treeOutlineDataGridSynchronizer = new WebInspector.TreeOutlineDataGridSynchronizer(this._contentTreeOutline, this._dataGrid);
...@@ -103,6 +105,39 @@ WebInspector.OverviewTimelineView.prototype = { ...@@ -103,6 +105,39 @@ WebInspector.OverviewTimelineView.prototype = {
this._processPendingRepresentedObjects(); this._processPendingRepresentedObjects();
}, },
get selectionPathComponents()
{
var dataGridNode = this._dataGrid.selectedNode;
if (!dataGridNode)
return null;
var pathComponents = [];
while (dataGridNode && !dataGridNode.root) {
var treeElement = this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(dataGridNode);
console.assert(treeElement);
if (!treeElement)
break;
var pathComponent = new WebInspector.GeneralTreeElementPathComponent(treeElement);
pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this.treeElementPathComponentSelected, this);
pathComponents.unshift(pathComponent);
dataGridNode = dataGridNode.parent;
}
return pathComponents;
},
// Protected
treeElementPathComponentSelected: function(event)
{
var dataGridNode = this._treeOutlineDataGridSynchronizer.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
if (!dataGridNode)
return;
dataGridNode.revealAndSelect();
},
// Private // Private
_compareTreeElementsByDetails: function(a, b) _compareTreeElementsByDetails: function(a, b)
...@@ -266,6 +301,11 @@ WebInspector.OverviewTimelineView.prototype = { ...@@ -266,6 +301,11 @@ WebInspector.OverviewTimelineView.prototype = {
this.needsLayout(); this.needsLayout();
}, },
_dataGridNodeSelected: function(event)
{
this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
},
_treeElementSelected: function(treeElement, selectedByUser) _treeElementSelected: function(treeElement, selectedByUser)
{ {
if (!WebInspector.timelineSidebarPanel.canShowDifferentContentView()) if (!WebInspector.timelineSidebarPanel.canShowDifferentContentView())
......
...@@ -55,6 +55,7 @@ WebInspector.ScriptTimelineView = function(recording) ...@@ -55,6 +55,7 @@ WebInspector.ScriptTimelineView = function(recording)
this._dataGrid = new WebInspector.ScriptTimelineDataGrid(this.navigationSidebarTreeOutline, columns); this._dataGrid = new WebInspector.ScriptTimelineDataGrid(this.navigationSidebarTreeOutline, columns);
this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this); this._dataGrid.addEventListener(WebInspector.TimelineDataGrid.Event.FiltersDidChange, this._dataGridFiltersDidChange, this);
this._dataGrid.addEventListener(WebInspector.DataGrid.Event.SelectedNodeChanged, this._dataGridNodeSelected, this);
this.element.classList.add(WebInspector.ScriptTimelineView.StyleClassName); this.element.classList.add(WebInspector.ScriptTimelineView.StyleClassName);
this.element.appendChild(this._dataGrid.element); this.element.appendChild(this._dataGrid.element);
...@@ -114,6 +115,16 @@ WebInspector.ScriptTimelineView.prototype = { ...@@ -114,6 +115,16 @@ WebInspector.ScriptTimelineView.prototype = {
this._dataGrid.reset(); this._dataGrid.reset();
}, },
// Protected
treeElementPathComponentSelected: function(event)
{
var dataGridNode = this._dataGrid.dataGridNodeForTreeElement(event.data.pathComponent.generalTreeElement);
if (!dataGridNode)
return;
dataGridNode.revealAndSelect();
},
// Private // Private
_processPendingRecords: function() _processPendingRecords: function()
...@@ -146,6 +157,11 @@ WebInspector.ScriptTimelineView.prototype = { ...@@ -146,6 +157,11 @@ WebInspector.ScriptTimelineView.prototype = {
WebInspector.timelineSidebarPanel.updateFilter(); WebInspector.timelineSidebarPanel.updateFilter();
}, },
_dataGridNodeSelected: function(event)
{
this.dispatchEventToListeners(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange);
},
_treeElementSelected: function(treeElement, selectedByUser) _treeElementSelected: function(treeElement, selectedByUser)
{ {
if (this._dataGrid.shouldIgnoreSelectionEvent()) if (this._dataGrid.shouldIgnoreSelectionEvent())
......
...@@ -128,9 +128,9 @@ WebInspector.TimelineContentView.prototype = { ...@@ -128,9 +128,9 @@ WebInspector.TimelineContentView.prototype = {
get selectionPathComponents() get selectionPathComponents()
{ {
if (!this._currentTimelineViewIdentifier) var pathComponents = this._currentTimelineViewIdentifier ? [this._pathComponentMap.get(this._currentTimelineViewIdentifier)] : [];
return []; pathComponents = pathComponents.concat(this._currentTimelineView.selectionPathComponents || []);
return [this._pathComponentMap.get(this._currentTimelineViewIdentifier)]; return pathComponents;
}, },
get navigationItems() get navigationItems()
...@@ -217,6 +217,11 @@ WebInspector.TimelineContentView.prototype = { ...@@ -217,6 +217,11 @@ WebInspector.TimelineContentView.prototype = {
WebInspector.timelineSidebarPanel.showTimelineView(event.data.pathComponent.representedObject); WebInspector.timelineSidebarPanel.showTimelineView(event.data.pathComponent.representedObject);
}, },
_timelineViewSelectionPathComponentsDidChange: function()
{
this.dispatchEventToListeners(WebInspector.ContentView.Event.SelectionPathComponentsDidChange);
},
_showTimelineView: function(timelineView, identifier) _showTimelineView: function(timelineView, identifier)
{ {
console.assert(timelineView instanceof WebInspector.TimelineView); console.assert(timelineView instanceof WebInspector.TimelineView);
...@@ -225,6 +230,8 @@ WebInspector.TimelineContentView.prototype = { ...@@ -225,6 +230,8 @@ WebInspector.TimelineContentView.prototype = {
return; return;
if (this._currentTimelineView) { if (this._currentTimelineView) {
this._currentTimelineView.removeEventListener(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange, this._timelineViewSelectionPathComponentsDidChange, this);
this._currentTimelineView.hidden(); this._currentTimelineView.hidden();
this._currentTimelineView.element.remove(); this._currentTimelineView.element.remove();
} }
...@@ -236,6 +243,8 @@ WebInspector.TimelineContentView.prototype = { ...@@ -236,6 +243,8 @@ WebInspector.TimelineContentView.prototype = {
WebInspector.timelineSidebarPanel.contentTreeOutlineLabel = timelineView && timelineView.navigationSidebarTreeOutlineLabel; WebInspector.timelineSidebarPanel.contentTreeOutlineLabel = timelineView && timelineView.navigationSidebarTreeOutlineLabel;
if (this._currentTimelineView) { if (this._currentTimelineView) {
this._currentTimelineView.addEventListener(WebInspector.TimelineView.Event.SelectionPathComponentsDidChange, this._timelineViewSelectionPathComponentsDidChange, this);
this._viewContainer.appendChild(this._currentTimelineView.element); this._viewContainer.appendChild(this._currentTimelineView.element);
this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime; this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
......
...@@ -119,6 +119,16 @@ WebInspector.TimelineDataGrid.prototype = { ...@@ -119,6 +119,16 @@ WebInspector.TimelineDataGrid.prototype = {
this._hidePopover(); this._hidePopover();
}, },
treeElementForDataGridNode: function(dataGridNode)
{
return this._treeOutlineDataGridSynchronizer.treeElementForDataGridNode(dataGridNode);
},
dataGridNodeForTreeElement: function(treeElement)
{
return this._treeOutlineDataGridSynchronizer.dataGridNodeForTreeElement(treeElement);
},
callFramePopoverAnchorElement: function() callFramePopoverAnchorElement: function()
{ {
// Implemented by subclasses. // Implemented by subclasses.
......
...@@ -40,6 +40,10 @@ WebInspector.TimelineView = function() ...@@ -40,6 +40,10 @@ WebInspector.TimelineView = function()
WebInspector.TimelineView.StyleClassName = "timeline-view"; WebInspector.TimelineView.StyleClassName = "timeline-view";
WebInspector.TimelineView.Event = {
SelectionPathComponentsDidChange: "timeline-view-selection-path-components-did-change"
};
WebInspector.TimelineView.prototype = { WebInspector.TimelineView.prototype = {
constructor: WebInspector.TimelineView, constructor: WebInspector.TimelineView,
__proto__: WebInspector.Object.prototype, __proto__: WebInspector.Object.prototype,
...@@ -57,6 +61,16 @@ WebInspector.TimelineView.prototype = { ...@@ -57,6 +61,16 @@ WebInspector.TimelineView.prototype = {
return null; return null;
}, },
get selectionPathComponents()
{
if (!this._contentTreeOutline.selectedTreeElement)
return null;
var pathComponent = new WebInspector.GeneralTreeElementPathComponent(this._contentTreeOutline.selectedTreeElement);
pathComponent.addEventListener(WebInspector.HierarchicalPathComponent.Event.SiblingWasSelected, this.treeElementPathComponentSelected, this);
return [pathComponent];
},
get zeroTime() get zeroTime()
{ {
return this._zeroTime; return this._zeroTime;
...@@ -176,6 +190,11 @@ WebInspector.TimelineView.prototype = { ...@@ -176,6 +190,11 @@ WebInspector.TimelineView.prototype = {
// Protected // Protected
treeElementPathComponentSelected: function(event)
{
// Implemented by sub-classes if needed.
},
needsLayout: function() needsLayout: function()
{ {
if (!this._visible) if (!this._visible)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment