Option to disable badge animation (#141)

* Option to disable badge animation

* Update README

* Review feedback

* Update comments based on review feedback

README.md

@@ -51,7 +51,7 @@ The badge has a number of states:
 * One or more metrics needs improvement - amber square
 * One or more metrics poor - red triangle
 
-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
 

service_worker.js

@@ -19,6 +19,16 @@ const CLS_THRESHOLD = 0.1;
 const FCP_THRESHOLD = 1800;
 const TTFB_THRESHOLD = 800;
 
+// Get the optionsNoBadgeAnimation value
+// 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
+}, ({noBadgeAnimation}) => {
+  optionsNoBadgeAnimation = noBadgeAnimation;
+});
+
 /**
  * Hash the URL and return a numeric hash as a String to be used as the key
  * @param {String} str
@@ -235,6 +245,7 @@ let globalAnimationId = 0;
 /** @type {Map<number, number>} */
 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 +260,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: 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;
+    }
+
     await wait(delay);
     if (animationsByTabId.get(tabId) !== animationId) return;
     badgeMetric('lcp', request.metrics.lcp.value, tabId);
@@ -287,3 +308,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);

src/options/options.html

@@ -32,6 +32,11 @@
                     <input type="checkbox" id="preferPhoneField">
                     Compare local experiences to phone field data
                 </label>
+                <br/>
+                <label for="noBadgeAnimation">
+                    <input type="checkbox" id="noBadgeAnimation">
+                    Only show overall status in badge (no animation of failing metrics)
+                </label>
                 <div id="status"></div>
                 <button id="save">Save</button>
                 </div>

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);