Add amber coloring for "needs improvement"

service_worker.js

@@ -12,12 +12,15 @@
 */
 
 // Core Web Vitals thresholds
-const LCP_THRESHOLD = 2500;
-const FID_THRESHOLD = 100;
-const INP_THRESHOLD = 200;
-const CLS_THRESHOLD = 0.1;
-const FCP_THRESHOLD = 1800;
-const TTFB_THRESHOLD = 800;
+const LCP_GOOD_THRESHOLD = 2500;
+const FID_GOOD_THRESHOLD = 100;
+const INP_GOOD_THRESHOLD = 200;
+const CLS_GOOD_THRESHOLD = 0.1;
+const FCP_GOOD_THRESHOLD = 1800;
+const TTFB_GOOD_THRESHOLD = 800;
+const LCP_POOR_THRESHOLD = 4000;
+const FID_POOR_THRESHOLD = 300;
+const CLS_POOR_THRESHOLD = 0.25;
 const ONE_DAY_MS = 24 * 60 * 60 * 1000;
 
 // Get the optionsNoBadgeAnimation value
@@ -107,8 +110,8 @@ chrome.tabs.onActivated.addListener(({tabId, windowId}) => {
 /**
  *
  * Update the badge icon based on the overall WebVitals
- * pass rate (i.e good = green icon, poor = red icon)
- * @param {String} badgeCategory - GOOD or POOR
+ * rating (i.e good = green icon, needs improvement = amber icon, poor = red icon)
+ * @param {String} badgeCategory - GOOD, NEEDS_INPROVEMENT or POOR
  * @param {Number} tabid
  */
 function badgeOverallPerf(badgeCategory, tabid) {
@@ -129,6 +132,16 @@ function badgeOverallPerf(badgeCategory, tabid) {
           tabId: currentTab,
         });
         break;
+      case 'NEEDS_IMPROVEMENT':
+        chrome.action.setIcon({
+          path: '../../icons/needs-improvement128w.png',
+          tabId: currentTab,
+        });
+        chrome.action.setBadgeText({
+          text: '',
+          tabId: currentTab,
+        });
+        break;
       case 'GOOD':
         chrome.action.setIcon({
           path: '../../icons/fast128w.png',
@@ -166,22 +179,29 @@ function badgeMetric(metric, value, tabid) {
 
     // If URL is overall failing the thresholds, only show
     // a red badge for metrics actually failing (issues/22)
-    if (metric === 'cls' && value <= CLS_THRESHOLD) {
+    if (metric === 'cls' && value <= CLS_GOOD_THRESHOLD) {
       return;
     }
-    if (metric === 'lcp' && value <= LCP_THRESHOLD) {
+    if (metric === 'lcp' && value <= LCP_GOOD_THRESHOLD) {
       return;
     }
-    if (metric === 'fid' && value <= FID_THRESHOLD) {
+    if (metric === 'fid' && value <= FID_GOOD_THRESHOLD) {
       return;
     }
 
     switch (metric) {
       case 'lcp':
-        chrome.action.setIcon({
-          path: '../../icons/slow128w-lcp.png',
-          tabId: currentTab,
-        });
+        if (value <= LCP_POOR_THRESHOLD) {
+          chrome.action.setIcon({
+            path: '../../icons/needs-improvement128w-lcp.png',
+            tabId: currentTab,
+          });
+        } else {
+          chrome.action.setIcon({
+            path: '../../icons/slow128w-lcp.png',
+            tabId: currentTab,
+          });
+        }
         chrome.action.setBadgeBackgroundColor({
           color: bgColor,
           tabId: currentTab,
@@ -192,10 +212,17 @@ function badgeMetric(metric, value, tabid) {
         });
         break;
       case 'cls':
-        chrome.action.setIcon({
-          path: '../../icons/slow128w-cls.png',
-          tabId: currentTab,
-        });
+        if (value <= CLS_POOR_THRESHOLD) {
+          chrome.action.setIcon({
+            path: '../../icons/needs-improvement128w-cls.png',
+            tabId: currentTab,
+          });
+        } else {
+          chrome.action.setIcon({
+            path: '../../icons/slow128w-cls.png',
+            tabId: currentTab,
+          });
+        }
         chrome.action.setBadgeBackgroundColor({
           color: bgColor,
           tabId: currentTab,
@@ -206,10 +233,17 @@ function badgeMetric(metric, value, tabid) {
         });
         break;
       case 'fid':
-        chrome.action.setIcon({
-          path: '../../icons/slow128w-fid.png',
-          tabId: currentTab,
-        });
+        if (value <= FID_POOR_THRESHOLD) {
+          chrome.action.setIcon({
+            path: '../../icons/needs-improvement128w-fid.png',
+            tabId: currentTab,
+          });
+        } else {
+          chrome.action.setIcon({
+            path: '../../icons/slow128w-fid.png',
+            tabId: currentTab,
+          });
+        }
         chrome.action.setBadgeBackgroundColor({
           color: bgColor,
           tabId: currentTab,
@@ -267,7 +301,7 @@ const animationsByTabId = new Map();
 
 
 /**
- * Animate badges between pass/fail -> each failing metric.
+ * Animate badges between good/needs-improvement/poor -> each failing metric.
  * We track each animation by tabId so that we can handle "cancellation" of the animation on new information.
  * @param {Object} request
  * @param {Number} tabId
@@ -280,9 +314,8 @@ 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') {
+  // If perf is not good, animate the sequence
+  if (request.passesAllThresholds !== 'GOOD') {
 
     // However, if user has turned this off, then leave it off.
     // Note: if optionsNoBadgeAnimation is flipped, it won't start (or stop)