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.
2019-05-23 19:29:59 -04:00 · 2019-05-23 19:29:59 -04:00 · eef76c49ae
parent ab65d44324
commit eef76c49ae
10 changed files with 100 additions and 49 deletions
--- a/src/1p-filters.html
+++ b/src/1p-filters.html
@ -9,6 +9,7 @@
 <link rel="stylesheet" href="lib/codemirror/addon/search/matchesonscrollbar.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">
@ -44,6 +45,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>
--- a/src/asset-viewer.html
+++ b/src/asset-viewer.html
@ -7,6 +7,7 @@
 <link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
 <link rel="stylesheet" href="lib/codemirror/addon/search/matchesonscrollbar.css">
 <link rel="stylesheet" href="css/common.css">
+<link rel="stylesheet" href="css/fa-icons.css">
 <link rel="stylesheet" href="css/codemirror.css">
 <link rel="shortcut icon" type="image/png" href="img/icon_32.png"/>
 <style>
@ -40,6 +41,7 @@ body {
 <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>
--- a/src/css/codemirror.css
+++ b/src/css/codemirror.css
@ -31,6 +31,7 @@
    direction: ltr;
    display: flex;
    flex-shrink: 0;
+    font-size: 110%;
    justify-content: center;
    padding: 4px 8px;
    /* position: absolute; */
@ -41,10 +42,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;
@ -70,6 +74,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;
--- a/src/css/fa-icons.css
+++ b/src/css/fa-icons.css
@ -35,6 +35,9 @@
    position: absolute;
    visibility: visible;
    }
+.fa-icon.fa-icon-vflipped {
+    transform: scale(1, -1);
+    }

 .fa-icon > svg {
    height: 1em;
@ -52,13 +55,15 @@
    width: calc(1em * 1794 / 1792);
    }
 .fa-icon > .fa-icon_clipboard,
+.fa-icon > .fa-icon_external-link,
 .fa-icon > .fa-icon_eye-dropper,
 .fa-icon > .fa-icon_eye-slash,
 .fa-icon > .fa-icon_files-o,
 .fa-icon > .fa-icon_list-alt {
    width: calc(1em * 1792 / 1792);
    }
