Autodetect browser engine and hide instructions for other engines.

README.md

@@ -6,13 +6,15 @@ Previously developed by [aeosynth](https://github.com/aeosynth/4chan-x), [Mayhem
 If you're looking for a maintained fork of OneeChan (a style script used in addition to 4chan X), try
 https://github.com/Nebukazar/OneeChan.
 
-## Firefox
+## Install
+
+### Firefox
 Install [Greasemonkey](https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/), then **[click here to install 4chan X](https://ccd0.github.io/4chan-x/builds/4chan-X.user.js)**.
 
 - **Pale Moon** users should use [Greasemonkey 1.15](https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/versions/1.15.1-signed).
 - **SeaMonkey** users should use Greasemonkey 2.3 converted with [this tool](http://addonconverter.fotokraina.com/?url=https://addons.mozilla.org/firefox/downloads/file/282084/greasemonkey-2.3-fx.xpi).
 
-## Chromium
+### Chromium
 4chan X is available as a Chrome extension. The Chrome extension has the additional feature of being able to sync your settings and data with other devices via Chrome Sync.
 
 - **Chromium**, **Chrome**, and **Vivaldi** users can **[install 4chan X from the Chrome store](https://chrome.google.com/webstore/detail/4chan-x/ohnjgmpcibpbafdlkimncjhflgedgpam)**.
@@ -21,10 +23,10 @@ Install [Greasemonkey](https://addons.mozilla.org/en-US/firefox/addon/greasemonk
 
 It is also possible to use the [userscript version of 4chan X](https://ccd0.github.io/4chan-x/builds/4chan-X.user.js) with [Tampermonkey](https://tampermonkey.net/).
 
-## Safari
+### Safari
 Install [JS Blocker](http://jsblocker.toggleable.com/), then **[click here to install 4chan X](https://ccd0.github.io/4chan-x/builds/4chan-X.user.js)**.
 
-## WebKitGTK+
+### WebKitGTK+
 Several WebKitGTK+ based browsers have support for userscripts and can run 4chan X. Due to the lack of the cross-site GM_* API, and lack of support for userscripts in iframes, not all features will work. You may experience crashes when repeatedly solving the default image-based captchas. You can avoid this problem by enabling `Use Recaptcha v1` in your settings.
 
 - **dwb**: Install the userscripts extension, then save the [script](https://ccd0.github.io/4chan-x/builds/4chan-X.user.js) to the `$XDG_CONFIG_HOME/dwb/greasemonkey` or `$HOME/.config/dwb/greasemonkey` directory (creating it if necessary):

template.jst

@@ -16,7 +16,14 @@
 </div>
 </div>
 <a class="screenshot" href="img/screenshot.png"><img src="img/screenshot.png" alt="Screenshot"></a>
-<%= content.match(/<\/h1>([^]*)<h2 id="more-information"/)[1] %>
+<%=
+content
+  .match(/<\/h1>([^]*)<h2 id="more-information"/)[1]
+  .replace(
+    /(<h3 id="(.*?)">.*?<\/h3>)([^]*?)(?=<h)/g,
+    '<input hidden type="checkbox" id="$2-hide"><div><label for="$2-hide">$1</label>$3</div>'
+  )
+%>
 <script>
 function imagePreview() {
   this.removeEventListener('mouseover', imagePreview, false);
@@ -42,5 +49,16 @@ for (var i = 0; i < document.links.length; i++) {
     link.addEventListener('click', storeInstall, false);
   }
 }
+var engine = (function() {
+  if (/Chrome\//.test(navigator.userAgent)) return 'blink';
+  if (/WebKit\//.test(navigator.userAgent)) return 'webkit';
+  if (/Gecko\/|Goanna/.test(navigator.userAgent)) return 'gecko';
+})();
+if (engine) {
+  var engines = {'firefox': 'gecko', 'chromium': 'blink', 'safari': 'webkit', 'webkitgtk-': 'webkit'};
+  for (browser in engines) {
+    document.getElementById(browser + '-hide').checked = (engine !== engines[browser]);
+  }
+}
 </script>
 </body></html>

web.css

@@ -84,6 +84,17 @@ span.hover > img {
     z-index: 1;
   }
 }
-h2 ~ p, h2 ~ p + ul {
+h2 ~ p, h2 ~ p + ul, input + div, div > label ~ * {
   margin-left: 1em;
 }
+input + div {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 1em;
+}
+h3 {
+  display: inline;
+}
+input:checked + div > :not(label) {
+  display: none;
+}