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( \ \ \ - \ \ \ \ 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..b1d2d2e731cf8 100644 --- a/src/librustdoc/html/static/main.js +++ b/src/librustdoc/html/static/main.js @@ -1,7 +1,8 @@ +// ignore-tidy-filelength // 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) { @@ -84,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. @@ -107,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"; @@ -453,8 +516,7 @@ function defocusSearchBar() { break; default: - var themePicker = getThemePickerElement(); - if (themePicker.parentNode.contains(ev.target)) { + if (getThemePickerElement().parentNode.contains(ev.target)) { handleThemeKeyDown(ev); } } @@ -467,7 +529,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(); @@ -476,7 +538,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(); @@ -486,7 +548,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(); 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 );