2015-11-01 Said Abou-Hallawa Add an option to make the graphics benchmark runs a specific test with fixed complexity https://bugs.webkit.org/show_bug.cgi?id=150529 Reviewed by Darin Adler. Beside each test in the suites tree, we are going to show the complexity arithmetic mean of the of the last run in an edit control. Based on a new option these edit controls will all be visible or hidden. If they are visible their values can be changed. The benchmark runner if it run in the non-adaptive mode will set the complexity of the test to the passed value and will not change it ever. The animator will animate the test and frame rate will also be measured. * Animometer/runner/animometer.html: Add a new option for the non-adaptive mode. * Animometer/runner/resources/animometer.css: (section#home input[type="number"]): Define the width of all the edit control in the section. (section#home > suites input[type="number"]): The edit controls in the box will be right aligned and hidden by default. (section#home > suites input[type="number"].selected): When the class "selected" is added, the edit controls will be visible. (section#home > options > label > input[type="number"]): Deleted. * Animometer/runner/resources/animometer.js: (window.benchmarkRunnerClient.didFinishLastIteration): Update the local storage with the results of each test. (window.optionsManager._adaptiveTestElement): Returns the checkbox for setting the adaptive test option. (window.suitesManager._editElement): Returns the edit element associated with each test element in the suites tree. (window.suitesManager._editsElements): Returns a list of all the elements in the box. (window.suitesManager._localStorageNameForTest): Change this function to take strings. (window.suitesManager._createTestElement): Adds an edit control beside each test. (window.suitesManager.updateEditsElementsState): Adds/Removes the 'selected' class to/from all the tests edit elements. (window.suitesManager.updateUIFromLocalStorage): Reads the edit control value from the local storage. (window.suitesManager.updateLocalStorageFromUI): Saves the edit control value to the local storage. (window.suitesManager.updateLocalStorageFromJSON): Saves the last run results to the local storage. (window.benchmarkController.initialize): Shows/Hides the test edit controls based on the adaptive test option. (window.benchmarkController.onChangeAdaptiveTestCheckbox): An onchange event handler for the adaptive test checkbox. * Animometer/tests/resources/main.js: (Benchmark.prototype.update): Fix the complexity of the test if the running mode is non-adaptive test and desired complexity is not zero. (window.runBenchmark): Add the test complexity as a new benchmark option. 2015-11-01 Said Abou-Hallawa Make the size of the benchmark canvas adaptive to the screen size and screen resolution https://bugs.webkit.org/show_bug.cgi?id=150530 Reviewed by Darin Adler. We want to set the size of the benchmark stage dynamically such that it depends on the screen resolution and the device scale factor. This patch does more than that because the home page css was not done properly. To use the flex box layout, the animometer.css has to be rewritten almost from scratch. The suites tree has to be rewritten also because it was not collapsing and with the flex box layout it was going outside of the window area. The options handling and the local storage handling had to be rewritten to allow more flexibility with this patch and the future patches. The code in animometer.js was reorganized into objects to allow distributing the code nicely among separate entities. * Animometer/resources/extensions.js: (Point.elementClientSize): Returns the client size of an HTMLElement as a Point object. (Insets.prototype.get width): Follow the function opening brace style guidelines. (Insets.prototype.get height): (Insets.prototype.get size): Returns the size of an Insets as a Point object. (window.DocumentExtension): Provides document helper functions. It should be assailable from the runner and the tests. (window.DocumentExtension.createElement): Creates an HTMLElement given its name, attributes and parentElement. (window.DocumentExtension.createSvgElement): Creates an SVGElement given its name, attributes and parentElement (moved from utilities.js). (window.DocumentExtension.insertCssRuleAfter): Inserts a CSS rule after an exiting rule given its text. (ResultsTable.prototype._showHeader): Use DocumentExtension functions. (ResultsTable.prototype._showGraph): Use DocumentExtension functions and create a real button for "Graph..." option. (ResultsTable.prototype._showJSON): Use DocumentExtension functions and create a real button for "JSON..." option. (Options): Deleted. * Animometer/runner/animometer.html: Restructure the page to use the flex box layout. * Animometer/runner/resources/animometer.css: (html,body): (button): (button.large-button):The large button appears in the animometer.html. (button.large-button:active): (button.large-button:disabled): (button.small-button): The small button appears in the results table. (button.small-button:active): (.tree): The tree class is used to list the suites and their tests. (.tree .expand-button): This button expands a tree element. (.tree .expand-button ~ ul): Hide the children (
    ...
) of a parent node by default. (.tree .expand-button:checked ~ ul): Show the children of a parent node only when checked. (.tree ul): Hide the list bullets. (.tree li): Indent every node in the tree relative to its parent. (.tree ul li): Indent all the non top level nodes only (the tests nodes in our case). (.tree > li:last-child): Do not indent the bottom of the last child node. (.tree-label): Style for all the labels in the tree. (label.tree-label): Style for the labels in the top level only (the suites nodes in our case). (label.tree-label:before): Style the unchecked case of the expand-button. (:checked ~ label.tree-label:before): Style the checked case of the expand-button. (table.results-table): The results table appears while running the test and at the end. (.results-table td): (.results-table th): (div.results-json): The JSON div appears per test or for the whole run. (main): This is the flex box container. (section): A section is displayed exclusively inside the
. It is hidden by default. (section.selected): When it is selected, its layout is flex layout. (section > footer): The header or the footer of a section should not take more than 15% of the container. (section#home): The home section has and parts to be laid out in the middle. (section#home > options): (section#home > suites): The should not take more than 40% of the width. (section#home > options > label): The benchmark title. (section#home > header > h2): The benchmark title. (section#home > options > label > input[type="number"]): Sets the width of the option edit control. (section#running): The running section contain the runner