Skip to content

Commit 3b4f02d

Browse files
gorhillgorhill
committed
Add a console pane to the logger
The console pane will report logging information reported by scriptlets. Related feedback: uBlockOrigin/uBlock-issues#3096 (reply in thread) Plus other changes.
1 parent 5e7b88c commit 3b4f02d

File tree

9 files changed

+325
-310
lines changed

9 files changed

+325
-310
lines changed

‎src/css/fa-icons.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,9 @@
101101
.fa-icon > .fa-icon_zoom-out {
102102
width: calc(1em * 1664 / 1792);
103103
}
104+
.fa-icon > .fa-icon_terminal {
105+
width: calc(1em * 1651 / 1792);
106+
}
104107
.fa-icon > .fa-icon_magic {
105108
width: calc(1em * 1637 / 1792);
106109
}

‎src/css/logger-ui-inspector.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
#domInspector {
22
display: none;
3+
overflow: hidden;
34
}
45
#inspectors.dom #domInspector {
56
display: flex;

‎src/css/logger-ui.css‎

Lines changed: 44 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ body {
33
flex-direction: column;
44
height: 100vh;
55
height: 100svh;
6-
overflow: hidden;
6+
overflow-y: hidden;
77
width: 100vw;
88
}
99
textarea {
@@ -63,19 +63,28 @@ textarea {
6363
=> https://devhints.io/css-system-font-stack
6464
*/
6565
#inspectors {
66+
display: flex;
67+
flex-direction: column;
6668
flex-grow: 1;
69+
flex-wrap: nowrap;
6770
font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
71+
overflow: hidden;
6872
position: relative;
6973
}
7074
.inspector {
71-
border-top: 1px solid #ccc;
75+
border-top: 1px solid var(--border-4);
7276
display: flex;
7377
flex-direction: column;
78+
height: 100%;
79+
}
80+
.inspector .permatoolbar {
81+
border-bottom: 1px solid var(--border-1);
7482
}
7583
.vscrollable {
7684
direction: ltr;
7785
flex-grow: 1;
7886
font-size: var(--font-size-smaller);
87+
height: 1px; /* necessary for proper space allocation by flex boxes */
7988
overflow-x: hidden;
8089
overflow-y: auto;
8190
}
@@ -106,7 +115,6 @@ textarea {
106115
}
107116
#netInspector #filterExprGroup {
108117
display: flex;
109-
margin: 0 1em;
110118
position: relative;
111119
}
112120
#netInspector #filterButton {
@@ -295,7 +303,7 @@ body[dir="rtl"] #netInspector #filterExprPicker {
295303
display: inline-block;
296304
height: 100%;
297305
overflow: hidden;
298-
padding: 0.2em;
306+
padding: 2px;
299307
vertical-align: middle;
300308
white-space: nowrap;
301309
word-break: break-all;
@@ -391,7 +399,6 @@ body[dir="rtl"] #vwRenderer .logEntry > .fields > span:first-child {
391399
#vwRenderer .logEntry > .fields > span:nth-of-type(8) a {
392400
align-items: center;
393401
background-color: dimgray;
394-
bottom: 0;
395402
color: white;
396403
display: none;
397404
height: min(100%, 1.5em);
@@ -401,6 +408,7 @@ body[dir="rtl"] #vwRenderer .logEntry > .fields > span:first-child {
401408
position: absolute;
402409
right: 0;
403410
text-decoration: none;
411+
top: 0;
404412
width: 1.5em;
405413
}
406414
#netInspector.vExpanded #vwRenderer .logEntry > .fields > span:nth-of-type(8) a {
@@ -462,21 +470,13 @@ body[dir="rtl"] #vwRenderer .logEntry > .fields > span:first-child {
462470
width: 100%;
463471
}
464472

465-
#netInspector .entryTools {
473+
#inspectors .entryTools {
466474
background-color: var(--surface-0);
467-
filter: drop-shadow(2px 4px 6px black);
468-
max-width: 640px;
469-
min-width: min(100%, 640px);
470-
position: absolute;
471-
z-index: 2;
475+
flex-basis: 50%;
472476
}
473-
#netInspector .entryTools:empty {
477+
#inspectors .entryTools:empty {
474478
display: none;
475479
}
476-
#netInspector .entryTools .dialogControls {
477-
display: flex;
478-
justify-content: stretch;
479-
}
480480

481481
.closeButton {
482482
stroke: var(--ink-1);
@@ -497,15 +497,28 @@ body[dir="rtl"] .closeButton {
497497
.closeButton > * {
498498
pointer-events: none;
499499
}
500-
.moveBand {
501-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII=');
502-
cursor: grab;
503-
flex-grow: 1;
504-
opacity: 0.5;
500+
501+
#inspectors #infoInspector {
502+
flex-basis: 200%;
503+
}
504+
#inspectors:not(.console) #infoInspector {
505+
display: none;
506+
}
507+
#inspectors #infoInspector .vscrollable {
508+
font-family: monospace;
509+
font-size: small;
510+
}
511+
#inspectors #infoInspector .vscrollable > div {
512+
border-bottom: 1px dotted gray;
513+
padding: 0.2em;
514+
white-space: pre-wrap;
515+
word-break: break-all;
516+
}
517+
#inspectors #infoInspector .vscrollable > div:first-of-type {
518+
}
519+
#inspectors #infoInspector .vscrollable > div[data-type="error"] {
520+
color: var(--cm-negative);
505521
}
506-
.moving .moveBand {
507-
cursor: grabbing;
508-
}
509522

