- Revision
- 193650
- Author
- jon...@apple.com
- Date
- 2015-12-07 14:14:25 -0800 (Mon, 07 Dec 2015)
Log Message
Update options for benchmark
https://bugs.webkit.org/show_bug.cgi?id=151956
Reviewed by Simon Fraser.
Move "Fix test complexity" and "Adaptive" checkboxes into a radio group.
Move "Show running results" into a radio group, and add options to remove the HUD.
* Animometer/runner/animometer.html: Get rid of the preamble. Wrap the options
in a form for easier referencing in JS.
* Animometer/runner/resources/animometer.css: Show the surrounding border if the
body's display-minimal class name is set.
* Animometer/runner/resources/animometer.js:
Update the way optionsManager gets and sets default values. Include support for
radio groups.
(window.optionsManager.valueForOption):
(window.optionsManager.updateUIFromLocalStorage):
(window.optionsManager.updateLocalStorageFromUI):
(window.benchmarkRunnerClient.willStartFirstIteration):
(window.sectionsManager.setupRunningSectionStyle):
(window.suitesManager._treeElement): Fly-by whitespace fix.
(window.suitesManager._suitesElements): Ditto.
(window.suitesManager.updateEditsElementsState): Update options check.
(window.suitesManager.updateDisplay): Add a new update function for the HUD.
Attach a class to the body depending on the user's choice.
(window.benchmarkController.initialize): Add an event listener when the form
radio buttons update.
(window.benchmarkController.onFormChanged):
(window.optionsManager._optionsElements): Deleted.
(window.optionsManager._adaptiveTestElement): Deleted.
(window.benchmarkController.onChangeAdaptiveTestCheckbox): Deleted.
* Animometer/tests/resources/main.js:
(Benchmark.prototype.update): Update options checks.
* Animometer/tests/resources/stage.js: Update option check.
(StageBenchmark.prototype.showResults):
Modified Paths
Diff
Modified: trunk/PerformanceTests/Animometer/runner/animometer.html (193649 => 193650)
--- trunk/PerformanceTests/Animometer/runner/animometer.html 2015-12-07 22:03:48 UTC (rev 193649)
+++ trunk/PerformanceTests/Animometer/runner/animometer.html 2015-12-07 22:14:25 UTC (rev 193650)
@@ -15,25 +15,44 @@
<main>
<section id="home" class="selected">
<header>
- <h2>
- Animometer is a browser benchmark that measures the complexity of an animation for
- which a browser can achieve 50 FPS (frame per second). It uses adaptive animations
- to tune their complexities to stay close to 50 FPS.
- </h2>
+ <h1>Animometer</h1>
</header>
<suites>
<h2>Suites:</h2>
<ul class="tree"></ul>
</suites>
- <options>
+ <div id="options">
<h2>Options:</h2>
- <label>Test interval: <input id="test-interval" type="number" value="10"> seconds</label><br>
- <label>Frame rate: <input id="frame-rate" type="number" value="50"> fps</label><br>
- <label><input id="estimated-frame-rate" type="checkbox" checked> Estimated Frame Rate</label><br>
- <label><input id="fix-test-complexity" type="checkbox"> Fix test complexity after warmup</label><br>
- <label><input id="show-running-results" type="checkbox"> Show running results</label><br>
- <label><input id="adaptive-test" type="checkbox" checked _onchange_="benchmarkController.onChangeAdaptiveTestCheckbox()"> Adaptive test</label>
- </options>
+ <form name="benchmark-options">
+ <ul>
+ <li>
+ <label>Test length: <input type="number" id="test-interval" value="10"> seconds each</label>
+ </li>
+ <li>
+ <h3>Display:</h3>
+ <ul>
+ <li><label><input name="display" type="radio" value="minimal" checked> Minimal</label></li>
+ <li><label><input name="display" type="radio" value="progress-bar"> Progress bar</label></li>
+ <li><label><input name="display" type="radio" value="statistics-table"> Statistics table</label></li>
+ </ul>
+ </li>
+ <li>
+ <h3>Adjusting the test complexity:</h3>
+ <ul>
+ <li><label><input name="adjustment" type="radio" value="fixed"> Keep constant</label></li>
+ <li><label><input name="adjustment" type="radio" value="fixed-after-warmup"> Keep constant after warmup to target FPS</label></li>
+ <li><label><input name="adjustment" type="radio" value="adaptive" checked> Maintain target FPS</label></li>
+ </ul>
+ </li>
+ <li>
+ <label>Target frame rate: <input type="number" id="frame-rate" value="50"> FPS</label>
+ </li>
+ <li>
+ <label><input type="checkbox" id="estimated-frame-rate" checked> Filter frame rate calculation</label>
+ </li>
+ </ul>
+ </form>
+ </div>
<footer>
<button class="large-button" _onclick_="benchmarkController.startTest()">Start Test</button>
</footer>
Modified: trunk/PerformanceTests/Animometer/runner/resources/animometer.css (193649 => 193650)
--- trunk/PerformanceTests/Animometer/runner/resources/animometer.css 2015-12-07 22:03:48 UTC (rev 193649)
+++ trunk/PerformanceTests/Animometer/runner/resources/animometer.css 2015-12-07 22:14:25 UTC (rev 193650)
@@ -205,6 +205,10 @@
height: 600px;
display: none;
padding: 10px;
+}
+
+.display-progress-bar section,
+.display-statistics-table section {
border: 6px solid rgb(235, 235, 235);
border-radius: 20px;
}
@@ -263,11 +267,14 @@
align-content: center;
}
+section#home h2 {
+ font-size: 1.2em;
+}
+
section#home > suites,
-section#home > options {
+#options {
padding: 10px;
margin: 10px;
- height: 50%;
}
section#home > suites {
@@ -277,18 +284,13 @@
flex: 0 1 40%;
}
-section#home > options {
+#options {
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
-section#home > options > label {
- margin: 2em;
- line-height: 2;
-}
-
-section#home > header > h2 {
+section#home > header > h1 {
margin: 0 auto;
width: 70%;
text-align: center;
@@ -307,6 +309,31 @@
display: inline;
}
+#options ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+#options h3 {
+ font-size: 1em;
+ font-weight: inherit;
+ margin: 0 0 .3em 0;
+ padding: 0;
+}
+
+#options > form > ul > li {
+ padding: 0 0 1em 0;
+}
+
+#options ul ul {
+ padding: 0;
+}
+
+#options li {
+ padding: .1em 0;
+}
+
/* -------------------------------------------------------------------------- */
/* Running Section */
/* -------------------------------------------------------------------------- */
@@ -334,7 +361,8 @@
overflow: hidden;
}
-section#running > #progress {
+.display-progress-bar section#running > #progress,
+.display-statistics-table section#running > #progress {
position: absolute;
bottom: -6px;
left: 60px;
@@ -345,7 +373,8 @@
border-right: 6px solid rgb(46, 51, 55);
}
-section#running > #progress > #progress-completed {
+.display-progress-bar section#running > #progress > #progress-completed,
+.display-statistics-table section#running > #progress > #progress-completed {
position: absolute;
top: 0;
left: 0;
Modified: trunk/PerformanceTests/Animometer/runner/resources/animometer.js (193649 => 193650)
--- trunk/PerformanceTests/Animometer/runner/resources/animometer.js 2015-12-07 22:03:48 UTC (rev 193649)
+++ trunk/PerformanceTests/Animometer/runner/resources/animometer.js 2015-12-07 22:14:25 UTC (rev 193650)
@@ -33,7 +33,7 @@
this._resultsTable = new ResultsTable(document.querySelector("section#results > data > table"), Headers);
this.progressBar = new ProgressBar(document.getElementById("progress-completed"), this.testsCount);
- this.recordTable = new ResultsTable(document.querySelector("section#running > #record > table"), Headers);
+ this.recordTable = new ResultsTable(document.querySelector("section#running #record > table"), Headers);
},
didRunSuites: function (suitesSamplers)
@@ -134,55 +134,61 @@
setupRunningSectionStyle: function(options)
{
- if (!options["show-running-results"])
+ if (options["display"] != "statistics-table")
document.getElementById("record").style.display = "none";
}
}
window.optionsManager =
{
- _optionsElements : function()
+ valueForOption: function(name)
{
- return document.querySelectorAll("section#home > options input");;
+ var formElement = document.forms["benchmark-options"].elements[name];
+ if (formElement.type == "checkbox")
+ return formElement.checked;
+ return formElement.value;
},
- _adaptiveTestElement: function()
- {
- return document.querySelector("section#home > options #adaptive-test");;
- },
-
updateUIFromLocalStorage: function()
{
- var optionsElements = this._optionsElements();
+ var formElements = document.forms["benchmark-options"].elements;
- for (var i = 0; i < optionsElements.length; ++i) {
- var optionElement = optionsElements[i];
-
- var value = localStorage.getItem(optionElement.id);
+ for (var i = 0; i < formElements.length; ++i) {
+ var formElement = formElements[i];
+ var name = formElement.id || formElement.name;
+ var type = formElement.type;
+
+ var value = localStorage.getItem(name);
if (value === null)
continue;
- if (optionElement.getAttribute("type") == "number")
- optionElement.value = +value;
- else if (optionElement.getAttribute("type") == "checkbox")
- optionElement.checked = value == "true";
+ if (type == "number")
+ formElements[name].value = +value;
+ else if (type == "checkbox")
+ formElements[name].checked = value == "true";
+ else if (type == "radio")
+ formElements[name].value = value;
}
},
updateLocalStorageFromUI: function()
{
- var optionsElements = this._optionsElements();
+ var formElements = document.forms["benchmark-options"].elements;
var options = {};
- for (var i = 0; i < optionsElements.length; ++i) {
- var optionElement = optionsElements[i];
-
- if (optionElement.getAttribute("type") == "number")
- options[optionElement.id] = optionElement.value;
- else if (optionElement.getAttribute("type") == "checkbox")
- options[optionElement.id] = optionElement.checked;
+ for (var i = 0; i < formElements.length; ++i) {
+ var formElement = formElements[i];
+ var name = formElement.id || formElement.name;
+ var type = formElement.type;
+
+ if (type == "number")
+ options[name] = formElement.value;
+ else if (type == "checkbox")
+ options[name] = formElement.checked;
+ else if (type == "radio")
+ options[name] = formElements[name].value;
- localStorage.setItem(optionElement.id, options[optionElement.id]);
+ localStorage.setItem(name, options[name]);
}
return options;
@@ -191,12 +197,12 @@
window.suitesManager =
{
- _treeElement : function()
+ _treeElement: function()
{
return document.querySelector("suites > .tree");
},
- _suitesElements : function()
+ _suitesElements: function()
{
return document.querySelectorAll("#home > suites > ul > li");
},
@@ -317,17 +323,22 @@
updateEditsElementsState: function()
{
var editsElements = this._editsElements();
- var show = !optionsManager._adaptiveTestElement().checked;
+ var showComplexityInputs = optionsManager.valueForOption("adjustment") == "fixed";
for (var i = 0; i < editsElements.length; ++i) {
var editElement = editsElements[i];
- if (show)
+ if (showComplexityInputs)
editElement.classList.add("selected");
else
editElement.classList.remove("selected");
}
},
-
+
+ updateDisplay: function()
+ {
+ document.body.className = "display-" + optionsManager.valueForOption("display");
+ },
+
updateUIFromLocalStorage: function()
{
var suitesElements = this._suitesElements();
@@ -410,15 +421,23 @@
{
initialize: function()
{
+ document.forms["benchmark-options"].addEventListener("change", benchmarkController.onFormChanged, true);
optionsManager.updateUIFromLocalStorage();
suitesManager.createElements();
suitesManager.updateUIFromLocalStorage();
+ suitesManager.updateDisplay();
suitesManager.updateEditsElementsState();
},
- onChangeAdaptiveTestCheckbox: function()
+ onFormChanged: function(event)
{
- suitesManager.updateEditsElementsState();
+ if (event.target.name == "adjustment") {
+ suitesManager.updateEditsElementsState();
+ return;
+ }
+ if (event.target.name == "display") {
+ suitesManager.updateDisplay();
+ }
},
_runBenchmark: function(suites, options)
Modified: trunk/PerformanceTests/Animometer/tests/resources/main.js (193649 => 193650)
--- trunk/PerformanceTests/Animometer/tests/resources/main.js 2015-12-07 22:03:48 UTC (rev 193649)
+++ trunk/PerformanceTests/Animometer/tests/resources/main.js 2015-12-07 22:14:25 UTC (rev 193650)
@@ -166,11 +166,13 @@
}
var tuneValue = 0;
- if (this._options["complexity"] && !this._options["adaptive-test"]) {
- // this.tune(0) returns the current complexity of the test.
- tuneValue = this._options["complexity"] - this.tune(0);
+ if (this._options["adjustment"] == "fixed") {
+ if (this._options["complexity"]) {
+ // this.tune(0) returns the current complexity of the test.
+ tuneValue = this._options["complexity"] - this.tune(0);
+ }
}
- else if (!(this._isSampling && this._options["fix-test-complexity"])) {
+ else if (!(this._isSampling && this._options["adjustment"] == "fixed-after-warmup")) {
// The relationship between frameRate and test complexity is inverse-proportional so we
// need to use the negative of PIDController.tune() to change the complexity of the test.
tuneValue = -this._controller.tune(currentTimeOffset, timeDelta, currentFrameRate);
Modified: trunk/PerformanceTests/Animometer/tests/resources/stage.js (193649 => 193650)
--- trunk/PerformanceTests/Animometer/tests/resources/stage.js 2015-12-07 22:03:48 UTC (rev 193649)
+++ trunk/PerformanceTests/Animometer/tests/resources/stage.js 2015-12-07 22:14:25 UTC (rev 193650)
@@ -172,7 +172,7 @@
if (!this._recordTable || !this._progressBar || !this._test)
return;
- if (this._options["show-running-results"])
+ if (this._options["display"] == "statistics-table")
this._recordTable.showRecord(this._test.name, message, this._sampler.toJSON(true, false), this._options);
this._progressBar.setPos(progress);
Modified: trunk/PerformanceTests/ChangeLog (193649 => 193650)
--- trunk/PerformanceTests/ChangeLog 2015-12-07 22:03:48 UTC (rev 193649)
+++ trunk/PerformanceTests/ChangeLog 2015-12-07 22:14:25 UTC (rev 193650)
@@ -1,3 +1,44 @@
+2015-12-07 Jon Lee <jon...@apple.com>
+
+ Update options for benchmark
+ https://bugs.webkit.org/show_bug.cgi?id=151956
+
+ Reviewed by Simon Fraser.
+
+ Move "Fix test complexity" and "Adaptive" checkboxes into a radio group.
+
+ Move "Show running results" into a radio group, and add options to remove the HUD.
+
+ * Animometer/runner/animometer.html: Get rid of the preamble. Wrap the options
+ in a form for easier referencing in JS.
+ * Animometer/runner/resources/animometer.css: Show the surrounding border if the
+ body's display-minimal class name is set.
+ * Animometer/runner/resources/animometer.js:
+
+ Update the way optionsManager gets and sets default values. Include support for
+ radio groups.
+ (window.optionsManager.valueForOption):
+ (window.optionsManager.updateUIFromLocalStorage):
+ (window.optionsManager.updateLocalStorageFromUI):
+
+ (window.benchmarkRunnerClient.willStartFirstIteration):
+ (window.sectionsManager.setupRunningSectionStyle):
+ (window.suitesManager._treeElement): Fly-by whitespace fix.
+ (window.suitesManager._suitesElements): Ditto.
+ (window.suitesManager.updateEditsElementsState): Update options check.
+ (window.suitesManager.updateDisplay): Add a new update function for the HUD.
+ Attach a class to the body depending on the user's choice.
+ (window.benchmarkController.initialize): Add an event listener when the form
+ radio buttons update.
+ (window.benchmarkController.onFormChanged):
+ (window.optionsManager._optionsElements): Deleted.
+ (window.optionsManager._adaptiveTestElement): Deleted.
+ (window.benchmarkController.onChangeAdaptiveTestCheckbox): Deleted.
+ * Animometer/tests/resources/main.js:
+ (Benchmark.prototype.update): Update options checks.
+ * Animometer/tests/resources/stage.js: Update option check.
+ (StageBenchmark.prototype.showResults):
+
2015-12-01 Simon Fraser <simon.fra...@apple.com>
Add a basic compositing Animometer test
