From bc0235861046c2980ed9bed008877cd8e577b9ba Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Sat, 6 May 2023 18:56:00 -0400
Subject: [PATCH] Use a different surface color for scriptlets in logger

Related feedback:
- https://github.com/uBlockOrigin/uBlock-issues/discussions/2636
---
 src/css/logger-ui.css      | 3 +++
 src/css/themes/default.css | 4 +++-
 src/js/logger-ui.js        | 6 +++++-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
index d164b6e78..53f108487 100644
--- a/src/css/logger-ui.css
+++ b/src/css/logger-ui.css
@@ -249,6 +249,9 @@ body[dir="rtl"] #netInspector #filterExprPicker {
 #vwRenderer .logEntry > div.redirect {
     background-color: var(--logger-redirected-surface);
     }
+#vwRenderer .logEntry > div.extendedRealm.scriptlet {
+    background-color: var(--logger-scriptlet-surface);
+    }
 :root.colorBlind #vwRenderer .logEntry > div.extendedRealm,
 :root.colorBlind #vwRenderer .logEntry > div.redirect {
     background-color: rgba(0, 19, 110, 0.1);
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index a9b569af7..44609817e 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -297,8 +297,9 @@
 
     /* logger */
     --logger-modified-surface: #0000c010;
-    --logger-redirected-surface: rgb(var(--yellow-5) / 50%);
     --logger-modified-em-surface: #0000c028;
+    --logger-redirected-surface: rgb(var(--yellow-5) / 50%);
+    --logger-scriptlet-surface: rgb(var(--yellow-30) / 50%);
 }
 
 /* https://material.io/design/color/dark-theme.html */
@@ -374,6 +375,7 @@
     /* logger */
     --logger-modified-surface: #663efd60;
     --logger-redirected-surface: rgb(var(--yellow-5) / 40%);
+    --logger-scriptlet-surface: rgb(var(--yellow-30) / 40%);
 }
 
 :root.dark input,
diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js
index 00002c3a5..f71510766 100644
--- a/src/js/logger-ui.js
+++ b/src/js/logger-ui.js
@@ -797,7 +797,11 @@ const viewPort = (( ) => {
             }
         }
         span = div.children[COLUMN_FILTER];
-        if ( renderFilterToSpan(span, cells[COLUMN_FILTER]) === false ) {
+        if ( renderFilterToSpan(span, cells[COLUMN_FILTER]) ) {
+            if ( /^\+js\(.*\)$/.test(span.children[1].textContent) ) {
+                divcl.add('scriptlet');
+            }
+        } else {
             span.textContent = cells[COLUMN_FILTER];
         }