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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@185594 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
index 0a70fe2..2884c50 100644 (file)
--- a/Websites/perf.webkit.org/ChangeLog
+++ b/Websites/perf.webkit.org/ChangeLog
@@ -1,3 +1,31 @@
+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.
+
 2015-06-15  Ryosuke Niwa  <rniwa@webkit.org>
 
         Build fix after r185574.

diff --git a/Websites/perf.webkit.org/public/v2/app.js b/Websites/perf.webkit.org/public/v2/app.js
index f1f46ee..f80cb9a 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/app.js
+++ b/Websites/perf.webkit.org/public/v2/app.js
@@ -881,6 +881,20 @@ App.ChartsController = Ember.Controller.extend({
                 showingDetails: false
             }));
         },
+        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
+                }));
+            })
+        }
     },
 
     init: function ()
@@ -922,6 +936,21 @@ App.TestProxyForPopup = Ember.ObjectProxy.extend({
     platform: null,
     children: function ()
     {
+        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 ()
+    {
         var platform = this.get('platform');
         var action = this.get('action');
         var position = this.get('position');
@@ -945,9 +974,16 @@ App.TestProxyForPopup = Ember.ObjectProxy.extend({
 
         if (childTests.length && metrics.length)
             metrics.push({isSeparator: true});
+        else if (metrics.length == 1) {
+            this._actionName = action;
+            this._actionArgument = metrics[0].actionArgument;
+            return;
+        }
 
-        return metrics.concat(childTests);
-    }.property('childTests', 'metrics'),
+        this._actionName = null;
+        this._actionArgument = null;
+        this._children = metrics.concat(childTests);
+    },
 });
 
 App.domainsAreEqual = function (domain1, domain2) {
@@ -1106,6 +1142,45 @@ App.PaneController = Ember.ObjectController.extend({
             alert('Failed to update the status:' + error);
         });
     }.observes('selectedItemIsMarkedOutlier'),
+    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'),
 });
 
 App.AnalysisRoute = Ember.Route.extend({

diff --git a/Websites/perf.webkit.org/public/v2/chart-pane.css b/Websites/perf.webkit.org/public/v2/chart-pane.css
index fd524a7..fc59414 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/chart-pane.css
+++ b/Websites/perf.webkit.org/public/v2/chart-pane.css
@@ -465,3 +465,39 @@ a.outlier-button.show g.hide-outlier-icon {
 .chart .rangeBar.testingRange {
     background-color: #333;
 }
+
+.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;
+}

diff --git a/Websites/perf.webkit.org/public/v2/index.html b/Websites/perf.webkit.org/public/v2/index.html
index cb7f29d..f6e86fd 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/index.html
+++ b/Websites/perf.webkit.org/public/v2/index.html
@@ -143,9 +143,9 @@
         </header>
 
         {{#each panes itemController="pane"}}
-            <section class="chart-pane" tabindex="0">
+            <section class="chart-pane in-charts" tabindex="0">
                 <header>
-                    <h1 {{action "toggleDetails"}}>{{metric.fullName}} - {{ platform.name}}</h1>
+                    <h1 {{action "toggleDetails"}}>{{metric.fullName}} - {{platform.name}}</h1>
                     <a href="javascript:false" title="Close" class="close-button" {{action "close"}}>{{partial "close-button"}}</a>
                     {{#if movingAverageStrategies}}
                         <a href="javascript:false" title="Statistical Tools" class="stat-button" {{action "toggleStatPane"}}>{{partial "stat-button"}}</a>
@@ -228,6 +228,14 @@
                 </form>
 
                 {{partial "stat-pane"}}
+
+                <nav class="alternative-pane-actions">
+                    <ul>
+                        {{#each alternativePanes}}
+                            <li><a href="javascript:false" {{action "addAlternativePanes" pane platform metrics}}>{{label}}</a></li>
+                        {{/each}}
+                    </ul>
+                </nav>
             </section>
         {{/each}}
     </script>

diff --git a/Websites/perf.webkit.org/public/v2/manifest.js b/Websites/perf.webkit.org/public/v2/manifest.js
index c3dd48f..c4ee46a 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/manifest.js
+++ b/Websites/perf.webkit.org/public/v2/manifest.js
@@ -37,6 +37,17 @@ App.Metric = App.NameLabelModel.extend({
         return this.get('path').join(' \u220b ') /* ∋ */
             + ' : ' + this.get('label');
     }.property('path', 'label'),
+    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'),
 });
 
 App.Builder = App.NameLabelModel.extend({