Skip to content

Commit

Permalink
Output scriptlet logging information to the logger
Browse files Browse the repository at this point in the history 
This commit brings the following changes to the logger:

All logging output generated by injected scriptlets are now sent to
the logger, the developer console will no longer be used to log
scriptlet logging information.

When the logger is not opened, the scriplets will not output any
logging information.

The goal with this new approach is to allow filter authors to
more easily assess the working of scriptlets without having to
go through scriptlet parameters to enable logging.

Consequently all the previous ways to tell scriptlets to log
information are now obsolete: if the logger is opened, the
scriptlets will log information to the logger.

Another benefit of this approach is that the dev tools do not
need to be open to obtain scriptlets logging information.

Accordingly, new filter expressions have been added to the logger:
"info" and "error". Selecting the "scriptlet" expression will also
keep the logging information from scriptlets.

A new button has been added to the logger (not yet i18n-ed): a
"volume" icon, which allows to enable verbose mode. When verbose
mode is enabled, the scriptlets may choose to output more
information regarding their inner working.

The entries in the logger will automatically expand on mouse hover.
This allows to scroll through entries which text does not fit into
a single row.

Clicking anywhere on an entry in the logger will open the detailed
view when applicable.

Generic information/errors will now be rendered regardless of which
tab is currently selected in the logger (similar to how tabless
entries are already being rendered).
  • Loading branch information
@gorhill
gorhill committed Jan 25, 2024
1 parent f1889b0 commit 869a653
Show file tree
Hide file tree
Showing 20 changed files with 640 additions and 418 deletions.
447 changes: 220 additions & 227 deletions assets/resources/scriptlets.js
View file

Large diffs are not rendered by default.

22 changes: 15 additions & 7 deletions platform/common/vapi-background.js
View file
Expand Up @@ -87,6 +87,19 @@ vAPI.app = {
},
};

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

// Generate segments of random six alphanumeric characters, thus one segment
// is a value out of 36^6 = over 2x10^9 values.

vAPI.generateSecret = (size = 1) => {
let secret = '';
while ( size-- ) {
secret += (Math.floor(Math.random() * 2176782336) + 2176782336).toString(36).slice(1);
}
return secret;
};

