[FEAT] Showcase time & counter for blocked website when deferring

Author: nilshah98

src/block.html

@@ -17,6 +17,10 @@
       <div class="description">You've reached your limit today on <span id="site" class="current-site"></span></div>
       <div class="description margin-top-10">Your current daily limit is <span id="limit" class="current-limit"></span></div>
 
+      <div class="description margin-top-10">You have already been here
+         <span id="deferredCount" class="deferred-metrics"></span> times for a total duration of
+         <span id="deferredTime" class="deferred-metrics"></span> today !
+      </div>
       <div class="margin-top-10"><a id="deffererBtn" class="defferer-link">Set aside for 5 minutes</a></div>
    </div>
    <p class="product-title">Web Activity Time Tracker</p>

src/scripts/background.js

@@ -66,7 +66,7 @@ function backgroundCheck() {
 
 function mainTRacker(activeUrl, tab, activeTab) {
     if (activity.isLimitExceeded(activeUrl, tab) && !activity.wasDeferred(activeUrl)) {
-        setBlockPageToCurrent(activeTab.url);
+        setBlockPageToCurrent(activeTab.url, tab.summaryTime, tab.counter);
     }
     if (!activity.isInBlackList(activeUrl)) {
         if (activity.isNeedNotifyView(activeUrl, tab)) {
@@ -131,8 +131,10 @@ function notificationAction(activeUrl, tab) {
         });
 }
 
-function setBlockPageToCurrent(currentUrl) {
-    var blockUrl = chrome.runtime.getURL("block.html") + '?url=' + currentUrl;
+function setBlockPageToCurrent(currentUrl, summaryTime, counter) {
+    var blockUrl = chrome.runtime.getURL("block.html") + '?url=' + currentUrl
+    + '&summaryTime=' + summaryTime
+    + '&counter=' + counter;
     chrome.tabs.query({ currentWindow: true, active: true }, function(tab) {
         chrome.tabs.update(tab.id, { url: blockUrl });
     });

src/scripts/block.js

@@ -2,12 +2,18 @@
 
 var storage = new LocalStorage();
 var blockSiteUrl;
+var blockSiteTime;
+var blockSiteCounter;
 var restrictionList = [];
 
 document.addEventListener("DOMContentLoaded", function () {
   var url = new URL(document.URL);
   blockSiteUrl = url.searchParams.get("url");
+  blockSiteTime = url.searchParams.get("summaryTime");
+  blockSiteCounter = url.searchParams.get("counter");
   document.getElementById("site").innerText = extractHostname(blockSiteUrl);
+  document.getElementById("deferredTime").innerText = convertShortSummaryTimeToString(blockSiteTime);
+  document.getElementById("deferredCount").innerText = blockSiteCounter;
 
   storage.getValue(STORAGE_RESTRICTION_LIST, function (items) {
     restrictionList = items;

src/style/block.css

@@ -41,4 +41,10 @@ body{
     color: gray;
     text-decoration: underline;
     cursor: pointer;
+}
+
+.deferred-metrics{
+    font-weight: 500;
+    font-size: 1.2rem;
+    color: rgb(202, 48, 48);
 }