Improve Animometer on iOS
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 11 Dec 2015 21:47:31 +0000 (21:47 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 11 Dec 2015 21:47:31 +0000 (21:47 +0000)
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.

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

PerformanceTests/Animometer/runner/animometer.html
PerformanceTests/Animometer/runner/resources/animometer.css
PerformanceTests/ChangeLog

index 808616b..b66e63b 100644 (file)
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <meta name="viewport" content="width=device-width, user-scalable=no">
     <link rel="stylesheet" href="resources/animometer.css">
     <script src="../resources/strings.js"></script>
     <script src="../resources/sampler.js"></script>
 <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>
index 5bd8f41..94b76b8 100644 (file)
@@ -59,6 +59,12 @@ button.small-button:active {
     border-color: DarkCyan !important;
 }
 
+@media screen and (max-device-width: 414px) {
+    button.large-button {
+        margin: 1em 0;
+    }
+}
+
 /* -------------------------------------------------------------------------- */
 /*                               Tree                                         */
 /* -------------------------------------------------------------------------- */
@@ -115,7 +121,7 @@ label.tree-label {
     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 @@ label.tree-label {
     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 @@ section {
     padding: 10px;
 }
 
-section#home {
+#home {
     min-height: 600px;
-    height: initial;
+    height: auto;
 }
 
 .display-progress-bar section,
@@ -263,16 +280,48 @@ section > footer {
         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 @@ section#home {
     align-content: flex-start;
 }
 
-section#home h2 {
+#home h2 {
     font-size: 1.2em;
 }
 
@@ -307,13 +356,13 @@ section#home h2 {
     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 @@ section#home input[type="number"] {
     padding: 0 0 0 1em;
 }
 
-#suites ul ul li {
-}
-
 #options ul {
     margin: 0;
     padding: 0;
@@ -361,11 +407,24 @@ section#home input[type="number"] {
     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 @@ section#running {
     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 @@ section#running > #running-test > iframe {
     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 @@ section#running > #running-test > iframe {
     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 @@ section#running > #record {
 }
 
 @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                                  */
 /* -------------------------------------------------------------------------- */
index 495c292..fa97bf2 100644 (file)
@@ -1,3 +1,21 @@
+2015-12-11  Jon Lee  <jonlee@apple.com>
+
+        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  <jonlee@apple.com>
 
         Update suites for benchmark