v2 UI should have buttons to breakdown a test
authorrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 16 Jun 2015 17:48:47 +0000 (17:48 +0000)
committerrniwa@webkit.org <rniwa@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 16 Jun 2015 17:48:47 +0000 (17:48 +0000)
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

Websites/perf.webkit.org/ChangeLog
Websites/perf.webkit.org/public/v2/app.js
Websites/perf.webkit.org/public/v2/chart-pane.css
Websites/perf.webkit.org/public/v2/index.html
Websites/perf.webkit.org/public/v2/manifest.js

index 0a70fe274827caf30de18f835b8228e008be81ec..2884c50f7d5d54a4d818819c14295e7a8eb3bc41 100644 (file)
@@ -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.
index f1f46eee84a1732a064d3b8644da400601e756b1..f80cb9a5c86519c393eaf85eaae102e6b9ed4e18 100755 (executable)
@@ -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 ()
@@ -921,6 +935,21 @@ App.PlatformProxyForPopup = Ember.ObjectProxy.extend({
 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');
@@ -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({
index fd524a7d0cdeb7f327bc02975aef6cb144333c58..fc5941474b773ce8961f19a0214abaa448b458e1 100755 (executable)
@@ -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;
+}
index cb7f29d0ab1f6ec6b5ab87459f90b82e040f9efd..f6e86fd3bc19e6e15f7117fcb8505ed3d3562671 100755 (executable)
         </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>
                 </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>
index c3dd48fa5a3d5f9b5696b2b5aa757c54cd70ec30..c4ee46a7bf202c0888ef106fba8e266bb5e71022 100755 (executable)
@@ -37,6 +37,17 @@ App.Metric = App.NameLabelModel.extend({
         return this.get('path').join(' \u220b ') /* &ni; */
             + ' : ' + 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({