Rollup merge of #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)

1 files changed, 35 insertions, 40 deletions

diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs
index c3edefc4698..32e4a829184 100644
--- a/src/librustdoc/html/render/mod.rs
+++ b/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>",