<!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>[166479] 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/166479">166479</a></dd>
<dt>Author</dt> <dd>rniwa@webkit.org</dd>
<dt>Date</dt> <dd>2014-03-30 23:39:25 -0700 (Sun, 30 Mar 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>WebKitPerfMonitor: Sometimes text inside panes overlap
https://bugs.webkit.org/show_bug.cgi?id=130956
Reviewed by Gyuyoung Kim.
Revamped the pane UI. Now build info uses table element instead of plane text with BRs. The computed status of
the latest result against baseline/target such as "3% until target" is now shown above the current value. This
reduces the total height of the pane and fits more information per screen capita on the dashboard.
* public/index.html: Updated and added a bunch of CSS rules for the new look.
(.computeStatus): Don't append the build info here. The build info is constructed as a separate table now.
(.createSummaryRowMarkup): Use th instead of td for "Current", "Baseline", and "Target" in the summary table.
(.buildLabelWithLinks): Construct table rows instead of br separated lines of text. This streamlines the look
of the build info shown in a chart pane and a tooltip.
(Chart): Made .status a table.
(Chart.populate): Prepend status.text, which contains text such as "3% until target", into the summary rows
right above "Current" value, and populate .status with buildLabelWithLinks manually instead of status.text
now that status.text no longer contains it.
(Chart..showTooltipWithResults): Wrap buildLabelWithLinks with a table element.
* public/js/helper-classes.js:
(TestBuild.formattedRevisions): Don't include repository names in labels since repository names are now added
by buildLabelWithLinks inside th elements. Also place spaces around '-' between two different OS X versions.
e.g. "OS X 10.8 - OS X 10.9" instead of "OS X 10.8-OS X 10.9".
(PerfTestRuns): Use "/s" for "runs/s" and "B" for "bytes" to make text shorter in .status and .summaryTable.
(PerfTestRuns..computeScalingFactorIfNeeded): Avoid placing a space between 'M' and a unit starting with a
capital letter; e.g. "MB" instead of "M B".</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkWebsitesperfwebkitorgChangeLog">trunk/Websites/perf.webkit.org/ChangeLog</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicindexhtml">trunk/Websites/perf.webkit.org/public/index.html</a></li>
<li><a href="#trunkWebsitesperfwebkitorgpublicjshelperclassesjs">trunk/Websites/perf.webkit.org/public/js/helper-classes.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 (166478 => 166479)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/ChangeLog 2014-03-31 06:37:34 UTC (rev 166478)
+++ trunk/Websites/perf.webkit.org/ChangeLog 2014-03-31 06:39:25 UTC (rev 166479)
</span><span class="lines">@@ -1,5 +1,35 @@
</span><span class="cx"> 2014-03-30 Ryosuke Niwa <rniwa@webkit.org>
</span><span class="cx">
</span><ins>+ WebKitPerfMonitor: Sometimes text inside panes overlap
+ https://bugs.webkit.org/show_bug.cgi?id=130956
+
+ Reviewed by Gyuyoung Kim.
+
+ Revamped the pane UI. Now build info uses table element instead of plane text with BRs. The computed status of
+ the latest result against baseline/target such as "3% until target" is now shown above the current value. This
+ reduces the total height of the pane and fits more information per screen capita on the dashboard.
+
+ * public/index.html: Updated and added a bunch of CSS rules for the new look.
+ (.computeStatus): Don't append the build info here. The build info is constructed as a separate table now.
+ (.createSummaryRowMarkup): Use th instead of td for "Current", "Baseline", and "Target" in the summary table.
+ (.buildLabelWithLinks): Construct table rows instead of br separated lines of text. This streamlines the look
+ of the build info shown in a chart pane and a tooltip.
+ (Chart): Made .status a table.
+ (Chart.populate): Prepend status.text, which contains text such as "3% until target", into the summary rows
+ right above "Current" value, and populate .status with buildLabelWithLinks manually instead of status.text
+ now that status.text no longer contains it.
+ (Chart..showTooltipWithResults): Wrap buildLabelWithLinks with a table element.
+
+ * public/js/helper-classes.js:
+ (TestBuild.formattedRevisions): Don't include repository names in labels since repository names are now added
+ by buildLabelWithLinks inside th elements. Also place spaces around '-' between two different OS X versions.
+ e.g. "OS X 10.8 - OS X 10.9" instead of "OS X 10.8-OS X 10.9".
+ (PerfTestRuns): Use "/s" for "runs/s" and "B" for "bytes" to make text shorter in .status and .summaryTable.
+ (PerfTestRuns..computeScalingFactorIfNeeded): Avoid placing a space between 'M' and a unit starting with a
+ capital letter; e.g. "MB" instead of "M B".
+
+2014-03-30 Ryosuke Niwa <rniwa@webkit.org>
+
</ins><span class="cx"> WebKitPerfMonitor: Header and number-of-days slider takes up too much space
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=130957
</span><span class="cx">
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicindexhtml"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/index.html (166478 => 166479)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/index.html 2014-03-31 06:37:34 UTC (rev 166478)
+++ trunk/Websites/perf.webkit.org/public/index.html 2014-03-31 06:39:25 UTC (rev 166479)
</span><span class="lines">@@ -40,10 +40,6 @@
</span><span class="cx"> font-weight: normal;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#dashboard td {
-
-}
-
</del><span class="cx"> .chart {
</span><span class="cx"> position: relative;
</span><span class="cx"> border: solid 1px #ccc;
</span><span class="lines">@@ -73,8 +69,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #dashboard header {
</span><del>- padding: 10px;
- width: 200px;
</del><ins>+ padding: 0px 10px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .chart h2, .chart h3 {
</span><span class="lines">@@ -82,7 +77,6 @@
</span><span class="cx"> padding: 0;
</span><span class="cx"> font-size: 1em;
</span><span class="cx"> font-weight: normal;
</span><del>- width: 200px;
</del><span class="cx"> word-break: break-all;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -98,6 +92,10 @@
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#dashboard .chart .status {
+ margin: 0px 10px;
+}
+
</ins><span class="cx"> .chart .status {
</span><span class="cx"> font-size: small;
</span><span class="cx"> color: #666;
</span><span class="lines">@@ -115,6 +113,10 @@
</span><span class="cx"> height: 15px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#dashboard .chart {
+ width: 410px;
+}
+
</ins><span class="cx"> #dashboard .plot {
</span><span class="cx"> width: 400px;
</span><span class="cx"> height: 100px;
</span><span class="lines">@@ -123,7 +125,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #charts .plot {
</span><del>- height: 300px;
</del><ins>+ height: 320px;
</ins><span class="cx"> margin-left: 250px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -137,17 +139,41 @@
</span><span class="cx"> height: 70px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.summaryTable {
</del><ins>+.chart .summaryTable {
</ins><span class="cx"> font-size: small;
</span><span class="cx"> color: #666;
</span><span class="cx"> border: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#dashboard .summaryTable {
</del><ins>+.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 {
</ins><span class="cx"> position: absolute;
</span><span class="cx"> right: 10px;
</span><del>- top: 10px;
- width: 180px;
</del><ins>+ top: 0px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #dashboard .arrow {
</span><span class="lines">@@ -218,7 +244,7 @@
</span><span class="cx"> color: #eee;
</span><span class="cx"> font-size: small;
</span><span class="cx"> line-height: 130%;
</span><del>- width: 30ex;
</del><ins>+ white-space: nowrap;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .tooltip:after {
</span><span class="lines">@@ -320,10 +346,6 @@
</span><span class="cx"> } else if (relativeDifferenceWithTarget)
</span><span class="cx"> statusText = Math.abs(relativeDifferenceWithTarget * 100).toFixed(2) + '% until target';
</span><span class="cx">
</span><del>- if (statusText)
- statusText += '<br>';
- statusText += buildLabelWithLinks(lastResult.build());
-
</del><span class="cx"> return {class: status, text: statusText};
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -344,7 +366,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function createSummaryRowMarkup(name, runs) {
</span><del>- return '<tr><td>' + name + '</td><td>' + runs.lastResult().label() + '</td></tr>';
</del><ins>+ return '<tr><th>' + name + '</th><td>' + runs.lastResult().label() + '</td></tr>';
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function buildLabelWithLinks(build, previousBuild) {
</span><span class="lines">@@ -353,11 +375,16 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> var formattedRevisions = build.formattedRevisions(previousBuild);
</span><del>- var markup = ['Committed: ' + build.formattedTime(),
- 'Build: ' + linkifyIfNotNull(build.buildNumber(), build.buildUrl()) + ' (' + build.formattedBuildTime() + ')'];
</del><ins>+ var buildInfo = {
+ 'Commit': build.formattedTime(),
+ 'Build': linkifyIfNotNull(build.buildNumber(), build.buildUrl()) + '(' + build.formattedBuildTime() + ')'
+ };
</ins><span class="cx"> for (var repositoryName in formattedRevisions)
</span><del>- markup.push(linkifyIfNotNull(formattedRevisions[repositoryName].label, formattedRevisions[repositoryName].url));
- return markup.join('<br>');
</del><ins>+ 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>';
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function Chart(container, isDashboard, platform, metric, bugTrackers, onClose) {
</span><span class="lines">@@ -365,9 +392,8 @@
</span><span class="cx"> if (metric.test.url)
</span><span class="cx"> linkifiedFullName = '<a href="' + metric.test.url + '">' + linkifiedFullName + '</a>';
</span><span class="cx"> var section = $('<section class="chart"><div class="pane"><header><h2>' + linkifiedFullName + '</h2>'
</span><del>- + '<h3 class="platform">' + platform.name + '</h3>'
- + '<span class="status"></span></header>'
- + '<table class="summaryTable"><tbody></tbody></table>'
</del><ins>+ + '<h3 class="platform">' + platform.name + '</h3></header>'
+ + '<div class="meta"><table class="status"><tbody></tbody></table><table class="summaryTable"><tbody></tbody></table></div>'
</ins><span class="cx"> + '<div class="overviewPlot"></div></div>'
</span><span class="cx"> + '<div class="plot"></div>'
</span><span class="cx"> + '<div class="unit"></div>'
</span><span class="lines">@@ -440,8 +466,10 @@
</span><span class="cx"> summaryRows = createSummaryRowMarkup('Current', results) + summaryRows;
</span><span class="cx">
</span><span class="cx"> var status = computeStatus(results.smallerIsBetter(), results.lastResult(), baseline, target);
</span><ins>+ if (status.text)
+ summaryRows = '<tr><td colspan="2">' + status.text + '</td></tr>' + summaryRows;
</ins><span class="cx"> section.addClass(status.class);
</span><del>- section.find('.status').html(status.text);
</del><ins>+ section.find('.status tbody').html(buildLabelWithLinks(results.lastResult().build()));
</ins><span class="cx"> section.find('.summaryTable tbody').html(summaryRows);
</span><span class="cx"> section.find('.unit').html(results.unit());
</span><span class="cx"> if (results.smallerIsBetter()) {
</span><span class="lines">@@ -571,8 +599,8 @@
</span><span class="cx"> }
</span><span class="cx"> newBugUrls = 'File:' + newBugUrls;
</span><span class="cx"> }
</span><del>- tooltip.show(x, y, result.label(resultToCompare) + '<br>'
- + buildLabelWithLinks(result.build(), resultToCompare ? resultToCompare.build() : null) + '<br>'
</del><ins>+ tooltip.show(x, y, result.label(resultToCompare) + '<table>'
+ + buildLabelWithLinks(result.build(), resultToCompare ? resultToCompare.build() : null) + '</table>'
</ins><span class="cx"> + newBugUrls);
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkWebsitesperfwebkitorgpublicjshelperclassesjs"></a>
<div class="modfile"><h4>Modified: trunk/Websites/perf.webkit.org/public/js/helper-classes.js (166478 => 166479)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/perf.webkit.org/public/js/helper-classes.js 2014-03-31 06:37:34 UTC (rev 166478)
+++ trunk/Websites/perf.webkit.org/public/js/helper-classes.js 2014-03-31 06:39:25 UTC (rev 166479)
</span><span class="lines">@@ -68,26 +68,28 @@
</span><span class="cx"> this.revision = function(repositoryName) { return revisions[repositoryName][0]; }
</span><span class="cx"> this.formattedRevisions = function (previousBuild) {
</span><span class="cx"> var result = {};
</span><del>- for (var repositoryName in revisions) {
</del><ins>+ for (var repositoryName in repositories) {
+ if (!revisions[repositoryName])
+ continue;
</ins><span class="cx"> var previousRevision = previousBuild ? previousBuild.revision(repositoryName) : undefined;
</span><span class="cx"> var currentRevision = this.revision(repositoryName);
</span><span class="cx"> if (previousRevision === currentRevision)
</span><span class="cx"> previousRevision = undefined;
</span><span class="cx">
</span><span class="cx"> var revisionPrefix = '';
</span><del>- if (currentRevision.length < 10) { // SVN-like revision.
</del><ins>+ var revisionDelimitor = '-';
+ if (parseInt(currentRevision) == currentRevision) { // e.g. r12345.
</ins><span class="cx"> revisionPrefix = 'r';
</span><span class="cx"> if (previousRevision)
</span><span class="cx"> previousRevision = (parseInt(previousRevision) + 1);
</span><del>- }
</del><ins>+ } else if (currentRevision.indexOf(' ') >= 0) // e.g. 10.9 13C64.
+ revisionDelimitor = ' - ';
</ins><span class="cx">
</span><del>- var labelForThisRepository = revisionCount ? repositoryName : '';
- if (previousRevision) {
- if (labelForThisRepository)
- labelForThisRepository += ' ';
- labelForThisRepository += revisionPrefix + previousRevision + '-' + revisionPrefix + currentRevision;
- } else
- labelForThisRepository += ' @ ' + revisionPrefix + currentRevision;
</del><ins>+ var labelForThisRepository;
+ if (previousRevision)
+ labelForThisRepository = revisionPrefix + previousRevision + revisionDelimitor + revisionPrefix + currentRevision;
+ else
+ labelForThisRepository = '@ ' + revisionPrefix + currentRevision;
</ins><span class="cx">
</span><span class="cx"> var url;
</span><span class="cx"> var repository = repositories[repositoryName];
</span><span class="lines">@@ -124,14 +126,14 @@
</span><span class="cx"> var baselines = {};
</span><span class="cx"> var unit = {'Combined': '', // Assume smaller is better for now.
</span><span class="cx"> 'FrameRate': 'fps',
</span><del>- 'Runs': 'runs/s',
</del><ins>+ 'Runs': '/s',
</ins><span class="cx"> 'Time': 'ms',
</span><del>- 'Malloc': 'bytes',
- 'JSHeap': 'bytes',
- 'Allocations': 'bytes',
- 'EndAllocations': 'bytes',
- 'MaxAllocations': 'bytes',
- 'MeanAllocations': 'bytes'}[metric.name];
</del><ins>+ 'Malloc': 'B',
+ 'JSHeap': 'B',
+ 'Allocations': 'B',
+ 'EndAllocations': 'B',
+ 'MaxAllocations': 'B',
+ 'MeanAllocations': 'B'}[metric.name];
</ins><span class="cx">
</span><span class="cx"> // We can't do this in PerfTestResult because all results for each metric need to share the same unit and the same scaling factor.
</span><span class="cx"> function computeScalingFactorIfNeeded() {
</span><span class="lines">@@ -141,10 +143,11 @@
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="cx"> var mean = results[0].unscaledMean(); // FIXME: We should look at all values.
</span><del>- var kilo = unit == 'bytes' ? 1024 : 1000;
</del><ins>+ var kilo = unit == 'B' ? 1024 : 1000;
</ins><span class="cx"> if (mean > 2 * kilo * kilo && unit != 'ms') {
</span><span class="cx"> cachedScalingFactor = 1 / kilo / kilo;
</span><del>- cachedUnit = 'M ' + unit;
</del><ins>+ var unitFirstChar = unit.charAt(0);
+ cachedUnit = 'M' + (unitFirstChar.toUpperCase() == unitFirstChar ? '' : ' ') + unit;
</ins><span class="cx"> } else if (mean > 2 * kilo) {
</span><span class="cx"> cachedScalingFactor = 1 / kilo;
</span><span class="cx"> cachedUnit = unit == 'ms' ? 's' : ('K ' + unit);
</span></span></pre>
</div>
</div>
</body>
</html>