Add ability to retrieve raw data from release harness

https://bugs.webkit.org/show_bug.cgi?id=155026 Reviewed by Simon Fraser. * Animometer/developer.html: Remove the special UI in the debug harness. * Animometer/resources/runner/animometer.css: Add styles for the overlay. * Animometer/resources/runner/animometer.js: Let 'j' show the JSON results, but only if the overlay doesn't exist. Add 'esc' key to dismiss the overlay. (window.benchmarkController.selectResults): Cycle the cases around so that the first 's' press selects both the benchmark score and the individual test scores. * Animometer/resources/debug-runner/animometer.css: Remove unneeded rules. * Animometer/resources/debug-runner/animometer.js: Make the same call to handleKeyPress. Canonical link: https://commits.webkit.org/173235@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@197723 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Mar 8, 2016 · 7c07396 · 7c07396
1 parent 51a49c5
commit 7c07396
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 37 deletions.
diff --git a/PerformanceTests/Animometer/developer.html b/PerformanceTests/Animometer/developer.html
@@ -93,15 +93,11 @@ <h1>Animometer score</h1>
                 </div>
                 <table id="results-header"></table>
             </div>
-            <div id="results-json">
-                <button class="small-button" onclick="benchmarkController.showJSONResults()">JSON results</button>
-                <div class="hidden">
-                    JSON:
-                    <textarea rows=1 onclick="this.focus();this.select()" readonly></textarea>
-                </div>
-            </div>
             <button onclick="benchmarkController.startBenchmark()">Test Again</button>
-            <p>'s': Select different data for copy/paste</p>
+            <p>
+                'j': Show JSON results<br/>
+                's': Select various results for copy/paste (use repeatedly to cycle)
+            </p>
         </section>
         <section id="test-graph">
             <header>

diff --git a/PerformanceTests/Animometer/resources/debug-runner/animometer.css b/PerformanceTests/Animometer/resources/debug-runner/animometer.css
@@ -353,14 +353,6 @@ label.tree-label {
     flex-direction: row;
 }
 
-#results-json {
-    margin-bottom: 3em;
-}
-
-#results-json textarea {
-    vertical-align: sub;
-}
-
 #test-graph {
     flex: 1 0 calc(100% - 40px);
 }

