open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix: switch to editor

Browse Source
This commit is contained in:
eight 2018-10-10 00:41:07 +08:00
parent 06e22d0d18
commit fd9ab5d6e5
11 changed files with 45 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
background/style-via-api.js
View File

@ -72,7 +72,7 @@ API_METHODS.styleViaAPI = !CHROME && (() => {
});
}
function styleDeleted({id}, {tab, frameId}) {
function styleDeleted({style: {id}}, {tab, frameId}) {
const {tabFrames, frameStyles, styleSections} = getCachedData(tab.id, frameId, id);
const code = styleSections.join('\n');
if (code && !duplicateCodeExists({frameStyles, id, code})) {
@ -86,7 +86,7 @@ API_METHODS.styleViaAPI = !CHROME && (() => {
function styleUpdated({style}, sender) {
if (!style.enabled) {
return styleDeleted(style, sender);
return styleDeleted({style}, sender);
}
const {tab, frameId} = sender;
const {frameStyles, styleSections} = getCachedData(tab.id, frameId, style.id);

2
content/apply.js
View File

@ -102,7 +102,7 @@
switch (request.method) {
case 'styleDeleted':
removeStyle(request);
removeStyle(request.style);
break;
case 'styleUpdated':

2
edit.html
View File

@ -35,7 +35,7 @@
<script src="edit/source-editor.js"></script>
<script src="edit/colorpicker-helper.js"></script>
<script src="edit/beautify.js"></script>
<script src="edit/sections.js"></script>
<script src="edit/sections-editor.js"></script>
<script src="edit/show-keymap-help.js"></script>
<script src="edit/codemirror-editing-hooks.js"></script>
<script src="edit/edit.js"></script>

16
edit/codemirror-editing-hooks.js
View File

@ -47,7 +47,6 @@ onDOMscriptReady('/codemirror.js').then(() => {
}
const wrapper = cm.display.wrapper;
cm.on('blur', () => {
editors.lastActive = cm;
cm.rerouteHotkeys(true);
setTimeout(() => {
wrapper.classList.toggle('CodeMirror-active', wrapper.contains(document.activeElement));
@ -89,6 +88,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
function setOption(o, v) {
CodeMirror.defaults[o] = v;
const editors = editor.getEditors();
if (editors.length > 4 && (o === 'theme' || o === 'lineWrapping')) {
throttleSetOption({key: o, value: v, index: 0});
return;
@ -103,8 +103,8 @@ onDOMscriptReady('/codemirror.js').then(() => {
value,
index,
timeStart = performance.now(),
cmStart = editors.lastActive || editors[0],
editorsCopy = editors.slice(),
cmStart = editor.getLastActivatedEditor(),
editorsCopy = editor.getEditors().slice(),
progress,
}) {
if (index === 0) {
@ -119,6 +119,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
const t0 = performance.now();
const total = editorsCopy.length;
const editors = editor.getEditors();
while (index < total) {
const cm = editorsCopy[index++];
if (cm === cmStart ||
@ -185,7 +186,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
}
function nextPrevEditor(cm, direction) {
const editors = style.getEditors();
const editors = editor.getEditors();
cm = editors[(editors.indexOf(cm) + direction + editors.length) % editors.length];
editor.scrollToEditor(cm);
cm.focus();
@ -277,7 +278,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
}
case 'autocompleteOnTyping':
editors.forEach(cm => setupAutocomplete(cm, el.checked));
editor.getEditors().forEach(cm => setupAutocomplete(cm, el.checked));
return;
case 'autoCloseBrackets':
@ -412,7 +413,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
}
}
// closest editor should have at least 2 lines visible
const lineHeight = editors[0].defaultTextHeight();
const lineHeight = editor.getEditors()[0].defaultTextHeight();
const scrollY = window.scrollY;
const windowBottom = scrollY + window.innerHeight - 2 * lineHeight;
const allSectionsContainerTop = scrollY + $('#sections').getBoundingClientRect().top;
@ -424,7 +425,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
if (index >= 0 && distances[index] !== undefined) {
return distances[index];
}
const section = (cm || editors[index]).getSection();
const section = cm.display.wrapper.closest('.section');
if (!section) {
return 1e9;
}
@ -443,6 +444,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
}
function findClosest() {
const editors = editor.getEditors();
const last = editors.length - 1;
let a = 0;
let b = last;

16
edit/edit.js
View File

@ -7,7 +7,7 @@ global beautify
global initWithSectionStyle addSections removeSection getSectionsHashes
global sectionsToMozFormat
global exclusions
global moveFocus editorWorker msg
global moveFocus editorWorker msg createSectionEditor
*/
'use strict';
@ -35,17 +35,16 @@ Promise.all([
])
.then(([style]) => {
const usercss = isUsercss(style);
$('#heading').textContent = t(styleId ? 'editStyleHeading' : 'addStyleTitle');
$('#heading').textContent = t(style.id ? 'editStyleHeading' : 'addStyleTitle');
$('#name').placeholder = t(usercss ? 'usercssEditorNamePlaceholder' : 'styleMissingName');
$('#name').title = usercss ? t('usercssReplaceTemplateName') : '';
$('#preview-label').classList.toggle('hidden', !styleId);
$('#preview-label').classList.toggle('hidden', !style.id);
$('#beautify').onclick = () => beautify(editor.getEditors());
$('#lint').addEventListener('scroll', hideLintHeaderOnScroll, {passive: true});
window.addEventListener('resize', () => debounce(rememberWindowSize, 100));
exclusions.init(style);
editor = usercss ? createSourceEditor(style) : createSectionEditor(style);
});
@ -152,7 +151,7 @@ function preinit() {
function onRuntimeMessage(request) {
switch (request.method) {
case 'styleUpdated':
if (styleId && styleId === request.style.id &&
if (editor.getStyleId() === request.style.id &&
request.reason !== 'editPreview' &&
request.reason !== 'editSave' &&
request.reason !== 'config') {
@ -167,7 +166,7 @@ function onRuntimeMessage(request) {
}
break;
case 'styleDeleted':
if (styleId === request.id || editor && editor.getStyle().id === request.id) {
if (editor.getStyleId() === request.style.id) {
document.removeEventListener('visibilitychange', beforeUnload);
window.onbeforeunload = null;
closeCurrentTab();
@ -235,15 +234,14 @@ function initStyleData() {
});
return fetchStyle()
.then(style => {
styleId = style.id;
if (styleId) sessionStorage.justEditedStyleId = styleId;
if (style.id) sessionStorage.justEditedStyleId = style.id;
// we set "usercss" class on <html> when <body> is empty
// so there'll be no flickering of the elements that depend on it
if (isUsercss(style)) {
document.documentElement.classList.add('usercss');
}
// strip URL parameters when invoked for a non-existent id
if (!styleId) {
if (!style.id) {
history.replaceState({}, document.title, location.pathname);
}
return style;

2
edit/global-search.js
View File

@ -1,6 +1,6 @@
/* global CodeMirror editors makeSectionVisible */
/* global focusAccessibility */
/* global colorMimicry */
/* global colorMimicry editor */
'use strict';
onDOMready().then(() => {

10
edit/linter-report.js
View File

@ -1,4 +1,4 @@
/* global linter editors clipString createLinterHelpDialog makeSectionVisible */
/* global linter editor clipString createLinterHelpDialog makeSectionVisible */
'use strict';
// eslint-disable-next-line no-var
@ -16,13 +16,9 @@ Object.assign(linter, (() => {
table = createTable(cm);
tables.set(cm, table);
const container = $('.lint-report-container');
if (typeof editor === 'object') {
container.append(table.element);
} else {
const nextSibling = findNextSibling(tables, cm);
container.insertBefore(table.element, nextSibling && tables.get(nextSibling).element);
}
}
table.updateCaption();
table.updateAnnotations(annotations);
updateCount();
@ -57,6 +53,7 @@ Object.assign(linter, (() => {
}
function findNextSibling(tables, cm) {
const editors = editor.getEditors();
let i = editors.indexOf(cm) + 1;
while (i < editors.length) {
if (tables.has(editors[i])) {
@ -85,8 +82,7 @@ Object.assign(linter, (() => {
};
function updateCaption() {
caption.textContent = typeof editor === 'object' ?
'' : `${t('sectionCode')} ${editors.indexOf(cm) + 1}`;
caption.textContent = editor.getEditorTitle(cm);
}
function updateAnnotations(lines) {

21
edit/sections-editor.js
View File

@ -1,7 +1,8 @@
/* global dirtyReporter showToMozillaHelp
showSectionHelp toggleContextMenuDelete setGlobalProgress maximizeCodeHeight
CodeMirror nextPrevEditorOnKeydown showAppliesToHelp propertyToCss
regExpTester linter cssToProperty
regExpTester linter cssToProperty createLivePreview showCodeMirrorPopup
sectionsToMozFormat editorWorker messageBox clipString beautify
*/
'use strict';
@ -131,7 +132,12 @@ function createSectionsEditor(style) {
getEditors: () =>
sections.filter(s => !s.isRemoved()).map(s => s.cm),
getLastActivatedEditor,
scrollToEditor
scrollToEditor,
getStyleId: () => style.id,
getEditorTitle: cm => {
const index = sections.filter(s => !s.isRemoved()).findIndex(s => s.cm === cm) + 1;
return `${t('sectionCode')} ${index + 1}`;
}
};
function scrollToEditor(cm) {
@ -177,7 +183,7 @@ function createSectionsEditor(style) {
// fallthrough to arrow Up
case 38:
// arrow Up
if (line > 0 || cm === editors[0]) {
if (line > 0 || cm === sections[0].cm) {
return;
}
event.preventDefault();
@ -193,7 +199,7 @@ function createSectionsEditor(style) {
// fallthrough to arrow Down
case 40:
// arrow Down
if (line < cm.doc.size - 1 || cm === editors.last) {
if (line < cm.doc.size - 1 || cm === sections[sections.length - 1].cm) {
return;
}
event.preventDefault();
@ -331,7 +337,7 @@ function createSectionsEditor(style) {
return true;
}
function save() {
function saveStyle() {
const newStyle = getModel();
if (!validate(newStyle)) {
return;
@ -507,7 +513,6 @@ function createSectionsEditor(style) {
el,
cm,
render,
destroy,
getCode,
getModel,
remove,
@ -580,7 +585,9 @@ function createSectionsEditor(style) {
if (!FIREFOX) {
cm.on('mousedown', (cm, event) => toggleContextMenuDelete.call(cm, event));
}
cm.on('focus', () => lastActive = Date.now());
cm.on('focus', () => {
lastActive = Date.now();
});
cm.display.wrapper.addEventListener('keydown', event =>
nextPrevEditorOnKeydown(cm, event), true);

4
edit/source-editor.js
View File

@ -407,6 +407,8 @@ function createSourceEditor(style) {
getStyle: () => style,
getEditors: () => [cm],
getLastActivatedEditor: () => cm,
scrollToEditor: () => {}
scrollToEditor: () => {},
getStyleId: () => style.id,
getEditorTitle: () => ''
};
}

2
manage/manage.js
View File

@ -48,7 +48,7 @@ function onRuntimeMessage(msg) {
handleUpdate(msg.style, msg);
break;
case 'styleDeleted':
handleDelete(msg.id);
handleDelete(msg.style.id);
break;
case 'styleApply':
case 'styleReplaceAll':

2
popup/popup.js
View File

@ -37,7 +37,7 @@ function onRuntimeMessage(msg) {
handleUpdate(msg.style);
break;
case 'styleDeleted':
handleDelete(msg.id);
handleDelete(msg.style.id);
break;
case 'prefChanged':
if ('popup.stylesFirst' in msg.prefs) {