feat(browser-extension): add issue banner to popup giving user some information about what's wrong and where to find the issue easily
This commit is contained in:
parent
69831ab07d
commit
07e03c8ff5
@ -29,129 +29,157 @@
|
||||
</button>
|
||||
</header>
|
||||
<main>
|
||||
<popup-button id="power-option" role="button" 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="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"
|
||||
<p aria-hidden="true" class="banner" id="issue-banner" role="alert">
|
||||
<span id="issue-banner-text"></span>
|
||||
<a aria-label="GitHub" id="issue-banner-url" target="_blank">
|
||||
<svg
|
||||
fill="none"
|
||||
height="12"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
width="12"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="12"
|
||||
id="refresh-database-spinner"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
width="12"
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
|
||||
<polyline points="15 3 21 3 21 9"></polyline>
|
||||
<line x1="10" y1="14" x2="21" y2="3"></line>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
<div class="content">
|
||||
<popup-button id="power-option" role="button" 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="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>
|
||||
<polyline points="23 20 23 14 17 14"></polyline>
|
||||
<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>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="12"
|
||||
id="refresh-database-check"
|
||||
stroke-linecap="round"
|
||||
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>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="12"
|
||||
id="refresh-database-spinner"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
width="12"
|
||||
>
|
||||
<polyline points="1 4 1 10 7 10"></polyline>
|
||||
<polyline points="23 20 23 14 17 14"></polyline>
|
||||
<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>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="12"
|
||||
id="refresh-database-check"
|
||||
stroke-linecap="round"
|
||||
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>
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user