update element selectors in all files
This commit is contained in:
parent
8645469d3b
commit
afc38b0bc8
151
edit/edit.js
151
edit/edit.js
|
@ -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,
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 => {
|
||||||
|
|
|
@ -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];
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user