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

edit

Browse Source
This commit is contained in:
narcolepticinsomniac 2018-10-12 16:24:42 -04:00 committed by GitHub
parent dbc26c2901
commit 586ad8aad7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 179 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
edit/beautify.js
View File

@ -40,8 +40,7 @@ function beautify(event) {
$create('.buttons', [ $create('.buttons', [
$create('button', { $create('button', {
attributes: {role: 'close'}, attributes: {role: 'close'},
// showHelp.close will be defined after showHelp() is invoked onclick: showHelp.close,
onclick: () => showHelp.close(),
}, t('confirmClose')), }, t('confirmClose')),
$create('button', { $create('button', {
attributes: {role: 'undo'}, attributes: {role: 'undo'},
@ -63,7 +62,7 @@ function beautify(event) {
]), ]),
])); ]));
$('#help-popup').className = 'wide'; $('#help-popup').className = 'main-bg wide';
scope.forEach(cm => { scope.forEach(cm => {
setTimeout(() => { setTimeout(() => {

63
edit/codemirror-default.css
View File

@ -1,12 +1,48 @@
:root {
--applies-to-pseudo: hsla(214, 100%, 90%, 0.15);
}
/************ CM default ************/
.CodeMirror.cm-s-default {
background: var(--gray-lightness-93);
}
.CodeMirror {
outline-style: solid;
outline-color: transparent;
outline-width: 1px;
outline-offset: -1px;
transition: outline-color .25s;
}
.CodeMirror-focused {
outline-color: var(--focus-outline);
}
.CodeMirror.cm-s-default .CodeMirror-gutters {
background-color: var(--truegray-alpha-1);
border-right: 1px solid var(--truegray-alpha-2);
}
.CodeMirror.cm-s-default .CodeMirror-activeline-background {
background: var(--cm-activeline-bg);
}
.CodeMirror-hints.default {
background-color: var(--main-bg);
}
.CodeMirror-hints { .CodeMirror-hints {
z-index: 999; z-index: 999;
} }
/* match Windows select hover, so no variables */
.CodeMirror-hint:hover { .CodeMirror-hint:hover {
color: white; color: #fff;
background: #08f; background: #08f;
} }
.CodeMirror { .CodeMirror {
border: solid #CCC 1px; border: 1px solid var(--gray-lightness-76);
} }
.CodeMirror-lint-mark-warning { .CodeMirror-lint-mark-warning {
background: none; background: none;
@ -14,17 +50,6 @@
.CodeMirror-dialog { .CodeMirror-dialog {
-webkit-animation: highlight 3s cubic-bezier(.18, .02, 0, .94); -webkit-animation: highlight 3s cubic-bezier(.18, .02, 0, .94);
} }
.CodeMirror-focused {
outline: -webkit-focus-ring-color auto 5px;
outline-offset: -2px;
}
@supports (-moz-appearance:none) {
/* restrict to FF */
.CodeMirror-focused {
outline: #7dadd9 auto 1px;
outline-offset: -1px;
}
}
.CodeMirror-search-field { .CodeMirror-search-field {
width: 10em; width: 10em;
} }
@ -32,22 +57,14 @@
width: 5em; width: 5em;
} }
.CodeMirror-search-hint { .CodeMirror-search-hint {
color: #888; color: var(--truegray);
} }
.cm-uso-variable { .cm-uso-variable {
font-weight: bold; font-weight: bold;
} }
.cm-searching.cm-matchhighlight {
/* tokens found by manual search should not animate by cm-matchhighlight */
animation-name: search-and-match-highlighter !important;
}
@keyframes search-and-match-highlighter {
from { background-color: rgba(255, 255, 0, .4); } /* search color */
to { background-color: rgba(100, 255, 100, .4); } /* sarch + highlight */
}
.CodeMirror-activeline .applies-to:before { .CodeMirror-activeline .applies-to:before {
background-color: hsla(214, 100%, 90%, 0.15); background-color: var(--applies-to-pseudo);
content: ""; content: "";
top: 1em; top: 1em;
left: 0; left: 0;

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

@ -1,5 +1,5 @@
/* /*
global CodeMirror loadScript global CodeMirror linterConfig loadScript
global editors editor styleId ownTabId global editors editor styleId ownTabId
global save toggleStyle setupAutocomplete makeSectionVisible getSectionForChild global save toggleStyle setupAutocomplete makeSectionVisible getSectionForChild
global getSectionsHashes global getSectionsHashes
@ -8,6 +8,9 @@ global messageBox
'use strict'; 'use strict';
onDOMscriptReady('/codemirror.js').then(() => { onDOMscriptReady('/codemirror.js').then(() => {
CodeMirror.defaults.lint = linterConfig.getForCodeMirror();
const COMMANDS = { const COMMANDS = {
save, save,
toggleStyle, toggleStyle,
@ -40,9 +43,6 @@ onDOMscriptReady('/codemirror.js').then(() => {
}); });
CodeMirror.defineInitHook(cm => { CodeMirror.defineInitHook(cm => {
if (!cm.display.wrapper.closest('#sections')) {
return;
}
if (prefs.get('editor.livePreview') && styleId) { if (prefs.get('editor.livePreview') && styleId) {
cm.on('changes', updatePreview); cm.on('changes', updatePreview);
} }
@ -299,6 +299,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
break; break;
default: default:
value = null; value = null;
document.body.removeAttribute('data-match-highlight');
} }
option = 'highlightSelectionMatches'; option = 'highlightSelectionMatches';
break; break;

111
edit/edit.css
View File

@ -1,8 +1,17 @@
:root { :root {
--header-narrow-min-height: 12em; --header-narrow-min-height: 12em;
--match-highlighter-alpha-15: hsla(193, 99%, 38%, .15);
--regexp-report-mark-alpha-5: hsla(60, 100%, 50%, .5);
--section-label-highlight: hsl(60, 100%, 80%);
--cm-activeline-bg: hsl(180, 22%, 88%);
--darkgreen: hsl(120, 100%, 20%);
--global-progress: hsla(180, 66%, 36%, .25);
--beautify-select-gradient-left: hsla(0, 0%, 0%, .07);
--beautify-select-gradient-right: hsla(0, 0%, 0%, .05);
} }
body { body {
display: flex;
margin: 0; margin: 0;
font: 12px arial,sans-serif; font: 12px arial,sans-serif;
} }
@ -13,8 +22,8 @@ body {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: hsla(180, 66%, 36%, .25); background-color: var(--global-progress);
border-left: 0 solid darkcyan; border-left: 0 solid var(--darkcyan);
z-index: 2147483647; z-index: 2147483647;
opacity: 0; opacity: 0;
transition: opacity 2s; transition: opacity 2s;
@ -49,9 +58,9 @@ label {
position: fixed; position: fixed;
top: 0; top: 0;
padding: 1rem; padding: 1rem;
border-right: 1px dashed #AAA; border-right: 1px dashed var(--gray-lightness-66);
-webkit-box-shadow: 0 0 3rem -1.2rem black; -webkit-box-shadow: 0 0 3rem -1.2rem var(--black);
box-shadow: 0 0 3rem -1.2rem black; box-shadow: 0 0 3rem -1.2rem var(--black);
box-sizing: border-box; box-sizing: border-box;
z-index: 10; z-index: 10;
display: flex; display: flex;
@ -61,6 +70,7 @@ label {
margin-top: 0; margin-top: 0;
} }
#sections { #sections {
flex-grow: 1;
padding-left: 280px; padding-left: 280px;
} }
#sections h2 { #sections h2 {
@ -122,7 +132,7 @@ label {
#preview-errors { #preview-errors {
background-color: red; background-color: red;
color: white; color: var(--white);
padding: 0 6px; padding: 0 6px;
border-radius: 9px; border-radius: 9px;
margin-left: -.5em; margin-left: -.5em;
@ -164,19 +174,19 @@ label {
.svg-icon:hover, .svg-icon:hover,
.svg-icon.info, .svg-icon.info,
.svg-icon.settings { .svg-icon.settings {
fill: #666; fill: var(--gray-lightness-40);
} }
.svg-icon, .svg-icon,
.svg-icon.info:hover, .svg-icon.info:hover,
.svg-icon.settings:hover { .svg-icon.settings:hover {
fill: #000; fill: var(--black);
} }
#options span .svg-icon { #options span .svg-icon {
margin-top: -3px; /* inline info and config icons */ margin-top: -3px; /* inline info and config icons */
} }
input:invalid { input:invalid {
background-color: rgba(255, 0, 0, 0.1); background-color: var(--truegray-alpha-05);
color: darkred; color: var(--darkred);
} }
#enabled { #enabled {
margin-left: 0; margin-left: 0;
@ -198,7 +208,7 @@ input:invalid {
} }
#header summary:hover h2 { #header summary:hover h2 {
border-color: #bbb; border-color: var(--truegray-alpha-7);
} }
#header summary svg { #header summary svg {
@ -272,7 +282,7 @@ input:invalid {
padding: 0 1rem .3rem; padding: 0 1rem .3rem;
} }
#sections > *:not(:first-child) { #sections > *:not(:first-child) {
border-top: 2px solid hsl(0, 0%, 80%); border-top: 2px solid var(--truegray-alpha-3);
} }
.add-section:after { .add-section:after {
content: attr(short-text); content: attr(short-text);
@ -348,18 +358,23 @@ input:invalid {
.resize-grip-enabled .CodeMirror-scrollbar-filler { .resize-grip-enabled .CodeMirror-scrollbar-filler {
bottom: 7px; /* make space for resize-grip */ bottom: 7px; /* make space for resize-grip */
} }
body[data-match-highlight="token"] .cm-matchhighlight-approved .cm-matchhighlight, .CodeMirror-vscrollbar,
body[data-match-highlight="token"] .CodeMirror-selection-highlight-scrollbar { .CodeMirror-hscrollbar {
outline: 0;
}
body[data-match-highlight="token"]:not(.find-open) .cm-matchhighlight-approved .cm-matchhighlight,
body[data-match-highlight="token"]:not(.find-open) .cm-matchhighlight-approved .CodeMirror-selection-highlight-scrollbar {
animation: fadein-match-highlighter 1s cubic-bezier(.97,.01,.42,.98); animation: fadein-match-highlighter 1s cubic-bezier(.97,.01,.42,.98);
animation-fill-mode: both; animation-fill-mode: both;
} }
body[data-match-highlight="selection"] .cm-matchhighlight-approved .cm-matchhighlight, body[data-match-highlight="selection"]:not(.find-open) .cm-matchhighlight,
body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar { body[data-match-highlight="selection"]:not(.find-open) .CodeMirror-selection-highlight-scrollbar {
background-color: rgba(1, 151, 193, 0.1); background-color: var(--match-highlighter-alpha-15);
} }
@-webkit-keyframes highlight { @-webkit-keyframes highlight {
from { from {
background-color: #ff9; background-color: var(--section-label-highlight);
} }
to { to {
background-color: inherit; background-color: inherit;
@ -375,7 +390,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
} }
@keyframes fadein-match-highlighter { @keyframes fadein-match-highlighter {
from { background-color: transparent; } from { background-color: transparent; }
to { background-color: rgba(1, 151, 193, 0.1); } to { background-color: var(--match-highlighter-alpha-15); }
} }
.resize-grip { .resize-grip {
position: absolute; position: absolute;
@ -416,7 +431,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
padding: 0; padding: 0;
height: 22px; height: 22px;
align-items: center; align-items: center;
margin: 0 .2em 0 0; margin: 0 .35em 0 0;
white-space: nowrap; white-space: nowrap;
} }
.applies-to ul { .applies-to ul {
@ -468,14 +483,14 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
.add-applies-to .svg-icon, .add-applies-to .svg-icon,
.remove-applies-to .svg-icon { .remove-applies-to .svg-icon {
pointer-events: none; pointer-events: none;
fill: hsl(0, 0%, 60%); fill: var(--gray-lightness-60);
height: 12px; height: 12px;
width: 12px; width: 12px;
} }
.add-applies-to:hover .svg-icon, .add-applies-to:hover .svg-icon,
.remove-applies-to:hover .svg-icon { .remove-applies-to:hover .svg-icon {
pointer-events: none; pointer-events: none;
fill: hsl(0, 0%, 0%); fill: var(--black);
} }
.test-regexp { .test-regexp {
display: none; display: none;
@ -487,7 +502,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
cursor: pointer; cursor: pointer;
} }
.regexp-report mark { .regexp-report mark {
background-color: rgba(255, 255, 0, .5); background-color: var(--regexp-report-mark-alpha-5);
} }
.regexp-report details { .regexp-report details {
margin-left: 1rem; margin-left: 1rem;
@ -504,10 +519,10 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.regexp-report details[data-type="full"] { .regexp-report details[data-type="full"] {
color: darkgreen; color: var(--darkgreen);
} }
.regexp-report details[data-type="partial"] { .regexp-report details[data-type="partial"] {
color: darkgray; color: var(--truegray-alpha-6);
} }
.regexp-report details[data-type="invalid"] { .regexp-report details[data-type="invalid"] {
color: maroon; color: maroon;
@ -538,7 +553,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
margin-top: -1px; margin-top: -1px;
} }
.regexp-report-note { .regexp-report-note {
color: #999; color: var(--truegray);
position: absolute; position: absolute;
margin: 0 0.5rem 0 0; margin: 0 0.5rem 0 0;
hyphens: auto; hyphens: auto;
@ -550,8 +565,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
max-width: 50vw; max-width: 50vw;
position: fixed; position: fixed;
display: none; display: none;
background-color: white; box-shadow: 3px 3px 30px var(--black-alpha-5);
box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.5);
padding: 0.5rem; padding: 0.5rem;
z-index: 99; z-index: 99;
} }
@ -560,7 +574,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
max-width: 100%; max-width: 100%;
} }
#help-popup.big { #help-popup.big {
box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 0px 100000px !important; box-shadow: var(--black-alpha-5) 0px 0px 0px 100000px !important;
left: calc(280px - 3rem); left: calc(280px - 3rem);
} }
#help-popup.big .CodeMirror { #help-popup.big .CodeMirror {
@ -569,7 +583,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
} }
#help-popup .title { #help-popup .title {
font-weight: bold; font-weight: bold;
background-color: rgba(0,0,0,0.05); background-color: var(--truegray-alpha-15);
margin: -0.5rem -0.5rem 0.5rem; margin: -0.5rem -0.5rem 0.5rem;
padding: .5rem 32px .5rem .5rem; padding: .5rem 32px .5rem .5rem;
} }
@ -594,10 +608,12 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
word-break: break-all; word-break: break-all;
} }
.keymap-list input { .keymap-list input {
background-color: var(--main-bg);
border: 1px solid var(--truegray-alpha-6);
width: 100%; width: 100%;
} }
.keymap-list tr:nth-child(odd) { .keymap-list tr:nth-child(odd) {
background-color: rgba(0, 0, 0, 0.07); background-color: var(--truegray-alpha-1);
} }
.keymap-list td:first-child { .keymap-list td:first-child {
white-space: nowrap; white-space: nowrap;
@ -651,9 +667,6 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
#lint table:last-child { #lint table:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
#lint table.empty {
display: none;
}
#lint caption { #lint caption {
text-align: left; text-align: left;
font-weight: bold; font-weight: bold;
@ -663,7 +676,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
cursor: pointer; cursor: pointer;
} }
#lint tr:hover { #lint tr:hover {
background-color: rgba(0, 0, 0, 0.1); background-color: var(--black-alpha-1);
} }
#lint td[role="severity"] { #lint td[role="severity"] {
font-size: 0; font-size: 0;
@ -716,12 +729,15 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
} }
.beautify-options select { .beautify-options select {
border: none; border: none;
background: linear-gradient(90deg, rgba(0, 0, 0, .05) 18px, rgba(0, 0, 0, .02) 24px); background: linear-gradient(90deg, var(--beautify-select-gradient-left) 18px, var(--beautify-select-gradient-right) 24px);
font-family: monospace; font-family: monospace;
font-weight: bold; font-weight: bold;
padding-left: 4px; padding-left: 4px;
margin-left: 4px; margin-left: 4px;
} }
.beautify-options select option{
background-color: var(--truegray-alpha-2)
}
/************ single editor **************/ /************ single editor **************/
.usercss body { .usercss body {
@ -751,8 +767,9 @@ html:not(.usercss) .usercss-only,
} }
.usercss #name { .usercss #name {
background-color: #eee; background-color: var(--truegray-alpha-07);
color: #888; color: var(--truegray);
cursor: not-allowed;
} }
#sections .single-editor, #sections .single-editor,
@ -770,14 +787,8 @@ html:not(.usercss) .usercss-only,
outline: none; outline: none;
} }
#footer a { .single-editor .CodeMirror.cm-s-default {
color: #333; outline: none !important;
transition: color .5s;
text-decoration-skip: ink;
}
#footer a:hover {
color: #666;
} }
.usercss.firefox #sections, .usercss.firefox #sections,
@ -788,9 +799,13 @@ html:not(.usercss) .usercss-only,
/************ line widget *************/ /************ line widget *************/
.CodeMirror-linewidget .applies-to { .CodeMirror-linewidget .applies-to {
font: normal 12px Arial, system-ui, sans-serif;
margin: 1em 0; margin: 1em 0;
padding: .75rem .75rem .25rem; padding: .75rem .75rem .25rem;
padding-right: calc(1em + 20px); padding-right: calc(1em + 20px);
background-color: var(--gray-lightness-90);
border-top: 1px solid var(--truegray-alpha-3);
border-bottom: 1px solid var(--truegray-alpha-3);
} }
.CodeMirror-linewidget .applies-to li { .CodeMirror-linewidget .applies-to li {
@ -821,7 +836,7 @@ html:not(.usercss) .usercss-only,
width: unset; width: unset;
position: inherit; position: inherit;
border-right: none; border-right: none;
border-bottom: 1px dashed #AAA; border-bottom: 1px dashed var(--gray-lightness-66);
padding: 0; padding: 0;
} }
#actions { #actions {
@ -933,7 +948,7 @@ html:not(.usercss) .usercss-only,
padding-left: 0; padding-left: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1 1 auto;
} }
#sections > * { #sections > * {
margin: 0 .5rem .5rem; margin: 0 .5rem .5rem;

