refactor: drop old dialog stuff
This commit is contained in:
parent
46aefd4688
commit
c7f0b31dd9
@ -51,7 +51,7 @@
|
||||
"*://translate.google.it/*",
|
||||
"*://www.cookie-dialog-monster.com/*"
|
||||
],
|
||||
"js": ["scripts/content.js", "scripts/dialog.js"],
|
||||
"js": ["scripts/content.js"],
|
||||
"matches": ["http://*/*", "https://*/*"],
|
||||
"run_at": "document_start"
|
||||
}
|
||||
|
||||
@ -1,275 +0,0 @@
|
||||
if (typeof browser === 'undefined') {
|
||||
browser = chrome;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Report dialog ID
|
||||
*/
|
||||
const reportDialogId = 'report-dialog';
|
||||
|
||||
/**
|
||||
* @description Report dialog outer HTML
|
||||
*/
|
||||
const reportDialogHtml = `
|
||||
<dialog id="${reportDialogId}" tabindex="0">
|
||||
<div class="report-dialog-header">
|
||||
<div class="report-dialog-header-title">Cookie Dialog Monster</div>
|
||||
<div class="report-dialog-close-button" role="button" tabindex="0">
|
||||
<svg
|
||||
fill="none"
|
||||
height="20"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="report-dialog-body">
|
||||
<div class="report-dialog-form-view">
|
||||
<div class="report-dialog-body-text">
|
||||
${browser.i18n.getMessage('reportDialog_bodyText')}
|
||||
</div>
|
||||
<div class="report-dialog-form">
|
||||
<div class="report-dialog-input-group">
|
||||
<div class="report-dialog-input-label" id="report-dialog-label-url">
|
||||
${browser.i18n.getMessage('reportDialog_urlInputLabel')}
|
||||
<span class="report-dialog-input-label-required">*</span>
|
||||
</div>
|
||||
<input
|
||||
aria-labelledby="report-dialog-label-url"
|
||||
aria-required="true"
|
||||
class="report-dialog-input"
|
||||
id="report-dialog-input-url"
|
||||
/>
|
||||
<div class="report-dialog-input-error" id="report-dialog-input-url-error">
|
||||
${browser.i18n.getMessage('reportDialog_urlInputError')}
|
||||
</div>
|
||||
</div>
|
||||
<div class="report-dialog-input-group">
|
||||
<div class="report-dialog-input-label" id="report-dialog-label-reason">
|
||||
${browser.i18n.getMessage('reportDialog_reasonInputLabel')}
|
||||
<span class="report-dialog-input-label-required">*</span>
|
||||
</div>
|
||||
<textarea
|
||||
aria-labelledby="report-dialog-label-reason"
|
||||
aria-required="true"
|
||||
class="report-dialog-input"
|
||||
id="report-dialog-input-reason"
|
||||
rows="4"
|
||||
>${browser.i18n.getMessage('reportDialog_reasonInputPlaceholder')}</textarea>
|
||||
<div class="report-dialog-input-error" id="report-dialog-input-reason-error">
|
||||
${browser.i18n.getMessage('reportDialog_reasonInputError')}
|
||||
</div>
|
||||
</div>
|
||||
<div class="report-dialog-submit-button" role="button" tabindex="0">
|
||||
${browser.i18n.getMessage('contextMenu_reportOption')?.replace('...', '')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="report-dialog-submit-view" hidden>
|
||||
<svg
|
||||
fill="none"
|
||||
height="48"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
stroke="var(--cookie-dialog-monster-color-success)"
|
||||
viewBox="0 0 24 24"
|
||||
width="48"
|
||||
>
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
|
||||
<polyline points="22 4 12 14.01 9 11.01" />
|
||||
</svg>
|
||||
<div class="report-dialog-submit-text">
|
||||
${browser.i18n.getMessage('reportDialog_submitText')}
|
||||
</div>
|
||||
<div class="report-dialog-submit-extra-text">
|
||||
${browser.i18n.getMessage('reportDialog_submitExtraText')}
|
||||
</div>
|
||||
<div class="report-dialog-issue-button" role="button" tabindex="0">
|
||||
${browser.i18n.getMessage('contextMenu_issueOption')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
`;
|
||||
|
||||
/**
|
||||
* @description Dialog close button click handler
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
function closeButtonClickHandler(event) {
|
||||
const dialog = document.getElementById(reportDialogId);
|
||||
|
||||
event.preventDefault();
|
||||
dialog?.remove();
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Hide report dialog
|
||||
*/
|
||||
function hideReportDialog() {
|
||||
document.getElementById(reportDialogId)?.remove();
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Input change handler
|
||||
* @param {InputEvent} event
|
||||
*/
|
||||
function inputChangeHandler(event) {
|
||||
event.currentTarget.removeAttribute('aria-invalid');
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Input key down handler
|
||||
* @param {KeyboardEvent} event
|
||||
*/
|
||||
function inputKeyDownHandler(event) {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
event.currentTarget.blur();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Show report dialog
|
||||
*/
|
||||
function showReportDialog() {
|
||||
const existingDialog = document.getElementById(reportDialogId);
|
||||
|
||||
if (existingDialog) {
|
||||
const submitButton = existingDialog.getElementsByClassName('report-dialog-submit-button')[0];
|
||||
const urlInput = existingDialog.querySelector('#report-dialog-input-url');
|
||||
|
||||
existingDialog.showModal();
|
||||
submitButton.setAttribute('aria-disabled', 'false');
|
||||
urlInput.setAttribute('value', window.location.origin + window.location.pathname);
|
||||
return;
|
||||
}
|
||||
|
||||
const parser = new DOMParser();
|
||||
const result = parser.parseFromString(reportDialogHtml, 'text/html');
|
||||
const dialog = result.body.firstElementChild;
|
||||
const closeButton = dialog.getElementsByClassName('report-dialog-close-button')[0];
|
||||
const link = document.createElement('link');
|
||||
const reasonInput = dialog?.querySelector('#report-dialog-input-reason');
|
||||
const submitButton = dialog?.getElementsByClassName('report-dialog-submit-button')[0];
|
||||
const urlInput = dialog?.querySelector('#report-dialog-input-url');
|
||||
|
||||
closeButton.addEventListener('click', closeButtonClickHandler);
|
||||
urlInput.setAttribute('value', window.location.origin + window.location.pathname);
|
||||
link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Inter');
|
||||
link.setAttribute('id', 'report-dialog-font');
|
||||
link.setAttribute('rel', 'stylesheet');
|
||||
reasonInput.addEventListener('input', inputChangeHandler);
|
||||
reasonInput.addEventListener('keydown', inputKeyDownHandler);
|
||||
submitButton.addEventListener('click', submitButtonClickHandler);
|
||||
urlInput.addEventListener('input', inputChangeHandler);
|
||||
urlInput.addEventListener('keydown', inputKeyDownHandler);
|
||||
|
||||
dispatch({ type: 'INSERT_DIALOG_CSS' });
|
||||
document.body.appendChild(dialog);
|
||||
document.head.appendChild(link);
|
||||
dialog.showModal();
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Dialog submit button click handler
|
||||
* @param {MouseEvent} event
|
||||
*/
|
||||
async function submitButtonClickHandler(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if (event.currentTarget.getAttribute('aria-disabled') === 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
event.currentTarget.setAttribute('aria-disabled', 'true');
|
||||
|
||||
const dialog = document.getElementById(reportDialogId);
|
||||
const reasonInput = dialog?.querySelector('#report-dialog-input-reason');
|
||||
const reasonText = reasonInput?.value.trim();
|
||||
const urlInput = dialog?.querySelector('#report-dialog-input-url');
|
||||
const urlText = urlInput?.value.trim();
|
||||
|
||||
const errors = validateForm({ reason: reasonText, url: urlText });
|
||||
|
||||
if (errors) {
|
||||
if (errors.reason) {
|
||||
reasonInput?.setAttribute('aria-invalid', 'true');
|
||||
reasonInput?.setAttribute('aria-errormessage', 'report-dialog-input-reason-error');
|
||||
}
|
||||
|
||||
if (errors.url) {
|
||||
urlInput?.setAttribute('aria-invalid', 'true');
|
||||
urlInput?.setAttribute('aria-errormessage', 'report-dialog-input-url-error');
|
||||
}
|
||||
|
||||
event.currentTarget.setAttribute('aria-disabled', 'false');
|
||||
return;
|
||||
}
|
||||
|
||||
const formView = dialog?.getElementsByClassName('report-dialog-form-view')[0];
|
||||
const issueButton = dialog?.getElementsByClassName('report-dialog-issue-button')[0];
|
||||
const submitView = dialog?.getElementsByClassName('report-dialog-submit-view')[0];
|
||||
const userAgent = window.navigator.userAgent;
|
||||
const issueUrl = await dispatch({ userAgent, reason: reasonText, url: urlText, type: 'REPORT' });
|
||||
const issue = { expiresIn: Date.now() + 8 * 60 * 60 * 1000, flags: ['bug'], url: issueUrl };
|
||||
|
||||
await dispatch({ hostname, state: { issue }, type: 'UPDATE_STORE' });
|
||||
await dispatch({ hostname, type: 'ENABLE_ICON' });
|
||||
formView?.setAttribute('hidden', 'true');
|
||||
issueButton?.addEventListener('click', () => window.open(issueUrl, '_blank'));
|
||||
submitView?.removeAttribute('hidden');
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Validate form
|
||||
* @param {{ reason: string | undefined | undefined, url: string | undefined }} params
|
||||
* @returns {{ reason: string | undefined, url: string | undefined } | undefined}
|
||||
*/
|
||||
function validateForm(params) {
|
||||
const { reason, url } = params;
|
||||
let errors = undefined;
|
||||
|
||||
if (!reason || reason.length < 10 || reason.length > 1000) {
|
||||
errors = {
|
||||
...(errors ?? {}),
|
||||
reason: browser.i18n.getMessage('reportDialog_reasonInputError'),
|
||||
};
|
||||
}
|
||||
|
||||
try {
|
||||
new URL(url);
|
||||
} catch {
|
||||
errors = {
|
||||
...(errors ?? {}),
|
||||
url: browser.i18n.getMessage('reportDialog_urlInputError'),
|
||||
};
|
||||
}
|
||||
|
||||
return errors;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description Listen to messages
|
||||
*/
|
||||
browser.runtime.onMessage.addListener((message) => {
|
||||
const isPage = window === window.top;
|
||||
|
||||
switch (message.type) {
|
||||
case 'HIDE_REPORT_DIALOG':
|
||||
if (isPage) hideReportDialog();
|
||||
break;
|
||||
case 'SHOW_REPORT_DIALOG':
|
||||
if (isPage) showReportDialog();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
@ -1,276 +0,0 @@
|
||||
:root {
|
||||
--cookie-dialog-monster-color-error: #cc0000;
|
||||
--cookie-dialog-monster-color-primary: #3dd9eb;
|
||||
--cookie-dialog-monster-color-secondary: #34495e;
|
||||
--cookie-dialog-monster-color-success: #5cb85c;
|
||||
--cookie-dialog-monster-color-tertiary: #6b7280;
|
||||
--cookie-dialog-monster-color-white: #ffffff;
|
||||
}
|
||||
|
||||
#report-dialog {
|
||||
background-color: var(--cookie-dialog-monster-color-white);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
color: var(--cookie-dialog-monster-color-secondary);
|
||||
font-size: 100%;
|
||||
letter-spacing: normal;
|
||||
margin: auto;
|
||||
padding: 0px;
|
||||
text-align: left;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
#report-dialog::backdrop {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#report-dialog * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#report-dialog div {
|
||||
all: unset;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#report-dialog *::-moz-selection {
|
||||
color: var(--cookie-dialog-monster-color-white);
|
||||
background: var(--cookie-dialog-monster-color-tertiary);
|
||||
}
|
||||
|
||||
#report-dialog *::selection {
|
||||
color: var(--cookie-dialog-monster-color-white);
|
||||
background: var(--cookie-dialog-monster-color-tertiary);
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-body {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-body-text {
|
||||
display: block;
|
||||
font-family: Inter, Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-close-button {
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
margin: 0px;
|
||||
outline: none;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-close-button {
|
||||
stroke: var(--cookie-dialog-monster-color-white);
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-close-button:focus,
|
||||
#report-dialog .report-dialog-close-button:hover > svg {
|
||||
stroke: var(--cookie-dialog-monster-color-secondary);
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-close-button:focus-visible {
|
||||
box-shadow: initial;
|
||||
transition: initial;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-close-button:focus,
|
||||
#report-dialog .report-dialog-close-button:hover {
|
||||
background-color: var(--cookie-dialog-monster-color-white);
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-form {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-form-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-form-view[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-header {
|
||||
align-items: center;
|
||||
background-color: var(--cookie-dialog-monster-color-secondary);
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
height: 54px;
|
||||
justify-content: space-between;
|
||||
line-height: 1.2;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-header-title {
|
||||
color: var(--cookie-dialog-monster-color-white);
|
||||
font-family: Inter, Arial, Helvetica, sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-input {
|
||||
all: unset;
|
||||
border: 1px solid var(--cookie-dialog-monster-color-tertiary);
|
||||
border-radius: 4px;
|
||||
color: var(--cookie-dialog-monster-color-secondary);
|
||||
cursor: text;
|
||||
font-family: Inter, Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
outline: none;
|
||||
padding: 12px 8px;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-input:hover {
|
||||
border-color: var(--cookie-dialog-monster-color-secondary);
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-input:focus {
|
||||
border-color: var(--cookie-dialog-monster-color-primary);
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-input:focus-visible {
|
||||
box-shadow: initial;
|
||||
transition: initial;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-input::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-input[aria-invalid='true'] {
|
||||
border-color: var(--cookie-dialog-monster-color-error);
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-input[aria-invalid='true'] + .report-dialog-input-error {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-input[aria-multiline='false'] {
|
||||
-ms-overflow-style: none;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-input[aria-multiline='true'] {
|
||||
-ms-overflow-style: none;
|
||||
height: 120px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-input-error {
|
||||
color: var(--cookie-dialog-monster-color-error);
|
||||
font-family: Inter, Arial, Helvetica, sans-serif;
|
||||
font-size: 10px;
|
||||
line-height: 1.2;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-input-group {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-input-label {
|
||||
color: var(--cookie-dialog-monster-color-secondary);
|
||||
font-family: Inter, Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-input-label-required {
|
||||
color: var(--cookie-dialog-monster-color-error);
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-issue-button,
|
||||
#report-dialog .report-dialog-submit-button {
|
||||
align-items: center;
|
||||
background-color: var(--cookie-dialog-monster-color-secondary);
|
||||
border: 1px solid var(--cookie-dialog-monster-color-secondary);
|
||||
border-radius: 4px;
|
||||
color: var(--cookie-dialog-monster-color-white);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
font-family: Inter, Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
height: 42px;
|
||||
justify-content: center;
|
||||
line-height: 1.2;
|
||||
outline: none;
|
||||
padding: 8px 16px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-issue-button:focus,
|
||||
#report-dialog .report-dialog-issue-button:hover,
|
||||
#report-dialog .report-dialog-submit-button:focus,
|
||||
#report-dialog .report-dialog-submit-button:hover {
|
||||
background-color: var(--cookie-dialog-monster-color-white);
|
||||
color: var(--cookie-dialog-monster-color-secondary);
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-issue-button:focus-visible,
|
||||
#report-dialog .report-dialog-submit-button:focus-visible {
|
||||
box-shadow: initial;
|
||||
transition: initial;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-issue-button[aria-disabled='true'],
|
||||
#report-dialog .report-dialog-submit-button[aria-disabled='true'] {
|
||||
background-color: var(--cookie-dialog-monster-color-tertiary);
|
||||
border: 1px solid var(--cookie-dialog-monster-color-tertiary);
|
||||
color: var(--cookie-dialog-monster-color-white);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-submit-extra-text {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
margin: 0px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-submit-text {
|
||||
font-family: inherit;
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-submit-view {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Inter, Arial, Helvetica, sans-serif;
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
#report-dialog .report-dialog-submit-view[hidden] {
|
||||
display: none;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user