Use a different surface color for scriptlets in logger

Related feedback:
- https://github.com/uBlockOrigin/uBlock-issues/discussions/2636

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);

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,

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];
         }