Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-09-03 17:49:39 +02:00
Code Issues Releases Wiki Activity

Make the logger entry dialog modeless

Browse Source
This commit is contained in:
Raymond Hill 2023-01-04 13:43:12 -05:00
parent c889747a0f
commit a9405fe36c
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
5 changed files with 248 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/common.css
View File

@ -85,7 +85,7 @@ button {
color: var(--button-ink); color: var(--button-ink);
display: inline-flex; display: inline-flex;
fill: var(--button-ink); fill: var(--button-ink);
font-size: 14px; font-size: var(--font-size);
justify-content: center; justify-content: center;
min-height: 36px; min-height: 36px;
padding: 0 var(--font-size); padding: 0 var(--font-size);

252
src/css/logger-ui.css
View File

@ -63,6 +63,7 @@ textarea {
#inspectors { #inspectors {
flex-grow: 1; flex-grow: 1;
font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
position: relative;
} }
.inspector { .inspector {
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
@ -224,11 +225,11 @@ body[dir="rtl"] #netInspector #filterExprPicker {
white-space: nowrap; white-space: nowrap;
} }
#vwRenderer .logEntry > div[data-status="1"], #vwRenderer .logEntry > div[data-status="1"],
#netFilteringDialog > .panes > .details > div[data-status="1"] { .netFilteringDialog > .panes > .details > div[data-status="1"] {
background-color: rgb(var(--popup-cell-block-surface-rgb) / 50%); background-color: rgb(var(--popup-cell-block-surface-rgb) / 50%);
} }
#vwRenderer .logEntry > div[data-status="1"][data-modifier], #vwRenderer .logEntry > div[data-status="1"][data-modifier],
#netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] { .netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] {
background-color: var(--logger-modified-surface); background-color: var(--logger-modified-surface);
} }
#vwRenderer .logEntry > div[data-status="3"] { #vwRenderer .logEntry > div[data-status="3"] {
@ -238,7 +239,7 @@ body[dir="rtl"] #netInspector #filterExprPicker {
background-color: rgba(96, 96, 96, 0.1); background-color: rgba(96, 96, 96, 0.1);
} }
#vwRenderer .logEntry > div[data-status="2"], #vwRenderer .logEntry > div[data-status="2"],
#netFilteringDialog > .panes > .details > div[data-status="2"] { .netFilteringDialog > .panes > .details > div[data-status="2"] {
background-color: rgb(var(--popup-cell-allow-surface-rgb) / 50%); background-color: rgb(var(--popup-cell-allow-surface-rgb) / 50%);
} }
#vwRenderer .logEntry > div[data-tabid="-1"] { #vwRenderer .logEntry > div[data-tabid="-1"] {
@ -367,11 +368,11 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
font-weight: bold; font-weight: bold;
} }
#vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(8) b, #vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(8) b,
#netFilteringDialog > .panes > .details > div[data-status="1"] b { .netFilteringDialog > .panes > .details > div[data-status="1"] b {
background-color: rgb(var(--popup-cell-block-surface-rgb) / 100%); background-color: rgb(var(--popup-cell-block-surface-rgb) / 100%);
} }
#vwRenderer .logEntry > div[data-status="1"][data-modifier] > span:nth-of-type(8) b, #vwRenderer .logEntry > div[data-status="1"][data-modifier] > span:nth-of-type(8) b,
#netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] b { .netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] b {
background-color: var(--logger-modified-em-surface); background-color: var(--logger-modified-em-surface);
} }
#vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(8) b { #vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(8) b {
@ -381,7 +382,7 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
background-color: rgba(96, 96, 96, 0.2); background-color: rgba(96, 96, 96, 0.2);
} }
#vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(8) b, #vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(8) b,
#netFilteringDialog > .panes > .details > div[data-status="2"] b { .netFilteringDialog > .panes > .details > div[data-status="2"] b {
background-color: rgb(var(--popup-cell-allow-surface-rgb) / 100%); background-color: rgb(var(--popup-cell-allow-surface-rgb) / 100%);
} }
#vwRenderer .logEntry > div > span:nth-of-type(8) a { #vwRenderer .logEntry > div > span:nth-of-type(8) a {
@ -428,6 +429,52 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
width: 100%; width: 100%;
} }
#netInspector .entryTools {
background-color: var(--surface-0);
filter: drop-shadow(2px 4px 6px black);
max-width: 60vw;
min-width: max(50vw, 400px);
position: absolute;
right: 0;
top: 20vh;
}
#netInspector .entryTools:empty {
display: none;
}
#netInspector .entryTools .dialogControls {
display: flex;
justify-content: stretch;
}
.closeButton {
stroke: var(--ink-1);
stroke-width: 3px;
width: 1.6em;
height: 1.6em;
bottom: calc(100% + 2px);
}
body[dir="ltr"] .closeButton {
right: 0;
}
body[dir="rtl"] .closeButton {
left: 0;
}
.closeButton:hover {
background-color: var(--surface-2) !important;
}
.closeButton > * {
pointer-events: none;
}
.moveBand {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII=');
cursor: grab;
flex-grow: 1;
opacity: 0.5;
}
.moving .moveBand {
cursor: grabbing;
}
#popupContainer { #popupContainer {
background-color: var(--surface-1); background-color: var(--surface-1);
border: 1px solid gray; border: 1px solid gray;
@ -464,7 +511,12 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
#modalOverlay > div { #modalOverlay > div {
position: relative; position: relative;
} }
#modalOverlay > div > div:nth-of-type(1) { #modalOverlay .closeButton {
background-color: var(--surface-1);
position: absolute;
}
#modalOverlayContainer {
background-color: var(--surface-1); background-color: var(--surface-1);
border: 0; border: 0;
box-sizing: border-box; box-sizing: border-box;
@ -473,39 +525,18 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
overflow-y: auto; overflow-y: auto;
width: 90vw; width: 90vw;
} }
#modalOverlay > div > div:nth-of-type(2) {
stroke: var(--ink-1);
stroke-width: 3px;
position: absolute;
width: 1.6em;
height: 1.6em;
bottom: calc(100% + 2px);
background-color: var(--surface-1);
}
body[dir="ltr"] #modalOverlay > div > div:nth-of-type(2) {
right: 0;
}
body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) {
left: 0;
}
#modalOverlay > div > div:nth-of-type(2):hover {
background-color: var(--surface-2);
}
#modalOverlay > div > div:nth-of-type(2) > * {
pointer-events: none;
}
#netFilteringDialog { .netFilteringDialog {
font-size: 95%; font-size: 95%;
} }
#netFilteringDialog a { .netFilteringDialog a {
text-decoration: none; text-decoration: none;
} }
#netFilteringDialog select { .netFilteringDialog select {
max-width: 75%; max-width: 75%;
outline: none; outline: none;
} }
#netFilteringDialog > .preview { .netFilteringDialog > .preview {
align-items: center; align-items: center;
/* http://lea.verou.me/css3patterns/ */ /* http://lea.verou.me/css3patterns/ */
background-color: #aaa; background-color: #aaa;
@ -534,22 +565,22 @@ body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) {
padding: 0.5em; padding: 0.5em;
text-align: center; text-align: center;
} }
#netFilteringDialog > .preview > * { .netFilteringDialog > .preview > * {
max-width: 100%; max-width: 100%;
max-height: 20vh; max-height: 20vh;
} }
#netFilteringDialog > .preview > span { .netFilteringDialog > .preview > span {
background-color: var(--surface-3); background-color: var(--surface-3);
cursor: pointer; cursor: pointer;
padding: 1em; padding: 1em;
} }
#netFilteringDialog > .headers { .netFilteringDialog > .headers {
border-bottom: 1px solid var(--border-4); border-bottom: 1px solid var(--border-4);
line-height: 2; line-height: 2;
position: relative; position: relative;
} }
#netFilteringDialog > .headers > .header { .netFilteringDialog > .headers > .header {
border: 1px solid var(--border-2); border: 1px solid var(--border-2);
border-bottom: 1px solid var(--border-4); border-bottom: 1px solid var(--border-4);
border-top-left-radius: 4px; border-top-left-radius: 4px;
@ -562,26 +593,26 @@ body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) {
text-align: center; text-align: center;
top: 1px; top: 1px;
} }
#netFilteringDialog[data-pane="details"] > .headers > [data-pane="details"], .netFilteringDialog[data-pane="details"] > .headers > [data-pane="details"],
#netFilteringDialog[data-pane="dynamic"] > .headers > [data-pane="dynamic"], .netFilteringDialog[data-pane="dynamic"] > .headers > [data-pane="dynamic"],
#netFilteringDialog[data-pane="static"] > .headers > [data-pane="static"] { .netFilteringDialog[data-pane="static"] > .headers > [data-pane="static"] {
background-color: var(--surface-1); background-color: var(--surface-1);
border-color: var(--border-4); border-color: var(--border-4);
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
color: var(--ink-1); color: var(--ink-1);
} }
#netFilteringDialog > .headers > .tools { .netFilteringDialog > .headers > .tools {
bottom: 0; bottom: 0;
display: flex; display: flex;
position: absolute; position: absolute;
} }
body[dir="ltr"] #netFilteringDialog > .headers > .tools { body[dir="ltr"] .netFilteringDialog > .headers > .tools {
right: 0; right: 0;
} }
body[dir="rtl"] #netFilteringDialog > .headers > .tools { body[dir="rtl"] .netFilteringDialog > .headers > .tools {
left: 0; left: 0;
} }
#netFilteringDialog > .headers > .tools > span { .netFilteringDialog > .headers > .tools > span {
color: var(--ink-4); color: var(--ink-4);
fill: var(--ink-4); fill: var(--ink-4);
cursor: pointer; cursor: pointer;
@ -589,78 +620,76 @@ body[dir="rtl"] #netFilteringDialog > .headers > .tools {
padding: 0 0.25em; padding: 0 0.25em;
text-align: center; text-align: center;
} }
#netFilteringDialog > .headers > .tools > span:hover { .netFilteringDialog > .headers > .tools > span:hover {
color: var(--ink-1); color: var(--ink-1);
fill: var(--ink-1); fill: var(--ink-1);
} }
#netFilteringDialog.extendedRealm > .headers > .dynamic, .netFilteringDialog.extendedRealm > .headers > .dynamic,
#netFilteringDialog.extendedRealm > .panes > .dynamic { .netFilteringDialog.extendedRealm > .panes > .dynamic {
display: none; display: none;
} }
#netFilteringDialog.extendedRealm > .headers > .static, .netFilteringDialog.extendedRealm > .headers > .static,
#netFilteringDialog.extendedRealm > .panes > .static { .netFilteringDialog.extendedRealm > .panes > .static {
display: none; display: none;
} }
#netFilteringDialog > div.panes { .netFilteringDialog > div.panes {
min-height: 40vh;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
padding-top: 1em; padding-top: 1em;
} }
#netFilteringDialog > div.panes > div { .netFilteringDialog > div.panes > div {
display: none; display: none;
} }
#netFilteringDialog[data-pane="details"] > .panes > [data-pane="details"], .netFilteringDialog[data-pane="details"] > .panes > [data-pane="details"],
#netFilteringDialog[data-pane="dynamic"] > .panes > [data-pane="dynamic"], .netFilteringDialog[data-pane="dynamic"] > .panes > [data-pane="dynamic"],
#netFilteringDialog[data-pane="static"] > .panes > [data-pane="static"] { .netFilteringDialog[data-pane="static"] > .panes > [data-pane="static"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 var(--default-gap-xsmall); padding: 0 var(--default-gap-xsmall) var(--default-gap-xsmall) var(--default-gap-xsmall);
} }
#netFilteringDialog > .panes > .details > div { .netFilteringDialog > .panes > .details > div {
align-items: stretch; align-items: stretch;
background-color: var(--surface-2); background-color: var(--surface-2);
border: 0; border: 0;
border-bottom: 1px solid var(--surface-0); border-bottom: 1px solid var(--surface-0);
display: flex; display: flex;
} }
#netFilteringDialog > .panes > .details > div > span { .netFilteringDialog > .panes > .details > div > span {
padding: 0.5em; padding: 0.5em;
} }
#netFilteringDialog > .panes > .details > div > span:nth-of-type(1) { .netFilteringDialog > .panes > .details > div > span:nth-of-type(1) {
border: 0; border: 0;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
text-align: right; text-align: right;
width: 8em; width: 8em;
} }
body[dir="ltr"] #netFilteringDialog > .panes > .details > div > span:nth-of-type(1) { body[dir="ltr"] .netFilteringDialog > .panes > .details > div > span:nth-of-type(1) {
border-right: 1px solid var(--surface-0); border-right: 1px solid var(--surface-0);
} }
body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type(1) { body[dir="rtl"] .netFilteringDialog > .panes > .details > div > span:nth-of-type(1) {
border-left: 1px solid var(--surface-0); border-left: 1px solid var(--surface-0);
} }
#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) { .netFilteringDialog > .panes > .details > div > span:nth-of-type(2) {
flex-grow: 1; flex-grow: 1;
max-height: 20vh; max-height: 10vh;
overflow: hidden auto; overflow: hidden auto;
white-space: pre-line white-space: pre-line
} }
#netFilteringDialog > .panes > .details > div > span:nth-of-type(2):not(.prose) { .netFilteringDialog > .panes > .details > div > span:nth-of-type(2):not(.prose) {
word-break: break-all; word-break: break-all;
} }
#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .listEntry { .netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .listEntry {
display: inline-flex; display: inline-flex;
} }
#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .fa-icon { .netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .fa-icon {
font-size: 110%; font-size: 110%;
opacity: 0.5; opacity: 0.5;
vertical-align: bottom;
} }
#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .fa-icon:hover { .netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .fa-icon:hover {
opacity: 1; opacity: 1;
} }
#netFilteringDialog > .panes > .details .exceptor { .netFilteringDialog > .panes > .details .exceptor {
align-items: center; align-items: center;
border-left: 1px solid var(--surface-0); border-left: 1px solid var(--surface-0);
cursor: pointer; cursor: pointer;
@ -668,29 +697,29 @@ body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type
font-family: monospace; font-family: monospace;
opacity: 0.8; opacity: 0.8;
} }
#netFilteringDialog > .panes > .details .exceptor:hover { .netFilteringDialog > .panes > .details .exceptor:hover {
opacity: 1; opacity: 1;
} }
#netFilteringDialog > .panes > .details .exceptored .filter { .netFilteringDialog > .panes > .details .exceptored .filter {
text-decoration: line-through; text-decoration: line-through;
} }
#netFilteringDialog > .panes > .details .exceptored .exceptor { .netFilteringDialog > .panes > .details .exceptored .exceptor {
background-color: rgb(var(--primary-50) / 50%); background-color: rgb(var(--primary-50) / 50%);
} }
#netFilteringDialog > .panes > .details .exceptor::before { .netFilteringDialog > .panes > .details .exceptor::before {
content: '@@'; content: '@@';
} }
#netFilteringDialog.extendedRealm > .panes > .details .exceptor::before { .netFilteringDialog.extendedRealm > .panes > .details .exceptor::before {
content: '#@#'; content: '#@#';
} }
#netFilteringDialog > div.panes > .dynamic > .toolbar { .netFilteringDialog > div.panes > .dynamic > .toolbar {
padding-bottom: 1em; padding-bottom: 1em;
} }
#netFilteringDialog > div.panes > .dynamic .row { .netFilteringDialog > div.panes > .dynamic .row {
display: flex; display: flex;
min-height: 2.2em; min-height: 2.2em;
} }
#netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) { .netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) {
align-self: stretch; align-self: stretch;
border: 0; border: 0;
display: inline-flex; display: inline-flex;
@ -699,17 +728,17 @@ body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type
text-align: center; text-align: center;
width: 4.5em; width: 4.5em;
} }
body[dir="ltr"] #netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) { body[dir="ltr"] .netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) {
border-right: 1px solid var(--surface-0); border-right: 1px solid var(--surface-0);
} }
body[dir="rtl"] #netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) { body[dir="rtl"] .netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) {
border-left: 1px solid var(--surface-0); border-left: 1px solid var(--surface-0);
} }
#netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(2) { .netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(2) {
align-self: center; align-self: center;
padding: 0 0.5em; padding: 0 0.5em;
} }
#netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules { .netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
background-color: #ffe; background-color: #ffe;
border: 1px solid #ddc; border: 1px solid #ddc;
border-radius: 4px; border-radius: 4px;
@ -719,29 +748,29 @@ body[dir="rtl"] #netFilteringDialog > div.panes > .dynamic .row > span:nth-of-ty
visibility: hidden; visibility: hidden;
width: 100%; width: 100%;
} }
body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules { body.dirty .netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
visibility: visible; visibility: visible;
} }
#netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules:hover { .netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules:hover {
fill: black; fill: black;
} }
#netFilteringDialog > div.panes > .dynamic > .toolbar .entry { .netFilteringDialog > div.panes > .dynamic > .toolbar .entry {
display: none; display: none;
} }
#netFilteringDialog > div.panes > .dynamic .entry { .netFilteringDialog > div.panes > .dynamic .entry {
background-color: var(--surface-2); background-color: var(--surface-2);
border: 0; border: 0;
border-bottom: 1px solid var(--surface-0); border-bottom: 1px solid var(--surface-0);
} }
#netFilteringDialog > div.panes > .dynamic .entry:hover { .netFilteringDialog > div.panes > .dynamic .entry:hover {
background-color: var(--surface-3); background-color: var(--surface-3);
} }
#netFilteringDialog > div.panes > .dynamic .entry > .action { .netFilteringDialog > div.panes > .dynamic .entry > .action {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
} }
#netFilteringDialog > div.panes > .dynamic .entry > .action > span { .netFilteringDialog > div.panes > .dynamic .entry > .action > span {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
display: inline-block; display: inline-block;
@ -750,80 +779,77 @@ body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
visibility: hidden; visibility: hidden;
width: 33.33%; width: 33.33%;
} }
#netFilteringDialog > div.panes > .dynamic .entry > .action.allow { .netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
background-color: rgba(0, 160, 0, 0.3); background-color: rgba(0, 160, 0, 0.3);
} }
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.allow { :root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
background-color: rgba(255, 194, 57, 0.4); background-color: rgba(255, 194, 57, 0.4);
} }
#netFilteringDialog > div.panes > .dynamic .entry > .action.noop { .netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
background-color: rgba(108, 108, 108, 0.3); background-color: rgba(108, 108, 108, 0.3);
} }
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.noop { :root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
background-color: rgba(96, 96, 96, 0.4); background-color: rgba(96, 96, 96, 0.4);
} }
#netFilteringDialog > div.panes > .dynamic .entry > .action.block { .netFilteringDialog > div.panes > .dynamic .entry > .action.block {
background-color: rgba(192, 0, 0, 0.3); background-color: rgba(192, 0, 0, 0.3);
} }
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.block { :root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.block {
background-color: rgba(0, 19, 110, 0.4); background-color: rgba(0, 19, 110, 0.4);
} }
#netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow { .netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
background-color: rgba(0, 160, 0, 1); background-color: rgba(0, 160, 0, 1);
} }
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow { :root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
background-color: rgba(255, 194, 57, 1); background-color: rgba(255, 194, 57, 1);
} }
#netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop, .netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop,
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop { :root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop {
background-color: rgba(108, 108, 108, 1); background-color: rgba(108, 108, 108, 1);
} }
#netFilteringDialog > div.panes > .dynamic .entry > .action.own.block { .netFilteringDialog > div.panes > .dynamic .entry > .action.own.block {
background-color: rgba(192, 0, 0, 1); background-color: rgba(192, 0, 0, 1);
} }
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.block { :root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action.own.block {
background-color: rgba(0, 19, 110, 1); background-color: rgba(0, 19, 110, 1);
} }
#netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span { .netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span {
opacity: 0.2; opacity: 0.2;
visibility: visible; visibility: visible;
} }
#netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span:hover { .netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span:hover {
opacity: 0.75; opacity: 0.75;
} }
#netFilteringDialog > div.panes > .dynamic .entry > .action > .allow { .netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
background-color: rgb(0, 160, 0); background-color: rgb(0, 160, 0);
} }
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .allow { :root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
background-color: rgb(255, 194, 57); background-color: rgb(255, 194, 57);
} }
#netFilteringDialog > div.panes > .dynamic .entry > .action > .noop { .netFilteringDialog > div.panes > .dynamic .entry > .action > .noop {
background-color: rgb(108, 108, 108); background-color: rgb(108, 108, 108);
} }
#netFilteringDialog > div.panes > .dynamic .entry > .action > .block { .netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
background-color: rgb(192, 0, 0); background-color: rgb(192, 0, 0);
} }
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .block { :root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
background-color: rgb(0, 19, 110); background-color: rgb(0, 19, 110);
} }
#netFilteringDialog > div.panes > .dynamic .entry > .url { .netFilteringDialog > div.panes > .dynamic .entry > .url {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
#netFilteringDialog > div.panes > div.static > div { .netFilteringDialog > div.panes > div.static > div {
line-height: 2; line-height: 2;
} }
#netFilteringDialog > div.panes > div.static > div { .netFilteringDialog > div.panes > div.static textarea {
padding-bottom: 1em;
}
#netFilteringDialog > div.panes > div.static textarea {
height: 6em; height: 6em;
max-height: 20vh; max-height: 20vh;
min-height: 10vh; min-height: 10vh;
word-break: break-all; word-break: break-all;
} }
#netFilteringDialog > div.panes > div.static > div:nth-of-type(2) { .netFilteringDialog > div.panes > div.static > div:nth-of-type(2) {
text-align: center; text-align: center;
} }

