rustdoc settings: use radio buttons for theme

This reduces the number of clicks required to change theme.

Also, simplify the UI a bit (remove setting grouping), and add a "Back"
link close to the settings icon.

2 files changed, 43 insertions, 10 deletions

diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css
index fb8990b30e2..932000487b0 100644
--- a/src/librustdoc/html/static/css/settings.css
+++ b/src/librustdoc/html/static/css/settings.css
@@ -17,6 +17,30 @@
 	border-bottom: 1px solid;
 }
 
+.setting-line .radio-line {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.setting-line .radio-line > * {
+	padding: 0.3em;
+}
+
+.setting-line .radio-line .setting-name {
+	flex-grow: 1;
+}
+
+.setting-line .radio-line input {
+	margin-right: 0.3em;
+}
+
+.radio-line .choice {
+	border-radius: 0.1em;
+	border: 1px solid;
+	margin-left: 0.5em;
+	min-width: 3.5em;
+}
+
 .toggle {
 	position: relative;
 	display: inline-block;
diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js
index e5c7e1ea1a0..47a8fcdfd5e 100644
--- a/src/librustdoc/html/static/js/settings.js
+++ b/src/librustdoc/html/static/js/settings.js
@@ -33,19 +33,15 @@
     }
 
     function showLightAndDark() {
-        addClass(document.getElementById("theme").parentElement.parentElement, "hidden");
-        removeClass(document.getElementById("preferred-light-theme").parentElement.parentElement,
-            "hidden");
-        removeClass(document.getElementById("preferred-dark-theme").parentElement.parentElement,
-            "hidden");
+        addClass(document.getElementById("theme").parentElement, "hidden");
+        removeClass(document.getElementById("preferred-light-theme").parentElement, "hidden");
+        removeClass(document.getElementById("preferred-dark-theme").parentElement, "hidden");
     }
 
     function hideLightAndDark() {
-        addClass(document.getElementById("preferred-light-theme").parentElement.parentElement,
-            "hidden");
-        addClass(document.getElementById("preferred-dark-theme").parentElement.parentElement,
-            "hidden");
-        removeClass(document.getElementById("theme").parentElement.parentElement, "hidden");
+        addClass(document.getElementById("preferred-light-theme").parentElement, "hidden");
+        addClass(document.getElementById("preferred-dark-theme").parentElement, "hidden");
+        removeClass(document.getElementById("theme").parentElement, "hidden");
     }
 
     function updateLightAndDark() {
@@ -82,6 +78,19 @@
                 changeSetting(this.id, this.value);
             };
         });
+        onEachLazy(document.querySelectorAll("input[type=\"radio\"]"), function(elem) {
+            const settingId = elem.name;
+            const settingValue = getSettingValue(settingId);
+            if (settingValue !== null && settingValue !== "null") {
+                elem.checked = settingValue === elem.value;
+            }
+            elem.addEventListener("change", function(ev) {
+                changeSetting(ev.target.name, ev.target.value);
+            });
+        });
+        document.getElementById("back").addEventListener("click", function() {
+            history.back();
+        });
     }
 
     window.addEventListener("DOMContentLoaded", setEvents);