2018-11-07 06:09:29 +00:00
|
|
|
/* global configDialog hotkeys onTabReady msg
|
|
|
|
|
getActiveTab FIREFOX getTabRealURL URLS API onDOMready $ $$ prefs CHROME
|
|
|
|
|
setupLivePrefs template t $create tWordBreak animateElement
|
2019-09-24 13:21:36 +00:00
|
|
|
tryJSONparse debounce CHROME_HAS_BORDER_BUG */
|
2017-12-05 21:14:21 +00:00
|
|
|
|
2017-03-26 02:30:59 +00:00
|
|
|
'use strict';
|
2017-03-16 13:36:33 +00:00
|
|
|
|
2017-03-21 01:32:38 +00:00
|
|
|
let installed;
|
2017-03-30 23:18:41 +00:00
|
|
|
let tabURL;
|
2017-04-03 04:13:10 +00:00
|
|
|
const handleEvent = {};
|
2015-01-30 17:28:05 +00:00
|
|
|
|
2017-06-27 20:13:11 +00:00
|
|
|
const ENTRY_ID_PREFIX_RAW = 'style-';
|
|
|
|
|
const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
|
|
|
|
|
|
2017-11-14 08:13:03 +00:00
|
|
|
toggleSideBorders();
|
|
|
|
|
|
2018-11-07 06:09:29 +00:00
|
|
|
getActiveTab()
|
|
|
|
|
.then(tab =>
|
|
|
|
|
FIREFOX && tab.url === 'about:blank' && tab.status === 'loading'
|
|
|
|
|
? getTabRealURLFirefox(tab)
|
|
|
|
|
: getTabRealURL(tab)
|
|
|
|
|
)
|
|
|
|
|
.then(url => Promise.all([
|
|
|
|
|
(tabURL = URLS.supported(url) ? url : '') &&
|
|
|
|
|
API.getStylesByUrl(tabURL),
|
|
|
|
|
onDOMready().then(initPopup),
|
|
|
|
|
]))
|
|
|
|
|
.then(([results]) => {
|
|
|
|
|
if (!results) {
|
|
|
|
|
// unsupported URL;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
showStyles(results.map(r => Object.assign(r.data, r)));
|
|
|
|
|
})
|
|
|
|
|
.catch(console.error);
|
2017-03-21 01:32:38 +00:00
|
|
|
|
2018-11-07 06:09:29 +00:00
|
|
|
msg.onExtension(onRuntimeMessage);
|
|
|
|
|
|
|
|
|
|
prefs.subscribe(['popup.stylesFirst'], (key, stylesFirst) => {
|
|
|
|
|
const actions = $('body > .actions');
|
|
|
|
|
const before = stylesFirst ? actions : actions.nextSibling;
|
|
|
|
|
document.body.insertBefore(installed, before);
|
|
|
|
|
});
|
|
|
|
|
prefs.subscribe(['popupWidth'], (key, value) => setPopupWidth(value));
|
2019-09-24 13:21:36 +00:00
|
|
|
|
|
|
|
|
if (CHROME_HAS_BORDER_BUG) {
|
|
|
|
|
prefs.subscribe(['popup.borders'], (key, value) => toggleSideBorders(value));
|
|
|
|
|
}
|
2017-03-21 01:32:38 +00:00
|
|
|
|
2017-04-11 10:51:40 +00:00
|
|
|
function onRuntimeMessage(msg) {
|
2017-03-31 08:46:18 +00:00
|
|
|
switch (msg.method) {
|
|
|
|
|
case 'styleAdded':
|
|
|
|
|
case 'styleUpdated':
|
2018-11-07 06:09:29 +00:00
|
|
|
if (msg.reason === 'editPreview' || msg.reason === 'editPreviewEnd') return;
|
|
|
|
|
handleUpdate(msg);
|
2017-03-31 08:46:18 +00:00
|
|
|
break;
|
|
|
|
|
case 'styleDeleted':
|
2018-11-07 06:09:29 +00:00
|
|
|
handleDelete(msg.style.id);
|
2017-03-31 08:46:18 +00:00
|
|
|
break;
|
2017-03-21 01:32:38 +00:00
|
|
|
}
|
2017-12-10 01:03:04 +00:00
|
|
|
dispatchEvent(new CustomEvent(msg.method, {detail: msg}));
|
2017-04-11 10:51:40 +00:00
|
|
|
}
|
2017-03-21 01:32:38 +00:00
|
|
|
|
|
|
|
|
|
2017-04-04 17:21:03 +00:00
|
|
|
function setPopupWidth(width = prefs.get('popupWidth')) {
|
|
|
|
|
document.body.style.width =
|
|
|
|
|
Math.max(200, Math.min(800, width)) + 'px';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2017-11-14 08:13:03 +00:00
|
|
|
function toggleSideBorders(state = prefs.get('popup.borders')) {
|
|
|
|
|
// runs before <body> is parsed
|
|
|
|
|
const style = document.documentElement.style;
|
2019-09-24 13:21:36 +00:00
|
|
|
if (CHROME_HAS_BORDER_BUG && state) {
|
2017-11-14 08:13:03 +00:00
|
|
|
style.cssText +=
|
|
|
|
|
'border-left: 2px solid white !important;' +
|
|
|
|
|
'border-right: 2px solid white !important;';
|
|
|
|
|
} else if (style.cssText) {
|
|
|
|
|
style.borderLeft = style.borderRight = '';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2018-01-01 17:02:49 +00:00
|
|
|
function initPopup() {
|
2017-03-21 01:32:38 +00:00
|
|
|
installed = $('#installed');
|
|
|
|
|
|
2017-04-04 17:21:03 +00:00
|
|
|
setPopupWidth();
|
2015-03-12 23:00:23 +00:00
|
|
|
|
2017-03-21 01:32:38 +00:00
|
|
|
// action buttons
|
2017-07-16 16:49:31 +00:00
|
|
|
$('#disableAll').onchange = function () {
|
2017-04-11 11:22:00 +00:00
|
|
|
installed.classList.toggle('disabled', this.checked);
|
|
|
|
|
};
|
2017-04-21 16:39:34 +00:00
|
|
|
setupLivePrefs();
|
2017-04-09 06:43:51 +00:00
|
|
|
|
2017-08-22 16:29:26 +00:00
|
|
|
Object.assign($('#popup-manage-button'), {
|
|
|
|
|
onclick: handleEvent.openManager,
|
|
|
|
|
onmouseup: handleEvent.openManager,
|
|
|
|
|
oncontextmenu: handleEvent.openManager,
|
|
|
|
|
});
|
2017-04-09 06:43:51 +00:00
|
|
|
|
|
|
|
|
$('#popup-options-button').onclick = () => {
|
|
|
|
|
chrome.runtime.openOptionsPage();
|
|
|
|
|
window.close();
|
|
|
|
|
};
|
|
|
|
|
|
2018-07-02 15:28:38 +00:00
|
|
|
$('#popup-wiki-button').onclick = handleEvent.openURLandHide;
|
2018-04-12 18:02:34 +00:00
|
|
|
|
2017-03-21 01:32:38 +00:00
|
|
|
if (!prefs.get('popup.stylesFirst')) {
|
|
|
|
|
document.body.insertBefore(
|
|
|
|
|
$('body > .actions'),
|
|
|
|
|
installed);
|
|
|
|
|
}
|
|
|
|
|
|
2018-01-01 17:02:49 +00:00
|
|
|
if (!tabURL) {
|
2017-03-21 01:32:38 +00:00
|
|
|
document.body.classList.add('blocked');
|
2017-08-27 09:56:09 +00:00
|
|
|
document.body.insertBefore(template.unavailableInfo, document.body.firstChild);
|
2017-03-21 01:32:38 +00:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2017-08-18 11:41:27 +00:00
|
|
|
getActiveTab().then(function ping(tab, retryCountdown = 10) {
|
2018-11-07 06:09:29 +00:00
|
|
|
msg.sendTab(tab.id, {method: 'ping'}, {frameId: 0})
|
|
|
|
|
.catch(() => false)
|
|
|
|
|
.then(pong => {
|
|
|
|
|
if (pong) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// FF and some Chrome forks (e.g. CentBrowser) implement tab-on-demand
|
|
|
|
|
// so we'll wait a bit to handle popup being invoked right after switching
|
|
|
|
|
if (retryCountdown > 0 && (
|
|
|
|
|
tab.status !== 'complete' ||
|
|
|
|
|
FIREFOX && tab.url === 'about:blank')) {
|
|
|
|
|
setTimeout(ping, 100, tab, --retryCountdown);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const info = template.unreachableInfo;
|
2018-11-24 12:03:01 +00:00
|
|
|
if (!FIREFOX) {
|
|
|
|
|
// Chrome "Allow access to file URLs" in chrome://extensions message
|
|
|
|
|
info.appendChild($create('p', t('unreachableFileHint')));
|
|
|
|
|
}
|
2018-11-07 06:09:29 +00:00
|
|
|
if (FIREFOX && tabURL.startsWith(URLS.browserWebStore)) {
|
|
|
|
|
$('label', info).textContent = t('unreachableAMO');
|
|
|
|
|
const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) +
|
|
|
|
|
(FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF'));
|
|
|
|
|
const renderToken = s => s[0] === '<' ? $create('b', tWordBreak(s.slice(1, -1))) : s;
|
|
|
|
|
const renderLine = line => $create('p', line.split(/(<.*?>)/).map(renderToken));
|
|
|
|
|
const noteNode = $create('fragment', note.split('\n').map(renderLine));
|
2018-11-24 12:03:01 +00:00
|
|
|
info.appendChild(noteNode);
|
|
|
|
|
}
|
|
|
|
|
// Inaccessible locally hosted file type, e.g. JSON, PDF, etc.
|
2018-12-11 12:40:54 +00:00
|
|
|
if (tabURL.length - tabURL.lastIndexOf('.') <= 5) {
|
2018-11-24 12:03:01 +00:00
|
|
|
info.appendChild($create('p', t('InaccessibleFileHint')));
|
2018-11-07 06:09:29 +00:00
|
|
|
}
|
|
|
|
|
document.body.classList.add('unreachable');
|
|
|
|
|
document.body.insertBefore(info, document.body.firstChild);
|
|
|
|
|
});
|
2017-04-12 09:57:40 +00:00
|
|
|
});
|
|
|
|
|
|
2017-03-21 01:32:38 +00:00
|
|
|
// Write new style links
|
|
|
|
|
const writeStyle = $('#write-style');
|
|
|
|
|
const matchTargets = document.createElement('span');
|
2017-04-01 04:37:25 +00:00
|
|
|
const matchWrapper = document.createElement('span');
|
|
|
|
|
matchWrapper.id = 'match';
|
|
|
|
|
matchWrapper.appendChild(matchTargets);
|
2017-03-21 01:32:38 +00:00
|
|
|
|
|
|
|
|
// For this URL
|
|
|
|
|
const urlLink = template.writeStyle.cloneNode(true);
|
|
|
|
|
Object.assign(urlLink, {
|
2018-01-01 17:02:49 +00:00
|
|
|
href: 'edit.html?url-prefix=' + encodeURIComponent(tabURL),
|
|
|
|
|
title: `url-prefix("${tabURL}")`,
|
2017-03-21 01:32:38 +00:00
|
|
|
textContent: prefs.get('popup.breadcrumbs.usePath')
|
2018-01-01 17:02:49 +00:00
|
|
|
? new URL(tabURL).pathname.slice(1)
|
2017-08-20 20:14:12 +00:00
|
|
|
// this URL
|
|
|
|
|
: t('writeStyleForURL').replace(/ /g, '\u00a0'),
|
2017-04-03 04:13:10 +00:00
|
|
|
onclick: handleEvent.openLink,
|
2017-03-21 01:32:38 +00:00
|
|
|
});
|
|
|
|
|
if (prefs.get('popup.breadcrumbs')) {
|
|
|
|
|
urlLink.onmouseenter =
|
|
|
|
|
urlLink.onfocus = () => urlLink.parentNode.classList.add('url()');
|
|
|
|
|
urlLink.onmouseleave =
|
|
|
|
|
urlLink.onblur = () => urlLink.parentNode.classList.remove('url()');
|
|
|
|
|
}
|
|
|
|
|
matchTargets.appendChild(urlLink);
|
|
|
|
|
|
|
|
|
|
// For domain
|
2018-01-01 17:02:49 +00:00
|
|
|
const domains = getDomains(tabURL);
|
2017-03-26 02:30:59 +00:00
|
|
|
for (const domain of domains) {
|
2017-08-14 18:15:29 +00:00
|
|
|
const numParts = domain.length - domain.replace(/\./g, '').length + 1;
|
2017-03-21 01:32:38 +00:00
|
|
|
// Don't include TLD
|
2017-08-14 18:15:29 +00:00
|
|
|
if (domains.length > 1 && numParts === 1) {
|
2017-03-21 01:32:38 +00:00
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
const domainLink = template.writeStyle.cloneNode(true);
|
|
|
|
|
Object.assign(domainLink, {
|
|
|
|
|
href: 'edit.html?domain=' + encodeURIComponent(domain),
|
2017-08-14 18:15:29 +00:00
|
|
|
textContent: numParts > 2 ? domain.split('.')[0] : domain,
|
2017-03-21 01:32:38 +00:00
|
|
|
title: `domain("${domain}")`,
|
2017-04-03 04:13:10 +00:00
|
|
|
onclick: handleEvent.openLink,
|
2017-03-21 01:32:38 +00:00
|
|
|
});
|
2017-08-14 18:15:29 +00:00
|
|
|
domainLink.setAttribute('subdomain', numParts > 1 ? 'true' : '');
|
2017-03-21 01:32:38 +00:00
|
|
|
matchTargets.appendChild(domainLink);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (prefs.get('popup.breadcrumbs')) {
|
|
|
|
|
matchTargets.classList.add('breadcrumbs');
|
|
|
|
|
matchTargets.appendChild(matchTargets.removeChild(matchTargets.firstElementChild));
|
|
|
|
|
}
|
2017-04-01 04:37:25 +00:00
|
|
|
writeStyle.appendChild(matchWrapper);
|
2018-01-01 17:02:49 +00:00
|
|
|
|
|
|
|
|
function getDomains(url) {
|
|
|
|
|
let d = /.*?:\/*([^/:]+)|$/.exec(url)[1];
|
|
|
|
|
if (!d || url.startsWith('file:')) {
|
|
|
|
|
return [];
|
|
|
|
|
}
|
|
|
|
|
const domains = [d];
|
|
|
|
|
while (d.indexOf('.') !== -1) {
|
|
|
|
|
d = d.substring(d.indexOf('.') + 1);
|
|
|
|
|
domains.push(d);
|
|
|
|
|
}
|
|
|
|
|
return domains;
|
|
|
|
|
}
|
2015-03-23 18:56:11 +00:00
|
|
|
}
|
2012-08-20 01:14:33 +00:00
|
|
|
|
2017-03-21 01:32:38 +00:00
|
|
|
|
2019-01-01 05:11:45 +00:00
|
|
|
function sortStyles(entries) {
|
|
|
|
|
const enabledFirst = prefs.get('popup.enabledFirst');
|
|
|
|
|
entries.sort((a, b) =>
|
|
|
|
|
enabledFirst && a.styleMeta.enabled !== b.styleMeta.enabled ?
|
|
|
|
|
(a.styleMeta.enabled ? -1 : 1) :
|
|
|
|
|
a.styleMeta.name.localeCompare(b.styleMeta.name)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2012-08-20 01:14:33 +00:00
|
|
|
function showStyles(styles) {
|
2017-03-30 23:18:41 +00:00
|
|
|
if (!styles) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2017-03-21 01:32:38 +00:00
|
|
|
if (!styles.length) {
|
2017-07-19 08:22:16 +00:00
|
|
|
installed.appendChild(template.noStyles.cloneNode(true));
|
2017-12-10 01:03:04 +00:00
|
|
|
window.dispatchEvent(new Event('showStyles:done'));
|
2017-03-30 23:18:41 +00:00
|
|
|
return;
|
|
|
|
|
}
|
2019-01-01 05:11:45 +00:00
|
|
|
const entries = styles.map(createStyleElement);
|
|
|
|
|
sortStyles(entries);
|
|
|
|
|
entries.forEach(e => installed.appendChild(e));
|
2018-11-07 06:09:29 +00:00
|
|
|
window.dispatchEvent(new Event('showStyles:done'));
|
2012-08-20 01:14:33 +00:00
|
|
|
}
|
|
|
|
|
|
2019-01-01 05:11:45 +00:00
|
|
|
function sortStylesInPlace() {
|
|
|
|
|
if (!prefs.get('popup.autoResort')) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const entries = $$('.entry', installed);
|
|
|
|
|
if (!entries.length) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
sortStyles(entries);
|
|
|
|
|
entries.forEach(e => installed.appendChild(e));
|
|
|
|
|
}
|
|
|
|
|
|
2017-03-21 01:32:38 +00:00
|
|
|
|
2019-01-01 05:11:45 +00:00
|
|
|
function createStyleElement(style) {
|
2018-11-07 06:09:29 +00:00
|
|
|
let entry = $(ENTRY_ID_PREFIX + style.id);
|
|
|
|
|
if (!entry) {
|
|
|
|
|
entry = template.style.cloneNode(true);
|
|
|
|
|
entry.setAttribute('style-id', style.id);
|
|
|
|
|
Object.assign(entry, {
|
|
|
|
|
id: ENTRY_ID_PREFIX_RAW + style.id,
|
|
|
|
|
styleId: style.id,
|
|
|
|
|
styleIsUsercss: Boolean(style.usercssData),
|
|
|
|
|
onmousedown: handleEvent.maybeEdit,
|
|
|
|
|
styleMeta: style
|
|
|
|
|
});
|
|
|
|
|
const checkbox = $('.checker', entry);
|
|
|
|
|
Object.assign(checkbox, {
|
|
|
|
|
id: ENTRY_ID_PREFIX_RAW + style.id,
|
|
|
|
|
// title: t('exclusionsPopupTip'),
|
|
|
|
|
onclick: handleEvent.toggle,
|
|
|
|
|
// oncontextmenu: handleEvent.openExcludeMenu
|
|
|
|
|
});
|
|
|
|
|
const editLink = $('.style-edit-link', entry);
|
|
|
|
|
Object.assign(editLink, {
|
|
|
|
|
href: editLink.getAttribute('href') + style.id,
|
|
|
|
|
onclick: handleEvent.openLink,
|
|
|
|
|
});
|
|
|
|
|
const styleName = $('.style-name', entry);
|
|
|
|
|
Object.assign(styleName, {
|
|
|
|
|
htmlFor: ENTRY_ID_PREFIX_RAW + style.id,
|
|
|
|
|
onclick: handleEvent.name,
|
|
|
|
|
});
|
|
|
|
|
styleName.checkbox = checkbox;
|
|
|
|
|
styleName.appendChild(document.createTextNode(' '));
|
2018-12-10 13:57:44 +00:00
|
|
|
|
2018-11-07 06:09:29 +00:00
|
|
|
const config = $('.configure', entry);
|
2018-12-10 13:57:44 +00:00
|
|
|
config.onclick = handleEvent.configure;
|
|
|
|
|
if (!style.usercssData) {
|
|
|
|
|
if (style.updateUrl && style.updateUrl.includes('?') && style.url) {
|
|
|
|
|
config.href = style.url;
|
|
|
|
|
config.target = '_blank';
|
|
|
|
|
config.title = t('configureStyleOnHomepage');
|
|
|
|
|
config.dataset.sendMessage = JSON.stringify({method: 'openSettings'});
|
|
|
|
|
$('use', config).attributes['xlink:href'].nodeValue = '#svg-icon-config-uso';
|
|
|
|
|
} else {
|
|
|
|
|
config.classList.add('hidden');
|
|
|
|
|
}
|
|
|
|
|
} else if (Object.keys(style.usercssData.vars || {}).length === 0) {
|
|
|
|
|
config.classList.add('hidden');
|
2018-11-07 06:09:29 +00:00
|
|
|
}
|
2018-12-10 13:57:44 +00:00
|
|
|
|
2018-11-07 06:09:29 +00:00
|
|
|
$('.delete', entry).onclick = handleEvent.delete;
|
|
|
|
|
|
|
|
|
|
const indicator = template.regexpProblemIndicator.cloneNode(true);
|
|
|
|
|
indicator.appendChild(document.createTextNode('!'));
|
|
|
|
|
indicator.onclick = handleEvent.indicator;
|
|
|
|
|
$('.main-controls', entry).appendChild(indicator);
|
2019-03-03 22:54:37 +00:00
|
|
|
|
|
|
|
|
$('.menu-button', entry).onclick = handleEvent.toggleMenu;
|
2019-06-20 19:37:40 +00:00
|
|
|
$('.menu-close', entry).onclick = handleEvent.toggleMenu;
|
2019-03-03 22:54:37 +00:00
|
|
|
|
|
|
|
|
$('.exclude-by-domain-checkbox', entry).onchange = e => handleEvent.toggleExclude(e, 'domain');
|
|
|
|
|
$('.exclude-by-url-checkbox', entry).onchange = e => handleEvent.toggleExclude(e, 'url');
|
2018-11-07 06:09:29 +00:00
|
|
|
}
|
2017-03-21 01:32:38 +00:00
|
|
|
|
2018-11-07 06:09:29 +00:00
|
|
|
style = Object.assign(entry.styleMeta, style);
|
2017-03-21 01:32:38 +00:00
|
|
|
|
2018-11-07 06:09:29 +00:00
|
|
|
entry.classList.toggle('disabled', !style.enabled);
|
|
|
|
|
entry.classList.toggle('enabled', style.enabled);
|
|
|
|
|
$('.checker', entry).checked = style.enabled;
|
2017-03-21 01:32:38 +00:00
|
|
|
|
|
|
|
|
const styleName = $('.style-name', entry);
|
2018-11-07 06:09:29 +00:00
|
|
|
styleName.lastChild.textContent = style.name;
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
styleName.title = entry.styleMeta.sloppy ?
|
|
|
|
|
t('styleNotAppliedRegexpProblemTooltip') :
|
|
|
|
|
styleName.scrollWidth > styleName.clientWidth + 1 ?
|
|
|
|
|
styleName.textContent : '';
|
2017-11-26 12:31:00 +00:00
|
|
|
});
|
2017-03-21 01:32:38 +00:00
|
|
|
|
2018-11-07 06:09:29 +00:00
|
|
|
entry.classList.toggle('not-applied', style.excluded || style.sloppy);
|
|
|
|
|
entry.classList.toggle('regexp-partial', style.sloppy);
|
|
|
|
|
|
2019-03-03 22:54:37 +00:00
|
|
|
$('.exclude-by-domain-checkbox', entry).checked = styleExcluded(style, 'domain');
|
2019-06-11 14:44:32 +00:00
|
|
|
$('.exclude-by-url-checkbox', entry).checked = styleExcluded(style, 'url');
|
2019-03-03 22:54:37 +00:00
|
|
|
|
2019-06-11 14:44:32 +00:00
|
|
|
$('.exclude-by-domain', entry).title = getExcludeRule('domain');
|
|
|
|
|
$('.exclude-by-url', entry).title = getExcludeRule('url');
|
2019-03-03 22:54:37 +00:00
|
|
|
|
2019-01-01 05:11:45 +00:00
|
|
|
return entry;
|
2012-08-20 01:14:33 +00:00
|
|
|
}
|
|
|
|
|
|
2019-03-03 22:54:37 +00:00
|
|
|
function styleExcluded({exclusions}, type) {
|
|
|
|
|
if (!exclusions) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
const rule = getExcludeRule(type);
|
|
|
|
|
return exclusions.includes(rule);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getExcludeRule(type) {
|
2019-06-11 14:44:32 +00:00
|
|
|
const u = new URL(tabURL);
|
2019-03-03 22:54:37 +00:00
|
|
|
if (type === 'domain') {
|
2019-06-11 14:44:32 +00:00
|
|
|
return u.origin + '/*';
|
2019-03-03 22:54:37 +00:00
|
|
|
}
|
2019-06-11 14:44:32 +00:00
|
|
|
// current page
|
|
|
|
|
return escapeGlob(u.origin + u.pathname);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function escapeGlob(text) {
|
|
|
|
|
return text.replace(/\*/g, '\\*');
|
2019-03-03 22:54:37 +00:00
|
|
|
}
|
2017-03-21 01:32:38 +00:00
|
|
|
|
2017-04-03 04:13:10 +00:00
|
|
|
Object.assign(handleEvent, {
|
2017-03-25 03:18:14 +00:00
|
|
|
|
2017-04-09 18:33:17 +00:00
|
|
|
getClickedStyleId(event) {
|
|
|
|
|
return (handleEvent.getClickedStyleElement(event) || {}).styleId;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
getClickedStyleElement(event) {
|
|
|
|
|
return event.target.closest('.entry');
|
|
|
|
|
},
|
|
|
|
|
|
2017-04-03 04:13:10 +00:00
|
|
|
name(event) {
|
2018-01-01 17:02:49 +00:00
|
|
|
this.checkbox.dispatchEvent(new MouseEvent('click'));
|
2017-03-25 03:18:14 +00:00
|
|
|
event.preventDefault();
|
2017-04-03 04:13:10 +00:00
|
|
|
},
|
2017-03-25 03:18:14 +00:00
|
|
|
|
2017-04-03 04:13:10 +00:00
|
|
|
toggle(event) {
|
2018-09-13 05:36:19 +00:00
|
|
|
// when fired on checkbox, prevent the parent label from seeing the event, see #501
|
|
|
|
|
event.stopPropagation();
|
2019-01-01 05:11:45 +00:00
|
|
|
API
|
|
|
|
|
.toggleStyle(handleEvent.getClickedStyleId(event), this.checked)
|
|
|
|
|
.then(sortStylesInPlace);
|
2017-04-03 04:13:10 +00:00
|
|
|
},
|
2017-03-25 03:18:14 +00:00
|
|
|
|
2019-03-03 22:54:37 +00:00
|
|
|
toggleExclude(event, type) {
|
|
|
|
|
const entry = handleEvent.getClickedStyleElement(event);
|
|
|
|
|
if (event.target.checked) {
|
|
|
|
|
API.addExclusion(entry.styleMeta.id, getExcludeRule(type));
|
|
|
|
|
} else {
|
|
|
|
|
API.removeExclusion(entry.styleMeta.id, getExcludeRule(type));
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
toggleMenu(event) {
|
|
|
|
|
const entry = handleEvent.getClickedStyleElement(event);
|
2019-06-20 19:37:40 +00:00
|
|
|
const menu = $('.menu', entry);
|
|
|
|
|
const menuActive = $('.menu[data-display=true]');
|
|
|
|
|
if (menuActive) {
|
|
|
|
|
// fade-out style menu
|
|
|
|
|
animateElement(menu, {
|
|
|
|
|
className: 'lights-on',
|
|
|
|
|
onComplete: () => (menu.dataset.display = false),
|
|
|
|
|
});
|
|
|
|
|
window.onkeydown = null;
|
|
|
|
|
} else {
|
|
|
|
|
$('.menu-title', entry).textContent = $('.style-name', entry).textContent;
|
|
|
|
|
menu.dataset.display = true;
|
|
|
|
|
menu.style.cssText = '';
|
|
|
|
|
window.onkeydown = event => {
|
|
|
|
|
const close = $('.menu-close', entry);
|
|
|
|
|
const checkbox = $('.exclude-by-domain-checkbox', entry);
|
|
|
|
|
const keyCode = event.keyCode || event.which;
|
|
|
|
|
if (document.activeElement === close && (keyCode === 9) && !event.shiftKey) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
checkbox.focus();
|
|
|
|
|
}
|
|
|
|
|
if (document.activeElement === checkbox && (keyCode === 9) && event.shiftKey) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
close.focus();
|
|
|
|
|
}
|
|
|
|
|
if (keyCode === 27) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
close.click();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}
|
2019-03-03 22:54:37 +00:00
|
|
|
event.preventDefault();
|
|
|
|
|
},
|
|
|
|
|
|
2017-04-03 04:13:10 +00:00
|
|
|
delete(event) {
|
2018-01-01 17:02:49 +00:00
|
|
|
const entry = handleEvent.getClickedStyleElement(event);
|
|
|
|
|
const id = entry.styleId;
|
2017-03-25 19:50:37 +00:00
|
|
|
const box = $('#confirm');
|
2019-06-20 19:37:40 +00:00
|
|
|
const menu = $('.menu', entry);
|
|
|
|
|
const cancel = $('[data-cmd="cancel"]', box);
|
|
|
|
|
const affirm = $('[data-cmd="ok"]', box);
|
2017-03-25 19:50:37 +00:00
|
|
|
box.dataset.display = true;
|
|
|
|
|
box.style.cssText = '';
|
2018-01-01 17:02:49 +00:00
|
|
|
$('b', box).textContent = $('.style-name', entry).textContent;
|
2019-06-20 19:37:40 +00:00
|
|
|
affirm.focus();
|
|
|
|
|
affirm.onclick = () => confirm(true);
|
|
|
|
|
cancel.onclick = () => confirm(false);
|
2017-03-25 19:50:37 +00:00
|
|
|
window.onkeydown = event => {
|
2019-06-20 19:37:40 +00:00
|
|
|
const close = $('.menu-close', entry);
|
|
|
|
|
const checkbox = $('.exclude-by-domain-checkbox', entry);
|
|
|
|
|
const confirmActive = $('#confirm[data-display="true"]');
|
2017-04-18 18:56:32 +00:00
|
|
|
const keyCode = event.keyCode || event.which;
|
2019-06-20 19:37:40 +00:00
|
|
|
if (document.activeElement === cancel && (keyCode === 9)) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
affirm.focus();
|
|
|
|
|
}
|
|
|
|
|
if (document.activeElement === close && (keyCode === 9) && !event.shiftKey) {
|
2017-03-25 19:50:37 +00:00
|
|
|
event.preventDefault();
|
2019-06-20 19:37:40 +00:00
|
|
|
checkbox.focus();
|
|
|
|
|
}
|
|
|
|
|
if (document.activeElement === checkbox && (keyCode === 9) && event.shiftKey) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
close.focus();
|
|
|
|
|
}
|
|
|
|
|
if (keyCode === 27) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
if (confirmActive) {
|
|
|
|
|
box.dataset.display = false;
|
|
|
|
|
menu.focus();
|
|
|
|
|
} else {
|
|
|
|
|
close.click();
|
|
|
|
|
}
|
2017-03-25 03:18:14 +00:00
|
|
|
}
|
2017-03-25 19:50:37 +00:00
|
|
|
};
|
|
|
|
|
function confirm(ok) {
|
2019-06-20 19:37:40 +00:00
|
|
|
if (ok) {
|
|
|
|
|
// fade-out deletion confirmation dialog
|
|
|
|
|
animateElement(box, {
|
|
|
|
|
className: 'lights-on',
|
|
|
|
|
onComplete: () => (box.dataset.display = false),
|
|
|
|
|
});
|
|
|
|
|
window.onkeydown = null;
|
|
|
|
|
API.deleteStyle(id);
|
|
|
|
|
} else {
|
|
|
|
|
box.dataset.display = false;
|
|
|
|
|
menu.focus();
|
|
|
|
|
}
|
2017-03-25 19:50:37 +00:00
|
|
|
}
|
2017-04-03 04:13:10 +00:00
|
|
|
},
|
2017-03-25 03:18:14 +00:00
|
|
|
|
2017-12-05 21:14:21 +00:00
|
|
|
configure(event) {
|
|
|
|
|
const {styleId, styleIsUsercss} = handleEvent.getClickedStyleElement(event);
|
|
|
|
|
if (styleIsUsercss) {
|
2018-11-07 06:09:29 +00:00
|
|
|
API.getStyle(styleId, true).then(style => {
|
2017-12-05 21:14:21 +00:00
|
|
|
hotkeys.setState(false);
|
2018-01-05 10:26:11 +00:00
|
|
|
configDialog(style).then(() => {
|
2017-12-05 21:14:21 +00:00
|
|
|
hotkeys.setState(true);
|
|
|
|
|
});
|
|
|
|
|
});
|
2017-12-10 04:56:41 +00:00
|
|
|
} else {
|
|
|
|
|
handleEvent.openURLandHide.call(this, event);
|
2017-12-05 21:14:21 +00:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2017-04-03 04:13:10 +00:00
|
|
|
indicator(event) {
|
2017-04-09 18:33:17 +00:00
|
|
|
const entry = handleEvent.getClickedStyleElement(event);
|
2017-03-30 23:18:41 +00:00
|
|
|
const info = template.regexpProblemExplanation.cloneNode(true);
|
2017-12-02 16:54:54 +00:00
|
|
|
$.remove('#' + info.id);
|
2017-04-03 04:13:10 +00:00
|
|
|
$$('a', info).forEach(el => (el.onclick = handleEvent.openURLandHide));
|
|
|
|
|
$$('button', info).forEach(el => (el.onclick = handleEvent.closeExplanation));
|
2017-03-30 23:18:41 +00:00
|
|
|
entry.appendChild(info);
|
2017-04-03 04:13:10 +00:00
|
|
|
},
|
2017-03-30 23:18:41 +00:00
|
|
|
|
2017-04-11 10:51:40 +00:00
|
|
|
closeExplanation() {
|
2017-03-30 23:18:41 +00:00
|
|
|
$('#regexp-explanation').remove();
|
2017-04-03 04:13:10 +00:00
|
|
|
},
|
2017-03-25 03:18:14 +00:00
|
|
|
|
2017-04-03 04:13:10 +00:00
|
|
|
openLink(event) {
|
2017-11-25 13:24:07 +00:00
|
|
|
if (!chrome.windows || !prefs.get('openEditInWindow', false)) {
|
2017-04-03 04:13:10 +00:00
|
|
|
handleEvent.openURLandHide.call(this, event);
|
|
|
|
|
return;
|
|
|
|
|
}
|
2017-03-21 01:32:38 +00:00
|
|
|
event.preventDefault();
|
2017-04-03 04:13:10 +00:00
|
|
|
chrome.windows.create(
|
|
|
|
|
Object.assign({
|
|
|
|
|
url: this.href
|
|
|
|
|
}, prefs.get('windowPosition', {}))
|
|
|
|
|
);
|
|
|
|
|
close();
|
|
|
|
|
},
|
|
|
|
|
|
2017-04-17 16:48:39 +00:00
|
|
|
maybeEdit(event) {
|
|
|
|
|
if (!(
|
2017-07-16 18:02:00 +00:00
|
|
|
event.button === 0 && (event.ctrlKey || event.metaKey) ||
|
|
|
|
|
event.button === 1 ||
|
|
|
|
|
event.button === 2)) {
|
2017-04-03 04:13:10 +00:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// open an editor on middleclick
|
|
|
|
|
if (event.target.matches('.entry, .style-name, .style-edit-link')) {
|
2017-04-17 16:48:39 +00:00
|
|
|
this.onmouseup = () => $('.style-edit-link', this).click();
|
2017-04-26 15:44:23 +00:00
|
|
|
this.oncontextmenu = event => event.preventDefault();
|
2017-04-03 04:13:10 +00:00
|
|
|
event.preventDefault();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// prevent the popup being opened in a background tab
|
|
|
|
|
// when an irrelevant link was accidentally clicked
|
|
|
|
|
if (event.target.closest('a')) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
},
|
2017-03-21 01:32:38 +00:00
|
|
|
|
2017-04-03 04:13:10 +00:00
|
|
|
openURLandHide(event) {
|
|
|
|
|
event.preventDefault();
|
2018-11-07 06:09:29 +00:00
|
|
|
const message = tryJSONparse(this.dataset.sendMessage);
|
2017-12-10 04:56:41 +00:00
|
|
|
getActiveTab()
|
2018-03-13 15:35:28 +00:00
|
|
|
.then(activeTab => API.openURL({
|
2017-12-10 04:56:41 +00:00
|
|
|
url: this.href || this.dataset.href,
|
2018-11-07 06:09:29 +00:00
|
|
|
index: activeTab.index + 1
|
2017-12-10 04:56:41 +00:00
|
|
|
}))
|
2018-11-07 06:09:29 +00:00
|
|
|
.then(tab => {
|
|
|
|
|
if (message) {
|
|
|
|
|
return onTabReady(tab)
|
|
|
|
|
.then(() => msg.sendTab(tab.id, message));
|
|
|
|
|
}
|
|
|
|
|
})
|
2017-04-09 06:43:51 +00:00
|
|
|
.then(window.close);
|
2017-04-03 04:13:10 +00:00
|
|
|
},
|
2017-08-22 16:29:26 +00:00
|
|
|
|
|
|
|
|
openManager(event) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
if (!this.eventHandled) {
|
|
|
|
|
this.eventHandled = true;
|
|
|
|
|
this.dataset.href += event.shiftKey || event.button === 2 ?
|
|
|
|
|
'?url=' + encodeURIComponent(tabURL) : '';
|
|
|
|
|
handleEvent.openURLandHide.call(this, event);
|
|
|
|
|
}
|
|
|
|
|
},
|
2017-04-03 04:13:10 +00:00
|
|
|
});
|
2012-08-20 01:14:33 +00:00
|
|
|
|
2017-03-21 01:32:38 +00:00
|
|
|
|
2018-11-07 06:09:29 +00:00
|
|
|
function handleUpdate({style, reason}) {
|
2018-01-01 17:02:49 +00:00
|
|
|
if (!tabURL) return;
|
2018-11-07 06:09:29 +00:00
|
|
|
|
|
|
|
|
fetchStyle()
|
|
|
|
|
.then(style => {
|
|
|
|
|
if (!style) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
if ($(ENTRY_ID_PREFIX + style.id)) {
|
2019-01-01 05:11:45 +00:00
|
|
|
createStyleElement(style);
|
2018-11-07 06:09:29 +00:00
|
|
|
return;
|
|
|
|
|
}
|
2018-01-01 17:02:49 +00:00
|
|
|
document.body.classList.remove('blocked');
|
|
|
|
|
$$.remove('.blocked-info, #no-styles');
|
2019-01-01 05:11:45 +00:00
|
|
|
createStyleElement(style);
|
2018-11-07 06:09:29 +00:00
|
|
|
})
|
|
|
|
|
.catch(console.error);
|
|
|
|
|
|
|
|
|
|
function fetchStyle() {
|
|
|
|
|
if (reason === 'toggle' && $(ENTRY_ID_PREFIX + style.id)) {
|
|
|
|
|
return Promise.resolve(style);
|
2018-01-01 17:02:49 +00:00
|
|
|
}
|
2018-11-07 06:09:29 +00:00
|
|
|
return API.getStylesByUrl(tabURL, style.id)
|
|
|
|
|
.then(([result]) => result && Object.assign(result.data, result));
|
|
|
|
|
}
|
2012-08-20 01:14:33 +00:00
|
|
|
}
|
|
|
|
|
|
2017-03-21 01:32:38 +00:00
|
|
|
|
2012-08-20 01:14:33 +00:00
|
|
|
function handleDelete(id) {
|
2017-12-02 16:54:54 +00:00
|
|
|
$.remove(ENTRY_ID_PREFIX + id);
|
2017-12-12 14:09:42 +00:00
|
|
|
if (!$('.entry')) {
|
2017-12-12 02:21:06 +00:00
|
|
|
installed.appendChild(template.noStyles.cloneNode(true));
|
|
|
|
|
}
|
2017-03-30 23:18:41 +00:00
|
|
|
}
|
|
|
|
|
|
2017-08-18 11:41:27 +00:00
|
|
|
function getTabRealURLFirefox(tab) {
|
|
|
|
|
// wait for FF tab-on-demand to get a real URL (initially about:blank), 5 sec max
|
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
function onNavigation({tabId, url, frameId}) {
|
|
|
|
|
if (tabId === tab.id && frameId === 0) {
|
|
|
|
|
detach();
|
|
|
|
|
resolve(url);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function detach(timedOut) {
|
|
|
|
|
if (timedOut) {
|
|
|
|
|
resolve(tab.url);
|
|
|
|
|
} else {
|
|
|
|
|
debounce.unregister(detach);
|
|
|
|
|
}
|
|
|
|
|
chrome.webNavigation.onBeforeNavigate.removeListener(onNavigation);
|
|
|
|
|
chrome.webNavigation.onCommitted.removeListener(onNavigation);
|
|
|
|
|
chrome.tabs.onRemoved.removeListener(detach);
|
|
|
|
|
chrome.tabs.onReplaced.removeListener(detach);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
chrome.webNavigation.onBeforeNavigate.addListener(onNavigation);
|
|
|
|
|
chrome.webNavigation.onCommitted.addListener(onNavigation);
|
|
|
|
|
chrome.tabs.onRemoved.addListener(detach);
|
|
|
|
|
chrome.tabs.onReplaced.addListener(detach);
|
|
|
|
|
debounce(detach, 5000, {timedOut: true});
|
|
|
|
|
});
|
|
|
|
|
}
|
