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

Source/WebInspectorUI/ChangeLog

+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.

Source/WebInspectorUI/UserInterface/NavigationSidebarPanel.js

@@ -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);
         }
 

Source/WebInspectorUI/UserInterface/TimelineContentView.js

@@ -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); });
     }
 };

Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.css

@@ -118,7 +118,8 @@
     opacity: 0.8;
 }
 
-.sidebar > .panel.timeline > .content {
+.sidebar > .panel.timeline > .content,
+.sidebar > .panel.timeline > .empty-content-placeholder {
     top: 175px;
 }
 

Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.js

@@ -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;