From 211d7f638689f65b04e34988d7835747b9189f4a Mon Sep 17 00:00:00 2001 From: wanhose Date: Mon, 10 Oct 2022 19:52:05 +0200 Subject: [PATCH] feat(browser-extension): improve report functionality --- .../src/_locales/de/messages.json | 37 ++-- .../src/_locales/en/messages.json | 37 ++-- .../src/_locales/es/messages.json | 37 ++-- .../src/_locales/fr/messages.json | 37 ++-- .../src/_locales/it/messages.json | 37 ++-- .../src/_locales/pt_BR/messages.json | 37 ++-- .../src/_locales/pt_PT/messages.json | 37 ++-- .../src/_locales/ro/messages.json | 37 ++-- .../src/_locales/ru/messages.json | 37 ++-- packages/browser-extension/src/popup.html | 32 ++-- .../src/scripts/background.js | 17 +- .../browser-extension/src/scripts/dialog.js | 177 ++++++++++++++++++ .../browser-extension/src/scripts/snackbar.js | 97 ---------- .../browser-extension/src/styles/dialog.css | 135 +++++++++++++ .../browser-extension/src/styles/popup.css | 5 - .../browser-extension/src/styles/snackbar.css | 65 ------- 16 files changed, 573 insertions(+), 288 deletions(-) create mode 100644 packages/browser-extension/src/scripts/dialog.js delete mode 100644 packages/browser-extension/src/scripts/snackbar.js create mode 100644 packages/browser-extension/src/styles/dialog.css delete mode 100644 packages/browser-extension/src/styles/snackbar.css diff --git a/packages/browser-extension/src/_locales/de/messages.json b/packages/browser-extension/src/_locales/de/messages.json index 4f55111..aaa0bab 100644 --- a/packages/browser-extension/src/_locales/de/messages.json +++ b/packages/browser-extension/src/_locales/de/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "Hat jemand Dialoge zur Cookie-Zustimmung gesagt? 😋", "message": "Hat jemand Dialoge zur Cookie-Zustimmung gesagt? 😋" }, - "contextMenuText": { - "description": "Webseite melden...", + "contextMenu_reportOption": { "message": "Webseite melden..." }, "contributeText": { - "description": "Tragen Sie zu diesem Projekt bei", "message": "Tragen Sie zu diesem Projekt bei" }, "helpText": { - "description": "Hilfe oder Probleme?", "message": "Hilfe oder Probleme?" }, "negativeText": { - "description": "Ups! Wir entschuldigen uns für die Unannehmlichkeiten, bitte kontaktieren Sie uns 😅", "message": "Ups! Wir entschuldigen uns für die Unannehmlichkeiten, bitte kontaktieren Sie uns 😅" }, "positiveText": { - "description": "Dankeschön! Bitte bewerten Sie unsere Erweiterung hier 😍", "message": "Dankeschön! Bitte bewerten Sie unsere Erweiterung hier 😍" }, - "reportText": { - "description": "Bericht gesendet!", + "reportDialog_blankPageOption": { + "message": "Seite ist leer" + }, + "reportDialog_bodyText": { + "message": "Bitte wählen Sie unten eine Option aus" + }, + "reportDialog_cannotClick": { + "message": "Kann nicht klicken" + }, + "reportDialog_laggyPageOption": { + "message": "Seite ist verzögert" + }, + "reportDialog_pageNotRespondingOption": { + "message": "Seite antwortet nicht" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "Seite enthält visuelle Störungen" + }, + "reportDialog_popupShowUpOption": { + "message": "Popup ist aufgetaucht" + }, + "reportDialog_submitExtraText": { + "message": "Wir empfehlen Ihnen dringend, die Erweiterung auf dieser Website zu deaktivieren, bis wir das Problem behoben haben." + }, + "reportDialog_submitText": { "message": "Bericht gesendet!" }, "reviewText": { - "description": "Gefällt dir diese Erweiterung?", "message": "Gefällt dir diese Erweiterung?" }, "toggleText": { - "description": "Essensdialoge in ", "message": "Essensdialoge in " } } diff --git a/packages/browser-extension/src/_locales/en/messages.json b/packages/browser-extension/src/_locales/en/messages.json index f8da84a..00b981b 100644 --- a/packages/browser-extension/src/_locales/en/messages.json +++ b/packages/browser-extension/src/_locales/en/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "Did someone say cookie consent dialogs? 😋", "message": "Did someone say cookie consent dialogs? 😋" }, - "contextMenuText": { - "description": "Report site...", + "contextMenu_reportOption": { "message": "Report site..." }, "contributeText": { - "description": "Contribute to this project", "message": "Contribute to this project" }, "helpText": { - "description": "Help or issues?", "message": "Help or issues?" }, "negativeText": { - "description": "Ooops! We apologize for the inconvenience, please contact us 😅", "message": "Ooops! We apologize for the inconvenience, please contact us 😅" }, "positiveText": { - "description": "Thank you! Please rate our extension here 😍", "message": "Thank you! Please rate our extension here 😍" }, - "reportText": { - "description": "Report sent!", + "reportDialog_blankPageOption": { + "message": "Page is blank" + }, + "reportDialog_bodyText": { + "message": "Please select an option below" + }, + "reportDialog_cannotClick": { + "message": "Cannot click" + }, + "reportDialog_laggyPageOption": { + "message": "Page is laggy" + }, + "reportDialog_pageNotRespondingOption": { + "message": "Page is not responding" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "Page contains visual glitches" + }, + "reportDialog_popupShowUpOption": { + "message": "Popup showed up" + }, + "reportDialog_submitExtraText": { + "message": "We strongly recommend you to turn off the extension in this site until we fix the issue" + }, + "reportDialog_submitText": { "message": "Report sent!" }, "reviewText": { - "description": "Do you like this extension?", "message": "Do you like this extension?" }, "toggleText": { - "description": "Eating dialogs in ", "message": "Eating dialogs in " } } diff --git a/packages/browser-extension/src/_locales/es/messages.json b/packages/browser-extension/src/_locales/es/messages.json index b9d421d..9022027 100644 --- a/packages/browser-extension/src/_locales/es/messages.json +++ b/packages/browser-extension/src/_locales/es/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "¿Alguien dijo diálogos de consentimiento de cookies? 😋", "message": "¿Alguien dijo diálogos de consentimiento de cookies? 😋" }, - "contextMenuText": { - "description": "Reportar sitio...", + "contextMenu_reportOption": { "message": "Reportar sitio..." }, "contributeText": { - "description": "Contribuye a este proyecto", "message": "Contribuye a este proyecto" }, "helpText": { - "description": "¿Ayuda o problemas?", "message": "¿Ayuda o problemas?" }, "negativeText": { - "description": "¡Vaya! Sentimos lo ocurrido, por favor contacta con nosotros 😅", "message": "¡Vaya! Sentimos lo ocurrido, por favor contacta con nosotros 😅" }, "positiveText": { - "description": "¡Gracias! Por favor valora la extensión aquí 😍", "message": "¡Gracias! Por favor valora la extensión aquí 😍" }, - "reportText": { - "description": "¡Reporte enviado!", + "reportDialog_blankPageOption": { + "message": "La página está en blanco" + }, + "reportDialog_bodyText": { + "message": "Por favor selecciona una opción" + }, + "reportDialog_cannotClick": { + "message": "No se puede hacer clic" + }, + "reportDialog_laggyPageOption": { + "message": "La página tarda mucho en cargar" + }, + "reportDialog_pageNotRespondingOption": { + "message": "La página no responde" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "La página está mal visualmente" + }, + "reportDialog_popupShowUpOption": { + "message": "Ha aparecido un diálogo" + }, + "reportDialog_submitExtraText": { + "message": "Le recomendamos encarecidamente que desactive la extensión en este sitio hasta que solucionemos el problema" + }, + "reportDialog_submitText": { "message": "¡Reporte enviado!" }, "reviewText": { - "description": "¿Te gusta esta extensión?", "message": "¿Te gusta esta extensión?" }, "toggleText": { - "description": "Comiendo diálogos en ", "message": "Comiendo diálogos en " } } diff --git a/packages/browser-extension/src/_locales/fr/messages.json b/packages/browser-extension/src/_locales/fr/messages.json index 679ebf6..d664dfb 100644 --- a/packages/browser-extension/src/_locales/fr/messages.json +++ b/packages/browser-extension/src/_locales/fr/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "Quelqu'un a-t-il dit boîtes de dialogue de consentement aux cookies? 😋", "message": "Quelqu'un a-t-il dit boîtes de dialogue de consentement aux cookies? 😋" }, - "contextMenuText": { - "description": "Signaler le site...", + "contextMenu_reportOption": { "message": "Signaler le site..." }, "contributeText": { - "description": "Contribuez à ce projet", "message": "Contribuez à ce projet" }, "helpText": { - "description": "Aide ou problèmes?", "message": "Aide ou problèmes?" }, "negativeText": { - "description": "Oups! Nous nous excusons pour la gêne occasionnée, veuillez nous contacter 😅", "message": "Oups! Nous nous excusons pour la gêne occasionnée, veuillez nous contacter 😅" }, "positiveText": { - "description": "Merci! Veuillez évaluer notre extension ici 😍", "message": "Merci! Veuillez évaluer notre extension ici 😍" }, - "reportText": { - "description": "Rapport envoyé!", + "reportDialog_blankPageOption": { + "message": "La page est vide" + }, + "reportDialog_bodyText": { + "message": "Veuillez sélectionner une option ci-dessous" + }, + "reportDialog_cannotClick": { + "message": "Impossible de cliquer" + }, + "reportDialog_laggyPageOption": { + "message": "La page est lente" + }, + "reportDialog_pageNotRespondingOption": { + "message": "La page ne répond pas" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "La page contient des problèmes visuels" + }, + "reportDialog_popupShowUpOption": { + "message": "La fenêtre contextuelle s'est affichée" + }, + "reportDialog_submitExtraText": { + "message": "Nous vous recommandons vivement de désactiver l'extension sur ce site jusqu'à ce que nous résolvions le problème" + }, + "reportDialog_submitText": { "message": "Rapport envoyé!" }, "reviewText": { - "description": "Aimez-vous cette extension?", "message": "Aimez-vous cette extension?" }, "toggleText": { - "description": "Manger des dialogues dans ", "message": "Manger des dialogues dans " } } diff --git a/packages/browser-extension/src/_locales/it/messages.json b/packages/browser-extension/src/_locales/it/messages.json index 34beb2e..be6c0a8 100644 --- a/packages/browser-extension/src/_locales/it/messages.json +++ b/packages/browser-extension/src/_locales/it/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "Qualcuno ha detto finestre di dialogo per il consenso ai cookie? 😋", "message": "Qualcuno ha detto finestre di dialogo per il consenso ai cookie? 😋" }, - "contextMenuText": { - "description": "Segnala sito...", + "contextMenu_reportOption": { "message": "Segnala sito..." }, "contributeText": { - "description": "Contribuisci a questo progetto", "message": "Contribuisci a questo progetto" }, "helpText": { - "description": "Aiuto o problemi?", "message": "Aiuto o problemi?" }, "negativeText": { - "description": "Ops! Ci scusiamo per l'inconveniente, per favore contattaci 😅", "message": "Ops! Ci scusiamo per l'inconveniente, per favore contattaci 😅" }, "positiveText": { - "description": "Grazie! Valuta la nostra estensione qui 😍", "message": "Grazie! Valuta la nostra estensione qui 😍" }, - "reportText": { - "description": "Rapporto inviato!", + "reportDialog_blankPageOption": { + "message": "La pagina è vuota" + }, + "reportDialog_bodyText": { + "message": "Seleziona un'opzione qui sotto" + }, + "reportDialog_cannotClick": { + "message": "Não é possível clicar" + }, + "reportDialog_laggyPageOption": { + "message": "La pagina è in ritardo" + }, + "reportDialog_pageNotRespondingOption": { + "message": "La pagina non risponde" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "La pagina contiene difetti visivi" + }, + "reportDialog_popupShowUpOption": { + "message": "È apparso il popup" + }, + "reportDialog_submitExtraText": { + "messaggio": "Ti consigliamo vivamente di disattivare l'estensione in questo sito finché non risolviamo il problema" + }, + "reportDialog_submitText": { "message": "Rapporto inviato!" }, "reviewText": { - "description": "Ti piace questa estensione?", "message": "Ti piace questa estensione?" }, "toggleText": { - "description": "Mangiare dialoghi in ", "message": "Mangiare dialoghi in " } } diff --git a/packages/browser-extension/src/_locales/pt_BR/messages.json b/packages/browser-extension/src/_locales/pt_BR/messages.json index ffc5032..13f6b51 100644 --- a/packages/browser-extension/src/_locales/pt_BR/messages.json +++ b/packages/browser-extension/src/_locales/pt_BR/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "Alguém disse diálogos de consentimento de cookies? 😋", "message": "Alguém disse diálogos de consentimento de cookies? 😋" }, - "contextMenuText": { - "description": "Reportar site...", + "contextMenu_reportOption": { "message": "Reportar site..." }, "contributeText": { - "description": "Contribua para este projeto", "message": "Contribua para este projeto" }, "helpText": { - "description": "Ajuda ou problemas?", "message": "Ajuda ou problemas?" }, "negativeText": { - "description": "Opa! Pedimos desculpas pelo transtorno, entre em contato conosco 😅", "message": "Opa! Pedimos desculpas pelo transtorno, entre em contato conosco 😅" }, "positiveText": { - "description": "Obrigado! Avalie nossa extensão aqui 😍", "message": "Obrigado! Avalie nossa extensão aqui 😍" }, - "reportText": { - "description": "Relatório enviado!", + "reportDialog_blankPageOption": { + "message": "A página está em branco" + }, + "reportDialog_bodyText": { + "message": "Por favor selecione uma opção abaixo" + }, + "reportDialog_cannotClick": { + "message": "Não é possível clicar" + }, + "reportDialog_laggyPageOption": { + "message": "A página está com lag" + }, + "reportDialog_pageNotRespondingOption": { + "message": "A página não está respondendo" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "A página contém falhas visuais" + }, + "reportDialog_popupShowUpOption": { + "message": "Apareceu um popup" + }, + "reportDialog_submitExtraText": { + "message": "Recomendamos fortemente que você desative a extensão neste site até corrigirmos o problema" + }, + "reportDialog_submitText": { "message": "Relatório enviado!" }, "reviewText": { - "description": "Você gosta desta extensão?", "message": "Você gosta desta extensão?" }, "toggleText": { - "description": "Comer diálogos em ", "message": "Comer diálogos em " } } diff --git a/packages/browser-extension/src/_locales/pt_PT/messages.json b/packages/browser-extension/src/_locales/pt_PT/messages.json index ffc5032..13f6b51 100644 --- a/packages/browser-extension/src/_locales/pt_PT/messages.json +++ b/packages/browser-extension/src/_locales/pt_PT/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "Alguém disse diálogos de consentimento de cookies? 😋", "message": "Alguém disse diálogos de consentimento de cookies? 😋" }, - "contextMenuText": { - "description": "Reportar site...", + "contextMenu_reportOption": { "message": "Reportar site..." }, "contributeText": { - "description": "Contribua para este projeto", "message": "Contribua para este projeto" }, "helpText": { - "description": "Ajuda ou problemas?", "message": "Ajuda ou problemas?" }, "negativeText": { - "description": "Opa! Pedimos desculpas pelo transtorno, entre em contato conosco 😅", "message": "Opa! Pedimos desculpas pelo transtorno, entre em contato conosco 😅" }, "positiveText": { - "description": "Obrigado! Avalie nossa extensão aqui 😍", "message": "Obrigado! Avalie nossa extensão aqui 😍" }, - "reportText": { - "description": "Relatório enviado!", + "reportDialog_blankPageOption": { + "message": "A página está em branco" + }, + "reportDialog_bodyText": { + "message": "Por favor selecione uma opção abaixo" + }, + "reportDialog_cannotClick": { + "message": "Não é possível clicar" + }, + "reportDialog_laggyPageOption": { + "message": "A página está com lag" + }, + "reportDialog_pageNotRespondingOption": { + "message": "A página não está respondendo" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "A página contém falhas visuais" + }, + "reportDialog_popupShowUpOption": { + "message": "Apareceu um popup" + }, + "reportDialog_submitExtraText": { + "message": "Recomendamos fortemente que você desative a extensão neste site até corrigirmos o problema" + }, + "reportDialog_submitText": { "message": "Relatório enviado!" }, "reviewText": { - "description": "Você gosta desta extensão?", "message": "Você gosta desta extensão?" }, "toggleText": { - "description": "Comer diálogos em ", "message": "Comer diálogos em " } } diff --git a/packages/browser-extension/src/_locales/ro/messages.json b/packages/browser-extension/src/_locales/ro/messages.json index 874828c..0895b1f 100644 --- a/packages/browser-extension/src/_locales/ro/messages.json +++ b/packages/browser-extension/src/_locales/ro/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "A spus cineva dialoguri de consimțământ pentru cookie? 😋", "message": "A spus cineva dialoguri de consimțământ pentru cookie? 😋" }, - "contextMenuText": { - "description": "Raportați site-ul...", + "contextMenu_reportOption": { "message": "Raportați site-ul..." }, "contributeText": { - "description": "Contribuie la acest proiect", "message": "Contribuie la acest proiect" }, "helpText": { - "description": "Ajutor sau probleme?", "message": "Ajutor sau probleme?" }, "negativeText": { - "description": "Hopa! Ne cerem scuze pentru inconvenient, vă rugăm să ne contactați-ne 😅", "message": "Hopa! Ne cerem scuze pentru inconvenient, vă rugăm să ne contactați-ne 😅" }, "positiveText": { - "description": "Mulțumesc! Vă rugăm să evaluați extensia noastră aici 😍", "message": "Mulțumesc! Vă rugăm să evaluați extensia noastră aici 😍" }, - "reportText": { - "description": "Raport trimis!", + "reportDialog_blankPageOption": { + "message": "Pagina este goală" + }, + "reportDialog_bodyText": { + "message": "Vă rugăm să selectați o opțiune de mai jos" + }, + "reportDialog_cannotClick": { + "message": "Nu se poate face clic" + }, + "reportDialog_laggyPageOption": { + "message": "Pagina este întârziată" + }, + "reportDialog_pageNotRespondingOption": { + "message": "Pagina nu răspunde" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "Pagina conține erori vizuale" + }, + "reportDialog_popupShowUpOption": { + "message": "A apărut o fereastră pop-up" + }, + "reportDialog_submitExtraText": { + "message": "Îți recomandăm insistent să dezactivați extensia de pe acest site până când remediam problema" + }, + "reportDialog_submitText": { "message": "Raport trimis!" }, "reviewText": { - "description": "Îți place această extensie?", "message": "Îți place această extensie?" }, "toggleText": { - "description": "Mâncând dialoguri în ", "message": "Mâncând dialoguri în " } } diff --git a/packages/browser-extension/src/_locales/ru/messages.json b/packages/browser-extension/src/_locales/ru/messages.json index 6dd079f..e9eedcc 100644 --- a/packages/browser-extension/src/_locales/ru/messages.json +++ b/packages/browser-extension/src/_locales/ru/messages.json @@ -1,38 +1,53 @@ { "appDesc": { - "description": "Кто-то сказал диалоги согласия на использование файлов cookie? 😋", "message": "Кто-то сказал диалоги согласия на использование файлов cookie? 😋" }, - "contextMenuText": { - "description": "Сообщить о сайте...", + "contextMenu_reportOption": { "message": "Сообщить о сайте..." }, "contributeText": { - "description": "Внести свой вклад в этот проект", "message": "Внести свой вклад в этот проект" }, "helpText": { - "description": "Помощь или проблемы?", "message": "Помощь или проблемы?" }, "negativeText": { - "description": "Ой! Приносим извинения за неудобства, пожалуйста, свяжитесь с нами 😅", "message": "Ой! Приносим извинения за неудобства, пожалуйста, свяжитесь с нами 😅" }, "positiveText": { - "description": "Спасибо! Пожалуйста, оцените наше расширение здесь 😍", "message": "Спасибо! Пожалуйста, оцените наше расширение здесь 😍" }, - "reportText": { - "description": "Отчет отправлен!", + "reportDialog_bodyText": { + "message": "Выберите вариант ниже" + }, + "reportDialog_blankPageOption": { + "message": "Страница пуста" + }, + "reportDialog_cannotClick": { + "message": "Невозможно нажать" + }, + "reportDialog_laggyPageOption": { + "message": "Страница тормозит" + }, + "reportDialog_pageNotRespondingOption": { + "message": "Страница не отвечает" + }, + "reportDialog_pageVisualGlitchOption": { + "message": "Страница содержит визуальные сбои" + }, + "reportDialog_popupShowUpOption": { + "message": "Появилось всплывающее окно" + }, + "reportDialog_submitExtraText": { + "message": "Настоятельно рекомендуем отключить расширение на этом сайте, пока мы не исправим проблему" + }, + "reportDialog_submitText": { "message": "Отчет отправлен!" }, "reviewText": { - "description": "Вам нравится это расширение?", "message": "Вам нравится это расширение?" }, "toggleText": { - "description": "Есть диалоги в ", "message": "Есть диалоги в " } } diff --git a/packages/browser-extension/src/popup.html b/packages/browser-extension/src/popup.html index 0b4825f..b036cca 100644 --- a/packages/browser-extension/src/popup.html +++ b/packages/browser-extension/src/popup.html @@ -29,8 +29,8 @@ @@ -70,8 +70,8 @@ - - - - + + + + @@ -91,8 +91,8 @@ - - + + diff --git a/packages/browser-extension/src/scripts/background.js b/packages/browser-extension/src/scripts/background.js index 82a9037..4dc929a 100644 --- a/packages/browser-extension/src/scripts/background.js +++ b/packages/browser-extension/src/scripts/background.js @@ -28,7 +28,7 @@ const refreshData = (callback) => { fetch(`${apiUrl}/data/`).then((result) => { result.json().then(({ data }) => { chrome.storage.local.set({ data }); - callback(data); + callback?.(data); }); }); }; @@ -36,17 +36,19 @@ const refreshData = (callback) => { /** * @async * @description Reports active tab URL + * @param {any} message * @param {chrome.tabs.Tab} tab */ -const report = async (tab) => { +const report = async (message, tab) => { + const reason = message.reason; + const userAgent = message.userAgent; const version = chrome.runtime.getManifest().version; - const body = JSON.stringify({ url: tab?.url, version }); + const body = JSON.stringify({ reason, url: tab.url, userAgent, version }); const headers = { 'Content-type': 'application/json' }; const url = `${apiUrl}/report/`; await fetch(url, { body, headers, method: 'POST' }); - chrome.tabs.sendMessage(tab.id, { type: 'SHOW_REPORT_CONFIRMATION' }); }; /** @@ -56,7 +58,7 @@ const report = async (tab) => { chrome.contextMenus.onClicked.addListener((info, tab) => { switch (info.menuItemId) { case reportMenuItemId: - if (tab) report(tab); + if (tab) chrome.tabs.sendMessage(tab.id, { type: 'SHOW_REPORT_DIALOG' }); break; default: break; @@ -94,6 +96,9 @@ chrome.runtime.onMessage.addListener((message, sender, callback) => { case 'GET_TAB': chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => callback(tabs[0])); break; + case 'REPORT': + if (tabId) report(message, sender.tab); + break; case 'UPDATE_STATE': if (hostname) chrome.storage.local.set({ [hostname]: message.state }); break; @@ -113,7 +118,7 @@ chrome.runtime.onInstalled.addListener(() => { contexts: ['all'], documentUrlPatterns: chrome.runtime.getManifest().content_scripts[0].matches, id: reportMenuItemId, - title: chrome.i18n.getMessage('contextMenuText'), + title: chrome.i18n.getMessage('contextMenu_reportOption'), }); }); diff --git a/packages/browser-extension/src/scripts/dialog.js b/packages/browser-extension/src/scripts/dialog.js new file mode 100644 index 0000000..9aa7320 --- /dev/null +++ b/packages/browser-extension/src/scripts/dialog.js @@ -0,0 +1,177 @@ +/** + * @description Report reasons + * @type {string[]} + */ + +const reasons = [ + 'Cannot click', + 'Page contains visual glitches', + 'Page is blank', + 'Page is laggy', + 'Page is not responding', + 'Popup showed up', +]; + +/** + * @description Listens to messages + */ + +chrome.runtime.onMessage.addListener((message) => { + switch (message.type) { + case 'HIDE_REPORT_DIALOG': + hideReportDialog(); + break; + case 'SHOW_REPORT_DIALOG': + showReportDialog(); + break; + default: + break; + } +}); + +/** + * @description Report dialog ID + */ + +const REPORT_DIALOG_ID = 'report-dialog'; + +/** + * @description Report dialog outer HTML + */ + +const REPORT_DIALOG_HTML = ` + +
+ Cookie Dialog Monster + +
+
+
+

+ ${chrome.i18n.getMessage('reportDialog_bodyText')} +

+
+ + + + + + + +
+
+ +
+ +`; + +/** + * @description Hides report dialog + */ + +const hideReportDialog = () => { + document.getElementById(REPORT_DIALOG_ID)?.close(); +}; + +/** + * @description Shows report dialog + */ + +const showReportDialog = () => { + const element = document.getElementById(REPORT_DIALOG_ID); + + if (element) { + element.showModal(); + } else { + const parser = new DOMParser(); + const result = parser.parseFromString(REPORT_DIALOG_HTML, 'text/html'); + const dialog = result.body.firstElementChild; + const closeButton = dialog.getElementsByClassName('report-dialog-close-button')[0]; + const form = dialog.querySelector('#report-dialog-form'); + const formView = dialog.querySelector('[data-view="form"]'); + const labels = dialog.getElementsByTagName('label'); + const submitButton = dialog.getElementsByClassName('report-dialog-submit-button')[0]; + const submitView = dialog.querySelector('[data-view="submit"]'); + + closeButton.addEventListener('click', () => { + dialog.close(); + formView.removeAttribute('hidden'); + submitView.setAttribute('hidden', 'true'); + }); + + form.addEventListener('submit', (event) => { + const formData = new FormData(form); + const reasonIndex = Number(formData.get('report-dialog-option')); + const reason = Number.isNaN(reasonIndex) ? 'Unknown' : reasons[reasonIndex]; + const userAgent = window.navigator.userAgent; + + event.preventDefault(); + dispatch({ userAgent, reason, type: 'REPORT' }); + formView.setAttribute('hidden', 'true'); + submitView.removeAttribute('hidden'); + }); + + for (const label of labels) { + label.addEventListener('click', () => { + submitButton.removeAttribute('disabled'); + }); + } + + document.body.appendChild(dialog); + dialog.showModal(); + } +}; diff --git a/packages/browser-extension/src/scripts/snackbar.js b/packages/browser-extension/src/scripts/snackbar.js deleted file mode 100644 index fcfc3cd..0000000 --- a/packages/browser-extension/src/scripts/snackbar.js +++ /dev/null @@ -1,97 +0,0 @@ -/** - * @description Listens to messages - */ - -chrome.runtime.onMessage.addListener((message) => { - switch (message.type) { - case 'HIDE_REPORT_CONFIRMATION': - hideReportConfirmation(); - break; - case 'SHOW_REPORT_CONFIRMATION': - showReportConfirmation(); - break; - default: - break; - } -}); - -/** - * @description Report confirmation ID - */ - -const REPORT_CONFIRMATION_ID = 'report-confirmation'; - -/** - * @description Report confirmation outer HTML - */ - -const REPORT_CONFIRMATION_HTML = ` -
-
-
- - ${chrome.i18n.getMessage('reportText')} -
-
- `; - -/** - * @description Hides report confirmation - */ - -const hideReportConfirmation = () => { - document.getElementById(REPORT_CONFIRMATION_ID)?.setAttribute('hidden', 'true'); -}; - -/** - * @description Shows report confirmation - */ - -const showReportConfirmation = () => { - const element = document.getElementById(REPORT_CONFIRMATION_ID); - - if (element) { - element.removeAttribute('hidden'); - } else { - const parser = new DOMParser(); - const result = parser.parseFromString(REPORT_CONFIRMATION_HTML, 'text/html'); - const snackbar = result.body.firstElementChild; - - document.body.appendChild(snackbar); - } - - setTimeout(() => hideReportConfirmation(), 3750); -}; diff --git a/packages/browser-extension/src/styles/dialog.css b/packages/browser-extension/src/styles/dialog.css new file mode 100644 index 0000000..af28d00 --- /dev/null +++ b/packages/browser-extension/src/styles/dialog.css @@ -0,0 +1,135 @@ +:root { + --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) !important; + border: none !important; + border-radius: 4px !important; + box-sizing: border-box !important; + color: var(--cookie-dialog-monster-color-secondary) !important; + font-family: 'Lato', Arial, Helvetica, sans-serif !important; + font-size: 14px !important; + font-weight: normal !important; + margin: auto !important; + height: 380px !important; + padding: 0px !important; + width: 320px !important; +} + +.report-dialog::backdrop { + background-color: rgba(0, 0, 0, 0.75) !important; +} + +.report-dialog * { + box-sizing: border-box !important; +} + +.report-dialog [data-view][hidden] { + display: none !important; +} + +.report-dialog-body { + height: 326px !important; + padding: 16px !important; +} + +.report-dialog-body-text { + margin: 0px !important; + padding: 0px !important; +} + +.report-dialog-close-button { + align-items: center !important; + background-color: transparent !important; + border: none !important; + border-radius: 4px !important; + color: inherit !important; + cursor: pointer !important; + display: inline-flex !important; + justify-content: center !important; + margin: 0px !important; + outline: none !important; + padding: 0px !important; + transition: 0.4s !important; +} + +.report-dialog-close-button:focus, +.report-dialog-close-button:hover { + background-color: var(--cookie-dialog-monster-color-white) !important; + color: var(--cookie-dialog-monster-color-secondary) !important; +} + +#report-dialog-form > label { + color: var(--cookie-dialog-monster-color-tertiary) !important; + cursor: pointer !important; + display: block !important; + margin-top: 16px !important; +} + +.report-dialog-header { + align-items: center !important; + background-color: var(--cookie-dialog-monster-color-secondary) !important; + color: var(--cookie-dialog-monster-color-white) !important; + display: flex !important; + font-size: 16px !important; + height: 54px; + justify-content: space-between !important; + padding: 16px !important; +} + +.report-dialog-submit-button { + background-color: var(--cookie-dialog-monster-color-secondary) !important; + border: 1px solid var(--cookie-dialog-monster-color-secondary) !important; + border-radius: 4px !important; + color: var(--cookie-dialog-monster-color-white) !important; + cursor: pointer !important; + display: block !important; + font-family: inherit !important; + font-size: inherit !important; + margin-top: 32px !important; + outline: none !important; + padding: 8px 16px !important; + text-align: center !important; + transition: 0.4s !important; + width: 100% !important; +} + +.report-dialog-submit-button:focus, +.report-dialog-submit-button:hover { + background-color: var(--cookie-dialog-monster-color-white) !important; + color: var(--cookie-dialog-monster-color-secondary) !important; +} + +.report-dialog-submit-button:disabled { + background-color: var(--cookie-dialog-monster-color-tertiary) !important; + border: 1px solid var(--cookie-dialog-monster-color-tertiary) !important; + color: var(--cookie-dialog-monster-color-white) !important; + cursor: not-allowed !important; +} + +.report-dialog-submit-extra-text { + font-size: 14px !important; + margin: 0px !important; + margin-top: 16px !important; + text-align: center !important; +} + +.report-dialog-submit-text { + font-size: 18px !important; + margin: 0px !important; + margin-top: 24px !important; + text-align: center !important; +} + +.report-dialog-submit-view { + align-items: center !important; + display: flex !important; + flex-direction: column !important; + height: 100% !important; + justify-content: center !important; +} diff --git a/packages/browser-extension/src/styles/popup.css b/packages/browser-extension/src/styles/popup.css index e395a36..d4c82ad 100644 --- a/packages/browser-extension/src/styles/popup.css +++ b/packages/browser-extension/src/styles/popup.css @@ -83,11 +83,6 @@ strong { font-weight: bold; } -svg { - height: 1rem; - width: 1rem; -} - .header-actions { align-items: center; display: flex; diff --git a/packages/browser-extension/src/styles/snackbar.css b/packages/browser-extension/src/styles/snackbar.css deleted file mode 100644 index b1e3601..0000000 --- a/packages/browser-extension/src/styles/snackbar.css +++ /dev/null @@ -1,65 +0,0 @@ -#report-confirmation { - bottom: 30px !important; - font-family: 'Lato', Arial, Helvetica, sans-serif !important; - min-width: 250px !important; - position: fixed; - right: 10px !important; - text-align: left !important; - visibility: hidden !important; - z-index: 99999 !important; -} - -#report-confirmation:not([hidden]) { - animation: fadeIn 0.5s, fadeOut 0.5s 3.5s !important; - visibility: visible !important; -} - -#report-confirmation:not([hidden]) #report-confirmation-bar { - animation: roundTime 3.5s linear forwards !important; -} - -#report-confirmation-content { - align-items: center !important; - background-color: #34495e !important; - border-radius: 2px !important; - color: #fff !important; - display: flex !important; - font-size: 14px !important; - gap: 16px !important; - overflow: hidden !important; - padding: 16px !important; -} - -#report-confirmation-bar { - background-color: #3dd9eb !important; - height: 4px !important; - transform-origin: left center !important; -} - -@keyframes fadeIn { - from { - bottom: 0; - opacity: 0; - } - to { - bottom: 30px; - opacity: 1; - } -} - -@keyframes fadeOut { - from { - bottom: 30px; - opacity: 1; - } - to { - bottom: 0; - opacity: 0; - } -} - -@keyframes roundTime { - to { - transform: scaleX(0); - } -}