<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[193975] trunk/PerformanceTests</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/193975">193975</a></dd>
<dt>Author</dt> <dd>jonlee@apple.com</dd>
<dt>Date</dt> <dd>2015-12-11 13:47:31 -0800 (Fri, 11 Dec 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkPerformanceTestsAnimometerrunneranimometerhtml">trunk/PerformanceTests/Animometer/runner/animometer.html</a></li>
<li><a href="#trunkPerformanceTestsAnimometerrunnerresourcesanimometercss">trunk/PerformanceTests/Animometer/runner/resources/animometer.css</a></li>
<li><a href="#trunkPerformanceTestsChangeLog">trunk/PerformanceTests/ChangeLog</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkPerformanceTestsAnimometerrunneranimometerhtml"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/runner/animometer.html (193974 => 193975)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,6 +1,7 @@
</span><span class="cx"> <!DOCTYPE html>
</span><span class="cx"> <html>
</span><span class="cx"> <head>
</span><ins>+ <meta name="viewport" content="width=device-width, user-scalable=no">
</ins><span class="cx"> <link rel="stylesheet" href="resources/animometer.css">
</span><span class="cx"> <script src="../resources/strings.js"></script>
</span><span class="cx"> <script src="../resources/sampler.js"></script>
</span><span class="lines">@@ -14,110 +15,110 @@
</span><span class="cx"> <body>
</span><span class="cx"> <main>
</span><span class="cx"> <div class="spacer"></div>
</span><del>- <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">
</del><ins>+
+ <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>
</ins><span class="cx"> <ul>
</span><del>- <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>
</del><ins>+ <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>
</ins><span class="cx"> </ul>
</span><del>- </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>
</del><ins>+ </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>
+
</ins><span class="cx"> <div class="spacer"></div>
</span><span class="cx"> </main>
</span><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkPerformanceTestsAnimometerrunnerresourcesanimometercss"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/Animometer/runner/resources/animometer.css (193974 => 193975)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -59,6 +59,12 @@
</span><span class="cx"> border-color: DarkCyan !important;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+@media screen and (max-device-width: 414px) {
+ button.large-button {
+ margin: 1em 0;
+ }
+}
+
</ins><span class="cx"> /* -------------------------------------------------------------------------- */
</span><span class="cx"> /* Tree */
</span><span class="cx"> /* -------------------------------------------------------------------------- */
</span><span class="lines">@@ -115,7 +121,7 @@
</span><span class="cx"> margin: 0 0 0 -2em;
</span><span class="cx"> width: 1em;
</span><span class="cx"> height: 1em;
</span><del>- content: '\25B6';
</del><ins>+ content: '\25BA';
</ins><span class="cx"> text-align: center;
</span><span class="cx"> line-height: 2.5em;
</span><span class="cx"> font-size: .5em;
</span><span class="lines">@@ -125,6 +131,17 @@
</span><span class="cx"> content: '\25BC';
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+@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;
+ }
+}
+
</ins><span class="cx"> /* -------------------------------------------------------------------------- */
</span><span class="cx"> /* Results Table */
</span><span class="cx"> /* -------------------------------------------------------------------------- */
</span><span class="lines">@@ -215,9 +232,9 @@
</span><span class="cx"> padding: 10px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-section#home {
</del><ins>+#home {
</ins><span class="cx"> min-height: 600px;
</span><del>- height: initial;
</del><ins>+ height: auto;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .display-progress-bar section,
</span><span class="lines">@@ -263,16 +280,48 @@
</span><span class="cx"> height: 800px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- section#home {
</del><ins>+ #home {
</ins><span class="cx"> min-height: 800px;
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+@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;
+ }
+}
+
</ins><span class="cx"> /* -------------------------------------------------------------------------- */
</span><span class="cx"> /* Home Section */
</span><span class="cx"> /* -------------------------------------------------------------------------- */
</span><span class="cx">
</span><del>-section#home {
</del><ins>+#home {
</ins><span class="cx"> -webkit-flex-direction: row;
</span><span class="cx"> -ms-flex-direction: row;
</span><span class="cx"> flex-direction: row;
</span><span class="lines">@@ -284,7 +333,7 @@
</span><span class="cx"> align-content: flex-start;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-section#home h2 {
</del><ins>+#home h2 {
</ins><span class="cx"> font-size: 1.2em;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -307,13 +356,13 @@
</span><span class="cx"> flex: 1 1 auto;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-section#home > header > h1 {
</del><ins>+#home > header > h1 {
</ins><span class="cx"> margin: 0 auto;
</span><span class="cx"> width: 70%;
</span><span class="cx"> text-align: center;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-section#home input[type="number"] {
</del><ins>+#home input[type="number"] {
</ins><span class="cx"> width: 50px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -333,9 +382,6 @@
</span><span class="cx"> padding: 0 0 0 1em;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#suites ul ul li {
-}
-
</del><span class="cx"> #options ul {
</span><span class="cx"> margin: 0;
</span><span class="cx"> padding: 0;
</span><span class="lines">@@ -361,11 +407,24 @@
</span><span class="cx"> padding: .1em 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+@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%;
+ }
+}
+
</ins><span class="cx"> /* -------------------------------------------------------------------------- */
</span><span class="cx"> /* Running Section */
</span><span class="cx"> /* -------------------------------------------------------------------------- */
</span><span class="cx">
</span><del>-section#running {
</del><ins>+#running {
</ins><span class="cx"> position: relative;
</span><span class="cx"> -ms-flex-align: center;
</span><span class="cx"> -webkit-align-items: center;
</span><span class="lines">@@ -376,20 +435,25 @@
</span><span class="cx"> justify-content: center;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-section#running > #running-test {
</del><ins>+#running-test {
</ins><span class="cx"> width: 100%;
</span><span class="cx"> height: 100%;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-section#running > #running-test > iframe {
</del><ins>+#running-test > iframe {
</ins><span class="cx"> width: 800px;
</span><span class="cx"> height: 600px;
</span><span class="cx"> border: 0px none;
</span><span class="cx"> overflow: hidden;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.display-progress-bar section#running > #progress,
-.display-statistics-table section#running > #progress {
</del><ins>+#progress, #record {
+ display: none;
+}
+
+.display-progress-bar #progress,
+.display-statistics-table #progress {
+ display: block;
</ins><span class="cx"> position: absolute;
</span><span class="cx"> bottom: -6px;
</span><span class="cx"> left: 60px;
</span><span class="lines">@@ -400,8 +464,8 @@
</span><span class="cx"> border-right: 6px solid rgb(46, 51, 55);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.display-progress-bar section#running > #progress > #progress-completed,
-.display-statistics-table section#running > #progress > #progress-completed {
</del><ins>+.display-progress-bar #progress-completed,
+.display-statistics-table #progress-completed {
</ins><span class="cx"> position: absolute;
</span><span class="cx"> top: 0;
</span><span class="cx"> left: 0;
</span><span class="lines">@@ -410,7 +474,9 @@
</span><span class="cx"> background-color: rgb(235, 235, 235);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-section#running > #record {
</del><ins>+.display-progress-bar #record,
+.display-statistics-table #record {
+ display: block;
</ins><span class="cx"> position: absolute;
</span><span class="cx"> bottom: -95px;
</span><span class="cx"> left: 0px;
</span><span class="lines">@@ -419,12 +485,26 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @media screen and (min-device-width: 1800px) {
</span><del>- section#running > #running-test > iframe {
</del><ins>+ #running-test > iframe {
</ins><span class="cx"> width: 1600px;
</span><span class="cx"> height: 800px;
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+@media screen and (max-device-width: 414px) {
+ #running {
+ padding: 0;
+ }
+
+ #running-test {
+ overflow: hidden;
+ }
+
+ #running-test > iframe {
+ width: calc(100%);
+ height: calc(100%);
+ }
+}
</ins><span class="cx"> /* -------------------------------------------------------------------------- */
</span><span class="cx"> /* Results Section */
</span><span class="cx"> /* -------------------------------------------------------------------------- */
</span></span></pre></div>
<a id="trunkPerformanceTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/PerformanceTests/ChangeLog (193974 => 193975)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/PerformanceTests/ChangeLog 2015-12-11 21:43:45 UTC (rev 193974)
+++ trunk/PerformanceTests/ChangeLog 2015-12-11 21:47:31 UTC (rev 193975)
</span><span class="lines">@@ -1,3 +1,21 @@
</span><ins>+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.
+
</ins><span class="cx"> 2015-12-07 Jon Lee <jonlee@apple.com>
</span><span class="cx">
</span><span class="cx"> Update suites for benchmark
</span></span></pre>
</div>
</div>
</body>
</html>