Fine tune new reporting feature

Add ability to bring back logger button in popup panel through the advanced setting `uiPopupConfig`. Adding `+logger` token to `uiPopupConfig` will bring back the logger icon in the mobile version of the popup panel. Additionally, the link to the logger in the Support pane will take into account whether the <Shift> key is pressed, so as to behave like the logger icon in the popup panel. Related issue: - https://github.com/uBlockOrigin/uBlock-issues/issues/1847 The troubleshooting information has been further fine-tuned to report popup panel data related to the reported page, for better diagnosis by disclosing any customization to uBO which was affecting the reported page.
2021-11-27 11:58:32 -05:00 · 2021-11-27 11:58:32 -05:00 · 1408422cba
parent 6f31f07255
commit 1408422cba
6 changed files with 79 additions and 77 deletions
--- a/src/css/popup-fenix.css
+++ b/src/css/popup-fenix.css
@ -580,9 +580,14 @@ body.godMode #actionSelector > #dynaAllow {
 :root body[data-ui~="+no-popups"] #no-popups {
    display: flex;
    }
-:root.mobile [href="logger-ui.html#_"] {
+:root.mobile [href="logger-ui.html#_"],
+:root body[data-ui~="-logger"] [href="logger-ui.html#_"] {
    display: none;
    }
+:root:not(.mobile) [href="logger-ui.html#_"],
+:root body[data-ui~="+logger"] [href="logger-ui.html#_"] {
+    display: flex;
+    }
 body:not([data-more~="a"]) [data-more="a"],
 body:not([data-more~="b"]) [data-more="b"],
 body:not([data-more~="c"]) [data-more="c"],
--- a/src/css/support.css
+++ b/src/css/support.css
@ -5,10 +5,11 @@ body {
 .body > div {
    max-width: 800px;
    }
-
+h3 {
+    margin-bottom: 0;
+    }
 .supportEntry {
    display: flex;
-    margin-top: 1em;
    }
 :root.mobile .supportEntry {
    flex-direction: column;
@ -16,13 +17,16 @@ body {
 .supportEntry > div:first-of-type {
    flex-grow: 1;
    }
+:root:not(.mobile) .supportEntry > div:first-of-type {
+    margin-inline-end: 2em;
+    }
 .supportEntry > div.hasButtons {
    align-items: center;
    display: flex;
    justify-content: space-around;
    }
 .supportEntry h3 {
-    margin-top: 0;
+    margin: 1em 0;
    }

 .e > .supportEntry {
@ -45,8 +49,7 @@ body.filterIssue .body > div:not(.e) {
 }

 button {
-    margin-inline-end: 1em;
-        -webkit-margin-end: 1em;
+    align-self: center;
    }
 span[data-url] {
    color: var(--link-ink);
--- a/src/js/messaging.js
+++ b/src/js/messaging.js
@ -490,7 +490,8 @@ const onMessage = function(request, sender, callback) {
        const pageStore = µb.pageStoreFromTabId(request.tabId);
        if ( pageStore === null ) { break; }
        const supportURL = new URL(vAPI.getURL('support.html'));
-        supportURL.searchParams.set('reportURL', pageStore.rawURL);
+        supportURL.searchParams.set('pageURL', request.pageURL);
+        supportURL.searchParams.set('popupPanel', request.popupPanel);
        µb.openNewTab({ url: supportURL.href, select: true, index: -1 });
        break;
    }
--- a/src/js/popup-fenix.js
+++ b/src/js/popup-fenix.js
@ -840,9 +840,27 @@ const gotoPick = function() {
 /******************************************************************************/

 const gotoReport = function() {
+    const popupPanel = {
+        blocked: popupData.pageCounts.blocked.any,
+    };
+    const reportedStates = [
+        { name: 'enabled', prop: 'netFilteringSwitch', expected: true },
+        { name: 'no-cosmetic-filtering', prop: 'noCosmeticFiltering', expected: false },
+        { name: 'no-large-media', prop: 'noLargeMedia', expected: false },
+        { name: 'no-popups', prop: 'noPopups', expected: false },
+        { name: 'no-remote-fonts', prop: 'noRemoteFonts', expected: false },
+        { name: 'no-scripting', prop: 'noScripting', expected: false },
+        { name: 'can-element-picker', prop: 'canElementPicker', expected: true },
+    ];
+    for ( const { name, prop, expected } of reportedStates ) {
+        if ( popupData[prop] === expected ) { continue; }
+        popupPanel[name] = !expected;
+    }
    messaging.send('popupPanel', {
        what: 'launchReporter',
        tabId: popupData.tabId,
+        pageURL: popupData.pageURL,
+        popupPanel: JSON.stringify(popupPanel),
    });

    vAPI.closePopup();
--- a/src/js/support.js
+++ b/src/js/support.js
@ -29,6 +29,8 @@ let supportData;

 const uselessKeys = [
    'modifiedHiddenSettings.benchmarkDatasetURL',
+    'modifiedHiddenSettings.consoleLogLevel',
+    'modifiedHiddenSettings.uiPopupConfig',
    'modifiedUserSettings.alwaysDetachLogger',
    'modifiedUserSettings.popupPanelSections',
    'modifiedUserSettings.externalLists',
@ -133,32 +135,6 @@ function showData() {
    const shownData = JSON.parse(JSON.stringify(supportData));
    uselessKeys.forEach(prop => { removeKey(shownData, prop); });
    const redacted = true;
-    // If the report is for a specific site, report per-site switches which
-    // are triggered on the reported site.
-    if (
-        reportHostname !== '' &&
-        shownData.switchRuleset instanceof Object &&
-        Array.isArray(shownData.switchRuleset.added)
-    ) {
-        const added = [];
-        const triggered = [];
-        for ( const rule of shownData.switchRuleset.added ) {
-            const match = /^[^:]+:\s+(\S+)/.exec(rule);
-            if (
-                match[1] === '*' ||
-                reportHostname === match[1] ||
-                reportHostname.endsWith(`.${match[1]}`)
-            ) {
-                triggered.push(rule);
-            } else {
-                added.push(rule);
-            }
-        }
-        if ( triggered.length !== 0 ) {
-            shownData.switchRuleset.triggered = triggered;
-            shownData.switchRuleset.added = added;
-        }
-    }
    if ( redacted ) {
        sensitiveValues.forEach(prop => { redactValue(shownData, prop); });
        sensitiveKeys.forEach(prop => { redactKeys(shownData, prop); });
@ -166,14 +142,17 @@ function showData() {
    for ( const prop in shownData ) {
        patchEmptiness(shownData, prop);
    }
+    if ( reportedPage !== null ) {
+        shownData.popupPanel = reportedPage.popupPanel;
+    }
    const text = JSON.stringify(shownData, null, 2)
        .split('\n')
        .slice(1, -1)
        .map(v => {
            return v
-                .replace( /^( *?)  "/, '$1')
-                .replace( /^( *.*[^\\])(?:": "|": \{$|": \[$|": )/, '$1: ')
-                .replace( /(?:",?|\},?|\],?|,)$/, '');
+                .replace(/^( *?)  "/, '$1')
+                .replace(/^( *.*[^\\])(?:": "|": \{$|": \[$|": )/, '$1: ')
+                .replace(/(?:",?|\},?|\],?|,)$/, '');
        })
        .filter(v => v.trim() !== '')
        .join('\n') + '\n';
@ -181,17 +160,18 @@ function showData() {
    cmEditor.setValue(text);
    cmEditor.clearHistory();

-    addDetailsToReportURL('filterReport', redacted === false);
-    addDetailsToReportURL('bugReport', redacted === false);
+    addDetailsToReportURL('filterReport', true);
+    addDetailsToReportURL('bugReport', true);
 }

 /******************************************************************************/

-const reportHostname = (( ) => {
+const reportedPage = (( ) => {
    const url = new URL(window.location.href);
    try {
-        const reportURL = url.searchParams.get('reportURL');
-        const parsedURL = new URL(reportURL);
+        const pageURL = url.searchParams.get('pageURL');
+        if ( pageURL === null ) { return null; }
+        const parsedURL = new URL(pageURL);
        parsedURL.username = '';
        parsedURL.password = '';
        parsedURL.hash = '';
@ -209,13 +189,14 @@ const reportHostname = (( ) => {
            option.textContent = parsedURL.href;
            select.append(option);
        }
-        if ( reportURL !== null ) {
-            document.body.classList.add('filterIssue');
-        }
-        return parsedURL.hostname.replace(/^www\./, '');
+        document.body.classList.add('filterIssue');
+        return {
+            hostname: parsedURL.hostname.replace(/^www\./, ''),
+            popupPanel: JSON.parse(url.searchParams.get('popupPanel')),
+        };
    } catch(ex) {
    }
-    return '';
+    return null;
 })();

 function reportSpecificFilterType() {
@ -225,7 +206,7 @@ function reportSpecificFilterType() {
 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 = `${reportHostname}: ${issueType}`;
+    let title = `${reportedPage.hostname}: ${issueType}`;
    if ( document.getElementById('isNSFW').checked ) {
        title = `[nsfw] ${title}`;
    }
@ -269,24 +250,26 @@ uBlockDashboard.patchCodeMirrorEditor(cmEditor);
        if ( typeof url !== 'string' || url === '' ) { return; }
        vAPI.messaging.send('default', {
            what: 'gotoURL',
-            details: { url, select: true, index: -1 },
+            details: { url, select: true, index: -1, shiftKey: ev.shiftKey },
        });
        ev.preventDefault();
    });

-    uDom('[data-i18n="supportReportSpecificButton"]').on('click', ev => {
-        reportSpecificFilterIssue(ev);
-    });
-
-    uDom('[data-i18n="supportFindSpecificButton"]').on('click', ev => {
-        const url = new URL('https://github.com/uBlockOrigin/uAssets/issues');
-        url.searchParams.set('q', `is:issue "${reportHostname}" in:title`);
-        vAPI.messaging.send('default', {
-            what: 'gotoURL',
-            details: { url: url.href, select: true, index: -1 },
+    if ( reportedPage !== null ) {
+        uDom('[data-i18n="supportReportSpecificButton"]').on('click', ev => {
+            reportSpecificFilterIssue(ev);
        });
-        ev.preventDefault();
-    });
+
+        uDom('[data-i18n="supportFindSpecificButton"]').on('click', ev => {
+            const url = new URL('https://github.com/uBlockOrigin/uAssets/issues');
+            url.searchParams.set('q', `is:issue "${reportedPage.hostname}" in:title`);
+            vAPI.messaging.send('default', {
+                what: 'gotoURL',
+                details: { url: url.href, select: true, index: -1 },
+            });
+            ev.preventDefault();
+        });
+    }

    uDom('#selectAllButton').on('click', ( ) => {
        cmEditor.focus();
--- a/src/support.html
+++ b/src/support.html
@ -18,59 +18,51 @@

 <div class="body">
    <div class="a">
+        <h3 data-i18n="supportS1H"></h3>
        <div class="supportEntry">
            <div>
-                <h3 data-i18n="supportS1H"></h3>
                <p data-i18n="supportS1P1">
            </div>
-            <div>
-                <button type="button" data-url="https://github.com/gorhill/uBlock/wiki" data-i18n="supportOpenButton"></button>
-            </div>
+            <button type="button" data-url="https://github.com/gorhill/uBlock/wiki" data-i18n="supportOpenButton"></button>
        </div>
        <hr>
    </div>
    <div class="b">
+        <h3 data-i18n="supportS2H"></h3>
        <div class="supportEntry">
            <div>
-                <h3 data-i18n="supportS2H"></h3>
                <p data-i18n="supportS2P1">
            </div>
-            <div>
-                <button type="button" data-url="https://old.reddit.com/r/uBlockOrigin/" data-i18n="supportOpenButton"></button>
-            </div>
+            <button type="button" data-url="https://old.reddit.com/r/uBlockOrigin/" data-i18n="supportOpenButton"></button>
        </div>
        <hr>
    </div>
    <div class="c">
+        <h3 data-i18n="supportS3H"></h3>
        <div class="supportEntry">
            <div>
-                <h3 data-i18n="supportS3H"></h3>
                <p data-i18n="supportS3P1">
                <p data-i18n="supportS3P2">
                <p data-i18n="supportS3P3">
            </div>
-            <div>
-                <button id="filterReport" type="button" data-url="https://github.com/uBlockOrigin/uAssets/issues/new?template=report_from_ubo.yml" data-i18n="supportOpenButton"></button>
-            </div>
+            <button id="filterReport" type="button" data-url="https://github.com/uBlockOrigin/uAssets/issues/new?template=report_from_ubo.yml" data-i18n="supportOpenButton"></button>
        </div>
        <hr>
    </div>
    <div class="d">
+        <h3 data-i18n="supportS4H"></h3>
        <div class="supportEntry">
            <div>
-                <h3 data-i18n="supportS4H"></h3>
                <p data-i18n="supportS4P1">
            </div>
-            <div>
-                <button id="bugReport" type="button" data-url="https://github.com/uBlockOrigin/uBlock-issues/issues/new?template=bug_report_from_ubo.yml" data-i18n="supportOpenButton"></button>
-            </div>
+            <button id="bugReport" type="button" data-url="https://github.com/uBlockOrigin/uBlock-issues/issues/new?template=bug_report_from_ubo.yml" data-i18n="supportOpenButton"></button>
        </div>
        <hr>
    </div>
    <div class="e">
+        <h3 data-i18n="supportS6H"></h3>
        <div class="supportEntry">
            <div>
-                <h3 data-i18n="supportS6H"></h3>
                <p data-i18n="supportS3P1">
                <p data-i18n="supportS6P1S1">
                <p>