46
edit/edit.js
View File

@ -1,12 +1,13 @@
/* /*
global CodeMirror loadScript global CodeMirror parserlib loadScript
global CSSLint initLint linterConfig updateLintReport renderLintReport updateLinter
global createSourceEditor global createSourceEditor
global closeCurrentTab regExpTester messageBox global closeCurrentTab regExpTester messageBox
global setupCodeMirror global setupCodeMirror
global beautify global beautify
global initWithSectionStyle addSections removeSection getSectionsHashes global initWithSectionStyle addSections removeSection getSectionsHashes
global sectionsToMozFormat global sectionsToMozFormat
global moveFocus editorWorker global moveFocus
*/ */
'use strict'; 'use strict';
@ -211,6 +212,7 @@ function beforeUnload() {
} }
const isDirty = editor ? editor.isDirty() : !isCleanGlobal(); const isDirty = editor ? editor.isDirty() : !isCleanGlobal();
if (isDirty) { if (isDirty) {
updateLintReportIfEnabled(null, 0);
// neither confirm() nor custom messages work in modern browsers but just in case // neither confirm() nor custom messages work in modern browsers but just in case
return t('styleChangesNotSaved'); return t('styleChangesNotSaved');
} }
@ -226,7 +228,7 @@ function isUsercss(style) {
function initStyleData() { function initStyleData() {
// TODO: remove .replace(/^\?/, '') when minimum_chrome_version >= 52 (https://crbug.com/601425) // TODO: remove .replace(/^\?/, '') when minimum_chrome_version >= 52 (https://crbug.com/601425)
const params = new URLSearchParams(location.search.replace(/^\?/, '')); const params = new URLSearchParams(location.search.replace(/^\?/, ''));
const id = Number(params.get('id')); const id = params.get('id');
const createEmptyStyle = () => ({ const createEmptyStyle = () => ({
id: null, id: null,
name: params.get('domain') || name: params.get('domain') ||
@ -242,8 +244,8 @@ function initStyleData() {
) )
], ],
}); });
return fetchStyle() return API.getStyles({id: id || -1})
.then(style => { .then(([style = createEmptyStyle()]) => {
styleId = style.id; styleId = style.id;
if (styleId) sessionStorage.justEditedStyleId = styleId; if (styleId) sessionStorage.justEditedStyleId = styleId;
// we set "usercss" class on <html> when <body> is empty // we set "usercss" class on <html> when <body> is empty
@ -257,13 +259,6 @@ function initStyleData() {
} }
return style; return style;
}); });
function fetchStyle() {
if (id) {
return API.getStyleFromDB(id);
}
return Promise.resolve(createEmptyStyle());
}
} }
function initHooks() { function initHooks() {
@ -281,6 +276,9 @@ function initHooks() {
$('#save-button').addEventListener('click', save, false); $('#save-button').addEventListener('click', save, false);
$('#sections-help').addEventListener('click', showSectionHelp, false); $('#sections-help').addEventListener('click', showSectionHelp, false);
// TODO: investigate why FF needs this delay
debounce(initLint, FIREFOX ? 100 : 0);
if (!FIREFOX) { if (!FIREFOX) {
$$([ $$([
'input:not([type])', 'input:not([type])',
@ -355,6 +353,7 @@ function toggleStyle() {
} }
function save() { function save() {
updateLintReportIfEnabled(null, 0);
if (!validate()) { if (!validate()) {
return; return;
} }
@ -415,6 +414,12 @@ function updateTitle() {
$('#save-button').disabled = clean; $('#save-button').disabled = clean;
} }
function updateLintReportIfEnabled(...args) {
if (CodeMirror.defaults.lint) {
updateLintReport(...args);
}
}
function showMozillaFormat() { function showMozillaFormat() {
const popup = showCodeMirrorPopup(t('styleToMozillaFormatTitle'), '', {readOnly: true}); const popup = showCodeMirrorPopup(t('styleToMozillaFormatTitle'), '', {readOnly: true});
popup.codebox.setValue(toMozillaFormat()); popup.codebox.setValue(toMozillaFormat());
@ -456,7 +461,16 @@ function fromMozillaFormat() {
function doImport({replaceOldStyle = false}) { function doImport({replaceOldStyle = false}) {
lockPageUI(true); lockPageUI(true);
editorWorker.parseMozFormat({code: popup.codebox.getValue().trim()}) new Promise(setTimeout)
.then(() => {
const worker = linterConfig.worker.csslint;
if (!worker.instance) worker.instance = new Worker(worker.path);
})
.then(() => linterConfig.invokeWorker({
linter: 'csslint',
action: 'parse',
code: popup.codebox.getValue().trim(),
}))
.then(({sections, errors}) => { .then(({sections, errors}) => {
// shouldn't happen but just in case // shouldn't happen but just in case
if (!sections.length && errors.length) { if (!sections.length && errors.length) {
@ -469,7 +483,8 @@ function fromMozillaFormat() {
removeOldSections(replaceOldStyle); removeOldSections(replaceOldStyle);
return addSections(sections, div => setCleanItem(div, false)); return addSections(sections, div => setCleanItem(div, false));
}) })
.then(() => { .then(sectionDivs => {
sectionDivs.forEach(div => updateLintReportIfEnabled(div.CodeMirror, 1));
$('.dismiss').dispatchEvent(new Event('click')); $('.dismiss').dispatchEvent(new Event('click'));
}) })
.catch(showError) .catch(showError)
@ -524,7 +539,7 @@ function showToMozillaHelp(event) {
function showHelp(title = '', body) { function showHelp(title = '', body) {
const div = $('#help-popup'); const div = $('#help-popup');
div.className = ''; div.className = 'main-bg';
const contents = $('.contents', div); const contents = $('.contents', div);
contents.textContent = ''; contents.textContent = '';
@ -589,6 +604,7 @@ function showCodeMirrorPopup(title, html, options) {
foldGutter: true, foldGutter: true,
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'], gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
matchBrackets: true, matchBrackets: true,
lint: linterConfig.getForCodeMirror(),
styleActiveLine: true, styleActiveLine: true,
theme: prefs.get('editor.theme'), theme: prefs.get('editor.theme'),
keyMap: prefs.get('editor.keyMap') keyMap: prefs.get('editor.keyMap')

42
edit/global-search.css
View File

@ -6,9 +6,9 @@
max-width: calc(100vw - 4rem); max-width: calc(100vw - 4rem);
box-sizing: border-box; box-sizing: border-box;
z-index: 10000; z-index: 10000;
background-color: white; background-color: var(--white);
box-shadow: 4px 5px 20px -6px rgba(0, 0, 0, .5); box-shadow: 4px 5px 20px -6px var(--black-alpha-5);
border: 1px solid hsla(0, 0%, 50%, .4); border: 1px solid var(--truegray-alpha-4);
transition: opacity .25s; transition: opacity .25s;
border-top: none; border-top: none;
} }
@ -21,7 +21,7 @@
padding-right: .75em; padding-right: .75em;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
background-color: hsla(0, 0%, 50%, .1); background-color: var(--truegray-alpha-1);
} }
#search-replace-dialog [data-type="content"] { #search-replace-dialog [data-type="content"] {
@ -59,7 +59,7 @@
padding: .25rem .25rem .25rem .5rem; padding: .25rem .25rem .25rem .5rem;
margin: 0; margin: 0;
border: none; border: none;
background-color: white; background-color: var(--white);
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
color: currentColor; /* use the current theme's color instead of UserAgent's CSS */ color: currentColor; /* use the current theme's color instead of UserAgent's CSS */
@ -118,7 +118,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
position: absolute; position: absolute;
border-color: hsla(180, 100%, 30%, .5); border-color: var(--darkcyan-alpha-5);
border-style: none none solid none; border-style: none none solid none;
border-width: 4px; border-width: 4px;
} }
@ -160,11 +160,11 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: hsla(0, 0%, 100%, .75); background-color: var(--white-alpha-75);
} }
#search-replace-dialog [data-type="status"] { #search-replace-dialog [data-type="status"] {
background-color: hsla(0, 0%, 50%, .2); background-color: var(--truegray-alpha-2);
padding-top: 2px; padding-top: 2px;
padding-left: .5rem; padding-left: .5rem;
display: flex; display: flex;
@ -181,17 +181,33 @@
opacity: 1; opacity: 1;
} }
/*********** CodeMirror ****************/ /*********** CodeMirror search. Shouldn't need variables ****************/
body.find-open .search-target-editor {
.search-target-editor { outline-color: darkorange !important;
outline: 1px solid darkorange;
} }
#stylus .search-target-match { body.find-open .cm-searching {
background-color: rgba(255, 255, 0, .4);
}
body.find-open .cm-searching.search-target-match {
background-color: darkorange; background-color: darkorange;
color: black; color: black;
} }
body.find-open .CodeMirror-search-match {
background: gold;
border-top: 1px solid orange;
border-bottom: 1px solid orange;
}
/* hide default CM search highlighting */
body .cm-searching,
body .CodeMirror-search-match {
background-color: transparent;
border-color: transparent;
}
@media (max-width: 500px) { @media (max-width: 500px) {
#search-replace-dialog { #search-replace-dialog {
left: 0; left: 0;

10
edit/global-search.js
View File

@ -753,8 +753,14 @@ onDOMready().then(() => {
function makeTargetVisible(element) { function makeTargetVisible(element) {
const old = $('.' + TARGET_CLASS); const old = $('.' + TARGET_CLASS);
if (old !== element) { if (old !== element) {
if (old) old.classList.remove(TARGET_CLASS); if (old) {
if (element) element.classList.add(TARGET_CLASS); old.classList.remove(TARGET_CLASS);
document.body.classList.remove('find-open');
}
if (element) {
element.classList.add(TARGET_CLASS);
document.body.classList.add('find-open');
}
} }
} }