[speedometer][v3.0-custom] Add params.leakyIframes to main-custom

DevTools can't handle sources from detached iframes.
To simplify local development we add an an option that just hides
the iframes away but never detaches them from the DOM.

Drive-by-fix:
- Properly use markEnd

Change-Id: I037f7dfa7b3eb6c16f1aea0d12ea74703c95e562

index.html

@@ -41,6 +41,7 @@
                     <div class="version">3.0</div>
                 </a>
                 <div id="testContainer"></div>
+                <div id="leakedIframes"></div>
                 <div id="progress">
                     <progress aria-label="Progress" id="progress-completed"></progress>
                 </div>

resources/benchmark-runner.mjs

@@ -360,10 +360,14 @@ export class BenchmarkRunner {
 
     _removeFrame() {
         if (this._frame) {
-            // Downstream only. The React-Window workload sets a global childWindow object.
-            if (this._frame.contentWindow.globalThis.childWindow)
-                this._frame.contentWindow.globalThis.childWindow.close();
-            this._frame.parentNode.removeChild(this._frame);
+            if (params.leakyIframes) {
+                document.getElementById("leakedIframes").append(this._frame);
+            } else {
+                // Downstream only. The React-Window workload sets a global childWindow object.
+                if (this._frame.contentWindow.globalThis.childWindow)
+                    this._frame.contentWindow.globalThis.childWindow.close();
+                this._frame.parentNode.removeChild(this._frame);
+            }
             this._frame = null;
         }
     }
@@ -432,7 +436,7 @@ export class BenchmarkRunner {
         // Remove frame to clear the view for displaying the results.
         this._removeFrame();
         await this._finalize();
-        this.markStart(finalizeLabel, finalizeStartLabel, finalizeEndLabel);
+        this.markEnd(finalizeLabel, finalizeStartLabel, finalizeEndLabel);
     }
 
     async _runSuite(suite) {
@@ -462,7 +466,7 @@ export class BenchmarkRunner {
         this.markStart(suiteLabel, suiteStartLabel);
         for (const test of suite.tests)
             await this._runTestAndRecordResults(suite, test);
-        this.markStart(suiteLabel, suiteStartLabel, suiteEndLabel);
+        this.markEnd(suiteLabel, suiteStartLabel, suiteEndLabel);
     }
 
     _prepareMetrics(suite) {
@@ -512,7 +516,7 @@ export class BenchmarkRunner {
                 // Infinite loop for the specified ms.
                 while (performance.now() - startTime < params.warmupBeforeSync)
                     continue;
-                this.markStart("warmup", "warmup-start", "warmup-end");
+                this.markEnd("warmup", "warmup-start", "warmup-end");
             }
             this.markStart(syncLabel, syncStartLabel);
             const syncStartTime = performance.now();

resources/developer-mode.mjs

@@ -25,6 +25,7 @@ export function createDeveloperModeContainer() {
     settings.append(createUIForMeasurePrepare());
     settings.append(createUIForDomainPerIteration());
     settings.append(createUIForForceGC());
+    settings.append(createUIForLeakyIframes());
 
     content.append(settings);
 
@@ -59,6 +60,23 @@ function createUIForMeasurementMethod() {
     return label;
 }
 
+function createUIForLeakyIframes() {
+    let check = document.createElement("input");
+    check.type = "checkbox";
+    check.id = "leaky-iframes-checkbox";
+    check.checked = !!params.leakyIframes;
+
+    check.onchange = () => {
+        params.leakyIframes = check.checked;
+        updateURL();
+    };
+
+    let label = document.createElement("label");
+    label.append(check, " ", span("Leak IFrames"));
+
+    return label;
+}
+
 function createUIForWarmupSuite() {
     let check = document.createElement("input");
     check.type = "checkbox";
@@ -326,7 +344,7 @@ function updateURL() {
     else
         url.searchParams.delete("measurementMethod");
 
-    const boolParamKeys = ["iterationCount", "useWarmupSuite", "warmupBeforeSync", "waitBeforeSync", "domainPerIteration", "suiteForceGC"];
+    const boolParamKeys = ["iterationCount", "useWarmupSuite", "warmupBeforeSync", "waitBeforeSync", "domainPerIteration", "suiteForceGC", "leakyIframes"];
     for (const paramKey of boolParamKeys) {
         if (params[paramKey] !== defaultParams[paramKey])
             url.searchParams.set(paramKey, params[paramKey]);

resources/main.css

@@ -324,6 +324,10 @@ section > p {
     height: var(--viewport-height);
 }
 
+#leakedIframes {
+    display: none;
+}
+
 section#home p {
     margin: 0 auto;
     width: 70%;

resources/params.mjs

@@ -33,6 +33,8 @@ export class Params {
     suiteForceGC = false;
     currentIteration = 0;
     embedded = false;
+    // Leak iframes to DevTools can display sources.
+    leakyIframes = false;
 
 
     constructor(searchParams = undefined, freeze = true) {
@@ -151,6 +153,11 @@ export class Params {
             searchParams.delete("shuffleSeed");
         }
 
+        if (searchParams.has("leakyIframes")) {
+            this.leakyIframes = true;
+            searchParams.delete("leakyIframes");
+        }
+
         const unused = Array.from(searchParams.keys());
         if (unused.length > 0)
             console.error("Got unused search params", unused);