From df80a844699a94ddb9a50a7f2865c34c917904b3 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sat, 9 Sep 2017 17:21:17 +0300
Subject: [PATCH] options: #advanced block is collapsed by default in Chrome

* Chrome has a hardcoded limit for the options dialog height at 640px
  and it's better to avoid the vertical scrollbar on smaller displays
* Chrome users are less likely to change the weird stuff we have there
---
 options.html        |  2 +-
 options/options.css |  8 ++++++++
 options/options.js  | 10 ++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/options.html b/options.html
index 8fa9f66d..b4170af0 100644
--- a/options.html
+++ b/options.html
@@ -104,7 +104,7 @@
       </div>
     </div>
 
-    <div class="block">
+    <div class="block collapsible" id="advanced">
       <h1 i18n-text="optionsAdvanced"></h1>
       <div class="items">
         <label>
diff --git a/options/options.css b/options/options.css
index 9ccd6a7d..b00312c2 100644
--- a/options/options.css
+++ b/options/options.css
@@ -50,6 +50,14 @@ body {
   padding-bottom: 0;
 }
 
+.collapsed, .collapsible h1 {
+  cursor: pointer;
+}
+
+.collapsed .items {
+  display: none;
+}
+
 h1 {
   width: 30%;
   margin: 0;
diff --git a/options/options.js b/options/options.js
index cc84e7fc..3450af6d 100644
--- a/options/options.js
+++ b/options/options.js
@@ -4,6 +4,16 @@ setupLivePrefs();
 setupRadioButtons();
 enforceInputRange($('#popupWidth'));
 
+if (!FIREFOX && !OPERA) {
+  const block = $('#advanced');
+  block.classList.add('collapsed');
+  block.onclick = event => {
+    if (block.classList.contains('collapsed') || event.target.closest('h1')) {
+      block.classList.toggle('collapsed');
+    }
+  };
+}
+
 // actions
 document.onclick = e => {
   const target = e.target.closest('[data-cmd]');