From 9bfbbfec841722da79bc002ea5f03d1b568f68f5 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Fri, 17 May 2019 11:45:07 -0400
Subject: [PATCH] Adjust visual of cosmetic exception filters in logger

The invariant prefixes `##` and `#@#` are now hidden,
allowing to reveal more of the filter itself when the
logger view is narrow.
---
 src/css/logger-ui.css | 10 ++++++++--
 src/js/logger-ui.js   | 17 ++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
index f253b4aaa..7419f90ad 100644
--- a/src/css/logger-ui.css
+++ b/src/css/logger-ui.css
@@ -326,8 +326,14 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
 #vwRenderer .logEntry > div.messageRealm[data-type="tabLoad"] > span:nth-of-type(2) {
     text-align: center;
     }
-#vwRenderer .logEntry > div.cosmeticRealm.isException > span:nth-of-type(2) {
-    text-decoration: line-through;
+#vwRenderer .logEntry > div.cosmeticRealm > span:nth-of-type(2) > span:first-of-type {
+    display: none;
+    }
+#vwRenderer .logEntry > div.cosmeticRealm > span:nth-of-type(2) > span:last-of-type {
+    pointer-events: none;
+    }
+#vwRenderer .logEntry > div.cosmeticRealm.isException > span:nth-of-type(2) > span:last-of-type {
+    text-decoration: line-through rgba(0,0,255,0.7);
     }
 #vwRenderer .logEntry > div > span:nth-of-type(3) {
     font: 12px monospace;
diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js
index 8e705717b..4ee567d5c 100644
--- a/src/js/logger-ui.js
+++ b/src/js/logger-ui.js
@@ -567,6 +567,19 @@ const viewPort = (function() {
 
     updateLayout();
 
+    const renderFilterToSpan = function(span, filter) {
+        if ( filter.charCodeAt(0) !== 0x23 /* '#' */ ) { return false; }
+        const match = /^#@?#/.exec(filter);
+        if ( match === null ) { return false; }
+        let child = document.createElement('span');
+        child.textContent = match[0];
+        span.appendChild(child);
+        child = document.createElement('span');
+        child.textContent = filter.slice(match[0].length);
+        span.appendChild(child);
+        return true;
+    };
+
     const renderToDiv = function(vwEntry, i) {
         if ( i >= filteredLoggerEntries.length ) {
             vwEntry.logEntry = undefined;
@@ -632,7 +645,9 @@ const viewPort = (function() {
             }
         }
         span = div.children[1];
-        span.textContent = cells[1];
+        if ( renderFilterToSpan(span, cells[1]) === false ) {
+            span.textContent = cells[1];
+        }
 
         // Event
         if ( cells[2] === '--' ) {