<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[188321] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/188321">188321</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2015-08-11 20:16:15 -0700 (Tue, 11 Aug 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Add the ability to filter out tasks in the Rendering Frames timeline
https://bugs.webkit.org/show_bug.cgi?id=147389
Reviewed by Timothy Hatcher.
Added filtering by task type to the Rendering Frames timeline view. Legend item checkboxes
in the timeline sidebar toggle filtering for the corresponding task. The "Other" category
cannot be filtered, since all rendering frame records include some "other" time in addition to
child records from at least one additional task type.
A row is filtered (hidden) from the data grid when the corresponding rendering frame has no
unfiltered child records.
* UserInterface/Base/Main.js:
(WebInspector._windowFocused):
(WebInspector._windowBlurred):
Added inactive style for docked window.
* UserInterface/Views/ChartDetailsSectionRow.css:
(.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > .color-key):
(.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label):
(.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox]):
(body.window-inactive .details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox]):
(.details-section > .content > .group > .row.chart > .defs-only):
(.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > .label > .color-swatch): Deleted.
(.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > .label): Deleted.
Switched to label elements, added checkbox styles, and updated color swatch style for non-checkbox items.
* UserInterface/Views/ChartDetailsSectionRow.js:
(WebInspector.ChartDetailsSectionRow):
Added svg filter container and style sheet element.
(WebInspector.ChartDetailsSectionRow.prototype.set data):
(WebInspector.ChartDetailsSectionRow.prototype._createLegend.createGammaPrimitive):
(WebInspector.ChartDetailsSectionRow.prototype._createLegend.createCheckboxFilterElement):
Helper function to create an svg:filter to blend legend key color over the native checkbox element.
Filter assumes grayscale input, and each checkbox requires a separate filter.
(WebInspector.ChartDetailsSectionRow.prototype._createLegend):
Creates legend items, svg filters, and checkbox style sheet.
(WebInspector.ChartDetailsSectionRow.prototype._legendItemCheckboxValueChanged):
Repackage and forward checkbox changed event.
(WebInspector.ChartDetailsSectionRow.prototype._createLegendItem): Deleted.
Logic moved to WebInspector.ChartDetailsSectionRow.prototype._createLegend.
* UserInterface/Views/TimelineSidebarPanel.js:
Added set of rendering frame task types against which tree elements can be filtered.
(WebInspector.TimelineSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
If filter is not empty, check ancestor rendering frame record for unfiltered data.
(WebInspector.TimelineSidebarPanel.prototype._frameSelectionLegendItemChecked):
Update task filter in response when legend items are checked/unchecked.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseMainjs">trunk/Source/WebInspectorUI/UserInterface/Base/Main.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsChartDetailsSectionRowcss">trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsChartDetailsSectionRowjs">trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (188320 => 188321)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-12 02:35:34 UTC (rev 188320)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-12 03:16:15 UTC (rev 188321)
</span><span class="lines">@@ -1,3 +1,55 @@
</span><ins>+2015-08-11 Matt Baker <mattbaker@apple.com>
+
+ Web Inspector: Add the ability to filter out tasks in the Rendering Frames timeline
+ https://bugs.webkit.org/show_bug.cgi?id=147389
+
+ Reviewed by Timothy Hatcher.
+
+ Added filtering by task type to the Rendering Frames timeline view. Legend item checkboxes
+ in the timeline sidebar toggle filtering for the corresponding task. The "Other" category
+ cannot be filtered, since all rendering frame records include some "other" time in addition to
+ child records from at least one additional task type.
+
+ A row is filtered (hidden) from the data grid when the corresponding rendering frame has no
+ unfiltered child records.
+
+ * UserInterface/Base/Main.js:
+ (WebInspector._windowFocused):
+ (WebInspector._windowBlurred):
+ Added inactive style for docked window.
+
+ * UserInterface/Views/ChartDetailsSectionRow.css:
+ (.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > .color-key):
+ (.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label):
+ (.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox]):
+ (body.window-inactive .details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox]):
+ (.details-section > .content > .group > .row.chart > .defs-only):
+ (.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > .label > .color-swatch): Deleted.
+ (.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > .label): Deleted.
+ Switched to label elements, added checkbox styles, and updated color swatch style for non-checkbox items.
+
+ * UserInterface/Views/ChartDetailsSectionRow.js:
+ (WebInspector.ChartDetailsSectionRow):
+ Added svg filter container and style sheet element.
+ (WebInspector.ChartDetailsSectionRow.prototype.set data):
+ (WebInspector.ChartDetailsSectionRow.prototype._createLegend.createGammaPrimitive):
+ (WebInspector.ChartDetailsSectionRow.prototype._createLegend.createCheckboxFilterElement):
+ Helper function to create an svg:filter to blend legend key color over the native checkbox element.
+ Filter assumes grayscale input, and each checkbox requires a separate filter.
+ (WebInspector.ChartDetailsSectionRow.prototype._createLegend):
+ Creates legend items, svg filters, and checkbox style sheet.
+ (WebInspector.ChartDetailsSectionRow.prototype._legendItemCheckboxValueChanged):
+ Repackage and forward checkbox changed event.
+ (WebInspector.ChartDetailsSectionRow.prototype._createLegendItem): Deleted.
+ Logic moved to WebInspector.ChartDetailsSectionRow.prototype._createLegend.
+
+ * UserInterface/Views/TimelineSidebarPanel.js:
+ Added set of rendering frame task types against which tree elements can be filtered.
+ (WebInspector.TimelineSidebarPanel.prototype.matchTreeElementAgainstCustomFilters):
+ If filter is not empty, check ancestor rendering frame record for unfiltered data.
+ (WebInspector.TimelineSidebarPanel.prototype._frameSelectionLegendItemChecked):
+ Update task filter in response when legend items are checked/unchecked.
+
</ins><span class="cx"> 2015-08-11 Brent Fulgham <bfulgham@apple.com>
</span><span class="cx">
</span><span class="cx"> [Win] Switch Windows build to Visual Studio 2015
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseMainjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (188320 => 188321)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-08-12 02:35:34 UTC (rev 188320)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-08-12 03:16:15 UTC (rev 188321)
</span><span class="lines">@@ -1214,20 +1214,20 @@
</span><span class="cx">
</span><span class="cx"> WebInspector._windowFocused = function(event)
</span><span class="cx"> {
</span><del>- if (event.target.document.nodeType !== Node.DOCUMENT_NODE || this.docked)
</del><ins>+ if (event.target.document.nodeType !== Node.DOCUMENT_NODE)
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> // FIXME: We should use the :window-inactive pseudo class once https://webkit.org/b/38927 is fixed.
</span><del>- document.body.classList.remove("window-inactive");
</del><ins>+ document.body.classList.remove(this.docked ? "window-docked-inactive" : "window-inactive");
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector._windowBlurred = function(event)
</span><span class="cx"> {
</span><del>- if (event.target.document.nodeType !== Node.DOCUMENT_NODE || this.docked)
</del><ins>+ if (event.target.document.nodeType !== Node.DOCUMENT_NODE)
</ins><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> // FIXME: We should use the :window-inactive pseudo class once https://webkit.org/b/38927 is fixed.
</span><del>- document.body.classList.add("window-inactive");
</del><ins>+ document.body.classList.add(this.docked ? "window-docked-inactive" : "window-inactive");
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector._windowResized = function(event)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsChartDetailsSectionRowcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.css (188320 => 188321)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.css 2015-08-12 02:35:34 UTC (rev 188320)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.css 2015-08-12 03:16:15 UTC (rev 188321)
</span><span class="lines">@@ -52,17 +52,13 @@
</span><span class="cx"> height: 16px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > .label > .color-swatch {
</del><ins>+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > .color-key {
</ins><span class="cx"> display: inline-block;
</span><del>-
- width: 8px;
- height: 8px;
- margin-right: 6px;
-
- border: solid 1px hsl(0, 0%, 40%);
</del><ins>+ border: solid 1px hsla(0, 0%, 0%, 0.15);
+ border-radius: 2px;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > .label {
</del><ins>+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label {
</ins><span class="cx"> color: hsl(0, 0%, 20%);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -74,3 +70,21 @@
</span><span class="cx"> display: table-cell;
</span><span class="cx"> vertical-align: middle;
</span><span class="cx"> }
</span><ins>+
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > .color-key,
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox] {
+ width: 10px;
+ height: 10px;
+ vertical-align: top;
+ margin: 0 8px 0 3px;
+}
+
+.details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox]:not(:checked),
+body.window-docked-inactive .details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox],
+body.window-inactive .details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox] {
+ -webkit-filter: none !important;
+}
+
+.details-section > .content > .group > .row.chart > .defs-only {
+ display: none;
+}
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsChartDetailsSectionRowjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js (188320 => 188321)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js 2015-08-12 02:35:34 UTC (rev 188320)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ChartDetailsSectionRow.js 2015-08-12 03:16:15 UTC (rev 188321)
</span><span class="lines">@@ -55,6 +55,14 @@
</span><span class="cx"> this._innerLabelFontSize = 11;
</span><span class="cx"> this._shadowColor = "rgba(0, 0, 0, 0.6)";
</span><span class="cx"> this._total = 0;
</span><ins>+
+ this._svgFiltersElement = document.createElement("svg");
+ this._svgFiltersElement.classList.add("defs-only");
+ this.element.append(this._svgFiltersElement);
+
+ this._checkboxStyleElement = document.createElement("style");
+ this._checkboxStyleElement.id = "checkbox-styles";
+ document.getElementsByTagName("head")[0].append(this._checkboxStyleElement);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -108,40 +116,108 @@
</span><span class="cx"> this._items = items;
</span><span class="cx"> this._total = this._items.reduce(function(previousValue, currentValue) { return previousValue + currentValue.value; }, 0);;
</span><span class="cx">
</span><del>- this._legendElement.removeChildren();
- this._items.forEach(function(item) { this._legendElement.appendChild(this._createLegendItem(item)); }, this);
-
</del><ins>+ this._createLegend();
</ins><span class="cx"> this._refresh();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><del>- _createLegendItem(item)
</del><ins>+ _addCheckboxColorFilter(id, r, g, b)
</ins><span class="cx"> {
</span><del>- var colorSwatchElement = document.createElement("div");
- colorSwatchElement.className = "color-swatch";
- colorSwatchElement.style.backgroundColor = item.color;
</del><ins>+ for (let i = 0; i < this._svgFiltersElement.childNodes.length; ++i) {
+ if (this._svgFiltersElement.childNodes[i].id === id)
+ return;
+ }
</ins><span class="cx">
</span><del>- var labelElement = document.createElement("div");
- labelElement.className = "label";
- labelElement.append(colorSwatchElement, item.label);
</del><ins>+ r /= 255;
+ b /= 255;
+ g /= 255;
</ins><span class="cx">
</span><del>- var valueElement = document.createElement("div");
- valueElement.className = "value";
</del><ins>+ // Create an svg:filter element that approximates "background-blend-mode: color", for grayscale input.
+ let filterElement = createSVGElement("filter");
+ filterElement.id = id;
+ filterElement.setAttribute("color-interpolation-filters", "sRGB");
</ins><span class="cx">
</span><del>- if (this._delegate && typeof this._delegate.formatChartValue === "function")
- valueElement.textContent = this._delegate.formatChartValue(item.value);
- else
- valueElement.textContent = item.value;
</del><ins>+ let values = [1 - r, 0, 0, 0, r,
+ 1 - g, 0, 0, 0, g,
+ 1 - b, 0, 0, 0, b,
+ 0, 0, 0, 1, 0];
</ins><span class="cx">
</span><del>- var legendItemElement = document.createElement("div");
- legendItemElement.className = "legend-item";
- legendItemElement.appendChild(labelElement);
- legendItemElement.appendChild(valueElement);
</del><ins>+ let colorMatrixPrimitive = createSVGElement("feColorMatrix");
+ colorMatrixPrimitive.setAttribute("type", "matrix");
+ colorMatrixPrimitive.setAttribute("values", values.join(" "));
</ins><span class="cx">
</span><del>- return legendItemElement;
</del><ins>+ function createGammaPrimitive(tagName, value)
+ {
+ let gammaPrimitive = createSVGElement(tagName);
+ gammaPrimitive.setAttribute("type", "gamma");
+ gammaPrimitive.setAttribute("value", value);
+ return gammaPrimitive;
+ }
+
+ let componentTransferPrimitive = createSVGElement("feComponentTransfer");
+ componentTransferPrimitive.append(createGammaPrimitive("feFuncR", 1.2), createGammaPrimitive("feFuncG", 1.2), createGammaPrimitive("feFuncB", 1.2));
+ filterElement.append(colorMatrixPrimitive, componentTransferPrimitive);
+
+ this._svgFiltersElement.append(filterElement);
+
+ let styleSheet = this._checkboxStyleElement.sheet;
+ styleSheet.insertRule(".details-section > .content > .group > .row.chart > .chart-content > .legend > .legend-item > label > input[type=checkbox]." + id + " { -webkit-filter: grayscale(1) url(#" + id + ") }", 0);
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+ _createLegend()
+ {
+ this._legendElement.removeChildren();
+
+ for (let item of this._items) {
+ let labelElement = document.createElement("label");
+ let keyElement;
+ if (item.checkbox) {
+ let className = item.id.toLowerCase();
+ let rgb = item.color.substring(4, item.color.length - 1).replace(/ /g, "").split(",");
+ if (rgb[0] === rgb[1] && rgb[1] === rgb[2])
+ rgb[0] = rgb[1] = rgb[2] = Math.min(160, rgb[0]);
+
+ keyElement = document.createElement("input");
+ keyElement.type = "checkbox";
+ keyElement.classList.add(className);
+ keyElement.checked = item.checked || true;
+ keyElement[WebInspector.ChartDetailsSectionRow.DataItemIdSymbol] = item.id;
+
+ keyElement.addEventListener("change", this._legendItemCheckboxValueChanged.bind(this));
+
+ this._addCheckboxColorFilter(className, rgb[0], rgb[1], rgb[2]);
+ } else {
+ keyElement = document.createElement("div");
+ keyElement.classList.add("color-key");
+ keyElement.style.backgroundColor = item.color;
+ }
+
+ labelElement.append(keyElement, item.label);
+
+ let valueElement = document.createElement("div");
+ valueElement.classList.add("value");
+
+ if (this._delegate && typeof this._delegate.formatChartValue === "function")
+ valueElement.textContent = this._delegate.formatChartValue(item.value);
+ else
+ valueElement.textContent = item.value;
+
+ let legendItemElement = document.createElement("div");
+ legendItemElement.classList.add("legend-item");
+ legendItemElement.append(labelElement, valueElement);
+
+ this._legendElement.append(legendItemElement);
+ }
+ }
+
+ _legendItemCheckboxValueChanged(event)
+ {
+ let checkbox = event.target;
+ let id = checkbox[WebInspector.ChartDetailsSectionRow.DataItemIdSymbol];
+ this.dispatchEventToListeners(WebInspector.ChartDetailsSectionRow.Event.LegendItemChecked, {id, checked: checkbox.checked});
+ }
+
</ins><span class="cx"> _refresh()
</span><span class="cx"> {
</span><span class="cx"> var width = this._canvas.clientWidth * window.devicePixelRatio;
</span><span class="lines">@@ -194,3 +270,9 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx"> };
</span><ins>+
+WebInspector.ChartDetailsSectionRow.DataItemIdSymbol = Symbol("chart-details-section-row-data-item-id");
+
+WebInspector.ChartDetailsSectionRow.Event = {
+ LegendItemChecked: "chart-details-section-row-legend-item-checked"
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsTimelineSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (188320 => 188321)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-08-12 02:35:34 UTC (rev 188320)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2015-08-12 03:16:15 UTC (rev 188321)
</span><span class="lines">@@ -95,7 +95,10 @@
</span><span class="cx">
</span><span class="cx"> this._frameSelectionChartRow = new WebInspector.ChartDetailsSectionRow(this);
</span><span class="cx"> this._frameSelectionChartRow.innerRadius = 0.5;
</span><ins>+ this._frameSelectionChartRow.addEventListener(WebInspector.ChartDetailsSectionRow.Event.LegendItemChecked, this._frameSelectionLegendItemChecked, this);
</ins><span class="cx">
</span><ins>+ this._renderingFrameTaskFilter = new Set;
+
</ins><span class="cx"> var chartGroup = new WebInspector.DetailsSectionGroup([this._frameSelectionChartRow]);
</span><span class="cx"> this._frameSelectionChartSection = new WebInspector.DetailsSection("frames-selection-chart", WebInspector.UIString("Selected Frames"), [chartGroup], null, true);
</span><span class="cx"> this._timelinesContentContainerElement.appendChild(this._frameSelectionChartSection.element);
</span><span class="lines">@@ -391,6 +394,30 @@
</span><span class="cx"> if (!this._displayedContentView)
</span><span class="cx"> return true;
</span><span class="cx">
</span><ins>+ if (this._viewMode === WebInspector.TimelineSidebarPanel.ViewMode.RenderingFrames && this._renderingFrameTaskFilter.size) {
+ while (treeElement && !(treeElement.record instanceof WebInspector.RenderingFrameTimelineRecord))
+ treeElement = treeElement.parent;
+
+ console.assert(treeElement, "Cannot apply task filter: no RenderingFrameTimelineRecord found.");
+ if (!treeElement)
+ return false;
+
+ var visible = false;
+ for (var key in WebInspector.RenderingFrameTimelineRecord.TaskType) {
+ var taskType = WebInspector.RenderingFrameTimelineRecord.TaskType[key];
+ if (taskType === WebInspector.RenderingFrameTimelineRecord.TaskType.Other)
+ continue;
+
+ if (!this._renderingFrameTaskFilter.has(taskType) && treeElement.record.durationForTask(taskType) > 0) {
+ visible = true;
+ break;
+ }
+ }
+
+ if (!visible)
+ return false;
+ }
+
</ins><span class="cx"> return this._displayedContentView.matchTreeElementAgainstCustomFilters(treeElement);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -820,6 +847,16 @@
</span><span class="cx"> this.updateFilter();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _frameSelectionLegendItemChecked(event)
+ {
+ if (event.data.checked)
+ this._renderingFrameTaskFilter.delete(event.data.id);
+ else
+ this._renderingFrameTaskFilter.add(event.data.id);
+
+ this.updateFilter();
+ }
+
</ins><span class="cx"> _refreshFrameSelectionChart()
</span><span class="cx"> {
</span><span class="cx"> if (!this.visible)
</span><span class="lines">@@ -856,7 +893,7 @@
</span><span class="cx"> var label = WebInspector.RenderingFrameTimelineRecord.displayNameForTaskType(taskType);
</span><span class="cx"> var value = records.reduce(function(previousValue, currentValue) { return previousValue + currentValue.durationForTask(taskType); }, 0);
</span><span class="cx"> var color = this._chartColors.get(taskType);
</span><del>- return {label, value, color};
</del><ins>+ return {id: taskType, label, value, color, checkbox: taskType !== WebInspector.RenderingFrameTimelineRecord.TaskType.Other};
</ins><span class="cx"> }, this);
</span><span class="cx">
</span><span class="cx"> this._frameSelectionChartRow.data = chartData;
</span></span></pre>
</div>
</div>
</body>
</html>