/*******************************************************************************
*
* https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/storage/session
Expand Down Expand Up @@ -1165,11 +1178,6 @@ vAPI.messaging = {
// Support using a new secret for every network request.

{
// Generate a 6-character alphanumeric string, thus one random value out
// of 36^6 = over 2x10^9 values.
const generateSecret = ( ) =>
(Math.floor(Math.random() * 2176782336) + 2176782336).toString(36).slice(1);

const root = vAPI.getURL('/');
const reSecret = /\?secret=(\w+)/;
const shortSecrets = [];
Expand Down Expand Up @@ -1207,15 +1215,15 @@ vAPI.messaging = {
}
}
lastShortSecretTime = Date.now();
const secret = generateSecret();
const secret = vAPI.generateSecret();
shortSecrets.push(secret);
return secret;
},
long: previous => {
if ( previous !== undefined ) {
longSecrets.delete(previous);
}
const secret = `${generateSecret()}${generateSecret()}${generateSecret()}`;
const secret = vAPI.generateSecret(3);
longSecrets.add(secret);
return secret;
},
Expand Down
1 change: 1 addition & 0 deletions src/css/fa-icons.css
View file
Expand Up @@ -95,6 +95,7 @@
.fa-icon > .fa-icon_spinner,
.fa-icon > .fa-icon_unlink,
.fa-icon > .fa-icon_upload-alt,
.fa-icon > .fa-icon_volume-up,
.fa-icon > .fa-icon_zoom-in,
.fa-icon > .fa-icon_zoom-out {
width: calc(1em * 1664 / 1792);
Expand Down
118 changes: 69 additions & 49 deletions src/css/logger-ui.css
View file
Expand Up @@ -218,6 +218,7 @@ body[dir="rtl"] #netInspector #filterExprPicker {
width: 100%;
}
#vwRenderer .logEntry {
background-color: var(--surface-1);
display: block;
left: 0;
overflow: hidden;
Expand All @@ -228,7 +229,11 @@ body[dir="rtl"] #netInspector #filterExprPicker {
display: none;
}
#vwRenderer .logEntry > div {
border-bottom: 1px dotted var(--border-1);
box-sizing: border-box;
display: flex;
height: 100%;
max-height: 200px;
white-space: nowrap;
}
#vwRenderer .logEntry > div[data-status="1"],
Expand Down Expand Up @@ -271,7 +276,7 @@ body[dir="rtl"] #netInspector #filterExprPicker {
color: white;
}
#vwRenderer .logEntry > div[data-type="error"] {
color: var(--sf-error-ink);
color: var(--cm-negative);
}
#vwRenderer .logEntry > div[data-type="info"] {
color: var(--sf-def-ink);
Expand All @@ -283,10 +288,8 @@ body[dir="rtl"] #netInspector #filterExprPicker {
opacity: 0.7;
}

#vwRenderer .logEntry > div > span {
border: 1px dotted var(--border-1);
border-top: 0;
border-right: 0;
#vwRenderer .logEntry > .fields > span {
border-left: 1px dotted var(--border-1);
box-sizing: border-box;
display: inline-block;
height: 100%;
Expand All @@ -296,86 +299,74 @@ body[dir="rtl"] #netInspector #filterExprPicker {
white-space: nowrap;
word-break: break-all;
}
#vwRenderer .logEntry > div.canDetails:hover > span {
#vwRenderer .logEntry > div:hover > span {
background-color: rgba(0,0,0,0.04);
}
body[dir="ltr"] #vwRenderer .logEntry > div > span:first-child {
body[dir="ltr"] #vwRenderer .logEntry > .fields > span:first-child {
border-left: 0;
}
body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
body[dir="rtl"] #vwRenderer .logEntry > .fields > span:first-child {
border-right: 0;
}
#vwRenderer .logEntry > div > span:nth-of-type(1) {
}
#vwRenderer .logEntry > div > span:nth-of-type(2) {
}
#vwRenderer .logEntry > div > span:nth-of-type(2) {
#vwRenderer .logEntry > .fields > span:nth-of-type(2) {
text-overflow: ellipsis;
}
#vwRenderer .logEntry > div.messageRealm > span:nth-of-type(2) ~ span {
#vwRenderer .logEntry > .fields.messageRealm > span:nth-of-type(2) ~ span {
display: none;
}
.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(2) {
.vExpanded #vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(2) {
overflow-y: auto;
white-space: pre-line;
}
#vwRenderer .logEntry > div.messageRealm[data-type="tabLoad"] > span:nth-of-type(2) {
#vwRenderer .logEntry > .fields.messageRealm[data-type="tabLoad"] > span:nth-of-type(2) {
text-align: center;
}
#vwRenderer .logEntry > div.extendedRealm > span:nth-of-type(2) > span:first-of-type {
#vwRenderer .logEntry > .fields.extendedRealm > span:nth-of-type(2) > span:first-of-type {
display: none;
}
#vwRenderer .logEntry > div.extendedRealm > span:nth-of-type(2) > span:last-of-type {
pointer-events: none;
}
#vwRenderer .logEntry > div.extendedRealm.isException > span:nth-of-type(2) > span:last-of-type {
#vwRenderer .logEntry > .fields.extendedRealm.isException > span:nth-of-type(2) > span:last-of-type {
text-decoration: line-through rgba(0,0,255,0.7);
}
#vwRenderer .logEntry > div > span:nth-of-type(3) {
#vwRenderer .logEntry > .fields > span:nth-of-type(3) {
font-family: monospace;
padding-left: 0.3em;
padding-right: 0.3em;
text-align: center;
}
#vwRenderer .logEntry > div.canDetails:hover > span:not(:nth-of-type(4)):not(:nth-of-type(8)) {
background: rgba(0, 0, 255, 0.1);
cursor: zoom-in;
}
#netInspector:not(.vExpanded) #vwRenderer .logEntry > div > span:nth-of-type(4) {
direction: rtl;
#netInspector:not(.vExpanded) #vwRenderer .logEntry > .fields > span:nth-of-type(4) {
text-align: right;
unicode-bidi: plaintext;
}
#vwRenderer #vwContent .logEntry > div > span:nth-of-type(4) {
#vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(4) {
text-overflow: ellipsis;
}
.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(4) {
.vExpanded #vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(4) {
overflow-y: auto;
text-overflow: clip;
white-space: pre-line;
}
#vwRenderer .logEntry > div > span:nth-of-type(5) {
#vwRenderer .logEntry > .fields > span:nth-of-type(5) {
text-align: center;
}
/* visual for tabless network requests */
#vwRenderer .logEntry > div > span:nth-of-type(5) {
position: relative;
}
#vwRenderer .logEntry > div > span:nth-of-type(7) {
}
#vwRenderer #vwContent .logEntry > div > span:nth-of-type(7) {
#vwRenderer .logEntry > .fields > span:nth-of-type(3),
#vwRenderer .logEntry > .fields > span:nth-of-type(5),
#vwRenderer .logEntry > .fields > span:nth-of-type(7) {
white-space: nowrap !important;
}
#vwRenderer .logEntry > div > span:nth-of-type(8) {
#vwRenderer .logEntry > .fields > span:nth-of-type(8) {
position: relative;
}
#vwRenderer #vwContent .logEntry > div > span:nth-of-type(8) {
#vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(8) {
text-overflow: ellipsis;
}
.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(8) {
.vExpanded #vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(8) {
overflow-y: auto;
white-space: pre-line;
}
#vwRenderer .logEntry > div > span:nth-of-type(8) b {
#vwRenderer .logEntry > .fields > span:nth-of-type(8) b {
font-weight: bold;
}
#vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(8) b,
Expand All @@ -396,37 +387,65 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
.netFilteringDialog > .panes > .details > div[data-status="2"] b {
background-color: rgb(var(--popup-cell-allow-surface-rgb) / 100%);
}
#vwRenderer .logEntry > div > span:nth-of-type(8) a {
#vwRenderer .logEntry > .fields > span:nth-of-type(8) a {
align-items: center;
background-color: dimgray;
bottom: 0;
color: white;
display: none;
height: 100%;
height: min(100%, 1.5em);
justify-content: center;
padding: 0 0.25em;
padding: 0.1em;
opacity: 0.4;
position: absolute;
right: 0;
text-decoration: none;
top: 0;
width: 2rem;
width: 1.5em;
}
#netInspector.vExpanded #vwRenderer .logEntry > div > span:nth-of-type(8) a {
#netInspector.vExpanded #vwRenderer .logEntry > .fields > span:nth-of-type(8) a {
bottom: 0px;
height: unset;
padding: 0.25em;
padding: 0.2em;
top: unset;
}
#vwRenderer .logEntry > div > span:nth-of-type(8) a::after {
#vwRenderer .logEntry > .fields > span:nth-of-type(8) a::after {
content: '\2197';
}
#vwRenderer .logEntry > div.networkRealm > span:nth-of-type(8):hover a {
#vwRenderer .logEntry > .fields.networkRealm > span:nth-of-type(8):hover a {
display: inline-flex;
}
#vwRenderer .logEntry > div > span:nth-of-type(8) a:hover {
#vwRenderer .logEntry > .fields > span:nth-of-type(8) a:hover {
opacity: 1;
}

