Changeset 193975 in webkit


Ignore:
Timestamp:
Dec 11, 2015 1:47:31 PM (8 years ago)
Author:
jonlee@apple.com
Message:

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.

Location:
trunk/PerformanceTests
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/PerformanceTests/Animometer/runner/animometer.html

    r193685 r193975  
    22<html>
    33<head>
     4    <meta name="viewport" content="width=device-width, user-scalable=no">
    45    <link rel="stylesheet" href="resources/animometer.css">
    56    <script src="../resources/strings.js"></script>
     
    1516    <main>
    1617    <div class="spacer"></div>
    17     <div id="section-container">
    18         <section id="home" class="selected">
    19             <header>
    20                 <h1>Animometer</h1>
    21             </header>
    22             <div id="suites">
    23                 <h2>Suites:</h2>
    24                 <ul class="tree"></ul>
    25             </div>
    26             <div id="options">
    27                 <h2>Options:</h2>
    28                 <form name="benchmark-options">
     18
     19    <section id="home" class="selected">
     20        <header>
     21            <h1>Animometer</h1>
     22        </header>
     23        <div id="suites">
     24            <h2>Suites:</h2>
     25            <ul class="tree"></ul>
     26        </div>
     27        <div id="options">
     28            <h2>Options:</h2>
     29            <form name="benchmark-options">
     30            <ul>
     31            <li>
     32                <label>Test length: <input type="number" id="test-interval" value="10"> seconds each</label>
     33            </li>
     34            <li>
     35                <h3>Display:</h3>
    2936                <ul>
    30                 <li>
    31                     <label>Test length: <input type="number" id="test-interval" value="10"> seconds each</label>
    32                 </li>
    33                 <li>
    34                     <h3>Display:</h3>
    35                     <ul>
    36                         <li><label><input name="display" type="radio" value="minimal" checked> Minimal</label></li>
    37                         <li><label><input name="display" type="radio" value="progress-bar" checked> Progress bar</label></li>
    38                         <li><label><input name="display" type="radio" value="statistics-table"> Statistics table</label></li>
    39                     </ul>
    40                 </li>
    41                 <li>
    42                     <h3>Adjusting the test complexity:</h3>
    43                     <ul>
    44                         <li><label><input name="adjustment" type="radio" value="fixed"> Keep constant</label></li>
    45                         <li><label><input name="adjustment" type="radio" value="fixed-after-warmup"> Keep constant after warmup to target FPS</label></li>
    46                         <li><label><input name="adjustment" type="radio" value="adaptive" checked> Maintain target FPS</label></li>
    47                     </ul>
    48                 </li>
    49                 <li>
    50                     <label>Target frame rate: <input type="number" id="frame-rate" value="50"> FPS</label>
    51                 </li>
    52                 <li>
    53                     <label><input type="checkbox" id="estimated-frame-rate" checked> Filter frame rate calculation</label>
    54                 </li>
     37                    <li><label><input name="display" type="radio" value="minimal" checked> Minimal</label></li>
     38                    <li><label><input name="display" type="radio" value="progress-bar" checked> Progress bar</label></li>
     39                    <li><label><input name="display" type="radio" value="statistics-table"> Statistics table</label></li>
    5540                </ul>
    56                 </form>
    57             </div>
    58             <footer>
    59                 <button class="large-button" onclick="benchmarkController.startTest()">Start Test</button>
    60             </footer>
    61         </section>
    62         <section id="running">
    63             <div id="running-test"></div>
    64             <div id="progress">
    65                 <div id="progress-completed"></div>
    66             </div>
    67             <div id="record">
    68                 <table class="results-table"></table>
    69             </div>
    70         </section>
    71         <section id="results">
    72             <header>
    73                 <h1>Results:</h1>
    74             </header>
    75             <data>
    76                 <table class="results-table"></table>
    77             </data>
    78             <footer>
    79                 <button class="large-button" onclick="benchmarkController.selectResults()">Select</button>
    80                 <button class="large-button" onclick="benchmarkController.showJSON()">JSON</button>
    81                 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
    82             </footer>
    83         </section> 
    84         <section id="json">
    85             <header>
    86                 <h1>JSON:</h1>
    87             </header>
    88             <data>
    89                 <div class="results-json" contentEditable="true"></div>
    90             </data>
    91             <footer>
    92                 <button class="large-button" onclick="benchmarkController.selectJSON('json')">Select</button>
    93                 <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
    94                 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
    95             </footer>
    96         </section> 
    97         <section id="test-json">
    98             <header>
    99                 <h1>JSON:</h1>
    100             </header>
    101             <data>
    102                 <div class="results-json" contentEditable="true"></div>
    103             </data>
    104             <footer>
    105                 <button class="large-button" onclick="benchmarkController.selectJSON('test-json')">Select</button>
    106                 <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
    107                 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>       
    108             </footer>
    109         </section>
    110         <section id="test-graph">
    111             <header>
    112                 <h1>Graph:</h1>
    113             </header>
    114             <data></data>
    115             <footer>
    116                 <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
    117                 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>       
    118             </footer>
    119         </section> 
    120     </div>
     41            </li>
     42            <li>
     43                <h3>Adjusting the test complexity:</h3>
     44                <ul>
     45                    <li><label><input name="adjustment" type="radio" value="fixed"> Keep constant</label></li>
     46                    <li><label><input name="adjustment" type="radio" value="fixed-after-warmup"> Keep constant after warmup to target FPS</label></li>
     47                    <li><label><input name="adjustment" type="radio" value="adaptive" checked> Maintain target FPS</label></li>
     48                </ul>
     49            </li>
     50            <li>
     51                <label>Target frame rate: <input type="number" id="frame-rate" value="50"> FPS</label>
     52            </li>
     53            <li>
     54                <label><input type="checkbox" id="estimated-frame-rate" checked> Filter frame rate calculation</label>
     55            </li>
     56            </ul>
     57            </form>
     58        </div>
     59        <footer>
     60            <button class="large-button" onclick="benchmarkController.startTest()">Start Test</button>
     61        </footer>
     62    </section>
     63    <section id="running">
     64        <div id="running-test"></div>
     65        <div id="progress">
     66            <div id="progress-completed"></div>
     67        </div>
     68        <div id="record">
     69            <table class="results-table"></table>
     70        </div>
     71    </section>
     72    <section id="results">
     73        <header>
     74            <h1>Results:</h1>
     75        </header>
     76        <data>
     77            <table class="results-table"></table>
     78        </data>
     79        <footer>
     80            <button class="large-button" onclick="benchmarkController.selectResults()">Select</button>
     81            <button class="large-button" onclick="benchmarkController.showJSON()">JSON</button>
     82            <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
     83        </footer>
     84    </section>
     85    <section id="json">
     86        <header>
     87            <h1>JSON:</h1>
     88        </header>
     89        <data>
     90            <div class="results-json" contentEditable="true"></div>
     91        </data>
     92        <footer>
     93            <button class="large-button" onclick="benchmarkController.selectJSON('json')">Select</button>
     94            <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
     95            <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
     96        </footer>
     97    </section>
     98    <section id="test-json">
     99        <header>
     100            <h1>JSON:</h1>
     101        </header>
     102        <data>
     103            <div class="results-json" contentEditable="true"></div>
     104        </data>
     105        <footer>
     106            <button class="large-button" onclick="benchmarkController.selectJSON('test-json')">Select</button>
     107            <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
     108            <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
     109        </footer>
     110    </section>
     111    <section id="test-graph">
     112        <header>
     113            <h1>Graph:</h1>
     114        </header>
     115        <data></data>
     116        <footer>
     117            <button class="large-button" onclick="benchmarkController.showResults()">Results</button>
     118            <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>
     119        </footer>
     120    </section>
     121
    121122    <div class="spacer"></div>
    122123    </main>
  • trunk/PerformanceTests/Animometer/runner/resources/animometer.css

    r193685 r193975  
    6060}
    6161
     62@media screen and (max-device-width: 414px) {
     63    button.large-button {
     64        margin: 1em 0;
     65    }
     66}
     67
    6268/* -------------------------------------------------------------------------- */
    6369/*                               Tree                                         */
     
    116122    width: 1em;
    117123    height: 1em;
    118     content: '\25B6';
     124    content: '\25BA';
    119125    text-align: center;
    120126    line-height: 2.5em;
     
    124130.tree > li > :checked ~ label.tree-label:before {
    125131    content: '\25BC';
     132}
     133
     134@media screen and (max-device-width: 414px) {
     135    .tree {
     136        padding-left: 1em;
     137    }
     138    .tree > li > label.tree-label:before {
     139        font-size: 1em;
     140        margin-left: -1.75em;
     141        line-height: 1em;
     142    }
    126143}
    127144
     
    216233}
    217234
    218 section#home {
     235#home {
    219236    min-height: 600px;
    220     height: initial;
     237    height: auto;
    221238}
    222239
     
    264281    }
    265282
    266     section#home {
     283    #home {
    267284        min-height: 800px;
    268285    }
    269286}
    270287
     288@media screen and (max-device-width: 414px) {
     289    .spacer {
     290        -webkit-flex: 0 0 0;
     291        -ms-flex: 0 0 0;
     292        flex: 0 0 0;
     293    }
     294
     295    section {
     296        box-sizing: border-box;
     297        width: 100%;
     298        height: 100%;
     299        align-self: stretch;
     300        padding: 0 5px;
     301    }
     302
     303    #home {
     304        min-height: 100%;
     305    }
     306
     307    .display-progress-bar section,
     308    .display-statistics-table section {
     309        border: 0;
     310    }
     311
     312    section > footer {
     313        -webkit-flex-direction: column;
     314        -ms-flex-direction: column;
     315        flex-direction: column;
     316        max-height: initial;
     317    }
     318}
     319
    271320/* -------------------------------------------------------------------------- */
    272321/*                                 Home Section                               */
    273322/* -------------------------------------------------------------------------- */
    274323
    275 section#home {
     324#home {
    276325    -webkit-flex-direction: row;
    277326    -ms-flex-direction: row;
     
    285334}
    286335
    287 section#home h2 {
     336#home h2 {
    288337    font-size: 1.2em;
    289338}
     
    308357}
    309358
    310 section#home > header > h1 {
     359#home > header > h1 {
    311360    margin: 0 auto;
    312361    width: 70%;
     
    314363}
    315364
    316 section#home input[type="number"] {
     365#home input[type="number"] {
    317366    width: 50px;
    318367}
     
    332381    margin: 0;
    333382    padding: 0 0 0 1em;
    334 }
    335 
    336 #suites ul ul li {
    337383}
    338384
     
    362408}
    363409
     410@media screen and (max-device-width: 414px) {
     411    #suites,
     412    #options {
     413        padding: 0 5px;
     414        margin: 0;
     415    }
     416    #suites {
     417        -webkit-flex: 0 1 100%;
     418        -ms-flex: 0 1 100%;
     419        flex: 0 1 100%;
     420    }
     421}
     422
    364423/* -------------------------------------------------------------------------- */
    365424/*                           Running Section                                  */
    366425/* -------------------------------------------------------------------------- */
    367426
    368 section#running {
     427#running {
    369428    position: relative;
    370429    -ms-flex-align: center;
     
    377436}
    378437
    379 section#running > #running-test {
     438#running-test {
    380439    width: 100%;
    381440    height: 100%;
    382441}
    383442
    384 section#running > #running-test > iframe {
     443#running-test > iframe {
    385444    width: 800px;
    386445    height: 600px;
     
    389448}
    390449
    391 .display-progress-bar section#running > #progress,
    392 .display-statistics-table section#running > #progress {
     450#progress, #record {
     451    display: none;
     452}
     453
     454.display-progress-bar #progress,
     455.display-statistics-table #progress {
     456    display: block;
    393457    position: absolute;
    394458    bottom: -6px;
     
    401465}
    402466
    403 .display-progress-bar section#running > #progress > #progress-completed,
    404 .display-statistics-table section#running > #progress > #progress-completed {
     467.display-progress-bar #progress-completed,
     468.display-statistics-table #progress-completed {
    405469    position: absolute;
    406470    top: 0;
     
    411475}
    412476
    413 section#running > #record {
     477.display-progress-bar #record,
     478.display-statistics-table #record {
     479    display: block;
    414480    position: absolute;
    415481    bottom: -95px;
     
    420486
    421487@media screen and (min-device-width: 1800px) {
    422     section#running > #running-test > iframe {
     488    #running-test > iframe {
    423489        width: 1600px;
    424490        height: 800px;
     
    426492}
    427493
     494@media screen and (max-device-width: 414px) {
     495    #running {
     496        padding: 0;
     497    }
     498
     499    #running-test {
     500        overflow: hidden;
     501    }
     502
     503    #running-test > iframe {
     504        width: calc(100%);
     505        height: calc(100%);
     506    }
     507}
    428508/* -------------------------------------------------------------------------- */
    429509/*                           Results Section                                  */
  • trunk/PerformanceTests/ChangeLog

    r193685 r193975  
     12015-12-11  Jon Lee  <jonlee@apple.com>
     2
     3        Improve Animometer on iOS
     4        https://bugs.webkit.org/show_bug.cgi?id=152180
     5
     6        Reviewed by Simon Fraser.
     7
     8        Improve experience on phones. Make the canvas take
     9        up the whole screen.
     10
     11        * Animometer/runner/animometer.html: Add meta viewport.
     12        Remove the container div.
     13        * Animometer/runner/resources/animometer.css: Have buttons lay
     14        out vertically. Update detail arrow glyph. Make the suites and
     15        options section lay out vertically. Remove the top spacers since
     16        we want the canvas to take over the whole screen. Minimal display
     17        is recommended for use.
     18
    1192015-12-07  Jon Lee  <jonlee@apple.com>
    220
Note: See TracChangeset for help on using the changeset viewer.