Commit 16627bc9 authored by timothy@apple.com's avatar timothy@apple.com

Filter the Timeline overview graph and sidebar based on the current time selection.

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

Reviewed by Joseph Pecoraro.

* UserInterface/NavigationSidebarPanel.js:
(WebInspector.NavigationSidebarPanel.prototype.updateFilter):
(WebInspector.NavigationSidebarPanel.prototype.hasCustomFilters):
(WebInspector.NavigationSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
(WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.matchTextFilter):
(WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement):
Add support for custom filters implemented by subclasses.

* UserInterface/TimelineContentView.js:
(WebInspector.TimelineContentView.prototype.matchTreeElementAgainstCustomFilters.checkTimeBounds):
(WebInspector.TimelineContentView.prototype.matchTreeElementAgainstCustomFilters):
(WebInspector.TimelineContentView.prototype._timeRangeSelectionChanged):
Filter known tree element types by time.

* UserInterface/TimelineSidebarPanel.css:
(.sidebar > .panel.timeline > .empty-content-placeholder):
Position the empty placeholder with the content.

* UserInterface/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel.prototype.hasCustomFilters):
(WebInspector.TimelineSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
Defer filtering to the TimelineContentView.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162414 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 2333b3e0
2014-01-13 Timothy Hatcher <timothy@apple.com>
Filter the Timeline overview graph and sidebar based on the current time selection.
https://bugs.webkit.org/show_bug.cgi?id=126955
Reviewed by Joseph Pecoraro.
* UserInterface/NavigationSidebarPanel.js:
(WebInspector.NavigationSidebarPanel.prototype.updateFilter):
(WebInspector.NavigationSidebarPanel.prototype.hasCustomFilters):
(WebInspector.NavigationSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
(WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement.matchTextFilter):
(WebInspector.NavigationSidebarPanel.prototype.applyFiltersToTreeElement):
Add support for custom filters implemented by subclasses.
* UserInterface/TimelineContentView.js:
(WebInspector.TimelineContentView.prototype.matchTreeElementAgainstCustomFilters.checkTimeBounds):
(WebInspector.TimelineContentView.prototype.matchTreeElementAgainstCustomFilters):
(WebInspector.TimelineContentView.prototype._timeRangeSelectionChanged):
Filter known tree element types by time.
* UserInterface/TimelineSidebarPanel.css:
(.sidebar > .panel.timeline > .empty-content-placeholder):
Position the empty placeholder with the content.
* UserInterface/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel.prototype.hasCustomFilters):
(WebInspector.TimelineSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
Defer filtering to the TimelineContentView.
2014-01-13 Timothy Hatcher <timothy@apple.com>
Implement state cookie support for WebInspector.TimelineSidebarPanel.
......
......@@ -54,7 +54,7 @@ WebInspector.NavigationSidebarPanel = function(identifier, displayName, image, k
this._contentTreeOutline = this.createContentTreeOutline(true);
this._filterBar = new WebInspector.FilterBar();
this._filterBar.addEventListener(WebInspector.FilterBar.Event.TextFilterDidChange, this._updateFilter, this);
this._filterBar.addEventListener(WebInspector.FilterBar.Event.TextFilterDidChange, this._textFilterDidChange, this);
this.element.appendChild(this._filterBar.element);
this._bottomOverflowShadowElement = document.createElement("div");
......@@ -292,9 +292,26 @@ WebInspector.NavigationSidebarPanel.prototype = {
// Implemented by subclasses if needed.
},
applyFiltersToTreeElement: function(treeElement)
updateFilter: function(dontExpandOnMatch)
{
if (!this._filterBar.hasActiveFilters()) {
this._updateFilter(dontExpandOnMatch);
},
hasCustomFilters: function()
{
// Implemented by subclasses if needed.
return false;
},
matchTreeElementAgainstCustomFilters: function(treeElement)
{
// Implemented by subclasses if needed.
return true;
},
applyFiltersToTreeElement: function(treeElement, dontExpandOnMatch)
{
if (!this._filterBar.hasActiveFilters() && !this.hasCustomFilters()) {
// No filters, so make everything visible.
treeElement.hidden = false;
......@@ -307,26 +324,23 @@ WebInspector.NavigationSidebarPanel.prototype = {
return;
}
// Get the filterable data from the tree element.
var filterableData = treeElement.filterableData;
if (!filterableData)
return;
var filterableData = treeElement.filterableData || {};
var self = this;
function matchTextFilter(input)
function matchTextFilter(inputs)
{
if (!self._textFilterRegex)
if (!inputs || !self._textFilterRegex)
return true;
// Convert to a single item array if needed.
if (!(input instanceof Array))
input = [input];
if (!(inputs instanceof Array))
inputs = [inputs];
// Loop over all the inputs and try to match them.
for (var i = 0; i < input.length; ++i) {
if (!input[i])
for (var input of inputs) {
if (!input)
continue;
if (self._textFilterRegex.test(input[i]))
if (self._textFilterRegex.test(input))
return true;
}
......@@ -344,7 +358,7 @@ WebInspector.NavigationSidebarPanel.prototype = {
while (currentAncestor && !currentAncestor.root) {
currentAncestor.hidden = false;
if (!currentAncestor.expanded) {
if (!currentAncestor.expanded && !dontExpandOnMatch) {
currentAncestor.__wasExpandedDuringFiltering = true;
currentAncestor.expand();
}
......@@ -353,7 +367,7 @@ WebInspector.NavigationSidebarPanel.prototype = {
}
}
if (matchTextFilter(filterableData.text)) {
if (matchTextFilter(filterableData.text) && this.matchTreeElementAgainstCustomFilters(treeElement)) {
// Make this element visible since it matches.
makeVisible();
return;
......@@ -449,7 +463,12 @@ WebInspector.NavigationSidebarPanel.prototype = {
this._emptyFilterResults = true;
},
_updateFilter: function()
_textFilterDidChange: function()
{
this._updateFilter();
},
_updateFilter: function(dontExpandOnMatch)
{
var filters = this._filterBar.filters;
this._textFilterRegex = simpleGlobStringToRegExp(filters.text, "i");
......@@ -458,7 +477,7 @@ WebInspector.NavigationSidebarPanel.prototype = {
// Update the whole tree.
var currentTreeElement = this._contentTreeOutline.children[0];
while (currentTreeElement && !currentTreeElement.root) {
this.applyFiltersToTreeElement(currentTreeElement);
this.applyFiltersToTreeElement(currentTreeElement, dontExpandOnMatch);
currentTreeElement = currentTreeElement.traverseNextTreeElement(false, null, false);
}
......
......@@ -149,6 +149,44 @@ WebInspector.TimelineContentView.prototype = {
this._currentTimelineView.updateLayout();
},
matchTreeElementAgainstCustomFilters: function(treeElement)
{
var startTime = this._timelineOverview.selectionStartTime;
var endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
var currentTime = this._currentTimeMarker.time || WebInspector.timelineManager.recording.startTime;
function checkTimeBounds(itemStartTime, itemEndTime)
{
itemStartTime = itemStartTime || currentTime;
itemEndTime = itemEndTime || currentTime;
return startTime <= itemEndTime && itemStartTime <= endTime;
}
if (treeElement instanceof WebInspector.ResourceTreeElement) {
var resource = treeElement.resource;
return checkTimeBounds(resource.requestSentTimestamp, resource.finishedOrFailedTimestamp);
}
if (treeElement instanceof WebInspector.SourceCodeTimelineTreeElement) {
var sourceCodeTimeline = treeElement.sourceCodeTimeline;
// Do a quick check of the timeline bounds before we check each record.
if (!checkTimeBounds(sourceCodeTimeline.startTime, sourceCodeTimeline.endTime))
return false;
for (var record of sourceCodeTimeline.records) {
if (checkTimeBounds(record.startTime, record.endTime))
return true;
}
return false;
}
console.error("Unknown TreeElement, can't filter by time.");
return true;
},
// Private
_pathComponentSelected: function(event)
......@@ -273,5 +311,8 @@ WebInspector.TimelineContentView.prototype = {
this._currentTimelineView.zeroTime = this._timelineOverview.startTime;
this._currentTimelineView.startTime = this._timelineOverview.selectionStartTime;
this._currentTimelineView.endTime = this._timelineOverview.selectionStartTime + this._timelineOverview.selectionDuration;
// Delay until the next frame to stay in sync with the current timeline view's time-based layout changes.
requestAnimationFrame(function() { WebInspector.timelineSidebarPanel.updateFilter(true); });
}
};
......@@ -118,7 +118,8 @@
opacity: 0.8;
}
.sidebar > .panel.timeline > .content {
.sidebar > .panel.timeline > .content,
.sidebar > .panel.timeline > .empty-content-placeholder {
top: 175px;
}
......
......@@ -180,6 +180,19 @@ WebInspector.TimelineSidebarPanel.prototype = {
this._stripeBackgroundElement.style.height = contentHeight + "px";
},
hasCustomFilters: function()
{
return true;
},
matchTreeElementAgainstCustomFilters: function(treeElement)
{
if (!this._timelineContentView)
return true;
return this._timelineContentView.matchTreeElementAgainstCustomFilters(treeElement);
},
canShowDifferentContentView: function()
{
return !this.restoringState || !this._restoredShowingTimelineContentView;
......
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