feat(browser-extension): add issue banner to popup giving user some information about what's wrong and where to find the issue easily

packages/browser-extension/src/popup.html

@@ -29,129 +29,157 @@
       </button>
     </header>
     <main>
-      <popup-button id="power-option" role="button" tabindex="0">
+      <p aria-hidden="true" class="banner" id="issue-banner" role="alert">
-        <svg
+        <span id="issue-banner-text"></span>
-          aria-hidden="true"
+        <a aria-label="GitHub" id="issue-banner-url" target="_blank">
-          fill="none"
+          <svg
-          height="32"
+            fill="none"
-          stroke-linecap="round"
+            height="12"
-          stroke-linejoin="round"
+            stroke-linecap="round"
-          stroke-width="2"
+            stroke-linejoin="round"
-          stroke="currentColor"
+            stroke-width="2"
-          viewBox="0 0 24 24"
+            stroke="currentColor"
-          width="32"
+            viewBox="0 0 24 24"
-        >
+            width="12"
-          <path d="M18.36 6.64a9 9 0 1 1-12.73 0" />
-          <line x1="12" y1="2" x2="12" y2="12" />
-        </svg>
-        <span id="host"></span>
-      </popup-button>
-      <popup-button data-href="mailto:hello@wanhose.dev" id="help-option" role="link" tabindex="0">
-        <svg
-          aria-hidden="true"
-          fill="none"
-          height="32"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          width="32"
-        >
-          <path
-            d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
-          />
-        </svg>
-        <span data-i18n="popup_helpOption"></span>
-      </popup-button>
-      <popup-button
-        data-href="https://github.com/wanhose/cookie-dialog-monster"
-        id="contribute-option"
-        role="link"
-        tabindex="0"
-      >
-        <svg
-          aria-hidden="true"
-          fill="none"
-          height="32"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          width="32"
-        >
-          <path
-            d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
-          />
-        </svg>
-        <span data-i18n="popup_contributeOption"></span>
-      </popup-button>
-      <popup-button data-href="#" id="rate-option" role="link" tabindex="0">
-        <svg
-          aria-hidden="true"
-          fill="none"
-          height="32"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-          width="32"
-        >
-          <polygon
-            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
-          />
-        </svg>
-        <span data-i18n="popup_rateOption"></span>
-      </popup-button>
-      <popup-data-container>
-        <popup-data>
-          <strong data-i18n="popup_databaseVersion"></strong>
-          <span id="database-version"></span>
-          <popup-data-button
-            data-animation="flip"
-            id="refresh-database-button"
-            role="button"
-            tabindex="0"
           >
-            <svg
+            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
-              aria-hidden="true"
+            <polyline points="15 3 21 3 21 9"></polyline>
-              fill="none"
+            <line x1="10" y1="14" x2="21" y2="3"></line>
-              height="12"
+          </svg>
-              id="refresh-database-spinner"
+        </a>
-              stroke-linecap="round"
+      </p>
-              stroke-linejoin="round"
+      <div class="content">
-              stroke-width="2"
+        <popup-button id="power-option" role="button" tabindex="0">
-              stroke="currentColor"
+          <svg
-              viewBox="0 0 24 24"
+            aria-hidden="true"
-              width="12"
+            fill="none"
+            height="32"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            width="32"
+          >
+            <path d="M18.36 6.64a9 9 0 1 1-12.73 0" />
+            <line x1="12" y1="2" x2="12" y2="12" />
+          </svg>
+          <span id="host"></span>
+        </popup-button>
+        <popup-button
+          data-href="mailto:hello@wanhose.dev"
+          id="help-option"
+          role="link"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="none"
+            height="32"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            width="32"
+          >
+            <path
+              d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
+            />
+          </svg>
+          <span data-i18n="popup_helpOption"></span>
+        </popup-button>
+        <popup-button
+          data-href="https://github.com/wanhose/cookie-dialog-monster"
+          id="contribute-option"
+          role="link"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="none"
+            height="32"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            width="32"
+          >
+            <path
+              d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+            />
+          </svg>
+          <span data-i18n="popup_contributeOption"></span>
+        </popup-button>
+        <popup-button data-href="#" id="rate-option" role="link" tabindex="0">
+          <svg
+            aria-hidden="true"
+            fill="none"
+            height="32"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            width="32"
+          >
+            <polygon
+              points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+            />
+          </svg>
+          <span data-i18n="popup_rateOption"></span>
+        </popup-button>
+        <popup-data-container>
+          <popup-data>
+            <strong data-i18n="popup_databaseVersion"></strong>
+            <span id="database-version"></span>
+            <popup-data-button
+              data-animation="flip"
+              id="refresh-database-button"
+              role="button"
+              tabindex="0"
             >
