Move the auto-install setting to the offline page

Both offline settings now sit together above the offline docs table,
instead of one on the preferences page and one on the offline page.

Author: simon04

assets/javascripts/templates/pages/offline_tmpl.js

@@ -17,11 +17,18 @@ export const offlinePage = (docs, hasPersistence, isPersistent) => `\
 <h1 class="_lined-heading">Offline Documentation</h1>
 
 <div class="_docs-tools">
-  <label>
-    <input type="checkbox" name="autoUpdate" value="1" ${
-      app.settings.get("manualUpdate") ? "" : "checked"
-    }>Install updates automatically
-  </label>
+  <div class="_docs-options">
+    <label title="Only enable this when bandwidth isn't a concern to you.">
+      <input type="checkbox" name="autoInstall" value="1" ${
+        app.settings.get("autoInstall") ? "checked" : ""
+      }>Automatically install enabled documentation for offline use
+    </label>
+    <label>
+      <input type="checkbox" name="autoUpdate" value="1" ${
+        app.settings.get("manualUpdate") ? "" : "checked"
+      }>Automatically install updates of offline documentation
+    </label>
+  </div>
   <div class="_docs-links">
     <button type="button" class="_btn-link" data-action-all="install" title="Download every enabled documentation for offline use">Install all</button><button type="button" class="_btn-link" data-action-all="update" title="Download the current version of every outdated documentation"><strong>Update all</strong></button><button type="button" class="_btn-link" data-action-all="uninstall" title="Delete the offline data of every installed documentation">Uninstall all</button><button type="button" class="_btn-link _show" data-export-docs title="Save the installed documentations to a file, to restore them later or on another computer">Export all</button><label class="_btn-link _file-btn _show" title="Restore documentations from a previously exported file">Import<input type="file" name="importDocs" accept="application/json,.json"></label>
   </div>

assets/javascripts/templates/pages/settings_tmpl.js

@@ -67,12 +67,6 @@ export const settingsPage = (settings) => `\
         settings.noAutofocus ? " checked" : ""
       }>Disable autofocus of search input
     </label>
-    <label class="_settings-label">
-      <input type="checkbox" form="settings" name="autoInstall" value="_auto-install"${
-        settings.autoInstall ? " checked" : ""
-      }>Automatically download documentation for offline use
-      <small>Only enable this when bandwidth isn't a concern to you.</small>
-    </label>
     <label class="_settings-label">
       <input type="checkbox" form="settings" name="autoLatestVersion" value="_auto-latest-version"${
         settings.autoLatestVersion ? " checked" : ""

assets/javascripts/views/content/offline_page.js

@@ -191,6 +191,8 @@ export class OfflinePage extends View {
   onChange(event) {
     if (event.target.name === "autoUpdate") {
       app.settings.set("manualUpdate", !event.target.checked);
+    } else if (event.target.name === "autoInstall") {
+      app.settings.set("autoInstall", event.target.checked);
     } else if (event.target.name === "importDocs") {
       this.importDocs(event.target);
     }

assets/javascripts/views/content/settings_page.js

@@ -34,7 +34,6 @@ export class SettingsPage extends View {
     settings.smoothScroll = !app.settings.get("fastScroll");
     settings.arrowScroll = app.settings.get("arrowScroll");
     settings.noAutofocus = app.settings.get("noAutofocus");
-    settings.autoInstall = app.settings.get("autoInstall");
     settings.autoLatestVersion = app.settings.get("autoLatestVersion");
     settings.analyticsConsent = app.settings.get("analyticsConsent");
     settings.spaceScroll = app.settings.get("spaceScroll");

assets/stylesheets/components/_content.scss

@@ -283,6 +283,8 @@
   }
 }
 
+._docs-options > label { display: block; }
+
 ._docs-links {
   -ms-flex: 0 0 auto;
       flex: 0 0 auto;