mirror of https://github.com/gorhill/uBlock.git
Improve code viewer convenience
- 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
parent
53be37955f
commit
6220c4d9d5
|
|
@ -16,7 +16,10 @@
|
|||
<body class="loading">
|
||||
|
||||
<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>
|
||||
<div id="content" class="codeMirrorContainer codeMirrorBreakAll"></div>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,16 @@ body {
|
|||
#header:focus-within #pastURLs {
|
||||
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 {
|
||||
background-color: var(--surface-0);
|
||||
border: 1px solid var(--border-1);
|
||||
|
|
|
|||
|
|
@ -30,9 +30,9 @@ import { getActualTheme } from './theme.js';
|
|||
|
||||
/******************************************************************************/
|
||||
|
||||
const urlToTextMap = new Map();
|
||||
const urlToDocMap = new Map();
|
||||
const params = new URLSearchParams(document.location.search);
|
||||
let fromURL = '';
|
||||
let currentURL = '';
|
||||
|
||||
const cmEditor = new CodeMirror(qs$('#content'), {
|
||||
autofocus: true,
|
||||
|
|
@ -88,12 +88,11 @@ cmEditor.addOverlay({
|
|||
},
|
||||
});
|
||||
|
||||
urlToDocMap.set('', cmEditor.getDoc());
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
async function fetchResource(url) {
|
||||
if ( urlToTextMap.has(url) ) {
|
||||
return urlToTextMap.get(url);
|
||||
}
|
||||
let response, text;
|
||||
try {
|
||||
response = await fetch(url);
|
||||
|
|
@ -103,34 +102,46 @@ async function fetchResource(url) {
|
|||
}
|
||||
let mime = response.headers.get('Content-Type') || '';
|
||||
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 ) {
|
||||
case 'text/css':
|
||||
text = beautifier.css(text, { indent_size: 2 });
|
||||
text = beautifier.css(text, options);
|
||||
break;
|
||||
case 'text/html':
|
||||
case 'application/xhtml+xml':
|
||||
case 'application/xml':
|
||||
case 'image/svg+xml':
|
||||
text = beautifier.html(text, { indent_size: 2 });
|
||||
text = beautifier.html(text, options);
|
||||
break;
|
||||
case 'text/javascript':
|
||||
case 'application/javascript':
|
||||
case 'application/x-javascript':
|
||||
text = beautifier.js(text, { indent_size: 4 });
|
||||
text = beautifier.js(text, options);
|
||||
break;
|
||||
case 'application/json':
|
||||
text = beautifier.js(text, { indent_size: 2 });
|
||||
text = beautifier.js(text, options);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
urlToTextMap.set(url, { mime, text });
|
||||
return { mime, text };
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
|
||||
function updatePastURLs(url) {
|
||||
function addPastURLs(url) {
|
||||
const list = qs$('#pastURLs');
|
||||
let current;
|
||||
for ( let i = 0; i < list.children.length; i++ ) {
|
||||
|
|
@ -139,6 +150,7 @@ function updatePastURLs(url) {
|
|||
if ( span.textContent !== url ) { continue; }
|
||||
current = span;
|
||||
}
|
||||
if ( url === '' ) { return; }
|
||||
if ( current === undefined ) {
|
||||
current = document.createElement('span');
|
||||
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) {
|
||||
// For convenience, remove potentially existing quotes around the URL
|
||||
if ( /^(["']).+\1$/.test(resourceURL) ) {
|
||||
resourceURL = resourceURL.slice(1, -1);
|
||||
}
|
||||
const input = qs$('#header input[type="url"]');
|
||||
let to;
|
||||
try {
|
||||
to = new URL(resourceURL, fromURL || undefined);
|
||||
} catch(ex) {
|
||||
let afterURL;
|
||||
if ( resourceURL !== '' ) {
|
||||
try {
|
||||
const url = new URL(resourceURL, currentURL || undefined);
|
||||
url.hash = '';
|
||||
afterURL = url.href;
|
||||
} catch(ex) {
|
||||
}
|
||||
if ( afterURL === undefined ) { return; }
|
||||
} else {
|
||||
afterURL = '';
|
||||
}
|
||||
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 ( afterURL !== '' && /^https?:\/\/./.test(afterURL) === false ) {
|
||||
return;
|
||||
}
|
||||
if ( r === undefined ) { return; }
|
||||
fromURL = to.href;
|
||||
dom.attr(input, 'value', to.href);
|
||||
input.value = to;
|
||||
if ( afterURL === currentURL ) {
|
||||
if ( afterURL !== resourceURL ) {
|
||||
setInputURL(afterURL);
|
||||
}
|
||||
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');
|
||||
dom.attr(a, 'href', to);
|
||||
dom.attr(a, 'title', to);
|
||||
cmEditor.setOption('mode', r.mime || '');
|
||||
cmEditor.setValue(r.text);
|
||||
updatePastURLs(to.href);
|
||||
dom.attr(a, 'href', afterURL);
|
||||
dom.attr(a, 'title', afterURL);
|
||||
addPastURLs(afterURL);
|
||||
// For unknown reasons, calling focus() synchronously does not work...
|
||||
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'));
|
||||
|
||||
dom.on('#header input[type="url"]', 'change', ev => {
|
||||
setURL(ev.target.value);
|
||||
});
|
||||
|
||||
dom.on('#removeURL', 'click', ( ) => {
|
||||
removeURL(qs$('#header input[type="url"]').value);
|
||||
});
|
||||
|
||||
dom.on('#pastURLs', 'mousedown', 'span', ev => {
|
||||
setURL(ev.target.textContent);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue