Add 'View source...' entry in context menu

This new context menu entry will be available only when the advanced setting `filterAuthorMode` is set to `true`. See: https://github.com/gorhill/uBlock/wiki/Advanced-settings#filterauthormode The purpose is for filter list maintainers to easily access the source code of web pages when investigating filter issues, without having to necessarily go through the logger. Additionally an input field to enter URL directly has been added to the code viewer for convenience.
gorhill · Mar 11, 2023 · e2dd008 · e2dd008 · u-RraaLL · Mar 12, 2023
1 parent bed362d
commit e2dd008
Show file tree

Hide file tree

Showing 5 changed files with 224 additions and 89 deletions.
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -1217,6 +1217,10 @@
     "message": "Temporarily allow large media elements",
     "description": "A context menu entry, present when large media elements have been blocked on the current site"
   },
+  "contextMenuViewSource": {
+    "message": "View source…",
+    "description": "A context menu entry, to view the source code of the target resource"
+  },
   "shortcutCapturePlaceholder": {
     "message": "Type a shortcut",
     "description": "Placeholder string for input field used to capture a keyboard shortcut"

diff --git a/src/code-viewer.html b/src/code-viewer.html
@@ -15,6 +15,10 @@
 </head>
 <body class="loading">
 
+<div id="header">
+    <div><input type="url" value="" spellcheck="false" autofocus="false"></div>
+    <div id="pastURLs"></div>
+</div>
 <div id="content" class="codeMirrorContainer codeMirrorBreakAll"></div>
 
 <script src="lib/codemirror/lib/codemirror.js"></script>

diff --git a/src/css/code-viewer.css b/src/css/code-viewer.css
@@ -8,6 +8,43 @@ body {
     padding: 0;
     width: 100vw;
     }
+#header {
+    background-color: var(--cm-gutter-surface);
+    border-bottom: 1px solid var(--surface-1);
+    padding: var(--default-gap-xsmall);
+    position: relative;
+    z-index: 1000000;
+    }
+#header input[type="url"] {
+    box-sizing: border-box;
+    font-size: var(--font-size-smaller);
+    width: 100%;
+    }
+#header:focus-within #pastURLs {
+    display: flex;
+    }
+#pastURLs {
+    background-color: var(--surface-0);
+    border: 1px solid var(--border-1);
+    display: none;
+    flex-direction: column;
+    font-size: var(--font-size-smaller);
+    position: absolute;
+    }
+#pastURLs > span {
+    cursor: pointer;
+    overflow: hidden;
+    padding: 2px 4px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 75vw;
+    }
+#pastURLs > span.selected {
+    font-weight: bold;
+    }
+#pastURLs > span:hover {
+    background-color: var(--surface-1);
+    }
 #content {
     flex-grow: 1;
     }

diff --git a/src/js/code-viewer.js b/src/js/code-viewer.js
@@ -29,107 +29,161 @@ import { dom, qs$ } from './dom.js';
 
 /******************************************************************************/
 
-(async ( ) => {
-    const params = new URLSearchParams(document.location.search);
-    const url = params.get('url');
-
-    const a = qs$('.cm-search-widget .sourceURL');
-    dom.attr(a, 'href', url);
-    dom.attr(a, 'title', url);
+const urlToTextMap = new Map();
+const params = new URLSearchParams(document.location.search);
+let fromURL = '';
+
+const cmEditor = new CodeMirror(qs$('#content'), {
+    autofocus: true,
+    gutters: [ 'CodeMirror-linenumbers' ],
+    lineNumbers: true,
+    lineWrapping: true,
+    matchBrackets: true,
+    styleActiveLine: {
+        nonEmpty: true,
+    },
+});
+
+uBlockDashboard.patchCodeMirrorEditor(cmEditor);
+if ( dom.cl.has(dom.html, 'dark') ) {
+    dom.cl.add('#content .cm-s-default', 'cm-s-night');
+    dom.cl.remove('#content .cm-s-default', 'cm-s-default');
+}
+
+// Convert resource URLs into clickable links to code viewer
+cmEditor.addOverlay({
+    re: /\b(?:href|src)=["']([^"']+)["']/g,
+    match: null,
+    token: function(stream) {
+        if ( stream.sol() ) {
+            this.re.lastIndex = 0;
+            this.match = this.re.exec(stream.string);
+        }
+        if ( this.match === null ) {
+            stream.skipToEnd();
+            return null;
+        }
+        const end = this.re.lastIndex - 1;
+        const beg = end - this.match[1].length;
+        if ( stream.pos < beg ) {
+            stream.pos = beg;
+            return null;
+        }
+        if ( stream.pos < end ) {
+            stream.pos = end;
+            return 'href';
+        }
+        if ( stream.pos < this.re.lastIndex ) {
+            stream.pos = this.re.lastIndex;
+            this.match = this.re.exec(stream.string);
+            return null;
+        }
+        stream.skipToEnd();
+        return null;
+    },
+});
 
-    const response = await fetch(url);
-    const text = await response.text();
+/******************************************************************************/
 
+async function fetchResource(url) {
+    if ( urlToTextMap.has(url) ) {
+        return urlToTextMap.get(url);
+    }
+    let response, text;
+    try {
+        response = await fetch(url);
+        text = await response.text();
+    } catch(reason) {
+        return;
+    }
     let mime = response.headers.get('Content-Type') || '';
     mime = mime.replace(/\s*;.*$/, '').trim();
-    let value = '';
     switch ( mime ) {
         case 'text/css':
-            value = beautifier.css(text, { indent_size: 2 });
+            text = beautifier.css(text, { indent_size: 2 });
             break;
         case 'text/html':
         case 'application/xhtml+xml':
         case 'application/xml':
         case 'image/svg+xml':
-            value = beautifier.html(text, { indent_size: 2 });
+            text = beautifier.html(text, { indent_size: 2 });
             break;
         case 'text/javascript':
         case 'application/javascript':
         case 'application/x-javascript':
-            value = beautifier.js(text, { indent_size: 4 });
+            text = beautifier.js(text, { indent_size: 4 });
             break;
         case 'application/json':
-            value = beautifier.js(text, { indent_size: 2 });
+            text = beautifier.js(text, { indent_size: 2 });
             break;
         default:
-            value = text;
             break;
     }
+    urlToTextMap.set(url, { mime, text });
+    return { mime, text };
+}
+
+/******************************************************************************/
 
-    const cmEditor = new CodeMirror(qs$('#content'), {
-        autofocus: true,
-        gutters: [ 'CodeMirror-linenumbers' ],
-        lineNumbers: true,
-        lineWrapping: true,
-        matchBrackets: true,
-        mode: mime,
-        styleActiveLine: {
-            nonEmpty: true,
-        },
-        value,
-    });
-
-    uBlockDashboard.patchCodeMirrorEditor(cmEditor);
-    if ( dom.cl.has(dom.html, 'dark') ) {
-        dom.cl.add('#content .cm-s-default', 'cm-s-night');
-        dom.cl.remove('#content .cm-s-default', 'cm-s-default');
+function updatePastURLs(url) {
+    const list = qs$('#pastURLs');
+    let current;
+    for ( let i = 0; i < list.children.length; i++ ) {
+        const span = list.children[i];
+        dom.cl.remove(span, 'selected');
+        if ( span.textContent !== url ) { continue; }
+        current = span;
     }
+    if ( current === undefined ) {
+        current = document.createElement('span');
+        current.textContent = url;
+        list.prepend(current);
+    }
+    dom.cl.add(current, 'selected');
+}
 
-    // Convert resource URLs into clickable links to code viewer
-    cmEditor.addOverlay({
-        re: /\b(?:href|src)=["']([^"']+)["']/g,
-        match: null,
-        token: function(stream) {
-            if ( stream.sol() ) {
-                this.re.lastIndex = 0;
-                this.match = this.re.exec(stream.string);
-            }
-            if ( this.match === null ) {
-                stream.skipToEnd();
-                return null;
-            }
-            const end = this.re.lastIndex - 1;
-            const beg = end - this.match[1].length;
-            if ( stream.pos < beg ) {
-                stream.pos = beg;
-                return null;
-            }
-            if ( stream.pos < end ) {
-                stream.pos = end;
-                return 'href';
-            }
-            if ( stream.pos < this.re.lastIndex ) {
-                stream.pos = this.re.lastIndex;
-                this.match = this.re.exec(stream.string);
-                return null;
-            }
-            stream.skipToEnd();
-            return null;
-        },
-    });
-
-    dom.on('#content', 'click', '.cm-href', ev => {
-        const href = ev.target.textContent;
-        try {
-            const toURL = new URL(href, url);
-            vAPI.messaging.send('codeViewer', {
-                what: 'gotoURL',
-                details: {
-                    url: `code-viewer.html?url=${encodeURIComponent(toURL.href)}`,
-                    select: true,
-                },
-            });
-        } catch(ex) {
-        }
-    });
-})();
+/******************************************************************************/
+
+async function setURL(resourceURL) {
+    const input = qs$('#header input[type="url"]');
+    let to;
+    try {
+        to = new URL(resourceURL, fromURL || undefined);
+    } catch(ex) {
+    }
+    if ( to === undefined ) { return; }
+    if ( /^https?:\/\/./.test(to.href) === false ) { return; }
+    if ( to.href === fromURL ) { return; }
+    let r;
+    try {
+        r = await fetchResource(to.href);
+    } catch(reason) {
+    }
+    if ( r === undefined ) { return; }
+    fromURL = to.href;
+    dom.attr(input, 'value', to.href);
+    input.value = to;
+    const a = qs$('.cm-search-widget .sourceURL');
+    dom.attr(a, 'href', to);
+    dom.attr(a, 'title', to);
+    cmEditor.setOption('mode', r.mime || '');
+    cmEditor.setValue(r.text);
+    updatePastURLs(to.href);
+    cmEditor.focus();
+}
+
+/******************************************************************************/
+
+setURL(params.get('url'));
+
+dom.on('#header input[type="url"]', 'change', ev => {
+    setURL(ev.target.value);
+});
+
+dom.on('#pastURLs', 'mousedown', 'span', ev => {
+    setURL(ev.target.textContent);
+});
+
+dom.on('#content', 'click', '.cm-href', ev => {
+    setURL(ev.target.textContent);
+});