Update options for benchmark
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 7 Dec 2015 22:14:25 +0000 (22:14 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 7 Dec 2015 22:14:25 +0000 (22:14 +0000)
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):

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

PerformanceTests/Animometer/runner/animometer.html
PerformanceTests/Animometer/runner/resources/animometer.css
PerformanceTests/Animometer/runner/resources/animometer.js
PerformanceTests/Animometer/tests/resources/main.js
PerformanceTests/Animometer/tests/resources/stage.js
PerformanceTests/ChangeLog

index 8e3924e..089986d 100644 (file)
     <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>
index ef7fae6..ee07e9a 100644 (file)
@@ -205,6 +205,10 @@ section {
     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 @@ section#home {
     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 @@ section#home > suites {
     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 @@ section#home > suites input[type="number"].selected {
     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 @@ section#running > #running-test > iframe {
     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 @@ section#running > #progress {
     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;
index 82b531f..cc768f9 100644 (file)
@@ -33,7 +33,7 @@ window.benchmarkRunnerClient = {
         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 @@ window.sectionsManager =
 
     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");;
-    },
-    
-    _adaptiveTestElement: function()
-    {
-        return document.querySelector("section#home > options #adaptive-test");;
+        var formElement = document.forms["benchmark-options"].elements[name];
+        if (formElement.type == "checkbox")
+            return formElement.checked;
+        return formElement.value;
     },
     
     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.optionsManager =
 
 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 @@ window.suitesManager =
     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 @@ window.benchmarkController =
 {
     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)
index 9851074..bc39541 100644 (file)
@@ -166,11 +166,13 @@ Benchmark.prototype =
         }
 
         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);
index 05b4f5d..adb3230 100644 (file)
@@ -172,7 +172,7 @@ StageBenchmark.prototype.showResults = function(message, progress)
     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);
index 276dfe7..a40c98d 100644 (file)
@@ -1,3 +1,44 @@
+2015-12-07  Jon Lee  <jonlee@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.fraser@apple.com>
 
         Add a basic compositing Animometer test