From 3ab4f9a204b130f7372e38ac7f79491478e544fb Mon Sep 17 00:00:00 2001
From: Guillaume Gomez <guillaume1.gomez@gmail.com>
Date: Fri, 5 Mar 2021 16:09:46 +0100
Subject: [PATCH 1/3] Remove theme.js file creation and move its code inside
 main.js

---
 src/librustdoc/html/layout.rs              |  1 -
 src/librustdoc/html/render/write_shared.rs | 61 ++--------------------
 src/librustdoc/html/static/main.js         | 61 +++++++++++++++++++++-
 src/librustdoc/html/static/storage.js      | 18 +++----
 4 files changed, 74 insertions(+), 67 deletions(-)

diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs
index ab65c71d7d1af..8f55e23b3860f 100644
--- a/src/librustdoc/html/layout.rs
+++ b/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\">\
diff --git a/src/librustdoc/html/render/write_shared.rs b/src/librustdoc/html/render/write_shared.rs
index cbf0f9a4927c6..bae350a8c1951 100644
--- a/src/librustdoc/html/render/write_shared.rs
+++ b/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(
diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
index 89b1362b32b63..5abcf4aec39bc 100644
--- a/src/librustdoc/html/static/main.js
+++ b/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";
 
diff --git a/src/librustdoc/html/static/storage.js b/src/librustdoc/html/static/storage.js
index b8b6fcbaf3adc..c68128516d252 100644
--- a/src/librustdoc/html/static/storage.js
+++ b/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
     );

From 5dea1f188849e35aee866120958eaf3a2e196a47 Mon Sep 17 00:00:00 2001
From: Guillaume Gomez <guillaume1.gomez@gmail.com>
Date: Fri, 5 Mar 2021 16:16:03 +0100
Subject: [PATCH 2/3] Clean up code around theme elements

---
 src/librustdoc/html/static/main.js | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
index 5abcf4aec39bc..aef86998f0d16 100644
--- a/src/librustdoc/html/static/main.js
+++ b/src/librustdoc/html/static/main.js
@@ -1,3 +1,4 @@
+// ignore-tidy-filelength
 // Local js definitions:
 /* global addClass, getSettingValue, hasClass */
 /* global onEach, onEachLazy, hasOwnProperty, removeClass, updateLocalStorage */
@@ -84,12 +85,20 @@ function getSearchElement() {
     return document.getElementById("search");
 }
 
+function getThemesElementId() {
+    return "theme-choices";
+}
+
 function getThemesElement() {
-    return document.getElementById("theme-choices");
+    return document.getElementById(getThemesElementId());
+}
+
+function getThemePickerElementId() {
+    return "theme-picker";
 }
 
 function getThemePickerElement() {
-    return document.getElementById("theme-picker");
+    return document.getElementById(getThemePickerElementId());
 }
 
 // Returns the current URL without any query parameter or hash.
@@ -143,11 +152,11 @@ function hideThemeButtonState() {
         var active = document.activeElement;
         var related = e.relatedTarget;
 
-        if (active.id !== "theme-picker" &&
-            (!active.parentNode || active.parentNode.id !== "theme-choices") &&
+        if (active.id !== getThemePickerElementId() &&
+            (!active.parentNode || active.parentNode.id !== getThemesElementId()) &&
             (!related ||
-             (related.id !== "theme-picker" &&
-              (!related.parentNode || related.parentNode.id !== "theme-choices")))) {
+             (related.id !== getThemePickerElementId() &&
+              (!related.parentNode || related.parentNode.id !== getThemesElementId())))) {
             hideThemeButtonState();
         }
     }
