Add a "Load results" button to upload results JSON

MotionMark/developer.html

@@ -59,7 +59,12 @@ <h2>version <span class="version"></span></h2>
                     <div id="suites">
                         <h2>Suites:</h2>
                         <ul class="tree"></ul>
-                        <div><span id="drop-target">Drop results here</span></div>
+                        <div>
+                            <span id="drop-target">Drop results here</span>
+                            <button id="load-results-button" onclick="benchmarkController.loadResults()">Load results…</button>
+                            <input type="file" id="load-results-input" style="display: none;"
+                                onchange="benchmarkController.handleResultsFile(this)">
+                        </div>
                     </div>
                     <div id="options">
                         <h2>Options:</h2>
@@ -158,6 +163,7 @@ <h1>MotionMark score</h1>
                 <button onclick="benchmarkController.restartBenchmark()">Test Again</button>
                 <p>
                     'j': Show JSON results<br/>
+                    'd': Download JSON results<br/>
                     's': Select various results for copy/paste (use repeatedly to cycle)
                 </p>
             </div>

MotionMark/resources/debug-runner/debug-runner.js

@@ -558,7 +558,7 @@ class DebugBenchmarkController extends BenchmarkController {
         let progressElement = document.querySelector("#frame-rate-detection span");
         await this.detectFrameRate(progressElement);
     }
-    
+
     #setupDropTarget()
     {
         var dropTarget = document.getElementById("drop-target");
@@ -587,34 +587,38 @@ class DebugBenchmarkController extends BenchmarkController {
             }
 
             dropTarget.textContent = 'Processing…';
+            this.handleResultsFile(e.dataTransfer.files[0]);
+        }, false);
+    }
 
-            var file = e.dataTransfer.files[0];
-
-            var reader = new FileReader();
-            reader.filename = file.name;
-            reader.onload = (e) => {
-                const data = JSON.parse(e.target.result);
-
-                let results;
-                if (data['debugOutput'] instanceof Array)
-                    results = RunData.resultsDataFromBenchmarkRunnerData(data['debugOutput']);
-                else
-                    results = RunData.resultsDataFromSingleRunData(data);
+    loadResults() {
+        document.getElementById("load-results-input").click();
+    }
 
-                this.ensureRunnerClient([ ], { });
-                this.runnerClient.scoreCalculator = new ScoreCalculator(results);
-                this.showResults();
-            };
+    handleResultsFile(fileOrInput) {
+        const file = fileOrInput instanceof File ? fileOrInput : fileOrInput.files[0];
+        if (!file)
+            return;
 
-            reader.readAsText(file);
-            document.title = "File: " + reader.filename;
-        }, false);
+        const reader = new FileReader();
+        reader.filename = file.name;
+        reader.onload = (e) => {
+            const data = JSON.parse(e.target.result);
+            const results = (data['debugOutput'] instanceof Array) ?
+                RunData.resultsDataFromBenchmarkRunnerData(data['debugOutput']) :
+                RunData.resultsDataFromSingleRunData(data);
+            this.ensureRunnerClient([], {});
+            this.runnerClient.scoreCalculator = new ScoreCalculator(results);
+            this.showResults();
+        };
+        reader.readAsText(file);
+        document.title = "File: " + reader.filename;
     }
 
     frameRateDeterminationComplete(targetFrameRate)
     {
         let frameRateLabelContent = Strings.text.usingFrameRate.replace("%s", targetFrameRate);
-        
+
         if (!targetFrameRate) {
             frameRateLabelContent = Strings.text.frameRateDetectionFailure;
             targetFrameRate = 60;
@@ -635,7 +639,7 @@ class DebugBenchmarkController extends BenchmarkController {
             startButton.disabled = true;
             return;
         }
-        
+
         startButton.disabled = (!suitesManager.isAtLeastOneTestSelected()) || !this.frameRateDetectionComplete;
     }
 

MotionMark/resources/runner/motionmark.js

@@ -27,7 +27,7 @@ class BenchmarkRunnerClient {
     iterationCount = 1;
     options = null;
     results = null;
-    
+
     constructor(suites, options)
     {
         this.options = options;
@@ -133,7 +133,7 @@ class BenchmarkController {
 
         await this.detectFrameRate();
     }
-    
+
     async detectFrameRate(progressElement = undefined)
     {
         let targetFrameRate;
@@ -144,15 +144,15 @@ class BenchmarkController {
         }
         this.frameRateDeterminationComplete(targetFrameRate);
     }
-    
+
     updateUIStrings()
     {
         document.title = Strings.text.title.replace("%s", Strings.version);
         document.querySelectorAll(".version").forEach(function(e) {
             e.textContent = Strings.version;
         });
     }
-    
+
     frameRateDeterminationComplete(frameRate)
     {
         const frameRateLabel = document.getElementById("frame-rate-label");
@@ -163,7 +163,7 @@ class BenchmarkController {
             frameRate = 60;
         } else if (frameRate != 60)
             labelContent = Strings.text.non60FrameRate.replace("%s", frameRate);
-        else 
+        else
             labelContent = Strings.text.usingFrameRate.replace("%s", frameRate);
 
         frameRateLabel.innerHTML = labelContent;
@@ -288,7 +288,7 @@ class BenchmarkController {
 
         sectionsManager.showSection("test-container");
     }
-    
+
     ensureRunnerClient(suites, options)
     {
         this.runnerClient = new benchmarkRunnerClientClass(suites, options);
@@ -331,6 +331,9 @@ class BenchmarkController {
         case 106: // j
             benchmarkController.showDebugInfo();
             break;
+        case 100: // d
+            benchmarkController.downloadDebugInfo();
+            break;
         case 115: // s
             benchmarkController.selectResults(event.target);
             break;
@@ -380,11 +383,39 @@ class BenchmarkController {
             selection.addRange(range);
         };
 
-        var button = Utilities.createElement("button", {}, container);
-        button.textContent = "Done";
-        button.onclick = () => {
+        const doneButton = Utilities.createElement("button", {}, container);
+        doneButton.textContent = "Done";
+        doneButton.onclick = () => {
             this.hideDebugInfo();
         };
+
+        const downloadButton = Utilities.createElement("button", {}, container);
+        downloadButton.textContent = "Download";
+        downloadButton.onclick = () => {
+            this.downloadDebugInfo();
+        };
+    }
+
+    downloadDebugInfo()
+    {
+        const output = {
+            version: this.runnerClient.scoreCalculator.version,
+            options: this.runnerClient.scoreCalculator.options,
+            data: this.runnerClient.scoreCalculator.data
+        };
+        const json = JSON.stringify(output, (key, value) => {
+            if (typeof value === 'number')
+                return Utilities.toFixedNumber(value, 3);
+            return value;
+        }, 1);
+        const blob = new Blob([json], { type: "application/json" });
+        const url = URL.createObjectURL(blob);
+
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'motionmark-results.json';
+        a.click();
+        URL.revokeObjectURL(url);
     }
 
     selectResults(target)