Move commits viewer to the end of details view

https://bugs.webkit.org/show_bug.cgi?id=141315

Reviewed by Andreas Kling.

Improved the way list of commits are shown per kling's request.

* public/v2/app.js:
(App.PaneController._updateDetails): Always show the old value even when a single point is selected.

* public/v2/chart-pane.css: Updated the style for the commits viewer.

* public/v2/commits-viewer.js:
(App.CommitsViewerComponent): Added "visible" property to hide the list of commits.
(App.CommitsViewerComponent.actions.toggleVisibility): Added. Toggles "visible" property.

* public/v2/index.html: Updated the template for commits viewer to support "visible" property. Also
moved the commits viewers out of the details tables so that they don't interleave revision data.

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

diff --git a/Websites/perf.webkit.org/ChangeLog b/Websites/perf.webkit.org/ChangeLog
index 0cbb575af4f5cc27c40f8584a55ab863171d97c8..f2ac8c00eab126e9a922d5bf36a1ef2b039cc4e5 100644 (file)
--- a/Websites/perf.webkit.org/ChangeLog
+++ b/Websites/perf.webkit.org/ChangeLog
@@ -1,3 +1,24 @@
+2015-02-05  Ryosuke Niwa  <rniwa@webkit.org>
+
+        Move commits viewer to the end of details view
+        https://bugs.webkit.org/show_bug.cgi?id=141315
+
+        Reviewed by Andreas Kling.
+
+        Improved the way list of commits are shown per kling's request.
+
+        * public/v2/app.js:
+        (App.PaneController._updateDetails): Always show the old value even when a single point is selected.
+
+        * public/v2/chart-pane.css: Updated the style for the commits viewer.
+
+        * public/v2/commits-viewer.js:
+        (App.CommitsViewerComponent): Added "visible" property to hide the list of commits.
+        (App.CommitsViewerComponent.actions.toggleVisibility): Added. Toggles "visible" property.
+
+        * public/v2/index.html: Updated the template for commits viewer to support "visible" property. Also
+        moved the commits viewers out of the details tables so that they don't interleave revision data.
+
 2015-02-05  Ryosuke Niwa  <rniwa@webkit.org>
 
         New perf dashboard should compare results to baseline and target

