update element selectors in all files

This commit is contained in:
Rob Garrison 2017-08-20 19:05:08 -05:00
parent 8645469d3b
commit afc38b0bc8
5 changed files with 84 additions and 81 deletions

View File

@ -49,7 +49,7 @@ Object.defineProperty(Array.prototype, 'last', {get: function () { return this[t
// preload the theme so that CodeMirror can calculate its metrics in DOMContentLoaded->setupLivePrefs() // preload the theme so that CodeMirror can calculate its metrics in DOMContentLoaded->setupLivePrefs()
new MutationObserver((mutations, observer) => { new MutationObserver((mutations, observer) => {
const themeElement = document.getElementById('cm-theme'); const themeElement = $('#cm-theme');
if (themeElement) { if (themeElement) {
themeElement.href = prefs.get('editor.theme') === 'default' ? '' themeElement.href = prefs.get('editor.theme') === 'default' ? ''
: 'vendor/codemirror/theme/' + prefs.get('editor.theme') + '.css'; : 'vendor/codemirror/theme/' + prefs.get('editor.theme') + '.css';
@ -131,7 +131,7 @@ function setCleanItem(node, isClean) {
function isCleanGlobal() { function isCleanGlobal() {
const clean = Object.keys(dirty).length === 0; const clean = Object.keys(dirty).length === 0;
setDirtyClass(document.body, !clean); setDirtyClass(document.body, !clean);
// let saveBtn = document.getElementById('save-button') // let saveBtn = $('#save-button')
// if (clean){ // if (clean){
// //saveBtn.removeAttribute('disabled'); // //saveBtn.removeAttribute('disabled');
// }else{ // }else{
@ -141,13 +141,13 @@ function isCleanGlobal() {
} }
function setCleanGlobal() { function setCleanGlobal() {
document.querySelectorAll('#header, #sections > div').forEach(setCleanSection); $$('#header, #sections > div').forEach(setCleanSection);
// forget the dirty applies-to ids from a deleted section after the style was saved // forget the dirty applies-to ids from a deleted section after the style was saved
dirty = {}; dirty = {};
} }
function setCleanSection(section) { function setCleanSection(section) {
section.querySelectorAll('.style-contributor').forEach(node => { setCleanItem(node, true); }); $$('.style-contributor', section).forEach(node => { setCleanItem(node, true); });
// #header section has no codemirror // #header section has no codemirror
const cm = section.CodeMirror; const cm = section.CodeMirror;
@ -284,7 +284,8 @@ function initCodeMirror() {
} }
parent.appendChild(fragment); parent.appendChild(fragment);
} }
const themeControl = document.getElementById('editor.theme'); // no need to escape the period in the id
const themeControl = $('#editor.theme');
const themeList = localStorage.codeMirrorThemes; const themeList = localStorage.codeMirrorThemes;
if (themeList) { if (themeList) {
optionsFromArray(themeControl, themeList.split(/\s+/)); optionsFromArray(themeControl, themeList.split(/\s+/));
@ -299,7 +300,7 @@ function initCodeMirror() {
}); });
} }
optionsFromArray($('#editor.keyMap'), Object.keys(CM.keyMap).sort()); optionsFromArray($('#editor.keyMap'), Object.keys(CM.keyMap).sort());
document.getElementById('options').addEventListener('change', acmeEventListener, false); $('#options').addEventListener('change', acmeEventListener, false);
setupLivePrefs(); setupLivePrefs();
hotkeyRerouter.setState(true); hotkeyRerouter.setState(true);
@ -319,7 +320,7 @@ function acmeEventListener(event) {
CodeMirror.setOption('indentUnit', Number(value)); CodeMirror.setOption('indentUnit', Number(value));
break; break;
case 'theme': { case 'theme': {
const themeLink = document.getElementById('cm-theme'); const themeLink = $('#cm-theme');
// use non-localized 'default' internally // use non-localized 'default' internally
if (!value || value === 'default' || value === t('defaultTheme')) { if (!value || value === 'default' || value === t('defaultTheme')) {
value = 'default'; value = 'default';
@ -451,13 +452,13 @@ function getSectionForChild(e) {
} }
function getSections() { function getSections() {
return document.querySelectorAll('#sections > div'); return $$('#sections > div');
} }
// remind Chrome to repaint a previously invisible editor box by toggling any element's transform // remind Chrome to repaint a previously invisible editor box by toggling any element's transform
// this bug is present in some versions of Chrome (v37-40 or something) // this bug is present in some versions of Chrome (v37-40 or something)
document.addEventListener('scroll', () => { document.addEventListener('scroll', () => {
const style = document.getElementById('name').style; const style = $('#name').style;
style.webkitTransform = style.webkitTransform ? '' : 'scale(1)'; style.webkitTransform = style.webkitTransform ? '' : 'scale(1)';
}); });
@ -575,7 +576,7 @@ window.onbeforeunload = () => {
}; };
function addAppliesTo(list, name, value) { function addAppliesTo(list, name, value) {
const showingEverything = list.querySelector('.applies-to-everything') !== null; const showingEverything = $('.applies-to-everything', list) !== null;
// blow away 'Everything' if it's there // blow away 'Everything' if it's there
if (showingEverything) { if (showingEverything) {
list.removeChild(list.firstChild); list.removeChild(list.firstChild);
@ -583,19 +584,19 @@ function addAppliesTo(list, name, value) {
let e; let e;
if (name && value) { if (name && value) {
e = template.appliesTo.cloneNode(true); e = template.appliesTo.cloneNode(true);
e.querySelector('[name=applies-type]').value = name; $('[name=applies-type]', e).value = name;
e.querySelector('[name=applies-value]').value = value; $('[name=applies-value]', e).value = value;
e.querySelector('.remove-applies-to').addEventListener('click', removeAppliesTo, false); $('.remove-applies-to', e).addEventListener('click', removeAppliesTo, false);
} else if (showingEverything || list.hasChildNodes()) { } else if (showingEverything || list.hasChildNodes()) {
e = template.appliesTo.cloneNode(true); e = template.appliesTo.cloneNode(true);
if (list.hasChildNodes()) { if (list.hasChildNodes()) {
e.querySelector('[name=applies-type]').value = list.querySelector('li:last-child [name="applies-type"]').value; $('[name=applies-type]', e).value = $('li:last-child [name="applies-type"]', list).value;
} }
e.querySelector('.remove-applies-to').addEventListener('click', removeAppliesTo, false); $('.remove-applies-to', e).addEventListener('click', removeAppliesTo, false);
} else { } else {
e = template.appliesToEverything.cloneNode(true); e = template.appliesToEverything.cloneNode(true);
} }
e.querySelector('.add-applies-to').addEventListener('click', function () { $('.add-applies-to', e).addEventListener('click', function () {
addAppliesTo(this.parentNode.parentNode); addAppliesTo(this.parentNode.parentNode);
}, false); }, false);
list.appendChild(e); list.appendChild(e);
@ -603,13 +604,13 @@ function addAppliesTo(list, name, value) {
function addSection(event, section) { function addSection(event, section) {
const div = template.section.cloneNode(true); const div = template.section.cloneNode(true);
div.querySelector('.applies-to-help').addEventListener('click', showAppliesToHelp, false); $('.applies-to-help', div).addEventListener('click', showAppliesToHelp, false);
div.querySelector('.remove-section').addEventListener('click', removeSection, false); $('.remove-section', div).addEventListener('click', removeSection, false);
div.querySelector('.add-section').addEventListener('click', addSection, false); $('.add-section', div).addEventListener('click', addSection, false);
div.querySelector('.beautify-section').addEventListener('click', beautify); $('.beautify-section', div).addEventListener('click', beautify);
const codeElement = div.querySelector('.code'); const codeElement = $('.code', div);
const appliesTo = div.querySelector('.applies-to-list'); const appliesTo = $('.applies-to-list', div);
let appliesToAdded = false; let appliesToAdded = false;
if (section) { if (section) {
@ -632,24 +633,25 @@ function addSection(event, section) {
toggleTestRegExpVisibility(); toggleTestRegExpVisibility();
appliesTo.addEventListener('change', toggleTestRegExpVisibility); appliesTo.addEventListener('change', toggleTestRegExpVisibility);
div.querySelector('.test-regexp').onclick = showRegExpTester; $('.test-regexp', div).onclick = showRegExpTester;
function toggleTestRegExpVisibility() { function toggleTestRegExpVisibility() {
const show = [...appliesTo.children].some(item => const show = [...appliesTo.children].some(item =>
!item.matches('.applies-to-everything') && !item.matches('.applies-to-everything') &&
item.querySelector('.applies-type').value === 'regexp' && $('.applies-type', item).value === 'regexp' &&
item.querySelector('.applies-value').value.trim()); $('.applies-value', item).value.trim()
);
div.classList.toggle('has-regexp', show); div.classList.toggle('has-regexp', show);
appliesTo.oninput = appliesTo.oninput || show && (event => { appliesTo.oninput = appliesTo.oninput || show && (event => {
if ( if (
event.target.matches('.applies-value') && event.target.matches('.applies-value') &&
event.target.parentElement.querySelector('.applies-type').value === 'regexp' $('.applies-type', event.target.parentElement).value === 'regexp'
) { ) {
showRegExpTester(null, div); showRegExpTester(null, div);
} }
}); });
} }
const sections = document.getElementById('sections'); const sections = $('#sections');
let cm; let cm;
if (event) { if (event) {
const clickedSection = getSectionForChild(event.target); const clickedSection = getSectionForChild(event.target);
@ -686,7 +688,7 @@ function removeSection(event) {
} }
function removeAreaAndSetDirty(area) { function removeAreaAndSetDirty(area) {
const contributors = area.querySelectorAll('.style-contributor'); const contributors = $$('.style-contributor', area);
if (!contributors.length) { if (!contributors.length) {
setCleanItem(area, false); setCleanItem(area, false);
} }
@ -846,7 +848,7 @@ function setupGlobalSearch() {
originalCommand[reverse ? 'findPrev' : 'findNext'](activeCM); originalCommand[reverse ? 'findPrev' : 'findNext'](activeCM);
function searchAppliesTo(cm) { function searchAppliesTo(cm) {
let inputs = [].slice.call(cm.getSection().querySelectorAll('.applies-value')); let inputs = $$('.applies-value', cm.getSection());
if (reverse) { if (reverse) {
inputs = inputs.reverse(); inputs = inputs.reverse();
} }
@ -909,7 +911,7 @@ function setupGlobalSearch() {
} else { } else {
doConfirm(cm); doConfirm(cm);
callback(replacement); callback(replacement);
if (!cm.getWrapperElement().querySelector('.CodeMirror-dialog')) { if (!$('.CodeMirror-dialog', cm.getWrapperElement())) {
// no dialog == nothing found in the current CM, move to the next // no dialog == nothing found in the current CM, move to the next
doReplace(); doReplace();
} }
@ -933,7 +935,7 @@ function setupGlobalSearch() {
const cmp = CodeMirror.cmpPos(cm.getCursor(), pos); const cmp = CodeMirror.cmpPos(cm.getCursor(), pos);
wrapAround |= cmp <= 0; wrapAround |= cmp <= 0;
const dlg = cm.getWrapperElement().querySelector('.CodeMirror-dialog'); const dlg = $('.CodeMirror-dialog', cm.getWrapperElement());
if (!dlg || cmp === 0 || wrapAround && CodeMirror.cmpPos(cm.getCursor(), origPos) >= 0) { if (!dlg || cmp === 0 || wrapAround && CodeMirror.cmpPos(cm.getCursor(), origPos) >= 0) {
if (dlg) { if (dlg) {
dlg.remove(); dlg.remove();
@ -1026,14 +1028,14 @@ function autocompletePicked(cm) {
function refocusMinidialog(cm) { function refocusMinidialog(cm) {
const section = cm.getSection(); const section = cm.getSection();
if (!section.querySelector('.CodeMirror-dialog')) { if (!$('.CodeMirror-dialog', section)) {
return; return;
} }
// close the currently opened minidialog // close the currently opened minidialog
cm.focus(); cm.focus();
// make sure to focus the input in newly opened minidialog // make sure to focus the input in newly opened minidialog
setTimeout(() => { setTimeout(() => {
section.querySelector('.CodeMirror-dialog').focus(); $('.CodeMirror-dialog', section).focus();
}, 0); }, 0);
} }
@ -1103,7 +1105,7 @@ function beautify(event) {
'</div>' + '</div>' +
'<div><button role="undo"></button></div>'); '<div><button role="undo"></button></div>');
const undoButton = document.querySelector('#help-popup button[role="undo"]'); const undoButton = $('#help-popup button[role="undo"]');
undoButton.textContent = t(scope.length === 1 ? 'undo' : 'undoGlobal'); undoButton.textContent = t(scope.length === 1 ? 'undo' : 'undoGlobal');
undoButton.addEventListener('click', () => { undoButton.addEventListener('click', () => {
let undoable = false; let undoable = false;
@ -1142,7 +1144,7 @@ function beautify(event) {
}, 0); }, 0);
}); });
document.querySelector('.beautify-options').onchange = ({target}) => { $('.beautify-options').onchange = ({target}) => {
const value = target.type === 'checkbox' ? target.checked : target.selectedIndex > 0; const value = target.type === 'checkbox' ? target.checked : target.selectedIndex > 0;
prefs.set('editor.beautify', Object.assign(options, {[target.dataset.option]: value})); prefs.set('editor.beautify', Object.assign(options, {[target.dataset.option]: value}));
if (target.parentNode.hasAttribute('newline')) { if (target.parentNode.hasAttribute('newline')) {
@ -1183,7 +1185,7 @@ function init() {
addSection(null, section); addSection(null, section);
editors[0].setOption('lint', CodeMirror.defaults.lint); editors[0].setOption('lint', CodeMirror.defaults.lint);
// default to enabled // default to enabled
document.getElementById('enabled').checked = true; $('#enabled').checked = true;
initHooks(); initHooks();
}; };
return; return;
@ -1210,9 +1212,9 @@ function init() {
} }
function setStyleMeta(style) { function setStyleMeta(style) {
document.getElementById('name').value = style.name; $('#name').value = style.name;
document.getElementById('enabled').checked = style.enabled; $('#enabled').checked = style.enabled;
document.getElementById('url').href = style.url; $('#url').href = style.url;
} }
function initWithStyle({style, codeIsUpdated}) { function initWithStyle({style, codeIsUpdated}) {
@ -1254,19 +1256,19 @@ function initWithStyle({style, codeIsUpdated}) {
} }
function initHooks() { function initHooks() {
document.querySelectorAll('#header .style-contributor').forEach(node => { $$('#header .style-contributor').forEach(node => {
node.addEventListener('change', onChange); node.addEventListener('change', onChange);
node.addEventListener('input', onChange); node.addEventListener('input', onChange);
}); });
document.getElementById('toggle-style-help').addEventListener('click', showToggleStyleHelp); $('#toggle-style-help').addEventListener('click', showToggleStyleHelp);
document.getElementById('to-mozilla').addEventListener('click', showMozillaFormat, false); $('#to-mozilla').addEventListener('click', showMozillaFormat, false);
document.getElementById('to-mozilla-help').addEventListener('click', showToMozillaHelp, false); $('#to-mozilla-help').addEventListener('click', showToMozillaHelp, false);
document.getElementById('from-mozilla').addEventListener('click', fromMozillaFormat); $('#from-mozilla').addEventListener('click', fromMozillaFormat);
document.getElementById('beautify').addEventListener('click', beautify); $('#beautify').addEventListener('click', beautify);
document.getElementById('save-button').addEventListener('click', save, false); $('#save-button').addEventListener('click', save, false);
document.getElementById('sections-help').addEventListener('click', showSectionHelp, false); $('#sections-help').addEventListener('click', showSectionHelp, false);
document.getElementById('keyMap-help').addEventListener('click', showKeyMapHelp, false); $('#keyMap-help').addEventListener('click', showKeyMapHelp, false);
document.getElementById('cancel-button').addEventListener('click', goBackToManage); $('#cancel-button').addEventListener('click', goBackToManage);
initLint(); initLint();
if (!FIREFOX) { if (!FIREFOX) {
@ -1332,7 +1334,7 @@ function maximizeCodeHeight(sectionDiv, isLast) {
return; return;
} }
// scale heights to fill the gap between last section and bottom edge of the window // scale heights to fill the gap between last section and bottom edge of the window
const sections = document.getElementById('sections'); const sections = $('#sections');
const available = window.innerHeight - sections.getBoundingClientRect().bottom - const available = window.innerHeight - sections.getBoundingClientRect().bottom -
parseFloat(getComputedStyle(sections).marginBottom); parseFloat(getComputedStyle(sections).marginBottom);
if (available <= 0) { if (available <= 0) {
@ -1349,25 +1351,25 @@ function maximizeCodeHeight(sectionDiv, isLast) {
function updateTitle() { function updateTitle() {
const DIRTY_TITLE = '* $'; const DIRTY_TITLE = '* $';
const name = document.getElementById('name').savedValue; const name = $('#name').savedValue;
const clean = isCleanGlobal(); const clean = isCleanGlobal();
const title = styleId === null ? t('addStyleTitle') : t('editStyleTitle', [name]); const title = styleId === null ? t('addStyleTitle') : t('editStyleTitle', [name]);
document.title = clean ? title : DIRTY_TITLE.replace('$', title); document.title = clean ? title : DIRTY_TITLE.replace('$', title);
} }
function validate() { function validate() {
const name = document.getElementById('name').value; const name = $('#name').value;
if (name === '') { if (name === '') {
return t('styleMissingName'); return t('styleMissingName');
} }
// validate the regexps // validate the regexps
if (document.querySelectorAll('.applies-to-list').some(list => { if ($$('.applies-to-list').some(list => {
list.childNodes.some(li => { list.childNodes.some(li => {
if (li.className === template.appliesToEverything.className) { if (li.className === template.appliesToEverything.className) {
return false; return false;
} }
const valueElement = li.querySelector('[name=applies-value]'); const valueElement = $('[name=applies-value]', li);
const type = li.querySelector('[name=applies-type]').value; const type = $('[name=applies-type]', li).value;
const value = valueElement.value; const value = valueElement.value;
if (type && value) { if (type && value) {
if (type === 'regexp') { if (type === 'regexp') {
@ -1406,8 +1408,8 @@ function save() {
alert(error); alert(error);
return; return;
} }
const name = document.getElementById('name').value; const name = $('#name').value;
const enabled = document.getElementById('enabled').checked; const enabled = $('#enabled').checked;
saveStyleSafe({ saveStyleSafe({
id: styleId, id: styleId,
name: name, name: name,
@ -1434,12 +1436,12 @@ function getSectionsHashes() {
function getMeta(e) { function getMeta(e) {
const meta = {urls: [], urlPrefixes: [], domains: [], regexps: []}; const meta = {urls: [], urlPrefixes: [], domains: [], regexps: []};
e.querySelector('.applies-to-list').childNodes.forEach(li => { $('.applies-to-list', e).childNodes.forEach(li => {
if (li.className === template.appliesToEverything.className) { if (li.className === template.appliesToEverything.className) {
return; return;
} }
const type = li.querySelector('[name=applies-type]').value; const type = $('[name=applies-type]', li).value;
const value = li.querySelector('[name=applies-value]').value; const value = $('[name=applies-value]', li).value;
if (type && value) { if (type && value) {
const property = CssToProperty[type]; const property = CssToProperty[type];
meta[property].push(value); meta[property].push(value);
@ -1488,12 +1490,12 @@ function fromMozillaFormat() {
</div>` </div>`
)); ));
const contents = popup.querySelector('.contents'); const contents = $('.contents', popup);
contents.insertBefore(popup.codebox.display.wrapper, contents.firstElementChild); contents.insertBefore(popup.codebox.display.wrapper, contents.firstElementChild);
popup.codebox.focus(); popup.codebox.focus();
popup.querySelector('[name="import-append"]').addEventListener('click', doImport); $('[name="import-append"]', popup).addEventListener('click', doImport);
popup.querySelector('[name="import-replace"]').addEventListener('click', doImport); $('[name="import-replace"]', popup).addEventListener('click', doImport);
popup.codebox.on('change', () => { popup.codebox.on('change', () => {
clearTimeout(popup.mozillaTimeout); clearTimeout(popup.mozillaTimeout);
@ -1504,7 +1506,7 @@ function fromMozillaFormat() {
function doImport() { function doImport() {
const replaceOldStyle = this.name === 'import-replace'; const replaceOldStyle = this.name === 'import-replace';
popup.querySelector('.dismiss').onclick(); $('.dismiss', popup).onclick();
const mozStyle = trimNewLines(popup.codebox.getValue()); const mozStyle = trimNewLines(popup.codebox.getValue());
const parser = new parserlib.css.Parser(); const parser = new parserlib.css.Parser();
const lines = mozStyle.split('\n'); const lines = mozStyle.split('\n');
@ -1627,7 +1629,7 @@ function fromMozillaFormat() {
}); });
} else if (!editors.last.getValue()) { } else if (!editors.last.getValue()) {
// nuke the last blank section // nuke the last blank section
if (editors.last.getSection().querySelector('.applies-to-everything')) { if ($('.applies-to-everything', editors.last.getSection())) {
removeSection({target: editors.last.getSection()}); removeSection({target: editors.last.getSection()});
} }
} }
@ -1679,10 +1681,10 @@ function showKeyMapHelp() {
'</tbody>' + '</tbody>' +
'</table>'); '</table>');
const table = document.querySelector('#help-popup table'); const table = $('#help-popup table');
table.addEventListener('input', filterTable); table.addEventListener('input', filterTable);
const inputs = table.querySelectorAll('input'); const inputs = $$('input', table);
inputs[0].addEventListener('keydown', hotkeyHandler); inputs[0].addEventListener('keydown', hotkeyHandler);
inputs[1].focus(); inputs[1].focus();
@ -1769,11 +1771,12 @@ function showRegExpTester(event, section = getSectionForChild(this)) {
const OWN_ICON = chrome.runtime.getManifest().icons['16']; const OWN_ICON = chrome.runtime.getManifest().icons['16'];
const cachedRegexps = showRegExpTester.cachedRegexps = const cachedRegexps = showRegExpTester.cachedRegexps =
showRegExpTester.cachedRegexps || new Map(); showRegExpTester.cachedRegexps || new Map();
const regexps = [...section.querySelector('.applies-to-list').children] const regexps = [...$('.applies-to-list', section).children]
.map(item => .map(item =>
!item.matches('.applies-to-everything') && !item.matches('.applies-to-everything') &&
item.querySelector('.applies-type').value === 'regexp' && $('.applies-type', item).value === 'regexp' &&
item.querySelector('.applies-value').value.trim()) $('.applies-value', item).value.trim()
)
.filter(item => item) .filter(item => item)
.map(text => { .map(text => {
const rxData = Object.assign({text}, cachedRegexps.get(text)); const rxData = Object.assign({text}, cachedRegexps.get(text));
@ -1786,7 +1789,7 @@ function showRegExpTester(event, section = getSectionForChild(this)) {
return rxData; return rxData;
}); });
chrome.tabs.onUpdated.addListener(function _(tabId, info) { chrome.tabs.onUpdated.addListener(function _(tabId, info) {
if (document.querySelector('.regexp-report')) { if ($('.regexp-report')) {
if (info.url) { if (info.url) {
showRegExpTester(event, section); showRegExpTester(event, section);
} }
@ -1894,7 +1897,7 @@ function showRegExpTester(event, section = getSectionForChild(this)) {
} }
showHelp(t('styleRegexpTestTitle'), report); showHelp(t('styleRegexpTestTitle'), report);
document.querySelector('.regexp-report').onclick = event => { $('.regexp-report').onclick = event => {
const target = event.target.closest('a, .regexp-report div'); const target = event.target.closest('a, .regexp-report div');
if (target) { if (target) {
openURL({url: target.href || target.textContent}); openURL({url: target.href || target.textContent});
@ -1914,7 +1917,7 @@ function showHelp(title, body) {
if (getComputedStyle(div).display === 'none') { if (getComputedStyle(div).display === 'none') {
document.addEventListener('keydown', closeHelp); document.addEventListener('keydown', closeHelp);
// avoid chaining on multiple showHelp() calls // avoid chaining on multiple showHelp() calls
div.querySelector('.dismiss').onclick = closeHelp; $('.dismiss', div).onclick = closeHelp;
} }
div.style.display = 'block'; div.style.display = 'block';
@ -1939,7 +1942,7 @@ function showCodeMirrorPopup(title, html, options) {
const popup = showHelp(title, html); const popup = showHelp(title, html);
popup.classList.add('big'); popup.classList.add('big');
popup.codebox = CodeMirror(popup.querySelector('.contents'), Object.assign({ popup.codebox = CodeMirror($('.contents', popup), Object.assign({
mode: 'css', mode: 'css',
lineNumbers: true, lineNumbers: true,
lineWrapping: true, lineWrapping: true,

View File

@ -14,7 +14,7 @@ for (const type of [NodeList, NamedNodeMap, HTMLCollection, HTMLAllCollection])
{ {
// display a full text tooltip on buttons with ellipsis overflow and no inherent title // display a full text tooltip on buttons with ellipsis overflow and no inherent title
const addTooltipsToEllipsized = () => { const addTooltipsToEllipsized = () => {
for (const btn of document.getElementsByTagName('button')) { for (const btn of $$('button')) {
if (btn.title && !btn.titleIsForEllipsis || if (btn.title && !btn.titleIsForEllipsis ||
btn.clientWidth === btn.preresizeClientWidth) { btn.clientWidth === btn.preresizeClientWidth) {
continue; continue;

View File

@ -30,7 +30,7 @@ function tHTML(html, tag) {
} }
const body = t.DOMParser.parseFromString(html, 'text/html').body; const body = t.DOMParser.parseFromString(html, 'text/html').body;
if (html.includes('i18n-')) { if (html.includes('i18n-')) {
tNodeList(body.getElementsByTagName('*')); tNodeList($$('*', body));
} }
// the html string may contain more than one top-level node // the html string may contain more than one top-level node
if (!body.childNodes[1]) { if (!body.childNodes[1]) {
@ -115,7 +115,7 @@ function tDocLoader() {
const cacheLength = Object.keys(t.cache).length; const cacheLength = Object.keys(t.cache).length;
// localize HEAD // localize HEAD
tNodeList(document.getElementsByTagName('*')); tNodeList($$('*'));
// localize BODY // localize BODY
const process = mutations => { const process = mutations => {

View File

@ -354,11 +354,11 @@ var prefs = new function Prefs() {
// and establishes a two-way connection between the document elements and the actual prefs // and establishes a two-way connection between the document elements and the actual prefs
function setupLivePrefs( function setupLivePrefs(
IDs = Object.getOwnPropertyNames(prefs.readOnlyValues) IDs = Object.getOwnPropertyNames(prefs.readOnlyValues)
.filter(id => document.getElementById(id)) .filter(id => $('#' + id))
) { ) {
const checkedProps = {}; const checkedProps = {};
for (const id of IDs) { for (const id of IDs) {
const element = document.getElementById(id); const element = $('#' + id);
checkedProps[id] = element.type === 'checkbox' ? 'checked' : 'value'; checkedProps[id] = element.type === 'checkbox' ? 'checked' : 'value';
updateElement({id, element, force: true}); updateElement({id, element, force: true});
element.addEventListener('change', onChange); element.addEventListener('change', onChange);
@ -374,7 +374,7 @@ function setupLivePrefs(
function updateElement({ function updateElement({
id, id,
value = prefs.get(id), value = prefs.get(id),
element = document.getElementById(id), element = $('#' + id),
force, force,
}) { }) {
const prop = checkedProps[id]; const prop = checkedProps[id];

View File

@ -301,7 +301,7 @@ function showFiltersStats({immediately} = {}) {
} }
$('#filters').classList.toggle('active', filtersSelector.hide !== ''); $('#filters').classList.toggle('active', filtersSelector.hide !== '');
const numTotal = BG.cachedStyles.list.length; const numTotal = BG.cachedStyles.list.length;
const numHidden = installed.getElementsByClassName('entry hidden').length; const numHidden = $$('.entry.hidden', installed).length;
const numShown = Math.min(numTotal - numHidden, installed.children.length); const numShown = Math.min(numTotal - numHidden, installed.children.length);
if (filtersSelector.numShown !== numShown || if (filtersSelector.numShown !== numShown ||
filtersSelector.numTotal !== numTotal) { filtersSelector.numTotal !== numTotal) {