Update suites for benchmark
authorjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 8 Dec 2015 03:23:42 +0000 (03:23 +0000)
committerjonlee@apple.com <jonlee@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 8 Dec 2015 03:23:42 +0000 (03:23 +0000)
https://bugs.webkit.org/show_bug.cgi?id=151957

Reviewed by Simon Fraser.

* Animometer/runner/animometer.html: Use spacers instead of relying on
justify-content center to center the content. That allows the opening screen
to grow downward when expanding the list of choices, otherwise it expands
from the center, and off the top edge of the screen.
* Animometer/runner/resources/animometer.css:
(.tree): Don't overflow scroll.
(.tree > li > label.tree-label:before): Use better glyphs.
(.tree > li > :checked ~ label.tree-label:before):
(main): Using flex-start for justify-content so that if the section grows too
big it gets pinned to the top edge of the document instead of growing past it.
(.spacer): Make the spacers have a minimum 20px and grow evenly.
(section#home): Add a min-height so that the border will expand if the suite
tests shown make the section grow past the height.
* Animometer/runner/resources/animometer.js: Update the selectors.
(window.suitesManager._treeElement):
(window.suitesManager._suitesElements):
(window.suitesManager._editsElements):

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

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

index 089986d..808616b 100644 (file)
 </head>
 <body>
     <main>
+    <div class="spacer"></div>
+    <div id="section-container">
         <section id="home" class="selected">
             <header>
                 <h1>Animometer</h1>
             </header>
-            <suites>
+            <div id="suites">
                 <h2>Suites:</h2>
                 <ul class="tree"></ul>
-            </suites>
+            </div>
             <div id="options">
                 <h2>Options:</h2>
                 <form name="benchmark-options">
@@ -32,7 +34,7 @@
                     <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"> Progress bar</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>
                 <button class="large-button" onclick="benchmarkController.startTest()">Test Again</button>        
             </footer>
         </section>  
+    </div>
+    <div class="spacer"></div>
     </main>
 </body>
 </html>
index ee07e9a..5bd8f41 100644 (file)
@@ -1,7 +1,6 @@
 /* -------------------------------------------------------------------------- */
 /*                                HTML and Body                               */
 /* -------------------------------------------------------------------------- */
-
 html,body {
     height: 100%;
     margin: 0px;
@@ -65,9 +64,8 @@ button.small-button:active {
 /* -------------------------------------------------------------------------- */
 
 .tree {
-    margin: 1em;
-    overflow-y: scroll;
-    height: 80%;
+    padding: 0;
+    list-style-type: none;
 }
 
 .tree .expand-button {
@@ -110,23 +108,21 @@ label.tree-label {
     cursor: pointer;
 }
 
-label.tree-label:before {
-    background: black;
-    color: white;
+.tree > li > label.tree-label:before {
     position: relative;
     z-index: 1;
     float: left;
-    margin: 0 1em 0 -2.1em;
+    margin: 0 0 0 -2em;
     width: 1em;
     height: 1em;
-    border-radius: 1em;
-    content: '+';
+    content: '\25B6';
     text-align: center;
-    line-height: .9em;
+    line-height: 2.5em;
+    font-size: .5em;
 }
 
-:checked ~ label.tree-label:before {
-    content: '\2013';
+.tree > li > :checked ~ label.tree-label:before {
+    content: '\25BC';
 }
 
 /* -------------------------------------------------------------------------- */
@@ -191,13 +187,25 @@ main {
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
+
     -ms-flex-align: center;
     -webkit-align-items: center;
     -webkit-box-align: center;
     align-items: center;
-    -webkit-justify-content: center;
-    -ms-flex-pack: center;
-    justify-content: center;
+
+    -webkit-justify-content: flex-start;
+    -ms-flex-pack: flex-start;
+    justify-content: flex-start;
+
+    -webkit-flex-flow: column;
+    flex-flow: column;
+}
+
+.spacer {
+    -webkit-flex: 1 0 20px;
+    -ms-flex: 1 0 20px;
+    flex: 1 0 20px;
+    width: 10px;
 }
 
 section {
@@ -207,6 +215,11 @@ section {
     padding: 10px;
 }
 
+section#home {
+    min-height: 600px;
+    height: initial;
+}
+
 .display-progress-bar section,
 .display-statistics-table section {
     border: 6px solid rgb(235, 235, 235);
@@ -249,6 +262,10 @@ section > footer {
         width: 1600px;
         height: 800px;
     }
+
+    section#home {
+        min-height: 800px;
+    }
 }
 
 /* -------------------------------------------------------------------------- */
@@ -264,21 +281,21 @@ section#home {
     flex-wrap: wrap;
     -webkit-align-content: center;
     -ms-flex-line-pack: center;
-    align-content: center;
+    align-content: flex-start;
 }
 
 section#home h2 {
     font-size: 1.2em;
 }
 
-section#home > suites,
+#suites,
 #options {
     padding: 10px;
     margin: 10px;
 }
 
-section#home > suites {
-    padding-left: 80px;
+#suites {
+    padding-left: 40px;
     -webkit-flex: 0 1 40%;
     -ms-flex: 0 1 40%;
     flex: 0 1 40%;
@@ -297,16 +314,26 @@ section#home > header > h1 {
 }
 
 section#home input[type="number"] {
-    width: 70px;
+    width: 50px;
 }
  
