v8.7 Log show pattern

src/content/about.html

@@ -18,6 +18,7 @@
     <dl>
       <dt>8.7</dt>
       <dd>Added Help translate form</dd>
+      <dd>Added matching pattern to the Log display (#91)</dd>
       <dd>Added option to proxies on the toolbar badge when in Proxy by Patterns mode (Firefox only) (#57)</dd>
       <dd>Added proxy title to the toolbar icon mouse-over title display (#74)</dd>
       <dd>Changed the global Proxy DNS to per-proxy setting (#75)</dd>

src/content/log.js

@@ -1,4 +1,5 @@
 import {App} from './app.js';
+import {Pattern} from './pattern.js';
 
 // ---------- Log ------------------------------------------
 export class Log {
@@ -14,11 +15,12 @@ export class Log {
     }
 
     this.proxyCache = {};                                   // used to find proxy
+    this.mode = 'disable';
   }
 
   static process(e) {
     const tr = this.tbody.children[199] || this.trTemplate.cloneNode(true);
-    const [, time, container, method, doc, url, title, type, host, port] = tr.children;
+    const [, time, container, method, doc, url, title, type, host, port, pattern] = tr.children;
 
     time.textContent = this.formatInt(e.timeStamp);
     method.textContent = e.method;
@@ -38,6 +40,16 @@ export class Log {
     host.textContent = info.host;
     port.textContent = info.port;
 
+    // show matching pattern in pattern mode
+    if (item && this.mode === 'pattern') {
+      const pat = item.include.find(i => new RegExp(Pattern.get(i.pattern, i.type), 'i').test(e.url));
+      if (pat) {
+        const text = pat.title || pat.pattern;
+        pattern.textContent = text;
+        pattern.title = text;
+      }
+    }
+
     this.tbody.prepend(tr);                                 // in reverse order, new on top
   }
 

src/content/options.css

@@ -746,7 +746,8 @@ section.log {
 }
 
 .log td:nth-of-type(5),
-.log td:nth-of-type(6) {
+.log td:nth-of-type(6),
+.log td:nth-of-type(11) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -758,9 +759,14 @@ section.log {
 }
 
 .log td:nth-of-type(7) {
- border-left: 2px solid var(--border);
+  border-left: 2px solid var(--border);
 }
 
+.log td:nth-of-type(11) {
+  max-width: 5em;
+}
+
+
 .log td.incognito::before {
   content: '';
   width: 1em;

src/content/options.html

@@ -611,6 +611,7 @@
             <th style="width: 3em;" data-i18n="type"></th>
             <th data-i18n="hostname"></th>
             <th style="width: 3em;" data-i18n="port"></th>
+            <th data-i18n="pattern"></th>
            </tr>
         </thead>
         <tbody>
@@ -633,6 +634,7 @@
           <td></td>
           <td></td>
           <td></td>
+          <td></td>
         </tr>
       </template>
     </section>

src/content/options.js

@@ -458,7 +458,8 @@ class Proxies {
     filter.addEventListener('input', e => this.filterProxy(e));
 
     this.proxyCache = {};                                   // used to find proxy
-    Log.proxyCache = this.proxyCache;                       // used to get the denials for the log
+    Log.proxyCache = this.proxyCache;                       // used to get the details for the log
+    Log.mode = pref.mode;
 
     // --- hide elements for Basic
     // App.isBasic && this.proxyDiv.classList.add('basic');