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 { body[dir="rtl"] #info {
left: 0; left: 0;
} }
@media (max-width: 600px) { @media (max-width: 540px) {
#info { #info {
display: none; display: none;
} }
@ -256,22 +256,26 @@ body[dir="rtl"] #netInspector #settings {
height: 100%; height: 100%;
white-space: nowrap; 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); 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); 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); 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); 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); 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) background-color: rgba(255, 194, 57, 0.1)
} }
#vwRenderer .logEntry > div.cosmetic, #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 { #vwRenderer .logEntry > div > span:nth-of-type(7) b {
font-weight: normal; 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); 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); 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); 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); 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); 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); background-color: rgba(255, 194, 57, 0.2);
} }
#vwRenderer #vwBottom { #vwRenderer #vwBottom {

View File

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

View File

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