Simplify theme settings

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

@@ -1,7 +1,8 @@
 // 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, CURRENT_THEME_SETTING_VERSION */
+/* global getTheme, getPreferredDarkTheme, getPreferredLightTheme */
 
 "use strict";
 
@@ -12,10 +13,9 @@
         updateLocalStorage(settingName, value);
 
         switch (settingName) {
-            case "theme":
+            case `theme${CURRENT_THEME_SETTING_VERSION}`:
             case "preferred-dark-theme":
             case "preferred-light-theme":
-            case "use-system-theme":
                 updateSystemTheme();
                 updateLightAndDark();
                 break;
@@ -38,19 +38,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();
@@ -95,6 +93,13 @@
         });
     }
 
+    function getOr(obj, property, or) {
+        if (obj[property] !== undefined) {
+            return obj[property];
+        }
+        return or;
+    }
+
     /**
      * This function builds the sections inside the "settings page". It takes a `settings` list
      * as argument which describes each setting and how to render it. It returns a string
@@ -110,21 +115,23 @@
         for (const setting of settings) {
             output += "<div class=\"setting-line\">";
             const js_data_name = setting["js_name"];
+            const js_data_version = getOr(setting, "js_name_version", "");
             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">\
-                           <input type="radio" name="${js_data_name}" \
-                                id="${js_data_name}-${option}" value="${option}"${checked}>\
+                    output += `<label for="${js_data_name}-${optionAttr}" class="choice">\
+                           <input type="radio" name="${js_data_name}${js_data_version}" \
+                               id="${js_data_name}-${optionAttr}" value="${optionAttr}"${checked}>\
                            <span>${option}</span>\
-                         </label>`;
+                        </label>`;
                 });
                 output += "</div></div>";
             } else {
@@ -149,27 +156,23 @@
     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,
+                "js_name_version": CURRENT_THEME_SETTING_VERSION,
+                "default": getTheme(),
+                "options": themes.concat("system preference"),
             },
             {
                 "name": "Preferred light theme",
                 "js_name": "preferred-light-theme",
-                "default": "light",
+                "default": getPreferredLightTheme(),
                 "options": themes,
             },
             {
                 "name": "Preferred dark theme",
                 "js_name": "preferred-dark-theme",
-                "default": "dark",
+                "default": getPreferredDarkTheme(),
                 "options": themes,
             },
             {

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

@@ -5,14 +5,14 @@
 // the page, so we don't see major layout changes during the load of the page.
 "use strict";
 
-const darkThemes = ["dark", "ayu"];
 window.currentTheme = document.getElementById("themeStyle");
 window.mainTheme = document.getElementById("mainThemeStyle");
 
 // WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY
 // If you update this line, then you also need to update the two media queries with the same
 // warning in rustdoc.css
 window.RUSTDOC_MOBILE_BREAKPOINT = 701;
+const CURRENT_THEME_SETTING_VERSION = "2";
 
 const settingsDataset = (function() {
     const settingsElement = document.getElementById("default-settings");
@@ -42,7 +42,38 @@ function getSettingValue(settingName) {
     return null;
 }
 
-const localStoredTheme = getSettingValue("theme");
+function isUsingSystemTheme() {
+    const current = getTheme();
+    return current === null || current === "system-preference";
+}
+
+function valueOr(value, or) {
+    if (value !== null) {
+        return value;
+    }
+    return or;
+}
+
+function getTheme() {
+    const current = getSettingValue(`theme${CURRENT_THEME_SETTING_VERSION}`);
+    if (current === null) {
+        // We try to get what's being used in the previous version.
+        const isUsingSystemTheme = getSettingValue("use-system-theme");
+        if (isUsingSystemTheme === "true") {
+            return "system-preference";
+        }
+        return valueOr(getSettingValue("theme"), "system-preference");
+    }
+    return current;
+}
+
+function getPreferredDarkTheme() {
+    return valueOr(getSettingValue("preferred-dark-theme"), "dark");
+}
+
+function getPreferredLightTheme() {
+    return valueOr(getSettingValue("preferred-light-theme"), "light");
+}
 
 const savedHref = [];
 
@@ -157,22 +188,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 +208,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") {
-            const lightTheme = getSettingValue("preferred-light-theme") || "light";
-            const darkTheme = getSettingValue("preferred-dark-theme") || "dark";
+        if (isUsingSystemTheme()) {
+            const lightTheme = getPreferredLightTheme();
+            const darkTheme = getPreferredDarkTheme();
 
             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(getTheme(), true);
         }
     }
 
@@ -226,20 +241,12 @@ function switchToSavedTheme() {
     switchTheme(
         window.currentTheme,
         window.mainTheme,
-        getSettingValue("theme") || "light",
+        getTheme() || "light",
         false
     );
 }
 
-if (getSettingValue("use-system-theme") !== "false" && 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
-        && getSettingValue("preferred-dark-theme") === null
-        && darkThemes.indexOf(localStoredTheme) >= 0) {
-        updateLocalStorage("preferred-dark-theme", localStoredTheme);
-    }
-
+if (isUsingSystemTheme() && window.matchMedia) {
     // call the function to initialize the theme at least once!
     updateSystemTheme();
 } else {

src/test/rustdoc-gui/anchors.goml

@@ -5,7 +5,7 @@ goto: file://|DOC_PATH|/staged_api/struct.Foo.html
 show-text: true
 
 // Set the theme to light.
-local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "light"}
 // We reload the page so the local storage settings are being used.
 reload:
 
@@ -56,7 +56,7 @@ assert-css: ("#title-for-struct-impl-item-doc", {"margin-left": "0px"})
 //
 // We do the same checks with the dark theme now.
 //
-local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "dark"}
 goto: file://|DOC_PATH|/staged_api/struct.Foo.html
 
 assert-css: ("#toggle-all-docs", {"color": "rgb(221, 221, 221)"})
@@ -106,7 +106,7 @@ assert-css: ("#title-for-struct-impl-item-doc", {"margin-left": "0px"})
 //
 // We do the same checks with the ayu theme now.
 //
-local-storage: {"rustdoc-theme": "ayu", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "ayu"}
 goto: file://|DOC_PATH|/staged_api/struct.Foo.html
 
 assert-css: ("#toggle-all-docs", {"color": "rgb(197, 197, 197)"})

src/test/rustdoc-gui/code-color.goml

@@ -6,23 +6,23 @@ goto: file://|DOC_PATH|/test_docs/fn.foo.html
 // If the text isn't displayed, the browser doesn't compute color style correctly...
 show-text: true
 // Set the theme to dark.
-local-storage: {"rustdoc-theme": "dark", "rustdoc-preferred-dark-theme": "dark", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "dark"}
 // We reload the page so the local storage settings are being used.
 reload:
 
 assert-css: (".docblock pre > code", {"color": "rgb(221, 221, 221)"}, ALL)
 assert-css: (".docblock > p > code", {"color": "rgb(221, 221, 221)"}, ALL)
 
 // Set the theme to ayu.
-local-storage: {"rustdoc-theme": "ayu", "rustdoc-preferred-dark-theme": "ayu", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "ayu"}
 // We reload the page so the local storage settings are being used.
 reload:
 
 assert-css: (".docblock pre > code", {"color": "rgb(230, 225, 207)"}, ALL)
 assert-css: (".docblock > p > code", {"color": "rgb(255, 180, 84)"}, ALL)
 
 // Set the theme to light.
-local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "light"}
 // We reload the page so the local storage settings are being used.
 reload:
 

src/test/rustdoc-gui/docblock-details.goml

@@ -1,7 +1,7 @@
 // This ensures that the `<details>`/`<summary>` elements are displayed as expected.
 goto: file://|DOC_PATH|/test_docs/details/struct.Details.html
 show-text: true
-local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "dark"}
 reload:
 
 // We first check that the headers in the `.top-doc` doc block still have their

src/test/rustdoc-gui/headers-color.goml

@@ -5,11 +5,7 @@ goto: file://|DOC_PATH|/test_docs/struct.Foo.html
 show-text: true
 
 // Ayu theme
-local-storage: {
-    "rustdoc-theme": "ayu",
-    "rustdoc-preferred-dark-theme": "ayu",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "ayu"}
 reload:
 
 assert-css: (
@@ -44,11 +40,7 @@ goto: file://|DOC_PATH|/test_docs/struct.HeavilyDocumentedStruct.html
 assert-css: (".docblock > :not(p) > a", {"color": "rgb(57, 175, 215)"}, ALL)
 
 // Dark theme
-local-storage: {
-    "rustdoc-theme": "dark",
-    "rustdoc-preferred-dark-theme": "dark",
-    "rustdoc-use-system-theme": "false",
-}
+local-storage: {"rustdoc-theme2": "dark"}
 goto: file://|DOC_PATH|/test_docs/struct.Foo.html
 
 assert-css: (
@@ -83,7 +75,7 @@ goto: file://|DOC_PATH|/test_docs/struct.HeavilyDocumentedStruct.html
 assert-css: (".docblock > :not(p) > a", {"color": "rgb(210, 153, 29)"}, ALL)
 
 // Light theme
-local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "light"}
 reload:
 
 goto: file://|DOC_PATH|/test_docs/struct.Foo.html

src/test/rustdoc-gui/headings.goml

@@ -152,7 +152,7 @@ assert-css: ("h3#top-doc-prose-sub-heading", {"border-bottom-width": "1px"})
 
 // Checking colors now.
 show-text: true
-local-storage: {"rustdoc-theme": "light", "rustdoc-use-system-theme": "false"}
+local-storage: {"rustdoc-theme2": "light"}
 goto: file://|DOC_PATH|/test_docs/struct.HeavilyDocumentedStruct.html
 assert-css: (
     ".top-doc .docblock h2",
@@ -183,7 +183,7 @@ assert-css: (
     {"color": "rgb(0, 0, 0)", "border-bottom": "0px none rgb(221, 221, 221)"},
 )
 
-local-storage: {"rustdoc-theme": "dark"}
+local-storage: {"rustdoc-theme2": "dark"}
 reload:
 assert-css: (
     ".top-doc .docblock h2",
@@ -214,7 +214,7 @@ assert-css: (
     {"color": "rgb(221, 221, 221)", "border-bottom": "0px none rgb(210, 210, 210)"},
 )
 
-local-storage: {"rustdoc-theme": "ayu"}
+local-storage: {"rustdoc-theme2": "ayu"}
 reload:
 assert-css: (
     ".top-doc .docblock h2",
@@ -245,14 +245,14 @@ assert-css: (
     {"color": "rgb(197, 197, 197)", "border-bottom": "0px none rgb(92, 103, 115)"},
 )
 
-local-storage: {"rustdoc-theme": "light"}
+local-storage: {"rustdoc-theme2": "light"}
 goto: file://|DOC_PATH|/staged_api/struct.Foo.html
 assert-css: (".since", {"color": "rgb(128, 128, 128)"}, ALL)
 
-local-storage: {"rustdoc-theme": "dark"}
+local-storage: {"rustdoc-theme2": "dark"}
 reload:
 assert-css: (".since", {"color": "rgb(128, 128, 128)"}, ALL)
 
-local-storage: {"rustdoc-theme": "ayu"}
+local-storage: {"rustdoc-theme2": "ayu"}
 reload:
 assert-css: (".since", {"color": "rgb(128, 128, 128)"}, ALL)