Make the benchmark require device to be in landscape orientation
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 24 Mar 2016 02:08:13 +0000 (02:08 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 24 Mar 2016 02:08:13 +0000 (02:08 +0000)
https://bugs.webkit.org/show_bug.cgi?id=155822
rdar://problem/25258650

Reviewed by Ryosuke Niwa.

Check that the device is in landscape orientation. If not, disable the button to start it,
and show a warning message.

* Animometer/developer.html: Add a message about how the browser should be set up. Include a
warning message that appears if the orientation is incorrect on mobile devices.
* Animometer/index.html: Ditto.

* Animometer/resources/debug-runner/animometer.css: Migrate the .hidden rule into the release
stylesheet. Update the style to accommodate the new UI.
* Animometer/resources/runner/animometer.css:

* Animometer/resources/runner/animometer.js:
(window.benchmarkController.initialize): Add the orientation listener is needed.
(window.benchmarkController.addOrientationListenerIfNecessary): Only mobile devices need this. Check
to see for support of window.orientation.
(window.benchmarkController._orientationChanged): Toggle the warning based on whether we match the
landscape query. Set a state variable, which is needed for the debug harness. Call updateStartButtonState.
(window.benchmarkController.updateStartButtonState):
* Animometer/resources/debug-runner/animometer.js: Change _updateStartButtonState to return
a boolean about whether at least one test is selected. That will be used in
benchmarkController.updateStartButtonState(). Move the load event listener to the release version.
(window.benchmarkController.updateStartButtonState): Override the release version, and also check
that at least one test is selected.

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

PerformanceTests/Animometer/developer.html
PerformanceTests/Animometer/index.html
PerformanceTests/Animometer/resources/debug-runner/animometer.css
PerformanceTests/Animometer/resources/debug-runner/animometer.js
PerformanceTests/Animometer/resources/runner/animometer.css
PerformanceTests/Animometer/resources/runner/animometer.js
PerformanceTests/ChangeLog

index 99e7e2e..21513e2 100644 (file)
                     </form>
                 </div>
             </div>
-            <button onclick="benchmarkController.startBenchmark()">Start Test</button>
+            <p>For accurate results, please take the browser window full screen, or rotate the device to landscape orientation.</p>
+            <div class="orientation-check">
+                <p class="hidden">Please rotate the device to orientation before starting.</p>
+                <button id="run-benchmark" onclick="benchmarkController.startBenchmark()">Run benchmark</button>
+            </div>
         </section>
         <section id="test-container">
             <div id="running-test" class="frame-container"></div>
index 18f4dd9..bc33bbb 100644 (file)
         <section id="intro" class="selected">
             <h1>Animometer</h1>
             <p>Animometer is a graphics benchmark that measures a browser’s capability to animate complex scenes at a target frame rate.</p>
-            <button onclick="benchmarkController.startBenchmark()">Run benchmark</button>
+            <p>For accurate results, please take the browser window full screen, or rotate the device to landscape orientation.</p>
+            <div class="orientation-check">
+                <p class="hidden">Please rotate the device to orientation before starting.</p>
+                <button id="run-benchmark" onclick="benchmarkController.startBenchmark()">Run benchmark</button>
+            </div>
         </section>
         <section id="test-container" class="frame-container">
         </section>
index 470cf4a..0d8788b 100644 (file)
@@ -3,10 +3,6 @@ body {
     color: rgb(235, 235, 235);
 }
 
-.hidden {
-    display: none;
-}
-
 h1 {
     margin: 5vh 0;
 }
@@ -140,9 +136,9 @@ label.tree-label {
     font-size: 1.2em;
 }
 
-#intro > div {
+#intro > div:first-of-type {
     width: 100%;
-    margin: 2em 0;
+    margin: 2em 0 0;
     flex-direction: row;
     display: flex;
     align-content: flex-start;
@@ -179,7 +175,7 @@ label.tree-label {
 }
 
 #suites > div {
-    margin-top: 3em;
+    margin: 3em 0;
 }
 
 #drop-target {
@@ -220,6 +216,20 @@ label.tree-label {
     padding: .1em 0;
 }
 
