Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-09-15 15:32:28 +02:00
Code Issues Releases Wiki Activity

Improve code viewer convenience

Browse Source 
- Retain cursor position, selection, undo history, etc. when swapping
  documents.
- Add ability to remove a document from dropdown list
This commit is contained in:
Raymond Hill 2023-03-13 10:51:55 -04:00
parent 53be37955f
commit 6220c4d9d5
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
3 changed files with 103 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/code-viewer.html
View File

@ -16,7 +16,10 @@
<body class="loading"> <body class="loading">
<div id="header"> <div id="header">
<div><input type="url" value="" spellcheck="false" autofocus="false"></div> <div id="currentURL">
<input type="url" value="" spellcheck="false" autofocus="false">
<span id="removeURL" class="fa-icon">trash-o</span>
</div>
<div id="pastURLs"></div> <div id="pastURLs"></div>
</div> </div>
<div id="content" class="codeMirrorContainer codeMirrorBreakAll"></div> <div id="content" class="codeMirrorContainer codeMirrorBreakAll"></div>

10
src/css/code-viewer.css
View File

@ -23,6 +23,16 @@ body {
#header:focus-within #pastURLs { #header:focus-within #pastURLs {
display: flex; display: flex;
} }
#currentURL {
display: flex;
gap: 0.5rem;
}
#currentURL > .fa-icon {
padding: 0 0.5rem;
}
#currentURL > .fa-icon:hover {
background-color: var(--surface-3);
}
#pastURLs { #pastURLs {
background-color: var(--surface-0); background-color: var(--surface-0);
border: 1px solid var(--border-1); border: 1px solid var(--border-1);

121
src/js/code-viewer.js
View File

