Rollup merge of rust-lang#93251 - jsha:theme-radio, r=GuillaumeGomez

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.

Demo: https://rustdoc.crud.net/jsha/theme-radio/settings.html

r? `@GuillaumeGomez`

New:

![image](https://user-images.githubusercontent.com/220205/150702647-4826d525-54fa-439a-b24c-6d5bca6f95bf.png)

Old:

![image](https://user-images.githubusercontent.com/220205/150702669-6a4214ed-1dab-4fee-b1aa-59acfce3dbca.png)

Author: matthiaskrgr

src/librustdoc/html/render/mod.rs

@@ -376,25 +376,21 @@ impl Setting {
                 description,
             ),
             Setting::Select { js_data_name, description, default_value, ref options } => format!(
-                "<div class=\"setting-line\">\
-                     <div>{}</div>\
-                     <label class=\"select-wrapper\">\
-                         <select id=\"{}\" autocomplete=\"off\">{}</select>\
-                         <img src=\"{}down-arrow{}.svg\" alt=\"Select item\">\
-                     </label>\
-                 </div>",
-                description,
+                "<div class=\"setting-line\"><div class=\"radio-line\" id=\"{}\"><span class=\"setting-name\">{}</span>{}</div></div>",
                 js_data_name,
+                description,
                 options
                     .iter()
                     .map(|opt| format!(
-                        "<option value=\"{name}\" {}>{name}</option>",
-                        if opt == default_value { "selected" } else { "" },
+                        "<label for=\"{js_data_name}-{name}\" class=\"choice\">
+                           <input type=\"radio\" name=\"{js_data_name}\" id=\"{js_data_name}-{name}\" value=\"{name}\" {checked}>\
+                           {name}\
+                         </label>",
+                        js_data_name = js_data_name,
                         name = opt,
+                        checked = if opt == default_value { "checked" } else { "" },
                     ))
                     .collect::<String>(),
-                root_path,
-                suffix,
             ),
         }
     }
@@ -418,31 +414,25 @@ impl<T: Into<Setting>> From<(&'static str, Vec<T>)> for Setting {
 fn settings(root_path: &str, suffix: &str, theme_names: Vec<String>) -> Result<String, Error> {
     // (id, explanation, default value)
     let settings: &[Setting] = &[
-        (
-            "Theme preferences",
-            vec![
-                Setting::from(("use-system-theme", "Use system theme", true)),
-                Setting::Select {
-                    js_data_name: "theme",
-                    description: "Theme",
-                    default_value: "light",
-                    options: theme_names.clone(),
-                },
-                Setting::Select {
-                    js_data_name: "preferred-dark-theme",
-                    description: "Preferred dark theme",
-                    default_value: "dark",
-                    options: theme_names.clone(),
-                },
-                Setting::Select {
-                    js_data_name: "preferred-light-theme",
-                    description: "Preferred light theme",
-                    default_value: "light",
-                    options: theme_names,
-                },
-            ],
-        )
-            .into(),
+        Setting::from(("use-system-theme", "Use system theme", true)),
+        Setting::Select {
+            js_data_name: "theme",
+            description: "Theme",
+            default_value: "light",
+            options: theme_names.clone(),
+        },
+        Setting::Select {
+            js_data_name: "preferred-light-theme",
+            description: "Preferred light theme",
+            default_value: "light",
+            options: theme_names.clone(),
+        },
+        Setting::Select {
+            js_data_name: "preferred-dark-theme",
+            description: "Preferred dark theme",
+            default_value: "dark",
+            options: theme_names,
+        },
         ("auto-hide-large-items", "Auto-hide item contents for large items.", true).into(),
         ("auto-hide-method-docs", "Auto-hide item methods' documentation", false).into(),
         ("auto-hide-trait-implementations", "Auto-hide trait implementation documentation", false)
@@ -454,9 +444,14 @@ fn settings(root_path: &str, suffix: &str, theme_names: Vec<String>) -> Result<S
     ];
 
     Ok(format!(
-        "<h1 class=\"fqn\">\
-            <span class=\"in-band\">Rustdoc settings</span>\
-        </h1>\
+        "<div class=\"main-heading\">
+            <h1 class=\"fqn\">\
+                <span class=\"in-band\">Rustdoc settings</span>\
+            </h1>\
+            <span class=\"out-of-band\">\
+            <a id=\"back\" href=\"javascript:void(0)\">Back</a>\
+            </span>\
+        </div>\
         <div class=\"settings\">{}</div>\
         <link rel=\"stylesheet\" href=\"{root_path}settings{suffix}.css\">\
         <script src=\"{root_path}settings{suffix}.js\"></script>",

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;

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);