Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (188707 => 188708)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-20 21:55:23 UTC (rev 188707)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-20 22:07:59 UTC (rev 188708)
@@ -1,3 +1,41 @@
+2015-08-20 Matt Baker <[email protected]>
+
+ Web Inspector: Filtered frames should be styled differently in the Rendering Frames overview graph
+ https://bugs.webkit.org/show_bug.cgi?id=147421
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/Views/NavigationSidebarPanel.js:
+ (WebInspector.NavigationSidebarPanel.prototype.representedObjectWasFiltered):
+ (WebInspector.NavigationSidebarPanel.prototype._updateFilter):
+ Inform derived sidebar of tree element filter state changes.
+
+ * UserInterface/Views/RenderingFrameTimelineOverviewGraph.js:
+ (WebInspector.RenderingFrameTimelineOverviewGraph.prototype.recordWasFiltered):
+ (WebInspector.RenderingFrameTimelineOverviewGraph.prototype.updateLayout):
+ Update filtered frame style when a record's state changes, and during layout.
+
+ * UserInterface/Views/TimelineOverview.js:
+ * UserInterface/Views/TimelineOverviewGraph.js:
+ (WebInspector.TimelineOverviewGraph.prototype.recordWasFiltered):
+ Allow setting a record's filtered state for a given timeline in the overview.
+
+ * UserInterface/Views/TimelineRecordFrame.css:
+ (.timeline-record-frame.filtered > .frame):
+ New filtered frame style.
+
+ * UserInterface/Views/TimelineRecordFrame.js:
+ (WebInspector.TimelineRecordFrame.prototype.get filtered):
+ (WebInspector.TimelineRecordFrame.prototype.set filtered):
+
+ * UserInterface/Views/TimelineRecordingContentView.js:
+ (WebInspector.TimelineRecordingContentView.prototype.recordWasFiltered):
+
+ * UserInterface/Views/TimelineSidebarPanel.js:
+ (WebInspector.TimelineSidebarPanel.prototype.representedObjectWasFiltered):
+ (WebInspector.TimelineSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
+ Apply task filters to RenderingFrameTimelineRecords and their immediate children.
+
2015-08-20 Brian Burg <[email protected]>
Web Inspector: console assertion when hitting breakpoint after auto-recording ends
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js (188707 => 188708)
--- trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js 2015-08-20 21:55:23 UTC (rev 188707)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/NavigationSidebarPanel.js 2015-08-20 22:07:59 UTC (rev 188708)
@@ -421,6 +421,11 @@
// Protected
+ representedObjectWasFiltered(representedObject, filtered)
+ {
+ // Implemented by subclasses if needed.
+ }
+
pruneStaleResourceTreeElements()
{
if (this._checkForStaleResourcesTimeoutIdentifier) {
@@ -525,7 +530,11 @@
// Update the whole tree.
var currentTreeElement = this._contentTreeOutline.children[0];
while (currentTreeElement && !currentTreeElement.root) {
+ const currentTreeElementWasHidden = currentTreeElement.hidden;
this.applyFiltersToTreeElement(currentTreeElement);
+ if (currentTreeElementWasHidden !== currentTreeElement.hidden)
+ this.representedObjectWasFiltered(currentTreeElement.representedObject, currentTreeElement.hidden);
+
currentTreeElement = currentTreeElement.traverseNextTreeElement(false, null, dontPopulate);
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js (188707 => 188708)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js 2015-08-20 21:55:23 UTC (rev 188707)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RenderingFrameTimelineOverviewGraph.js 2015-08-20 22:07:59 UTC (rev 188708)
@@ -74,6 +74,25 @@
this._framesPerSecondDividerMap.clear();
}
+ recordWasFiltered(record, filtered)
+ {
+ super.recordWasFiltered(record, filtered);
+
+ if (!(record instanceof WebInspector.RenderingFrameTimelineRecord))
+ return;
+
+ record[WebInspector.RenderingFrameTimelineOverviewGraph.RecordWasFilteredSymbol] = filtered;
+
+ // Set filtered style if the frame element is within the visible range.
+ const startIndex = Math.floor(this.startTime);
+ const endIndex = Math.min(Math.floor(this.endTime), this._renderingFrameTimeline.records.length - 1);
+ if (record.frameIndex < startIndex || record.frameIndex > endIndex)
+ return;
+
+ const frameIndex = record.frameIndex - startIndex;
+ this._timelineRecordFrames[frameIndex].filtered = filtered;
+ }
+
updateLayout()
{
super.updateLayout();
@@ -98,6 +117,7 @@
if (!timelineRecordFrame.element.parentNode)
this.element.appendChild(timelineRecordFrame.element);
+ timelineRecordFrame.filtered = record[WebInspector.RenderingFrameTimelineOverviewGraph.RecordWasFilteredSymbol] || false;
++recordFrameIndex;
}
@@ -246,5 +266,7 @@
}
};
+WebInspector.RenderingFrameTimelineOverviewGraph.RecordWasFilteredSymbol = Symbol("rendering-frame-overview-graph-record-was-filtered");
+
WebInspector.RenderingFrameTimelineOverviewGraph.MaximumGraphHeightSeconds = 0.037;
WebInspector.RenderingFrameTimelineOverviewGraph.MinimumGraphHeightSeconds = 0.0185;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js (188707 => 188708)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2015-08-20 21:55:23 UTC (rev 188707)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverview.js 2015-08-20 22:07:59 UTC (rev 188708)
@@ -279,6 +279,18 @@
this.scrollStartTime = marker.time - (this.visibleDuration / 2);
}
+ recordWasFiltered(timeline, record, filtered)
+ {
+ console.assert(this.canShowTimeline(timeline), timeline);
+
+ let overviewGraph = this._timelineOverviewGraphsMap.get(timeline);
+ console.assert(overviewGraph, "Missing overview graph for timeline type " + timeline.type);
+ if (!overviewGraph)
+ return;
+
+ overviewGraph.recordWasFiltered(record, filtered);
+ }
+
selectRecord(timeline, record)
{
console.assert(this.canShowTimeline(timeline), timeline);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js (188707 => 188708)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js 2015-08-20 21:55:23 UTC (rev 188707)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineOverviewGraph.js 2015-08-20 22:07:59 UTC (rev 188708)
@@ -171,6 +171,11 @@
// Implemented by sub-classes if needed.
}
+ recordWasFiltered(record, filtered)
+ {
+ // Implemented by sub-classes if needed.
+ }
+
updateLayout()
{
if (this._scheduledLayoutUpdateIdentifier) {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css (188707 => 188708)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css 2015-08-20 21:55:23 UTC (rev 188707)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.css 2015-08-20 22:07:59 UTC (rev 188708)
@@ -57,6 +57,10 @@
background: -webkit-linear-gradient(left, hsl(0, 0%, 96%), hsl(0, 0%, 96%)) no-repeat 1px -1px;
}
+.timeline-record-frame.filtered > .frame {
+ opacity: 0.35;
+}
+
.timeline-record-frame.selected > .frame {
box-shadow: 0 -1px 0 white;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js (188707 => 188708)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js 2015-08-20 21:55:23 UTC (rev 188707)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordFrame.js 2015-08-20 22:07:59 UTC (rev 188708)
@@ -34,6 +34,7 @@
this._graphDataSource = graphDataSource;
this._record = record || null;
+ this._filtered = false;
}
// Public
@@ -66,6 +67,20 @@
this._element.classList.toggle("selected");
}
+ get filtered()
+ {
+ return this._filtered;
+ }
+
+ set filtered(x)
+ {
+ if (this._filtered === x)
+ return;
+
+ this._filtered = x;
+ this._element.classList.toggle("filtered");
+ }
+
refresh(graphDataSource)
{
if (!this._record)
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js (188707 => 188708)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2015-08-20 21:55:23 UTC (rev 188707)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordingContentView.js 2015-08-20 22:07:59 UTC (rev 188708)
@@ -247,6 +247,14 @@
this.currentTimelineView.filterDidChange();
}
+ recordWasFiltered(record, filtered)
+ {
+ if (!this.currentTimelineView)
+ return;
+
+ this._currentTimelineOverview.recordWasFiltered(this.currentTimelineView.representedObject, record, filtered);
+ }
+
matchTreeElementAgainstCustomFilters(treeElement)
{
if (this.currentTimelineView && !this.currentTimelineView.matchTreeElementAgainstCustomFilters(treeElement))
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (188707 => 188708)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-08-20 21:55:23 UTC (rev 188707)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-08-20 22:07:59 UTC (rev 188708)
@@ -377,6 +377,14 @@
// Protected
+ representedObjectWasFiltered(representedObject, filtered)
+ {
+ super.representedObjectWasFiltered(representedObject, filtered);
+
+ if (representedObject instanceof WebInspector.TimelineRecord)
+ this._displayedContentView.recordWasFiltered(representedObject, filtered);
+ }
+
updateFilter()
{
super.updateFilter();
@@ -402,14 +410,18 @@
if (!treeElement)
return false;
- var visible = false;
- if (!(treeElement.record instanceof WebInspector.RenderingFrameTimelineRecord)) {
- var taskType = WebInspector.RenderingFrameTimelineRecord.taskTypeForTimelineRecord(treeElement.record);
- if (!this._renderingFrameTaskFilter.has(taskType))
- visible = true;
- }
+ let records;
+ if (treeElement.record instanceof WebInspector.RenderingFrameTimelineRecord)
+ records = treeElement.record.children;
+ else
+ records = [treeElement.record];
- if (!visible)
+ const filtered = records.every(function(record) {
+ var taskType = WebInspector.RenderingFrameTimelineRecord.taskTypeForTimelineRecord(record);
+ return this._renderingFrameTaskFilter.has(taskType);
+ }, this);
+
+ if (filtered)
return false;
}
