[WIP] Open new tab, update font sizes on dashboard numbers

source/background.js

@@ -122,6 +122,38 @@ chrome.runtime.onMessage.addListener(
 
             return true;
         }
-    });
+    }
+);
 
 
+/**
+ * This listener does two things:
+ * - Opens the ThreatSlayer welcome page on installing the extension, and
+ * - Opens the welcome page on update
+ */
+chrome.runtime.onInstalled.addListener(function openWelcomeTab(details) {
+    const reason = details.reason
+    console.log('reason', reason);
+
+    switch (reason) {
+        // user has installed ThreatSlayer
+        case 'install':
+            chrome.tabs.create({
+                // TODO change this URL
+                url: 'https://yahoo.com'
+            });
+        break;
+        // user has updated their ThreatSlayer version
+       case 'update':
+          chrome.tabs.create({
+                // TODO change this URL
+            url: 'https://yahoo.com'
+          });
+          break;
+       case 'chrome_update':
+       case 'shared_module_update':
+       default:
+          break;
+    }
+});
+

source/dashboard.html

@@ -12,7 +12,6 @@
           border: 30px solid #9336E5;
           text-align: center;
           font-family: 'THICCBOI-Bold';
-          font-size: 123px;
           line-height: 310px;
           margin: auto;
       }
@@ -41,7 +40,6 @@
       }
       .statistic-value {
           font-family: 'THICCBOI';
-          font-size: 56px;
           color: #222222;
           margin-top: 0;
       }
@@ -81,7 +79,7 @@
         <p class="statistic-header">
           Malicious Sites Detected
         </p>
-        <p id="local-malicious-urls-scanned-count" class="statistic-value">
+        <p id="local-malicious-urls-scanned-count" class="statistic-value" style="font-size: 56px">
           0
         </p>
       </div>

source/static/dashboard.js

@@ -1,23 +1,68 @@
 // convenience function to stringify large numbers to local formats with commas etc.
 const formatNumber = (num) => new Intl.NumberFormat().format(num);
 
+// takes an integer and returns a string to set font size
+const getFontSizeForTotal = (num) => {
+    const oneToThreeDigits = '123px';
+    const fourDigits = '110px';
+    const fiveDigits = '90px';
+    const sixDigits = '75px';
+    const sevenDigits = '60px';
+
+    let result;
+
+    if (num >= 10**6) {
+        result = sevenDigits;
+    } else if (num >= 10**5) {
+        result = sixDigits;
+    }  else if (num >= 10**4) {
+        result = fiveDigits;
+    } else if (num >= 10**3) {
+        result = fourDigits;
+    } else {
+        result = oneToThreeDigits;
+    }
+
+    return result;
+};
+
+// takes an integer and returns a string to set font size
+const getFontSizeForUnique = (num) => {
+    const defaultSize = '56px';
+    const sixDigits = '40px';
+
+    let result;
+
+    if (num >= 10**6) {
+        result = sixDigits;
+    } else {
+        result = defaultSize;
+    }
+
+    return result;
+};
+
 window.addEventListener("load", async function() {
     // get dashboard number for total URLs visited from local storage
     chrome.storage.local.get(["totalURLsVisited"]).then((result) => {
         const {totalURLsVisited = 1} = result;
 
-        // get HTML elements of dashboard numbers to fill in
-        const localUniqueURLsScannedCount = document.getElementById("local-unique-urls-scanned-count");
+        // get HTML elements for total and unique URL counts
         const localURLsScannedCount = document.getElementById("local-urls-scanned-count");
+        const localUniqueURLsScannedCount = document.getElementById("local-unique-urls-scanned-count");
 
-        // Ratio 0.177 based on Interlock data sources
-        const uniqueURLsVisited = Math.ceil(totalURLsVisited * 0.177) || 1;
-
+        // set and format *total* URLs
         const formattedTotalURLsVisited = formatNumber(totalURLsVisited);
+
+        localURLsScannedCount.style.fontSize = getFontSizeForTotal(totalURLsVisited);
+        localURLsScannedCount.innerHTML = formattedTotalURLsVisited;
+
+        // set and format unique URLs
+        const uniqueURLsVisited = Math.ceil(totalURLsVisited * 0.177) || 1; // Ratio 0.177 based on Interlock data sources
         const formattedUniqueURLsVisited = formatNumber(uniqueURLsVisited);
 
+        localUniqueURLsScannedCount.style.fontSize = getFontSizeForUnique(uniqueURLsVisited);
         localUniqueURLsScannedCount.innerHTML = `≈ ${formattedUniqueURLsVisited}`;
-        localURLsScannedCount.innerHTML = formattedTotalURLsVisited;
     });
 
     // get dashboard number for malicious URLs visited from local storage
@@ -70,7 +115,6 @@ window.addEventListener("load", async function() {
             toggleLabel.style.opacity = 0.4;
             notYet.style.display = 'inherit';
             }, 250);
-
         }
     }