diff --git a/Websites/perf.webkit.org/public/v2/app.js b/Websites/perf.webkit.org/public/v2/app.js
index 7bc230a3ef4273f3e03f3243eaec39d3281a8d59..788ac4598f674ef2fd1fb9053d926b15ade278e3 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/app.js
+++ b/Websites/perf.webkit.org/public/v2/app.js
@@ -766,7 +766,7 @@ App.PaneController = Ember.ObjectController.extend({
         this.set('details', Ember.Object.create({
             status: this._computeStatus(currentPoint),
             currentValue: chartData.formatter(currentMeasurement.mean()),
-            oldValue: oldMeasurement && selectedPoints ? chartData.formatter(oldMeasurement.mean()) : null,
+            oldValue: oldMeasurement ? chartData.formatter(oldMeasurement.mean()) : null,
             buildNumber: buildNumber,
             buildURL: buildURL,
             buildTime: currentMeasurement.formattedBuildTime(),

diff --git a/Websites/perf.webkit.org/public/v2/chart-pane.css b/Websites/perf.webkit.org/public/v2/chart-pane.css
index d8e113eb1ef2b495b33f15f27fc93f5e748dddd7..314900d5b0a1f07f98d9232be33470bc40fb99a8 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/chart-pane.css
+++ b/Websites/perf.webkit.org/public/v2/chart-pane.css
@@ -175,7 +175,7 @@
     overflow: scroll;
 }
 
-.analysis-chart-pane .details table {
+.analysis-chart-pane table {
     margin: 0.5rem;
 }
 
@@ -192,7 +192,8 @@
     overflow: scroll;
 }
 
-.chart-pane .details-table {
+.chart-pane .details-table,
+.chart-pane .commits-viewer {
     font-size: 0.8rem;
     width: 100%;
     table-layout: fixed;
@@ -203,28 +204,17 @@
     padding-right: 1px;
 }
 
-.chart-pane .details-table td table {
-    border-collapse: collapse;
-}
-
-.chart-pane .details-table td table td {
-    word-break: break-word;
-    border-top: solid 1px #ccc;
-    border-bottom: solid 1px #ccc;
-    padding: 0.2rem;
-}
-
-.chart-pane .details-table td table td a {
-    text-decoration: none;
-}
-
 .chart-pane .details-table th {
-    width: 7rem;
+    width: 30%;
     text-align: right;
     font-weight: normal;
     padding: 0;
 }
 
+.chart-pane .details-table td {
+    width: 70%;
+}
+
 .chart-pane .details-table .bugs th {
     font-weight: bold;
 }
@@ -241,6 +231,52 @@
     font-size: 1rem;
 }
 
+.chart-pane .commits-viewer caption {
+    border-top: solid 1px #ccc;
+    font-weight: normal;
+    text-align: left;
+    padding: 0.2rem;
+    padding-left: 0.5rem;
+    cursor: pointer;
+}
+
+.chart-pane .commits-viewer caption:before {
+    display: inline-block;
+    width: 0.8rem;
+    content: "\25BE"; /* Down arrow */
+}
+
+.chart-pane .commits-viewer.hidden caption:before {
+    display: inline-block;
+    width: 0.8rem;
+    content: "\25B8"; /* Right arrow */
+}
+
+.chart-pane .commits {
+    border-bottom: solid 1px #ccc;
+    margin-bottom: 0.2rem;
+}
+
+.chart-pane .commits-viewer {
+    border-collapse: collapse;
+}
+
+.chart-pane .commits-viewer td,
+.chart-pane .commits-viewer th {
+    word-break: break-word;
+    border-top: solid 1px #ccc;
+    padding: 0.2rem;
+}
+
+.chart-pane .commits-viewer th {
+    width: 20%;
+    font-weight: normal;
+}
+
+.chart-pane .commits-viewer td {
+    width: 60%;
+}
+
 .chart-pane .chart {
     height: 100%;
 }

diff --git a/Websites/perf.webkit.org/public/v2/commits-viewer.js b/Websites/perf.webkit.org/public/v2/commits-viewer.js
index f5d1a8c5dd864381e6aa14501ba6d62e0ecb419e..947c437a47c3108df12c054341c372f6c06819c7 100644 (file)
--- a/Websites/perf.webkit.org/public/v2/commits-viewer.js
+++ b/Websites/perf.webkit.org/public/v2/commits-viewer.js
@@ -2,6 +2,7 @@ App.CommitsViewerComponent = Ember.Component.extend({
     repository: null,
     revisionInfo: null,
     commits: null,
+    visible: true,
     commitsChanged: function ()
     {
         var revisionInfo = this.get('revisionInfo');
@@ -30,4 +31,10 @@ App.CommitsViewerComponent = Ember.Component.extend({
                 self.set('commits', []);
         })
     }.observes('repository').observes('revisionInfo').on('init'),
+    actions: {
+        toggleVisibility: function ()
+        {
+            this.toggleProperty('visible');
+        }
+    }
 });

diff --git a/Websites/perf.webkit.org/public/v2/index.html b/Websites/perf.webkit.org/public/v2/index.html
index dd9b486bfe3561b4b3b99867841cf44934ef94b1..508e18d0f49b4d91a184781467d3917328cb7176 100755 (executable)
--- a/Websites/perf.webkit.org/public/v2/index.html
+++ b/Websites/perf.webkit.org/public/v2/index.html
@@ -269,6 +269,7 @@
                     </td>
                 </tr>
             </tbody>
+            <tbody>
             {{#if details.buildNumber}}
                 <tr>
                     <th>Build</th>
@@ -293,31 +294,40 @@
                         {{/if}}
                     </td>
                 </tr>
-                <tr>
-                    <td colspan="2">{{commits-viewer repository=repository revisionInfo=this}}</td>
-                </tr>
             {{/each}}
+            </tbody>
         </table>
+        <div class="commits">
+            {{#each details.revisions}}
+                {{commits-viewer repository=repository revisionInfo=this caption=name}}
+            {{/each}}
+        </div>
     </div>
     </script>
 
     <script type="text/x-handlebars" data-template-name="components/commits-viewer">
     {{#if commits}}
-        <table>
-            <tbody>
-                {{#each commits}}
-                    <tr>
-                        <td>
-                            {{#if url}}
-                                <a {{bind-attr href=url}} target="_blank">{{author}}</a>
-                            {{else}}
-                                {{author}}
-                            {{/if}}
-                        </td>
-                        <td>{{message}}</td>
-                    </tr>
-                {{/each}}
-            </tbody>
+        <table {{bind-attr class=":commits-viewer visible::hidden"}}>
+            {{#if caption}}
+                <caption {{action toggleVisibility}}>{{caption}} commits</caption>
+            {{/if}}
+            {{#if visible}}
+                <tbody>
+                    {{#each commits}}
+                        <tr>
+                            <th>
+                                {{#if url}}
+                                    <a {{bind-attr href=url}} target="_blank">{{revision}}</a>
+                                {{else}}
+                                    {{revision}}
+                                {{/if}}
+                            </th>
+                            <th>{{author}}</th>
+                            <td>{{message}}</td>
+                        </tr>
+                    {{/each}}
+                </tbody>
+            {{/if}}
         </table>
     {{/if}}
     </script>