Rollup merge of #92629 - jsha:theme-picker-local-only-2, r=GuillaumeGomez

Pick themes on settings page, not every page

This hides the paintbrush icon on most pages by default, in preference for the settings on the settings page.  When loading from a local file, and not in mobile view, continue to show the theme picker. That's because some browsers limit access to localStorage from file:/// URLs, so choosing a theme from settings.html doesn't take effect.

Fixes #84539
Part of #59840

r? `@GuillaumeGomez`

Demo: https://rustdoc.crud.net/jsha/theme-picker-local-only-2/std/io/trait.Read.html

Author: matthiaskrgr

src/librustdoc/html/render/mod.rs

@@ -422,6 +422,12 @@ fn settings(root_path: &str, suffix: &str, theme_names: Vec<String>) -> Result<S
             "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",

src/librustdoc/html/static/css/rustdoc.css

@@ -1766,6 +1766,12 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		padding-top: 0px;
 	}
 
+	/* Space is at a premium on mobile, so remove the theme-picker icon. */
+	#theme-picker {
+		display: none;
+		width: 0;
+	}
+
 	.rustdoc {
 		flex-direction: column;
 	}
@@ -1884,12 +1890,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		height: 100%;
 	}
 
-	nav.sub {
-		width: calc(100% - 32px);
-		margin-left: 32px;
-		margin-bottom: 10px;
-	}
-
 	.source nav:not(.sidebar).sub {
 		margin-left: 32px;
 	}
@@ -2086,11 +2086,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		border: 0;
 	}
 
-	#crate-search + .search-input {
-		width: calc(100% + 71px);
-		margin-left: -36px;
-	}
-
 	#theme-picker, #settings-menu {
 		padding: 5px;
 		width: 31px;

src/librustdoc/html/static/js/main.js

@@ -129,10 +129,15 @@ function hideThemeButtonState() {
 
 // Set up the theme picker list.
 (function () {
+    if (!document.location.href.startsWith("file:///")) {
+        return;
+    }
     var themeChoices = getThemesElement();
     var themePicker = getThemePickerElement();
     var availableThemes = getVar("themes").split(",");
 
+    removeClass(themeChoices.parentElement, "hidden");
+
     function switchThemeButtonState() {
         if (themeChoices.style.display === "block") {
             hideThemeButtonState();

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

@@ -1,15 +1,18 @@
 // Local js definitions:
 /* global getSettingValue, getVirtualKey, onEachLazy, updateLocalStorage, updateSystemTheme */
+/* global addClass, removeClass */
 
 (function () {
     function changeSetting(settingName, value) {
         updateLocalStorage("rustdoc-" + settingName, value);
 
         switch (settingName) {
+            case "theme":
             case "preferred-dark-theme":
             case "preferred-light-theme":
             case "use-system-theme":
                 updateSystemTheme();
+                updateLightAndDark();
                 break;
         }
     }
@@ -29,7 +32,32 @@
         }
     }
 
+    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");
+    }
+
+    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");
+    }
+
+    function updateLightAndDark() {
+        if (getSettingValue("use-system-theme") !== "false") {
+            showLightAndDark();
+        } else {
+            hideLightAndDark();
+        }
+    }
+
     function setEvents() {
+        updateLightAndDark();
         onEachLazy(document.getElementsByClassName("slider"), function(elem) {
             var toggle = elem.previousElementSibling;
             var settingId = toggle.id;

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

@@ -187,22 +187,25 @@ var updateSystemTheme = (function() {
     var mql = window.matchMedia("(prefers-color-scheme: dark)");
 
     function handlePreferenceChange(mql) {
+        let use = function(theme) {
+            switchTheme(window.currentTheme, window.mainTheme, theme, true);
+        };
         // maybe the user has disabled the setting in the meantime!
         if (getSettingValue("use-system-theme") !== "false") {
             var lightTheme = getSettingValue("preferred-light-theme") || "light";
             var darkTheme = getSettingValue("preferred-dark-theme") || "dark";
 
             if (mql.matches) {
-                // prefers a dark theme
-                switchTheme(window.currentTheme, window.mainTheme, darkTheme, true);
+                use(darkTheme);
             } else {
                 // prefers a light theme, or has no preference
-                switchTheme(window.currentTheme, window.mainTheme, lightTheme, true);
+                use(lightTheme);
             }
-
             // 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"));
         }
     }
 

src/librustdoc/templates/page.html

@@ -96,7 +96,7 @@
                     {%- endif -%}
                 </a> {#- -#}
                 <nav class="sub"> {#- -#}
-                    <div class="theme-picker"> {#- -#}
+                    <div class="theme-picker hidden"> {#- -#}
                         <button id="theme-picker" aria-label="Pick another theme!" aria-haspopup="menu" title="themes"> {#- -#}
                             <img width="18" height="18" alt="Pick another theme!" {# -#}
                              src="{{static_root_path|safe}}brush{{page.resource_suffix}}.svg"> {#- -#}

src/test/rustdoc-gui/toggle-docs-mobile.goml

@@ -1,12 +1,12 @@
 goto: file://|DOC_PATH|/test_docs/struct.Foo.html
 size: (433, 600)
 assert-attribute: (".top-doc", {"open": ""})
-click: (4, 240) // This is the position of the top doc comment toggle
+click: (4, 260) // This is the position of the top doc comment toggle
 assert-attribute-false: (".top-doc", {"open": ""})
-click: (4, 240)
+click: (4, 260)
 assert-attribute: (".top-doc", {"open": ""})
 // To ensure that the toggle isn't over the text, we check that the toggle isn't clicked.
-click: (3, 240)
+click: (3, 260)
 assert-attribute: (".top-doc", {"open": ""})
 
 // Assert the position of the toggle on the top doc block.
@@ -22,10 +22,10 @@ assert-position: (
 // Now we do the same but with a little bigger width
 size: (600, 600)
 assert-attribute: (".top-doc", {"open": ""})
-click: (4, 240) // New Y position since all search elements are back on one line.
+click: (4, 260) // New Y position since all search elements are back on one line.
 assert-attribute-false: (".top-doc", {"open": ""})
-click: (4, 240)
+click: (4, 260)
 assert-attribute: (".top-doc", {"open": ""})
 // To ensure that the toggle isn't over the text, we check that the toggle isn't clicked.
-click: (3, 240)
+click: (3, 260)
 assert-attribute: (".top-doc", {"open": ""})