diff --git a/js/localization.js b/js/localization.js index 872ec47d..af020069 100644 --- a/js/localization.js +++ b/js/localization.js @@ -1,4 +1,4 @@ -/* global $$ waitForSelector */// dom.js +/* global $$ $ waitForSelector */// dom.js /* global download */// toolbox.js 'use strict'; @@ -117,13 +117,22 @@ Object.assign(t, { return t.toFragment(root); }, - fetchTemplate: async (url, name) => t.template[name] || - t.createTemplate({ - content: t.toFragment(t.parse(await download(url))), - dataset: {id: name}, - }), + fetchTemplate: async (url, name) => { + let res = t.template[name]; + if (!res) { + res = t.parse(await download(url), '*'); + if (!$$('template', res).map(t.createTemplate).length) { + t.createTemplate({ + content: t.toFragment($('body', res)), + dataset: {id: name}, + }); + } + res = t.template[name]; + } + return res; + }, - parse: str => new DOMParser().parseFromString(str, 'text/html').body, + parse: (str, pick = 'body') => $(pick, new DOMParser().parseFromString(str, 'text/html')), sanitizeHtml(root) { const toRemove = []; diff --git a/popup.html b/popup.html index 91474526..b23056a3 100644 --- a/popup.html +++ b/popup.html @@ -98,65 +98,6 @@ - - - - - - - - @@ -214,7 +155,7 @@ >
-
- - - diff --git a/popup/popup.js b/popup/popup.js index 8a7b650d..b8ca20ce 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -1,4 +1,4 @@ -/* global $ $$ $create setupLivePrefs */// dom.js +/* global $ $$ $create getEventKeyName setupLivePrefs */// dom.js /* global ABOUT_BLANK getStyleDataMerged preinit */// preinit.js /* global API msg */// msg.js /* global Events */ @@ -86,13 +86,30 @@ async function initPopup(frames) { setupLivePrefs(); const elFind = $('#find-styles-btn'); - elFind.onclick = async e => { - const inline = e.type === 'click'; - if (inline) elFind.disabled = true; - await require(['/popup/search']); - if (!inline) Events.searchSite(e); + const elFindDeps = async () => { + if (!t.template.searchUI) { + document.body.append(await t.fetchTemplate('/popup/search.html', 'searchUI')); + } + await require([ + '/popup/search.css', + '/popup/search', + ]); }; - elFind.on('split-btn', elFind.onclick); + elFind.on('click', async () => { + elFind.disabled = true; + await elFindDeps(); + Events.searchInline(); + }); + elFind.on('split-btn', async e => { + await elFindDeps(); + Events.searchSite(e); + }); + window.on('keydown', e => { + if (getEventKeyName(e) === 'Ctrl-F') { + e.preventDefault(); + elFind.click(); + } + }); Object.assign($('#popup-manage-button'), { onclick: Events.openManager, diff --git a/popup/search.html b/popup/search.html new file mode 100644 index 00000000..3e451830 --- /dev/null +++ b/popup/search.html @@ -0,0 +1,84 @@ + + + + + + + + + diff --git a/popup/search.js b/popup/search.js index 559a6a4d..5e1ce380 100644 --- a/popup/search.js +++ b/popup/search.js @@ -8,8 +8,6 @@ 'use strict'; (() => { - require(['/popup/search.css']); - const RESULT_ID_PREFIX = t.template.searchResult.className + '-'; const RESULT_SEL = '.' + t.template.searchResult.className; const INDEX_URL = URLS.usoArchiveRaw[0] + 'search-index.json'; @@ -71,10 +69,10 @@ const entry = el.closest(RESULT_SEL); return {entry, result: entry && entry._result}; }; - const $classList = sel => (sel instanceof Node ? sel : $(sel)).classList; - const show = sel => $classList(sel).remove('hidden'); - const hide = sel => $classList(sel).add('hidden'); - + Events.searchInline = () => { + calcCategory(); + ready = start(); + }; Events.searchSite = event => { // use a less specific category if the inline search wasn't used yet if (!category) calcCategory({retry: 1}); @@ -94,7 +92,6 @@ `/scripts/by-site/${tryURL(tabURL).hostname.replace(/^www\./, '')}?language=css${add('&q=', q)}`; Events.openURLandHide.call({href}, event); }; - $('#search-globals').onchange = function () { searchGlobals = this.checked; ready = ready.then(start); @@ -165,9 +162,6 @@ } }); - calcCategory(); - ready = start(); - function next() { displayedPage = Math.min(totalPages, displayedPage + 1); scrollToFirstResult = true; @@ -182,15 +176,15 @@ function error(reason) { dom.error.textContent = reason; - show(dom.error); - hide(dom.list); + dom.error.hidden = false; + dom.list.hidden = true; if (dom.error.getBoundingClientRect().bottom < 0) { dom.error.scrollIntoView({behavior: 'smooth', block: 'start'}); } } async function start() { - resetUI.timer = setTimeout(resetUI, 500); + resetUI.timer = resetUI.timer || setTimeout(resetUI, 500); try { results = []; for (let retry = 0; !results.length && retry <= 2; retry++) { @@ -202,22 +196,24 @@ results = results.filter(r => !allSupportedIds.has(r.i)); } render(); - (results.length ? show : hide)(dom.list); + dom.list.hidden = !results.length; if (!results.length && !$('#search-query').value) { error(t('searchResultNoneFound')); + } else { + resetUI(); } } catch (reason) { error(reason); } clearTimeout(resetUI.timer); - resetUI(); + resetUI.timer = 0; } function resetUI() { document.body.classList.add('search-results-shown'); - show(dom.container); - show(dom.list); - hide(dom.error); + dom.container.hidden = false; + dom.list.hidden = false; + dom.error.hidden = true; } function render() {