From 0608430e802d3e53d22c518d874afdc69e9deff7 Mon Sep 17 00:00:00 2001
From: hawkeye116477 <hawkeye116477@gmail.com>
Date: Sat, 28 Nov 2020 12:22:22 +0100
Subject: [PATCH] Add a link to the remote asset in asset viewer

The link will be present if and only if the content
of the currently viewed asset has been fetched from
a remote location.

Co-authored-by:  gorhill <585534+gorhill@users.noreply.github.com>
---
 src/1p-filters.html         |  2 ++
 src/asset-viewer.html       |  2 ++
 src/css/codemirror.css      | 17 ++++++++++++--
 src/js/asset-viewer.js      |  7 +++++-
 src/js/assets.js            | 45 +++++++++++++++++++++++--------------
 src/js/codemirror/search.js | 44 +++++++++++++++++++++---------------
 src/js/messaging.js         |  6 ++++-
 src/whitelist.html          |  2 ++
 8 files changed, 86 insertions(+), 39 deletions(-)

diff --git a/src/1p-filters.html b/src/1p-filters.html
index db34e4baa..27a2c81d9 100644
--- a/src/1p-filters.html
+++ b/src/1p-filters.html
@@ -10,6 +10,7 @@
 
 <link rel="stylesheet" type="text/css" href="css/themes/default.css">
 <link rel="stylesheet" href="css/common.css">
+<link rel="stylesheet" href="css/fa-icons.css">
 <link rel="stylesheet" href="css/dashboard-common.css">
 <link rel="stylesheet" href="css/cloud-ui.css">
 <link rel="stylesheet" href="css/1p-filters.css">
@@ -45,6 +46,7 @@
 <script src="js/codemirror/search.js"></script>
 <script src="js/codemirror/ubo-static-filtering.js"></script>
 
+<script src="js/fa-icons.js"></script>
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
 <script src="js/vapi-client.js"></script>
diff --git a/src/asset-viewer.html b/src/asset-viewer.html
index 335116ae1..6975d722b 100644
--- a/src/asset-viewer.html
+++ b/src/asset-viewer.html
@@ -9,6 +9,7 @@
 
 <link rel="stylesheet" type="text/css" href="css/themes/default.css">
 <link rel="stylesheet" href="css/common.css">
+<link rel="stylesheet" href="css/fa-icons.css">
 <link rel="stylesheet" href="css/codemirror.css">
 <style>
 body {
@@ -36,6 +37,7 @@
 <script src="js/codemirror/search.js"></script>
 <script src="js/codemirror/ubo-static-filtering.js"></script>
 
+<script src="js/fa-icons.js"></script>
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
 <script src="js/vapi-client.js"></script>
diff --git a/src/css/codemirror.css b/src/css/codemirror.css
index 8599a1938..5d3eafdc7 100644
--- a/src/css/codemirror.css
+++ b/src/css/codemirror.css
@@ -36,6 +36,7 @@
     direction: ltr;
     display: flex;
     flex-shrink: 0;
+    font-size: 110%;
     justify-content: center;
     padding: 0.5em;
     user-select: none;
@@ -43,10 +44,13 @@
       -webkit-user-select: none;
     z-index: 1000;
     }
