From 4e4aad21efa9310d7ffa93bde41ed9bde5ae5349 Mon Sep 17 00:00:00 2001 From: Rick Viscomi Date: Wed, 4 Dec 2024 12:47:11 -0500 Subject: [PATCH 1/2] EOL notice --- README.md | 3 +++ manifest.json | 2 +- package.json | 2 +- src/browser_action/core.css | 21 +++++++++++++++++++++ src/browser_action/crux.js | 1 - src/browser_action/popup.html | 13 +++++++++++++ src/browser_action/popup.js | 17 ++++++++++++++++- src/browser_action/vitals.js | 6 ++++++ src/options/options.html | 5 +++++ src/options/options.js | 6 +++++- 10 files changed, 71 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 431fe04..8fe6b27 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ +> [!WARNING] +> The Chrome team has been working hard to bring the best of the Web Vitals extension directly into the DevTools Performance panel. As of Chrome version 132, which became stable on January 7, 2025, we have finally ended support for the extension and encourage all users to switch to DevTools. Be aware that extension updates will stop and features may break without notice. [Learn more](https://developer.chrome.com/blog/web-vitals-extension) + # Web Vitals Chrome Extension *A Chrome extension to measure metrics for a healthy site* [Install now](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) diff --git a/manifest.json b/manifest.json index c401f1f..606ca47 100755 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "name": "Web Vitals", - "version": "1.5.3", + "version": "1.6.0", "manifest_version": 3, "description": "Measure metrics for a healthy site", "homepage_url": "https://web.dev/articles/vitals", diff --git a/package.json b/package.json index 61cfd7e..5eeae9f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "web-vitals-extension", - "version": "1.5.3", + "version": "1.6.0", "description": "Instant Web Vitals metrics", "main": "src/browser_action/vitals.js", "repository": "https://github.com/GoogleChrome/web-vitals-extension", diff --git a/src/browser_action/core.css b/src/browser_action/core.css index bc534a0..cc54107 100644 --- a/src/browser_action/core.css +++ b/src/browser_action/core.css @@ -395,3 +395,24 @@ .web-vitals-chrome-extension-popup #settings-link a:hover svg { color: blue; } + +.web-vitals-chrome-extension-popup #eol-notice { + border: 4px solid var(--color-needs-improvement); + margin: auto 20px; + padding: 0 30px; + font-size: 1.2rem; + line-height: 1.8rem; +} +.web-vitals-chrome-extension-popup #eol-notice::backdrop { + backdrop-filter: blur(1px); +} +.web-vitals-chrome-extension-popup button.danger { + background-color: var(--color-needs-improvement); + border: none; +} +.web-vitals-chrome-extension-popup #eol-notice > :first-child { + margin-top: 30px; +} +.web-vitals-chrome-extension-popup #eol-notice > :last-child { + margin-bottom: 30px; +} diff --git a/src/browser_action/crux.js b/src/browser_action/crux.js index cff6924..6327c8e 100644 --- a/src/browser_action/crux.js +++ b/src/browser_action/crux.js @@ -11,7 +11,6 @@ export class CrUX { const origin = urlHelper.origin; return CrUX.query({url, formFactor}).catch(e =>{ - console.warn('CrUX URL data unavailable', e); // If URL data is unavailable, fall back to the origin. return CrUX.query({origin, formFactor}); }); diff --git a/src/browser_action/popup.html b/src/browser_action/popup.html index 432fc91..4dfe5af 100644 --- a/src/browser_action/popup.html +++ b/src/browser_action/popup.html @@ -80,6 +80,19 @@

Metrics

+ +

+ As of January 2025, support for the Web Vitals extension has ended. + We encourage all users to switch to the DevTools Performance panel instead. + Learn more +

+ +
+ + +
+ + diff --git a/src/browser_action/popup.js b/src/browser_action/popup.js index 08d9c38..894fadf 100644 --- a/src/browser_action/popup.js +++ b/src/browser_action/popup.js @@ -44,6 +44,7 @@ class Popup { this.initTimestamp(); this.initMetrics(); this.initFieldData(); + this.showEOLNotice(); } initStatus() { @@ -95,11 +96,25 @@ class Popup { console.log('CrUX data', fieldData); this.renderFieldData(fieldData, formFactor); }).catch(e => { - console.warn('Unable to load any CrUX data', e); + console.warn('Unable to load any CrUX data. See https://developer.chrome.com/blog/web-vitals-extension', e); this.setStatus('Local metrics only (field data unavailable)'); }); } + showEOLNotice() { + chrome.storage.sync.get({hideEOLNotice: false}, ({hideEOLNotice}) => { + if (hideEOLNotice) { + return; + } + const notice = document.getElementById('eol-notice'); + notice.showPopover(); + const hideNoticeToggle = document.getElementById('hide-eol-notice'); + hideNoticeToggle.addEventListener('change', (e) => { + chrome.storage.sync.set({hideEOLNotice: e.target.checked}); + }); + }); + } + setStatus(status) { const statusElement = document.getElementById('status'); diff --git a/src/browser_action/vitals.js b/src/browser_action/vitals.js index 84aa3a2..5ed2587 100644 --- a/src/browser_action/vitals.js +++ b/src/browser_action/vitals.js @@ -254,6 +254,12 @@ default: formattedValue = secondsFormatter.format(metric.value / 1000); } + + // Log the EOL warning at the same time as TTFB, which should only occur once per page load. + if (metric.name == 'TTFB') { + console.warn(`${LOG_PREFIX} As of January 2025, support for the Web Vitals extension has ended. We encourage all users to switch to the DevTools Performance panel instead. Learn more: https://developer.chrome.com/blog/web-vitals-extension`); + } + console.groupCollapsed( `${LOG_PREFIX} ${metric.name} %c${formattedValue} (${metric.rating})`, `color: ${RATING_COLORS[metric.rating] || 'inherit'}` diff --git a/src/options/options.html b/src/options/options.html index ae9ed86..859666f 100644 --- a/src/options/options.html +++ b/src/options/options.html @@ -37,6 +37,11 @@ Only show overall status in badge (no animation of failing metrics) +
+ (Learn more)
diff --git a/src/options/options.js b/src/options/options.js index 44f1c59..ec430ae 100644 --- a/src/options/options.js +++ b/src/options/options.js @@ -3,6 +3,7 @@ const optionsConsoleLoggingNode = document.getElementById('consoleLogging'); const optionsNoBadgeAnimation = document.getElementById('noBadgeAnimation'); const optionsUserTimingNode = document.getElementById('userTiming'); const optionsPreferPhoneFieldNode = document.getElementById('preferPhoneField'); +const optionsHideEOLNotice = document.getElementById('hideEOLNotice'); const optionsSaveBtn = document.getElementById('save'); const optionsStatus = document.getElementById('status'); @@ -16,6 +17,7 @@ function saveOptions() { userTiming: optionsUserTimingNode.checked, preferPhoneField: optionsPreferPhoneFieldNode.checked, noBadgeAnimation: optionsNoBadgeAnimation.checked, + hideEOLNotice: optionsHideEOLNotice.checked, }, () => { // Update status to let user know options were saved. optionsStatus.textContent = 'Options saved.'; @@ -36,12 +38,14 @@ function restoreOptions() { userTiming: false, preferPhoneField: false, noBadgeAnimation: false, - }, ({enableOverlay, debug, userTiming, preferPhoneField, noBadgeAnimation}) => { + hideEOLNotice: false, + }, ({enableOverlay, debug, userTiming, preferPhoneField, noBadgeAnimation, hideEOLNotice}) => { optionsOverlayNode.checked = enableOverlay; optionsConsoleLoggingNode.checked = debug; optionsUserTimingNode.checked = userTiming; optionsPreferPhoneFieldNode.checked = preferPhoneField; optionsNoBadgeAnimation.checked = noBadgeAnimation; + optionsHideEOLNotice.checked = hideEOLNotice; }); } document.addEventListener('DOMContentLoaded', restoreOptions); From f888cfa3e2157b285ae07056868c393ef051a764 Mon Sep 17 00:00:00 2001 From: Rick Viscomi Date: Thu, 9 Jan 2025 13:18:03 -0500 Subject: [PATCH 2/2] review feedback --- src/browser_action/vitals.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/browser_action/vitals.js b/src/browser_action/vitals.js index 5ed2587..614b431 100644 --- a/src/browser_action/vitals.js +++ b/src/browser_action/vitals.js @@ -256,7 +256,7 @@ } // Log the EOL warning at the same time as TTFB, which should only occur once per page load. - if (metric.name == 'TTFB') { + if (metric.name === 'TTFB') { console.warn(`${LOG_PREFIX} As of January 2025, support for the Web Vitals extension has ended. We encourage all users to switch to the DevTools Performance panel instead. Learn more: https://developer.chrome.com/blog/web-vitals-extension`); }