From 88cecd8c3935c7ad90953412c9c0092cd02f0112 Mon Sep 17 00:00:00 2001 From: Barry Pollard Date: Mon, 17 Jul 2023 21:01:07 +0100 Subject: [PATCH 1/4] Option to disable badge animation --- service_worker.js | 21 +++++++++++++++++++++ src/options/options.html | 5 +++++ src/options/options.js | 6 +++++- 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/service_worker.js b/service_worker.js index e8bc4ec..c88200f 100755 --- a/service_worker.js +++ b/service_worker.js @@ -19,6 +19,8 @@ const CLS_THRESHOLD = 0.1; const FCP_THRESHOLD = 1800; const TTFB_THRESHOLD = 800; +let optionsNoBadgeAnimation = false; + /** * Hash the URL and return a numeric hash as a String to be used as the key * @param {String} str @@ -235,6 +237,7 @@ let globalAnimationId = 0; /** @type {Map} */ const animationsByTabId = new Map(); + /** * Animate badges between pass/fail -> each failing metric. * We track each animation by tabId so that we can handle "cancellation" of the animation on new information. @@ -249,8 +252,18 @@ async function animateBadges(request, tabId) { const delay = 2000; // First badge overall perf badgeOverallPerf(request.passesAllThresholds, tabId); + // If perf is poor, animate the sequence if (request.passesAllThresholds === 'POOR') { + + // However, if user has turned this off, then leave it off. + // Note, we don't call animateBadges again so need a new metric event or a + // page refresh to re-enable this but better than checking continually, + // when unlikely to change in most cases. + if (optionsNoBadgeAnimation) { + return; + } + await wait(delay); if (animationsByTabId.get(tabId) !== animationId) return; badgeMetric('lcp', request.metrics.lcp.value, tabId); @@ -287,3 +300,11 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { sendResponse({tabId: sender.tab.id}); } }); + +// Listen for changes to noBadgeAnimation option +function logStorageChange(changes, area) { + if (area === 'sync' && 'noBadgeAnimation' in changes) { + optionsNoBadgeAnimation = changes['noBadgeAnimation'].newValue; + } +} +chrome.storage.onChanged.addListener(logStorageChange); diff --git a/src/options/options.html b/src/options/options.html index 6be1fe2..ae9ed86 100644 --- a/src/options/options.html +++ b/src/options/options.html @@ -32,6 +32,11 @@ Compare local experiences to phone field data +
+
diff --git a/src/options/options.js b/src/options/options.js index 32dcf17..44f1c59 100644 --- a/src/options/options.js +++ b/src/options/options.js @@ -1,5 +1,6 @@ const optionsOverlayNode = document.getElementById('overlay'); const optionsConsoleLoggingNode = document.getElementById('consoleLogging'); +const optionsNoBadgeAnimation = document.getElementById('noBadgeAnimation'); const optionsUserTimingNode = document.getElementById('userTiming'); const optionsPreferPhoneFieldNode = document.getElementById('preferPhoneField'); const optionsSaveBtn = document.getElementById('save'); @@ -14,6 +15,7 @@ function saveOptions() { debug: optionsConsoleLoggingNode.checked, userTiming: optionsUserTimingNode.checked, preferPhoneField: optionsPreferPhoneFieldNode.checked, + noBadgeAnimation: optionsNoBadgeAnimation.checked, }, () => { // Update status to let user know options were saved. optionsStatus.textContent = 'Options saved.'; @@ -33,11 +35,13 @@ function restoreOptions() { debug: false, userTiming: false, preferPhoneField: false, - }, ({enableOverlay, debug, userTiming, preferPhoneField}) => { + noBadgeAnimation: false, + }, ({enableOverlay, debug, userTiming, preferPhoneField, noBadgeAnimation}) => { optionsOverlayNode.checked = enableOverlay; optionsConsoleLoggingNode.checked = debug; optionsUserTimingNode.checked = userTiming; optionsPreferPhoneFieldNode.checked = preferPhoneField; + optionsNoBadgeAnimation.checked = noBadgeAnimation; }); } document.addEventListener('DOMContentLoaded', restoreOptions); From dea6a98d5eb9ecfd9f225975016e39661dd303d9 Mon Sep 17 00:00:00 2001 From: Barry Pollard Date: Mon, 17 Jul 2023 21:40:13 +0100 Subject: [PATCH 2/4] Update README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c76880b..94a8126 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ The badge has a number of states: * Passing - green * One or more metrics failing - red -If one or more metrics are failing, the badge will animate the values of these metrics. +If one or more metrics are failing, the badge will animate the values of these metrics (this animation can be turned off in the options screen). ### Detailed drill-down From 010d88bc15b6f8ff6e048abb51bbf00d74f94fcd Mon Sep 17 00:00:00 2001 From: Barry Pollard Date: Fri, 21 Jul 2023 18:25:30 +0100 Subject: [PATCH 3/4] Review feedback --- service_worker.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/service_worker.js b/service_worker.js index c88200f..a64c44d 100755 --- a/service_worker.js +++ b/service_worker.js @@ -19,7 +19,15 @@ const CLS_THRESHOLD = 0.1; const FCP_THRESHOLD = 1800; const TTFB_THRESHOLD = 800; -let optionsNoBadgeAnimation = false; +// Get the optionsNoBadgeAnimation value +// Actual default is false but lets set to true +// initially in get sync storage is slow +let optionsNoBadgeAnimation = true; +chrome.storage.sync.get({ + optionsNoBadgeAnimation: false +}, ({noBadgeAnimation}) => { + optionsNoBadgeAnimation = noBadgeAnimation; +}); /** * Hash the URL and return a numeric hash as a String to be used as the key @@ -304,7 +312,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { // Listen for changes to noBadgeAnimation option function logStorageChange(changes, area) { if (area === 'sync' && 'noBadgeAnimation' in changes) { - optionsNoBadgeAnimation = changes['noBadgeAnimation'].newValue; + optionsNoBadgeAnimation = changes.noBadgeAnimation.newValue; } } chrome.storage.onChanged.addListener(logStorageChange); From c6f2583dd4a8b635e3952cb408d5060ee8c18e2f Mon Sep 17 00:00:00 2001 From: Barry Pollard Date: Fri, 21 Jul 2023 18:46:46 +0100 Subject: [PATCH 4/4] Update comments based on review feedback --- service_worker.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/service_worker.js b/service_worker.js index a64c44d..ab1413f 100755 --- a/service_worker.js +++ b/service_worker.js @@ -20,8 +20,8 @@ const FCP_THRESHOLD = 1800; const TTFB_THRESHOLD = 800; // Get the optionsNoBadgeAnimation value -// Actual default is false but lets set to true -// initially in get sync storage is slow +// Actual default is false but lets set to true initially in case sync storage +// is slow so users don't experience any animation initially. let optionsNoBadgeAnimation = true; chrome.storage.sync.get({ optionsNoBadgeAnimation: false @@ -265,10 +265,10 @@ async function animateBadges(request, tabId) { if (request.passesAllThresholds === 'POOR') { // However, if user has turned this off, then leave it off. - // Note, we don't call animateBadges again so need a new metric event or a - // page refresh to re-enable this but better than checking continually, - // when unlikely to change in most cases. - if (optionsNoBadgeAnimation) { + // Note: if optionsNoBadgeAnimation is flipped, it won't start (or stop) + // animating immediately until a status change or page reload to avoid + // having to check continually. This is similar to HUD and console.logs + // not appearing immediately. return; }