Address PR review feedback

- Rename title/description per suggestion ("Core Web Vitals histograms")
- Restructure button bar so all 3 buttons appear first in DOM order,
  followed by content wrappers (fixes tab order)
- Remove per-component metric selectors; the pass-rate timeseries
  selector now drives the geo breakdown and histogram via a shared
  cwv-metric-change event
- Deep-linking works via ?good-cwv-over-time=CLS
- Histogram resolves "overall" to LCP (has no combined view)
- Titles update dynamically ("LCP histogram", "INP geographic breakdown")
- Rename "Show distribution" button to "Show histogram"

Author: alonkochba

config/techreport.json

@@ -737,8 +737,8 @@
         },
         "cwv_distribution": {
           "id": "cwv_distribution",
-          "title": "Core Web Vitals distribution",
-          "description": "How origins are distributed across performance buckets for individual Core Web Vitals metrics. Green, orange, and red zones indicate good, needs improvement, and poor thresholds respectively.",
+          "title": "Core Web Vitals histograms",
+          "description": "How origins are distributed for individual Core Web Vitals metrics. Green, orange, and red zones indicate good, needs improvement, and poor thresholds respectively.",
           "metric_options": [
             { "label": "LCP", "value": "LCP" },
             { "label": "CLS", "value": "CLS" },

src/js/techreport/cwvDistribution.js

@@ -30,16 +30,16 @@ class CwvDistribution {
     this.id = id;
     this.pageFilters = filters;
     this.distributionData = null;
-    this.selectedMetric = 'LCP';
     this.chart = null;
     this.root = document.querySelector(`[data-id="${this.id}"]`);
     this.date = this.pageFilters.end || this.root?.dataset?.latestDate || '';
+    this.selectedMetric = this.resolveMetric(new URLSearchParams(window.location.search).get('good-cwv-over-time'));
 
     // Populate "Latest data" timestamp immediately
     const tsSlot = this.root?.querySelector('[data-slot="cwv-distribution-timestamp"]');
     if (tsSlot && this.date) tsSlot.textContent = UIUtils.printMonthYear(this.date);
 
-
+    this.updateTitle();
     this.bindEventListeners();
 
     // Auto-expand if URL hash targets this section
@@ -48,14 +48,27 @@ class CwvDistribution {
     }
   }
 
+  // Map the shared metric value (which may be 'overall') to a metric this chart can show
+  resolveMetric(value) {
+    if (value && METRIC_CONFIG[value]) return value;
+    return 'LCP';
+  }
+
+  updateTitle() {
+    const slot = this.root?.querySelector('[data-slot="cwv-distribution-title-metric"]');
+    if (slot) slot.textContent = this.selectedMetric;
+  }
+
   bindEventListeners() {
     if (!this.root) return;
 
-    this.root.querySelectorAll('.cwv-distribution-metric-selector').forEach(dropdown => {
-      dropdown.addEventListener('change', event => {
-        this.selectedMetric = event.target.value;
+    document.addEventListener('cwv-metric-change', (event) => {
+      const resolved = this.resolveMetric(event.detail?.value);
+      if (resolved !== this.selectedMetric) {
+        this.selectedMetric = resolved;
+        this.updateTitle();
         if (this.distributionData) this.renderChart();
-      });
+      }
     });
 
     const btn = document.getElementById('cwv-distribution-btn');
@@ -71,15 +84,15 @@ class CwvDistribution {
     const btn = document.getElementById('cwv-distribution-btn');
     if (show) {
       this.root.classList.remove('hidden');
-      if (btn) btn.textContent = 'Hide distribution';
+      if (btn) btn.textContent = 'Hide histogram';
       if (!this.distributionData) {
         this.fetchData();
       } else if (this.chart) {
         this.chart.reflow();
       }
     } else {
       this.root.classList.add('hidden');
-      if (btn) btn.textContent = 'Show distribution';
+      if (btn) btn.textContent = 'Show histogram';
     }
   }
 

src/js/techreport/geoBreakdown.js

@@ -9,11 +9,12 @@ class GeoBreakdown {
     this.pageFilters = filters;
     this.data = data;
     this.geoData = null;
-    this.selectedMetric = 'overall';
+    this.selectedMetric = new URLSearchParams(window.location.search).get('good-cwv-over-time') || 'overall';
     this.sortColumn = 'total';
     this.sortDir = 'desc';
     this.showAll = false;
 
+    this.updateTitle();
     this.bindEventListeners();
 
     // Auto-expand if URL hash targets this section
@@ -37,13 +38,20 @@ class GeoBreakdown {
     }
   }
 
+  updateTitle() {
+    const slot = document.querySelector('[data-slot="geo-title-metric"]');
+    if (!slot) return;
+    slot.textContent = this.selectedMetric === 'overall' ? 'Core Web Vitals' : this.selectedMetric;
+  }
+
   bindEventListeners() {
-    const root = `[data-id="${this.id}"]`;
-    document.querySelectorAll(`${root} .geo-metric-selector`).forEach(dropdown => {
-      dropdown.addEventListener('change', event => {
-        this.selectedMetric = event.target.value;
+    document.addEventListener('cwv-metric-change', (event) => {
+      const value = event.detail?.value;
+      if (value && value !== this.selectedMetric) {
+        this.selectedMetric = value;
+        this.updateTitle();
         if (this.geoData) this.renderTable();
-      });
+      }
     });
 
     const btn = document.getElementById('geo-breakdown-btn');

src/js/techreport/timeseries.js

@@ -46,6 +46,11 @@ class Timeseries {
       // Re-render the content
       this.updateContent();
       this.updateInfo(metric, endpoint);
+
+      // Broadcast metric change so linked components (geo breakdown, distribution) update
+      if (event.target.dataset.param === 'good-cwv-over-time') {
+        document.dispatchEvent(new CustomEvent('cwv-metric-change', { detail: { value: metric } }));
+      }
     }
   }
 

static/css/techreport/techreport.css

@@ -2355,12 +2355,6 @@ path.highcharts-tick {
   margin-top: 0.5rem;
 }
 
-.cwv-button-bar > .geo-breakdown-wrapper,
-.cwv-button-bar > .cwv-distribution-wrapper,
-.cwv-button-bar > [id$="-table-wrapper"] {
-  flex-basis: 100%;
-  order: 1;
-}
 
 /* CWV Distribution histogram */
 .cwv-distribution-wrapper {
@@ -2377,12 +2371,8 @@ path.highcharts-tick {
   overflow-x: auto;
 }
 
-.cwv-distribution-header {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
+.cwv-distribution-header h3 {
+  margin-top: 0;
 }
 
 .cwv-distribution-header .descr {

templates/techreport/components/cwv_distribution.html

@@ -1,9 +1,5 @@
 {% set cwv_distribution_config = tech_report_page.config.cwv_distribution %}
 
-<button class="btn show-table cwv-distribution-toggle" type="button" id="cwv-distribution-btn">
-  Show distribution
-</button>
-
 <div
   id="section-{{ cwv_distribution_config.id }}"
   class="cwv-distribution-wrapper hidden"
@@ -13,31 +9,10 @@
   data-latest-date="{{ all_dates[0].value if all_dates else '' }}"
 >
   <div class="cwv-distribution-header">
-    <div>
-      <h3><a href="#section-{{ cwv_distribution_config.id }}" class="anchor">{{ cwv_distribution_config.title }}</a></h3>
-      <p class="descr">{{ cwv_distribution_config.description }}</p>
-      <h4 class="heading">Latest data: <span data-slot="cwv-distribution-timestamp"></span></h4>
-      {% include "techreport/components/filter_meta.html" %}
-    </div>
-    <div class="component-filters">
-      <div class="subcategory-selector-wrapper">
-        <div class="position-wrapper">
-          <label for="cwv-distribution-metric-selector">Metric</label>
-          <select
-            class="cwv-distribution-metric-selector"
-            id="cwv-distribution-metric-selector"
-          >
-            {% for option in cwv_distribution_config.metric_options %}
-              {% if option.value == 'LCP' %}
-              <option value="{{ option.value }}" selected>{{ option.label }}</option>
-              {% else %}
-              <option value="{{ option.value }}">{{ option.label }}</option>
-              {% endif %}
-            {% endfor %}
-          </select>
-        </div>
-      </div>
-    </div>
+    <h3><a href="#section-{{ cwv_distribution_config.id }}" class="anchor"><span data-slot="cwv-distribution-title-metric">Core Web Vitals</span> histogram</a></h3>
+    <p class="descr">{{ cwv_distribution_config.description }}</p>
+    <h4 class="heading">Latest data: <span data-slot="cwv-distribution-timestamp"></span></h4>
+    {% include "techreport/components/filter_meta.html" %}
   </div>
 
   <div id="{{ cwv_distribution_config.id }}-chart"></div>

templates/techreport/components/geo_breakdown.html

@@ -1,9 +1,5 @@
 {% set geo_breakdown_config = tech_report_page.config.geo_breakdown %}
 
-<button class="btn show-table geo-breakdown-toggle" type="button" id="geo-breakdown-btn">
-  Show geographic breakdown
-</button>
-
 <div
   id="section-{{ geo_breakdown_config.id }}"
   class="geo-breakdown-wrapper hidden"
@@ -13,29 +9,9 @@
 >
   <div class="component-heading-wrapper">
     <div class="component-heading">
-      <h3><a href="#section-{{ geo_breakdown_config.id }}" class="anchor">{{ geo_breakdown_config.title }}</a></h3>
+      <h3><a href="#section-{{ geo_breakdown_config.id }}" class="anchor"><span data-slot="geo-title-metric">Core Web Vitals</span> geographic breakdown</a></h3>
       <p class="descr">{{ geo_breakdown_config.description }}</p>
     </div>
-
-    <div class="component-filters">
-      <div class="subcategory-selector-wrapper">
-        <div class="position-wrapper">
-          <label for="geo-metric-selector-{{ geo_breakdown_config.id }}">Metric</label>
-          <select
-            class="geo-metric-selector"
-            id="geo-metric-selector-{{ geo_breakdown_config.id }}"
-          >
-            {% for option in geo_breakdown_config.metric_options %}
-              {% if option.value == 'overall' %}
-              <option value="{{ option.value }}" selected>{{ option.label }}</option>
-              {% else %}
-              <option value="{{ option.value }}">{{ option.label }}</option>
-              {% endif %}
-            {% endfor %}
-          </select>
-        </div>
-      </div>
-    </div>
   </div>
 
   <div class="geo-breakdown-controls">

templates/techreport/drilldown.html

@@ -72,37 +72,45 @@ <h3>{{ tech_report_page.config.good_cwv_summary.title }}</h3>
           <div class="cwv-button-bar">
             <button class="btn show-table cwv-show-table-btn" type="button" data-id="{{ ts_id }}">Show table</button>
             {% if tech_report_page.config.geo_breakdown %}
-              {% include "techreport/components/geo_breakdown.html" %}
+            <button class="btn show-table geo-breakdown-toggle" type="button" id="geo-breakdown-btn">Show geographic breakdown</button>
             {% endif %}
             {% if tech_report_page.config.cwv_distribution %}
-              {% include "techreport/components/cwv_distribution.html" %}
+            <button class="btn show-table cwv-distribution-toggle" type="button" id="cwv-distribution-btn">Show histogram</button>
             {% endif %}
           </div>
+
+          {% if tech_report_page.config.geo_breakdown %}
+            {% include "techreport/components/geo_breakdown.html" %}
+          {% endif %}
+          {% if tech_report_page.config.cwv_distribution %}
+            {% include "techreport/components/cwv_distribution.html" %}
+          {% endif %}
+
           <script nonce="{{ csp_nonce() }}">
             (function() {
               var bar = document.querySelector('.cwv-button-bar');
               var tw = document.getElementById('{{ ts_id }}-table-wrapper');
 
-              // Move table wrapper after the button bar so expanding it doesn't push buttons down
-              if (bar && tw) bar.after(tw);
+              // Move the timeseries' table wrapper out of the timeseries div so expanding it
+              // doesn't push the button bar down
+              if (bar && tw) bar.parentNode.insertBefore(tw, bar.nextSibling);
 
               // Mutual exclusion: only one panel open at a time
               var panels = [
-                { btn: bar.querySelector('.cwv-show-table-btn'), wrapper: tw, showText: 'Show table', hideText: 'Hide table' },
-                { btn: document.getElementById('geo-breakdown-btn'), wrapper: document.getElementById('section-geo_breakdown'), showText: 'Show geographic breakdown', hideText: 'Hide geographic breakdown' },
-                { btn: document.getElementById('cwv-distribution-btn'), wrapper: document.getElementById('section-cwv_distribution'), showText: 'Show distribution', hideText: 'Hide distribution' }
+                { btn: bar.querySelector('.cwv-show-table-btn'), wrapper: tw, showText: 'Show table' },
+                { btn: document.getElementById('geo-breakdown-btn'), wrapper: document.getElementById('section-geo_breakdown'), showText: 'Show geographic breakdown' },
+                { btn: document.getElementById('cwv-distribution-btn'), wrapper: document.getElementById('section-cwv_distribution'), showText: 'Show histogram' }
               ].filter(function(p) { return p.btn && p.wrapper; });
 
               panels.forEach(function(panel) {
                 panel.btn.addEventListener('click', function() {
-                  // Close other panels
                   panels.forEach(function(other) {
                     if (other !== panel && !other.wrapper.classList.contains('hidden')) {
                       other.wrapper.classList.add('hidden');
                       other.btn.textContent = other.showText;
                     }
                   });
-                }, true); // capture phase — runs before component handlers
+                }, true);
               });
             })();
           </script>