Windowed score functions

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>
@@ -104,6 +109,16 @@ <h3>Adjusting the test complexity:</h3>
                                     <label>Target frame rate: <input type="number" id="frame-rate" value="60"> FPS</label>
                                 </li>
                                 <li>
+                                    <label>Score profile:
+                                        <select name="score-profile" id="score-profile">
+                                            <option value="slope">Slope</option>
+                                            <option value="flat">Flat</option>
+                                            <option value="window">Windowed</option>
+                                            <option value="window-strict">Windowed Strict</option>
+                                        </select>
+                                    </label>
+                                    </li>
+                                    <li>
                                     <h3>Time measurement method:</h3>
                                     <ul>
                                         <li><label><input name="time-measurement" type="radio" value="performance" checked> <code>performance.now()</code> (if available)</label></li>
@@ -147,6 +162,16 @@ <h1>MotionMark score</h1>
                 </div>
                 <div>version <span class="version"></span></div>
                 <p class="score" onclick="benchmarkController.showDebugInfo()"></p>
+                <div class="score-profile">
+                    <label>Score profile:
+                        <select id="results-score-profile" onchange="benchmarkController.changeScoreProfile(this.value)">
+                            <option value="slope">Slope</option>
+                            <option value="flat">Flat</option>
+                            <option value="window">Windowed</option>
+                            <option value="window-strict">Windowed Strict</option>
+                        </select>
+                    </label>
+                </div>
                 <p class="confidence"></p>
                 <div id="results-tables" class="table-container">
                     <div>
@@ -158,6 +183,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>
@@ -168,6 +194,16 @@ <h1>MotionMark score</h1>
                     <button onclick="benchmarkController.showResults()">&lt; Results</button>
                     <h1>Graph:</h1>
                     <p class="score">&nbsp;</p>
+                    <div class="score-profile">
+                        <label>Score profile:
+                            <select id="graph-score-profile" onchange="benchmarkController.changeScoreProfile(this.value)">
+                                <option value="slope">Slope</option>
+                                <option value="flat">Flat</option>
+                                <option value="window">Windowed</option>
+                                <option value="window-strict">Windowed Strict</option>
+                            </select>
+                        </label>
+                    </div>
                     <p class="confidence">&nbsp;</p>
                 </header>
                 <nav>

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

@@ -587,28 +587,34 @@ 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) {
+        var file = fileOrInput instanceof File ? fileOrInput : fileOrInput.files[0];
+        if (!file)
+            return;
 
-            reader.readAsText(file);
-            document.title = "File: " + reader.filename;
-        }, false);
+        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);
+            this.ensureRunnerClient([], {});
+            this.runnerClient.scoreCalculator = new ScoreCalculator(results);
+            this.showResults();
+        };
+        reader.readAsText(file);
+        document.title = "File: " + reader.filename;
     }
 
     frameRateDeterminationComplete(targetFrameRate)
@@ -708,6 +714,15 @@ class DebugBenchmarkController extends BenchmarkController {
         const confidence = ((scoreCalculator.scoreLowerBound / score - 1) * 100).toFixed(2) +
             "% / +" + ((scoreCalculator.scoreUpperBound / score - 1) * 100).toFixed(2) + "%";
         const fps = scoreCalculator._systemFrameRate;
+
+        const resultsScoreProfileSelector = document.getElementById("results-score-profile");
+        if (resultsScoreProfileSelector)
+            resultsScoreProfileSelector.value = scoreCalculator.scoreProfile;
+
+        const graphScoreProfileSelector = document.getElementById("graph-score-profile");
+        if (graphScoreProfileSelector)
+            graphScoreProfileSelector.value = scoreCalculator.scoreProfile;
+
         sectionsManager.setSectionVersion("results", scoreCalculator.version);
         sectionsManager.setSectionScore("results", score.toFixed(2), confidence, fps);
         sectionsManager.populateTable("results-header", Headers.testName, scoreCalculator);
@@ -720,10 +735,41 @@ class DebugBenchmarkController extends BenchmarkController {
 
     showTestGraph(testName, testResult, testData)
     {
+        this._currentGraphParams = {
+            testName: testName,
+            testResult: testResult,
+            testData: testData
+        };
         sectionsManager.setSectionHeader("test-graph", testName);
         sectionsManager.showSection("test-graph", true);
         this.graphController.updateGraphData(testResult, testData, this.runnerClient.scoreCalculator.options);
     }
+
+    reloadCurrentGraph() {
+        if (!this._currentGraphParams)
+            return;
+
+        const scoreCalculator = this.runnerClient.scoreCalculator;
+        const testData = this._currentGraphParams.testData;
+        const testName = this._currentGraphParams.testName;
+
+        // find the updated testResult from scoreCalculator
+        let updatedTestResult = null;
+        scoreCalculator.results.forEach(iteration => {
+            for (let suiteName in iteration[Strings.json.results.tests]) {
+                const suite = iteration[Strings.json.results.tests][suiteName];
+                if (suite[testName]) {
+                    updatedTestResult = suite[testName];
+                    return;
+                }
+            }
+        });
+
+        if (updatedTestResult) {
+            this._currentGraphParams.testResult = updatedTestResult;
+            this.showTestGraph(testName, updatedTestResult, testData);
+        }
+    }
 }
 
 window.benchmarkControllerClass = DebugBenchmarkController;

MotionMark/resources/runner/motionmark.css

@@ -37,6 +37,7 @@ body {
     cursor: default;
 
     -webkit-user-select: none;
+    user-select: none;
 }
 
 body.showing-intro,
@@ -152,6 +153,7 @@ section .body p {
     max-width: 60vw;
 
     -webkit-user-select: text;
+    user-select: text;
     cursor: text;
 }
 
@@ -428,6 +430,7 @@ body.large .frame-container {
 
 #results .body {
     -webkit-user-select: text;
+    user-select: text;
 }
 
 #results .score-container {
@@ -460,6 +463,24 @@ body.large .frame-container {
     padding-bottom: .3em;
 }
 
+#results .score-profile,
+#test-graph .score-profile {
+    font-size: 0.8em;
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+}
+
+#results .score-profile label,
+#test-graph .score-profile label {
+    display: block;
+}
+
+#results .score-profile select,
+#test-graph .score-profile select {
+    font-family: inherit;
+    font-size: inherit;
+    margin-left: 0.5em;
+}
 #results table {
     border-spacing: 0;
     margin: 0;
