2017-03-21 01:32:38 +00:00
|
|
|
/* globals configureCommands, openURL */
|
2017-03-16 13:36:33 +00:00
|
|
|
|
2017-03-21 01:32:38 +00:00
|
|
|
const RX_SUPPORTED_URLS = new RegExp(
|
|
|
|
`^(file|https?|ftps?):|^${OWN_ORIGIN}`);
|
|
|
|
let installed;
|
2015-01-30 17:28:05 +00:00
|
|
|
|
2015-03-24 14:07:59 +00:00
|
|
|
|
2017-03-21 01:32:38 +00:00
|
|
|
getActiveTabRealURL().then(url => {
|
|
|
|
const isUrlSupported = RX_SUPPORTED_URLS.test(url);
|
|
|
|
Promise.all([
|
|
|
|
isUrlSupported ? getStylesSafe({matchUrl: url}) : null,
|
|
|
|
onDOMready().then(() => initPopup(isUrlSupported ? url : '')),
|
|
|
|
])
|
|
|
|
.then(([styles]) => styles && showStyles(styles));
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
|
|
|
if (msg.method == 'updatePopup') {
|
|
|
|
switch (msg.reason) {
|
|
|
|
case 'styleAdded':
|
|
|
|
case 'styleUpdated':
|
|
|
|
handleUpdate(msg.style);
|
|
|
|
break;
|
|
|
|
case 'styleDeleted':
|
|
|
|
handleDelete(msg.id);
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
function initPopup(url) {
|
|
|
|
installed = $('#installed');
|
|
|
|
|
|
|
|
// popup width
|
|
|
|
document.body.style.width =
|
|
|
|
Math.max(200, Math.min(800, Number(localStorage.popupWidth) || 246)) + 'px';
|
2015-03-12 23:00:23 +00:00
|
|
|
|
2017-03-21 01:32:38 +00:00
|
|
|
// action buttons
|
|
|
|
$('#disableAll').onchange = () =>
|
|
|
|
installed.classList.toggle('disabled', prefs.get('disableAll'));
|
|
|
|
setupLivePrefs(['disableAll']);
|
|
|
|
$('#find-styles-link').onclick = openURLandHide;
|
|
|
|
$('#popup-manage-button').href = 'manage.html';
|
|
|
|
$('#popup-manage-button').onclick = openURLandHide;
|
|
|
|
$('#popup-options-button').onclick = () => chrome.runtime.openOptionsPage();
|
|
|
|
$('#popup-shortcuts-button').onclick = configureCommands.open;
|
|
|
|
|
|
|
|
// styles first?
|
|
|
|
if (!prefs.get('popup.stylesFirst')) {
|
|
|
|
document.body.insertBefore(
|
|
|
|
$('body > .actions'),
|
|
|
|
installed);
|
|
|
|
}
|
|
|
|
|
|
|
|
// find styles link
|
|
|
|
$('#find-styles a').href =
|
|
|
|
'https://userstyles.org/styles/browse/all/' +
|
|
|
|
encodeURIComponent(url.startsWith('file:') ? 'file:' : url);
|
|
|
|
|
|
|
|
if (!url) {
|
|
|
|
document.body.classList.add('blocked');
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Write new style links
|
|
|
|
const writeStyle = $('#write-style');
|
|
|
|
const matchTargets = document.createElement('span');
|
|
|
|
matchTargets.id = 'match';
|
|
|
|
|
|
|
|
// For this URL
|
|
|
|
const urlLink = template.writeStyle.cloneNode(true);
|
|
|
|
Object.assign(urlLink, {
|
|
|
|
href: 'edit.html?url-prefix=' + encodeURIComponent(url),
|
|
|
|
title: `url-prefix("${url}")`,
|
|
|
|
textContent: prefs.get('popup.breadcrumbs.usePath')
|
|
|
|
? new URL(url).pathname.slice(1)
|
|
|
|
: t('writeStyleForURL').replace(/ /g, '\u00a0'), // this URL
|
|
|
|
onclick: openLinkInTabOrWindow,
|
|
|
|
});
|
|
|
|
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
|
|
|
|
const domains = getDomains(url);
|
|
|
|
for (let domain of domains) {
|
|
|
|
// Don't include TLD
|
|
|
|
if (domains.length > 1 && !domain.includes('.')) {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
const domainLink = template.writeStyle.cloneNode(true);
|
|
|
|
Object.assign(domainLink, {
|
|
|
|
href: 'edit.html?domain=' + encodeURIComponent(domain),
|
|
|
|
textContent: domain,
|
|
|
|
title: `domain("${domain}")`,
|
|
|
|
onclick: openLinkInTabOrWindow,
|
|
|
|
});
|
|
|
|
domainLink.setAttribute('subdomain', domain.substring(0, domain.indexOf('.')));
|
|
|
|
matchTargets.appendChild(domainLink);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (prefs.get('popup.breadcrumbs')) {
|
|
|
|
matchTargets.classList.add('breadcrumbs');
|
|
|
|
matchTargets.appendChild(matchTargets.removeChild(matchTargets.firstElementChild));
|
|
|
|
}
|
|
|
|
writeStyle.appendChild(matchTargets);
|
2015-03-23 18:56:11 +00:00
|
|
|
}
|
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 showStyles(styles) {
|
2017-03-21 01:32:38 +00:00
|
|
|
if (!styles.length) {
|
2017-03-25 03:04:24 +00:00
|
|
|
installed.innerHTML = template.noStyles.outerHTML;
|
2017-03-21 01:32:38 +00:00
|
|
|
} else {
|
|
|
|
const enabledFirst = prefs.get('popup.enabledFirst');
|
|
|
|
styles.sort((a, b) =>
|
|
|
|
enabledFirst && a.enabled !== b.enabled
|
|
|
|
? !(a.enabled < b.enabled) ? -1 : 1
|
|
|
|
: a.name.localeCompare(b.name));
|
|
|
|
const fragment = document.createDocumentFragment();
|
|
|
|
for (let style of styles) {
|
|
|
|
fragment.appendChild(createStyleElement(style));
|
|
|
|
}
|
|
|
|
installed.appendChild(fragment);
|
|
|
|
}
|
|
|
|
// force Chrome to resize the popup
|
|
|
|
document.body.style.height = '10px';
|
|
|
|
document.documentElement.style.height = '10px';
|
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 createStyleElement(style) {
|
2017-03-21 01:32:38 +00:00
|
|
|
const entry = template.style.cloneNode(true);
|
|
|
|
entry.setAttribute('style-id', style.id);
|
|
|
|
Object.assign(entry, {
|
|
|
|
styleId: style.id,
|
2017-03-25 03:04:24 +00:00
|
|
|
className: entry.className + ' ' + (style.enabled ? 'enabled' : 'disabled'),
|
2017-03-21 01:32:38 +00:00
|
|
|
onmousedown: openEditorOnMiddleclick,
|
|
|
|
onauxclick: openEditorOnMiddleclick,
|
|
|
|
});
|
|
|
|
|
|
|
|
const checkbox = $('.checker', entry);
|
|
|
|
Object.assign(checkbox, {
|
|
|
|
id: 'style-' + style.id,
|
|
|
|
checked: style.enabled,
|
2017-03-25 03:18:14 +00:00
|
|
|
onclick: EntryOnClick.toggle,
|
2017-03-21 01:32:38 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const editLink = $('.style-edit-link', entry);
|
|
|
|
Object.assign(editLink, {
|
|
|
|
href: editLink.getAttribute('href') + style.id,
|
|
|
|
onclick: openLinkInTabOrWindow,
|
|
|
|
});
|
|
|
|
|
|
|
|
const styleName = $('.style-name', entry);
|
|
|
|
Object.assign(styleName, {
|
|
|
|
htmlFor: 'style-' + style.id,
|
2017-03-25 03:18:14 +00:00
|
|
|
onclick: EntryOnClick.name,
|
2017-03-21 01:32:38 +00:00
|
|
|
});
|
|
|
|
styleName.checkbox = checkbox;
|
|
|
|
styleName.appendChild(document.createTextNode(style.name));
|
|
|
|
|
2017-03-25 03:18:14 +00:00
|
|
|
$('.enable', entry).onclick = EntryOnClick.toggle;
|
|
|
|
$('.disable', entry).onclick = EntryOnClick.toggle;
|
|
|
|
$('.delete', entry).onclick = EntryOnClick.delete;
|
2017-03-21 01:32:38 +00:00
|
|
|
|
|
|
|
return entry;
|
2012-08-20 01:14:33 +00:00
|
|
|
}
|
|
|
|
|
2017-03-21 01:32:38 +00:00
|
|
|
|
2017-03-25 03:18:14 +00:00
|
|
|
class EntryOnClick {
|
|
|
|
|
|
|
|
static name(event) {
|
|
|
|
this.checkbox.click();
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
|
|
|
|
static toggle(event) {
|
|
|
|
saveStyle({
|
|
|
|
id: getClickedStyleId(event),
|
|
|
|
enabled: this.type == 'checkbox' ? this.checked : this.matches('.enable'),
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
static delete(event) {
|
|
|
|
confirmDelete(event).then(() => {
|
|
|
|
// update view with 'No styles installed for this site' message
|
|
|
|
if (!installed.children.length) {
|
|
|
|
showStyles([]);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2015-01-30 18:35:37 +00:00
|
|
|
function openLinkInTabOrWindow(event) {
|
2017-03-21 01:32:38 +00:00
|
|
|
if (!prefs.get('openEditInWindow', false)) {
|
|
|
|
openURLandHide(event);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
event.preventDefault();
|
|
|
|
chrome.windows.create(
|
|
|
|
Object.assign({
|
|
|
|
url: event.target.href
|
|
|
|
}, prefs.get('windowPosition', {}))
|
|
|
|
);
|
|
|
|
close();
|
2015-01-30 18:35:37 +00:00
|
|
|
}
|
|
|
|
|
2017-03-21 01:32:38 +00:00
|
|
|
|
2017-03-19 21:24:29 +00:00
|
|
|
function openEditorOnMiddleclick(event) {
|
2017-03-21 01:32:38 +00:00
|
|
|
if (event.button != 1) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
// open an editor on middleclick
|
|
|
|
if (event.target.matches('.entry, .style-name, .style-edit-link')) {
|
|
|
|
$('.style-edit-link', this).click();
|
|
|
|
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-19 21:24:29 +00:00
|
|
|
}
|
|
|
|
|
2017-03-21 01:32:38 +00:00
|
|
|
|
|
|
|
function openURLandHide(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
openURL({url: event.target.href})
|
|
|
|
.then(close);
|
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 handleUpdate(style) {
|
2017-03-21 01:32:38 +00:00
|
|
|
const styleElement = $(`[style-id="${style.id}"]`, installed);
|
|
|
|
if (styleElement) {
|
|
|
|
installed.replaceChild(createStyleElement(style), styleElement);
|
|
|
|
} else {
|
|
|
|
getActiveTabRealURL().then(url => {
|
|
|
|
if (getApplicableSections(style, url).length) {
|
|
|
|
// a new style for the current url is installed
|
|
|
|
$('#unavailable').style.display = 'none';
|
|
|
|
installed.appendChild(createStyleElement(style));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
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-03-21 01:32:38 +00:00
|
|
|
var styleElement = $(`[style-id="${id}"]`, installed);
|
|
|
|
if (styleElement) {
|
|
|
|
installed.removeChild(styleElement);
|
|
|
|
}
|
2015-03-24 14:07:59 +00:00
|
|
|
}
|