From 1408422cbaa8d1efc0832b6cf09595fcc20369d7 Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Sat, 27 Nov 2021 11:58:32 -0500 Subject: [PATCH] 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 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. --- src/css/popup-fenix.css | 7 +++- src/css/support.css | 13 +++--- src/js/messaging.js | 3 +- src/js/popup-fenix.js | 18 +++++++++ src/js/support.js | 87 +++++++++++++++++------------------------ src/support.html | 26 +++++------- 6 files changed, 78 insertions(+), 76 deletions(-) diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css index fa8c722b58c26..40922807f9d6a 100644 --- 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"], diff --git a/src/css/support.css b/src/css/support.css index 9b97493e43460..35af8d676ea50 100644 --- 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); diff --git a/src/js/messaging.js b/src/js/messaging.js index 2006e1b2a8abe..a85d77ca83076 100644 --- 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; } diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js index 8799070ffa3cc..3982f4d4f0e61 100644 --- 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(); diff --git a/src/js/support.js b/src/js/support.js index e67ea10321750..7880dfc116240 100644 --- 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); - }); + if ( reportedPage !== null ) { + 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 }, + 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(); }); - ev.preventDefault(); - }); + } uDom('#selectAllButton').on('click', ( ) => { cmEditor.focus(); diff --git a/src/support.html b/src/support.html index e9c9b40def483..c446d5674515d 100644 --- a/src/support.html +++ b/src/support.html @@ -18,59 +18,51 @@
+

-

-
- -
+
+

-

-
- -
+
+

-

-
- -
+
+

-

-
- -
+
+

-