@ -30,9 +30,9 @@ import { getActualTheme } from './theme.js';
/******************************************************************************/ /******************************************************************************/
const urlToTextMap = new Map(); const urlToDocMap = new Map();
const params = new URLSearchParams(document.location.search); const params = new URLSearchParams(document.location.search);
let fromURL = ''; let currentURL = '';
const cmEditor = new CodeMirror(qs$('#content'), { const cmEditor = new CodeMirror(qs$('#content'), {
autofocus: true, autofocus: true,
@ -88,12 +88,11 @@ cmEditor.addOverlay({
}, },
}); });
urlToDocMap.set('', cmEditor.getDoc());
/******************************************************************************/ /******************************************************************************/
async function fetchResource(url) { async function fetchResource(url) {
if ( urlToTextMap.has(url) ) {
return urlToTextMap.get(url);
}
let response, text; let response, text;
try { try {
response = await fetch(url); response = await fetch(url);
@ -103,34 +102,46 @@ async function fetchResource(url) {
} }
let mime = response.headers.get('Content-Type') || ''; let mime = response.headers.get('Content-Type') || '';
mime = mime.replace(/\s*;.*$/, '').trim(); mime = mime.replace(/\s*;.*$/, '').trim();
const options = {
'end_with_newline': true,
'indent_size': 2,
'html': {
'js': {
'indent_size': 4,
},
},
'js': {
'indent_size': 4,
'preserve-newlines': true,
},
};
switch ( mime ) { switch ( mime ) {
case 'text/css': case 'text/css':
text = beautifier.css(text, { indent_size: 2 }); text = beautifier.css(text, options);
break; break;
case 'text/html': case 'text/html':
case 'application/xhtml+xml': case 'application/xhtml+xml':
case 'application/xml': case 'application/xml':
case 'image/svg+xml': case 'image/svg+xml':
text = beautifier.html(text, { indent_size: 2 }); text = beautifier.html(text, options);
break; break;
case 'text/javascript': case 'text/javascript':
case 'application/javascript': case 'application/javascript':
case 'application/x-javascript': case 'application/x-javascript':
text = beautifier.js(text, { indent_size: 4 }); text = beautifier.js(text, options);
break; break;
case 'application/json': case 'application/json':
text = beautifier.js(text, { indent_size: 2 }); text = beautifier.js(text, options);
break; break;
default: default:
break; break;
} }
urlToTextMap.set(url, { mime, text });
return { mime, text }; return { mime, text };
} }
/******************************************************************************/ /******************************************************************************/
function updatePastURLs(url) { function addPastURLs(url) {
const list = qs$('#pastURLs'); const list = qs$('#pastURLs');
let current; let current;
for ( let i = 0; i < list.children.length; i++ ) { for ( let i = 0; i < list.children.length; i++ ) {
@ -139,6 +150,7 @@ function updatePastURLs(url) {
if ( span.textContent !== url ) { continue; } if ( span.textContent !== url ) { continue; }
current = span; current = span;
} }
if ( url === '' ) { return; }
if ( current === undefined ) { if ( current === undefined ) {
current = document.createElement('span'); current = document.createElement('span');
current.textContent = url; current.textContent = url;
@ -149,47 +161,92 @@ function updatePastURLs(url) {
/******************************************************************************/ /******************************************************************************/
function setInputURL(url) {
const input = qs$('#header input[type="url"]');
if ( url === input.value ) { return; }
dom.attr(input, 'value', url);
input.value = url;
}
/******************************************************************************/
async function setURL(resourceURL) { async function setURL(resourceURL) {
// For convenience, remove potentially existing quotes around the URL // For convenience, remove potentially existing quotes around the URL
if ( /^(["']).+\1$/.test(resourceURL) ) { if ( /^(["']).+\1$/.test(resourceURL) ) {
resourceURL = resourceURL.slice(1, -1); resourceURL = resourceURL.slice(1, -1);
} }
const input = qs$('#header input[type="url"]'); let afterURL;
let to; if ( resourceURL !== '' ) {
try { try {
to = new URL(resourceURL, fromURL || undefined); const url = new URL(resourceURL, currentURL || undefined);
} catch(ex) { url.hash = '';
afterURL = url.href;
} catch(ex) {
}
if ( afterURL === undefined ) { return; }
} else {
afterURL = '';
} }
if ( to === undefined ) { return; } if ( afterURL !== '' && /^https?:\/\/./.test(afterURL) === false ) {
if ( /^https?:\/\/./.test(to.href) === false ) { return; } return;
if ( to.href === fromURL ) { return; }
let r;
try {
r = await fetchResource(to.href);
} catch(reason) {
} }
if ( r === undefined ) { return; } if ( afterURL === currentURL ) {
fromURL = to.href; if ( afterURL !== resourceURL ) {
dom.attr(input, 'value', to.href); setInputURL(afterURL);
input.value = to; }
return;
}
let afterDoc = urlToDocMap.get(afterURL);
if ( afterDoc === undefined ) {
const r = await fetchResource(afterURL) || { mime: '', text: '' };
afterDoc = new CodeMirror.Doc(r.text, r.mime || '');
}
urlToDocMap.set(currentURL, cmEditor.swapDoc(afterDoc));
currentURL = afterURL;
setInputURL(afterURL);
const a = qs$('.cm-search-widget .sourceURL'); const a = qs$('.cm-search-widget .sourceURL');
dom.attr(a, 'href', to); dom.attr(a, 'href', afterURL);
dom.attr(a, 'title', to); dom.attr(a, 'title', afterURL);
cmEditor.setOption('mode', r.mime || ''); addPastURLs(afterURL);
cmEditor.setValue(r.text);
updatePastURLs(to.href);
// For unknown reasons, calling focus() synchronously does not work... // For unknown reasons, calling focus() synchronously does not work...
vAPI.setTimeout(( ) => { cmEditor.focus(); }, 1); vAPI.setTimeout(( ) => { cmEditor.focus(); }, 1);
} }
/******************************************************************************/ /******************************************************************************/
function removeURL(url) {
if ( url === '' ) { return; }
const list = qs$('#pastURLs');
let foundAt = -1;
for ( let i = 0; i < list.children.length; i++ ) {
const span = list.children[i];
if ( span.textContent !== url ) { continue; }
foundAt = i;
}
if ( foundAt === -1 ) { return; }
list.children[foundAt].remove();
if ( foundAt >= list.children.length ) {
foundAt = list.children.length - 1;
}
const afterURL = foundAt !== -1
? list.children[foundAt].textContent
: '';
setURL(afterURL);
urlToDocMap.delete(url);
}
/******************************************************************************/
setURL(params.get('url')); setURL(params.get('url'));
dom.on('#header input[type="url"]', 'change', ev => { dom.on('#header input[type="url"]', 'change', ev => {
setURL(ev.target.value); setURL(ev.target.value);
}); });
dom.on('#removeURL', 'click', ( ) => {
removeURL(qs$('#header input[type="url"]').value);
});
dom.on('#pastURLs', 'mousedown', 'span', ev => { dom.on('#pastURLs', 'mousedown', 'span', ev => {
setURL(ev.target.textContent); setURL(ev.target.textContent);
}); });