From b1ca29b55eeb5a4e86479861263bb914409ec64c Mon Sep 17 00:00:00 2001
From: Sunny Sachanandani <sunnyps@chromium.org>
Date: Tue, 3 Mar 2026 15:22:17 -0800
Subject: [PATCH] Dynamic score profile selectors

Allow changing the score profile on the fly from the results and graph
pages and update computed results, graphs, etc. immediately. This also
affects the data that's used as the source for the "Show Debug Info" and
downloaded JSON.
---
 MotionMark/developer.html                     | 24 +++++++++
 .../resources/debug-runner/debug-runner.js    | 40 +++++++++++++++
 MotionMark/resources/runner/motionmark.css    | 31 +++++++++++-
 MotionMark/resources/runner/motionmark.js     | 18 +++++++
 MotionMark/resources/runner/results.js        | 49 ++++++++++++-------
 5 files changed, 143 insertions(+), 19 deletions(-)

diff --git a/MotionMark/developer.html b/MotionMark/developer.html
index b2de742..c91e838 100644
--- a/MotionMark/developer.html
+++ b/MotionMark/developer.html
@@ -104,6 +104,14 @@ <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>
+                                        </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 +155,14 @@ <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>
+                        </select>
+                    </label>
+                </div>
                 <p class="confidence"></p>
                 <div id="results-tables" class="table-container">
                     <div>
@@ -168,6 +184,14 @@ <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>
+                            </select>
+                        </label>
+                    </div>
                     <p class="confidence">&nbsp;</p>
                 </header>
                 <nav>
diff --git a/MotionMark/resources/debug-runner/debug-runner.js b/MotionMark/resources/debug-runner/debug-runner.js
index 085f4d3..00e15da 100644
--- a/MotionMark/resources/debug-runner/debug-runner.js
+++ b/MotionMark/resources/debug-runner/debug-runner.js
@@ -708,6 +708,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 +729,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;
diff --git a/MotionMark/resources/runner/motionmark.css b/MotionMark/resources/runner/motionmark.css
index 0ca5d75..b7b5889 100644
--- a/MotionMark/resources/runner/motionmark.css
+++ b/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,6 +588,7 @@ body.large .detail .large {
 
     font-size: 12px;
     -webkit-user-select: text;
+    user-select: text;
     cursor: text;
 
     max-height: 250px;
@@ -573,3 +596,9 @@ body.large .detail .large {
     border: 1px solid hsla(0, 0%, 0%, 0.1);
     padding: 1em;
 }
+
+#load-results-button {
+    margin-left: 1em;
+    min-width: auto;
+    font-size: 0.8em;
+}
diff --git a/MotionMark/resources/runner/motionmark.js b/MotionMark/resources/runner/motionmark.js
index 193e212..c2c54bc 100644
--- a/MotionMark/resources/runner/motionmark.js
+++ b/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)
diff --git a/MotionMark/resources/runner/results.js b/MotionMark/resources/runner/results.js
index 291992a..a33cdc6 100644
--- a/MotionMark/resources/runner/results.js
+++ b/MotionMark/resources/runner/results.js
@@ -108,6 +108,15 @@ class ScoreCalculator {
         this._runData.runs.push(suitesSamplers);
     }
 
+    recompute(profile) {
+        this._preferredProfile = profile;
+        this._processData();
+    }
+
+    get scoreProfile() {
+        return this._preferredProfile || "slope";
+    }
+
     _processData()
     {
         this._results = {};
@@ -132,11 +141,9 @@ class ScoreCalculator {
                 suitesResult[suiteName] = suiteResult;
 
                 for (var testName in suiteData) {
-                    if (!suiteData[testName][Strings.json.result])
-                        this.calculateScore(suiteData[testName]);
+                    this.calculateScore(suiteData[testName]);
 
                     suiteResult[testName] = suiteData[testName][Strings.json.result];
-                    delete suiteData[testName][Strings.json.result];
 
                     testsScores.push(suiteResult[testName][Strings.json.score]);
                     testsLowerBoundScores.push(suiteResult[testName][Strings.json.scoreLowerBound]);
@@ -168,8 +175,8 @@ class ScoreCalculator {
         function findRegression(series, profile) {
             const minIndex = Math.round(.025 * series.length);
             const maxIndex = Math.round(.975 * (series.length - 1));
-            const minComplexity = series.getFieldInDatum(minIndex, complexityKey);
-            const maxComplexity = series.getFieldInDatum(maxIndex, complexityKey);
+            let minComplexity = series.getFieldInDatum(minIndex, complexityKey);
+            let maxComplexity = series.getFieldInDatum(maxIndex, complexityKey);
 
             if (Math.abs(maxComplexity - minComplexity) < 20 && maxIndex - minIndex < 20) {
                 minIndex = 0;
@@ -206,24 +213,30 @@ class ScoreCalculator {
         });
 
         const isRampController = this._runData.options[Strings.json.controller] == "ramp";
-        let predominantProfile = "";
+        let predominantProfile = this._preferredProfile || "";
         if (isRampController) {
-            var profiles = {};
-            data[Strings.json.controller].forEach(function(regression) {
-                if (regression[Strings.json.regressions.profile]) {
-                    var profile = regression[Strings.json.regressions.profile];
-                    profiles[profile] = (profiles[profile] || 0) + 1;
-                }
-            });
+            if (!predominantProfile) {
+                var profiles = {};
+                data[Strings.json.controller].forEach(function (regression) {
+                    if (regression[Strings.json.regressions.profile]) {
+                        var profile = regression[Strings.json.regressions.profile];
+                        profiles[profile] = (profiles[profile] || 0) + 1;
+                    }
+                });
 
-            var maxProfileCount = 0;
-            for (var profile in profiles) {
-                if (profiles[profile] > maxProfileCount) {
-                    predominantProfile = profile;
-                    maxProfileCount = profiles[profile];
+                var maxProfileCount = 0;
+                for (var profile in profiles) {
+                    if (profiles[profile] > maxProfileCount) {
+                        predominantProfile = profile;
+                        maxProfileCount = profiles[profile];
+                    }
                 }
             }
+            data[Strings.json.controller].forEach(function (regression) {
+                regression[Strings.json.regressions.profile] = predominantProfile;
+            });
         }
+        this._preferredProfile = predominantProfile;
 
         const regressionResult = findRegression(samples[complexityKey], predominantProfile);
         const calculation = regressionResult.regression;