@@ -541,10 +562,11 @@ body.large .detail .large {
     background: hsla(0, 0%, 100%, 0.9);
 }
 
-@supports (-webkit-backdrop-filter: blur(10px)) {
+@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
     #overlay {
         background: hsla(0, 0%, 100%, 0.7);
         -webkit-backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px);
     }
 }
 
@@ -566,10 +588,17 @@ body.large .detail .large {
 
     font-size: 12px;
     -webkit-user-select: text;
+    user-select: text;
     cursor: text;
 
     max-height: 250px;
 
     border: 1px solid hsla(0, 0%, 0%, 0.1);
     padding: 1em;
 }
+
+#load-results-button {
+    margin-left: 1em;
+    min-width: auto;
+    font-size: 0.8em;
+}

MotionMark/resources/runner/motionmark.js

@@ -67,6 +67,7 @@ class BenchmarkRunnerClient {
 class SectionsManager {
     showSection(sectionIdentifier, pushState)
     {
+        this.currentSectionIdentifier = sectionIdentifier;
         var sections = document.querySelectorAll("main > section");
         for (var i = 0; i < sections.length; ++i) {
             document.body.classList.remove("showing-" + sections[i].id);
@@ -313,6 +314,15 @@ class BenchmarkController {
         const score = scoreCalculator.score;
         const confidence = "±" + (Statistics.largestDeviationPercentage(scoreCalculator.scoreLowerBound, score, scoreCalculator.scoreUpperBound) * 100).toFixed(2) + "%";
         const fps = scoreCalculator.targetFrameRate;
+
+        const resultsScoreProfileSelector = document.getElementById("results-score-profile");
+        if (resultsScoreProfileSelector)
+            resultsScoreProfileSelector.value = scoreCalculator.scoreProfile;
+
+        const graphScoreProfileSelector = document.getElementById("graph-score-profile");
+        if (graphScoreProfileSelector)
+            graphScoreProfileSelector.value = scoreCalculator.scoreProfile;
+
         sectionsManager.setSectionVersion("results", scoreCalculator.version);
         sectionsManager.setSectionScore("results", score.toFixed(2), confidence, fps);
         sectionsManager.populateTable("results-header", Headers.testName, scoreCalculator);
@@ -321,6 +331,14 @@ class BenchmarkController {
         sectionsManager.showSection("results", true);
     }
 
+    changeScoreProfile(profile) {
+        this.runnerClient.scoreCalculator.recompute(profile);
+        if (sectionsManager.currentSectionIdentifier == "test-graph" && this.reloadCurrentGraph)
+            this.reloadCurrentGraph();
+        else
+            this.showResults();
+    }
+
     handleKeyPress(event)
     {
         switch (event.charCode)
@@ -331,6 +349,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 +401,39 @@ class BenchmarkController {
             selection.addRange(range);
         };
 
-        var button = Utilities.createElement("button", {}, container);
-        button.textContent = "Done";
-        button.onclick = () => {
+        var doneButton = Utilities.createElement("button", {}, container);
+        doneButton.textContent = "Done";
+        doneButton.onclick = () => {
             this.hideDebugInfo();
         };
+
+        var downloadButton = Utilities.createElement("button", {}, container);
+        downloadButton.textContent = "Download";
+        downloadButton.onclick = () => {
+            this.downloadDebugInfo();
+        };
+    }
+
+    downloadDebugInfo()
+    {
+        var output = {
+            version: this.runnerClient.scoreCalculator.version,
+            options: this.runnerClient.scoreCalculator.options,
+            data: this.runnerClient.scoreCalculator.data
+        };
+        var json = JSON.stringify(output, (key, value) => {
+            if (typeof value === 'number')
+                return Utilities.toFixedNumber(value, 3);
+            return value;
+        }, 1);
+        var blob = new Blob([json], { type: "application/json" });
+        var url = URL.createObjectURL(blob);
+
+        var a = document.createElement('a');
+        a.href = url;
+        a.download = 'motionmark-results.json';
+        a.click();
+        URL.revokeObjectURL(url);
     }
 
     selectResults(target)