Add issue type functionality for anonymous reports (#10563)

OhMyGuus · Dec 25, 2023 · cff2406 · cff2406
1 parent 5d721c7
commit cff2406
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 5 deletions.
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -136,5 +136,25 @@
   "menuLoadingText": {
     "message": "Loading...",
     "description": "Loading messsage"
+  },
+  "generalIssueOption": {
+    "message": "General issue (requires notes)",
+    "description": "The option text for a general issue"
+  },
+  "scrollbarIssueOption": {
+    "message": "Scrollbar related",
+    "description": "The option text for a scrollbar issue"
+  },
+  "modalIssueOption": {
+    "message": "Modal related",
+    "description": "The option text for a modal issue"
+  },
+  "scrollbarIssueDescription": {
+    "message": "Select this option to signify an issue on this page related to scrolling - like 'the site is not showing a scrollbar'.",
+    "description": "Explanation of what a scrollbar issue is"
+  },
+  "modalIssueDescription": {
+    "message": "Select this option to signify an issue on this page related to a modal - like 'there is a pop-up box blocking interaction'.",
+    "description": "Explanation of what a modal issue is"
   }
 }
diff --git a/src/data/background.js b/src/data/background.js
@@ -353,7 +353,7 @@ if (!isManifestV3) {
 }
 // Reporting
 
-function reportWebsite(info, tab, anon, notes, callback) {
+function reportWebsite(info, tab, anon, issueType, notes, callback) {
   if (tab.url.indexOf("http") != 0 || !tabList[tab.id]) {
     return;
   }
@@ -387,6 +387,7 @@ function reportWebsite(info, tab, anon, notes, callback) {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
+        issueType,
         notes,
         url: tab.url,
         browser: getBrowserAndVersion(),
@@ -574,6 +575,7 @@ chrome.runtime.onMessage.addListener((request, info, sendResponse) => {
             info,
             tabList[request.tabId],
             request.anon,
+            request.issueType,
             request.notes,
             sendResponse
           );

diff --git a/src/data/menu/index.html b/src/data/menu/index.html
@@ -26,7 +26,17 @@ <h3>
           <span data-translate="reportAnonTitle"></span>
           <span id="hostname">example.com</span>
         </h3>
-        <label data-translate="reportAnonNotes"></label>
+        <select id="report_issue_type">
+          <option value="general" data-translate="generalIssueOption">
+          </option>
+          <option value="scrollbar" data-translate="scrollbarIssueOption">
+          </option>
+          <option value="modal" data-translate="modalIssueOption">
+          </option>
+        </select>
+        <label id="general_issue_description" data-translate="reportAnonNotes"></label>
+        <label id="scrollbar_issue_description" data-translate="scrollbarIssueDescription"></label>
+        <label id="modal_issue_description" data-translate="modalIssueDescription"></label>
         <textarea id="report-notes"></textarea>
         <button id="report_anon_send" data-translate="reportAnonSend"></button>
         <button

diff --git a/src/data/menu/script.js b/src/data/menu/script.js
@@ -2,6 +2,10 @@ const toggle = document.getElementById("toggle");
 const refresh = document.getElementById("refresh");
 const report = document.getElementById("report");
 const options = document.getElementById("options");
+
+const issueTypeSelect = document.getElementById("report_issue_type");
+const reportNotesTextarea = document.getElementById("report-notes");
+
 let currentTab = false;
 
 toggle.addEventListener("click", function (e) {
@@ -54,14 +58,28 @@ document.getElementById("report_anon").addEventListener("click", function (e) {
   document.getElementById("hostname").textContent = currentTab.hostname;
 });
 
+issueTypeSelect.addEventListener("change", () => {
+  let issueTypeValue = issueTypeSelect.options[issueTypeSelect.selectedIndex].value;
+
+  document.querySelectorAll("label[id*='issue_description']").forEach((label) => {
+    label.style.display = "none";
+  });
+
+  reportNotesTextarea.style.display = (issueTypeValue == "general") ? "block" : "none";
+  document.getElementById(`${issueTypeValue}_issue_description`).style.display = "block";
+});
+
 document.getElementById("report_anon_send").addEventListener("click", () => {
+  let issueTypeValue = issueTypeSelect.options[issueTypeSelect.selectedIndex].value;
+
   switchMenu("menu_loading");
   chrome.runtime.sendMessage(
     {
       command: "report_website",
       tabId: currentTab.id,
       anon: true,
-      notes: document.getElementById("report-notes").value,
+      issueType: issueTypeValue,
+      notes: (issueTypeValue == "general") ? reportNotesTextarea.value : null,
     },
     (message) => {
       if (message.error) {
@@ -129,7 +147,7 @@ function translate() {
     element.textContent = chrome.i18n.getMessage(element.dataset.translate);
   }
 
-  document.getElementById("report-notes").placeholder = chrome.i18n.getMessage(
+  reportNotesTextarea.placeholder = chrome.i18n.getMessage(
     "reportNotesPlaceholder"
   );
 }

diff --git a/src/data/menu/style.css b/src/data/menu/style.css
@@ -45,8 +45,23 @@ h3 {
   margin-top: 0px;
 }
 
+#report_issue_type, label[id*='issue_description'] {
+  margin-bottom: 5px;
+}
+
+label[id*='issue_description'] {
+  color: rgb(43, 43, 43);
+  font-style: italic;
+  display: none;
+}
+
+label#general_issue_description {
+  display: block;
+}
+
 #report-notes {
-  height: 60px;
+  height: 70px;
   min-width: 100%;
   max-width: 100%;
+  margin-bottom: 5px;
 }