Output scriptlet logging information to the logger

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).

Author: gorhill

assets/resources/scriptlets.js

@@ -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
@@ -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 = [];
@@ -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;
         },

platform/common/vapi-background.js

@@ -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);

src/css/fa-icons.css

@@ -218,6 +218,7 @@ body[dir="rtl"] #netInspector #filterExprPicker {
     width: 100%;
     }
 #vwRenderer .logEntry {
+    background-color: var(--surface-1);
     display: block;
     left: 0;
     overflow: hidden;
@@ -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"],
@@ -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);
@@ -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%;
@@ -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,
@@ -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;
@@ -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;

src/css/logger-ui.css

@@ -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,

src/img/fontawesome/fontawesome-defs.svg

@@ -353,6 +353,7 @@ const loadBenchmarkDataset = (( ) => {
         hostname: '',
         tabId: 0,
         url: '',
+        nocache: true,
     };
     let count = 0;
     const t0 = performance.now();

src/js/background.js

@@ -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);
     });
 });
 

src/js/benchmarks.js

@@ -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);
-    }
-};
-
 /******************************************************************************/
 /******************************************************************************/
 /*******************************************************************************
@@ -1298,7 +1276,6 @@ vAPI.DOMFilterer = class {
         const {
             noSpecificCosmeticFiltering,
             noGenericCosmeticFiltering,
-            scriptletDetails,
         } = response;
 
         vAPI.noSpecificCosmeticFiltering = noSpecificCosmeticFiltering;
@@ -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);