From 07e03c8ff55bf294230b8bc2904f665ad1453380 Mon Sep 17 00:00:00 2001 From: wanhose Date: Sat, 5 Oct 2024 17:20:32 +0200 Subject: [PATCH] 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 | 270 ++++++++++-------- .../browser-extension/src/scripts/popup.js | 39 ++- .../browser-extension/src/styles/popup.css | 19 +- 3 files changed, 199 insertions(+), 129 deletions(-) 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;