edit
This commit is contained in:
parent
dbc26c2901
commit
586ad8aad7
|
@ -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(() => {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
113
edit/edit.css
113
edit/edit.css
|
@ -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;
|
||||||
|
@ -27,7 +36,7 @@ body {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/************ checkbox & select************/
|
/************ checkbox & select ************/
|
||||||
.options-column > div[class="option"] {
|
.options-column > div[class="option"] {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
@ -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
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 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')
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user