Add ability to report filter issue from popup panel

Related issue:
- uBlockOrigin/uBlock-issues#1541

A "chat" icon has been added to the popup panel to make
it easy to report filter issue on specific sites.

Reporting filter issues require a GitHub account, since
uBO does not have a home server through which reports could
be sent.

The report icon is available only for when uBO is enabled
on a given site.

On mobile devices, the logger icon is replaced by the "chat"
icon since it is more likely to be useful on small display
devices. The logger can always be opened from the Support
pane in the dashboard.

Author: gorhill

src/_locales/en/messages.json

@@ -127,6 +127,10 @@
     "message": "Open the logger",
     "description": "Tooltip used for the logger icon in the panel"
   },
+  "popupTipReport": {
+    "message": "Report an issue on this website",
+    "description": "Tooltip used for the 'chat' icon in the panel"
+  },
   "popupTipNoPopups": {
     "message": "Toggle the blocking of all popups for this site",
     "description": "Tooltip for the no-popups per-site switch"
@@ -856,6 +860,14 @@
     "message": "Open",
     "description": "Text for button which open an external webpage in Support pane"
   },
+  "supportReportSpecificButton": {
+    "message": "Create new report",
+    "description": "Text for button which open an external webpage in Support pane"
+  },
+  "supportFindSpecificButton": {
+    "message": "Find similar reports",
+    "description": "A clickable link in the filter issue reporter section"
+  },
   "supportS1H": {
     "message": "Documentation",
     "description": "Header of 'Documentation' section in Support pane"
@@ -908,6 +920,46 @@
     "message": "<b>Important:</b> Potentially private or sensitive information is redacted by default. Redacted information may make it more difficult to solve a problem.",
     "description": "Second paragraph of 'Troubleshooting Information' section in Support pane"
   },
+  "supportS6H": {
+    "message": "Report a filter issue",
+    "description": "Header of 'Report a filter issue' section in Support pane"
+  },
+  "supportS6P1S1": {
+    "message": "To avoid burdening volunteers with duplicate reports, please verify that the issue has not already been reported.",
+    "description": "A paragraph in the filter issue reporter section"
+  },
+  "supportS6URL": {
+    "message": "Address of the web page:",
+    "description": "Label for the URL of the page"
+  },
+  "supportS6Select1": {
+    "message": "The web page...",
+    "description": "Label for widget to select type of issue"
+  },
+  "supportS6Select1Option0": {
+    "message": "-- Pick an entry --",
+    "description": "An entry in the widget used to select the type of issue"
+  },
+  "supportS6Select1Option1": {
+    "message": "Shows ads or ad leftovers",
+    "description": "An entry in the widget used to select the type of issue"
+  },
+  "supportS6Select1Option2": {
+    "message": "Has overlays or other nuisances",
+    "description": "An entry in the widget used to select the type of issue"
+  },
+  "supportS6Select1Option3": {
+    "message": "Detects uBlock Origin",
+    "description": "An entry in the widget used to select the type of issue"
+  },
+  "supportS6Select1Option4": {
+    "message": "Has privacy-related issues",
+    "description": "An entry in the widget used to select the type of issue"
+  },
+  "supportS6Select1Option5": {
+    "message": "Breaks when uBlock Origin is enabled",
+    "description": "An entry in the widget used to select the type of issue"
+  },
   "supportRedact": {
     "message": "Redact",
     "description": "Text for 'Redact' button"

src/css/fa-icons.css

@@ -64,6 +64,7 @@
     width: calc(1em * 1794 / 1792);
     }
 .fa-icon > .fa-icon_clipboard,
+.fa-icon > .fa-icon_comment-alt,
 .fa-icon > .fa-icon_external-link,
 .fa-icon > .fa-icon_eye-dropper,
 .fa-icon > .fa-icon_eye-open,

src/css/popup-fenix.css

@@ -203,6 +203,10 @@ body.mobile.no-tooltips .toolRibbon .tool {
     font-size: 1.6em;
     }
 
+#basicTools:not(.canPick) .needPick {
+    visibility: hidden;
+    }
+
 #extraTools .fa-icon {
     align-self: center;
     position: relative;
@@ -576,6 +580,9 @@ body.godMode #actionSelector > #dynaAllow {
 :root body[data-ui~="+no-popups"] #no-popups {
     display: flex;
     }
+:root.mobile [href="logger-ui.html#_"] {
+    display: none;
+    }
 body:not([data-more~="a"]) [data-more="a"],
 body:not([data-more~="b"]) [data-more="b"],
 body:not([data-more~="c"]) [data-more="c"],

src/css/support.css

@@ -2,21 +2,52 @@ body {
     margin-bottom: 6rem;
     }
 
+.body > div {
+    max-width: 800px;
+    }
+
 .supportEntry {
     display: flex;
     margin-top: 1em;
     }
+:root.mobile .supportEntry {
+    flex-direction: column;
+    }
 .supportEntry > div:first-of-type {
     flex-grow: 1;
     }
-.supportEntry > div:last-of-type {
+.supportEntry > div.hasButtons {
     align-items: center;
     display: flex;
+    justify-content: space-around;
     }
 .supportEntry h3 {
     margin-top: 0;
     }
 
+
+.e > .supportEntry {
+    flex-direction: column;
+    }
+.e > .supportEntry > div:not(:first-of-type) {
+    margin-top: 1em;
+    }
+.e > .supportEntry *:is(input,select) {
+    padding: var(--default-gap-xxsmall);
+    }
+.e > .supportEntry input[type="url"] {
+    width: 100%;
+    }
+.e > .supportEntry *:is(input,select) {
+    max-width: calc(100% - 1em);
+    }
+body:not(.filterIssue) .body > div.e {
+    display: none;
+}
+body.filterIssue .body > div:not(.e) {
+    display: none;
+}
+
 button {
     margin-inline-end: 1em;
         -webkit-margin-end: 1em;

src/img/fontawesome/fontawesome-defs.svg

@@ -50,7 +50,10 @@ const htmlFilteringEngine = {
     },
     get discardedCount() {
         return discardedCount;
-    }
+    },
+    getFilterCount() {
+        return filterDB.size;
+    },
 };
 
 const PSelectorHasTextTask = class {