Remove theme.js file creation and move its code inside main.js

Author: GuillaumeGomez

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

@@ -108,65 +108,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

@@ -1,7 +1,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) {
@@ -107,6 +107,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" &&
+            (!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;
+    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";
 

src/librustdoc/html/static/storage.js

@@ -2,8 +2,8 @@
 /* global resourcesSuffix */
 
 var darkThemes = ["dark", "ayu"];
-var currentTheme = document.getElementById("themeStyle");
-var mainTheme = document.getElementById("mainThemeStyle");
+window.currentTheme = document.getElementById("themeStyle");
+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,
-                mainTheme,
+                window.currentTheme,
+                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,
-        mainTheme,
+        window.currentTheme,
+        window.mainTheme,
         getSettingValue("theme") || "light",
         false
     );