Skip to content

Commit

Permalink
Fine tune new reporting feature
Browse files Browse the repository at this point in the history 
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:
- uBlockOrigin/uBlock-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.
  • Loading branch information
@gorhill
gorhill committed Nov 27, 2021
1 parent 6f31f07 commit 1408422
Show file tree
Hide file tree
Showing 6 changed files with 78 additions and 76 deletions.
7 changes: 6 additions & 1 deletion src/css/popup-fenix.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
Expand Down
13 changes: 8 additions & 5 deletions src/css/support.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,28 @@ body {
.body > div {
max-width: 800px;
}

h3 {
margin-bottom: 0;
}
.supportEntry {
display: flex;
margin-top: 1em;
}
:root.mobile .supportEntry {
flex-direction: column;
}
.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 {
Expand All @@ -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);
Expand Down
3 changes: 2 additions & 1 deletion src/js/messaging.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
18 changes: 18 additions & 0 deletions src/js/popup-fenix.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
87 changes: 35 additions & 52 deletions src/js/support.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ let supportData;

const uselessKeys = [
'modifiedHiddenSettings.benchmarkDatasetURL',
'modifiedHiddenSettings.consoleLogLevel',
'modifiedHiddenSettings.uiPopupConfig',
'modifiedUserSettings.alwaysDetachLogger',
'modifiedUserSettings.popupPanelSections',
'modifiedUserSettings.externalLists',
Expand Down Expand Up @@ -133,65 +135,43 @@ 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); });
}
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';

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 = '';
Expand All @@ -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() {
Expand All @@ -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}`;
}
Expand Down Expand Up @@ -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();
Expand Down
26 changes: 9 additions & 17 deletions src/support.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 1408422

Please sign in to comment.