Add description for block and pass domain favicon on blocked page

Author: Stigmatoz

src/_locales/de/messages.json

@@ -132,6 +132,9 @@
     "message": "Zeitindikator anzeigen",
     "description": "Sie können die aktuellen Informationen zur verbrauchten Zeit im Kurzformat auf dem Erweiterungssymbol anzeigen"
   },
+  "deferringDescription": {
+    "message": "Sie können die Sperre nur einmal während des Tages um 5 Minuten verschieben"
+  },
   "allowDeferringBlock": {
     "message": "Verzögerung der Sperre um 5 Minuten zulassen",
     "description": "Nachdem die Site gesperrt wurde, können Sie die Sperrung einmal täglich um 5 Minuten verschieben"

src/_locales/en/messages.json

@@ -132,6 +132,9 @@
     "message": "Display time tracker in icon",
     "description": "You are able to see current 'spent time' information in short format on the extension icon"
   },
+  "deferringDescription": {
+    "message": "You can postpone the blocking for 5 minutes only once during the day"
+  },
   "allowDeferringBlock": {
     "message": "Allow deferring block for 5 minutes",
     "description": "After the site is blocked, you can postpone the blocking for 5 minutes once during the day"

src/_locales/ru/messages.json

@@ -132,6 +132,9 @@
     "message": "Показывать индикатор времени",
     "description": "Вы можете увидеть текущее затраченное время в сокращенном формате на значке расширения"
   },
+  "deferringDescription": {
+    "message": "Вы можете отложить блокировку на 5 минут только один раз в течение дня"
+  },
   "allowDeferringBlock": {
     "message": "Разрешить отсрочку блокировки на 5 минут",
     "description": "После того, как сайт будет заблокирован, вы можете один раз в течение дня отложить блокировку на 5 минут"

src/compositions/block-page.ts

@@ -1,15 +1,21 @@
 import Browser from 'webextension-polyfill';
 import { buildBlockQuery } from '../utils/block-page';
+import { NO_FAVICON_URL } from '../utils/consts';
 
 export async function useBlockPage(
   domain: string,
   url: string,
   liimitTime: number,
   summaryCounter: number,
+  favIconUrl: string | undefined,
 ): Promise<void> {
+  const favicon =
+    favIconUrl == undefined || favIconUrl == '' || favIconUrl.startsWith('chrome://favicon/')
+      ? NO_FAVICON_URL
+      : favIconUrl;
   const blockUrl =
     Browser.runtime.getURL('src/block.html') +
-    buildBlockQuery(domain, url, liimitTime, summaryCounter);
+    buildBlockQuery(domain, url, liimitTime, summaryCounter, favicon);
   const tab = await Browser.tabs.query({ currentWindow: true, active: true });
   Browser.tabs.update(tab[0].id, { url: blockUrl });
 }

src/pages/Block.vue

@@ -5,8 +5,12 @@
       <p class="d-inline-block header">Web Activity Time Tracker</p>
     </div>
     <p>
-      {{ t('block.message') }}<span>{{ webSite }}</span>
+      {{ t('block.message') }}
     </p>
+    <div>
+      <img class="favicon" height="35" :src="favicon" />
+      <span>{{ webSite }}</span>
+    </div>
     <table>
       <tr>
         <td class="title">{{ t('limit.message') }}:</td>
@@ -24,6 +28,7 @@
       :value="t('5mins.message')"
       @click="deferring()"
     />
+    <p class="desctiption">{{ t('deferringDescription.message') }}</p>
   </div>
 </template>
 
@@ -43,6 +48,7 @@ const settingsStorage = injecStorage();
 const webSite = ref<string>();
 const sourceUrl = ref<string>();
 const limitTime = ref<number>();
+const favicon = ref<string>();
 const limitTimeString = ref<string>();
 const summaryCounter = ref<number>();
 const allowDeferringBlock = ref<boolean>();
@@ -53,6 +59,7 @@ onMounted(async () => {
   webSite.value = queryObj.domain ?? '';
   sourceUrl.value = queryObj.url ?? '';
   limitTime.value = queryObj.limitTime;
+  favicon.value = queryObj.favicon ?? '';
   limitTimeString.value = convertLimitTimeToString(queryObj.limitTime);
   summaryCounter.value = queryObj.summaryCounter ?? 0;
 
@@ -101,6 +108,7 @@ body {
 .block-container span {
   font-weight: 600;
   font-size: 21px;
+  vertical-align: top;
 }
 
 .header {
@@ -130,4 +138,11 @@ table .title {
 table .value {
   font-weight: 600;
 }
+.desctiption {
+  font-size: 13px !important;
+  color: #4a4a4a;
+}
+.favicon {
+  margin: 0 10px;
+}
 </style>

src/tracker.ts

@@ -91,7 +91,13 @@ async function mainTracker(
     const limitExceeded = await isLimitExceeded(activeDomain, tab);
     if (limitExceeded.IsLimitExceeded) {
       const summaryCounter = tab.days.at(-1)!.counter;
-      await useBlockPage(activeDomain, activeTab.url!, limitExceeded.LimitTime!, summaryCounter);
+      await useBlockPage(
+        activeDomain,
+        activeTab.url!,
+        limitExceeded.LimitTime!,
+        summaryCounter,
+        activeTab.favIconUrl,
+      );
       return;
     }
 

src/utils/block-page.ts

@@ -3,21 +3,24 @@ export enum BlockParams {
   URL = 'url',
   LimitTime = 'summaryTime',
   SummaryCounter = 'summaryCounter',
+  Favicon = 'favicon',
 }
 
 export function buildBlockQuery(
   domain: string,
   url: string,
   liimitTime: number,
   summaryCounter: number,
+  favicon: string,
 ) {
-  return `?domain=${domain}&url=${url}&summaryTime=${liimitTime}&summaryCounter=${summaryCounter}`;
+  return `?domain=${domain}&url=${url}&summaryTime=${liimitTime}&summaryCounter=${summaryCounter}&favicon=${favicon}`;
 }
 
 export function getValueFromQuery(url: string) {
   const urlObj = new URL(url);
   const domain = urlObj.searchParams.get(BlockParams.Domain);
   const sourceUrl = urlObj.searchParams.get(BlockParams.URL);
+  const favicon = urlObj.searchParams.get(BlockParams.Favicon);
   const limitTime = Number(urlObj.searchParams.get(BlockParams.LimitTime));
   const summaryCounter = Number(urlObj.searchParams.get(BlockParams.SummaryCounter));
 
@@ -26,5 +29,6 @@ export function getValueFromQuery(url: string) {
     url: sourceUrl,
     limitTime: limitTime,
     summaryCounter: summaryCounter,
+    favicon: favicon,
   };
 }