446 lines
15 KiB
JavaScript
446 lines
15 KiB
JavaScript
'use strict';
|
|
|
|
define(require => {
|
|
const {API, msg} = require('/js/msg');
|
|
const {
|
|
FIREFOX,
|
|
closeCurrentTab,
|
|
debounce,
|
|
getOwnTab,
|
|
sessionStore,
|
|
} = require('/js/toolbox');
|
|
const {
|
|
$,
|
|
$$,
|
|
$create,
|
|
$remove,
|
|
getEventKeyName,
|
|
onDOMready,
|
|
setupLivePrefs,
|
|
} = require('/js/dom');
|
|
const t = require('/js/localization');
|
|
const prefs = require('/js/prefs');
|
|
const editor = require('./editor');
|
|
const preinit = require('./preinit');
|
|
const linterMan = require('./linter-manager');
|
|
const {CodeMirror, initBeautifyButton} = require('./codemirror-factory');
|
|
|
|
let headerHeight;
|
|
let isSimpleWindow;
|
|
let isWindowed;
|
|
|
|
window.on('beforeunload', beforeUnload);
|
|
msg.onExtension(onRuntimeMessage);
|
|
|
|
lazyInit();
|
|
|
|
(async function init() {
|
|
await preinit;
|
|
buildThemeElement();
|
|
buildKeymapElement();
|
|
setupLivePrefs();
|
|
initNameArea();
|
|
initBeautifyButton($('#beautify'));
|
|
initResizeListener();
|
|
detectLayout(true);
|
|
|
|
$('#heading').textContent = t(editor.style.id ? 'editStyleHeading' : 'addStyleTitle');
|
|
$('#preview-label').classList.toggle('hidden', !editor.style.id);
|
|
$('#toc').onclick = e => editor.jumpToEditor([...$('#toc').children].indexOf(e.target));
|
|
|
|
await new Promise(requestAnimationFrame);
|
|
(editor.isUsercss ? require('./source-editor') : require('./sections-editor'))();
|
|
await editor.ready;
|
|
editor.ready = true;
|
|
editor.dirty.onChange(editor.updateDirty);
|
|
|
|
// enabling after init to prevent flash of validation failure on an empty name
|
|
$('#name').required = !editor.isUsercss;
|
|
$('#save-button').onclick = editor.save;
|
|
|
|
prefs.subscribe('editor.toc.expanded', (k, val) => val && editor.updateToc(), {runNow: true});
|
|
prefs.subscribe('editor.linter', (key, value) => {
|
|
$('body').classList.toggle('linter-disabled', value === '');
|
|
linterMan.run();
|
|
});
|
|
|
|
require(['./colorpicker-helper'], res => {
|
|
$('#colorpicker-settings').on('click', res);
|
|
});
|
|
require(['./keymap-help'], res => {
|
|
$('#keyMap-help').on('click', res);
|
|
});
|
|
require(['./linter-dialogs'], res => {
|
|
$('#linter-settings').on('click', res.showLintConfig);
|
|
$('#lint-help').on('click', res.showLintHelp);
|
|
});
|
|
require(Object.values(editor.lazyKeymaps), () => {
|
|
buildKeymapElement();
|
|
prefs.subscribe('editor.keyMap', showHotkeyInTooltip, {runNow: true});
|
|
window.on('showHotkeyInTooltip', showHotkeyInTooltip);
|
|
});
|
|
require([
|
|
'./autocomplete',
|
|
'./global-search',
|
|
]);
|
|
})();
|
|
|
|
function initNameArea() {
|
|
const nameEl = $('#name');
|
|
const resetEl = $('#reset-name');
|
|
const isCustomName = editor.style.updateUrl || editor.isUsercss;
|
|
editor.nameTarget = isCustomName ? 'customName' : 'name';
|
|
nameEl.placeholder = t(editor.isUsercss ? 'usercssEditorNamePlaceholder' : 'styleMissingName');
|
|
nameEl.title = isCustomName ? t('customNameHint') : '';
|
|
nameEl.on('input', () => {
|
|
editor.updateName(true);
|
|
resetEl.hidden = false;
|
|
});
|
|
resetEl.hidden = !editor.style.customName;
|
|
resetEl.onclick = () => {
|
|
const style = editor.style;
|
|
nameEl.focus();
|
|
nameEl.select();
|
|
// trying to make it undoable via Ctrl-Z
|
|
if (!document.execCommand('insertText', false, style.name)) {
|
|
nameEl.value = style.name;
|
|
editor.updateName(true);
|
|
}
|
|
style.customName = null; // to delete it from db
|
|
resetEl.hidden = true;
|
|
};
|
|
const enabledEl = $('#enabled');
|
|
enabledEl.onchange = () => editor.updateEnabledness(enabledEl.checked);
|
|
}
|
|
|
|
function initResizeListener() {
|
|
const {onBoundsChanged} = chrome.windows || {};
|
|
if (onBoundsChanged) {
|
|
// * movement is reported even if the window wasn't resized
|
|
// * fired just once when done so debounce is not needed
|
|
onBoundsChanged.addListener(async wnd => {
|
|
// getting the current window id as it may change if the user attached/detached the tab
|
|
const {id} = await browser.windows.getCurrent();
|
|
if (id === wnd.id) saveWindowPos();
|
|
});
|
|
}
|
|
window.on('resize', () => {
|
|
if (!onBoundsChanged) debounce(saveWindowPos, 100);
|
|
detectLayout();
|
|
});
|
|
}
|
|
|
|
function findKeyForCommand(command, map) {
|
|
if (typeof map === 'string') map = CodeMirror.keyMap[map];
|
|
let key = Object.keys(map).find(k => map[k] === command);
|
|
if (key) {
|
|
return key;
|
|
}
|
|
for (const ft of Array.isArray(map.fallthrough) ? map.fallthrough : [map.fallthrough]) {
|
|
key = ft && findKeyForCommand(command, ft);
|
|
if (key) {
|
|
return key;
|
|
}
|
|
}
|
|
return '';
|
|
}
|
|
|
|
function buildThemeElement() {
|
|
$('#editor.theme').append(...[
|
|
$create('option', {value: 'default'}, t('defaultTheme')),
|
|
...require('./codemirror-themes').map(s => $create('option', s)),
|
|
]);
|
|
// move the theme after built-in CSS so that its same-specificity selectors win
|
|
document.head.appendChild($('#cm-theme'));
|
|
}
|
|
|
|
function buildKeymapElement() {
|
|
// move 'pc' or 'mac' prefix to the end of the displayed label
|
|
const maps = Object.keys(CodeMirror.keyMap)
|
|
.map(name => ({
|
|
value: name,
|
|
name: name.replace(/^(pc|mac)(.+)/, (s, arch, baseName) =>
|
|
baseName.toLowerCase() + '-' + (arch === 'mac' ? 'Mac' : 'PC')),
|
|
}))
|
|
.sort((a, b) => a.name < b.name && -1 || a.name > b.name && 1);
|
|
|
|
const fragment = document.createDocumentFragment();
|
|
let bin = fragment;
|
|
let groupName;
|
|
// group suffixed maps in <optgroup>
|
|
maps.forEach(({value, name}, i) => {
|
|
groupName = !name.includes('-') ? name : groupName;
|
|
const groupWithNext = maps[i + 1] && maps[i + 1].name.startsWith(groupName);
|
|
if (groupWithNext) {
|
|
if (bin === fragment) {
|
|
bin = fragment.appendChild($create('optgroup', {label: name.split('-')[0]}));
|
|
}
|
|
}
|
|
const el = bin.appendChild($create('option', {value}, name));
|
|
if (value === prefs.defaults['editor.keyMap']) {
|
|
el.dataset.default = '';
|
|
el.title = t('defaultTheme');
|
|
}
|
|
if (!groupWithNext) bin = fragment;
|
|
});
|
|
const selector = $('#editor.keyMap');
|
|
selector.textContent = '';
|
|
selector.appendChild(fragment);
|
|
selector.value = prefs.get('editor.keyMap');
|
|
}
|
|
|
|
function showHotkeyInTooltip(_, mapName = prefs.get('editor.keyMap')) {
|
|
const extraKeys = CodeMirror.defaults.extraKeys;
|
|
for (const el of $$('[data-hotkey-tooltip]')) {
|
|
if (el._hotkeyTooltipKeyMap !== mapName) {
|
|
el._hotkeyTooltipKeyMap = mapName;
|
|
const title = el._hotkeyTooltipTitle = el._hotkeyTooltipTitle || el.title;
|
|
const cmd = el.dataset.hotkeyTooltip;
|
|
const key = cmd[0] === '=' ? cmd.slice(1) :
|
|
findKeyForCommand(cmd, mapName) ||
|
|
extraKeys && findKeyForCommand(cmd, extraKeys);
|
|
const newTitle = title + (title && key ? '\n' : '') + (key || '');
|
|
if (el.title !== newTitle) el.title = newTitle;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Stuff not needed for the main init so we can let it run at its own tempo */
|
|
function lazyInit() {
|
|
let ownTabId;
|
|
// not using `await` so we don't block the subsequent code
|
|
getOwnTab().then(patchHistoryBack);
|
|
// no windows on android
|
|
if (chrome.windows) {
|
|
detectWindowedState();
|
|
chrome.tabs.onAttached.addListener(onAttached);
|
|
}
|
|
async function patchHistoryBack(tab) {
|
|
ownTabId = tab.id;
|
|
// use browser history back when 'back to manage' is clicked
|
|
if (sessionStore['manageStylesHistory' + ownTabId] === location.href) {
|
|
await onDOMready();
|
|
$('#cancel-button').onclick = event => {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
history.back();
|
|
};
|
|
}
|
|
}
|
|
async function detectWindowedState() {
|
|
isSimpleWindow =
|
|
(await browser.windows.getCurrent()).type === 'popup';
|
|
isWindowed = isSimpleWindow || (
|
|
prefs.get('openEditInWindow') &&
|
|
history.length === 1 &&
|
|
(await browser.windows.getAll()).length > 1 &&
|
|
(await browser.tabs.query({currentWindow: true})).length === 1
|
|
);
|
|
if (isSimpleWindow) {
|
|
await onDOMready();
|
|
initPopupButton();
|
|
}
|
|
}
|
|
function initPopupButton() {
|
|
const POPUP_HOTKEY = 'Shift-Ctrl-Alt-S';
|
|
const btn = $create('img', {
|
|
id: 'popup-button',
|
|
title: t('optionsCustomizePopup') + '\n' + POPUP_HOTKEY,
|
|
onclick: embedPopup,
|
|
});
|
|
const onIconsetChanged = (_, val) => {
|
|
const prefix = `images/icon/${val ? 'light/' : ''}`;
|
|
btn.srcset = `${prefix}16.png 1x,${prefix}32.png 2x`;
|
|
};
|
|
prefs.subscribe('iconset', onIconsetChanged, {runNow: true});
|
|
document.body.appendChild(btn);
|
|
window.on('keydown', e => getEventKeyName(e) === POPUP_HOTKEY && embedPopup());
|
|
CodeMirror.defaults.extraKeys[POPUP_HOTKEY] = 'openStylusPopup'; // adds to keymap help
|
|
}
|
|
async function onAttached(tabId, info) {
|
|
if (tabId !== ownTabId) {
|
|
return;
|
|
}
|
|
if (info.newPosition !== 0) {
|
|
prefs.set('openEditInWindow', false);
|
|
return;
|
|
}
|
|
const win = await browser.windows.get(info.newWindowId, {populate: true});
|
|
// If there's only one tab in this window, it's been dragged to new window
|
|
const openEditInWindow = win.tabs.length === 1;
|
|
// FF-only because Chrome retardedly resets the size during dragging
|
|
if (openEditInWindow && FIREFOX) {
|
|
chrome.windows.update(info.newWindowId, prefs.get('windowPosition'));
|
|
}
|
|
prefs.set('openEditInWindow', openEditInWindow);
|
|
}
|
|
}
|
|
|
|
function onRuntimeMessage(request) {
|
|
const {style} = request;
|
|
switch (request.method) {
|
|
case 'styleUpdated':
|
|
if (editor.style.id === style.id &&
|
|
!['editPreview', 'editPreviewEnd', 'editSave', 'config'].includes(request.reason)) {
|
|
Promise.resolve(request.codeIsUpdated === false ? style : API.styles.get(style.id))
|
|
.then(newStyle => editor.replaceStyle(newStyle, request.codeIsUpdated));
|
|
}
|
|
break;
|
|
case 'styleDeleted':
|
|
if (editor.style.id === style.id) {
|
|
closeCurrentTab();
|
|
}
|
|
break;
|
|
case 'editDeleteText':
|
|
document.execCommand('delete');
|
|
break;
|
|
}
|
|
}
|
|
|
|
function beforeUnload(e) {
|
|
sessionStore.windowPos = JSON.stringify(canSaveWindowPos() && prefs.get('windowPosition'));
|
|
sessionStore['editorScrollInfo' + editor.style.id] = JSON.stringify({
|
|
scrollY: window.scrollY,
|
|
cms: editor.getEditors().map(cm => /** @namespace EditorScrollInfo */({
|
|
focus: cm.hasFocus(),
|
|
height: cm.display.wrapper.style.height.replace('100vh', ''),
|
|
parentHeight: cm.display.wrapper.parentElement.offsetHeight,
|
|
sel: cm.isClean() && [cm.doc.sel.ranges, cm.doc.sel.primIndex],
|
|
})),
|
|
});
|
|
const activeElement = document.activeElement;
|
|
if (activeElement) {
|
|
// blurring triggers 'change' or 'input' event if needed
|
|
activeElement.blur();
|
|
// refocus if unloading was canceled
|
|
setTimeout(() => activeElement.focus());
|
|
}
|
|
if (editor && editor.dirty.isDirty()) {
|
|
// neither confirm() nor custom messages work in modern browsers but just in case
|
|
e.returnValue = t('styleChangesNotSaved');
|
|
}
|
|
}
|
|
|
|
function canSaveWindowPos() {
|
|
return isWindowed &&
|
|
document.visibilityState === 'visible' &&
|
|
prefs.get('openEditInWindow') &&
|
|
!isWindowMaximized();
|
|
}
|
|
|
|
function saveWindowPos() {
|
|
if (canSaveWindowPos()) {
|
|
prefs.set('windowPosition', {
|
|
left: window.screenX,
|
|
top: window.screenY,
|
|
width: window.outerWidth,
|
|
height: window.outerHeight,
|
|
});
|
|
}
|
|
}
|
|
|
|
function fixedHeader() {
|
|
const headerFixed = $('.fixed-header');
|
|
if (!headerFixed) headerHeight = $('#header').clientHeight;
|
|
const scrollPoint = headerHeight - 43;
|
|
if (window.scrollY >= scrollPoint && !headerFixed) {
|
|
$('body').style.setProperty('--fixed-padding', ` ${headerHeight}px`);
|
|
$('body').classList.add('fixed-header');
|
|
} else if (window.scrollY < scrollPoint && headerFixed) {
|
|
$('body').classList.remove('fixed-header');
|
|
}
|
|
}
|
|
|
|
function detectLayout(now) {
|
|
const compact = window.innerWidth <= 850;
|
|
if (compact) {
|
|
document.body.classList.add('compact-layout');
|
|
if (!editor.isUsercss) {
|
|
if (now) fixedHeader();
|
|
else debounce(fixedHeader, 250);
|
|
window.on('scroll', fixedHeader, {passive: true});
|
|
}
|
|
} else {
|
|
document.body.classList.remove('compact-layout', 'fixed-header');
|
|
window.off('scroll', fixedHeader);
|
|
}
|
|
for (const type of ['options', 'toc', 'lint']) {
|
|
const el = $(`details[data-pref="editor.${type}.expanded"]`);
|
|
el.open = compact ? false : prefs.get(el.dataset.pref);
|
|
}
|
|
}
|
|
|
|
function isWindowMaximized() {
|
|
return (
|
|
window.screenX <= 0 &&
|
|
window.screenY <= 0 &&
|
|
window.outerWidth >= screen.availWidth &&
|
|
window.outerHeight >= screen.availHeight &&
|
|
|
|
window.screenX > -10 &&
|
|
window.screenY > -10 &&
|
|
window.outerWidth < screen.availWidth + 10 &&
|
|
window.outerHeight < screen.availHeight + 10
|
|
);
|
|
}
|
|
|
|
function embedPopup() {
|
|
const ID = 'popup-iframe';
|
|
const SEL = '#' + ID;
|
|
if ($(SEL)) return;
|
|
const frame = $create('iframe', {
|
|
id: ID,
|
|
src: chrome.runtime.getManifest().browser_action.default_popup,
|
|
height: 600,
|
|
width: prefs.get('popupWidth'),
|
|
onload() {
|
|
frame.onload = null;
|
|
frame.focus();
|
|
const pw = frame.contentWindow;
|
|
const body = pw.document.body;
|
|
pw.on('keydown', e => getEventKeyName(e) === 'Escape' && embedPopup._close());
|
|
pw.close = embedPopup._close;
|
|
if (pw.IntersectionObserver) {
|
|
let loaded;
|
|
new pw.IntersectionObserver(([e]) => {
|
|
const el = pw.document.scrollingElement;
|
|
const h = e.isIntersecting && !pw.scrollY ? el.offsetHeight : el.scrollHeight;
|
|
const hasSB = h > el.offsetHeight;
|
|
const {width} = e.boundingClientRect;
|
|
frame.height = h;
|
|
if (!hasSB !== !frame._scrollbarWidth || frame.width - width) {
|
|
frame._scrollbarWidth = hasSB ? width - el.offsetWidth : 0;
|
|
frame.width = width + frame._scrollbarWidth;
|
|
}
|
|
if (!loaded) {
|
|
loaded = true;
|
|
frame.dataset.loaded = '';
|
|
}
|
|
}).observe(body.appendChild(
|
|
$create('div', {style: {height: '1px', marginTop: '-1px'}})
|
|
));
|
|
} else {
|
|
frame.dataset.loaded = '';
|
|
frame.height = body.scrollHeight;
|
|
}
|
|
new pw.MutationObserver(() => {
|
|
const bs = body.style;
|
|
const w = parseFloat(bs.minWidth || bs.width) + (frame._scrollbarWidth || 0);
|
|
const h = parseFloat(bs.minHeight || body.offsetHeight);
|
|
if (frame.width - w) frame.width = w;
|
|
if (frame.height - h) frame.height = h;
|
|
}).observe(body, {attributes: true, attributeFilter: ['style']});
|
|
},
|
|
});
|
|
// saving the listener here so it's the same function reference for window.off
|
|
if (!embedPopup._close) {
|
|
embedPopup._close = () => {
|
|
$remove(SEL);
|
|
window.off('mousedown', embedPopup._close);
|
|
};
|
|
}
|
|
window.on('mousedown', embedPopup._close);
|
|
document.body.appendChild(frame);
|
|
}
|
|
});
|