+#intro > p {
+    padding: 0 5px 1em;
+    font-size: 1em;
+}
+
+#intro .orientation-check {
+    padding: 0 0 10vh;
+    margin-top: 0;
+}
+
+#intro .orientation-check p {
+    color: hsl(11, 100%, 66%);
+}
+
 @media screen and (min-device-width: 1800px) {
     #intro {
         min-height: 800px;
@@ -231,7 +241,7 @@ label.tree-label {
         min-height: 100%;
     }
 
-    #intro > div {
+    #intro > div:first-of-type {
         flex-direction: column;
     }
 
index 173bd55..6b07c50 100644 (file)
@@ -242,22 +242,19 @@ window.suitesManager =
         suiteCheckbox.indeterminate = numberEnabledTests > 0 && numberEnabledTests < suiteCheckbox.testsElements.length;
     },
 
-    _updateStartButtonState: function()
+    isAtLeastOneTestSelected: function()
     {
         var suitesElements = this._suitesElements();
-        var startButton = document.querySelector("#intro button");
 
         for (var i = 0; i < suitesElements.length; ++i) {
             var suiteElement = suitesElements[i];
             var suiteCheckbox = this._checkboxElement(suiteElement);
 
-            if (suiteCheckbox.checked) {
-                startButton.disabled = false;
-                return;
-            }
+            if (suiteCheckbox.checked)
+                return true;
         }
 
-        startButton.disabled = true;
+        return false;
     },
 
     _onChangeSuiteCheckbox: function(event)
@@ -267,13 +264,13 @@ window.suitesManager =
             var testCheckbox = this._checkboxElement(testElement);
             testCheckbox.checked = selected;
         }, this);
-        this._updateStartButtonState();
+        benchmarkController.updateStartButtonState();
     },
 
     _onChangeTestCheckbox: function(suiteCheckbox)
     {
         this._updateSuiteCheckboxState(suiteCheckbox);
-        this._updateStartButtonState();
+        benchmarkController.updateStartButtonState();
     },
 
     _createSuiteElement: function(treeElement, suite, id)
@@ -392,7 +389,7 @@ window.suitesManager =
             this._updateSuiteCheckboxState(suiteCheckbox);
         }
 
-        this._updateStartButtonState();
+        benchmarkController.updateStartButtonState();
     },
 
     updateLocalStorageFromUI: function()
