Further improve new Support pane

For now the language locales are not available as the text on
the page needs to stabilize before asking translation
volunteers to contribute their time working on the new text.

src/css/support.css

@@ -2,6 +2,36 @@ body {
     margin-bottom: 6rem;
     }
 
+.supportEntry {
+    display: flex;
+    margin-top: 1em;
+    }
+.supportEntry > div:first-of-type {
+    flex-grow: 1;
+    }
+.supportEntry > div:last-of-type {
+    align-items: center;
+    display: flex;
+    }
+.supportEntry h3 {
+    margin-top: 0;
+    }
+
+button {
+    margin-inline-end: 1em;
+        -webkit-margin-end: 1em;
+    }
+
+body.redacted #redactButton {
+    display: none;
+    }
+#unredactButton {
+    display: none;
+    }
+body.redacted #unredactButton {
+    display: inline;
+    }
+
 .cm-string.cm-property {
     color: black;
     }

src/js/messaging.js

@@ -1276,7 +1276,9 @@ const getSupportData = async function() {
             Date.now()
         ) / 864000) / 100;
         const listDetails = {
-            title: list.title,
+            title: list.title !== '' && list.title !== listKey
+                ? list.title
+                : undefined,
             daysSinceUpdated,
             daysBeforeNextUpdate,
         };

src/js/support.js

@@ -19,25 +19,121 @@
     Home: https://github.com/gorhill/uBlock
 */
 
-/* global CodeMirror, uBlockDashboard */
+/* global CodeMirror, uBlockDashboard, uDom */
 
 'use strict';
 
 /******************************************************************************/
 