-.fa-icon > .fa-icon_font {
+.fa-icon > .fa-icon_font,
+.fa-icon > .fa-icon_search {
    width: calc(1em * 1664 / 1792);
    }
 .fa-icon > .fa-icon_home {
@ -80,13 +85,11 @@
 .fa-icon > .fa-icon_times {
    width: calc(1em * 1188 / 1792);
    }
+.fa-icon > .fa-icon_angle-up,
+.fa-icon > .fa-icon_double-angle-up,
 .fa-icon > .fa-icon_lock {
    width: calc(1em *  1152 / 1792);
    }
-.fa-icon > .fa-icon_angle-up,
-.fa-icon > .fa-icon_double-angle-up {
-    width: calc(1em *  998 / 1792);
-    }
 .fa-icon > .fa-icon_double-angle-left {
    width: calc(1em *  966 / 1792);
    }
--- a/src/img/fontawesome/fontawesome-defs.svg
+++ b/src/img/fontawesome/fontawesome-defs.svg
@ -35,6 +35,7 @@ License - https://github.com/FortAwesome/Font-Awesome/tree/a8386aae19e200ddb0f68
    <symbol id="double-angle-up"      viewBox="0 0  998  966"><path d="m 998,883 q 0,13 -10,23 l -50,50 q -10,10 -23,10 -13,0 -23,-10 L 499,563 106,956 Q 96,966 83,966 70,966 60,956 L 10,906 Q 0,896 0,883 0,870 10,860 L 476,394 q 10,-10 23,-10 13,0 23,10 l 466,466 q 10,10 10,23 z m 0,-384 q 0,13 -10,23 l -50,50 q -10,10 -23,10 -13,0 -23,-10 L 499,179 106,572 Q 96,582 83,582 70,582 60,572 L 10,522 Q 0,512 0,499 0,486 10,476 L 476,10 q 10,-10 23,-10 13,0 23,10 l 466,466 q 10,10 10,23 z"/></symbol>
    <symbol id="eraser"               viewBox="0 0 1920 1280"><path d="M 896,1152 1232,768 l -768,0 -336,384 768,0 z M 1909,75 q 15,34 9.5,71.5 Q 1913,184 1888,212 L 992,1236 q -38,44 -96,44 l -768,0 q -38,0 -69.5,-20.5 -31.5,-20.5 -47.5,-54.5 -15,-34 -9.5,-71.5 5.5,-37.5 30.5,-65.5 L 928,44 Q 966,0 1024,0 l 768,0 q 38,0 69.5,20.5 Q 1893,41 1909,75 Z"/></symbol>
    <symbol id="exclamation-triangle" viewBox="0 0 1794 1664"><path d="m 1025.0139,1375 0,-190 q 0,-14 -9.5,-23.5 -9.5,-9.5 -22.5,-9.5 l -192,0 q -13,0 -22.5,9.5 -9.5,9.5 -9.5,23.5 l 0,190 q 0,14 9.5,23.5 9.5,9.5 22.5,9.5 l 192,0 q 13,0 22.5,-9.5 9.5,-9.5 9.5,-23.5 z m -2,-374 18,-459 q 0,-12 -10,-19 -13,-11 -24,-11 l -220,0 q -11,0 -24,11 -10,7 -10,21 l 17,457 q 0,10 10,16.5 10,6.5 24,6.5 l 185,0 q 14,0 23.5,-6.5 9.5,-6.5 10.5,-16.5 z m -14,-934 768,1408 q 35,63 -2,126 -17,29 -46.5,46 -29.5,17 -63.5,17 l -1536,0 q -34,0 -63.5,-17 -29.5,-17 -46.5,-46 -37,-63 -2,-126 L 785.01389,67 q 17,-31 47,-49 30,-18 65,-18 35,0 65,18 30,18 47,49 z"/></symbol>
+    <symbol id="external-link"        viewBox="0 0 1792 1536"><path d="m 1408,928 0,320 q 0,119 -84.5,203.5 Q 1239,1536 1120,1536 l -832,0 Q 169,1536 84.5,1451.5 0,1367 0,1248 L 0,416 Q 0,297 84.5,212.5 169,128 288,128 l 704,0 q 14,0 23,9 9,9 9,23 l 0,64 q 0,14 -9,23 -9,9 -23,9 l -704,0 q -66,0 -113,47 -47,47 -47,113 l 0,832 q 0,66 47,113 47,47 113,47 l 832,0 q 66,0 113,-47 47,-47 47,-113 l 0,-320 q 0,-14 9,-23 9,-9 23,-9 l 64,0 q 14,0 23,9 9,9 9,23 z m 384,-864 0,512 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 L 1507,445 855,1097 q -10,10 -23,10 -13,0 -23,-10 L 695,983 q -10,-10 -10,-23 0,-13 10,-23 L 1347,285 1171,109 q -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 l 512,0 q 26,0 45,19 19,19 19,45 z" /></symbol>
    <symbol id="eye-dropper"          viewBox="0 0 1792 1792"><path d="m 1698,94 q 94,94 94,226.5 0,132.5 -94,225.5 l -225,223 104,104 q 10,10 10,23 0,13 -10,23 l -210,210 q -10,10 -23,10 -13,0 -23,-10 l -105,-105 -603,603 q -37,37 -90,37 l -203,0 -256,128 -64,-64 128,-256 0,-203 q 0,-53 37,-90 L 768,576 663,471 q -10,-10 -10,-23 0,-13 10,-23 L 873,215 q 10,-10 23,-10 13,0 23,10 L 1023,319 1246,94 Q 1339,0 1471.5,0 1604,0 1698,94 Z M 512,1472 1088,896 896,704 l -576,576 0,192 192,0 z"/></symbol>
    <symbol id="eye-slash"            viewBox="0 0 1792 1344"><path d="M 555,1047 633,906 Q 546,843 497,747 448,651 448,544 448,423 509,319 280,436 128,672 295,930 555,1047 Z M 944,288 q 0,-20 -14,-34 -14,-14 -34,-14 -125,0 -214.5,89.5 Q 592,419 592,544 q 0,20 14,34 14,14 34,14 20,0 34,-14 14,-14 14,-34 0,-86 61,-147 61,-61 147,-61 20,0 34,-14 14,-14 14,-34 z M 1307,97 q 0,7 -1,9 -106,189 -316,567 -210,378 -315,566 l -49,89 q -10,16 -28,16 -12,0 -134,-70 -16,-10 -16,-28 0,-12 44,-87 Q 349,1094 228.5,986 108,878 20,741 0,710 0,672 0,634 20,603 173,368 400,232 627,96 896,96 q 89,0 180,17 l 54,-97 q 10,-16 28,-16 5,0 18,6 13,6 31,15.5 18,9.5 33,18.5 15,9 31.5,18.5 16.5,9.5 19.5,11.5 16,10 16,27 z m 37,447 q 0,139 -79,253.5 Q 1186,912 1056,962 l 280,-502 q 8,45 8,84 z m 448,128 q 0,35 -20,69 -39,64 -109,145 -150,172 -347.5,267 -197.5,95 -419.5,95 l 74,-132 Q 1182,1098 1362.5,979 1543,860 1664,672 1549,493 1382,378 l 63,-112 q 95,64 182.5,153 87.5,89 144.5,184 20,34 20,69 z"/></symbol>
    <symbol id="files-o"              viewBox="0 0 1792 1792"><path d="m 1696,384 q 40,0 68,28 28,28 28,68 l 0,1216 q 0,40 -28,68 -28,28 -68,28 l -960,0 q -40,0 -68,-28 -28,-28 -28,-68 l 0,-288 -544,0 Q 56,1408 28,1380 0,1352 0,1312 L 0,640 Q 0,600 20,552 40,504 68,476 L 476,68 Q 504,40 552,20 600,0 640,0 l 416,0 q 40,0 68,28 28,28 28,68 l 0,328 q 68,-40 128,-40 l 416,0 z m -544,213 -299,299 299,0 0,-299 z M 512,213 213,512 l 299,0 0,-299 z m 196,647 316,-316 0,-416 -384,0 0,416 q 0,40 -28,68 -28,28 -68,28 l -416,0 0,640 512,0 0,-256 q 0,-40 20,-88 20,-48 48,-76 z m 956,804 0,-1152 -384,0 0,416 q 0,40 -28,68 -28,28 -68,28 l -416,0 0,640 896,0 z"/></symbol>
@ -50,6 +51,7 @@ License - https://github.com/FortAwesome/Font-Awesome/tree/a8386aae19e200ddb0f68
    <symbol id="play-circle-o"        viewBox="0 0 1536 1536"><path d="m 1184,768 q 0,37 -32,55 l -544,320 q -15,9 -32,9 -16,0 -32,-8 -32,-19 -32,-56 l 0,-640 q 0,-37 32,-56 33,-18 64,1 l 544,320 q 32,18 32,55 z m 128,0 q 0,-148 -73,-273 -73,-125 -198,-198 -125,-73 -273,-73 -148,0 -273,73 -125,73 -198,198 -73,125 -73,273 0,148 73,273 73,125 198,198 125,73 273,73 148,0 273,-73 125,-73 198,-198 73,-125 73,-273 z m 224,0 q 0,209 -103,385.5 Q 1330,1330 1153.5,1433 977,1536 768,1536 559,1536 382.5,1433 206,1330 103,1153.5 0,977 0,768 0,559 103,382.5 206,206 382.5,103 559,0 768,0 977,0 1153.5,103 1330,206 1433,382.5 1536,559 1536,768 Z"/></symbol>
    <symbol id="power-off"            viewBox="0 0 1536 1664"><path d="m 1536,896 q 0,156 -61,298 -61,142 -164,245 -103,103 -245,164 -142,61 -298,61 -156,0 -298,-61 Q 328,1542 225,1439 122,1336 61,1194 0,1052 0,896 0,714 80.5,553 161,392 307,283 q 43,-32 95.5,-25 52.5,7 83.5,50 32,42 24.5,94.5 Q 503,455 461,487 363,561 309.5,668 256,775 256,896 q 0,104 40.5,198.5 40.5,94.5 109.5,163.5 69,69 163.5,109.5 94.5,40.5 198.5,40.5 104,0 198.5,-40.5 Q 1061,1327 1130,1258 1199,1189 1239.5,1094.5 1280,1000 1280,896 1280,775 1226.5,668 1173,561 1075,487 1033,455 1025.5,402.5 1018,350 1050,308 q 31,-43 84,-50 53,-7 95,25 146,109 226.5,270 80.5,161 80.5,343 z m -640,-768 0,640 q 0,52 -38,90 -38,38 -90,38 -52,0 -90,-38 -38,-38 -38,-90 l 0,-640 q 0,-52 38,-90 38,-38 90,-38 52,0 90,38 38,38 38,90 z"/></symbol>
    <symbol id="refresh"              viewBox="0 0 1536 1536"><path d="m 1511,928 q 0,5 -1,7 -64,268 -268,434.5 Q 1038,1536 764,1536 618,1536 481.5,1481 345,1426 238,1324 l -129,129 q -19,19 -45,19 -26,0 -45,-19 Q 0,1434 0,1408 L 0,960 q 0,-26 19,-45 19,-19 45,-19 l 448,0 q 26,0 45,19 19,19 19,45 0,26 -19,45 l -137,137 q 71,66 161,102 90,36 187,36 134,0 250,-65 116,-65 186,-179 11,-17 53,-117 8,-23 30,-23 l 192,0 q 13,0 22.5,9.5 9.5,9.5 9.5,22.5 z m 25,-800 0,448 q 0,26 -19,45 -19,19 -45,19 l -448,0 q -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 L 1117,393 Q 969,256 768,256 q -134,0 -250,65 -116,65 -186,179 -11,17 -53,117 -8,23 -30,23 L 50,640 Q 37,640 27.5,630.5 18,621 18,608 l 0,-7 Q 83,333 288,166.5 493,0 768,0 914,0 1052,55.5 1190,111 1297,212 L 1427,83 q 19,-19 45,-19 26,0 45,19 19,19 19,45 z"/></symbol>
+    <symbol id="search"               viewBox="0 0 1664 1664"><path d="M 1152,704 Q 1152,519 1020.5,387.5 889,256 704,256 519,256 387.5,387.5 256,519 256,704 256,889 387.5,1020.5 519,1152 704,1152 889,1152 1020.5,1020.5 1152,889 1152,704 Z m 512,832 q 0,52 -38,90 -38,38 -90,38 -54,0 -90,-38 L 1103,1284 Q 924,1408 704,1408 561,1408 430.5,1352.5 300,1297 205.5,1202.5 111,1108 55.5,977.5 0,847 0,704 0,561 55.5,430.5 111,300 205.5,205.5 300,111 430.5,55.5 561,0 704,0 q 143,0 273.5,55.5 130.5,55.5 225,150 94.5,94.5 150,225 55.5,130.5 55.5,273.5 0,220 -124,399 l 343,343 q 37,37 37,90 z"/></symbol>
    <symbol id="sliders"              viewBox="0 0 1536 1408"><path d="m 352,1152 0,128 -352,0 0,-128 352,0 z m 352,-128 q 26,0 45,19 19,19 19,45 l 0,256 q 0,26 -19,45 -19,19 -45,19 l -256,0 q -26,0 -45,-19 -19,-19 -19,-45 l 0,-256 q 0,-26 19,-45 19,-19 45,-19 l 256,0 z m 160,-384 0,128 -864,0 0,-128 864,0 z m -640,-512 0,128 -224,0 0,-128 224,0 z m 1312,1024 0,128 -736,0 0,-128 736,0 z M 576,0 q 26,0 45,19 19,19 19,45 l 0,256 q 0,26 -19,45 -19,19 -45,19 l -256,0 q -26,0 -45,-19 -19,-19 -19,-45 L 256,64 Q 256,38 275,19 294,0 320,0 l 256,0 z m 640,512 q 26,0 45,19 19,19 19,45 l 0,256 q 0,26 -19,45 -19,19 -45,19 l -256,0 q -26,0 -45,-19 -19,-19 -19,-45 l 0,-256 q 0,-26 19,-45 19,-19 45,-19 l 256,0 z m 320,128 0,128 -224,0 0,-128 224,0 z m 0,-512 0,128 -864,0 0,-128 864,0 z"/></symbol>
    <symbol id="times"                viewBox="0 0 1188 1188"><path d="m 1188,956 q 0,40 -28,68 l -136,136 q -28,28 -68,28 -40,0 -68,-28 L 594,866 300,1160 q -28,28 -68,28 -40,0 -68,-28 L 28,1024 Q 0,996 0,956 0,916 28,888 L 322,594 28,300 Q 0,272 0,232 0,192 28,164 L 164,28 Q 192,0 232,0 272,0 300,28 L 594,322 888,28 q 28,-28 68,-28 40,0 68,28 l 136,136 q 28,28 28,68 0,40 -28,68 l -294,294 294,294 q 28,28 28,68 z"/></symbol>
    </defs>
--- a/src/js/asset-viewer.js
+++ b/src/js/asset-viewer.js
@ -25,24 +25,28 @@

 /******************************************************************************/

-(function() {
-
-    let params = new URL(document.location).searchParams;
-    let assetKey = params.get('url');
+(( ) => {
+    const params = new URL(document.location).searchParams;
+    const assetKey = params.get('url');
    if ( assetKey === null ) { return; }

    vAPI.messaging.send(
        'default',
        {
            what : 'getAssetContent',
-            url: assetKey
+            url: assetKey,
        },
        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);
+            }
        }
    );

-    let cmEditor = new CodeMirror(
+    const cmEditor = new CodeMirror(
        document.getElementById('content'),
        {
            autofocus: true,
--- a/src/js/assets.js
+++ b/src/js/assets.js
@ -712,18 +712,30 @@ api.get = function(assetKey, options, callback) {
        contentURLs,
        contentURL;

-    const reportBack = function(content, err) {
-        const details = { assetKey: assetKey, content: content };
+    const 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);
        resolve(details);
    };

-    const onContentNotLoaded = function() {
+    const onContentNotLoaded = ( ) => {
        let isExternal;
        while ( (contentURL = contentURLs.shift()) ) {
            isExternal = reIsExternalPath.test(contentURL);
@ -741,7 +753,7 @@ api.get = function(assetKey, options, callback) {
        }
    };

-    const onContentLoaded = function(details) {
+    const onContentLoaded = details => {
        if ( stringIsNotEmpty(details.content) === false ) {
            onContentNotLoaded();
            return;
@ -755,7 +767,7 @@ api.get = function(assetKey, options, callback) {
        reportBack(details.content);
    };

-    const onCachedContentLoaded = function(details) {
+    const onCachedContentLoaded = details => {
        if ( details.content !== '' ) {
            return reportBack(details.content);
        }
@ -865,21 +877,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];
+    const onReady = function() {
+        const assetDict = JSON.parse(JSON.stringify(assetSourceRegistry));
+        const cacheDict = assetCacheRegistry;
+        const now = Date.now();
+        for ( const 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 (
@ -887,14 +899,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(); }
    });
--- 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; }
@ -125,10 +112,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));
@ -142,7 +128,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; }
@ -314,6 +300,28 @@
        if ( state.query ) { return findNext(cm, -1); }
    }

+    {
+        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;
--- a/src/js/messaging.js
+++ b/src/js/messaging.js
@ -51,7 +51,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':
--- a/src/whitelist.html
+++ b/src/whitelist.html
@ -9,6 +9,7 @@
 <link rel="stylesheet" href="lib/codemirror/addon/search/matchesonscrollbar.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">
@ -46,6 +47,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>