Advanced options toggle (#238)

* Advanced options toggle

Whole div is clickable. Arrows to indicate functions. I went with carets and centered collapsed text, but we can use different arrow and/or keep the text to the left.

* advanced options toggle

* advanced options toggle

* Only apply to Chrome

* Delete options.css

* Delete options.js

* Only apply to Chrome

* Only apply to Chrome

* Fix label

* Fix label again

options.html

@@ -113,8 +113,17 @@
       </div>
     </div>
 
-    <div class="block collapsible" id="advanced">
+    <div class="block" id="advanced">
-      <h1 i18n-text="optionsAdvanced"></h1>
+	  <div class="collapsible-resizer">
+        <h1 i18n-text="optionsAdvanced">
+          <svg class="svg-icon is-collapsed" viewBox="0 0 1792 1792">
+            <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
+          </svg>
+		  <svg class="svg-icon is-expanded" viewBox="0 0 1792 1792">
+            <path fill-rule="evenodd" d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
+          </svg>  	  
+        </h1>
+      </div>
       <div class="items">
         <label>
           <span i18n-text="optionsAdvancedNewStyleAsUsercss"></span>

options/options.css

@@ -180,6 +180,80 @@ input[type="color"] {
   display: none;
 }
 
+#advanced.collapsible.collapsed {
+  height: 40px;
+  padding: 0;
+  margin: 0;
+  justify-content: center;
+}
+
+html:not(.firefox):not(.opera) #options > .block:nth-last-of-type(3) {
+  margin-bottom: 0;
+}
+
+#advanced.collapsible:not(.collapsed) .collapsible-resizer, #advanced:not(.collapsible) .collapsible-resizer {
+  padding-right: 8px;
+  box-sizing: border-box;
+  width: 30%;
+}
+
+#advanced.collapsible h1 {
+  width: unset;
+  padding: 0;
+  color: #333;
+  transition: color .5s;
+  display: inline-flex;
+  align-items: center;
+}
+
+#advanced:not(.collapsible) .collapsible-resizer h1 {
+  width: unset;
+  padding: 0;
+  display: inline-flex;
+}
+
+#advanced.collapsible:not(.collapsed) h1:hover {
+  color: #666;
+}
+
+#advanced.collapsible.collapsed h1 {
+  padding: 0;
+  color: #666;
+}
+
+#advanced.collapsible.collapsed:hover h1 {
+  color: #333;
+}
+
+#advanced.collapsible .svg-icon {
+  fill: #333;
+  transition: fill .5s;
+  height: 16px;
+  width: 16px;
+}
+
+#advanced.collapsible.collapsed .svg-icon,
+#advanced.collapsible:not(.collapsed) h1:hover .svg-icon {
+  fill: #666;
+}
+
+#advanced.collapsible.collapsed:hover .svg-icon {
+  fill: #333;
+}
+
+#advanced.collapsible h1 .svg-icon {
+  margin-left: 2px;
+}
+
+#advanced.collapsible.collapsed .is-expanded,
+#advanced:not(.collapsible) .svg-icon {
+  display: none;
+}
+
+#advanced.collapsible:not(.collapsed) .is-collapsed {
+  display: none;
+}
+
 #notes {
   background-color: #f4f4f4;
   padding: 1.5ex 16px 1ex calc(16px + 2ex);

options/options.js

@@ -6,7 +6,7 @@ enforceInputRange($('#popupWidth'));
 
 if (!FIREFOX && !OPERA) {
   const block = $('#advanced');
-  block.classList.add('collapsed');
+  block.classList.add('collapsible', 'collapsed');
   block.onclick = event => {
     if (block.classList.contains('collapsed') || event.target.closest('h1')) {
       block.classList.toggle('collapsed');