@@ -489,6 +486,7 @@ Utilities.extendObject(window.benchmarkController, {
         if (benchmarkController.startBenchmarkImmediatelyIfEncoded())
             return;
 
+        benchmarkController.addOrientationListenerIfNecessary();
         suitesManager.createElements();
         suitesManager.updateUIFromLocalStorage();
         suitesManager.updateEditsElementsState();
@@ -523,6 +521,16 @@ Utilities.extendObject(window.benchmarkController, {
         }, false);
     },
 
+    updateStartButtonState: function()
+    {
+        var startButton = document.getElementById("run-benchmark");
+        if ("isInLandscapeOrientation" in this && !this.isInLandscapeOrientation) {
+            startButton.disabled = true;
+            return;
+        }
+        startButton.disabled = !suitesManager.isAtLeastOneTestSelected();
+    },
+
     onBenchmarkOptionsChanged: function(event)
     {
         if (event.target.name == "controller") {
@@ -593,5 +601,3 @@ Utilities.extendObject(window.benchmarkController, {
         this.updateGraphData(testResult, testData, benchmarkRunnerClient.results.options);
     }
 });
-
-window.addEventListener("load", benchmarkController.initialize);
index c3aadc9..9f1873d 100644 (file)
@@ -46,6 +46,10 @@ h1 {
     flex: 0 1 1em;
 }
 
+.hidden {
+    display: none;
+}
+
 button {
     flex: 0 0 auto;
     display: block;
@@ -68,6 +72,10 @@ button:active {
     background-color: rgba(0, 0, 0, .2);
 }
 
+button:disabled {
+    border-color: rgba(96, 96, 96, .5);
+    color: rgba(96, 96, 96, .5);
+}
 
 @media screen and (min-device-width: 768px) {
     section {
@@ -105,12 +113,29 @@ button:active {
     flex: 1 0 auto;
 }
 
-#intro p {
-    flex: 1 1 auto;
-    padding: 0 0 10vh 0;
+#intro > p {
+    flex: 0 1 auto;
+    padding: .5em 0;
+    margin: 0;
     font-size: 2em;
 }
 
+#intro .orientation-check {
+    padding: 10vh 0;
+    text-align: center;
+}
+
+#intro .orientation-check p {
+    font-size: 1em;
+    color: hsl(11, 72%, 50%);
+    margin-bottom: 1em;
+    -apple-trailing-word: -apple-partially-balanced;
+}
+
+#intro .orientation-check button {
+    margin: 0 auto;
+}
+
 @media screen and (min-device-width: 768px) {
     #intro p {
         max-width: 800px;
index f81a532..b20a1c9 100644 (file)
@@ -355,6 +355,35 @@ window.sectionsManager =
 };
 
 window.benchmarkController = {
+    initialize: function()
+    {
+        benchmarkController.addOrientationListenerIfNecessary();
+    },
+
+    addOrientationListenerIfNecessary: function() {
+        if (!("orientation" in window))
+            return;
+
+        this.orientationQuery = window.matchMedia("(orientation: landscape)");
+        this._orientationChanged(this.orientationQuery);
+        this.orientationQuery.addListener(this._orientationChanged);
+    },
+
+    _orientationChanged: function(match)
+    {
+        benchmarkController.isInLandscapeOrientation = match.matches;
+        if (match.matches)
+            document.querySelector(".orientation-check p").classList.add("hidden");
+        else
+            document.querySelector(".orientation-check p").classList.remove("hidden");
+        benchmarkController.updateStartButtonState();
+    },
+
+    updateStartButtonState: function()
+    {
+        document.getElementById("run-benchmark").disabled = !this.isInLandscapeOrientation;
+    },
+
     _startBenchmark: function(suites, options, frameContainerID)
     {
         benchmarkRunnerClient.initialize(suites, options);
@@ -479,3 +508,5 @@ window.benchmarkController = {
         selection.addRange(range);
     }
 };
+
+window.addEventListener("load", function() { benchmarkController.initialize(); });
index f2740e0..82cc0a4 100644 (file)
@@ -1,3 +1,35 @@
+2016-03-23  Jon Lee  <jonlee@apple.com>
+
+        Make the benchmark require device to be in landscape orientation
+        https://bugs.webkit.org/show_bug.cgi?id=155822
+        rdar://problem/25258650
+
+        Reviewed by Ryosuke Niwa.
+
+        Check that the device is in landscape orientation. If not, disable the button to start it,
+        and show a warning message.
+
+        * Animometer/developer.html: Add a message about how the browser should be set up. Include a
+        warning message that appears if the orientation is incorrect on mobile devices.
+        * Animometer/index.html: Ditto.
+
+        * Animometer/resources/debug-runner/animometer.css: Migrate the .hidden rule into the release
+        stylesheet. Update the style to accommodate the new UI.
+        * Animometer/resources/runner/animometer.css:
+
+        * Animometer/resources/runner/animometer.js:
+        (window.benchmarkController.initialize): Add the orientation listener is needed.
+        (window.benchmarkController.addOrientationListenerIfNecessary): Only mobile devices need this. Check
+        to see for support of window.orientation.
+        (window.benchmarkController._orientationChanged): Toggle the warning based on whether we match the
+        landscape query. Set a state variable, which is needed for the debug harness. Call updateStartButtonState.
+        (window.benchmarkController.updateStartButtonState):
+        * Animometer/resources/debug-runner/animometer.js: Change _updateStartButtonState to return
+        a boolean about whether at least one test is selected. That will be used in
+        benchmarkController.updateStartButtonState(). Move the load event listener to the release version.
+        (window.benchmarkController.updateStartButtonState): Override the release version, and also check
+        that at least one test is selected.
+
 2016-03-22  Geoffrey Garen  <ggaren@apple.com>
 
         MallocBench: consolidate regression testing for aligned allocation