From d06279fff2ee76f12dd633cda73cd49e9ff9b6b6 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 21 Jul 2021 16:10:02 -0700 Subject: [PATCH 1/6] report(metric-filter): handle reports in the same page --- .../renderer/performance-category-renderer.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/report/renderer/performance-category-renderer.js b/report/renderer/performance-category-renderer.js index cfa372e7f273..227caf6c3712 100644 --- a/report/renderer/performance-category-renderer.js +++ b/report/renderer/performance-category-renderer.js @@ -312,18 +312,18 @@ export class PerformanceCategoryRenderer extends CategoryRenderer { ...filterableMetrics, ]); for (const metric of filterChoices) { - const elemId = `metric-${metric.acronym}`; - const radioEl = this.dom.createChildOf(metricFilterEl, 'input', 'lh-metricfilter__radio'); - radioEl.type = 'radio'; - radioEl.name = 'metricsfilter'; - radioEl.id = elemId; + const {acronym} = metric; const labelEl = this.dom.createChildOf(metricFilterEl, 'label', 'lh-metricfilter__label'); - labelEl.htmlFor = elemId; labelEl.title = metric.result && metric.result.title; - labelEl.textContent = metric.acronym || metric.id; + labelEl.textContent = acronym || metric.id; + labelEl.dataset.acronym = acronym; + + const radioEl = this.dom.createChildOf(labelEl, 'input', 'lh-metricfilter__radio'); + radioEl.type = 'radio'; + radioEl.name = 'metricsfilter'; - if (metric.acronym === 'All') { + if (acronym === 'All') { radioEl.checked = true; labelEl.classList.add('lh-metricfilter__label--active'); } @@ -332,9 +332,9 @@ export class PerformanceCategoryRenderer extends CategoryRenderer { // Toggle class/hidden state based on filter choice. radioEl.addEventListener('input', _ => { for (const elem of categoryEl.querySelectorAll('label.lh-metricfilter__label')) { - elem.classList.toggle('lh-metricfilter__label--active', elem.htmlFor === elemId); + elem.classList.toggle('lh-metricfilter__label--active', elem.dataset.acronym === acronym); } - categoryEl.classList.toggle('lh-category--filtered', metric.acronym !== 'All'); + categoryEl.classList.toggle('lh-category--filtered', acronym !== 'All'); for (const perfAuditEl of categoryEl.querySelectorAll('div.lh-audit')) { if (metric.acronym === 'All') { From bdd7eaf7c686362927e13c57208ed84bacd446ce Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Thu, 22 Jul 2021 18:20:48 -0700 Subject: [PATCH 2/6] expand metric.acronym --- report/renderer/performance-category-renderer.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/report/renderer/performance-category-renderer.js b/report/renderer/performance-category-renderer.js index 227caf6c3712..636bd852d280 100644 --- a/report/renderer/performance-category-renderer.js +++ b/report/renderer/performance-category-renderer.js @@ -312,18 +312,17 @@ export class PerformanceCategoryRenderer extends CategoryRenderer { ...filterableMetrics, ]); for (const metric of filterChoices) { - const {acronym} = metric; - const labelEl = this.dom.createChildOf(metricFilterEl, 'label', 'lh-metricfilter__label'); labelEl.title = metric.result && metric.result.title; - labelEl.textContent = acronym || metric.id; - labelEl.dataset.acronym = acronym; + labelEl.textContent = metric.acronym || metric.id; + labelEl.dataset.acronym = metric.acronym; const radioEl = this.dom.createChildOf(labelEl, 'input', 'lh-metricfilter__radio'); radioEl.type = 'radio'; radioEl.name = 'metricsfilter'; + // radioEl.hidden = 'true'; - if (acronym === 'All') { + if (metric.acronym === 'All') { radioEl.checked = true; labelEl.classList.add('lh-metricfilter__label--active'); } @@ -332,9 +331,10 @@ export class PerformanceCategoryRenderer extends CategoryRenderer { // Toggle class/hidden state based on filter choice. radioEl.addEventListener('input', _ => { for (const elem of categoryEl.querySelectorAll('label.lh-metricfilter__label')) { - elem.classList.toggle('lh-metricfilter__label--active', elem.dataset.acronym === acronym); + elem.classList.toggle( + 'lh-metricfilter__label--active', elem.dataset.acronym === metric.acronym); } - categoryEl.classList.toggle('lh-category--filtered', acronym !== 'All'); + categoryEl.classList.toggle('lh-category--filtered', metric.acronym !== 'All'); for (const perfAuditEl of categoryEl.querySelectorAll('div.lh-audit')) { if (metric.acronym === 'All') { From c9706b2d4a93b5d3262c46d591d61dec9eb29837 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Fri, 23 Jul 2021 13:29:34 -0700 Subject: [PATCH 3/6] unique id w/ date.now() --- .../renderer/performance-category-renderer.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/report/renderer/performance-category-renderer.js b/report/renderer/performance-category-renderer.js index 636bd852d280..ac58f1784f81 100644 --- a/report/renderer/performance-category-renderer.js +++ b/report/renderer/performance-category-renderer.js @@ -311,16 +311,18 @@ export class PerformanceCategoryRenderer extends CategoryRenderer { ({acronym: 'All'}), ...filterableMetrics, ]); + const nowTs = Date.now(); for (const metric of filterChoices) { + const elemId = `metric-${metric.acronym}-${nowTs}`; + const radioEl = this.dom.createChildOf(metricFilterEl, 'input', 'lh-metricfilter__radio'); + radioEl.type = 'radio'; + radioEl.name = 'metricsfilter'; + radioEl.id = elemId; + const labelEl = this.dom.createChildOf(metricFilterEl, 'label', 'lh-metricfilter__label'); + labelEl.htmlFor = elemId; labelEl.title = metric.result && metric.result.title; labelEl.textContent = metric.acronym || metric.id; - labelEl.dataset.acronym = metric.acronym; - - const radioEl = this.dom.createChildOf(labelEl, 'input', 'lh-metricfilter__radio'); - radioEl.type = 'radio'; - radioEl.name = 'metricsfilter'; - // radioEl.hidden = 'true'; if (metric.acronym === 'All') { radioEl.checked = true; @@ -331,8 +333,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer { // Toggle class/hidden state based on filter choice. radioEl.addEventListener('input', _ => { for (const elem of categoryEl.querySelectorAll('label.lh-metricfilter__label')) { - elem.classList.toggle( - 'lh-metricfilter__label--active', elem.dataset.acronym === metric.acronym); + elem.classList.toggle('lh-metricfilter__label--active', elem.htmlFor === elemId); } categoryEl.classList.toggle('lh-category--filtered', metric.acronym !== 'All'); From 43765cba98193de2f0550a446407377d74d30796 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 3 Aug 2021 11:20:14 -0700 Subject: [PATCH 4/6] radioset scoped --- report/renderer/performance-category-renderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/report/renderer/performance-category-renderer.js b/report/renderer/performance-category-renderer.js index ac58f1784f81..ecf47227eb51 100644 --- a/report/renderer/performance-category-renderer.js +++ b/report/renderer/performance-category-renderer.js @@ -316,7 +316,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer { const elemId = `metric-${metric.acronym}-${nowTs}`; const radioEl = this.dom.createChildOf(metricFilterEl, 'input', 'lh-metricfilter__radio'); radioEl.type = 'radio'; - radioEl.name = 'metricsfilter'; + radioEl.name = `metricsfilter-${nowTs}`; radioEl.id = elemId; const labelEl = this.dom.createChildOf(metricFilterEl, 'label', 'lh-metricfilter__label'); From 9c67099ea160879da1aff0514b38794b1f1774d1 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 3 Aug 2021 11:23:23 -0700 Subject: [PATCH 5/6] comment --- report/renderer/performance-category-renderer.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/report/renderer/performance-category-renderer.js b/report/renderer/performance-category-renderer.js index ecf47227eb51..4d6cc41cbb1e 100644 --- a/report/renderer/performance-category-renderer.js +++ b/report/renderer/performance-category-renderer.js @@ -311,6 +311,9 @@ export class PerformanceCategoryRenderer extends CategoryRenderer { ({acronym: 'All'}), ...filterableMetrics, ]); + + // Form labels need to reference unique IDs, but multiple reports rendered in the same DOM (eg PSI) + // would mean ID conflict. To address this, we 'scope' these radio inputs with a timestamp. const nowTs = Date.now(); for (const metric of filterChoices) { const elemId = `metric-${metric.acronym}-${nowTs}`; From 9be4c5fabf25b0f6a77439568a5af8c7331e71d7 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Tue, 3 Aug 2021 11:28:18 -0700 Subject: [PATCH 6/6] Util.getUniqueSuffix() --- report/renderer/performance-category-renderer.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/report/renderer/performance-category-renderer.js b/report/renderer/performance-category-renderer.js index 4d6cc41cbb1e..0db8e27ff4d5 100644 --- a/report/renderer/performance-category-renderer.js +++ b/report/renderer/performance-category-renderer.js @@ -313,13 +313,13 @@ export class PerformanceCategoryRenderer extends CategoryRenderer { ]); // Form labels need to reference unique IDs, but multiple reports rendered in the same DOM (eg PSI) - // would mean ID conflict. To address this, we 'scope' these radio inputs with a timestamp. - const nowTs = Date.now(); + // would mean ID conflict. To address this, we 'scope' these radio inputs with a unique suffix. + const uniqSuffix = Util.getUniqueSuffix(); for (const metric of filterChoices) { - const elemId = `metric-${metric.acronym}-${nowTs}`; + const elemId = `metric-${metric.acronym}-${uniqSuffix}`; const radioEl = this.dom.createChildOf(metricFilterEl, 'input', 'lh-metricfilter__radio'); radioEl.type = 'radio'; - radioEl.name = `metricsfilter-${nowTs}`; + radioEl.name = `metricsfilter-${uniqSuffix}`; radioEl.id = elemId; const labelEl = this.dom.createChildOf(metricFilterEl, 'label', 'lh-metricfilter__label');