diff --git a/edit.html b/edit.html
index 2f20f8ee..9ade64b6 100644
--- a/edit.html
+++ b/edit.html
@@ -235,7 +235,16 @@
-
+
+
+ :
+
+
+
+
diff --git a/edit/edit.css b/edit/edit.css
index a550a8e5..b7272f9a 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -119,16 +119,24 @@ input:invalid {
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
-/* options */
-#options summary {
+/* collapsibles */
+#header summary {
align-items: center;
margin-left: -13px;
cursor: pointer;
outline: none;
}
-#options summary h2 {
+#header summary h2 {
display: inline-block;
+ border-bottom: 2px dotted transparent;
}
+#header summary h2:hover {
+ border-color: #bbb;
+}
+#header summary svg {
+ margin-top: -3px;
+}
+/* options */
#options [type="number"] {
width: 3.5em;
text-align: left;
@@ -620,10 +628,10 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
position: relative;
top: 0.2rem;
}
- #lint h2 {
- display: block;
- cursor: default;
+ #options:not([open]) + #lint h2 {
margin-top: 0;
+ }
+ #lint:not([open]) h2 {
margin-bottom: 0;
}
#lint > div {
@@ -632,10 +640,6 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
#lint.collapsed > div {
display: none;
}
- #lint:hover > div {
- margin-top: 1em;
- max-height: 30vh;
- }
#lint table {
width: 100%;
}
diff --git a/edit/edit.js b/edit/edit.js
index 3874540f..d25f0ff4 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -1434,14 +1434,26 @@ function addSections(sections, onAdded = () => {}) {
}
}
-function setupOptionsExpand() {
- $('#options').open = prefs.get('editor.options.expanded');
- $('#options h2').addEventListener('click', () => {
- setTimeout(() => prefs.set('editor.options.expanded', $('#options').open));
- });
- prefs.subscribe(['editor.options.expanded'], (key, value) => {
- $('#options').open = value;
- });
+function initCollapsibles() {
+ function saveStateDelayed(event) {
+ if (event.target.closest('.intercepts-click')) {
+ event.preventDefault();
+ } else {
+ setTimeout(saveState, 0, event.target.closest('details'));
+ }
+ }
+ function saveState(el) {
+ prefs.set(`editor.${el.id}.expanded`, el.open);
+ }
+ function loadState(key, value) {
+ $('#' + key.split('.')[1]).open = value;
+ }
+ const collapsibles = $$('#header details');
+ for (const el of collapsibles) {
+ el.open = prefs.get(`editor.${el.id}.expanded`);
+ $('h2', el).addEventListener('click', saveStateDelayed);
+ }
+ prefs.subscribe(collapsibles.map(el => `editor.${el.id}.expanded`), loadState);
}
function initHooks() {
@@ -1463,7 +1475,7 @@ function initHooks() {
$('#keyMap-help').addEventListener('click', showKeyMapHelp, false);
$('#cancel-button').addEventListener('click', goBackToManage);
- setupOptionsExpand();
+ initCollapsibles();
initLint();
if (!FIREFOX) {
diff --git a/edit/source-editor.js b/edit/source-editor.js
index 2ba06cfa..cda431b3 100644
--- a/edit/source-editor.js
+++ b/edit/source-editor.js
@@ -22,7 +22,7 @@ function createSourceEditor(style) {
appendChild: makeLink('https://github.com/openstyles/stylus/wiki/Usercss', t('externalUsercssDocument'))
}));
- setupOptionsExpand();
+ initCollapsibles();
const dirty = dirtyReporter();
dirty.onChange(() => {
diff --git a/js/prefs.js b/js/prefs.js
index aeeffd56..c9d6c728 100644
--- a/js/prefs.js
+++ b/js/prefs.js
@@ -30,6 +30,7 @@ var prefs = new function Prefs() {
'editor.options': {}, // CodeMirror.defaults.*
'editor.options.expanded': true, // UI element state: expanded/collapsed
+ 'editor.lint.expanded': true, // UI element state: expanded/collapsed
'editor.lineWrapping': true, // word wrap
'editor.smartIndent': true, // 'smart' indent
'editor.indentWithTabs': false, // smart indent with tabs