Skip to content

Commit

Permalink
Add a console pane to the logger
Browse files Browse the repository at this point in the history 
The console pane will report logging information reported by
scriptlets.

Related feedback:
uBlockOrigin/uBlock-issues#3096 (reply in thread)

Plus other changes.
  • Loading branch information
@gorhill
gorhill committed Apr 10, 2024
1 parent 5e7b88c commit 3b4f02d
Show file tree
Hide file tree
Showing 9 changed files with 325 additions and 310 deletions.
3 changes: 3 additions & 0 deletions src/css/fa-icons.css
View file
Expand Up @@ -101,6 +101,9 @@
.fa-icon > .fa-icon_zoom-out {
width: calc(1em * 1664 / 1792);
}
.fa-icon > .fa-icon_terminal {
width: calc(1em * 1651 / 1792);
}
.fa-icon > .fa-icon_magic {
width: calc(1em * 1637 / 1792);
}
Expand Down
1 change: 1 addition & 0 deletions src/css/logger-ui-inspector.css
View file
@@ -1,5 +1,6 @@
#domInspector {
display: none;
overflow: hidden;
}
#inspectors.dom #domInspector {
display: flex;
Expand Down
76 changes: 44 additions & 32 deletions src/css/logger-ui.css
View file
Expand Up @@ -3,7 +3,7 @@ body {
flex-direction: column;
height: 100vh;
height: 100svh;
overflow: hidden;
overflow-y: hidden;
width: 100vw;
}
textarea {
Expand Down Expand Up @@ -63,19 +63,28 @@ textarea {
=> https://devhints.io/css-system-font-stack
*/
#inspectors {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-wrap: nowrap;
font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
overflow: hidden;
position: relative;
}
.inspector {
border-top: 1px solid #ccc;
border-top: 1px solid var(--border-4);
display: flex;
flex-direction: column;
height: 100%;
}
.inspector .permatoolbar {
border-bottom: 1px solid var(--border-1);
}
.vscrollable {
direction: ltr;
flex-grow: 1;
font-size: var(--font-size-smaller);
height: 1px; /* necessary for proper space allocation by flex boxes */
overflow-x: hidden;
overflow-y: auto;
}
Expand Down Expand Up @@ -106,7 +115,6 @@ textarea {
}
#netInspector #filterExprGroup {
display: flex;
margin: 0 1em;
position: relative;
}
#netInspector #filterButton {
Expand Down Expand Up @@ -295,7 +303,7 @@ body[dir="rtl"] #netInspector #filterExprPicker {
display: inline-block;
height: 100%;
overflow: hidden;
padding: 0.2em;
padding: 2px;
vertical-align: middle;
white-space: nowrap;
word-break: break-all;
Expand Down Expand Up @@ -391,7 +399,6 @@ body[dir="rtl"] #vwRenderer .logEntry > .fields > span:first-child {
#vwRenderer .logEntry > .fields > span:nth-of-type(8) a {
align-items: center;
background-color: dimgray;
bottom: 0;
color: white;
display: none;
height: min(100%, 1.5em);
Expand All @@ -401,6 +408,7 @@ body[dir="rtl"] #vwRenderer .logEntry > .fields > span:first-child {
position: absolute;
right: 0;
text-decoration: none;
top: 0;
width: 1.5em;
}
#netInspector.vExpanded #vwRenderer .logEntry > .fields > span:nth-of-type(8) a {
Expand Down Expand Up @@ -462,21 +470,13 @@ body[dir="rtl"] #vwRenderer .logEntry > .fields > span:first-child {
width: 100%;
}

#netInspector .entryTools {
#inspectors .entryTools {
background-color: var(--surface-0);
filter: drop-shadow(2px 4px 6px black);
max-width: 640px;
min-width: min(100%, 640px);
position: absolute;
z-index: 2;
flex-basis: 50%;
}
#netInspector .entryTools:empty {
#inspectors .entryTools:empty {
display: none;
}
#netInspector .entryTools .dialogControls {
display: flex;
justify-content: stretch;
}

.closeButton {
stroke: var(--ink-1);
Expand All @@ -497,15 +497,28 @@ body[dir="rtl"] .closeButton {
.closeButton > * {
pointer-events: none;
}
.moveBand {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII=');
cursor: grab;
flex-grow: 1;
opacity: 0.5;

#inspectors #infoInspector {
flex-basis: 200%;
}
#inspectors:not(.console) #infoInspector {
display: none;
}
#inspectors #infoInspector .vscrollable {
font-family: monospace;
font-size: small;
}
#inspectors #infoInspector .vscrollable > div {
border-bottom: 1px dotted gray;
padding: 0.2em;
white-space: pre-wrap;
word-break: break-all;
}
#inspectors #infoInspector .vscrollable > div:first-of-type {
}
#inspectors #infoInspector .vscrollable > div[data-type="error"] {
color: var(--cm-negative);
}
.moving .moveBand {
cursor: grabbing;
}

