edit
This commit is contained in:
narcolepticinsomniac
GitHub
parent
dbc26c2901
commit
586ad8aad7
|
|
@ -40,8 +40,7 @@ function beautify(event) {
|
|||
$create('.buttons', [
|
||||
$create('button', {
|
||||
attributes: {role: 'close'},
|
||||
// showHelp.close will be defined after showHelp() is invoked
|
||||
onclick: () => showHelp.close(),
|
||||
onclick: showHelp.close,
|
||||
}, t('confirmClose')),
|
||||
$create('button', {
|
||||
attributes: {role: 'undo'},
|
||||
|
|
@ -63,7 +62,7 @@ function beautify(event) {
|
|||
]),
|
||||
]));
|
||||
|
||||
$('#help-popup').className = 'wide';
|
||||
$('#help-popup').className = 'main-bg wide';
|
||||
|
||||
scope.forEach(cm => {
|
||||
setTimeout(() => {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* match Windows select hover, so no variables */
|
||||
.CodeMirror-hint:hover {
|
||||
color: white;
|
||||
color: #fff;
|
||||
background: #08f;
|
||||
}
|
||||
.CodeMirror {
|
||||
border: solid #CCC 1px;
|
||||
border: 1px solid var(--gray-lightness-76);
|
||||
}
|
||||
.CodeMirror-lint-mark-warning {
|
||||
background: none;
|
||||
|
|
@ -14,17 +50,6 @@
|
|||
.CodeMirror-dialog {
|
||||
-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 {
|
||||
width: 10em;
|
||||
}
|
||||
|
|
@ -32,22 +57,14 @@
|
|||
width: 5em;
|
||||
}
|
||||
.CodeMirror-search-hint {
|
||||
color: #888;
|
||||
color: var(--truegray);
|
||||
}
|
||||
.cm-uso-variable {
|
||||
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 {
|
||||
background-color: hsla(214, 100%, 90%, 0.15);
|
||||
background-color: var(--applies-to-pseudo);
|
||||
content: "";
|
||||
top: 1em;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
global CodeMirror loadScript
|
||||
global CodeMirror linterConfig loadScript
|
||||
global editors editor styleId ownTabId
|
||||
global save toggleStyle setupAutocomplete makeSectionVisible getSectionForChild
|
||||
global getSectionsHashes
|
||||
|
|
@ -8,6 +8,9 @@ global messageBox
|
|||
'use strict';
|
||||
|
||||
onDOMscriptReady('/codemirror.js').then(() => {
|
||||
|
||||
CodeMirror.defaults.lint = linterConfig.getForCodeMirror();
|
||||
|
||||
const COMMANDS = {
|
||||
save,
|
||||
toggleStyle,
|
||||
|
|
@ -40,9 +43,6 @@ onDOMscriptReady('/codemirror.js').then(() => {
|
|||
});
|
||||
|
||||
CodeMirror.defineInitHook(cm => {
|
||||
if (!cm.display.wrapper.closest('#sections')) {
|
||||
return;
|
||||
}
|
||||
if (prefs.get('editor.livePreview') && styleId) {
|
||||
cm.on('changes', updatePreview);
|
||||
}
|
||||
|
|
@ -299,6 +299,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
|
|||
break;
|
||||
default:
|
||||
value = null;
|
||||
document.body.removeAttribute('data-match-highlight');
|
||||
}
|
||||
option = 'highlightSelectionMatches';
|
||||
break;
|
||||
|
|
|
|||
113
edit/edit.css
113
edit/edit.css
|
|
@ -1,8 +1,17 @@
|
|||
:root {
|
||||
--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 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
font: 12px arial,sans-serif;
|
||||
}
|
||||
|
|
@ -13,8 +22,8 @@ body {
|
|||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: hsla(180, 66%, 36%, .25);
|
||||
border-left: 0 solid darkcyan;
|
||||
background-color: var(--global-progress);
|
||||
border-left: 0 solid var(--darkcyan);
|
||||
z-index: 2147483647;
|
||||
opacity: 0;
|
||||
transition: opacity 2s;
|
||||
|
|
@ -27,7 +36,7 @@ body {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
/************ checkbox & select************/
|
||||
/************ checkbox & select ************/
|
||||
.options-column > div[class="option"] {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
|
@ -49,9 +58,9 @@ label {
|
|||
position: fixed;
|
||||
top: 0;
|
||||
padding: 1rem;
|
||||
border-right: 1px dashed #AAA;
|
||||
-webkit-box-shadow: 0 0 3rem -1.2rem black;
|
||||
box-shadow: 0 0 3rem -1.2rem black;
|
||||
border-right: 1px dashed var(--gray-lightness-66);
|
||||
-webkit-box-shadow: 0 0 3rem -1.2rem var(--black);
|
||||
box-shadow: 0 0 3rem -1.2rem var(--black);
|
||||
box-sizing: border-box;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
|
|
@ -61,6 +70,7 @@ label {
|
|||
margin-top: 0;
|
||||
}
|
||||
#sections {
|
||||
flex-grow: 1;
|
||||
padding-left: 280px;
|
||||
}
|
||||
#sections h2 {
|
||||
|
|
@ -122,7 +132,7 @@ label {
|
|||
|
||||
#preview-errors {
|
||||
background-color: red;
|
||||
color: white;
|
||||
color: var(--white);
|
||||
padding: 0 6px;
|
||||
border-radius: 9px;
|
||||
margin-left: -.5em;
|
||||
|
|
@ -164,19 +174,19 @@ label {
|
|||
.svg-icon:hover,
|
||||
.svg-icon.info,
|
||||
.svg-icon.settings {
|
||||
fill: #666;
|
||||
fill: var(--gray-lightness-40);
|
||||
}
|
||||
.svg-icon,
|
||||
.svg-icon.info:hover,
|
||||
.svg-icon.settings:hover {
|
||||
fill: #000;
|
||||
fill: var(--black);
|
||||
}
|
||||
#options span .svg-icon {
|
||||
margin-top: -3px; /* inline info and config icons */
|
||||
}
|
||||
input:invalid {
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
color: darkred;
|
||||
background-color: var(--truegray-alpha-05);
|
||||
color: var(--darkred);
|
||||
}
|
||||
#enabled {
|
||||
margin-left: 0;
|
||||
|
|
@ -198,7 +208,7 @@ input:invalid {
|
|||
}
|
||||
|
||||
#header summary:hover h2 {
|
||||
border-color: #bbb;
|
||||
border-color: var(--truegray-alpha-7);
|
||||
}
|
||||
|
||||
#header summary svg {
|
||||
|
|
@ -272,7 +282,7 @@ input:invalid {
|
|||
padding: 0 1rem .3rem;
|
||||
}
|
||||
#sections > *:not(:first-child) {
|
||||
border-top: 2px solid hsl(0, 0%, 80%);
|
||||
border-top: 2px solid var(--truegray-alpha-3);
|
||||
}
|
||||
.add-section:after {
|
||||
content: attr(short-text);
|
||||
|
|
@ -348,18 +358,23 @@ input:invalid {
|
|||
.resize-grip-enabled .CodeMirror-scrollbar-filler {
|
||||
bottom: 7px; /* make space for resize-grip */
|
||||
}
|
||||
body[data-match-highlight="token"] .cm-matchhighlight-approved .cm-matchhighlight,
|
||||
body[data-match-highlight="token"] .CodeMirror-selection-highlight-scrollbar {
|
||||
.CodeMirror-vscrollbar,
|
||||
.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-fill-mode: both;
|
||||
}
|
||||
body[data-match-highlight="selection"] .cm-matchhighlight-approved .cm-matchhighlight,
|
||||
body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar {
|
||||
background-color: rgba(1, 151, 193, 0.1);
|
||||
body[data-match-highlight="selection"]:not(.find-open) .cm-matchhighlight,
|
||||
body[data-match-highlight="selection"]:not(.find-open) .CodeMirror-selection-highlight-scrollbar {
|
||||
background-color: var(--match-highlighter-alpha-15);
|
||||
}
|
||||
|
||||
@-webkit-keyframes highlight {
|
||||
from {
|
||||
background-color: #ff9;
|
||||
background-color: var(--section-label-highlight);
|
||||
}
|
||||
to {
|
||||
background-color: inherit;
|
||||
|
|
@ -375,7 +390,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
|||
}
|
||||
@keyframes fadein-match-highlighter {
|
||||
from { background-color: transparent; }
|
||||
to { background-color: rgba(1, 151, 193, 0.1); }
|
||||
to { background-color: var(--match-highlighter-alpha-15); }
|
||||
}
|
||||
.resize-grip {
|
||||
position: absolute;
|
||||
|
|
@ -416,7 +431,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
|||
padding: 0;
|
||||
height: 22px;
|
||||
align-items: center;
|
||||
margin: 0 .2em 0 0;
|
||||
margin: 0 .35em 0 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.applies-to ul {
|
||||
|
|
@ -468,14 +483,14 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
|||
.add-applies-to .svg-icon,
|
||||
.remove-applies-to .svg-icon {
|
||||
pointer-events: none;
|
||||
fill: hsl(0, 0%, 60%);
|
||||
fill: var(--gray-lightness-60);
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
.add-applies-to:hover .svg-icon,
|
||||
.remove-applies-to:hover .svg-icon {
|
||||
pointer-events: none;
|
||||
fill: hsl(0, 0%, 0%);
|
||||
fill: var(--black);
|
||||
}
|
||||
.test-regexp {
|
||||
display: none;
|
||||
|
|
@ -487,7 +502,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
|||
cursor: pointer;
|
||||
}
|
||||
.regexp-report mark {
|
||||
background-color: rgba(255, 255, 0, .5);
|
||||
background-color: var(--regexp-report-mark-alpha-5);
|
||||
}
|
||||
.regexp-report details {
|
||||
margin-left: 1rem;
|
||||
|
|
@ -504,10 +519,10 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
|||
overflow-wrap: break-word;
|
||||
}
|
||||
.regexp-report details[data-type="full"] {
|
||||
color: darkgreen;
|
||||
color: var(--darkgreen);
|
||||
}
|
||||
.regexp-report details[data-type="partial"] {
|
||||
color: darkgray;
|
||||
color: var(--truegray-alpha-6);
|
||||
}
|
||||
.regexp-report details[data-type="invalid"] {
|
||||
color: maroon;
|
||||
|
|
@ -538,7 +553,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
|||
margin-top: -1px;
|
||||
}
|
||||
.regexp-report-note {
|
||||
color: #999;
|
||||
color: var(--truegray);
|
||||
position: absolute;
|
||||
margin: 0 0.5rem 0 0;
|
||||
hyphens: auto;
|
||||
|
|
@ -550,8 +565,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
|||
max-width: 50vw;
|
||||
position: fixed;
|
||||
display: none;
|
||||
background-color: white;
|
||||
box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 3px 3px 30px var(--black-alpha-5);
|
||||
padding: 0.5rem;
|
||||
z-index: 99;
|
||||
}
|
||||
|
|
@ -560,7 +574,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
|||
max-width: 100%;
|
||||
}
|
||||
#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);
|
||||
}
|
||||
#help-popup.big .CodeMirror {
|
||||
|
|
@ -569,7 +583,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
|||
}
|
||||
#help-popup .title {
|
||||
font-weight: bold;
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
background-color: var(--truegray-alpha-15);
|
||||
margin: -0.5rem -0.5rem 0.5rem;
|
||||
padding: .5rem 32px .5rem .5rem;
|
||||
}
|
||||
|
|
@ -594,10 +608,12 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
|||
word-break: break-all;
|
||||
}
|
||||
.keymap-list input {
|
||||
background-color: var(--main-bg);
|
||||
border: 1px solid var(--truegray-alpha-6);
|
||||
width: 100%;
|
||||
}
|
||||
.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 {
|
||||
white-space: nowrap;
|
||||
|
|
@ -651,9 +667,6 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
|||
#lint table:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#lint table.empty {
|
||||
display: none;
|
||||
}
|
||||
#lint caption {
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
|
|
@ -663,7 +676,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
|||
cursor: pointer;
|
||||
}
|
||||
#lint tr:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
background-color: var(--black-alpha-1);
|
||||
}
|
||||
#lint td[role="severity"] {
|
||||
font-size: 0;
|
||||
|
|
@ -716,12 +729,15 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
|||
}
|
||||
.beautify-options select {
|
||||
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-weight: bold;
|
||||
padding-left: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.beautify-options select option{
|
||||
background-color: var(--truegray-alpha-2)
|
||||
}
|
||||
|
||||
/************ single editor **************/
|
||||
.usercss body {
|
||||
|
|
@ -751,8 +767,9 @@ html:not(.usercss) .usercss-only,
|
|||
}
|
||||
|
||||
.usercss #name {
|
||||
background-color: #eee;
|
||||
color: #888;
|
||||
background-color: var(--truegray-alpha-07);
|
||||
color: var(--truegray);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#sections .single-editor,
|
||||
|
|
@ -770,14 +787,8 @@ html:not(.usercss) .usercss-only,
|
|||
outline: none;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color: #333;
|
||||
transition: color .5s;
|
||||
text-decoration-skip: ink;
|
||||
}
|
||||
|
||||
#footer a:hover {
|
||||
color: #666;
|
||||
.single-editor .CodeMirror.cm-s-default {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.usercss.firefox #sections,
|
||||
|
|
@ -788,9 +799,13 @@ html:not(.usercss) .usercss-only,
|
|||
|
||||
/************ line widget *************/
|
||||
.CodeMirror-linewidget .applies-to {
|
||||
font: normal 12px Arial, system-ui, sans-serif;
|
||||
margin: 1em 0;
|
||||
padding: .75rem .75rem .25rem;
|
||||
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 {
|
||||
|
|
@ -821,7 +836,7 @@ html:not(.usercss) .usercss-only,
|
|||
width: unset;
|
||||
position: inherit;
|
||||
border-right: none;
|
||||
border-bottom: 1px dashed #AAA;
|
||||
border-bottom: 1px dashed var(--gray-lightness-66);
|
||||
padding: 0;
|
||||
}
|
||||
#actions {
|
||||
|
|
@ -933,7 +948,7 @@ html:not(.usercss) .usercss-only,
|
|||
padding-left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
#sections > * {
|
||||
margin: 0 .5rem .5rem;
|
||||
|
|
|
|||
46
edit/edit.js
46
edit/edit.js
|
|
@ -1,12 +1,13 @@
|
|||
/*
|
||||
global CodeMirror loadScript
|
||||
global CodeMirror parserlib loadScript
|
||||
global CSSLint initLint linterConfig updateLintReport renderLintReport updateLinter
|
||||
global createSourceEditor
|
||||
global closeCurrentTab regExpTester messageBox
|
||||
global setupCodeMirror
|
||||
global beautify
|
||||
global initWithSectionStyle addSections removeSection getSectionsHashes
|
||||
global sectionsToMozFormat
|
||||
global moveFocus editorWorker
|
||||
global moveFocus
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
|
|
@ -211,6 +212,7 @@ function beforeUnload() {
|
|||
}
|
||||
const isDirty = editor ? editor.isDirty() : !isCleanGlobal();
|
||||
if (isDirty) {
|
||||
updateLintReportIfEnabled(null, 0);
|
||||
// neither confirm() nor custom messages work in modern browsers but just in case
|
||||
return t('styleChangesNotSaved');
|
||||
}
|
||||
|
|
@ -226,7 +228,7 @@ function isUsercss(style) {
|
|||
function initStyleData() {
|
||||
// TODO: remove .replace(/^\?/, '') when minimum_chrome_version >= 52 (https://crbug.com/601425)
|
||||
const params = new URLSearchParams(location.search.replace(/^\?/, ''));
|
||||
const id = Number(params.get('id'));
|
||||
const id = params.get('id');
|
||||
const createEmptyStyle = () => ({
|
||||
id: null,
|
||||
name: params.get('domain') ||
|
||||
|
|
@ -242,8 +244,8 @@ function initStyleData() {
|
|||
)
|
||||
],
|
||||
});
|
||||
return fetchStyle()
|
||||
.then(style => {
|
||||
return API.getStyles({id: id || -1})
|
||||
.then(([style = createEmptyStyle()]) => {
|
||||
styleId = style.id;
|
||||
if (styleId) sessionStorage.justEditedStyleId = styleId;
|
||||
// we set "usercss" class on <html> when <body> is empty
|
||||
|
|
@ -257,13 +259,6 @@ function initStyleData() {
|
|||
}
|
||||
return style;
|
||||
});
|
||||
|
||||
function fetchStyle() {
|
||||
if (id) {
|
||||
return API.getStyleFromDB(id);
|
||||
}
|
||||
return Promise.resolve(createEmptyStyle());
|
||||
}
|
||||
}
|
||||
|
||||
function initHooks() {
|
||||
|
|
@ -281,6 +276,9 @@ function initHooks() {
|
|||
$('#save-button').addEventListener('click', save, false);
|
||||
$('#sections-help').addEventListener('click', showSectionHelp, false);
|
||||
|
||||
// TODO: investigate why FF needs this delay
|
||||
debounce(initLint, FIREFOX ? 100 : 0);
|
||||
|
||||
if (!FIREFOX) {
|
||||
$$([
|
||||
'input:not([type])',
|
||||
|
|
@ -355,6 +353,7 @@ function toggleStyle() {
|
|||
}
|
||||
|
||||
function save() {
|
||||
updateLintReportIfEnabled(null, 0);
|
||||
if (!validate()) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -415,6 +414,12 @@ function updateTitle() {
|
|||
$('#save-button').disabled = clean;
|
||||
}
|
||||
|
||||
function updateLintReportIfEnabled(...args) {
|
||||
if (CodeMirror.defaults.lint) {
|
||||
updateLintReport(...args);
|
||||
}
|
||||
}
|
||||
|
||||
function showMozillaFormat() {
|
||||
const popup = showCodeMirrorPopup(t('styleToMozillaFormatTitle'), '', {readOnly: true});
|
||||
popup.codebox.setValue(toMozillaFormat());
|
||||
|
|
@ -456,7 +461,16 @@ function fromMozillaFormat() {
|
|||
|
||||
function doImport({replaceOldStyle = false}) {
|
||||
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}) => {
|
||||
// shouldn't happen but just in case
|
||||
if (!sections.length && errors.length) {
|
||||
|
|
@ -469,7 +483,8 @@ function fromMozillaFormat() {
|
|||
removeOldSections(replaceOldStyle);
|
||||
return addSections(sections, div => setCleanItem(div, false));
|
||||
})
|
||||
.then(() => {
|
||||
.then(sectionDivs => {
|
||||
sectionDivs.forEach(div => updateLintReportIfEnabled(div.CodeMirror, 1));
|
||||
$('.dismiss').dispatchEvent(new Event('click'));
|
||||
})
|
||||
.catch(showError)
|
||||
|
|
@ -524,7 +539,7 @@ function showToMozillaHelp(event) {
|
|||
|
||||
function showHelp(title = '', body) {
|
||||
const div = $('#help-popup');
|
||||
div.className = '';
|
||||
div.className = 'main-bg';
|
||||
|
||||
const contents = $('.contents', div);
|
||||
contents.textContent = '';
|
||||
|
|
@ -589,6 +604,7 @@ function showCodeMirrorPopup(title, html, options) {
|
|||
foldGutter: true,
|
||||
gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
|
||||
matchBrackets: true,
|
||||
lint: linterConfig.getForCodeMirror(),
|
||||
styleActiveLine: true,
|
||||
theme: prefs.get('editor.theme'),
|
||||
keyMap: prefs.get('editor.keyMap')
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
max-width: calc(100vw - 4rem);
|
||||
box-sizing: border-box;
|
||||
z-index: 10000;
|
||||
background-color: white;
|
||||
box-shadow: 4px 5px 20px -6px rgba(0, 0, 0, .5);
|
||||
border: 1px solid hsla(0, 0%, 50%, .4);
|
||||
background-color: var(--white);
|
||||
box-shadow: 4px 5px 20px -6px var(--black-alpha-5);
|
||||
border: 1px solid var(--truegray-alpha-4);
|
||||
transition: opacity .25s;
|
||||
border-top: none;
|
||||
}
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
padding-right: .75em;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
background-color: hsla(0, 0%, 50%, .1);
|
||||
background-color: var(--truegray-alpha-1);
|
||||
}
|
||||
|
||||
#search-replace-dialog [data-type="content"] {
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
padding: .25rem .25rem .25rem .5rem;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background-color: white;
|
||||
background-color: var(--white);
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
color: currentColor; /* use the current theme's color instead of UserAgent's CSS */
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
border-color: hsla(180, 100%, 30%, .5);
|
||||
border-color: var(--darkcyan-alpha-5);
|
||||
border-style: none none solid none;
|
||||
border-width: 4px;
|
||||
}
|
||||
|
|
@ -160,11 +160,11 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: hsla(0, 0%, 100%, .75);
|
||||
background-color: var(--white-alpha-75);
|
||||
}
|
||||
|
||||
#search-replace-dialog [data-type="status"] {
|
||||
background-color: hsla(0, 0%, 50%, .2);
|
||||
background-color: var(--truegray-alpha-2);
|
||||
padding-top: 2px;
|
||||
padding-left: .5rem;
|
||||
display: flex;
|
||||
|
|
@ -181,17 +181,33 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
/*********** CodeMirror ****************/
|
||||
|
||||
.search-target-editor {
|
||||
outline: 1px solid darkorange;
|
||||
/*********** CodeMirror search. Shouldn't need variables ****************/
|
||||
body.find-open .search-target-editor {
|
||||
outline-color: darkorange !important;
|
||||
}
|
||||
|
||||
#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;
|
||||
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) {
|
||||
#search-replace-dialog {
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -753,8 +753,14 @@ onDOMready().then(() => {
|
|||
function makeTargetVisible(element) {
|
||||
const old = $('.' + TARGET_CLASS);
|
||||
if (old !== element) {
|
||||
if (old) old.classList.remove(TARGET_CLASS);
|
||||
if (element) element.classList.add(TARGET_CLASS);
|
||||
if (old) {
|
||||
old.classList.remove(TARGET_CLASS);
|
||||
document.body.classList.remove('find-open');
|
||||
}
|
||||
if (element) {
|
||||
element.classList.add(TARGET_CLASS);
|
||||
document.body.classList.add('find-open');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user