diff --git a/packages/browser-extension/src/popup.html b/packages/browser-extension/src/popup.html
index 7e8316b..124dd52 100644
--- a/packages/browser-extension/src/popup.html
+++ b/packages/browser-extension/src/popup.html
@@ -29,129 +29,157 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/browser-extension/src/scripts/popup.js b/packages/browser-extension/src/scripts/popup.js
index 27ad6a6..4988025 100644
--- a/packages/browser-extension/src/scripts/popup.js
+++ b/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
- * @type {{ enabled: boolean, tabId: number | undefined }}
+ * @description Popup state
+ * @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();
}
diff --git a/packages/browser-extension/src/styles/popup.css b/packages/browser-extension/src/styles/popup.css
index aaefc85..fe3342b 100644
--- a/packages/browser-extension/src/styles/popup.css
+++ b/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;