Allow reporter to select a choice of URLs to report

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/1836

The URL to report can now be picked from a list of related
URLs in order to allow the reporter to publish edited version
of the reported URL.

Additionally, the hash, user name, and password which could be
present in a reported URL are always removed.

src/css/support.css

@@ -25,20 +25,16 @@ body {
     margin-top: 0;
     }
 
-
 .e > .supportEntry {
     flex-direction: column;
     }
 .e > .supportEntry > div:not(:first-of-type) {
     margin-top: 1em;
     }
-.e > .supportEntry *:is(input,select) {
+.e > .supportEntry select {
     padding: var(--default-gap-xxsmall);
     }
-.e > .supportEntry input[type="url"] {
+.e > .supportEntry select {
-    width: 100%;
-    }
-.e > .supportEntry *:is(input,select) {
     max-width: calc(100% - 1em);
     }
 body:not(.filterIssue) .body > div.e {

src/js/support.js

@@ -29,6 +29,7 @@ let supportData;
 
 const uselessKeys = [
     'modifiedHiddenSettings.benchmarkDatasetURL',
+    'modifiedUserSettings.alwaysDetachLogger',
     'modifiedUserSettings.popupPanelSections',
     'modifiedUserSettings.externalLists',
     'modifiedUserSettings.importedLists',
@@ -135,19 +136,18 @@ function showData() {
     // If the report is for a specific site, report per-site switches which
     // are triggered on the reported site.
     if (
-        reportURL !== null &&
+        reportHostname !== '' &&
         shownData.switchRuleset instanceof Object &&
         Array.isArray(shownData.switchRuleset.added)
     ) {
-        const hostname = reportURL.hostname;
         const added = [];
         const triggered = [];
         for ( const rule of shownData.switchRuleset.added ) {
             const match = /^[^:]+:\s+(\S+)/.exec(rule);
             if (
                 match[1] === '*' ||
-                hostname === match[1] ||
+                reportHostname === match[1] ||
-                hostname.endsWith(`.${match[1]}`)
+                reportHostname.endsWith(`.${match[1]}`)
             ) {
                 triggered.push(rule);
             } else {
@@ -187,37 +187,54 @@ function showData() {
 
 /******************************************************************************/
 
-const reportURL = (( ) => {
+const reportHostname = (( ) => {
     const url = new URL(window.location.href);
     try {
         const reportURL = url.searchParams.get('reportURL');
+        const parsedURL = new URL(reportURL);
+        parsedURL.username = '';
+        parsedURL.password = '';
+        parsedURL.hash = '';
+        const select = document.querySelector('select[name="url"]');
+        select.options[0].textContent = parsedURL.href;
+        if ( parsedURL.search !== '' ) {
+            const option = document.createElement('option');
+            parsedURL.search = '';
+            option.textContent = parsedURL.href;
+            select.append(option);
+        }
+        if ( parsedURL.pathname !== '/' ) {
+            const option = document.createElement('option');
+            parsedURL.pathname = '';
+            option.textContent = parsedURL.href;
+            select.append(option);
+        }
         if ( reportURL !== null ) {
             document.body.classList.add('filterIssue');
         }
-        document.querySelector('[data-i18n="supportS6URL"] ~ input').value = reportURL;
+        return parsedURL.hostname.replace(/^www\./, '');
-        return new URL(reportURL);
     } catch(ex) {
     }
-    return null;
+    return '';
 })();
 
-function reportSpecificFilterHostname() {
-    return reportURL.hostname.replace(/^www\./, '');
-}
-
 function reportSpecificFilterType() {
-    return document.querySelector('[data-i18n="supportS6Select1"] ~ select').value;
+    return document.querySelector('select[name="type"]').value;
 }
 
 function reportSpecificFilterIssue(ev) {
     const githubURL = new URL('https://github.com/uBlockOrigin/uAssets/issues/new?template=specific_report_from_ubo.yml');
     const issueType = reportSpecificFilterType();
-    let title = `${reportSpecificFilterHostname()}: ${issueType}`;
+    let title = `${reportHostname}: ${issueType}`;
     if ( document.getElementById('isNSFW').checked ) {
         title = `[nsfw] ${title}`;
     }
     githubURL.searchParams.set('title', title);
-    githubURL.searchParams.set('url_address_of_the_web_page', '`' + reportURL.href + '`');
+    githubURL.searchParams.set(
+        'url_address_of_the_web_page', '`' +
+        document.querySelector('select[name="url"]').value +
+        '`'
+    );
     githubURL.searchParams.set('category', issueType);
     githubURL.searchParams.set('configuration', configToMarkdown(true));
     vAPI.messaging.send('default', {
@@ -263,7 +280,7 @@ uBlockDashboard.patchCodeMirrorEditor(cmEditor);
 
     uDom('[data-i18n="supportFindSpecificButton"]').on('click', ev => {
         const url = new URL('https://github.com/uBlockOrigin/uAssets/issues');
-        url.searchParams.set('q', `is:issue "${reportSpecificFilterHostname()}" in:title`);
+        url.searchParams.set('q', `is:issue "${reportHostname}" in:title`);
         vAPI.messaging.send('default', {
             what: 'gotoURL',
             details: { url: url.href, select: true, index: -1 },

src/support.html

@@ -75,10 +75,12 @@
                 <p data-i18n="supportS6P1S1">
                 <p>
                     <label data-i18n="supportS6URL"></label><br>
-                    <input type="url" spellcheck="false" required>
+                    <select name="url">
+                        <option></option>
+                    </select>
                 <p>
                     <label data-i18n="supportS6Select1"></label><br>
-                    <select>
+                    <select name="type">
                         <option value="[unknown]" data-i18n="supportS6Select1Option0" selected disabled></option>
                         <option value="ads" data-i18n="supportS6Select1Option1"></option>
                         <option value="detection" data-i18n="supportS6Select1Option3"></option>