Title: [200818] trunk/Websites/perf.webkit.org
- Revision
- 200818
- Author
- [email protected]
- Date
- 2016-05-13 00:31:58 -0700 (Fri, 13 May 2016)
Log Message
Show a spinner while fetching data on summary page
https://bugs.webkit.org/show_bug.cgi?id=157658
Reviewed by Darin Adler.
Show a spinner while fetching JSON files on the summary page.
* public/v3/components/base.js:
(ComponentBase.prototype.renderReplace): Added a new implementation that simply calls the static version.
(ComponentBase.renderReplace): Made this static.
* public/v3/pages/summary-page.js:
(SummaryPage.prototype._constructRatioGraph): Show a spinner icon when SummaryPageConfigurationGroup's
isFetching returns true.
(SummaryPage.cssTemplate): Force the height of each cell to be 2.5rem so that the height of cell doesn't
change when a spinner is replaced by a ratio bar graph.
(SummaryPageConfigurationGroup): Added this._isFetching as an instance variable.
(SummaryPageConfigurationGroup.prototype.isFetching): Added.
(SummaryPageConfigurationGroup.prototype.fetchAndComputeSummary): Set this._isFetching while waiting for
the promises to resolve after 50ms. We don't immediately set this._isFetching to avoid FOC when all JSON
files have been cached.
Modified Paths
Diff
Modified: trunk/Websites/perf.webkit.org/ChangeLog (200817 => 200818)
--- trunk/Websites/perf.webkit.org/ChangeLog 2016-05-13 06:38:13 UTC (rev 200817)
+++ trunk/Websites/perf.webkit.org/ChangeLog 2016-05-13 07:31:58 UTC (rev 200818)
@@ -1,3 +1,28 @@
+2016-05-13 Ryosuke Niwa <[email protected]>
+
+ Show a spinner while fetching data on summary page
+ https://bugs.webkit.org/show_bug.cgi?id=157658
+
+ Reviewed by Darin Adler.
+
+ Show a spinner while fetching JSON files on the summary page.
+
+ * public/v3/components/base.js:
+ (ComponentBase.prototype.renderReplace): Added a new implementation that simply calls the static version.
+ (ComponentBase.renderReplace): Made this static.
+
+ * public/v3/pages/summary-page.js:
+ (SummaryPage.prototype._constructRatioGraph): Show a spinner icon when SummaryPageConfigurationGroup's
+ isFetching returns true.
+ (SummaryPage.cssTemplate): Force the height of each cell to be 2.5rem so that the height of cell doesn't
+ change when a spinner is replaced by a ratio bar graph.
+
+ (SummaryPageConfigurationGroup): Added this._isFetching as an instance variable.
+ (SummaryPageConfigurationGroup.prototype.isFetching): Added.
+ (SummaryPageConfigurationGroup.prototype.fetchAndComputeSummary): Set this._isFetching while waiting for
+ the promises to resolve after 50ms. We don't immediately set this._isFetching to avoid FOC when all JSON
+ files have been cached.
+
2016-05-07 Ryosuke Niwa <[email protected]>
Add horizontal between categories of tests
Modified: trunk/Websites/perf.webkit.org/public/v3/components/base.js (200817 => 200818)
--- trunk/Websites/perf.webkit.org/public/v3/components/base.js 2016-05-13 06:38:13 UTC (rev 200817)
+++ trunk/Websites/perf.webkit.org/public/v3/components/base.js 2016-05-13 07:31:58 UTC (rev 200818)
@@ -12,7 +12,9 @@
content() { return this._shadow; }
render() { }
- renderReplace(element, content)
+ renderReplace(element, content) { ComponentBase.renderReplace(element, content); }
+
+ static renderReplace(element, content)
{
element.innerHTML = '';
if (content)
Modified: trunk/Websites/perf.webkit.org/public/v3/pages/summary-page.js (200817 => 200818)
--- trunk/Websites/perf.webkit.org/public/v3/pages/summary-page.js 2016-05-13 06:38:13 UTC (rev 200817)
+++ trunk/Websites/perf.webkit.org/public/v3/pages/summary-page.js 2016-05-13 07:31:58 UTC (rev 200818)
@@ -94,8 +94,20 @@
var ratioGraph = new RatioBarGraph();
var state = ChartsPage.createStateForConfigurationList(configurationList);
- var anchor = link(ratioGraph, this.router().url('charts', state));
+
+ if (configurationList.length == 0) {
+ this._renderQueue.push(function () { ratioGraph.render(); });
+ return element('td', ratioGraph);
+ }
+
+ var cell = element('td');
+ var url = "" state);
this._renderQueue.push(function () {
+ if (configurationGroup.isFetching()) {
+ ComponentBase.renderReplace(cell, new SpinnerIcon);
+ return;
+ }
+
var warnings = configurationGroup.warnings();
var warningText = '';
for (var type in warnings) {
@@ -103,14 +115,13 @@
warningText += `Missing ${type} for following platform(s): ${platformString}`;
}
- anchor.title = warningText || 'Open charts';
+ ComponentBase.renderReplace(cell, link(ratioGraph, warningText || 'Open charts', url));
+
ratioGraph.update(configurationGroup.ratio(), configurationGroup.label(), !!warningText);
ratioGraph.render();
});
- if (configurationList.length == 0)
- return element('td', ratioGraph);
- return element('td', anchor);
+ return cell;
}
static htmlTemplate()
@@ -167,14 +178,24 @@
}
.summary-table tbody td {
+ position: relative;
font-weight: inherit;
font-size: 0.9rem;
+ height: 2.5rem;
padding: 0;
}
.summary-table td > * {
height: 100%;
}
+
+ .summary-table td spinner-icon {
+ display: block;
+ position: absolute;
+ top: 0.25rem;
+ left: calc(50% - 1rem);
+ z-index: 100;
+ }
`;
}
}
@@ -188,6 +209,7 @@
this._ratio = null;
this._label = null;
this._warnings = {};
+ this._isFetching = false;
this._smallerIsBetter = metrics.length ? metrics[0].isSmallerBetter() : null;
for (var platform of platforms) {
@@ -212,6 +234,7 @@
warnings() { return this._warnings; }
changeType() { return this._changeType; }
configurationList() { return this._configurationList; }
+ isFetching() { return this._isFetching; }
fetchAndComputeSummary(timeRange)
{
@@ -223,7 +246,19 @@
for (var set of this._measurementSets)
promises.push(this._fetchAndComputeRatio(set, timeRange));
- return Promise.all(promises).then(this._computeSummary.bind(this));
+ var self = this;
+ var fetched = false;
+ setTimeout(function () {
+ // Don't set _isFetching to true if all promises were to resolve immediately (cached).
+ if (!fetched)
+ self._isFetching = true;
+ }, 50);
+
+ return Promise.all(promises).then(function () {
+ fetched = true;
+ self._isFetching = false;
+ self._computeSummary();
+ });
}
_computeSummary()
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
