diff --git a/packages/browser-extension/src/manifest.json b/packages/browser-extension/src/manifest.json index 43c746a..7cb0bf1 100644 --- a/packages/browser-extension/src/manifest.json +++ b/packages/browser-extension/src/manifest.json @@ -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" } diff --git a/packages/browser-extension/src/scripts/dialog.js b/packages/browser-extension/src/scripts/dialog.js deleted file mode 100644 index c9af5d6..0000000 --- a/packages/browser-extension/src/scripts/dialog.js +++ /dev/null @@ -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 = ` - -
-
Cookie Dialog Monster
-
- - - - -
-
-
-
-
- ${browser.i18n.getMessage('reportDialog_bodyText')} -
-
-
-
- ${browser.i18n.getMessage('reportDialog_urlInputLabel')} - * -
- -
- ${browser.i18n.getMessage('reportDialog_urlInputError')} -
-
-
-
- ${browser.i18n.getMessage('reportDialog_reasonInputLabel')} - * -
- -
- ${browser.i18n.getMessage('reportDialog_reasonInputError')} -
-
-
- ${browser.i18n.getMessage('contextMenu_reportOption')?.replace('...', '')} -
-
-
- -
-
-`; - -/** - * @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; - } -}); diff --git a/packages/browser-extension/src/styles/dialog.css b/packages/browser-extension/src/styles/dialog.css deleted file mode 100644 index 091fa3a..0000000 --- a/packages/browser-extension/src/styles/dialog.css +++ /dev/null @@ -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; -}