feat(browser-extension): improve report functionality

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": {
+  "contextMenu_reportOption": {
-    "description": "Webseite melden...",
     "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 <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">kontaktieren Sie uns</a> <span aria-label=\"Grinsendes Gesicht mit Schweiß\" role=\"img\">😅</span>",
     "message": "Ups! Wir entschuldigen uns für die Unannehmlichkeiten, bitte <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">kontaktieren Sie uns</a> <span aria-label=\"Grinsendes Gesicht mit Schweiß\" role=\"img\">😅</span>"
   },
   "positiveText": {
-    "description": "Dankeschön! Bitte bewerten Sie unsere Erweiterung <a id=\"store\" target=\"_blank\">hier</a> <span aria-label=\"Lächelndes Gesicht mit herzförmigen Augen\" role=\"img\">😍</span>",
     "message": "Dankeschön! Bitte bewerten Sie unsere Erweiterung <a id=\"store\" target=\"_blank\">hier</a> <span aria-label=\"Lächelndes Gesicht mit herzförmigen Augen\" role=\"img\">😍</span>"
   },
-  "reportText": {
+  "reportDialog_blankPageOption": {
-    "description": "Bericht gesendet!",
+    "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 "
   }
 }

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": {
+  "contextMenu_reportOption": {
-    "description": "Report site...",
     "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 <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">contact us</a> <span aria-label=\"Grinning face with sweat\" role=\"img\">😅</span>",
     "message": "Ooops! We apologize for the inconvenience, please <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">contact us</a> <span aria-label=\"Grinning face with sweat\" role=\"img\">😅</span>"
   },
   "positiveText": {
-    "description": "Thank you! Please rate our extension <a id=\"store\" target=\"_blank\">here</a> <span aria-label=\"Smiling face with heart-shaped eyes\" role=\"img\">😍</span>",
     "message": "Thank you! Please rate our extension <a id=\"store\" target=\"_blank\">here</a> <span aria-label=\"Smiling face with heart-shaped eyes\" role=\"img\">😍</span>"
   },
-  "reportText": {
+  "reportDialog_blankPageOption": {
-    "description": "Report sent!",
+    "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 "
   }
 }

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": {
+  "contextMenu_reportOption": {
-    "description": "Reportar sitio...",
     "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 <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">contacta con nosotros</a> <span aria-label=\"Cara sonriente con sudor\" role=\"img\">😅</span>",
     "message": "¡Vaya! Sentimos lo ocurrido, por favor <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">contacta con nosotros</a> <span aria-label=\"Cara sonriente con sudor\" role=\"img\">😅</span>"
   },
   "positiveText": {
-    "description": "¡Gracias! Por favor valora la extensión <a id=\"store\" target=\"_blank\">aquí</a> <span aria-label=\"Cara sonriente con ojos en forma de corazón\" role=\"img\">😍</span>",
     "message": "¡Gracias! Por favor valora la extensión <a id=\"store\" target=\"_blank\">aquí</a> <span aria-label=\"Cara sonriente con ojos en forma de corazón\" role=\"img\">😍</span>"
   },
-  "reportText": {
+  "reportDialog_blankPageOption": {
-    "description": "¡Reporte enviado!",
+    "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 "
   }
 }

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": {
+  "contextMenu_reportOption": {
-    "description": "Signaler le site...",
     "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 <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">nous contacter</a> <span aria-label=\"Visage souriant de sueur\" role=\"img\">😅</span>",
     "message": "Oups! Nous nous excusons pour la gêne occasionnée, veuillez <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">nous contacter</a> <span aria-label=\"Visage souriant de sueur\" role=\"img\">😅</span>"
   },
   "positiveText": {
-    "description": "Merci! Veuillez évaluer notre extension <a id=\"store\" target=\"_blank\">ici</a> <span aria-label=\"Visage souriant avec des yeux en forme de coeur\" role=\"img\">😍</span>",
     "message": "Merci! Veuillez évaluer notre extension <a id=\"store\" target=\"_blank\">ici</a> <span aria-label=\"Visage souriant avec des yeux en forme de coeur\" role=\"img\">😍</span>"
   },
-  "reportText": {
+  "reportDialog_blankPageOption": {
-    "description": "Rapport envoyé!",
+    "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 "
   }
 }

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": {
+  "contextMenu_reportOption": {
-    "description": "Segnala sito...",
     "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 <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">contattaci</a> <span aria-label=\"Faccina sorridente con il sudore\" role=\"img\">😅</span>",
     "message": "Ops! Ci scusiamo per l'inconveniente, per favore <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">contattaci</a> <span aria-label=\"Faccina sorridente con il sudore\" role=\"img\">😅</span>"
   },
   "positiveText": {
-    "description": "Grazie! Valuta la nostra estensione <a id=\"store\" target=\"_blank\">qui</a> <span aria-label=\"Faccina sorridente con occhi a forma di cuore\" role=\"img\">😍</span>",
     "message": "Grazie! Valuta la nostra estensione <a id=\"store\" target=\"_blank\">qui</a> <span aria-label=\"Faccina sorridente con occhi a forma di cuore\" role=\"img\">😍</span>"
   },
