linter report expands/collapses on click; the state is saved

edit.html

@@ -235,7 +235,16 @@
           </span>
         </div>
       </details>
-      <section id="lint"><h2 i18n-text="linterIssues">: <span id="issue-count"></span><svg id="lint-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2><div></div></section>
+      <details id="lint">
+        <summary>
+          <h2 i18n-text="linterIssues">: <span id="issue-count"></span><!-- EAT SPACE
+          --><svg id="lint-help" class="svg-icon info intercepts-click">
+              <use xlink:href="#svg-icon-help"/>
+            </svg>
+          </h2>
+        </summary>
+        <div></div>
+      </details>
     </div>
     <section id="sections">
       <h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span><svg id="sections-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2>

edit/edit.css

@@ -119,16 +119,24 @@ input:invalid {
   margin-right: 0.5rem;
   margin-bottom: 0.5rem;
 }
-/* options */
+/* collapsibles */
-#options summary {
+#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 {
+  #options:not([open]) + #lint h2 {
-    display: block;
-    cursor: default;
     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%;
   }

edit/edit.js

@@ -1434,14 +1434,26 @@ function addSections(sections, onAdded = () => {}) {
   }
 }
 
-function setupOptionsExpand() {
+function initCollapsibles() {
-  $('#options').open = prefs.get('editor.options.expanded');
+  function saveStateDelayed(event) {
-  $('#options h2').addEventListener('click', () => {
+    if (event.target.closest('.intercepts-click')) {
-    setTimeout(() => prefs.set('editor.options.expanded', $('#options').open));
+      event.preventDefault();
-  });
+    } else {
-  prefs.subscribe(['editor.options.expanded'], (key, value) => {
+      setTimeout(saveState, 0, event.target.closest('details'));
-    $('#options').open = value;
+    }
-  });
+  }
+  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) {

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(() => {

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