<!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>[185594] trunk/Websites/perf.webkit.org</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/185594">185594</a></dd>
<dt>Author</dt> <dd>rniwa@webkit.org</dd>
<dt>Date</dt> <dd>2015-06-16 10:48:47 -0700 (Tue, 16 Jun 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>v2 UI should have buttons to breakdown a test
https://bugs.webkit.org/show_bug.cgi?id=146010
Reviewed by Chris Dumez.
Added buttons beneath each chart pane to add "alternative panes". By default, it shows every platform
as well as "Breakdown" to add all subtests' metrics.
Also removed the metric submenu from tests that had exactly one metric. When a test only measures Time
for example, we make the test itself clickable instead of showing a submenu that only contains one item.
* public/v2/app.js:
(App.ChartsController.addAlternativePanes): Added.
(App.TestProxyForPopup.children): Calls _updateChildren and returns this._children.
(App.TestProxyForPopup.actionName): Added.
(App.TestProxyForPopup.actionArgument): Added.
(App.TestProxyForPopup._updateChildren): Extracted from children. Now also sets _actionName and
_actionArgument in the case there was exactly one metric so that showing submenu is unnecessary.
(App.PaneController.alternativePanes): Added. Returns the list of alternative panes. The platform list
excludes ones that don't have this metric (e.g. iOS doesn't have desktop PLT results) as well as ones
that are already present in the list of panes.
* public/v2/chart-pane.css: Added CSS rules for alternative pane buttons beneath the chart panes.
* public/v2/index.html:
* public/v2/manifest.js:
(App.Metric.childMetrics): Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkWebsitesperfwebkitorgChangeLog">trunk/Websites/perf.webkit.org/ChangeLog</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv2appjs">trunk/Websites/perf.webkit.org/public/v2/app.js</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv2chartpanecss">trunk/Websites/perf.webkit.org/public/v2/chart-pane.css</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv2indexhtml">trunk/Websites/perf.webkit.org/public/v2/index.html</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicv2manifestjs">trunk/Websites/perf.webkit.org/public/v2/manifest.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkWebsitesperfwebkitorgChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/ChangeLog (185593 => 185594)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/ChangeLog 2015-06-16 17:45:12 UTC (rev 185593)
+++ trunk/Websites/perf.webkit.org/ChangeLog 2015-06-16 17:48:47 UTC (rev 185594)
</span><span class="lines">@@ -1,3 +1,31 @@
</span><ins>+2015-06-16 Ryosuke Niwa <rniwa@webkit.org>
+
+ v2 UI should have buttons to breakdown a test
+ https://bugs.webkit.org/show_bug.cgi?id=146010
+
+ Reviewed by Chris Dumez.
+
+ Added buttons beneath each chart pane to add "alternative panes". By default, it shows every platform
+ as well as "Breakdown" to add all subtests' metrics.
+
+ Also removed the metric submenu from tests that had exactly one metric. When a test only measures Time
+ for example, we make the test itself clickable instead of showing a submenu that only contains one item.
+
+ * public/v2/app.js:
+ (App.ChartsController.addAlternativePanes): Added.
+ (App.TestProxyForPopup.children): Calls _updateChildren and returns this._children.
+ (App.TestProxyForPopup.actionName): Added.
+ (App.TestProxyForPopup.actionArgument): Added.
+ (App.TestProxyForPopup._updateChildren): Extracted from children. Now also sets _actionName and
+ _actionArgument in the case there was exactly one metric so that showing submenu is unnecessary.
+ (App.PaneController.alternativePanes): Added. Returns the list of alternative panes. The platform list
+ excludes ones that don't have this metric (e.g. iOS doesn't have desktop PLT results) as well as ones
+ that are already present in the list of panes.
+ * public/v2/chart-pane.css: Added CSS rules for alternative pane buttons beneath the chart panes.
+ * public/v2/index.html:
+ * public/v2/manifest.js:
+ (App.Metric.childMetrics): Added.
+
</ins><span class="cx"> 2015-06-15 Ryosuke Niwa <rniwa@webkit.org>
</span><span class="cx">
</span><span class="cx"> Build fix after r185574.
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv2appjs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v2/app.js (185593 => 185594)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v2/app.js 2015-06-16 17:45:12 UTC (rev 185593)
+++ trunk/Websites/perf.webkit.org/public/v2/app.js 2015-06-16 17:48:47 UTC (rev 185594)
</span><span class="lines">@@ -881,6 +881,20 @@
</span><span class="cx"> showingDetails: false
</span><span class="cx"> }));
</span><span class="cx"> },
</span><ins>+ addAlternativePanes: function (pane, platform, metrics)
+ {
+ var panes = this.panes;
+ var store = this.store;
+ var startingIndex = panes.indexOf(pane) + 1;
+ metrics.forEach(function (metric, index) {
+ panes.insertAt(startingIndex + index, App.Pane.create({
+ store: store,
+ platformId: platform.get('id'),
+ metricId: metric.get('id'),
+ showingDetails: false
+ }));
+ })
+ }
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> init: function ()
</span><span class="lines">@@ -922,6 +936,21 @@
</span><span class="cx"> platform: null,
</span><span class="cx"> children: function ()
</span><span class="cx"> {
</span><ins>+ this._updateChildren();
+ return this._children;
+ }.property('childTests', 'metrics'),
+ actionName: function ()
+ {
+ this._updateChildren();
+ return this._actionName;
+ }.property('childTests', 'metrics'),
+ actionArgument: function ()
+ {
+ this._updateChildren();
+ return this._actionArgument;
+ }.property('childTests', 'metrics'),
+ _updateChildren: function ()
+ {
</ins><span class="cx"> var platform = this.get('platform');
</span><span class="cx"> var action = this.get('action');
</span><span class="cx"> var position = this.get('position');
</span><span class="lines">@@ -945,9 +974,16 @@
</span><span class="cx">
</span><span class="cx"> if (childTests.length && metrics.length)
</span><span class="cx"> metrics.push({isSeparator: true});
</span><ins>+ else if (metrics.length == 1) {
+ this._actionName = action;
+ this._actionArgument = metrics[0].actionArgument;
+ return;
+ }
</ins><span class="cx">
</span><del>- return metrics.concat(childTests);
- }.property('childTests', 'metrics'),
</del><ins>+ this._actionName = null;
+ this._actionArgument = null;
+ this._children = metrics.concat(childTests);
+ },
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> App.domainsAreEqual = function (domain1, domain2) {
</span><span class="lines">@@ -1106,6 +1142,45 @@
</span><span class="cx"> alert('Failed to update the status:' + error);
</span><span class="cx"> });
</span><span class="cx"> }.observes('selectedItemIsMarkedOutlier'),
</span><ins>+ alternativePanes: function ()
+ {
+ var pane = this.get('model');
+ var metric = pane.get('metric');
+ var currentPlatform = pane.get('platform');
+ var platforms = App.Manifest.get('platforms');
+ if (!platforms || !metric)
+ return;
+
+ var exitingPlatforms = {};
+ this.get('parentController').get('panes').forEach(function (pane) {
+ if (pane.get('metricId') == metric.get('id'))
+ exitingPlatforms[pane.get('platformId')] = true;
+ });
+
+ var alternativePanes = platforms.filter(function (platform) {
+ return !exitingPlatforms[platform.get('id')] && platform.containsMetric(metric);
+ }).map(function (platform) {
+ return {
+ pane: pane,
+ platform: platform,
+ metrics: [metric],
+ label: platform.get('label')
+ };
+ });
+
+ var childMetrics = metric.get('childMetrics');
+ if (childMetrics && childMetrics.length) {
+ alternativePanes.push({
+ pane: pane,
+ platform: currentPlatform,
+ metrics: childMetrics,
+ label: 'Breakdown',
+ });
+ }
+
+ return alternativePanes;
+ }.property('model.metric', 'model.platform', 'App.Manifest.platforms',
+ 'parentController.panes.@each.platformId', 'parentController.panes.@each.metricId'),
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> App.AnalysisRoute = Ember.Route.extend({
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv2chartpanecss"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v2/chart-pane.css (185593 => 185594)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v2/chart-pane.css 2015-06-16 17:45:12 UTC (rev 185593)
+++ trunk/Websites/perf.webkit.org/public/v2/chart-pane.css 2015-06-16 17:48:47 UTC (rev 185594)
</span><span class="lines">@@ -465,3 +465,39 @@
</span><span class="cx"> .chart .rangeBar.testingRange {
</span><span class="cx"> background-color: #333;
</span><span class="cx"> }
</span><ins>+
+.chart-pane.in-charts {
+ margin-bottom: 2.5rem;
+}
+
+.alternative-pane-actions ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ position: absolute;
+ left: 0.5rem;
+}
+
+.alternative-pane-actions li {
+ color: #666;
+ font-size: 0.8rem;
+ border: solid 1px #bbb;
+ border-top: none;
+ border-bottom-left-radius: 0.3rem;
+ border-bottom-right-radius: 0.3rem;
+ float: left;
+ list-style: none;
+ margin: 0;
+ margin-right: 0.2rem;
+ padding: 0.2rem 0.4rem;
+}
+
+.alternative-pane-actions li:hover {
+ background-color: rgba(204, 153, 51, 0.1);
+ padding-top: 0.5rem;
+}
+
+.alternative-pane-actions li a {
+ text-decoration: none;
+ color: inherit;
+}
</ins></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv2indexhtml"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v2/index.html (185593 => 185594)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v2/index.html 2015-06-16 17:45:12 UTC (rev 185593)
+++ trunk/Websites/perf.webkit.org/public/v2/index.html 2015-06-16 17:48:47 UTC (rev 185594)
</span><span class="lines">@@ -143,9 +143,9 @@
</span><span class="cx"> </header>
</span><span class="cx">
</span><span class="cx"> {{#each panes itemController="pane"}}
</span><del>- <section class="chart-pane" tabindex="0">
</del><ins>+ <section class="chart-pane in-charts" tabindex="0">
</ins><span class="cx"> <header>
</span><del>- <h1 {{action "toggleDetails"}}>{{metric.fullName}} - {{ platform.name}}</h1>
</del><ins>+ <h1 {{action "toggleDetails"}}>{{metric.fullName}} - {{platform.name}}</h1>
</ins><span class="cx"> <a href="javascript:false" title="Close" class="close-button" {{action "close"}}>{{partial "close-button"}}</a>
</span><span class="cx"> {{#if movingAverageStrategies}}
</span><span class="cx"> <a href="javascript:false" title="Statistical Tools" class="stat-button" {{action "toggleStatPane"}}>{{partial "stat-button"}}</a>
</span><span class="lines">@@ -228,6 +228,14 @@
</span><span class="cx"> </form>
</span><span class="cx">
</span><span class="cx"> {{partial "stat-pane"}}
</span><ins>+
+ <nav class="alternative-pane-actions">
+ <ul>
+ {{#each alternativePanes}}
+ <li><a href="javascript:false" {{action "addAlternativePanes" pane platform metrics}}>{{label}}</a></li>
+ {{/each}}
+ </ul>
+ </nav>
</ins><span class="cx"> </section>
</span><span class="cx"> {{/each}}
</span><span class="cx"> </script>
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicv2manifestjs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/v2/manifest.js (185593 => 185594)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/v2/manifest.js 2015-06-16 17:45:12 UTC (rev 185593)
+++ trunk/Websites/perf.webkit.org/public/v2/manifest.js 2015-06-16 17:48:47 UTC (rev 185594)
</span><span class="lines">@@ -37,6 +37,17 @@
</span><span class="cx"> return this.get('path').join(' \u220b ') /* &ni; */
</span><span class="cx"> + ' : ' + this.get('label');
</span><span class="cx"> }.property('path', 'label'),
</span><ins>+ childMetrics: function ()
+ {
+ var test = this.get('test');
+ var childMetrics = [];
+ test.get('childTests').forEach(function (childTest) {
+ childTest.get('metrics').forEach(function (metric) {
+ childMetrics.push(metric);
+ });
+ });
+ return childMetrics;
+ }.property('test.childTests'),
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> App.Builder = App.NameLabelModel.extend({
</span></span></pre>
</div>
</div>
</body>
</html>