#popupContainer {
background-color: var(--surface-1);
Expand Down Expand Up @@ -613,9 +626,10 @@ body[dir="rtl"] .closeButton {
align-items: center;
border-bottom: 1px solid var(--border-4);
display: flex;
justify-content: space-between;
line-height: 2;
}
.netFilteringDialog > .headers > .header {
.netFilteringDialog > .headers .header {
border: 1px solid var(--border-2);
border-bottom: 1px solid var(--border-4);
border-top-left-radius: 4px;
Expand All @@ -628,9 +642,9 @@ body[dir="rtl"] .closeButton {
position: relative;
top: 1px;
}
.netFilteringDialog[data-pane="details"] > .headers > [data-pane="details"],
.netFilteringDialog[data-pane="dynamic"] > .headers > [data-pane="dynamic"],
.netFilteringDialog[data-pane="static"] > .headers > [data-pane="static"] {
.netFilteringDialog[data-pane="details"] > .headers [data-pane="details"],
.netFilteringDialog[data-pane="dynamic"] > .headers [data-pane="dynamic"],
.netFilteringDialog[data-pane="static"] > .headers [data-pane="static"] {
background-color: var(--surface-0);
border-color: var(--border-4);
border-bottom: 1px solid transparent;
Expand All @@ -654,11 +668,11 @@ body[dir="rtl"] .closeButton {
color: var(--ink-1);
fill: var(--ink-1);
}
.netFilteringDialog.extendedRealm > .headers > .dynamic,
.netFilteringDialog.extendedRealm > .headers .dynamic,
.netFilteringDialog.extendedRealm > .panes > .dynamic {
display: none;
}
.netFilteringDialog.extendedRealm > .headers > .static,
.netFilteringDialog.extendedRealm > .headers .static,
.netFilteringDialog.extendedRealm > .panes > .static {
display: none;
}
Expand Down Expand Up @@ -875,8 +889,6 @@ body.dirty .netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
}
.netFilteringDialog > div.panes > div.static textarea {
height: 6em;
max-height: 20vh;
min-height: 10vh;
word-break: break-all;
}
.netFilteringDialog > div.panes > div.static > div:nth-of-type(2) {
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.
1 change: 1 addition & 0 deletions src/js/fa-icons.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 6 additions & 13 deletions src/js/logger-ui-inspector.js
View file
Expand Up @@ -19,10 +19,6 @@
Home: https://github.com/gorhill/uBlock
*/

/* globals browser */

'use strict';

import { dom, qs$, qsa$ } from './dom.js';

/******************************************************************************/
Expand All @@ -38,7 +34,6 @@ const domTree = qs$('#domTree');
const filterToIdMap = new Map();

let inspectedTabId = 0;
let inspectedURL = '';
let inspectedHostname = '';
let uidGenerator = 1;

Expand Down Expand Up @@ -112,7 +107,6 @@ const contentInspectorChannel = (( ) => {

const onContentMessage = msg => {
if ( msg.what === 'domLayoutFull' ) {
inspectedURL = msg.url;
inspectedHostname = msg.hostname;
renderDOMFull(msg);
} else if ( msg.what === 'domLayoutIncremental' ) {
Expand Down Expand Up @@ -661,9 +655,9 @@ const revert = ( ) => {
const toggleOn = ( ) => {
dom.cl.add('#inspectors', 'dom');
window.addEventListener('beforeunload', toggleOff);
document.addEventListener('tabIdChanged', onTabIdChanged);
domTree.addEventListener('click', onClicked, true);
domTree.addEventListener('mouseover', onMouseOver, true);
dom.on(document, 'tabIdChanged', onTabIdChanged);
dom.on(domTree, 'click', onClicked, true);
dom.on(domTree, 'mouseover', onMouseOver, true);
dom.on('#domInspector .vExpandToggler', 'click', toggleVExpandView);
dom.on('#domInspector .vCompactToggler', 'click', toggleVCompactView);
dom.on('#domInspector .hCompactToggler', 'click', toggleHCompactView);
Expand All @@ -680,9 +674,9 @@ const toggleOff = ( ) => {
dom.cl.remove('#inspectors', 'dom');
shutdownInspector();
window.removeEventListener('beforeunload', toggleOff);
document.removeEventListener('tabIdChanged', onTabIdChanged);
domTree.removeEventListener('click', onClicked, true);
domTree.removeEventListener('mouseover', onMouseOver, true);
dom.off(document, 'tabIdChanged', onTabIdChanged);
dom.off(domTree, 'click', onClicked, true);
dom.off(domTree, 'mouseover', onMouseOver, true);
dom.off('#domInspector .vExpandToggler', 'click', toggleVExpandView);
dom.off('#domInspector .vCompactToggler', 'click', toggleVCompactView);
dom.off('#domInspector .hCompactToggler', 'click', toggleHCompactView);
Expand All @@ -700,7 +694,6 @@ const toggle = ( ) => {
} else {
toggleOff();
}
logger.resize();
};

dom.on(showdomButton, 'click', toggle);
Expand Down

0 comments on commit 3b4f02d

Please sign in to comment.