Use blocked/allowed colors in logger's "Details" pane

Additionally, another attempt at making the logger render
better on small-screen devices.
This commit is contained in:
Raymond Hill 2019-01-13 08:34:17 -05:00
parent 0cc06ef270
commit 3be59f172d
No known key found for this signature in database
GPG key ID: 25E1490B761470C2
3 changed files with 30 additions and 19 deletions

View file

@ -72,7 +72,7 @@ body[dir="ltr"] #info {
body[dir="rtl"] #info {
left: 0;
}
@media (max-width: 600px) {
@media (max-width: 540px) {
#info {
display: none;
}
@ -256,22 +256,26 @@ body[dir="rtl"] #netInspector #settings {
height: 100%;
white-space: nowrap;
}
#vwRenderer .logEntry > div.blocked {
#vwRenderer .logEntry > div[data-status="1"],
#netFilteringDialog > .panes > .details > div[data-status="1"] {
background-color: rgba(192, 0, 0, 0.1);
}
body.colorBlind #vwRenderer .logEntry > div.blocked {
body.colorBlind #vwRenderer .logEntry > div[data-status="1"],
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="1"] {
background-color: rgba(0, 19, 110, 0.1);
}
#vwRenderer .logEntry > div.nooped {
#vwRenderer .logEntry > div[data-status="3"] {
background-color: rgba(108, 108, 108, 0.1);
}
body.colorBlind #vwRenderer .logEntry > div.nooped {
body.colorBlind #vwRenderer .logEntry > div[data-status="3"] {
background-color: rgba(96, 96, 96, 0.1);
}
#vwRenderer .logEntry > div.allowed {
#vwRenderer .logEntry > div[data-status="2"],
#netFilteringDialog > .panes > .details > div[data-status="2"] {
background-color: rgba(0, 160, 0, 0.1);
}
body.colorBlind #vwRenderer .logEntry > div.allowed {
body.colorBlind #vwRenderer .logEntry > div[data-status="2"],
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] {
background-color: rgba(255, 194, 57, 0.1)
}
#vwRenderer .logEntry > div.cosmetic,
@ -397,22 +401,26 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
#vwRenderer .logEntry > div > span:nth-of-type(7) b {
font-weight: normal;
}
#vwRenderer .logEntry > div.blocked > span:nth-of-type(7) b {
#vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(7) b,
#netFilteringDialog > .panes > .details > div[data-status="1"] b {
background-color: rgba(192, 0, 0, 0.2);
}
body.colorBlind #vwRenderer .logEntry > div.blocked > span:nth-of-type(7) b {
body.colorBlind #vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(7) b,
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="1"] b {
background-color: rgba(0, 19, 110, 0.2);
}
#vwRenderer .logEntry > div.nooped > span:nth-of-type(7) b {
#vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(7) b {
background-color: rgba(108, 108, 108, 0.2);
}
body.colorBlind #vwRenderer .logEntry > div.nooped > span:nth-of-type(7) b {
body.colorBlind #vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(7) b {
background-color: rgba(96, 96, 96, 0.2);
}
#vwRenderer .logEntry > div.allowed > span:nth-of-type(7) b {
#vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(7) b,
#netFilteringDialog > .panes > .details > div[data-status="2"] b {
background-color: rgba(0, 160, 0, 0.2);
}
body.colorBlind #vwRenderer .logEntry > div.allowed > span:nth-of-type(7) b {
body.colorBlind #vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(7) b,
body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b {
background-color: rgba(255, 194, 57, 0.2);
}
#vwRenderer #vwBottom {

View file

@ -624,11 +624,11 @@ const viewPort = (function() {
// Event
if ( cells[2] === '--' ) {
divcl.add('blocked');
div.setAttribute('data-status', '1');
} else if ( cells[2] === '++' ) {
divcl.add('allowed');
div.setAttribute('data-status', '2');
} else if ( cells[2] === '**' ) {
span.add('nooped');
div.setAttribute('data-status', '3');
} else if ( cells[2] === '<<' ) {
divcl.add('redirect');
}
@ -1336,7 +1336,7 @@ const netFilteringManager = (function() {
const cantPreview =
type !== 'image' ||
targetRow.classList.contains('networkRealm') === false ||
targetRow.classList.contains('blocked');
targetRow.getAttribute('data-status') === '1';
// Whether picker can be used
dialog.querySelector('.picker').classList.toggle(
@ -1533,6 +1533,10 @@ const netFilteringManager = (function() {
// URL
text = trch[6].textContent;
if ( text !== '' ) {
const attr = tr.getAttribute('data-status') || '';
if ( attr !== '' ) {
rows[7].setAttribute('data-status', attr);
}
rows[7].children[1].appendChild(trch[6].cloneNode(true));
} else {
rows[7].style.display = 'none';

View file

@ -2,8 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<!-- Does not work well:
<meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport" content="width=560, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="css/fa-icons.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/logger-ui.css">