-.cm-search-widget .fa {
-    color: #888;
+.cm-search-widget .fa-icon {
+    fill: #888;
     font-size: 140%;
     }
+.cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
+    fill: #000;
+    }
 .cm-search-widget-input {
     border: 1px solid gray;
     border-radius: 3px;
@@ -74,6 +78,15 @@
 .cm-search-widget .cm-search-widget-button:hover {
     color: #000;
     }
+.cm-search-widget .sourceURL {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    position: absolute;
+    left: 0;
+    }
+.cm-search-widget .sourceURL[href=""] {
+    display: none;
+    }
 
 .CodeMirror-merge-l-deleted {
     background-image: none;
diff --git a/src/js/asset-viewer.js b/src/js/asset-viewer.js
index ca119068b..8349a976d 100644
--- a/src/js/asset-viewer.js
+++ b/src/js/asset-viewer.js
@@ -39,7 +39,12 @@
         },
         function(details) {
             cmEditor.setValue(details && details.content || '');
-        }   
+            if ( details.sourceURL ) {
+                const a = document.querySelector('.cm-search-widget .sourceURL');
+                a.setAttribute('href', details.sourceURL);
+                a.setAttribute('title', details.sourceURL);
+            }
+        }
     );
 
     var cmEditor = new CodeMirror(
diff --git a/src/js/assets.js b/src/js/assets.js
index 8ba0fd0e4..33977dfbd 100644
--- a/src/js/assets.js
+++ b/src/js/assets.js
@@ -854,17 +854,29 @@ api.get = function(assetKey, options, callback) {
         contentURLs,
         contentURL;
 
-    var reportBack = function(content, err) {
-        var details = { assetKey: assetKey, content: content };
+    let reportBack = (content, err) => {
+        const details = { assetKey, content };
         if ( err ) {
             details.error = assetDetails.lastError = err;
         } else {
             assetDetails.lastError = undefined;
         }
+        if ( options.needSourceURL ) {
+            if (
+                contentURL === undefined &&
+                assetCacheRegistry instanceof Object &&
+                assetCacheRegistry[assetKey] instanceof Object
+            ) {
+                details.sourceURL = assetCacheRegistry[assetKey].remoteURL;
+            }
+            if ( reIsExternalPath.test(contentURL) ) {
+                details.sourceURL = contentURL;
+            }
+        }
         callback(details);
     };
 
-    var onContentNotLoaded = function() {
+    let onContentNotLoaded = ( ) => {
         var isExternal;
         while ( (contentURL = contentURLs.shift()) ) {
             isExternal = reIsExternalPath.test(contentURL);
@@ -883,7 +895,7 @@ api.get = function(assetKey, options, callback) {
         }
     };
 
-    var onContentLoaded = function(details) {
+    let onContentLoaded = details => {
         if ( stringIsNotEmpty(details.content) === false ) {
             onContentNotLoaded();
             return;
@@ -897,7 +909,7 @@ api.get = function(assetKey, options, callback) {
         reportBack(details.content);
     };
 
-    var onCachedContentLoaded = function(details) {
+    let onCachedContentLoaded = details => {
         if ( details.content !== '' ) {
             return reportBack(details.content);
         }
@@ -1003,21 +1015,21 @@ api.put = function(assetKey, content, callback) {
 /******************************************************************************/
 
 api.metadata = function(callback) {
-    var assetRegistryReady = false,
+    let assetRegistryReady = false,
         cacheRegistryReady = false;
 
-    var onReady = function() {
-        var assetDict = JSON.parse(JSON.stringify(assetSourceRegistry)),
-            cacheDict = assetCacheRegistry,
-            assetEntry, cacheEntry,
-            now = Date.now(), obsoleteAfter;
-        for ( var assetKey in assetDict ) {
-            assetEntry = assetDict[assetKey];
-            cacheEntry = cacheDict[assetKey];
+    let onReady = function() {
+        let assetDict = JSON.parse(JSON.stringify(assetSourceRegistry));
+        const cacheDict = assetCacheRegistry;
+        const now = Date.now();
+        for ( let assetKey in assetDict ) {
+            const assetEntry = assetDict[assetKey];
+            const cacheEntry = cacheDict[assetKey];
             if ( cacheEntry ) {
                 assetEntry.cached = true;
                 assetEntry.writeTime = cacheEntry.writeTime;
-                obsoleteAfter = cacheEntry.writeTime + assetEntry.updateAfter * 86400000;
+                const obsoleteAfter =
+                    cacheEntry.writeTime + assetEntry.updateAfter * 86400000;
                 assetEntry.obsolete = obsoleteAfter < now;
                 assetEntry.remoteURL = cacheEntry.remoteURL;
             } else if (
@@ -1025,14 +1037,13 @@ api.metadata = function(callback) {
                 assetEntry.contentURL.length !== 0
             ) {
                 assetEntry.writeTime = 0;
-                obsoleteAfter = 0;
                 assetEntry.obsolete = true;
             }
         }
         callback(assetDict);
     };
 
-    getAssetSourceRegistry(function() {
+    getAssetSourceRegistry(( ) => {
         assetRegistryReady = true;
         if ( cacheRegistryReady ) { onReady(); }
     });
diff --git a/src/js/codemirror/search.js b/src/js/codemirror/search.js
index 948dda7e7..1a2771428 100644
--- a/src/js/codemirror/search.js
+++ b/src/js/codemirror/search.js
@@ -51,19 +51,6 @@
         };
     }
 
-    var searchWidgetHtml =
-        '<div class="cm-search-widget">' +
-            '<span class="fa">&#xf002;</span>&ensp;' +
-            '<span class="cm-search-widget-input">' +
-                '<input type="text">' +
-                '<span class="cm-search-widget-count">' +
-                    '<span><!-- future use --></span><span>0</span>' +
-                '</span>' +
-            '</span>&ensp;' +
-            '<span class="cm-search-widget-up cm-search-widget-button fa">&#xf077;</span>&ensp;' +
-            '<span class="cm-search-widget-down cm-search-widget-button fa">&#xf078;</span>&ensp;' +
-        '</div>';
-
     function searchWidgetKeydownHandler(cm, ev) {
         var keyName = CodeMirror.keyName(ev);
         if ( !keyName ) { return; }
@@ -129,10 +116,9 @@
         this.query = null;
         this.overlay = null;
         this.panel = null;
-        this.widget = null;
-        var domParser = new DOMParser();
-        var doc = domParser.parseFromString(searchWidgetHtml, 'text/html');
-        this.widget = document.adoptNode(doc.body.firstElementChild);
+        const widgetParent =
+            document.querySelector('.cm-search-widget-template').cloneNode(true);
+        this.widget = widgetParent.children[0];
         this.widget.addEventListener('keydown', searchWidgetKeydownHandler.bind(null, cm));
         this.widget.addEventListener('input', searchWidgetInputHandler.bind(null, cm));
         this.widget.addEventListener('mousedown', searchWidgetClickHandler.bind(null, cm));
@@ -146,7 +132,7 @@
     // We want the search widget to behave as if the focus was on the
     // CodeMirror editor.
 
-    var reSearchCommands = /^(?:find|findNext|findPrev|newlineAndIndent)$/;
+    const reSearchCommands = /^(?:find|findNext|findPrev|newlineAndIndent)$/;
 
     function widgetCommandHandler(cm, command) {
         if ( reSearchCommands.test(command) === false ) { return false; }
@@ -316,6 +302,28 @@
         if ( state.query ) { return findNext(cm, true); }
     }
 
+    {
+        const searchWidgetTemplate =
+            '<div class="cm-search-widget-template" style="display:none;">' +
+              '<div class="cm-search-widget">' +
+                '<span class="fa-icon fa-icon-ro">search</span>&ensp;' +
+                '<span class="cm-search-widget-input">' +
+                  '<input type="text">' +
+                  '<span class="cm-search-widget-count">' +
+                    '<span><!-- future use --></span><span>0</span>' +
+                  '</span>' +
+                '</span>&ensp;' +
+                '<span class="cm-search-widget-up cm-search-widget-button fa-icon">angle-up</span>&ensp;' +
+                '<span class="cm-search-widget-down cm-search-widget-button fa-icon fa-icon-vflipped">angle-up</span>&ensp;' +
+                '<a class="fa-icon sourceURL" href>external-link</a>' +
+              '</div>' +
+            '</div>';
+        const domParser = new DOMParser();
+        const doc = domParser.parseFromString(searchWidgetTemplate, 'text/html');
+        const widgetTemplate = document.adoptNode(doc.body.firstElementChild);
+        document.body.appendChild(widgetTemplate);
+    }
+
     CodeMirror.commands.find = findCommand;
     CodeMirror.commands.findNext = findNextCommand;
     CodeMirror.commands.findPrev = findPrevCommand;
diff --git a/src/js/messaging.js b/src/js/messaging.js
index e5e26ca55..01fde1858 100644
--- a/src/js/messaging.js
+++ b/src/js/messaging.js
@@ -57,7 +57,11 @@ const onMessage = function(request, sender, callback) {
     switch ( request.what ) {
     case 'getAssetContent':
         // https://github.com/chrisaljoudi/uBlock/issues/417
-        µb.assets.get(request.url, { dontCache: true }, callback);
+        µb.assets.get(
+            request.url,
+            { dontCache: true, needSourceURL: true },
+            callback
+        );
         return;
 
     case 'listsFromNetFilter':
diff --git a/src/whitelist.html b/src/whitelist.html
index ab2720ee0..2a1dbe022 100644
--- a/src/whitelist.html
+++ b/src/whitelist.html
@@ -10,6 +10,7 @@
 
 <link rel="stylesheet" type="text/css" href="css/themes/default.css">
 <link rel="stylesheet" href="css/common.css">
+<link rel="stylesheet" href="css/fa-icons.css">
 <link rel="stylesheet" href="css/dashboard-common.css">
 <link rel="stylesheet" href="css/cloud-ui.css">
 <link rel="stylesheet" href="css/whitelist.css">
@@ -47,6 +48,7 @@
 
 <script src="js/codemirror/search.js"></script>
 
+<script src="js/fa-icons.js"></script>
 <script src="js/vapi.js"></script>
 <script src="js/vapi-common.js"></script>
 <script src="js/vapi-client.js"></script>