Rollup merge of #82732 - GuillaumeGomez:remove-theme-file, r=Nemo157

Remove theme.js file

Fixes #82616.

The first commit moves the `theme.js` file into `main.js`, which requires to also run a small `.replace` on the `main.js` content.

The second commit is just a small cleanup to centralize DOM ids.

Since it removes a file from rustdoc output: cc `@rust-lang/docs-rs`

cc `@jsha`
r? `@jyn514`

src/librustdoc/html/layout.rs

@@ -88,7 +88,6 @@ crate fn render<T: Print, S: Print>(
         </button>\
         <div id=\"theme-choices\" role=\"menu\"></div>\
     </div>\
-    <script src=\"{static_root_path}theme{suffix}.js\"></script>\
     <nav class=\"sub\">\
         <form class=\"search-form\">\
             <div class=\"search-container\">\

src/librustdoc/html/render/write_shared.rs

@@ -130,65 +130,14 @@ pub(super) fn write_shared(
 
     let mut themes: Vec<&String> = themes.iter().collect();
     themes.sort();
-    // To avoid theme switch latencies as much as possible, we put everything theme related
-    // at the beginning of the html files into another js file.
-    let theme_js = format!(
-        r#"var themes = document.getElementById("theme-choices");
-var themePicker = document.getElementById("theme-picker");
 
-function showThemeButtonState() {{
-    themes.style.display = "block";
-    themePicker.style.borderBottomRightRadius = "0";
-    themePicker.style.borderBottomLeftRadius = "0";
-}}
-
-function hideThemeButtonState() {{
-    themes.style.display = "none";
-    themePicker.style.borderBottomRightRadius = "3px";
-    themePicker.style.borderBottomLeftRadius = "3px";
-}}
-
-function switchThemeButtonState() {{
-    if (themes.style.display === "block") {{
-        hideThemeButtonState();
-    }} else {{
-        showThemeButtonState();
-    }}
-}};
-
-function handleThemeButtonsBlur(e) {{
-    var active = document.activeElement;
-    var related = e.relatedTarget;
-
-    if (active.id !== "theme-picker" &&
-        (!active.parentNode || active.parentNode.id !== "theme-choices") &&
-        (!related ||
-         (related.id !== "theme-picker" &&
-          (!related.parentNode || related.parentNode.id !== "theme-choices")))) {{
-        hideThemeButtonState();
-    }}
-}}
-
-themePicker.onclick = switchThemeButtonState;
-themePicker.onblur = handleThemeButtonsBlur;
-{}.forEach(function(item) {{
-    var but = document.createElement("button");
-    but.textContent = item;
-    but.onclick = function(el) {{
-        switchTheme(currentTheme, mainTheme, item, true);
-        useSystemTheme(false);
-    }};
-    but.onblur = handleThemeButtonsBlur;
-    themes.appendChild(but);
-}});"#,
-        serde_json::to_string(&themes).unwrap()
-    );
-
-    write_minify(&cx.shared.fs, cx.path("theme.js"), &theme_js, options.enable_minification)?;
     write_minify(
         &cx.shared.fs,
         cx.path("main.js"),
-        static_files::MAIN_JS,
+        &static_files::MAIN_JS.replace(
+            "/* INSERT THEMES HERE */",
+            &format!(" = {}", serde_json::to_string(&themes).unwrap()),
+        ),
         options.enable_minification,
     )?;
     write_minify(

src/librustdoc/html/static/main.js

@@ -2,7 +2,7 @@
 // Local js definitions:
 /* global addClass, getSettingValue, hasClass */
 /* global onEach, onEachLazy, hasOwnProperty, removeClass, updateLocalStorage */
-/* global hideThemeButtonState, showThemeButtonState */
+/* global switchTheme, useSystemTheme */
 
 if (!String.prototype.startsWith) {
     String.prototype.startsWith = function(searchString, position) {
@@ -85,12 +85,15 @@ function getSearchElement() {
     return document.getElementById("search");
 }
 
+var THEME_PICKER_ELEMENT_ID = "theme-picker";
+var THEMES_ELEMENT_ID = "theme-choices";
+
 function getThemesElement() {
-    return document.getElementById("theme-choices");
+    return document.getElementById(THEMES_ELEMENT_ID);
 }
 
 function getThemePickerElement() {
-    return document.getElementById("theme-picker");
+    return document.getElementById(THEME_PICKER_ELEMENT_ID);
 }
 
 // Returns the current URL without any query parameter or hash.
@@ -108,6 +111,65 @@ function defocusSearchBar() {
     getSearchInput().blur();
 }
 
+function showThemeButtonState() {
+    var themePicker = getThemePickerElement();
+    var themeChoices = getThemesElement();
+
+    themeChoices.style.display = "block";
+    themePicker.style.borderBottomRightRadius = "0";
+    themePicker.style.borderBottomLeftRadius = "0";
+}
+
+function hideThemeButtonState() {
+    var themePicker = getThemePickerElement();
+    var themeChoices = getThemesElement();
+
+    themeChoices.style.display = "none";
+    themePicker.style.borderBottomRightRadius = "3px";
+    themePicker.style.borderBottomLeftRadius = "3px";
+}
+
+// Set up the theme picker list.
+(function () {
+    var themeChoices = getThemesElement();
+    var themePicker = getThemePickerElement();
+    var availableThemes/* INSERT THEMES HERE */;
+
+    function switchThemeButtonState() {
+        if (themeChoices.style.display === "block") {
+            hideThemeButtonState();
+        } else {
+            showThemeButtonState();
+        }
+    }
+
+    function handleThemeButtonsBlur(e) {
+        var active = document.activeElement;
+        var related = e.relatedTarget;
+
+        if (active.id !== THEME_PICKER_ELEMENT_ID &&
+            (!active.parentNode || active.parentNode.id !== THEMES_ELEMENT_ID) &&
+            (!related ||
+             (related.id !== THEME_PICKER_ELEMENT_ID &&
+              (!related.parentNode || related.parentNode.id !== THEMES_ELEMENT_ID)))) {
+            hideThemeButtonState();
+        }
+    }
+
+    themePicker.onclick = switchThemeButtonState;
+    themePicker.onblur = handleThemeButtonsBlur;
+    availableThemes.forEach(function(item) {
+        var but = document.createElement("button");
+        but.textContent = item;
+        but.onclick = function() {
+            switchTheme(window.currentTheme, window.mainTheme, item, true);
+            useSystemTheme(false);
+        };
+        but.onblur = handleThemeButtonsBlur;
+        themeChoices.appendChild(but);
+    });
+}());
+
 (function() {
     "use strict";
 
@@ -461,8 +523,7 @@ function defocusSearchBar() {
                 break;
 
             default:
-                var themePicker = getThemePickerElement();
+                if (getThemePickerElement().parentNode.contains(ev.target)) {
-                if (themePicker.parentNode.contains(ev.target)) {
                     handleThemeKeyDown(ev);
                 }
             }
@@ -475,7 +536,7 @@ function defocusSearchBar() {
         switch (getVirtualKey(ev)) {
         case "ArrowUp":
             ev.preventDefault();
-            if (active.previousElementSibling && ev.target.id !== "theme-picker") {
+            if (active.previousElementSibling && ev.target.id !== THEME_PICKER_ELEMENT_ID) {
                 active.previousElementSibling.focus();
             } else {
                 showThemeButtonState();
@@ -484,7 +545,7 @@ function defocusSearchBar() {
             break;
         case "ArrowDown":
             ev.preventDefault();
-            if (active.nextElementSibling && ev.target.id !== "theme-picker") {
+            if (active.nextElementSibling && ev.target.id !== THEME_PICKER_ELEMENT_ID) {
                 active.nextElementSibling.focus();
             } else {
                 showThemeButtonState();
@@ -494,7 +555,7 @@ function defocusSearchBar() {
         case "Enter":
         case "Return":
         case "Space":
-            if (ev.target.id === "theme-picker" && themes.style.display === "none") {
+            if (ev.target.id === THEME_PICKER_ELEMENT_ID && themes.style.display === "none") {
                 ev.preventDefault();
                 showThemeButtonState();
                 themes.firstElementChild.focus();

src/librustdoc/html/static/storage.js

@@ -2,8 +2,8 @@
 /* global resourcesSuffix */
 
 var darkThemes = ["dark", "ayu"];
-var currentTheme = document.getElementById("themeStyle");
+window.currentTheme = document.getElementById("themeStyle");
-var mainTheme = document.getElementById("mainThemeStyle");
+window.mainTheme = document.getElementById("mainThemeStyle");
 
 var settingsDataset = (function () {
     var settingsElement = document.getElementById("default-settings");
@@ -137,7 +137,7 @@ function switchTheme(styleElem, mainStyleElem, newTheme, saveTheme) {
     }
 }
 
-// This function is called from "theme.js", generated in `html/render/mod.rs`.
+// This function is called from "main.js".
 // eslint-disable-next-line no-unused-vars
 function useSystemTheme(value) {
     if (value === undefined) {
@@ -161,8 +161,8 @@ var updateSystemTheme = (function() {
                 .getPropertyValue('content');
 
             switchTheme(
-                currentTheme,
+                window.currentTheme,
-                mainTheme,
+                window.mainTheme,
                 JSON.parse(cssTheme) || "light",
                 true
             );
@@ -180,10 +180,10 @@ var updateSystemTheme = (function() {
 
             if (mql.matches) {
                 // prefers a dark theme
-                switchTheme(currentTheme, mainTheme, darkTheme, true);
+                switchTheme(window.currentTheme, window.mainTheme, darkTheme, true);
             } else {
                 // prefers a light theme, or has no preference
-                switchTheme(currentTheme, mainTheme, lightTheme, true);
+                switchTheme(window.currentTheme, window.mainTheme, lightTheme, true);
             }
 
             // note: we save the theme so that it doesn't suddenly change when
@@ -212,8 +212,8 @@ if (getSettingValue("use-system-theme") !== "false" && window.matchMedia) {
     updateSystemTheme();
 } else {
     switchTheme(
-        currentTheme,
+        window.currentTheme,
-        mainTheme,
+        window.mainTheme,
         getSettingValue("theme") || "light",
         false
     );