- Revision
- 198610
- Author
- [email protected]
- Date
- 2016-03-23 19:08:13 -0700 (Wed, 23 Mar 2016)
Log Message
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.
Modified Paths
Diff
Modified: trunk/PerformanceTests/Animometer/developer.html (198609 => 198610)
--- trunk/PerformanceTests/Animometer/developer.html 2016-03-24 00:43:39 UTC (rev 198609)
+++ trunk/PerformanceTests/Animometer/developer.html 2016-03-24 02:08:13 UTC (rev 198610)
@@ -75,7 +75,11 @@
</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>
Modified: trunk/PerformanceTests/Animometer/index.html (198609 => 198610)
--- trunk/PerformanceTests/Animometer/index.html 2016-03-24 00:43:39 UTC (rev 198609)
+++ trunk/PerformanceTests/Animometer/index.html 2016-03-24 02:08:13 UTC (rev 198610)
@@ -20,7 +20,11 @@
<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>
Modified: trunk/PerformanceTests/Animometer/resources/debug-runner/animometer.css (198609 => 198610)
--- trunk/PerformanceTests/Animometer/resources/debug-runner/animometer.css 2016-03-24 00:43:39 UTC (rev 198609)
+++ trunk/PerformanceTests/Animometer/resources/debug-runner/animometer.css 2016-03-24 02:08:13 UTC (rev 198610)
@@ -3,10 +3,6 @@
color: rgb(235, 235, 235);
}
-.hidden {
- display: none;
-}
-
h1 {
margin: 5vh 0;
}
@@ -140,9 +136,9 @@
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 @@
}
#suites > div {
- margin-top: 3em;
+ margin: 3em 0;
}
#drop-target {
@@ -220,6 +216,20 @@
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 @@
min-height: 100%;
}
- #intro > div {
+ #intro > div:first-of-type {
flex-direction: column;
}
Modified: trunk/PerformanceTests/Animometer/resources/debug-runner/animometer.js (198609 => 198610)
--- trunk/PerformanceTests/Animometer/resources/debug-runner/animometer.js 2016-03-24 00:43:39 UTC (rev 198609)
+++ trunk/PerformanceTests/Animometer/resources/debug-runner/animometer.js 2016-03-24 02:08:13 UTC (rev 198610)
@@ -242,22 +242,19 @@
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 @@
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 @@
this._updateSuiteCheckboxState(suiteCheckbox);
}
- this._updateStartButtonState();
+ benchmarkController.updateStartButtonState();
},
updateLocalStorageFromUI: function()
@@ -489,6 +486,7 @@
if (benchmarkController.startBenchmarkImmediatelyIfEncoded())
return;
+ benchmarkController.addOrientationListenerIfNecessary();
suitesManager.createElements();
suitesManager.updateUIFromLocalStorage();
suitesManager.updateEditsElementsState();
@@ -523,6 +521,16 @@
}, 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 @@
this.updateGraphData(testResult, testData, benchmarkRunnerClient.results.options);
}
});
-
-window.addEventListener("load", benchmarkController.initialize);
Modified: trunk/PerformanceTests/Animometer/resources/runner/animometer.css (198609 => 198610)
--- trunk/PerformanceTests/Animometer/resources/runner/animometer.css 2016-03-24 00:43:39 UTC (rev 198609)
+++ trunk/PerformanceTests/Animometer/resources/runner/animometer.css 2016-03-24 02:08:13 UTC (rev 198610)
@@ -46,6 +46,10 @@
flex: 0 1 1em;
}
+.hidden {
+ display: none;
+}
+
button {
flex: 0 0 auto;
display: block;
@@ -68,6 +72,10 @@
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 @@
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;
Modified: trunk/PerformanceTests/Animometer/resources/runner/animometer.js (198609 => 198610)
--- trunk/PerformanceTests/Animometer/resources/runner/animometer.js 2016-03-24 00:43:39 UTC (rev 198609)
+++ trunk/PerformanceTests/Animometer/resources/runner/animometer.js 2016-03-24 02:08:13 UTC (rev 198610)
@@ -355,6 +355,35 @@
};
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 @@
selection.addRange(range);
}
};
+
+window.addEventListener("load", function() { benchmarkController.initialize(); });
Modified: trunk/PerformanceTests/ChangeLog (198609 => 198610)
--- trunk/PerformanceTests/ChangeLog 2016-03-24 00:43:39 UTC (rev 198609)
+++ trunk/PerformanceTests/ChangeLog 2016-03-24 02:08:13 UTC (rev 198610)
@@ -1,3 +1,35 @@
+2016-03-23 Jon Lee <[email protected]>
+
+ 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 <[email protected]>
MallocBench: consolidate regression testing for aligned allocation
