Modified: trunk/PerformanceTests/Animometer/runner/animometer.html (193974 => 193975)
--- trunk/PerformanceTests/Animometer/runner/animometer.html 2015-12-11 21:43:45 UTC (rev 193974)
+++ trunk/PerformanceTests/Animometer/runner/animometer.html 2015-12-11 21:47:31 UTC (rev 193975)
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
+ <meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href=""
<script src=""
<script src=""
@@ -14,110 +15,110 @@
<body>
<main>
<div class="spacer"></div>
- <div id="section-container">
- <section id="home" class="selected">
- <header>
- <h1>Animometer</h1>
- </header>
- <div id="suites">
- <h2>Suites:</h2>
- <ul class="tree"></ul>
- </div>
- <div id="options">
- <h2>Options:</h2>
- <form name="benchmark-options">
+
+ <section id="home" class="selected">
+ <header>
+ <h1>Animometer</h1>
+ </header>
+ <div id="suites">
+ <h2>Suites:</h2>
+ <ul class="tree"></ul>
+ </div>
+ <div id="options">
+ <h2>Options:</h2>
+ <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>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" checked> 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>
+ <li><label><input name="display" type="radio" value="minimal" checked> Minimal</label></li>
+ <li><label><input name="display" type="radio" value="progress-bar" checked> Progress bar</label></li>
+ <li><label><input name="display" type="radio" value="statistics-table"> Statistics table</label></li>
</ul>
- </form>
- </div>
- <footer>
- <button class="large-button" _onclick_="benchmarkController.startTest()">Start Test</button>
- </footer>
- </section>
- <section id="running">
- <div id="running-test"></div>
- <div id="progress">
- <div id="progress-completed"></div>
- </div>
- <div id="record">
- <table class="results-table"></table>
- </div>
- </section>
- <section id="results">
- <header>
- <h1>Results:</h1>
- </header>
- <data>
- <table class="results-table"></table>
- </data>
- <footer>
- <button class="large-button" _onclick_="benchmarkController.selectResults()">Select</button>
- <button class="large-button" _onclick_="benchmarkController.showJSON()">JSON</button>
- <button class="large-button" _onclick_="benchmarkController.startTest()">Test Again</button>
- </footer>
- </section>
- <section id="json">
- <header>
- <h1>JSON:</h1>
- </header>
- <data>
- <div class="results-json" contentEditable="true"></div>
- </data>
- <footer>
- <button class="large-button" _onclick_="benchmarkController.selectJSON('json')">Select</button>
- <button class="large-button" _onclick_="benchmarkController.showResults()">Results</button>
- <button class="large-button" _onclick_="benchmarkController.startTest()">Test Again</button>
- </footer>
- </section>
- <section id="test-json">
- <header>
- <h1>JSON:</h1>
- </header>
- <data>
- <div class="results-json" contentEditable="true"></div>
- </data>
- <footer>
- <button class="large-button" _onclick_="benchmarkController.selectJSON('test-json')">Select</button>
- <button class="large-button" _onclick_="benchmarkController.showResults()">Results</button>
- <button class="large-button" _onclick_="benchmarkController.startTest()">Test Again</button>
- </footer>
- </section>
- <section id="test-graph">
- <header>
- <h1>Graph:</h1>
- </header>
- <data></data>
- <footer>
- <button class="large-button" _onclick_="benchmarkController.showResults()">Results</button>
- <button class="large-button" _onclick_="benchmarkController.startTest()">Test Again</button>
- </footer>
- </section>
- </div>
+ </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>
+ </section>
+ <section id="running">
+ <div id="running-test"></div>
+ <div id="progress">
+ <div id="progress-completed"></div>
+ </div>
+ <div id="record">
+ <table class="results-table"></table>
+ </div>
+ </section>
+ <section id="results">
+ <header>
+ <h1>Results:</h1>
+ </header>
+ <data>
+ <table class="results-table"></table>
+ </data>
+ <footer>
+ <button class="large-button" _onclick_="benchmarkController.selectResults()">Select</button>
+ <button class="large-button" _onclick_="benchmarkController.showJSON()">JSON</button>
+ <button class="large-button" _onclick_="benchmarkController.startTest()">Test Again</button>
+ </footer>
+ </section>
+ <section id="json">
+ <header>
+ <h1>JSON:</h1>
+ </header>
+ <data>
+ <div class="results-json" contentEditable="true"></div>
+ </data>
+ <footer>
+ <button class="large-button" _onclick_="benchmarkController.selectJSON('json')">Select</button>
+ <button class="large-button" _onclick_="benchmarkController.showResults()">Results</button>
+ <button class="large-button" _onclick_="benchmarkController.startTest()">Test Again</button>
+ </footer>
+ </section>
+ <section id="test-json">
+ <header>
+ <h1>JSON:</h1>
+ </header>
+ <data>
+ <div class="results-json" contentEditable="true"></div>
+ </data>
+ <footer>
+ <button class="large-button" _onclick_="benchmarkController.selectJSON('test-json')">Select</button>
+ <button class="large-button" _onclick_="benchmarkController.showResults()">Results</button>
+ <button class="large-button" _onclick_="benchmarkController.startTest()">Test Again</button>
+ </footer>
+ </section>
+ <section id="test-graph">
+ <header>
+ <h1>Graph:</h1>
+ </header>
+ <data></data>
+ <footer>
+ <button class="large-button" _onclick_="benchmarkController.showResults()">Results</button>
+ <button class="large-button" _onclick_="benchmarkController.startTest()">Test Again</button>
+ </footer>
+ </section>
+
<div class="spacer"></div>
</main>
</body>
Modified: trunk/PerformanceTests/Animometer/runner/resources/animometer.css (193974 => 193975)
--- trunk/PerformanceTests/Animometer/runner/resources/animometer.css 2015-12-11 21:43:45 UTC (rev 193974)
+++ trunk/PerformanceTests/Animometer/runner/resources/animometer.css 2015-12-11 21:47:31 UTC (rev 193975)
@@ -59,6 +59,12 @@
border-color: DarkCyan !important;
}
+@media screen and (max-device-width: 414px) {
+ button.large-button {
+ margin: 1em 0;
+ }
+}
+
/* -------------------------------------------------------------------------- */
/* Tree */
/* -------------------------------------------------------------------------- */
@@ -115,7 +121,7 @@
margin: 0 0 0 -2em;
width: 1em;
height: 1em;
- content: '\25B6';
+ content: '\25BA';
text-align: center;
line-height: 2.5em;
font-size: .5em;
@@ -125,6 +131,17 @@
content: '\25BC';
}
+@media screen and (max-device-width: 414px) {
+ .tree {
+ padding-left: 1em;
+ }
+ .tree > li > label.tree-label:before {
+ font-size: 1em;
+ margin-left: -1.75em;
+ line-height: 1em;
+ }
+}
+
/* -------------------------------------------------------------------------- */
/* Results Table */
/* -------------------------------------------------------------------------- */
@@ -215,9 +232,9 @@
padding: 10px;
}
-section#home {
+#home {
min-height: 600px;
- height: initial;
+ height: auto;
}
.display-progress-bar section,
@@ -263,16 +280,48 @@
height: 800px;
}
- section#home {
+ #home {
min-height: 800px;
}
}
+@media screen and (max-device-width: 414px) {
+ .spacer {
+ -webkit-flex: 0 0 0;
+ -ms-flex: 0 0 0;
+ flex: 0 0 0;
+ }
+
+ section {
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ align-self: stretch;
+ padding: 0 5px;
+ }
+
+ #home {
+ min-height: 100%;
+ }
+
+ .display-progress-bar section,
+ .display-statistics-table section {
+ border: 0;
+ }
+
+ section > footer {
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ max-height: initial;
+ }
+}
+
/* -------------------------------------------------------------------------- */
/* Home Section */
/* -------------------------------------------------------------------------- */
-section#home {
+#home {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
@@ -284,7 +333,7 @@
align-content: flex-start;
}
-section#home h2 {
+#home h2 {
font-size: 1.2em;
}
@@ -307,13 +356,13 @@
flex: 1 1 auto;
}
-section#home > header > h1 {
+#home > header > h1 {
margin: 0 auto;
width: 70%;
text-align: center;
}
-section#home input[type="number"] {
+#home input[type="number"] {
width: 50px;
}
@@ -333,9 +382,6 @@
padding: 0 0 0 1em;
}
-#suites ul ul li {
-}
-
#options ul {
margin: 0;
padding: 0;
@@ -361,11 +407,24 @@
padding: .1em 0;
}
+@media screen and (max-device-width: 414px) {
+ #suites,
+ #options {
+ padding: 0 5px;
+ margin: 0;
+ }
+ #suites {
+ -webkit-flex: 0 1 100%;
+ -ms-flex: 0 1 100%;
+ flex: 0 1 100%;
+ }
+}
+
/* -------------------------------------------------------------------------- */
/* Running Section */
/* -------------------------------------------------------------------------- */
-section#running {
+#running {
position: relative;
-ms-flex-align: center;
-webkit-align-items: center;
@@ -376,20 +435,25 @@
justify-content: center;
}
-section#running > #running-test {
+#running-test {
width: 100%;
height: 100%;
}
-section#running > #running-test > iframe {
+#running-test > iframe {
width: 800px;
height: 600px;
border: 0px none;
overflow: hidden;
}
-.display-progress-bar section#running > #progress,
-.display-statistics-table section#running > #progress {
+#progress, #record {
+ display: none;
+}
+
+.display-progress-bar #progress,
+.display-statistics-table #progress {
+ display: block;
position: absolute;
bottom: -6px;
left: 60px;
@@ -400,8 +464,8 @@
border-right: 6px solid rgb(46, 51, 55);
}
-.display-progress-bar section#running > #progress > #progress-completed,
-.display-statistics-table section#running > #progress > #progress-completed {
+.display-progress-bar #progress-completed,
+.display-statistics-table #progress-completed {
position: absolute;
top: 0;
left: 0;
@@ -410,7 +474,9 @@
background-color: rgb(235, 235, 235);
}
-section#running > #record {
+.display-progress-bar #record,
+.display-statistics-table #record {
+ display: block;
position: absolute;
bottom: -95px;
left: 0px;
@@ -419,12 +485,26 @@
}
@media screen and (min-device-width: 1800px) {
- section#running > #running-test > iframe {
+ #running-test > iframe {
width: 1600px;
height: 800px;
}
}
+@media screen and (max-device-width: 414px) {
+ #running {
+ padding: 0;
+ }
+
+ #running-test {
+ overflow: hidden;
+ }
+
+ #running-test > iframe {
+ width: calc(100%);
+ height: calc(100%);
+ }
+}
/* -------------------------------------------------------------------------- */
/* Results Section */
/* -------------------------------------------------------------------------- */
Modified: trunk/PerformanceTests/ChangeLog (193974 => 193975)
--- trunk/PerformanceTests/ChangeLog 2015-12-11 21:43:45 UTC (rev 193974)
+++ trunk/PerformanceTests/ChangeLog 2015-12-11 21:47:31 UTC (rev 193975)
@@ -1,3 +1,21 @@
+2015-12-11 Jon Lee <[email protected]>
+
+ Improve Animometer on iOS
+ https://bugs.webkit.org/show_bug.cgi?id=152180
+
+ Reviewed by Simon Fraser.
+
+ Improve experience on phones. Make the canvas take
+ up the whole screen.
+
+ * Animometer/runner/animometer.html: Add meta viewport.
+ Remove the container div.
+ * Animometer/runner/resources/animometer.css: Have buttons lay
+ out vertically. Update detail arrow glyph. Make the suites and
+ options section lay out vertically. Remove the top spacers since
+ we want the canvas to take over the whole screen. Minimal display
+ is recommended for use.
+
2015-12-07 Jon Lee <[email protected]>
Update suites for benchmark