+let supportData;
+
+const sensitiveValues = [
+    'filterset',
+    'modifiedHiddenSettings.userResourcesLocation',
+    'trustedset.added',
+    'hostRuleset.added',
+    'switchRuleset.added',
+    'urlRuleset.added',
+];
+
+const sensitiveKeys = [
+    'listset.added',
+];
+
+/******************************************************************************/
+
+function redactValue(data, prop) {
+    if ( data instanceof Object === false ) { return; }
+    const pos = prop.indexOf('.');
+    if ( pos !== -1 ) {
+        return redactValue(data[prop.slice(0, pos)], prop.slice(pos + 1));
+    }
+    let value = data[prop];
+    if ( value === undefined ) { return; }
+    if ( Array.isArray(value) ) {
+        value = `[array of ${value.length} redacted]`;
+    } else {
+        value = '[redacted]';
+    }
+    data[prop] = value;
+}
+
+function redactKeys(data, prop) {
+    if ( data instanceof Object === false ) { return; }
+    const pos = prop.indexOf('.');
+    if ( pos !== -1 ) {
+        return redactKeys(data[prop.slice(0, pos)], prop.slice(pos + 1));
+    }
+    const obj = data[prop];
+    if ( obj instanceof Object === false ) { return; }
+    let count = 1;
+    for ( const key in obj ) {
+        if ( key.startsWith('file://') === false ) { continue; }
+        const newkey = `[list name ${count} redacted]`;
+        obj[newkey] = obj[key];
+        obj[key] = undefined; 
+        count += 1;
+    }
+}
+
+function showData() {
+    const shownData = JSON.parse(JSON.stringify(supportData));
+    if ( document.body.classList.contains('redacted') ) {
+        sensitiveValues.forEach(prop => { redactValue(shownData, prop); });
+        sensitiveKeys.forEach(prop => { redactKeys(shownData, prop); });
+
+        // Redact list entries which could be hosted locally
+        
+    }
+    cmEditor.setValue(JSON.stringify(shownData, null, 2));
+}
+
+/******************************************************************************/
+
+const cmEditor = new CodeMirror(document.getElementById('supportData'), {
+    autofocus: true,
+    lineWrapping: true,
+    mode: { name: 'javascript', json: true },
+    styleActiveLine: true,
+});
+
+uBlockDashboard.patchCodeMirrorEditor(cmEditor);
+
+/******************************************************************************/
+
 (async ( ) => {
-    const cmEditor = new CodeMirror(document.getElementById('supportData'), {
-        autofocus: true,
-        lineWrapping: true,
-        mode: { name: 'javascript', json: true },
-        styleActiveLine: true,
-    });
-
-    uBlockDashboard.patchCodeMirrorEditor(cmEditor);
-
-    const supportData = await vAPI.messaging.send('dashboard', {
+    supportData = await vAPI.messaging.send('dashboard', {
         what: 'getSupportData',
     });
 
-    cmEditor.setValue(JSON.stringify(supportData, null, 2));
+    // Remove unnecessary information
+    if ( supportData.modifiedHiddenSettings instanceof Object ) {
+        const o = supportData.modifiedHiddenSettings;
+        o.benchmarkDatasetURL = undefined;
+    }
+
+    showData();
+
+    uDom('button[data-url]').on('click', ev => {
+        const url = ev.target.getAttribute('data-url');
+        if ( typeof url !== 'string' || url === '' ) { return; }
+        vAPI.messaging.send('default', {
+            what: 'gotoURL',
+            details: { url, select: true },
+        });
+    });
+
+    uDom('#redactButton').on('click', ( ) => {
+        document.body.classList.add('redacted');
+        showData();
+    });
+
+    uDom('#unredactButton').on('click', ( ) => {
+        document.body.classList.remove('redacted');
+        showData();
+    });
+
+    uDom('#selectAllButton').on('click', ( ) => {
+        cmEditor.execCommand('selectAll');
+    });
 })();

src/support.html

@@ -14,10 +14,53 @@
 <link rel="stylesheet" href="css/codemirror.css">
 </head>
 
-<body>
+<body class="redacted">
 
 <div class="body">
-    <p>This page contains technical information which is useful to investigate issues.<br><b>Important:</b> you may want to redact private or sensitive information before posting the support data to a public forum.</p>
+    <div class="supportEntry">
+        <div>
+            <h3>Documentation</h3>
+            <p>Read the documentation to learn more about all of uBlock Origin's features.
+        </div>
+        <div>
+            <button type="button" data-url="https://github.com/gorhill/uBlock/wiki">Open</button>
+        </div>
+    </div>
+    <hr>
+    <div class="supportEntry">
+        <div>
+            <h3>Questions and support</h3>
+            <p>Answers to questions and other kinds of help support is provided on the subreddit /r/uBlockOrigin.
+        </div>
+        <div>
+            <button type="button" data-url="https://old.reddit.com/r/uBlockOrigin/">Open</button>
+        </div>
+    </div>
+    <hr>
+    <div class="supportEntry">
+        <div>
+            <h3>Filter issues/website is broken</h3>
+            <p>Report any issues with specific websites to uAssets issue tracker.
+            <p><b>Important:</b> Avoid using other similarly-purposed blockers along with uBlock Origin, as this may cause filter issues on specific websites.
+        </div>
+        <div>
+            <button type="button" data-url="https://github.com/uBlockOrigin/uAssets/issues">Open</button>
+        </div>
+    </div>
+    <hr>
+    <div class="supportEntry">
+        <div>
+            <h3>Bug report</h3>
+            <p>File a bug report.
+        </div>
+        <div>
+            <button type="button" data-url="https://github.com/uBlockOrigin/uBlock-issues/issues/new?assignees=&labels=&template=bug_report.yml">Open</button>
+        </div>
+    </div>
+    <hr>
+    <h3>Troubleshooting Information</h3>
+    <p>Below is technical information that might be useful when volunteers are trying to help you solve a problem. <p><b>Important:</b> you may want to redact private or sensitive information before posting to a public forum. Redacted technical information may make it more difficult to solve a problem.
+    <p><button id="redactButton" type="button">Redact</button><button id="unredactButton" type="button">Unredact</button><button id="selectAllButton" type="button">Select all</button>
     <div id="supportData" class="codeMirrorContainer"></div>
 </div>