feat: add experimental support for soft navigations

Summary:

Recent versions of Chromium have added support for tracking web vitals metrics
across soft navigations. This change adds support for tracking these metrics in
the extension.

TODO:

- [ ] document the new `reportSoftNavs` option in the README
  `web-vitals` package
- [ ] Hide the option in the options page if one of the following is false:
  1. The browser supports the `soft-navigation` entry type
  2. The `web-vitals` package has been built with the `soft-navs` branch

package.json

@@ -13,14 +13,14 @@
   "private": true,
   "scripts": {
     "lint": "npx eslint src --fix",
-    "build": "npm install; cp node_modules/web-vitals/dist/web-vitals.attribution.js src/browser_action/web-vitals.js"
+    "build": "npm install && cp node_modules/web-vitals/dist/web-vitals.attribution.js src/browser_action/web-vitals.js"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
     "eslint": "^6.8.0",
     "eslint-config-google": "^0.14.0"
   },
   "dependencies": {
-    "web-vitals": "^4.0.0"
+    "web-vitals": "4.2.3-soft-navs"
   }
 }

src/browser_action/vitals.js

@@ -19,6 +19,7 @@
   let latestCLS = {};
   let enableLogging = localStorage.getItem('web-vitals-extension-debug')=='TRUE';
   let enableUserTiming = localStorage.getItem('web-vitals-extension-user-timing')=='TRUE';
+  let reportSoftNavs = (await chrome.storage.sync.get('reportSoftNavs')).reportSoftNavs ?? false;
   let tabLoadedInBackground;
 
   const COLOR_GOOD = '#0CCE6A';
@@ -514,15 +515,15 @@
       // debounce the broadcast of the metric.
       latestCLS = metric;
       debouncedCLSBroadcast();
-    }, { reportAllChanges: true });
+    }, { reportAllChanges: true, reportSoftNavs });
 
-    webVitals.onLCP(broadcastMetricsUpdates, { reportAllChanges: true });
-    webVitals.onFID(broadcastMetricsUpdates, { reportAllChanges: true });
+    webVitals.onLCP(broadcastMetricsUpdates, { reportAllChanges: true, reportSoftNavs: reportSoftNavs });
+    webVitals.onFID(broadcastMetricsUpdates, { reportAllChanges: true, reportSoftNavs: reportSoftNavs });
     webVitals.onINP((metric) => {
       broadcastMetricsUpdates(metric)
-    }, { reportAllChanges: true });
-    webVitals.onFCP(broadcastMetricsUpdates, { reportAllChanges: true });
-    webVitals.onTTFB(broadcastMetricsUpdates, { reportAllChanges: true });
+    }, { reportAllChanges: true, reportSoftNavs: true });
+    webVitals.onFCP(broadcastMetricsUpdates, { reportAllChanges: true, reportSoftNavs: reportSoftNavs });
+    webVitals.onTTFB(broadcastMetricsUpdates, { reportAllChanges: true, reportSoftNavs: reportSoftNavs });
 
     if (enableLogging) {
       onEachInteraction((metric) => {

src/options/options.html

@@ -37,6 +37,11 @@
                     <input type="checkbox" id="noBadgeAnimation">
                     Only show overall status in badge (no animation of failing metrics)
                 </label>
+                <br/>
+                <label>
+                    <input type="checkbox" id="reportSoftNavs">
+                    <strong>Experimental:</strong> Report <a href="https://developer.chrome.com/docs/web-platform/soft-navigations-experiment">soft navigations</a> for LCP, INP, and CLS
+                </label>
                 <div id="status"></div>
                 <button id="save">Save</button>
                 </div>

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 optionsSoftNav = document.getElementById('reportSoftNavs');
 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,
+    reportSoftNavs: optionsSoftNav.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}) => {
+    reportSoftNavs: false,
+  }, ({enableOverlay, debug, userTiming, preferPhoneField, noBadgeAnimation, reportSoftNavs}) => {
     optionsOverlayNode.checked = enableOverlay;
     optionsConsoleLoggingNode.checked = debug;
     optionsUserTimingNode.checked = userTiming;
     optionsPreferPhoneFieldNode.checked = preferPhoneField;
     optionsNoBadgeAnimation.checked = noBadgeAnimation;
+    optionsSoftNav.checked = reportSoftNavs;
   });
 }
 document.addEventListener('DOMContentLoaded', restoreOptions);