From fd9ab5d6e50ef85cc6525c84aba4d5bb50b13f02 Mon Sep 17 00:00:00 2001 From: eight Date: Wed, 10 Oct 2018 00:41:07 +0800 Subject: [PATCH] Fix: switch to editor --- background/style-via-api.js | 4 ++-- content/apply.js | 2 +- edit.html | 2 +- edit/codemirror-editing-hooks.js | 16 +++++++++------- edit/edit.js | 16 +++++++--------- edit/global-search.js | 2 +- edit/linter-report.js | 14 +++++--------- edit/sections-editor.js | 21 ++++++++++++++------- edit/source-editor.js | 4 +++- manage/manage.js | 2 +- popup/popup.js | 2 +- 11 files changed, 45 insertions(+), 40 deletions(-) diff --git a/background/style-via-api.js b/background/style-via-api.js index 459b238a..c16ddfd5 100644 --- a/background/style-via-api.js +++ b/background/style-via-api.js @@ -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); diff --git a/content/apply.js b/content/apply.js index 038da078..6e174959 100644 --- a/content/apply.js +++ b/content/apply.js @@ -102,7 +102,7 @@ switch (request.method) { case 'styleDeleted': - removeStyle(request); + removeStyle(request.style); break; case 'styleUpdated': diff --git a/edit.html b/edit.html index e838a65b..798820f0 100644 --- a/edit.html +++ b/edit.html @@ -35,7 +35,7 @@ - + diff --git a/edit/codemirror-editing-hooks.js b/edit/codemirror-editing-hooks.js index a76c9c29..d66f3e3c 100644 --- a/edit/codemirror-editing-hooks.js +++ b/edit/codemirror-editing-hooks.js @@ -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; diff --git a/edit/edit.js b/edit/edit.js index bd6384fc..f27cf3e0 100644 --- a/edit/edit.js +++ b/edit/edit.js @@ -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 when 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; diff --git a/edit/global-search.js b/edit/global-search.js index df12a5e3..c05492c5 100644 --- a/edit/global-search.js +++ b/edit/global-search.js @@ -1,6 +1,6 @@ /* global CodeMirror editors makeSectionVisible */ /* global focusAccessibility */ -/* global colorMimicry */ +/* global colorMimicry editor */ 'use strict'; onDOMready().then(() => { diff --git a/edit/linter-report.js b/edit/linter-report.js index 275e9d54..7dc74f0d 100644 --- a/edit/linter-report.js +++ b/edit/linter-report.js @@ -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,12 +16,8 @@ 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); - } + const nextSibling = findNextSibling(tables, cm); + container.insertBefore(table.element, nextSibling && tables.get(nextSibling).element); } table.updateCaption(); table.updateAnnotations(annotations); @@ -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) { diff --git a/edit/sections-editor.js b/edit/sections-editor.js index 51ad4ed4..f8705af5 100644 --- a/edit/sections-editor.js +++ b/edit/sections-editor.js @@ -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); diff --git a/edit/source-editor.js b/edit/source-editor.js index 09e21619..26d8b090 100644 --- a/edit/source-editor.js +++ b/edit/source-editor.js @@ -407,6 +407,8 @@ function createSourceEditor(style) { getStyle: () => style, getEditors: () => [cm], getLastActivatedEditor: () => cm, - scrollToEditor: () => {} + scrollToEditor: () => {}, + getStyleId: () => style.id, + getEditorTitle: () => '' }; } diff --git a/manage/manage.js b/manage/manage.js index decc50ca..40809daa 100644 --- a/manage/manage.js +++ b/manage/manage.js @@ -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': diff --git a/popup/popup.js b/popup/popup.js index 4afedbbd..b22b73b2 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -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) {