Add convenience link to network resources in logger

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/648

src/css/logger-ui.css

@@ -372,6 +372,7 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
 #vwRenderer #vwContent .logEntry > div > span:nth-of-type(6) {
     }
 #vwRenderer .logEntry > div > span:nth-of-type(7) {
+    position: relative;
     }
 #vwRenderer #vwContent .logEntry > div > span:nth-of-type(7) {
     text-overflow: ellipsis;
@@ -380,11 +381,8 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
     overflow-y: auto;
     white-space: pre-line;
     }
-#vwRenderer .logEntry > div > span:nth-of-type(7) > span > b {
-    font-weight: bold;
-    }
 #vwRenderer .logEntry > div > span:nth-of-type(7) b {
-    font-weight: normal;
+    font-weight: bold;
     }
 #vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(7) b,
 #netFilteringDialog > .panes > .details > div[data-status="1"] b {
@@ -408,6 +406,35 @@ body.colorBlind #vwRenderer .logEntry > div[data-status="2"] > span:nth-of-type(
 body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b {
     background-color: rgba(255, 194, 57, 0.2);
     }
+#vwRenderer .logEntry > div > span:nth-of-type(7) a {
+    background-color: dimgray;
+    color: white;
+    display: none;
+    height: 100%;
+    padding: 0 0.25em;
+    opacity: 0.4;
+    position: absolute;
+    right: 0;
+    text-decoration: none;
+    top: 0;
+    }
+#netInspector.vExpanded #vwRenderer .logEntry > div > span:nth-of-type(7) a {
+    bottom: 0px;
+    height: unset;
+    padding: 0.25em;
+    top: unset;
+    }
+#vwRenderer .logEntry > div > span:nth-of-type(7) a::after {
+    content: '\2197';
+    }
+#vwRenderer .logEntry > div.networkRealm > span:nth-of-type(7):hover a {
+    align-items: center;
+    display: inline-flex;
+    }
+#vwRenderer .logEntry > div > span:nth-of-type(7) a:hover {
+    opacity: 1;
+    }
+
 #vwRenderer #vwBottom {
     background-color: #00F;
     height: 0;

src/js/logger-ui.js

@@ -153,23 +153,39 @@ const regexFromURLFilteringResult = function(result) {
 
 // Emphasize hostname in URL, as this is what matters in uMatrix's rules.
 
-const nodeFromURL = function(url, re) {
+const nodeFromURL = function(parent, url, re) {
+    const fragment = document.createDocumentFragment();
     if ( re instanceof RegExp === false ) {
-        return document.createTextNode(url);
+        fragment.textContent = url;
+    } else {
+        const matches = re.exec(url);
+        if ( matches === null || matches[0].length === 0 ) {
+            fragment.textContent = url;
+        } else {
+            if ( matches.index !== 0 ) {
+                fragment.appendChild(
+                    document.createTextNode(url.slice(0, matches.index))
+                );
+            }
+            const b = document.createElement('b');
+            b.textContent = url.slice(matches.index, re.lastIndex);
+            fragment.appendChild(b);
+            if ( re.lastIndex !== url.length ) {
+                fragment.appendChild(
+                    document.createTextNode(url.slice(re.lastIndex))
+                );
+            }
+        }
     }
-    const matches = re.exec(url);
-    if ( matches === null || matches[0].length === 0 ) {
-        return document.createTextNode(url);
+    if ( /^https?:\/\//.test(url) ) {
+        const a = document.createElement('a');
+        a.setAttribute('href', url);
+        a.setAttribute('target', '_blank');
+        fragment.appendChild(a);
     }
-    const node = renderedURLTemplate.cloneNode(true);
-    node.childNodes[0].textContent = url.slice(0, matches.index);
-    node.childNodes[1].textContent = url.slice(matches.index, re.lastIndex);
-    node.childNodes[2].textContent = url.slice(re.lastIndex);
-    return node;
+    parent.appendChild(fragment);
 };
 
-const renderedURLTemplate = document.querySelector('#renderedURLTemplate > span');
-
 /******************************************************************************/
 
 const padTo2 = function(v) {
@@ -703,8 +719,7 @@ const viewPort = (( ) => {
         } else if ( filteringType === 'dynamicUrl' ) {
             re = regexFromURLFilteringResult(filter.rule.join(' '));
         }
-        span = div.children[6];
-        span.appendChild(nodeFromURL(cells[6], re));
+        nodeFromURL(div.children[6], cells[6], re);
 
         return div;
     };

src/logger-ui.html

@@ -100,7 +100,6 @@
 
 <div id="templates" style="display: none;">
     <div id="logEntryTemplate"><div><span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span></div></div>
-    <div id="renderedURLTemplate"><span><span></span><b></b><span></span></span></div>
 
     <div id="netFilteringDialog" data-pane="details">
         <div class="hide preview"><span>click to preview</span></div>