Some CSS tweaks after r166477 and r166479,
[WebKit.git] / Websites / perf.webkit.org / public / index.html
index 1d32213..d842a43 100644 (file)
 <style type="text/css">
 
 #numberOfDaysPicker {
-    display: inline-block;
-    margin: 5px 0px;
-    border: solid 1px #ccc;
     color: #666;
-    border-radius: 5px;
-    padding: 5px 8px;
 }
 
 #numberOfDaysPicker input {
@@ -32,6 +27,7 @@
 td, th {
     border: none;
     border-collapse: collapse;
+    padding-top: 0.5em;
 }
 
 #dashboard > tbody > tr > td {
@@ -39,21 +35,16 @@ td, th {
 }
 
 #dashboard > thead th {
-    padding-top: 1.5em;
     text-shadow: #bbb 1px 1px 2px;
     font-size: large;
     font-weight: normal;
 }
 
-#dashboard td {
-    
-}
-
 .chart {
     position: relative;
     border: solid 1px #ccc;
     border-radius: 5px;
-    margin: 10px 10px 0px 0px;
+    margin: 0px 0px 10px 0px;
 }
 
 .chart.worse {
@@ -68,7 +59,7 @@ td, th {
     position: absolute;
     left: 10px;
     top: 10px;
-    width: 200px;
+    width: 220px;
 }
 
 .chart header {
@@ -78,8 +69,7 @@ td, th {
 }
 
 #dashboard header {
-    padding: 10px;
-    width: 200px;
+    padding: 0px 10px;
 }
 
 .chart h2, .chart h3 {
@@ -87,7 +77,6 @@ td, th {
     padding: 0;
     font-size: 1em;
     font-weight: normal;
-    width: 200px;
     word-break: break-all;
 }
 
@@ -103,6 +92,10 @@ td, th {
     display: none;
 }
 
+#dashboard .chart .status {
+    margin: 0px 10px;
+}
+
 .chart .status {
     font-size: small;
     color: #666;
@@ -120,6 +113,10 @@ td, th {
     height: 15px;
 }
 
+#dashboard .chart {
+    width: 410px;
+}
+
 #dashboard .plot {
     width: 400px;
     height: 100px;
@@ -128,7 +125,7 @@ td, th {
 }
 
 #charts .plot {
-    height: 300px;
+    height: 320px;
     margin-left: 250px;
 }
 
@@ -142,17 +139,45 @@ td, th {
     height: 70px;
 }
 
-.summaryTable {
+.chart .summaryTable {
     font-size: small;
     color: #666;
     border: 0;
 }
 
-#dashboard .summaryTable {
+.chart .meta {
+    position: relative;
+}
+
+.chart .meta table,
+.chart .meta td,
+.tooltip table,
+.tooltip td {
+    margin: 0;
+    padding: 0;
+}
+
+.chart .meta th,
+.tooltip th {
+    margin: 0;
+    padding: 0 0.2em 0 0;
+    text-align: right;
+    font-weight: normal;
+}
+
+.chart .meta td:not(:first-child):before,
+.tooltip td:not(:first-child):before {
+    content: ": ";
+}
+
+#dashboard .chart .summaryTable {
     position: absolute;
     right: 10px;
-    top: 10px;
-    width: 180px;
+    top: 0px;
+}
+
+#charts .summaryTable {
+    margin-top: 0.3em;
 }
 
 #dashboard .arrow {
@@ -223,7 +248,7 @@ td, th {
     color: #eee;
     font-size: small;
     line-height: 130%;
-    width: 30ex;
+    white-space: nowrap;
 }
 
 .tooltip:after {
@@ -263,20 +288,6 @@ td, th {
     padding: 5px 8px;
 }
 
-#numberOfDaysPicker {
-    display: inline-block;
-    margin: 5px 0px;
-    border: solid 1px #ccc;
-    color: #666;
-    border-radius: 5px;
-    padding: 5px 8px;
-}
-
-#numberOfDaysPicker input {
-    height: 0.9em;
-    margin-right: 1em;
-}
-
 </style>
 <script>
 
@@ -339,10 +350,6 @@ td, th {
         } else if (relativeDifferenceWithTarget)
             statusText = Math.abs(relativeDifferenceWithTarget * 100).toFixed(2) + '% until target';
 
-        if (statusText)
-            statusText += '<br>';
-        statusText += buildLabelWithLinks(lastResult.build());
-
         return {class: status, text: statusText};
     }
 