-  "reportText": {
+  "reportDialog_blankPageOption": {
-    "description": "Rapporto inviato!",
+    "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 "
   }
 }

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": {
+  "contextMenu_reportOption": {
-    "description": "Reportar site...",
     "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, <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">entre em contato conosco</a> <span aria-label=\"Rosto sorridente com suor\" role=\"img\">😅</span>",
     "message": "Opa! Pedimos desculpas pelo transtorno, <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">entre em contato conosco</a> <span aria-label=\"Rosto sorridente com suor\" role=\"img\">😅</span>"
   },
   "positiveText": {
-    "description": "Obrigado! Avalie nossa extensão <a id=\"store\" target=\"_blank\">aqui</a> <span aria-label=\"Rosto sorridente com olhos em formato de coração\" role =\"img\">😍</span>",
     "message": "Obrigado! Avalie nossa extensão <a id=\"store\" target=\"_blank\">aqui</a> <span aria-label=\"Rosto sorridente com olhos em formato de coração\" role =\"img\">😍</span>"
   },
-  "reportText": {
+  "reportDialog_blankPageOption": {
-    "description": "Relatório enviado!",
+    "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 "
   }
 }

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": {
+  "contextMenu_reportOption": {
-    "description": "Reportar site...",
     "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, <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">entre em contato conosco</a> <span aria-label=\"Rosto sorridente com suor\" role=\"img\">😅</span>",
     "message": "Opa! Pedimos desculpas pelo transtorno, <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">entre em contato conosco</a> <span aria-label=\"Rosto sorridente com suor\" role=\"img\">😅</span>"
   },
   "positiveText": {
-    "description": "Obrigado! Avalie nossa extensão <a id=\"store\" target=\"_blank\">aqui</a> <span aria-label=\"Rosto sorridente com olhos em formato de coração\" role =\"img\">😍</span>",
     "message": "Obrigado! Avalie nossa extensão <a id=\"store\" target=\"_blank\">aqui</a> <span aria-label=\"Rosto sorridente com olhos em formato de coração\" role =\"img\">😍</span>"
   },
-  "reportText": {
+  "reportDialog_blankPageOption": {
-    "description": "Relatório enviado!",
+    "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 "
   }
 }

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": {
+  "contextMenu_reportOption": {
-    "description": "Raportați site-ul...",
     "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 <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">contactați-ne</a> <span aria-label=\"Chipul rânjit de sudoare\" role=\"img\">😅</span>",
     "message": "Hopa! Ne cerem scuze pentru inconvenient, vă rugăm să ne <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">contactați-ne</a> <span aria-label=\"Chipul rânjit de sudoare\" role=\"img\">😅</span>"
   },
   "positiveText": {
-    "description": "Mulțumesc! Vă rugăm să evaluați extensia noastră <a id=\"store\" target=\"_blank\">aici</a> <span aria-label=\"Față zâmbitoare cu ochi în formă de inimă\" role=\"img\">😍</span>",
     "message": "Mulțumesc! Vă rugăm să evaluați extensia noastră <a id=\"store\" target=\"_blank\">aici</a> <span aria-label=\"Față zâmbitoare cu ochi în formă de inimă\" role=\"img\">😍</span>"
   },
-  "reportText": {
+  "reportDialog_blankPageOption": {
-    "description": "Raport trimis!",
+    "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 "
   }
 }

packages/browser-extension/src/_locales/ru/messages.json