@@ -512,8 +521,7 @@ function hideThemeButtonState() {
                 break;
 
             default:
-                var themePicker = getThemePickerElement();
-                if (themePicker.parentNode.contains(ev.target)) {
+                if (getThemePickerElement().parentNode.contains(ev.target)) {
                     handleThemeKeyDown(ev);
                 }
             }
@@ -526,7 +534,7 @@ function hideThemeButtonState() {
         switch (getVirtualKey(ev)) {
         case "ArrowUp":
             ev.preventDefault();
-            if (active.previousElementSibling && ev.target.id !== "theme-picker") {
+            if (active.previousElementSibling && ev.target.id !== getThemePickerElementId()) {
                 active.previousElementSibling.focus();
             } else {
                 showThemeButtonState();
@@ -535,7 +543,7 @@ function hideThemeButtonState() {
             break;
         case "ArrowDown":
             ev.preventDefault();
-            if (active.nextElementSibling && ev.target.id !== "theme-picker") {
+            if (active.nextElementSibling && ev.target.id !== getThemePickerElementId()) {
                 active.nextElementSibling.focus();
             } else {
                 showThemeButtonState();
@@ -545,7 +553,7 @@ function hideThemeButtonState() {
         case "Enter":
         case "Return":
         case "Space":
-            if (ev.target.id === "theme-picker" && themes.style.display === "none") {
+            if (ev.target.id === getThemePickerElementId() && themes.style.display === "none") {
                 ev.preventDefault();
                 showThemeButtonState();
                 themes.firstElementChild.focus();

From 524fdf00346002ecaee50ce357ddfc0c85485e4e Mon Sep 17 00:00:00 2001
From: Guillaume Gomez <guillaume1.gomez@gmail.com>
Date: Fri, 5 Mar 2021 16:19:58 +0100
Subject: [PATCH 3/3] Use global variables instead of functions for DOM IDs

---
 src/librustdoc/html/static/main.js | 27 +++++++++++----------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
index aef86998f0d16..b1d2d2e731cf8 100644
--- a/src/librustdoc/html/static/main.js
+++ b/src/librustdoc/html/static/main.js
@@ -85,20 +85,15 @@ function getSearchElement() {
     return document.getElementById("search");
 }
 
-function getThemesElementId() {
-    return "theme-choices";
-}
+var THEME_PICKER_ELEMENT_ID = "theme-picker";
+var THEMES_ELEMENT_ID = "theme-choices";
 
 function getThemesElement() {
-    return document.getElementById(getThemesElementId());
-}
-
-function getThemePickerElementId() {
-    return "theme-picker";
+    return document.getElementById(THEMES_ELEMENT_ID);
 }
 
 function getThemePickerElement() {
-    return document.getElementById(getThemePickerElementId());
+    return document.getElementById(THEME_PICKER_ELEMENT_ID);
 }
 
 // Returns the current URL without any query parameter or hash.
@@ -152,11 +147,11 @@ function hideThemeButtonState() {
         var active = document.activeElement;
         var related = e.relatedTarget;
 
-        if (active.id !== getThemePickerElementId() &&
-            (!active.parentNode || active.parentNode.id !== getThemesElementId()) &&
+        if (active.id !== THEME_PICKER_ELEMENT_ID &&
+            (!active.parentNode || active.parentNode.id !== THEMES_ELEMENT_ID) &&
             (!related ||
-             (related.id !== getThemePickerElementId() &&
-              (!related.parentNode || related.parentNode.id !== getThemesElementId())))) {
+             (related.id !== THEME_PICKER_ELEMENT_ID &&
+              (!related.parentNode || related.parentNode.id !== THEMES_ELEMENT_ID)))) {
             hideThemeButtonState();
         }
     }
@@ -534,7 +529,7 @@ function hideThemeButtonState() {
         switch (getVirtualKey(ev)) {
         case "ArrowUp":
             ev.preventDefault();
-            if (active.previousElementSibling && ev.target.id !== getThemePickerElementId()) {
+            if (active.previousElementSibling && ev.target.id !== THEME_PICKER_ELEMENT_ID) {
                 active.previousElementSibling.focus();
             } else {
                 showThemeButtonState();
@@ -543,7 +538,7 @@ function hideThemeButtonState() {
             break;
         case "ArrowDown":
             ev.preventDefault();
-            if (active.nextElementSibling && ev.target.id !== getThemePickerElementId()) {
+            if (active.nextElementSibling && ev.target.id !== THEME_PICKER_ELEMENT_ID) {
                 active.nextElementSibling.focus();
             } else {
                 showThemeButtonState();
@@ -553,7 +548,7 @@ function hideThemeButtonState() {
         case "Enter":
         case "Return":
         case "Space":
-            if (ev.target.id === getThemePickerElementId() && themes.style.display === "none") {
+            if (ev.target.id === THEME_PICKER_ELEMENT_ID && themes.style.display === "none") {
                 ev.preventDefault();
                 showThemeButtonState();
                 themes.firstElementChild.focus();