@@ -363,7 +370,7 @@ td, th {
     }
 
     function createSummaryRowMarkup(name, runs) {
-        return '<tr><td>' + name + '</td><td>' + runs.lastResult().label() + '</td></tr>';
+        return '<tr><th>' + name + '</th><td>' + runs.lastResult().label() + '</td></tr>';
     }
 
     function buildLabelWithLinks(build, previousBuild) {
@@ -372,11 +379,16 @@ td, th {
         }
 
         var formattedRevisions = build.formattedRevisions(previousBuild);
-        var markup = ['Committed: ' + build.formattedTime(),
-            'Build: ' + linkifyIfNotNull(build.buildNumber(), build.buildUrl()) + ' (' + build.formattedBuildTime() + ')'];
+        var buildInfo = {
+            'Commit': build.formattedTime(),
+            'Build': linkifyIfNotNull(build.buildNumber(), build.buildUrl()) + '(' + build.formattedBuildTime() + ')'
+        };
         for (var repositoryName in formattedRevisions)
-            markup.push(linkifyIfNotNull(formattedRevisions[repositoryName].label, formattedRevisions[repositoryName].url));
-        return markup.join('<br>');
+            buildInfo[repositoryName] = linkifyIfNotNull(formattedRevisions[repositoryName].label, formattedRevisions[repositoryName].url);
+        var markup = '';
+        for (var key in buildInfo)
+            markup += '<tr><th>' + key + '</th><td>' + buildInfo[key] + '</td>';
+        return '<tr>' + markup + '</tr>';
     }
 
     function Chart(container, isDashboard, platform, metric, bugTrackers, onClose) {
@@ -384,9 +396,8 @@ td, th {
         if (metric.test.url)
             linkifiedFullName = '<a href="' + metric.test.url + '">' + linkifiedFullName + '</a>';
         var section = $('<section class="chart"><div class="pane"><header><h2>' + linkifiedFullName + '</h2>'
-            + '<h3 class="platform">' + platform.name + '</h3>'
-            + '<span class="status"></span></header>'
-            + '<table class="summaryTable"><tbody></tbody></table>'
+            + '<h3 class="platform">' + platform.name + '</h3></header>'
+            + '<div class="meta"><table class="status"><tbody></tbody></table><table class="summaryTable"><tbody></tbody></table></div>'
             + '<div class="overviewPlot"></div></div>'
             + '<div class="plot"></div>'
             + '<div class="unit"></div>'
@@ -459,8 +470,10 @@ td, th {
             summaryRows = createSummaryRowMarkup('Current', results) + summaryRows;
 
             var status = computeStatus(results.smallerIsBetter(), results.lastResult(), baseline, target);
+            if (status.text)
+                summaryRows = '<tr><td colspan="2">' + status.text + '</td></tr>' + summaryRows;
             section.addClass(status.class);
-            section.find('.status').html(status.text);
+            section.find('.status tbody').html(buildLabelWithLinks(results.lastResult().build()));
             section.find('.summaryTable tbody').html(summaryRows);
             section.find('.unit').html(results.unit());
             if (results.smallerIsBetter()) {
@@ -590,8 +603,8 @@ td, th {
                 }
                 newBugUrls = 'File:' + newBugUrls;
             }
-            tooltip.show(x, y, result.label(resultToCompare) + '<br>'
-                + buildLabelWithLinks(result.build(), resultToCompare ? resultToCompare.build() : null) + '<br>'
+            tooltip.show(x, y, result.label(resultToCompare) + '<table>'
+                + buildLabelWithLinks(result.build(), resultToCompare ? resultToCompare.build() : null) + '</table>'
                 + newBugUrls);
         }
 
@@ -1155,13 +1168,12 @@ window.addEventListener('DOMContentLoaded', init, false);
 <header id="title">
 <h1><a href="/">WebKit Perf Monitor</a></h1>
 <ul>
+    <li id="numberOfDaysPicker"><input id="numberOfDays" type="range" min="1" max="5.9" step="0.001" value="2.3"><span class="output"></span></li>
     <li><a href="javascript:setMode('dashboard');">Dashboard</a></li>
     <li><a href="javascript:setMode('charts');">Charts</a></li>
 </ul>
 </header>
 
-<div id="numberOfDaysPicker"><input id="numberOfDays" type="range" min="1" max="5.9" step="0.001" value="2.3"><span class="output"></span></div>
-
 <div id="mainContents"></div>
 </body>
 </html>