mirror of
https://github.com/gorhill/uBlock.git
synced 2024-11-10 09:07:54 +01:00
Make the logger entry dialog modeless
This commit is contained in:
Raymond Hill
parent
c889747a0f
commit
a9405fe36c
5 changed files with 248 additions and 147 deletions
|
|
@ -85,7 +85,7 @@ button {
|
|||
color: var(--button-ink);
|
||||
display: inline-flex;
|
||||
fill: var(--button-ink);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size);
|
||||
justify-content: center;
|
||||
min-height: 36px;
|
||||
padding: 0 var(--font-size);
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@ textarea {
|
|||
#inspectors {
|
||||
flex-grow: 1;
|
||||
font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
.inspector {
|
||||
border-top: 1px solid #ccc;
|
||||
|
|
@ -224,11 +225,11 @@ body[dir="rtl"] #netInspector #filterExprPicker {
|
|||
white-space: nowrap;
|
||||
}
|
||||
#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%);
|
||||
}
|
||||
#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);
|
||||
}
|
||||
#vwRenderer .logEntry > div[data-status="3"] {
|
||||
|
|
@ -238,7 +239,7 @@ body[dir="rtl"] #netInspector #filterExprPicker {
|
|||
background-color: rgba(96, 96, 96, 0.1);
|
||||
}
|
||||
#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%);
|
||||
}
|
||||
#vwRenderer .logEntry > div[data-tabid="-1"] {
|
||||
|
|
@ -367,11 +368,11 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
|
|||
font-weight: bold;
|
||||
}
|
||||
#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%);
|
||||
}
|
||||
#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);
|
||||
}
|
||||
#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);
|
||||
}
|
||||
#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%);
|
||||
}
|
||||
#vwRenderer .logEntry > div > span:nth-of-type(8) a {
|
||||
|
|
@ -428,6 +429,52 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
|
|||
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 {
|
||||
background-color: var(--surface-1);
|
||||
border: 1px solid gray;
|
||||
|
|
@ -464,7 +511,12 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
|
|||
#modalOverlay > div {
|
||||
position: relative;
|
||||
}
|
||||
#modalOverlay > div > div:nth-of-type(1) {
|
||||
#modalOverlay .closeButton {
|
||||
background-color: var(--surface-1);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#modalOverlayContainer {
|
||||
background-color: var(--surface-1);
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -473,39 +525,18 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
|
|||
overflow-y: auto;
|
||||
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%;
|
||||
}
|
||||
#netFilteringDialog a {
|
||||
.netFilteringDialog a {
|
||||
text-decoration: none;
|
||||
}
|
||||
#netFilteringDialog select {
|
||||
.netFilteringDialog select {
|
||||
max-width: 75%;
|
||||
outline: none;
|
||||
}
|
||||
#netFilteringDialog > .preview {
|
||||
.netFilteringDialog > .preview {
|
||||
align-items: center;
|
||||
/* http://lea.verou.me/css3patterns/ */
|
||||
background-color: #aaa;
|
||||
|
|
@ -534,22 +565,22 @@ body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) {
|
|||
padding: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
#netFilteringDialog > .preview > * {
|
||||
.netFilteringDialog > .preview > * {
|
||||
max-width: 100%;
|
||||
max-height: 20vh;
|
||||
}
|
||||
#netFilteringDialog > .preview > span {
|
||||
.netFilteringDialog > .preview > span {
|
||||
background-color: var(--surface-3);
|
||||
cursor: pointer;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#netFilteringDialog > .headers {
|
||||
.netFilteringDialog > .headers {
|
||||
border-bottom: 1px solid var(--border-4);
|
||||
line-height: 2;
|
||||
position: relative;
|
||||
}
|
||||
#netFilteringDialog > .headers > .header {
|
||||
.netFilteringDialog > .headers > .header {
|
||||
border: 1px solid var(--border-2);
|
||||
border-bottom: 1px solid var(--border-4);
|
||||
border-top-left-radius: 4px;
|
||||
|
|
@ -562,26 +593,26 @@ body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) {
|
|||
text-align: center;
|
||||
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-1);
|
||||
border-color: var(--border-4);
|
||||
border-bottom: 1px solid transparent;
|
||||
color: var(--ink-1);
|
||||
}
|
||||
#netFilteringDialog > .headers > .tools {
|
||||
.netFilteringDialog > .headers > .tools {
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
}
|
||||
body[dir="ltr"] #netFilteringDialog > .headers > .tools {
|
||||
body[dir="ltr"] .netFilteringDialog > .headers > .tools {
|
||||
right: 0;
|
||||
}
|
||||
body[dir="rtl"] #netFilteringDialog > .headers > .tools {
|
||||
body[dir="rtl"] .netFilteringDialog > .headers > .tools {
|
||||
left: 0;
|
||||
}
|
||||
#netFilteringDialog > .headers > .tools > span {
|
||||
.netFilteringDialog > .headers > .tools > span {
|
||||
color: var(--ink-4);
|
||||
fill: var(--ink-4);
|
||||
cursor: pointer;
|
||||
|
|
@ -589,78 +620,76 @@ body[dir="rtl"] #netFilteringDialog > .headers > .tools {
|
|||
padding: 0 0.25em;
|
||||
text-align: center;
|
||||
}
|
||||
#netFilteringDialog > .headers > .tools > span:hover {
|
||||
.netFilteringDialog > .headers > .tools > span:hover {
|
||||
color: var(--ink-1);
|
||||
fill: var(--ink-1);
|
||||
}
|
||||
#netFilteringDialog.extendedRealm > .headers > .dynamic,
|
||||
#netFilteringDialog.extendedRealm > .panes > .dynamic {
|
||||
.netFilteringDialog.extendedRealm > .headers > .dynamic,
|
||||
.netFilteringDialog.extendedRealm > .panes > .dynamic {
|
||||
display: none;
|
||||
}
|
||||
#netFilteringDialog.extendedRealm > .headers > .static,
|
||||
#netFilteringDialog.extendedRealm > .panes > .static {
|
||||
.netFilteringDialog.extendedRealm > .headers > .static,
|
||||
.netFilteringDialog.extendedRealm > .panes > .static {
|
||||
display: none;
|
||||
}
|
||||
#netFilteringDialog > div.panes {
|
||||
min-height: 40vh;
|
||||
.netFilteringDialog > div.panes {
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
padding-top: 1em;
|
||||
}
|
||||
#netFilteringDialog > div.panes > div {
|
||||
.netFilteringDialog > div.panes > div {
|
||||
display: none;
|
||||
}
|
||||
#netFilteringDialog[data-pane="details"] > .panes > [data-pane="details"],
|
||||
#netFilteringDialog[data-pane="dynamic"] > .panes > [data-pane="dynamic"],
|
||||
#netFilteringDialog[data-pane="static"] > .panes > [data-pane="static"] {
|
||||
.netFilteringDialog[data-pane="details"] > .panes > [data-pane="details"],
|
||||
.netFilteringDialog[data-pane="dynamic"] > .panes > [data-pane="dynamic"],
|
||||
.netFilteringDialog[data-pane="static"] > .panes > [data-pane="static"] {
|
||||
display: flex;
|
||||
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;
|
||||
background-color: var(--surface-2);
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--surface-0);
|
||||
display: flex;
|
||||
}
|
||||
#netFilteringDialog > .panes > .details > div > span {
|
||||
.netFilteringDialog > .panes > .details > div > span {
|
||||
padding: 0.5em;
|
||||
}
|
||||
#netFilteringDialog > .panes > .details > div > span:nth-of-type(1) {
|
||||
.netFilteringDialog > .panes > .details > div > span:nth-of-type(1) {
|
||||
border: 0;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
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);
|
||||
}
|
||||
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);
|
||||
}
|
||||
#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) {
|
||||
.netFilteringDialog > .panes > .details > div > span:nth-of-type(2) {
|
||||
flex-grow: 1;
|
||||
max-height: 20vh;
|
||||
max-height: 10vh;
|
||||
overflow: hidden auto;
|
||||
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;
|
||||
}
|
||||
#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .listEntry {
|
||||
.netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .listEntry {
|
||||
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%;
|
||||
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;
|
||||
}
|
||||
#netFilteringDialog > .panes > .details .exceptor {
|
||||
.netFilteringDialog > .panes > .details .exceptor {
|
||||
align-items: center;
|
||||
border-left: 1px solid var(--surface-0);
|
||||
cursor: pointer;
|
||||
|
|
@ -668,29 +697,29 @@ body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type
|
|||
font-family: monospace;
|
||||
opacity: 0.8;
|
||||
}
|
||||
#netFilteringDialog > .panes > .details .exceptor:hover {
|
||||
.netFilteringDialog > .panes > .details .exceptor:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
#netFilteringDialog > .panes > .details .exceptored .filter {
|
||||
.netFilteringDialog > .panes > .details .exceptored .filter {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
#netFilteringDialog > .panes > .details .exceptored .exceptor {
|
||||
.netFilteringDialog > .panes > .details .exceptored .exceptor {
|
||||
background-color: rgb(var(--primary-50) / 50%);
|
||||
}
|
||||
#netFilteringDialog > .panes > .details .exceptor::before {
|
||||
.netFilteringDialog > .panes > .details .exceptor::before {
|
||||
content: '@@';
|
||||
}
|
||||
#netFilteringDialog.extendedRealm > .panes > .details .exceptor::before {
|
||||
.netFilteringDialog.extendedRealm > .panes > .details .exceptor::before {
|
||||
content: '#@#';
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic > .toolbar {
|
||||
.netFilteringDialog > div.panes > .dynamic > .toolbar {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .row {
|
||||
.netFilteringDialog > div.panes > .dynamic .row {
|
||||
display: flex;
|
||||
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;
|
||||
border: 0;
|
||||
display: inline-flex;
|
||||
|
|
@ -699,17 +728,17 @@ body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type
|
|||
text-align: center;
|
||||
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);
|
||||
}
|
||||
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);
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(2) {
|
||||
.netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(2) {
|
||||
align-self: center;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
|
||||
.netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
|
||||
background-color: #ffe;
|
||||
border: 1px solid #ddc;
|
||||
border-radius: 4px;
|
||||
|
|
@ -719,29 +748,29 @@ body[dir="rtl"] #netFilteringDialog > div.panes > .dynamic .row > span:nth-of-ty
|
|||
visibility: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
|
||||
body.dirty .netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
|
||||
visibility: visible;
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules:hover {
|
||||
.netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules:hover {
|
||||
fill: black;
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic > .toolbar .entry {
|
||||
.netFilteringDialog > div.panes > .dynamic > .toolbar .entry {
|
||||
display: none;
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry {
|
||||
.netFilteringDialog > div.panes > .dynamic .entry {
|
||||
background-color: var(--surface-2);
|
||||
border: 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);
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry > .action {
|
||||
.netFilteringDialog > div.panes > .dynamic .entry > .action {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry > .action > span {
|
||||
.netFilteringDialog > div.panes > .dynamic .entry > .action > span {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
display: inline-block;
|
||||
|
|
@ -750,80 +779,77 @@ body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
|
|||
visibility: hidden;
|
||||
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);
|
||||
}
|
||||
: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);
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
|
||||
.netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
|
||||
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);
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry > .action.block {
|
||||
.netFilteringDialog > div.panes > .dynamic .entry > .action.block {
|
||||
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);
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
|
||||
.netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
|
||||
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);
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop,
|
||||
:root.colorBlind #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 {
|
||||
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);
|
||||
}
|
||||
: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);
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span {
|
||||
.netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span {
|
||||
opacity: 0.2;
|
||||
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;
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
|
||||
.netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
|
||||
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);
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry > .action > .noop {
|
||||
.netFilteringDialog > div.panes > .dynamic .entry > .action > .noop {
|
||||
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);
|
||||
}
|
||||
:root.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
|
||||
:root.colorBlind .netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
|
||||
background-color: rgb(0, 19, 110);
|
||||
}
|
||||
#netFilteringDialog > div.panes > .dynamic .entry > .url {
|
||||
.netFilteringDialog > div.panes > .dynamic .entry > .url {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#netFilteringDialog > div.panes > div.static > div {
|
||||
.netFilteringDialog > div.panes > div.static > div {
|
||||
line-height: 2;
|
||||
}
|
||||
#netFilteringDialog > div.panes > div.static > div {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
#netFilteringDialog > div.panes > div.static textarea {
|
||||
.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) {
|
||||
.netFilteringDialog > div.panes > div.static > div:nth-of-type(2) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -601,6 +601,11 @@ const onStartMoving = (( ) => {
|
|||
let rMax = 0, bMax = 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);
|
||||
|
|
@ -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
|
||||
// current mode is narrow or broad.
|
||||
|
||||
|
|
|
|||
|
|
@ -72,6 +72,69 @@ const tabIdFromAttribute = function(elem) {
|
|||
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 overlay = qs$('#modalOverlay');
|
||||
const container = qs$(overlay, ':scope > div > div:nth-of-type(1)');
|
||||
const closeButton = qs$(overlay, ':scope > div > div:nth-of-type(2)');
|
||||
const container = qs$('#modalOverlayContainer');
|
||||
const closeButton = qs$(overlay, ':scope .closeButton');
|
||||
let onDestroyed;
|
||||
|
||||
const removeChildren = logger.removeAllChildren = function(node) {
|
||||
|
|
@ -125,6 +188,7 @@ const modalDialog = (( ) => {
|
|||
|
||||
self.logger.modalDialog = modalDialog;
|
||||
|
||||
|
||||
/******************************************************************************/
|
||||
/******************************************************************************/
|
||||
|
||||
|
|
@ -1292,7 +1356,14 @@ dom.on(document, 'keydown', ev => {
|
|||
const target = ev.target;
|
||||
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') ) {
|
||||
ev.stopPropagation();
|
||||
dom.attr(dialog, 'data-pane', dom.attr(target, 'data-pane'));
|
||||
|
|
@ -1410,16 +1481,6 @@ dom.on(document, 'keydown', ev => {
|
|||
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
|
||||
if ( tcl.contains('picker') ) {
|
||||
ev.stopPropagation();
|
||||
|
|
@ -1865,14 +1926,7 @@ dom.on(document, 'keydown', ev => {
|
|||
};
|
||||
|
||||
const fillDialog = function(domains) {
|
||||
dialog = modalDialog.create(
|
||||
'#netFilteringDialog',
|
||||
( ) => {
|
||||
targetURLs = [];
|
||||
targetRow = null;
|
||||
dialog = null;
|
||||
}
|
||||
);
|
||||
dialog = dom.clone('#templates .netFilteringDialog');
|
||||
dom.cl.toggle(
|
||||
dialog,
|
||||
'extendedRealm',
|
||||
|
|
@ -1888,7 +1942,15 @@ dom.on(document, 'keydown', ev => {
|
|||
dom.on(dialog, 'click', ev => { onClick(ev); }, true);
|
||||
dom.on(dialog, 'change', onSelectChange, 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) {
|
||||
|
|
@ -1913,10 +1975,20 @@ dom.on(document, 'keydown', ev => {
|
|||
fillDialog(domains);
|
||||
};
|
||||
|
||||
const toggleOff = function() {
|
||||
const container = qs$('#netInspector .entryTools');
|
||||
if ( container.firstChild ) {
|
||||
container.firstChild.remove();
|
||||
}
|
||||
targetURLs = [];
|
||||
targetRow = null;
|
||||
dialog = null;
|
||||
};
|
||||
|
||||
dom.on(
|
||||
'#netInspector',
|
||||
'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); }
|
||||
);
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -90,28 +90,33 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entryTools"></div>
|
||||
</div>
|
||||
<iframe id="popupContainer"></iframe>
|
||||
</div>
|
||||
|
||||
<div id="modalOverlay">
|
||||
<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="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 id="templates" style="display: none;">
|
||||
<div id="logEntryTemplate"><div><span></span>​<span></span>​<span></span>​<span></span>​<span></span>​<span></span>​<span></span>​<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="headers">
|
||||
 
|
||||
<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 static" data-pane="static" data-i18n="loggerStaticFilteringHeader"></span>
|
||||
<span class="tools"><span class="fa-icon reload">refresh</span> <span class="fa-icon picker">eye-dropper</span></span>
|
||||
<span class="tools"><span class="fa-icon picker">eye-dropper</span></span>
|
||||
</div>
|
||||
<div class="panes">
|
||||
<div class="pane details" data-pane="details">
|
||||
|
|
|
|||
Loading…
Reference in a new issue