Simplify "system theme" handling

Author: GuillaumeGomez

src/librustdoc/html/static/js/settings.js

@@ -1,7 +1,7 @@
 // Local js definitions:
 /* global getSettingValue, getVirtualKey, updateLocalStorage, updateSystemTheme */
 /* global addClass, removeClass, onEach, onEachLazy, blurHandler, elemIsInParent */
-/* global MAIN_ID, getVar, getSettingsButton */
+/* global MAIN_ID, getVar, getSettingsButton, isUsingSystemTheme */
 
 "use strict";
 
@@ -15,7 +15,6 @@
             case "theme":
             case "preferred-dark-theme":
             case "preferred-light-theme":
-            case "use-system-theme":
                 updateSystemTheme();
                 updateLightAndDark();
                 break;
@@ -38,19 +37,17 @@
     }
 
     function showLightAndDark() {
-        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, "hidden");
         addClass(document.getElementById("preferred-dark-theme").parentElement, "hidden");
-        removeClass(document.getElementById("theme").parentElement, "hidden");
     }
 
     function updateLightAndDark() {
-        if (getSettingValue("use-system-theme") !== "false") {
+        if (isUsingSystemTheme()) {
             showLightAndDark();
         } else {
             hideLightAndDark();
@@ -113,18 +110,19 @@
             const setting_name = setting["name"];
 
             if (setting["options"] !== undefined) {
-                // This is a select setting.
+                // This is a <select> setting.
                 output += `<div class="radio-line" id="${js_data_name}">\
                         <span class="setting-name">${setting_name}</span>\
                         <div class="choices">`;
                 onEach(setting["options"], option => {
-                    const checked = option === setting["default"] ? " checked" : "";
+                    const optionAttr = option.split(" ").join("-");
+                    const checked = optionAttr === setting["default"] ? " checked" : "";
 
-                    output += `<label for="${js_data_name}-${option}" class="choice">\
+                    output += `<label for="${js_data_name}-${optionAttr}" class="choice">\
                            <input type="radio" name="${js_data_name}" \
-                                id="${js_data_name}-${option}" value="${option}"${checked}>\
+                                id="${js_data_name}-${optionAttr}" value="${optionAttr}"${checked}>\
                            <span>${option}</span>\
-                         </label>`;
+                        </label>`;
                 });
                 output += "</div></div>";
             } else {
@@ -149,16 +147,11 @@
     function buildSettingsPage() {
         const themes = getVar("themes").split(",");
         const settings = [
-            {
-                "name": "Use system theme",
-                "js_name": "use-system-theme",
-                "default": true,
-            },
             {
                 "name": "Theme",
                 "js_name": "theme",
-                "default": "light",
-                "options": themes,
+                "default": "",
+                "options": themes.concat("system preference"),
             },
             {
                 "name": "Preferred light theme",

src/librustdoc/html/static/js/storage.js

@@ -42,6 +42,11 @@ function getSettingValue(settingName) {
     return null;
 }
 
+function isUsingSystemTheme() {
+    const current = getSettingValue("theme");
+    return current === null || current === "system-preference";
+}
+
 const localStoredTheme = getSettingValue("theme");
 
 const savedHref = [];
@@ -157,22 +162,6 @@ function switchTheme(styleElem, mainStyleElem, newTheme, saveTheme) {
     }
 }
 
-// This function is called from "main.js".
-// eslint-disable-next-line no-unused-vars
-function useSystemTheme(value) {
-    if (value === undefined) {
-        value = true;
-    }
-
-    updateLocalStorage("use-system-theme", value);
-
-    // update the toggle if we're on the settings page
-    const toggle = document.getElementById("use-system-theme");
-    if (toggle && toggle instanceof HTMLInputElement) {
-        toggle.checked = value;
-    }
-}
-
 const updateSystemTheme = (function() {
     if (!window.matchMedia) {
         // fallback to the CSS computed value
@@ -193,25 +182,25 @@ const updateSystemTheme = (function() {
     const mql = window.matchMedia("(prefers-color-scheme: dark)");
 
     function handlePreferenceChange(mql) {
-        const use = theme => {
-            switchTheme(window.currentTheme, window.mainTheme, theme, true);
+        const use = (theme, saveIt) => {
+            switchTheme(window.currentTheme, window.mainTheme, theme, saveIt);
         };
         // maybe the user has disabled the setting in the meantime!
-        if (getSettingValue("use-system-theme") !== "false") {
+        if (isUsingSystemTheme()) {
             const lightTheme = getSettingValue("preferred-light-theme") || "light";
             const darkTheme = getSettingValue("preferred-dark-theme") || "dark";
 
             if (mql.matches) {
-                use(darkTheme);
+                use(darkTheme, false);
             } else {
                 // prefers a light theme, or has no preference
-                use(lightTheme);
+                use(lightTheme, false);
             }
             // note: we save the theme so that it doesn't suddenly change when
             // the user disables "use-system-theme" and reloads the page or
             // navigates to another page
         } else {
-            use(getSettingValue("theme"));
+            use(getSettingValue("theme"), true);
         }
     }
 
@@ -231,10 +220,10 @@ function switchToSavedTheme() {
     );
 }
 
-if (getSettingValue("use-system-theme") !== "false" && window.matchMedia) {
+if (isUsingSystemTheme() && window.matchMedia) {
     // update the preferred dark theme if the user is already using a dark theme
     // See https://github.com/rust-lang/rust/pull/77809#issuecomment-707875732
-    if (getSettingValue("use-system-theme") === null
+    if (getSettingValue("theme") === null
         && getSettingValue("preferred-dark-theme") === null
         && darkThemes.indexOf(localStoredTheme) >= 0) {
         updateLocalStorage("preferred-dark-theme", localStoredTheme);