@keyframes unrollRow {
to {
box-shadow: 0 2px 3px 0 #444;
height: auto;
max-height: 200px;
z-index: 1;
}
}
@keyframes unrollRowCell {
to {
height: auto;
overflow-y: auto;
white-space: pre-wrap;
}
}
#netInspector:not(.vExpanded) #vwRenderer .logEntry:hover {
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-name: unrollRow;
animation-timing-function: step-start;
}
#netInspector:not(.vExpanded) #vwRenderer .logEntry:hover > .fields > span {
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-name: unrollRowCell;
animation-timing-function: step-start;
}

#vwRenderer #vwBottom {
background-color: #00F;
height: 0;
Expand All @@ -448,6 +467,7 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
max-width: 640px;
min-width: min(100%, 640px);
position: absolute;
z-index: 2;
}
#netInspector .entryTools:empty {
display: none;
Expand Down
1 change: 1 addition & 0 deletions src/img/fontawesome/fontawesome-defs.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/js/background.js
View file
Expand Up @@ -374,7 +374,7 @@ const µBlock = { // jshint ignore:line
toLogger() {
const details = {
id: this.id,
tstamp: Date.now(),
tstamp: 0,
realm: this.realm,
method: this.getMethodName(),
type: this.stype,
Expand Down
1 change: 1 addition & 0 deletions src/js/benchmarks.js
View file
Expand Up @@ -353,6 +353,7 @@ const loadBenchmarkDataset = (( ) => {
hostname: '',
tabId: 0,
url: '',
nocache: true,
};
let count = 0;
const t0 = performance.now();
Expand Down
5 changes: 2 additions & 3 deletions src/js/click2load.js
View file
Expand Up @@ -49,9 +49,8 @@ document.body.addEventListener('click', ev => {
what: 'clickToLoad',
frameURL,
}).then(ok => {
if ( ok ) {
self.location.replace(frameURL);
}
if ( ok !== true ) { return; }
self.location.replace(frameURL);
});
});

Expand Down
31 changes: 0 additions & 31 deletions src/js/contentscript.js
View file
Expand Up @@ -460,28 +460,6 @@ vAPI.SafeAnimationFrame = class {
vAPI.domWatcher = { start, addListener, removeListener };
}

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

vAPI.injectScriptlet = function(doc, text) {
if ( !doc ) { return; }
let script, url;
try {
const blob = new self.Blob([ text ], { type: 'text/javascript; charset=utf-8' });
url = self.URL.createObjectURL(blob);
script = doc.createElement('script');
script.async = false;
script.src = url;
(doc.head || doc.documentElement || doc).appendChild(script);
} catch (ex) {
}
if ( url ) {
if ( script ) { script.remove(); }
self.URL.revokeObjectURL(url);
}
};

/******************************************************************************/
/******************************************************************************/
/*******************************************************************************
Expand Down Expand Up @@ -1298,7 +1276,6 @@ vAPI.DOMFilterer = class {
const {
noSpecificCosmeticFiltering,
noGenericCosmeticFiltering,
scriptletDetails,
} = response;

vAPI.noSpecificCosmeticFiltering = noSpecificCosmeticFiltering;
Expand All @@ -1320,14 +1297,6 @@ vAPI.DOMFilterer = class {
vAPI.userStylesheet.apply();
}

if ( scriptletDetails && typeof self.uBO_scriptletsInjected !== 'string' ) {
self.uBO_scriptletsInjected = scriptletDetails.filters;
if ( scriptletDetails.mainWorld ) {
vAPI.injectScriptlet(document, scriptletDetails.mainWorld);
vAPI.injectedScripts = scriptletDetails.mainWorld;
}
}

if ( vAPI.domSurveyor ) {
if ( Array.isArray(cfeDetails.genericCosmeticHashes) ) {
vAPI.domSurveyor.addHashes(cfeDetails.genericCosmeticHashes);
Expand Down

1 comment on commit 869a653

@gwarser
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://www.reddit.com/r/uBlockOrigin/comments/19fihsu/small_bug_in_dev_version_1551b16/

Please sign in to comment.