From 3be59f172de60100445466c1f4d151d5adc9335e Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Sun, 13 Jan 2019 08:34:17 -0500
Subject: [PATCH] Use blocked/allowed colors in logger's "Details" pane

Additionally, another attempt at making the logger render
better on small-screen devices.
---
 src/css/logger-ui.css | 34 +++++++++++++++++++++-------------
 src/js/logger-ui.js   | 12 ++++++++----
 src/logger-ui.html    |  3 +--
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
index b87c8dd87..e9e86f790 100644
--- a/src/css/logger-ui.css
+++ b/src/css/logger-ui.css
@@ -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 {
diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js
index 102d3ad9d..3dbbc5e2f 100644
--- a/src/js/logger-ui.js
+++ b/src/js/logger-ui.js
@@ -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';
diff --git a/src/logger-ui.html b/src/logger-ui.html
index bdb4b64df..c0df2cfed 100644
--- a/src/logger-ui.html
+++ b/src/logger-ui.html
@@ -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">