510523
#popupContainer {
511524
background-color: var(--surface-1);
@@ -613,9 +626,10 @@ body[dir="rtl"] .closeButton {
613626
align-items: center;
614627
border-bottom: 1px solid var(--border-4);
615628
display: flex;
629+
justify-content: space-between;
616630
line-height: 2;
617631
}
618-
.netFilteringDialog > .headers > .header {
632+
.netFilteringDialog > .headers .header {
619633
border: 1px solid var(--border-2);
620634
border-bottom: 1px solid var(--border-4);
621635
border-top-left-radius: 4px;
@@ -628,9 +642,9 @@ body[dir="rtl"] .closeButton {
628642
position: relative;
629643
top: 1px;
630644
}
631-
.netFilteringDialog[data-pane="details"] > .headers > [data-pane="details"],
632-
.netFilteringDialog[data-pane="dynamic"] > .headers > [data-pane="dynamic"],
633-
.netFilteringDialog[data-pane="static"] > .headers > [data-pane="static"] {
645+
.netFilteringDialog[data-pane="details"] > .headers [data-pane="details"],
646+
.netFilteringDialog[data-pane="dynamic"] > .headers [data-pane="dynamic"],
647+
.netFilteringDialog[data-pane="static"] > .headers [data-pane="static"] {
634648
background-color: var(--surface-0);
635649
border-color: var(--border-4);
636650
border-bottom: 1px solid transparent;
@@ -654,11 +668,11 @@ body[dir="rtl"] .closeButton {
654668
color: var(--ink-1);
655669
fill: var(--ink-1);
656670
}
657-
.netFilteringDialog.extendedRealm > .headers > .dynamic,
671+
.netFilteringDialog.extendedRealm > .headers .dynamic,
658672
.netFilteringDialog.extendedRealm > .panes > .dynamic {
659673
display: none;
660674
}
661-
.netFilteringDialog.extendedRealm > .headers > .static,
675+
.netFilteringDialog.extendedRealm > .headers .static,
662676
.netFilteringDialog.extendedRealm > .panes > .static {
663677
display: none;
664678
}
@@ -875,8 +889,6 @@ body.dirty .netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
875889
}
876890
.netFilteringDialog > div.panes > div.static textarea {
877891
height: 6em;
878-
max-height: 20vh;
879-
min-height: 10vh;
880892
word-break: break-all;
881893
}
882894
.netFilteringDialog > div.panes > div.static > div:nth-of-type(2) {

‎src/img/fontawesome/fontawesome-defs.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/js/fa-icons.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/logger-ui-inspector.js‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,6 @@
1919
Home: https://github.com/gorhill/uBlock
2020
*/
2121

22-
/* globals browser */
23-
24-
'use strict';
25-
2622
import { dom, qs$, qsa$ } from './dom.js';
2723

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

4036
let inspectedTabId = 0;
41-
let inspectedURL = '';
4237
let inspectedHostname = '';
4338
let uidGenerator = 1;
4439

@@ -112,7 +107,6 @@ const contentInspectorChannel = (( ) => {
112107

113108
const onContentMessage = msg => {
114109
if ( msg.what === 'domLayoutFull' ) {
115-
inspectedURL = msg.url;
116110
inspectedHostname = msg.hostname;
117111
renderDOMFull(msg);
118112
} else if ( msg.what === 'domLayoutIncremental' ) {
@@ -661,9 +655,9 @@ const revert = ( ) => {
661655
const toggleOn = ( ) => {
662656
dom.cl.add('#inspectors', 'dom');
663657
window.addEventListener('beforeunload', toggleOff);
664-
document.addEventListener('tabIdChanged', onTabIdChanged);
665-
domTree.addEventListener('click', onClicked, true);
666-
domTree.addEventListener('mouseover', onMouseOver, true);
658+
dom.on(document, 'tabIdChanged', onTabIdChanged);
659+
dom.on(domTree, 'click', onClicked, true);
660+
dom.on(domTree, 'mouseover', onMouseOver, true);
667661
dom.on('#domInspector .vExpandToggler', 'click', toggleVExpandView);
668662
dom.on('#domInspector .vCompactToggler', 'click', toggleVCompactView);
669663
dom.on('#domInspector .hCompactToggler', 'click', toggleHCompactView);
@@ -680,9 +674,9 @@ const toggleOff = ( ) => {
680674
dom.cl.remove('#inspectors', 'dom');
681675
shutdownInspector();
682676
window.removeEventListener('beforeunload', toggleOff);
683-
document.removeEventListener('tabIdChanged', onTabIdChanged);
684-
domTree.removeEventListener('click', onClicked, true);
685-
domTree.removeEventListener('mouseover', onMouseOver, true);
677+
dom.off(document, 'tabIdChanged', onTabIdChanged);
678+
dom.off(domTree, 'click', onClicked, true);
679+
dom.off(domTree, 'mouseover', onMouseOver, true);
686680
dom.off('#domInspector .vExpandToggler', 'click', toggleVExpandView);
687681
dom.off('#domInspector .vCompactToggler', 'click', toggleVCompactView);
688682
dom.off('#domInspector .hCompactToggler', 'click', toggleHCompactView);
@@ -700,7 +694,6 @@ const toggle = ( ) => {
700694
} else {
701695
toggleOff();
702696
}
703-
logger.resize();
704697
};
705698

706699
dom.on(showdomButton, 'click', toggle);

0 commit comments

Comments
 (0)