12
src/js/epicker-ui.js
View File

@ -601,6 +601,11 @@ const onStartMoving = (( ) => {
let rMax = 0, bMax = 0; let rMax = 0, bMax = 0;
let timer; let timer;
const eatEvent = function(ev) {
ev.stopPropagation();
ev.preventDefault();
};
const move = ( ) => { const move = ( ) => {
timer = undefined; timer = undefined;
const r1 = Math.min(Math.max(r0 - mx1 + mx0, 2), rMax); const r1 = Math.min(Math.max(r0 - mx1 + mx0, 2), rMax);
@ -705,13 +710,6 @@ const svgListening = (( ) => {
/******************************************************************************/ /******************************************************************************/
const eatEvent = function(ev) {
ev.stopPropagation();
ev.preventDefault();
};
/******************************************************************************/
// Create lists of candidate filters. This takes into account whether the // Create lists of candidate filters. This takes into account whether the
// current mode is narrow or broad. // current mode is narrow or broad.

118
src/js/logger-ui.js
View File

@ -72,6 +72,69 @@ const tabIdFromAttribute = function(elem) {
return isNaN(tabId) ? 0 : tabId; return isNaN(tabId) ? 0 : tabId;
}; };
/******************************************************************************/
/******************************************************************************/
const onStartMovingWidget = (( ) => {
let widget = null;
let mx0 = 0, my0 = 0;
let mx1 = 0, my1 = 0;
let r0 = 0, t0 = 0;
let rMax = 0, tMax = 0;
let timer;
const eatEvent = function(ev) {
ev.stopPropagation();
ev.preventDefault();
};
const move = ( ) => {
timer = undefined;
const r1 = Math.min(Math.max(r0 - mx1 + mx0, 2), rMax);
const t1 = Math.min(Math.max(t0 - my0 + my1, 2), tMax);
widget.style.setProperty('right', `${r1}px`);
widget.style.setProperty('top', `${t1}px`);
};
const moveAsync = ev => {
if ( timer !== undefined ) { return; }
mx1 = ev.pageX;
my1 = ev.pageY;
timer = self.requestAnimationFrame(move);
};
const stop = ev => {
if ( timer !== undefined ) {
self.cancelAnimationFrame(timer);
timer = undefined;
}
if ( widget.classList.contains('moving') === false ) { return; }
widget.classList.remove('moving');
self.removeEventListener('mousemove', moveAsync, { capture: true });
eatEvent(ev);
widget = null;
};
return function(target, ev) {
if ( dom.cl.has(target, 'moving') ) { return; }
widget = target;
mx0 = ev.pageX;
my0 = ev.pageY;
const style = self.getComputedStyle(target);
r0 = parseInt(style.right, 10);
t0 = parseInt(style.top, 10);
const rect = widget.getBoundingClientRect();
const widgetParent = widget.parentElement;
rMax = widgetParent.clientWidth - 2 - rect.width ;
tMax = widgetParent.clientHeight - 2 - rect.height;
widget.classList.add('moving');
self.addEventListener('mousemove', moveAsync, { capture: true });
self.addEventListener('mouseup', stop, { capture: true, once: true });
eatEvent(ev);
};
})();
/******************************************************************************/ /******************************************************************************/
/******************************************************************************/ /******************************************************************************/
@ -79,8 +142,8 @@ const tabIdFromAttribute = function(elem) {
// //
const modalDialog = (( ) => { const modalDialog = (( ) => {
const overlay = qs$('#modalOverlay'); const overlay = qs$('#modalOverlay');
const container = qs$(overlay, ':scope > div > div:nth-of-type(1)'); const container = qs$('#modalOverlayContainer');
const closeButton = qs$(overlay, ':scope > div > div:nth-of-type(2)'); const closeButton = qs$(overlay, ':scope .closeButton');
let onDestroyed; let onDestroyed;
const removeChildren = logger.removeAllChildren = function(node) { const removeChildren = logger.removeAllChildren = function(node) {
@ -125,6 +188,7 @@ const modalDialog = (( ) => {
self.logger.modalDialog = modalDialog; self.logger.modalDialog = modalDialog;
/******************************************************************************/ /******************************************************************************/
/******************************************************************************/ /******************************************************************************/
@ -1292,7 +1356,14 @@ dom.on(document, 'keydown', ev => {
const target = ev.target; const target = ev.target;
const tcl = target.classList; const tcl = target.classList;
// Select a mode // Close entry tools
if ( tcl.contains('closeButton') ) {
ev.stopPropagation();
toggleOff();
return;
}
// Select a pane
if ( tcl.contains('header') ) { if ( tcl.contains('header') ) {
ev.stopPropagation(); ev.stopPropagation();
dom.attr(dialog, 'data-pane', dom.attr(target, 'data-pane')); dom.attr(dialog, 'data-pane', dom.attr(target, 'data-pane'));
@ -1410,16 +1481,6 @@ dom.on(document, 'keydown', ev => {
return; return;
} }
// Force a reload of the tab
if ( tcl.contains('reload') ) {
ev.stopPropagation();
messaging.send('loggerUI', {
what: 'reloadTab',
tabId: targetTabId,
});
return;
}
// Highlight corresponding element in target web page // Highlight corresponding element in target web page
if ( tcl.contains('picker') ) { if ( tcl.contains('picker') ) {
ev.stopPropagation(); ev.stopPropagation();
@ -1865,14 +1926,7 @@ dom.on(document, 'keydown', ev => {
}; };
const fillDialog = function(domains) { const fillDialog = function(domains) {
dialog = modalDialog.create( dialog = dom.clone('#templates .netFilteringDialog');
'#netFilteringDialog',
( ) => {
targetURLs = [];
targetRow = null;
dialog = null;
}
);
dom.cl.toggle( dom.cl.toggle(
dialog, dialog,
'extendedRealm', 'extendedRealm',
@ -1888,7 +1942,15 @@ dom.on(document, 'keydown', ev => {
dom.on(dialog, 'click', ev => { onClick(ev); }, true); dom.on(dialog, 'click', ev => { onClick(ev); }, true);
dom.on(dialog, 'change', onSelectChange, true); dom.on(dialog, 'change', onSelectChange, true);
dom.on(dialog, 'input', onInputChange, true); dom.on(dialog, 'input', onInputChange, true);
modalDialog.show(); const container = qs$('#netInspector .entryTools');
if ( container.firstChild ) {
container.replaceChild(dialog, container.firstChild);
} else {
container.append(dialog);
}
dom.on(qs$(dialog, '.moveBand'), 'mousedown', ev => {
onStartMovingWidget(container, ev);
});
}; };
const toggleOn = async function(ev) { const toggleOn = async function(ev) {
@ -1913,10 +1975,20 @@ dom.on(document, 'keydown', ev => {
fillDialog(domains); fillDialog(domains);
}; };
const toggleOff = function() {
const container = qs$('#netInspector .entryTools');
if ( container.firstChild ) {
container.firstChild.remove();
}
targetURLs = [];
targetRow = null;
dialog = null;
};
dom.on( dom.on(
'#netInspector', '#netInspector',
'click', 'click',
'.canDetails > span:nth-of-type(2),.canDetails > span:nth-of-type(3),.canDetails > span:nth-of-type(5)', '.canDetails > span:nth-of-type(2),.canDetails > span:nth-of-type(3)',
ev => { toggleOn(ev); } ev => { toggleOn(ev); }
); );
})(); })();

11
src/logger-ui.html
View File

@ -90,28 +90,33 @@
</div> </div>
</div> </div>
</div> </div>
<div class="entryTools"></div>
</div> </div>
<iframe id="popupContainer"></iframe> <iframe id="popupContainer"></iframe>
</div> </div>
<div id="modalOverlay"> <div id="modalOverlay">
<div> <div>
<div class="closeButton"><svg viewBox="0 0 64 64"><path d="M 16 16 L 48 48 M 16 48 L 48 16" /></svg></div>
<div id="modalOverlayContainer"></div> <div id="modalOverlayContainer"></div>
<div id="modalOverlayClose"><svg viewBox="0 0 64 64"><path d="M 16 16 L 48 48 M 16 48 L 48 16" /></svg></div>
</div> </div>
</div> </div>
<div id="templates" style="display: none;"> <div id="templates" style="display: none;">
<div id="logEntryTemplate"><div><span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span></div></div> <div id="logEntryTemplate"><div><span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span></div></div>
<div id="netFilteringDialog" data-pane="details"> <div class="netFilteringDialog" data-pane="details">
<div class="dialogControls">
<div class="moveBand"></div>
<div class="closeButton"><svg viewBox="0 0 64 64"><path d="M 16 16 L 48 48 M 16 48 L 48 16" /></div>
</div>
<div class="hide preview"><span>click to preview</span></div> <div class="hide preview"><span>click to preview</span></div>
<div class="headers"> <div class="headers">
&ensp; &ensp;
<span class="header details" data-pane="details" data-i18n="loggerEntryDetailsHeader"></span> <span class="header details" data-pane="details" data-i18n="loggerEntryDetailsHeader"></span>
<span class="header dynamic" data-pane="dynamic" data-i18n="loggerURLFilteringHeader"></span> <span class="header dynamic" data-pane="dynamic" data-i18n="loggerURLFilteringHeader"></span>
<span class="header static" data-pane="static" data-i18n="loggerStaticFilteringHeader"></span> <span class="header static" data-pane="static" data-i18n="loggerStaticFilteringHeader"></span>
<span class="tools"><span class="fa-icon reload">refresh</span>&ensp;<span class="fa-icon picker">eye-dropper</span></span> <span class="tools"><span class="fa-icon picker">eye-dropper</span></span>
</div> </div>
<div class="panes"> <div class="panes">
<div class="pane details" data-pane="details"> <div class="pane details" data-pane="details">