-section#home > suites input[type="number"] {
+#suites input[type="number"] {
     display: none;
     float: right;
 }
 
-section#home > suites input[type="number"].selected {
+#suites input[type="number"].selected {
     display: inline;
+    margin: 0;
+}
+
+#suites ul ul {
+    font-size: .8em;
+    margin: 0;
+    padding: 0 0 0 1em;
+}
+
+#suites ul ul li {
 }
 
 #options ul {
index cc768f9..1dc4510 100644 (file)
@@ -199,12 +199,12 @@ window.suitesManager =
 {
     _treeElement: function()
     {
-        return document.querySelector("suites > .tree");
+        return document.querySelector("#suites > .tree");
     },
     
     _suitesElements: function()
     {
-        return document.querySelectorAll("#home > suites > ul > li");
+        return document.querySelectorAll("#suites > ul > li");
     },
     
     _checkboxElement: function(element)
@@ -219,7 +219,7 @@ window.suitesManager =
 
     _editsElements: function()
     {
-        return document.querySelectorAll("section#home > suites input[type='number']");
+        return document.querySelectorAll("#suites input[type='number']");
     },
         
     _localStorageNameForTest: function(suiteName, testName)
@@ -292,7 +292,7 @@ window.suitesManager =
     _createTestElement: function(listElement, test, suiteCheckbox)
     {
         var testElement = DocumentExtension.createElement("li", {}, listElement);
-        var span = DocumentExtension.createElement("span", { class: "tree-label" }, testElement);
+        var span = DocumentExtension.createElement("label", { class: "tree-label" }, testElement);
 
         var testCheckbox = DocumentExtension.createElement("input", { type: "checkbox" }, span);
         testCheckbox.test = test;
index a40c98d..495c292 100644 (file)
@@ -1,5 +1,30 @@
 2015-12-07  Jon Lee  <jonlee@apple.com>
 
+        Update suites for benchmark
+        https://bugs.webkit.org/show_bug.cgi?id=151957
+
+        Reviewed by Simon Fraser.
+
+        * Animometer/runner/animometer.html: Use spacers instead of relying on
+        justify-content center to center the content. That allows the opening screen
+        to grow downward when expanding the list of choices, otherwise it expands
+        from the center, and off the top edge of the screen.
+        * Animometer/runner/resources/animometer.css:
+        (.tree): Don't overflow scroll.
+        (.tree > li > label.tree-label:before): Use better glyphs.
+        (.tree > li > :checked ~ label.tree-label:before):
+        (main): Using flex-start for justify-content so that if the section grows too
+        big it gets pinned to the top edge of the document instead of growing past it.
+        (.spacer): Make the spacers have a minimum 20px and grow evenly.
+        (section#home): Add a min-height so that the border will expand if the suite
+        tests shown make the section grow past the height.
+        * Animometer/runner/resources/animometer.js: Update the selectors.
+        (window.suitesManager._treeElement):
+        (window.suitesManager._suitesElements):
+        (window.suitesManager._editsElements):
+
+2015-12-07  Jon Lee  <jonlee@apple.com>
+
         Update options for benchmark
         https://bugs.webkit.org/show_bug.cgi?id=151956