From 13f6bdae37e4196cee37dcf6f322877d0f1f657f Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Fri, 20 Nov 2020 07:14:02 -0500
Subject: [PATCH] Improve representation of modifier filters in logger

As per feedback from filter list maintainers.
---
 src/css/logger-ui.css      | 16 ++++++++++++----
 src/css/themes/default.css |  8 ++++++++
 src/js/logger-ui.js        |  7 ++++++-
 src/js/messaging.js        |  3 +++
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
index b85edceba..c0941bdaf 100644
--- a/src/css/logger-ui.css
+++ b/src/css/logger-ui.css
@@ -233,7 +233,11 @@ body[dir="rtl"] #netInspector #filterExprPicker {
     }
 #vwRenderer .logEntry > div[data-status="1"],
 #netFilteringDialog > .panes > .details > div[data-status="1"] {
-    background-color: rgba(192, 0, 0, 0.1);
+    background-color: var(--logger-blocked-surface);
+    }
+#vwRenderer .logEntry > div[data-status="1"][data-modifier],
+#netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] {
+    background-color: var(--logger-modified-surface);
     }
 body.colorBlind #vwRenderer .logEntry > div[data-status="1"],
 body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="1"] {
@@ -247,7 +251,7 @@ body.colorBlind #vwRenderer .logEntry > div[data-status="3"] {
     }
 #vwRenderer .logEntry > div[data-status="2"],
 #netFilteringDialog > .panes > .details > div[data-status="2"] {
-    background-color: rgba(0, 160, 0, 0.1);
+    background-color: var(--logger-allowed-surface);
     }
 body.colorBlind #vwRenderer .logEntry > div[data-status="2"],
 body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] {
@@ -380,7 +384,11 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
     }
 #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: var(--logger-blocked-em-surface);
+    }
+#vwRenderer .logEntry > div[data-status="1"][data-modifier] > span:nth-of-type(7) b,
+#netFilteringDialog > .panes > .details > div[data-status="1"][data-modifier] b {
+    background-color: var(--logger-modified-em-surface);
     }
 body.colorBlind #vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(7) b,
 body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="1"] b {
@@ -394,7 +402,7 @@ body.colorBlind #vwRenderer .logEntry > div[data-status="3"] > span:nth-of-type(
     }
 #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: var(--logger-allowed-em-surface);
     }
 body.colorBlind #vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(7) b,
 body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b {
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index 0d2dbb511..2b4c08cf7 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -202,6 +202,14 @@
     --df-block-ink: #ff0000;
     --df-noop-ink: var(--dark-gray-10);
     --df-key-ink: var(--violet-70);
+
+    /* logger */
+    --logger-blocked-surface: #c0000014;
+    --logger-modified-surface: #0000c010;
+    --logger-allowed-surface: #00a00014;
+    --logger-blocked-em-surface: #c0000036;
+    --logger-modified-em-surface: #0000c028;
+    --logger-allowed-em-surface: #00a00036;
 }
 
 /**
diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js
index 4265c37fc..aae02f3e1 100644
--- a/src/js/logger-ui.js
+++ b/src/js/logger-ui.js
@@ -646,7 +646,6 @@ const viewPort = (( ) => {
         const divcl = div.classList;
         let span;
 
-
         // Realm
         if ( details.realm !== undefined ) {
             divcl.add(details.realm + 'Realm');
@@ -686,6 +685,9 @@ const viewPort = (( ) => {
             }
             if ( filteringType === 'static' ) {
                 divcl.add('canLookup');
+                if ( filter.modifier === true ) {
+                    div.setAttribute('data-modifier', '');
+                }
             } else if ( filteringType === 'cosmetic' ) {
                 divcl.add('canLookup');
                 divcl.toggle('isException', filter.raw.startsWith('#@#'));
@@ -1651,6 +1653,9 @@ const reloadTab = function(ev) {
             const attr = tr.getAttribute('data-status') || '';
             if ( attr !== '' ) {
                 rows[7].setAttribute('data-status', attr);
+                if ( tr.hasAttribute('data-modifier') ) {
+                    rows[7].setAttribute('data-modifier', '');
+                }
             }
             rows[7].children[1].appendChild(trch[6].cloneNode(true));
         } else {
diff --git a/src/js/messaging.js b/src/js/messaging.js
index 561c66561..3ba2d9dff 100644
--- a/src/js/messaging.js
+++ b/src/js/messaging.js
@@ -1584,6 +1584,9 @@ const logCSPViolations = function(pageStore, request) {
             if ( type === 'script' ) { type = 'inline-script'; }
             else if ( type === 'font' ) { type = 'inline-font'; }
         }
+        // The resource was blocked as a result of applying a CSP directive
+        // elsewhere rather than to the resource itself.
+        logData.modifier = undefined;
         fctxt.setURL(violation.url)
              .setType(type)
              .setFilter(logData)