swappable sections

GoogleChrome · Feb 13, 2025 · 6b3bce7 · 6b3bce7
1 parent e329fcc
commit 6b3bce7
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 30 deletions.
diff --git a/report/renderer/dom.js b/report/renderer/dom.js
@@ -28,6 +28,8 @@ export class DOM {
     /** @type {HTMLElement} */
     // For legacy Report API users, this'll be undefined, but set in renderReport
     this.rootEl = rootEl;
+    /** @type {WeakMap<Element, Element>} */
+    this._swappableSections = new WeakMap();
   }
 
   /**
@@ -323,4 +325,27 @@ export class DOM {
     this._document.body.removeChild(a);
     setTimeout(() => URL.revokeObjectURL(a.href), 500);
   }
+
+  /**
+   * @param {Element} section1
+   * @param {Element} section2
+   */
+  registerSwappableSections(section1, section2) {
+    this._swappableSections.set(section1, section2);
+    this._swappableSections.set(section2, section1);
+  }
+
+  /**
+   * @param {Element} section
+   */
+  swapSectionIfPossible(section) {
+    const newSection = this._swappableSections.get(section);
+    if (!newSection) return;
+
+    const parent = section.parentNode;
+    if (!parent) return;
+
+    parent.insertBefore(newSection, section);
+    section.remove();
+  }
 }
diff --git a/report/renderer/performance-category-renderer.js b/report/renderer/performance-category-renderer.js
@@ -203,27 +203,24 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
 
     const legacyAuditsSection =
       this.renderFilterableSection(category, groups, ['diagnostics'], metricAudits);
-    legacyAuditsSection?.classList.add('lh-perf-audits--legacy');
+    legacyAuditsSection?.classList.add('lh-perf-audits--swappable', 'lh-perf-audits--legacy');
 
     const experimentalInsightsSection =
       this.renderFilterableSection(category, groups, ['insights', 'diagnostics'], metricAudits);
-    experimentalInsightsSection?.classList.add('lh-perf-audits--experimental');
+    experimentalInsightsSection?.classList.add(
+      'lh-perf-audits--swappable', 'lh-perf-audits--experimental');
 
-    // Many tests expect just one of these sections to be in the DOM at a given time.
-    // To prevent the hidden section from tripping up these tests, we will just remove the hidden
-    // section from the DOM and store it in memory.
     if (legacyAuditsSection) {
-      // @ts-expect-error
-      legacyAuditsSection.__swapSection = experimentalInsightsSection;
-    }
+      element.append(legacyAuditsSection);
 
-    if (experimentalInsightsSection) {
-      // @ts-expect-error
-      experimentalInsightsSection.__swapSection = legacyAuditsSection;
+      // Many tests expect just one of these sections to be in the DOM at a given time.
+      // To prevent the hidden section from tripping up these tests, we will just remove the hidden
+      // section from the DOM and store it in memory.
+      if (experimentalInsightsSection) {
+        this.dom.registerSwappableSections(legacyAuditsSection, experimentalInsightsSection);
+      }
     }
 
-    if (legacyAuditsSection) element.append(legacyAuditsSection);
-
     const isNavigationMode = !options || options?.gatherMode === 'navigation';
     if (isNavigationMode && category.score !== null) {
       const el = createGauge(this.dom);

diff --git a/report/renderer/topbar-features.js b/report/renderer/topbar-features.js
@@ -115,15 +115,9 @@ export class TopbarFeatures {
         break;
       }
       case 'toggle-insights': {
-        const insightsGroup = this._dom.maybeFind('.lh-perf-audits--experimental');
-        const diagnosticsGroup = this._dom.maybeFind('.lh-perf-audits--legacy');
-
-        const renderedGroup = insightsGroup || diagnosticsGroup;
-        // @ts-expect-error
-        if (renderedGroup && renderedGroup.__swapSection) {
-          // @ts-expect-error
-          renderedGroup.parentNode?.insertBefore(renderedGroup.__swapSection, insightsGroup);
-          renderedGroup.remove();
+        const swappableSection = this._dom.maybeFind('.lh-perf-audits--swappable');
+        if (swappableSection) {
+          this._dom.swapSectionIfPossible(swappableSection);
         }
         break;
       }

diff --git a/report/test/renderer/performance-category-renderer-test.js b/report/test/renderer/performance-category-renderer-test.js
@@ -24,14 +24,8 @@ describe('PerfCategoryRenderer', () => {
   let sampleResults;
 
   function swapLegacyAndExperimentalPerfInsights(rootEl) {
-    const insightsGroup = rootEl.querySelector('.lh-perf-audits--experimental');
-    const diagnosticsGroup = rootEl.querySelector('.lh-perf-audits--legacy');
-
-    const renderedGroup = insightsGroup || diagnosticsGroup;
-    if (renderedGroup && renderedGroup.__swapSection) {
-      renderedGroup.parentNode?.insertBefore(renderedGroup.__swapSection, insightsGroup);
-      renderedGroup.remove();
-    }
+    const section = rootEl.querySelector('.lh-perf-audits--swappable');
+    renderer.dom.swapSectionIfPossible(section);
   }
 
   before(() => {