[core] Add message for LCP-only tab loaded in background (fixes #7)

Shows a message for LCP only tab is loaded in background
GoogleChrome · Apr 30, 2020 · baee467 · baee467
2 parents 1eeaeba + 7fe035f
commit baee467
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 5 deletions.
diff --git a/src/bg/background.js b/src/bg/background.js
@@ -57,6 +57,14 @@ function getWebVitals(tabId) {
 
 // User has navigated to a new URL in a tab
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  const tabIdKey = tabId.toString();
+
+  if (tab.active) {
+    chrome.storage.local.set({[tabIdKey]: false});
+  } else {
+    chrome.storage.local.set({[tabIdKey]: true}); // tab was loaded in background
+  }
+
   if (
     changeInfo.status == 'complete' &&
     tab.url.startsWith('http') &&

diff --git a/src/browser_action/popup.js b/src/browser_action/popup.js
@@ -99,15 +99,18 @@ function createPSITemplate(result) {
  * @param {Object} metrics
  * @returns
  */
-function buildLocalMetricsTemplate(metrics) {
+function buildLocalMetricsTemplate(metrics, tabLoadedInBackground) {
   return `
     <div class="lh-audit-group lh-audit-group--metrics">
     <div class="lh-audit-group__header"><span class="lh-audit-group__title">Metrics</span></div>
     <div class="lh-columns">
       <div class="lh-column">
         <div class="lh-metric lh-metric--${metrics.lcp.pass ? 'pass':'fail'}">
           <div class="lh-metric__innerwrap">
-            <span class="lh-metric__title">Largest Contentful Paint <span class="lh-metric-state">${metrics.lcp.final ? '(final)' : '(not final)'}</span></span>
+            <div>
+              <span class="lh-metric__title">Largest Contentful Paint <span class="lh-metric-state">${metrics.lcp.final ? '(final)' : '(not final)'}</span></span>
+              ${tabLoadedInBackground ? '<span class="lh-metric__subtitle">Value inflated as tab was loaded in background</span>' : ''}
+            </div>
             <div class="lh-metric__value">${(metrics.lcp.value/1000).toFixed(2)}&nbsp;s</div>
           </div>
         </div>
@@ -135,9 +138,9 @@ function buildLocalMetricsTemplate(metrics) {
  * @param {Object} metrics
  * @returns
  */
-function renderLocalMetricsTemplate(metrics) {
+function renderLocalMetricsTemplate(metrics, tabLoadedInBackground) {
   const el = document.getElementById('local-metrics');
-  el.innerHTML = buildLocalMetricsTemplate(metrics);
+  el.innerHTML = buildLocalMetricsTemplate(metrics, tabLoadedInBackground);
 }
 
 function buildDistributionTemplate(metric, label) {
@@ -195,8 +198,16 @@ chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
   // Retrieve the stored latest metrics
   if (thisTab.url) {
     const key = hashCode(thisTab.url);
+    const loadedInBackgroundKey = thisTab.id.toString()
+
+    let tabLoadedInBackground = false;
+
+    chrome.storage.local.get(loadedInBackgroundKey, (result) => {
+      tabLoadedInBackground = result[loadedInBackgroundKey];
+    });
+
     chrome.storage.local.get(key, (result) => {
-      renderLocalMetricsTemplate(result[key]);
+      renderLocalMetricsTemplate(result[key], tabLoadedInBackground);
     });
   }
 });
diff --git a/src/browser_action/viewer.css b/src/browser_action/viewer.css
@@ -607,6 +607,12 @@
   font-weight: 500;
 }
 
+.lh-metric__subtitle {
+  display: block;
+  font-weight: 500;
+  color: var(--color-gray-500);
+}
+
 .lh-metrics__disclaimer {
   color: var(--color-gray-600);
   margin: var(--section-padding-vertical) 0;