editor: toggle #options block upon clicking its title

edit.html

@@ -144,8 +144,8 @@
           <button id="to-mozilla" i18n-text="exportLabel"></button>
         </div>
       </section>
-      <section id="options">
-        <h2 id="options-heading" i18n-text="optionsHeading"></h2>
+      <details id="options">
+        <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
         <div class="option">
           <input id="editor.lineWrapping" type="checkbox">
           <label id="lineWrapping-label" for="editor.lineWrapping" i18n-text="cm_lineWrapping"></label>
@@ -195,7 +195,8 @@
               <use xlink:href="#svg-icon-settings"/>
             </svg>&nbsp;
           </span>
-      </section>
+        </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>
     </div>
     <section id="sections">

edit/edit.css

@@ -118,6 +118,15 @@ h2 .svg-icon, label .svg-icon {
   margin-bottom: 0.5rem;
 }
 /* options */
+#options summary {
+  align-items: center;
+  margin-left: -13px;
+  cursor: pointer;
+  outline: none;
+}
+#options summary h2 {
+  display: inline-block;
+}
 #options [type="number"] {
   max-width: 2.5rem;
   text-align: right;

edit/edit.js

@@ -1282,7 +1282,7 @@ function beautify(event) {
   }
 }
 
-document.addEventListener('DOMContentLoaded', init);
+onDOMready().then(init);
 
 function init() {
   initCodeMirror();
@@ -1395,6 +1395,11 @@ function initHooks() {
   $('#sections-help').addEventListener('click', showSectionHelp, false);
   $('#keyMap-help').addEventListener('click', showKeyMapHelp, false);
   $('#cancel-button').addEventListener('click', goBackToManage);
+  $('#options').open = prefs.get('editor.options.expanded');
+  $('#options h2').addEventListener('click', () => {
+    setTimeout(() => prefs.set('editor.options.expanded', $('#options').open));
+  });
+
   initLint();
 
   if (!FIREFOX) {

js/prefs.js

@@ -25,6 +25,7 @@ var prefs = new function Prefs() {
     'manage.newUI.targets': 3,      // max number of applies-to targets visible: 0 = none
 
     'editor.options': {},           // CodeMirror.defaults.*
+    'editor.options.expanded': true,// UI element state: expanded/collapsed
     'editor.lineWrapping': true,    // word wrap
     'editor.smartIndent': true,     // 'smart' indent
     'editor.indentWithTabs': false, // smart indent with tabs