diff --git a/PerformanceTests/Animometer/resources/debug-runner/animometer.js b/PerformanceTests/Animometer/resources/debug-runner/animometer.js
@@ -490,7 +490,7 @@ Utilities.extendObject(window.benchmarkController, {
     showResults: function()
     {
         if (!this.addedKeyEvent) {
-            document.addEventListener("keypress", this.selectResults, false);
+            document.addEventListener("keypress", this.handleKeyPress, false);
             this.addedKeyEvent = true;
         }
 
@@ -511,17 +511,6 @@ Utilities.extendObject(window.benchmarkController, {
         suitesManager.updateLocalStorageFromJSON(dashboard.results[0]);
     },
 
-    showJSONResults: function()
-    {
-        var output = {
-            options: benchmarkRunnerClient.results.options,
-            data: benchmarkRunnerClient.results.data
-        };
-        var textarea = document.querySelector("#results-json textarea").textContent = JSON.stringify(output, null, 1);
-        document.querySelector("#results-json button").remove();
-        document.querySelector("#results-json div").classList.remove("hidden");
-    },
-
     showTestGraph: function(testName, testResult, testData)
     {
         sectionsManager.setSectionHeader("test-graph", testName);

diff --git a/PerformanceTests/Animometer/resources/runner/animometer.css b/PerformanceTests/Animometer/resources/runner/animometer.css
@@ -240,3 +240,55 @@ button:active {
         font-size: 3em;
     }
 }
+
+#overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    color: rgb(255, 255, 255);
+    background: rgba(0, 0, 10, .8);
+}
+
+@supports (-webkit-backdrop-filter: blur(10px)) {
+    #overlay {
+        background: rgba(0, 0, 10, .4);
+        -webkit-backdrop-filter: blur(10px);
+    }
+}
+
+#overlay > div {
+    width: 500px;
+    height: 500px;
+    position: absolute;
+    margin-top: -250px;
+    margin-left: -250px;
+    top: 50%;
+    left: 50%;
+    display: flex;
+    justify-content: flex-start;
+    flex-flow: column;
+}
+
+#overlay > div div {
+    flex: 1 1 auto;
+    overflow: scroll;
+    border: 1px solid rgb(241, 241, 241);
+    padding: 2px;
+    box-sizing: border-box;
+}
+
+#overlay button {
+    margin: 1em 5em;
+    border-color: rgb(241, 241, 241);
+    color: rgb(241, 241, 241);
+}
+
+#overlay button:hover {
+    background-color: rgba(255, 255, 255, .1);
+}
+
+#overlay button:active {
+    background-color: rgba(255, 255, 255, .2);
+}
diff --git a/PerformanceTests/Animometer/resources/runner/animometer.js b/PerformanceTests/Animometer/resources/runner/animometer.js
@@ -381,7 +381,7 @@ window.benchmarkController = {
     showResults: function()
     {
         if (!this.addedKeyEvent) {
-            document.addEventListener("keypress", this.selectResults, false);
+            document.addEventListener("keypress", this.handleKeyPress, false);
             this.addedKeyEvent = true;
         }
 
@@ -393,28 +393,86 @@ window.benchmarkController = {
         sectionsManager.showSection("results", true);
     },
 
-    selectResults: function(event)
+    handleKeyPress: function(event)
     {
-        if (event.charCode != 115) // 's'
+        switch (event.charCode)
+        {
+        case 27:  // esc
+            benchmarkController.hideDebugInfo();
+            break;
+        case 106: // j
+            benchmarkController.showDebugInfo();
+            break;
+        case 115: // s
+            benchmarkController.selectResults(event.target);
+            break;
+        }
+    },
+
+    hideDebugInfo: function()
+    {
+        var overlay = document.getElementById("overlay");
+        if (!overlay)
             return;
+        document.body.removeChild(overlay);
+    },
 
-        event.target.selectRange = ((event.target.selectRange || 0) + 1) % 3;
+    showDebugInfo: function()
+    {
+        if (document.getElementById("overlay"))
+            return;
+
+        var overlay = Utilities.createElement("div", {
+            id: "overlay"
+        }, document.body);
+        var container = Utilities.createElement("div", {}, overlay);
+
+        var header = Utilities.createElement("h3", {}, container);
+        header.textContent = "Debug output";
+
+        var data = Utilities.createElement("div", {}, container);
+        data.textContent = "Please wait...";
+        setTimeout(function() {
+            var output = {
+                options: benchmarkRunnerClient.results.options,
+                data: benchmarkRunnerClient.results.data
+            };
+            data.textContent = JSON.stringify(output, null, 1);
+        }, 0);
+        data.onclick = function() {
+            var selection = window.getSelection();
+            selection.removeAllRanges();
+            var range = document.createRange();
+            range.selectNode(data);
+            selection.addRange(range);
+        };
+
+        var button = Utilities.createElement("button", {}, container);
+        button.textContent = "Done";
+        button.onclick = function() {
+            benchmarkController.hideDebugInfo();
+        };
+    },
+
+    selectResults: function(target)
+    {
+        target.selectRange = ((target.selectRange || 0) + 1) % 3;
 
         var selection = window.getSelection();
         selection.removeAllRanges();
         var range = document.createRange();
-        switch (event.target.selectRange) {
+        switch (target.selectRange) {
             case 0: {
-                range.setStart(document.querySelector("#results .score"), 0);
-                range.setEndAfter(document.querySelector("#results-score > tr:last-of-type"), 0);
+                range.selectNode(document.getElementById("results-score"));
                 break;
             }
             case 1: {
-                range.selectNodeContents(document.querySelector("#results .score"));
+                range.setStart(document.querySelector("#results .score"), 0);
+                range.setEndAfter(document.querySelector("#results-score > tr:last-of-type"), 0);
                 break;
             }
             case 2: {
-                range.selectNode(document.getElementById("results-score"));
+                range.selectNodeContents(document.querySelector("#results .score"));
                 break;
             }
         }

diff --git a/PerformanceTests/ChangeLog b/PerformanceTests/ChangeLog
@@ -1,3 +1,25 @@
+2016-03-03  Jon Lee  <jonlee@apple.com>
+
+        Add ability to retrieve raw data from release harness
+        https://bugs.webkit.org/show_bug.cgi?id=155026
+
+        Reviewed by Simon Fraser.
+
+        * Animometer/developer.html: Remove the special UI in the debug
+        harness.
+        * Animometer/resources/runner/animometer.css: Add styles for the
+        overlay.
+        * Animometer/resources/runner/animometer.js: Let 'j' show the JSON
+        results, but only if the overlay doesn't exist. Add 'esc' key to dismiss
+        the overlay.
+        (window.benchmarkController.selectResults): Cycle the cases around
+        so that the first 's' press selects both the benchmark score and
+        the individual test scores.
+        * Animometer/resources/debug-runner/animometer.css: Remove
+        unneeded rules.
+        * Animometer/resources/debug-runner/animometer.js: Make the same
+        call to handleKeyPress.
+
 2016-03-03  Jon Lee  <jonlee@apple.com>
 
         Make sure multiply test particles have at least some opacity