@@ -1,38 +1,53 @@
 {
   "appDesc": {
-    "description": "Кто-то сказал диалоги согласия на использование файлов cookie? 😋",
     "message": "Кто-то сказал диалоги согласия на использование файлов cookie? 😋"
   },
-  "contextMenuText": {
+  "contextMenu_reportOption": {
-    "description": "Сообщить о сайте...",
     "message": "Сообщить о сайте..."
   },
   "contributeText": {
-    "description": "Внести свой вклад в этот проект",
     "message": "Внести свой вклад в этот проект"
   },
   "helpText": {
-    "description": "Помощь или проблемы?",
     "message": "Помощь или проблемы?"
   },
   "negativeText": {
-    "description": "Ой! Приносим извинения за неудобства, пожалуйста, <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">свяжитесь с нами</a> <span aria-label=\"Улыбающееся лицо от пота\" role=\"img\">😅</span>",
     "message": "Ой! Приносим извинения за неудобства, пожалуйста, <a href=\"mailto:hello@wanhose.dev\" target=\"_blank\">свяжитесь с нами</a> <span aria-label=\"Улыбающееся лицо от пота\" role=\"img\">😅</span>"
   },
   "positiveText": {
-    "description": "Спасибо! Пожалуйста, оцените наше расширение <a id=\"store\" target=\"_blank\">здесь</a> <span aria-label=\"Улыбающееся лицо с глазами-сердечками\" role=\"img\">😍</span>",
     "message": "Спасибо! Пожалуйста, оцените наше расширение <a id=\"store\" target=\"_blank\">здесь</a> <span aria-label=\"Улыбающееся лицо с глазами-сердечками\" role=\"img\">😍</span>"
   },
-  "reportText": {
+  "reportDialog_bodyText": {
-    "description": "Отчет отправлен!",
+    "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": "Есть диалоги в "
   }
 }

packages/browser-extension/src/popup.html

@@ -29,8 +29,8 @@
             <button aria-label="Unlike" id="unlike">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                width="24"
+                width="16"
-                height="24"
+                height="16"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
@@ -40,14 +40,14 @@
               >
                 <path
                   d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"
-                ></path>
+                />
               </svg>
             </button>
             <button aria-label="Like" id="like">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                width="24"
+                width="16"
-                height="24"
+                height="16"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
@@ -57,7 +57,7 @@
               >
                 <path
                   d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"
-                ></path>
+                />
               </svg>
             </button>
           </div>
@@ -70,8 +70,8 @@
         <a href="https://www.github.com/wanhose/cookie-dialog-monster" target="_blank">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="24"
+            width="16"
-            height="24"
+            height="16"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -79,10 +79,10 @@
             stroke-linecap="round"
             stroke-linejoin="round"
           >
-            <circle cx="18" cy="18" r="3"></circle>
+            <circle cx="18" cy="18" r="3" />
-            <circle cx="6" cy="6" r="3"></circle>
+            <circle cx="6" cy="6" r="3" />
-            <path d="M13 6h3a2 2 0 0 1 2 2v7"></path>
+            <path d="M13 6h3a2 2 0 0 1 2 2v7" />
-            <line x1="6" y1="9" x2="6" y2="21"></line>
+            <line x1="6" y1="9" x2="6" y2="21" />
           </svg>
         </a>
       </div>
@@ -91,8 +91,8 @@
         <a href="mailto:hello@wanhose.dev" target="_blank">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="24"
+            width="16"
-            height="24"
+            height="16"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -100,8 +100,8 @@
             stroke-linecap="round"
             stroke-linejoin="round"
           >
-            <line x1="22" y1="2" x2="11" y2="13"></line>
+            <line x1="22" y1="2" x2="11" y2="13" />
-            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+            <polygon points="22 2 15 22 11 13 2 9 22 2" />
           </svg>
         </a>
       </div>

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'),
   });
 });
 

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 = `
+  <dialog class="report-dialog" id="${REPORT_DIALOG_ID}">
+    <div class="report-dialog-header">
+      <span>Cookie Dialog Monster</span>
+      <button class="report-dialog-close-button">
+        <svg 
+          viewBox="0 0 24 24" 
+          width="20" 
+          height="20" 
+          stroke="currentColor" 
+          stroke-width="2" 
+          fill="none" 
+          stroke-linecap="round" 
+          stroke-linejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+    </div>
+    <div class="report-dialog-body">
+      <div data-view="form">
+        <p class="report-dialog-body-text">
+          ${chrome.i18n.getMessage('reportDialog_bodyText')}
+        </p>
+        <form id="report-dialog-form">
+          <label>
+            <input name="report-dialog-option" type="radio" value="0" />
+            ${chrome.i18n.getMessage('reportDialog_cannotClick')}
+          </label>  
+          <label>
+            <input name="report-dialog-option" type="radio" value="1" />
+            ${chrome.i18n.getMessage('reportDialog_pageVisualGlitchOption')}
+          </label>
+          <label>
+            <input name="report-dialog-option" type="radio" value="2" />
+            ${chrome.i18n.getMessage('reportDialog_blankPageOption')}
+          </label>
+          <label>
+            <input name="report-dialog-option" type="radio" value="3" />
+            ${chrome.i18n.getMessage('reportDialog_laggyPageOption')}
+          </label>
+          <label>
+            <input name="report-dialog-option" type="radio" value="4" />
+            ${chrome.i18n.getMessage('reportDialog_pageNotRespondingOption')}
+          </label>
+          <label>
+            <input name="report-dialog-option" type="radio" value="5" />
+            ${chrome.i18n.getMessage('reportDialog_popupShowUpOption')}
+          </label>
+          <button class="report-dialog-submit-button" disabled type="submit">
+            ${chrome.i18n.getMessage('contextMenu_reportOption')?.replace('...', '')}
+          </button>
+        </form>
+      </div>
+      <div class="report-dialog-submit-view" data-view="submit" hidden>
+        <svg 
+          viewBox="0 0 24 24" 
+          width="48" 
+          height="48" 
+          stroke="var(--cookie-dialog-monster-color-success)" 
+          stroke-width="2" 
+          fill="none" 
+          stroke-linecap="round" 
+          stroke-linejoin="round"
+        >
+          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+          <polyline points="22 4 12 14.01 9 11.01" />
+        </svg>
+        <p class="report-dialog-submit-text">
+          ${chrome.i18n.getMessage('reportDialog_submitText')}
+        </p>
+        <p class="report-dialog-submit-extra-text">
+          ${chrome.i18n.getMessage('reportDialog_submitExtraText')}
+        </p>
+      </div>
+    </div>
+  </dialog>
+`;
+
+/**
+ * @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();
+  }
+};

packages/browser-extension/src/scripts/snackbar.js

@@ -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 = `
-      <div id="${REPORT_CONFIRMATION_ID}">
-        <div id="report-confirmation-bar"></div>
-        <div id="report-confirmation-content">
-          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" height="32" width="32">
-              <path
-                fill="#3dd9eb"
-                d="M45,22.5C45,32,36,41,24,41S3,33,3,22.5C3,14.492,14.059,12,24,12S45,14.492,45,22.5z"
-              />
-              <circle cx="17.5" cy="13.5" r="9.5" fill="#3dd9eb" />
-              <circle cx="30.5" cy="13.5" r="9.5" fill="#3dd9eb" />
-              <circle cx="17.5" cy="13.5" r="6.5" fill="#fff" />
-              <circle cx="30.5" cy="13.5" r="6.5" fill="#fff" />
-              <circle cx="18" cy="15" r="2" fill="#34495e" />
-              <circle cx="29" cy="13" r="2" fill="#34495e" />
-              <path
-                fill="#3dd9eb"
-                d="M8.118,15.007c0,0-1.91-1.046-4.118-0.007l1.5,1.817c0,0-3.994,1.404-5.486,4.525l3.16-0.632 c0,0-2.149,1.315-2.174,5.284l2.098-1.466c0,0-2.402,3.514-0.126,7.483l1.138-3.362c0,0-0.126,4.475,1.871,7.306l0.657-2.831 c0,0,0.413,3.84,3.413,5.84l-0.303-2.629c0,0,1.702,2.25,4.197,4.542l0.034-1.989L17.011,40L19,33.09L8.118,15.007z"
-              />
-              <path
-                fill="#3dd9eb"
-                d="M39.906,15.007c0,0,1.91-1.046,4.118-0.007l-1.5,1.817c0,0,3.994,1.404,5.486,4.525l-3.16-0.632 c0,0,2.149,1.315,2.174,5.284l-2.098-1.466c0,0,2.402,3.514,0.126,7.483l-1.138-3.362c0,0,0.126,4.475-1.871,7.306l-0.657-2.831 c0,0-0.413,3.84-3.413,5.84l0.303-2.629c0,0-1.702,2.25-4.197,4.542l-0.034-1.989L31.013,40l-1.989-6.91L39.906,15.007z"
-              />
-              <path
-                fill="#34495e"
-                d="M24,28.5c-5.661,0-12.909-1.736-15.24-4.643l2.34-1.877c1.478,1.842,7.626,3.52,12.9,3.52 c5.231,0,11.363-1.657,12.865-3.477l2.313,1.909C36.819,26.792,29.608,28.5,24,28.5z"
-              />
-              <path
-                fill="#34495e"
-                d="M36,25.5C36,31.851,30.075,36,24,36s-12-4.149-12-10.5c0-0.25,6.5,1.5,12,1.5S36,25.25,36,25.5z"
-              />
-              <path
-                fill="#3dd9eb"
-                d="M13.978,38.888C13.978,38.888,18,42,20,42l-2-3L13.978,38.888z"
-              />
-              <path fill="#3dd9eb" d="M34,38.888c0,0-4.022,3.112-6.022,3.112l2-3L34,38.888z" />
-              <polygon fill="#3dd9eb" points="19.034,40.472 24,43 29.011,40.404" />
-          </svg>
-          <span>${chrome.i18n.getMessage('reportText')}</span>
-        </div>
-      </div>
-    `;
-
-/**
- * @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);
-};

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;
+}

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;

packages/browser-extension/src/styles/snackbar.css

@@ -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);
-  }
-}