-              <polyline points="1 4 1 10 7 10"></polyline>
+              <svg
-              <polyline points="23 20 23 14 17 14"></polyline>
+                aria-hidden="true"
-              <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
+                fill="none"
-            </svg>
+                height="12"
-            <svg
+                id="refresh-database-spinner"
-              aria-hidden="true"
+                stroke-linecap="round"
-              fill="none"
+                stroke-linejoin="round"
-              height="12"
+                stroke-width="2"
-              id="refresh-database-check"
+                stroke="currentColor"
-              stroke-linecap="round"
+                viewBox="0 0 24 24"
-              stroke-linejoin="round"
+                width="12"
-              stroke-width="2"
+              >
-              stroke="var(--color-success)"
+                <polyline points="1 4 1 10 7 10"></polyline>
-              viewBox="0 0 24 24"
+                <polyline points="23 20 23 14 17 14"></polyline>
-              width="12"
+                <path
-            >
+                  d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"
-              <polyline points="20 6 9 17 4 12"></polyline>
+                ></path>
-            </svg>
+              </svg>
-          </popup-data-button>
+              <svg
-        </popup-data>
+                aria-hidden="true"
-        <popup-data>
+                fill="none"
-          <strong data-i18n="popup_extensionVersion"></strong>
+                height="12"
-          <span id="extension-version"></span>
+                id="refresh-database-check"
-        </popup-data>
+                stroke-linecap="round"
-      </popup-data-container>
+                stroke-linejoin="round"
+                stroke-width="2"
+                stroke="var(--color-success)"
+                viewBox="0 0 24 24"
+                width="12"
+              >
+                <polyline points="20 6 9 17 4 12"></polyline>
+              </svg>
+            </popup-data-button>
+          </popup-data>
+          <popup-data>
+            <strong data-i18n="popup_extensionVersion"></strong>
+            <span id="extension-version"></span>
+          </popup-data>
+        </popup-data-container>
+      </div>
     </main>
     <footer></footer>
   </body>

packages/browser-extension/src/scripts/popup.js

@@ -1,3 +1,15 @@
+/**
+ * @typedef {Object} ExtensionState
+ * @property {boolean} on
+ * @property {ExtensionIssue} [issue]
+ */
+
+/**
+ * @typedef {Object} PopupState
+ * @extends {ExtensionState}
+ * @property {number} [tabId]
+ */
+
 if (typeof browser === 'undefined') {
   browser = chrome;
 }
@@ -46,10 +58,10 @@ const isEdge = navigator.userAgent.indexOf('Edg') !== -1;
 const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
 
 /**
- * @description Extension state
+ * @description Popup state
- * @type {{ enabled: boolean, tabId: number | undefined }}
+ * @type {PopupState}
  */
-let state = { enabled: true, tabId: undefined };
+let state = { on: true };
 
 /**
  * @async
@@ -63,9 +75,22 @@ async function handleContentLoaded() {
     ? new URL(tab.url).hostname.split('.').slice(-3).join('.').replace('www.', '')
     : undefined;
 
-  const next = await browser.runtime.sendMessage({ hostname, type: 'GET_HOSTNAME_STATE' });
+  const next = await browser.runtime.sendMessage({ hostname, type: 'GET_STATE' });
   state = { ...(next ?? state), tabId: tab?.id };
 
+  if (state.issue?.url) {
+    const issueBanner = document.getElementById('issue-banner');
+    issueBanner.removeAttribute('aria-hidden');
+
+    const issueBannerText = document.getElementById('issue-banner-text');
+    if (state.issue.flags.includes('wontfix'))
+      issueBannerText.innerText = browser.i18n.getMessage('popup_bannerIssueWontFix');
+    else issueBannerText.innerText = browser.i18n.getMessage('popup_bannerIssueOpen');
+
+    const issueBannerUrl = document.getElementById('issue-banner-url');
+    issueBannerUrl.setAttribute('href', state.issue.url);
+  }
+
   const hostTextElement = document.getElementById('host');
   hostTextElement.innerText = hostname ?? 'unknown';
 
@@ -83,7 +108,7 @@ async function handleContentLoaded() {
 
   const powerButtonElement = document.getElementById('power-option');
   powerButtonElement?.addEventListener('click', handlePowerToggle);
-  if (state.enabled) powerButtonElement?.setAttribute('data-value', 'on');
+  if (state.on) powerButtonElement?.setAttribute('data-value', 'on');
   else powerButtonElement?.setAttribute('data-value', 'off');
 
   const rateButtonElement = document.getElementById('rate-option');
@@ -150,9 +175,9 @@ async function handleLinkRedirect(event) {
  * @returns {void}
  */
 function handlePowerToggle() {
-  const next = { enabled: !state.enabled };
+  const next = { on: !state.on };
 
-  browser.runtime.sendMessage({ hostname, state: next, type: 'SET_HOSTNAME_STATE' });
+  browser.runtime.sendMessage({ hostname, state: next, type: 'UPDATE_STORE' });
   browser.tabs.reload(state.tabId, { bypassCache: true });
   window.close();
 }

packages/browser-extension/src/styles/popup.css

@@ -59,7 +59,24 @@ header {
   padding: 0 16px;
 }
 
-main {
+main > .banner {
+  background-color: #f39c12;
+  color: #c0392b;
+  margin: 0px;
+  padding: 16px;
+
+  &[aria-hidden='true'] {
+    display: none;
+  }
+
+  & #issue-banner-url {
+    color: inherit;
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+main > .content {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;