- Revision
- 193685
- Author
- jon...@apple.com
- Date
- 2015-12-07 19:23:42 -0800 (Mon, 07 Dec 2015)
Log Message
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):
Modified Paths
Diff
Modified: trunk/PerformanceTests/Animometer/runner/animometer.html (193684 => 193685)
--- trunk/PerformanceTests/Animometer/runner/animometer.html 2015-12-08 03:04:32 UTC (rev 193684)
+++ trunk/PerformanceTests/Animometer/runner/animometer.html 2015-12-08 03:23:42 UTC (rev 193685)
@@ -13,14 +13,16 @@
</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>
@@ -115,6 +117,8 @@
<button class="large-button" _onclick_="benchmarkController.startTest()">Test Again</button>
</footer>
</section>
+ </div>
+ <div class="spacer"></div>
</main>
</body>
</html>
Modified: trunk/PerformanceTests/Animometer/runner/resources/animometer.css (193684 => 193685)
--- trunk/PerformanceTests/Animometer/runner/resources/animometer.css 2015-12-08 03:04:32 UTC (rev 193684)
+++ trunk/PerformanceTests/Animometer/runner/resources/animometer.css 2015-12-08 03:23:42 UTC (rev 193685)
@@ -1,7 +1,6 @@
/* -------------------------------------------------------------------------- */
/* HTML and Body */
/* -------------------------------------------------------------------------- */
-
html,body {
height: 100%;
margin: 0px;
@@ -65,9 +64,8 @@
/* -------------------------------------------------------------------------- */
.tree {
- margin: 1em;
- overflow-y: scroll;
- height: 80%;
+ padding: 0;
+ list-style-type: none;
}
.tree .expand-button {
@@ -110,23 +108,21 @@
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,15 +187,27 @@
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 {
width: 800px;
height: 600px;
@@ -207,6 +215,11 @@
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 @@
width: 1600px;
height: 800px;
}
+
+ section#home {
+ min-height: 800px;
+ }
}
/* -------------------------------------------------------------------------- */
@@ -264,21 +281,21 @@
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,18 +314,28 @@
}
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 {
margin: 0;
padding: 0;
Modified: trunk/PerformanceTests/Animometer/runner/resources/animometer.js (193684 => 193685)
--- trunk/PerformanceTests/Animometer/runner/resources/animometer.js 2015-12-08 03:04:32 UTC (rev 193684)
+++ trunk/PerformanceTests/Animometer/runner/resources/animometer.js 2015-12-08 03:23:42 UTC (rev 193685)
@@ -199,12 +199,12 @@
{
_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 @@
_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 @@
_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;
Modified: trunk/PerformanceTests/ChangeLog (193684 => 193685)
--- trunk/PerformanceTests/ChangeLog 2015-12-08 03:04:32 UTC (rev 193684)
+++ trunk/PerformanceTests/ChangeLog 2015-12-08 03:23:42 UTC (rev 193685)
@@ -1,5 +1,30 @@
2015-12-07 Jon Lee <jon...@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 <jon...@apple.com>
+
Update options for benchmark
https://bugs.webkit.org/show_bug.cgi?id=151956
