diff --git a/packages/browser-extension/src/popup.html b/packages/browser-extension/src/popup.html index c745037..aae9173 100644 --- a/packages/browser-extension/src/popup.html +++ b/packages/browser-extension/src/popup.html @@ -12,7 +12,11 @@

Cookie Dialog Monster

- - + + + +
+
- + +
+
- - +
+
diff --git a/packages/browser-extension/src/scripts/popup.js b/packages/browser-extension/src/scripts/popup.js index 4713946..1ca2998 100644 --- a/packages/browser-extension/src/scripts/popup.js +++ b/packages/browser-extension/src/scripts/popup.js @@ -90,54 +90,10 @@ function handleCancelClick() { */ async function handleContentLoaded() { const tab = await dispatch({ type: 'GET_TAB' }); - const tabUrl = tab?.url ? new URL(tab.url) : undefined; + const url = tab?.url ? new URL(tab.url) : undefined; - hostname = tabUrl?.hostname.split('.').slice(-3).join('.').replace('www.', ''); - - const next = await dispatch({ 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); - } else { - const cancelButtonElement = document.getElementsByClassName('report-cancel-button')[0]; - cancelButtonElement?.addEventListener('click', handleCancelClick); - - const reasonInputElement = document.getElementById('report-input-reason'); - reasonInputElement?.addEventListener('input', handleInputChange); - reasonInputElement?.addEventListener('keydown', handleInputKeyDown); - - if (!state.updateAvailable) { - const reportButtonElement = document.getElementById('report-button'); - reportButtonElement?.addEventListener('click', handleReportClick); - reportButtonElement?.removeAttribute('disabled'); - } - - const urlInputElement = document.getElementById('report-input-url'); - urlInputElement?.addEventListener('input', handleInputChange); - urlInputElement?.addEventListener('keydown', handleInputKeyDown); - if (tabUrl) urlInputElement?.setAttribute('value', `${tabUrl.origin}${tabUrl.pathname}`); - - const submitButtonElement = document.getElementsByClassName('report-submit-button')[0]; - submitButtonElement?.addEventListener('click', handleSubmitButtonClick); - } - - if (state.updateAvailable) { - const updateBanner = document.getElementById('update-banner'); - updateBanner.removeAttribute('aria-hidden'); - - const updateBannerUrl = document.getElementById('update-banner-url'); - updateBannerUrl.href += `/tag/${state.updateAvailable}`; - } + hostname = url?.hostname.split('.').slice(-3).join('.').replace('www.', ''); + state = { ...((await dispatch({ hostname, type: 'GET_STATE' })) ?? state), tabId: tab?.id }; const hostTextElement = document.getElementById('host'); hostTextElement.innerText = hostname ?? 'unknown'; @@ -151,14 +107,9 @@ async function handleContentLoaded() { const extensionVersionElement = document.getElementById('extension-version'); extensionVersionElement.innerText = browser.runtime.getManifest().version; - const helpButtonElement = document.getElementById('help-option'); + const helpButtonElement = document.getElementById('help-button'); helpButtonElement?.addEventListener('click', handleLinkRedirect); - const powerButtonElement = document.getElementById('power-option'); - powerButtonElement?.addEventListener('click', handlePowerToggle); - if (state.on) powerButtonElement?.setAttribute('data-value', 'on'); - else powerButtonElement?.setAttribute('data-value', 'off'); - const rateButtonElement = document.getElementById('rate-option'); rateButtonElement?.addEventListener('click', handleLinkRedirect); if (isEdge) rateButtonElement?.setAttribute('data-href', edgeUrl); @@ -170,6 +121,62 @@ async function handleContentLoaded() { translate(); await updateDatabaseVersion(); + + const { exclusions } = (await dispatch({ hostname, type: 'GET_DATA' })) ?? {}; + + if (exclusions?.domains.some((x) => url.hostname.match(x.replaceAll(/\*/g, '[^ ]*')))) { + const supportBanner = document.getElementById('support-banner'); + supportBanner.removeAttribute('aria-hidden'); + return; + } + + 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); + return; + } + + if (state.updateAvailable) { + const updateBanner = document.getElementById('update-banner'); + updateBanner.removeAttribute('aria-hidden'); + + const updateBannerUrl = document.getElementById('update-banner-url'); + updateBannerUrl.href += `/tag/${state.updateAvailable}`; + return; + } + + const cancelButtonElement = document.getElementsByClassName('report-cancel-button')[0]; + cancelButtonElement?.addEventListener('click', handleCancelClick); + + const powerButtonElement = document.getElementById('power-option'); + powerButtonElement?.addEventListener('click', handlePowerToggle); + powerButtonElement?.removeAttribute('disabled'); + if (state.on) powerButtonElement?.setAttribute('data-value', 'on'); + else powerButtonElement?.setAttribute('data-value', 'off'); + + const reasonInputElement = document.getElementById('report-input-reason'); + reasonInputElement?.addEventListener('input', handleInputChange); + reasonInputElement?.addEventListener('keydown', handleInputKeyDown); + + const reportButtonElement = document.getElementById('report-option'); + reportButtonElement?.addEventListener('click', handleReportClick); + reportButtonElement?.removeAttribute('disabled'); + + const submitButtonElement = document.getElementsByClassName('report-submit-button')[0]; + submitButtonElement?.addEventListener('click', handleSubmitButtonClick); + + const urlInputElement = document.getElementById('report-input-url'); + urlInputElement?.addEventListener('input', handleInputChange); + urlInputElement?.addEventListener('keydown', handleInputKeyDown); + if (url) urlInputElement?.setAttribute('value', `${url.origin}${url.pathname}`); } /** diff --git a/packages/browser-extension/src/styles/popup.css b/packages/browser-extension/src/styles/popup.css index 3ffa7b7..09c3be7 100644 --- a/packages/browser-extension/src/styles/popup.css +++ b/packages/browser-extension/src/styles/popup.css @@ -8,6 +8,10 @@ --color-white: #ffffff; } +b { + font-weight: bold; +} + body { box-sizing: border-box; color: var(--color-tertiary); @@ -26,30 +30,6 @@ body * { font-family: Inter, Arial, Helvetica, sans-serif; } -button { - align-items: center; - background-color: var(--color-secondary); - border: none; - border-radius: 4px; - color: var(--color-white); - display: inline-flex; - gap: 4px; - outline: none; - padding: 2px; - transition: 0.4s; - - &:focus:not(:disabled), - &:hover:not(:disabled) { - background-color: var(--color-white); - color: var(--color-secondary); - } - - &:disabled { - cursor: not-allowed; - opacity: 0.5; - } -} - footer { background-color: var(--color-secondary); flex-shrink: 0; @@ -73,11 +53,6 @@ header { & .header-actions { display: flex; gap: 8px; - - & #report-button:focus:not(:disabled) > svg, - & #report-button:hover:not(:disabled) > svg { - color: var(--color-error); - } } } @@ -99,6 +74,11 @@ main > .banner { display: none; } + &[data-variant='error'] { + background-color: #e74c3c; + color: var(--color-white); + } + &[data-variant='notice'] { background-color: #2196f3; color: var(--color-white); @@ -109,8 +89,7 @@ main > .banner { color: #c0392b; } - & #issue-banner-url, - & #update-banner-url { + & a { color: inherit; display: inline-block; vertical-align: middle; @@ -124,8 +103,28 @@ main > .content { padding: 16px; } -popup-button { +.header-button { + align-items: center; + background-color: var(--color-secondary); + border: none; border-radius: 4px; + color: var(--color-white); + display: inline-flex; + gap: 4px; + outline: none; + padding: 2px; + transition: 0.4s; + + &:focus:not(:disabled), + &:hover:not(:disabled) { + background-color: var(--color-white); + color: var(--color-secondary); + } +} + +.popup-button { + border-radius: 4px; + color: var(--color-secondary); cursor: pointer; display: grid; font-size: 14px; @@ -140,53 +139,62 @@ popup-button { transition: 0.4s; width: 100%; word-break: break-word; + + &:focus, + &:hover { + box-shadow: + rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, + rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; + } + + &:disabled { + background-color: var(--color-tertiary); + box-shadow: none; + color: var(--color-white); + cursor: not-allowed; + opacity: 0.5; + } + + & span { + align-self: flex-start; + } + + & svg { + align-self: flex-end; + } } -popup-button:focus, -popup-button:hover { - box-shadow: - rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, - rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; -} - -popup-button > span { - align-self: flex-start; -} - -popup-button > svg { - align-self: flex-end; -} - -popup-data { +.popup-data { align-items: center; display: flex; gap: 4px; justify-content: center; outline: none; + + &:not(:first-child) { + margin-top: 4px; + } } -popup-data:not(:first-child) { - margin-top: 4px; -} - -popup-data-button { +.popup-data-button { + color: var(--color-tertiary); cursor: pointer; line-height: 0; outline: none; transition: 0.4s; -} -popup-data-button[aria-disabled='true'] { - cursor: not-allowed; -} + &[aria-disabled='true'] { + cursor: not-allowed; + } -popup-data-button[data-animation='flip']:focus, -popup-data-button[data-animation='flip']:hover { - transform: rotate(-180deg); -} + &[data-animation='flip']:focus, + &[data-animation='flip']:hover { + transform: rotate(-180deg); + } -popup-data-button[data-refreshing='true'] { - animation: spin 1s linear infinite; + &[data-refreshing='true'] { + animation: spin 1s linear infinite; + } } @keyframes spin { @@ -195,7 +203,7 @@ popup-data-button[data-refreshing='true'] { } } -popup-data-container { +.popup-data-container { font-size: 12px; grid-column: 1 / -1; justify-self: center; @@ -396,10 +404,6 @@ popup-data-container { } } -b { - font-weight: bold; -} - #refresh-database-check { display: none; } @@ -407,14 +411,14 @@ b { #power-option { color: var(--color-white); word-break: break-all; -} -#power-option[data-value='off'] { - background-color: var(--color-error); -} + &[data-value='off'] { + background-color: var(--color-error); + } -#power-option[data-value='on'] { - background-color: var(--color-success); + &[data-value='on'] { + background-color: var(--color-success); + } } #rate-option > svg {