diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/librustdoc/html/markdown.rs | 5 | ||||
| -rw-r--r-- | src/librustdoc/html/render/context.rs | 23 | ||||
| -rw-r--r-- | src/librustdoc/html/render/mod.rs | 128 | ||||
| -rw-r--r-- | src/librustdoc/html/static/js/main.js | 179 | ||||
| -rw-r--r-- | src/librustdoc/html/static/js/search.js | 16 | ||||
| -rw-r--r-- | src/librustdoc/html/static/js/settings.js | 195 | ||||
| -rw-r--r-- | src/librustdoc/html/static/js/source-script.js | 4 | ||||
| -rw-r--r-- | src/librustdoc/html/templates/page.html | 1 | ||||
| -rw-r--r-- | src/test/rustdoc-gui/escape-key.goml | 14 | ||||
| -rw-r--r-- | src/test/rustdoc-gui/settings.goml | 67 | ||||
| -rw-r--r-- | src/test/rustdoc-gui/theme-change.goml | 1 | ||||
| -rw-r--r-- | src/test/rustdoc-gui/theme-in-history.goml | 12 |
12 files changed, 439 insertions, 206 deletions
diff --git a/src/librustdoc/html/markdown.rs b/src/librustdoc/html/markdown.rs index 9e76af98298..56a085c2982 100644 --- a/src/librustdoc/html/markdown.rs +++ b/src/librustdoc/html/markdown.rs @@ -1440,6 +1440,10 @@ fn init_id_map() -> FxHashMap<Cow<'static, str>, usize> { let mut map = FxHashMap::default(); // This is the list of IDs used in Javascript. map.insert("help".into(), 1); + map.insert("settings".into(), 1); + map.insert("not-displayed".into(), 1); + map.insert("alternative-display".into(), 1); + map.insert("search".into(), 1); // This is the list of IDs used in HTML generated in Rust (including the ones // used in tera template files). map.insert("mainThemeStyle".into(), 1); @@ -1449,7 +1453,6 @@ fn init_id_map() -> FxHashMap<Cow<'static, str>, usize> { map.insert("settings-menu".into(), 1); map.insert("help-button".into(), 1); map.insert("main-content".into(), 1); - map.insert("search".into(), 1); map.insert("crate-search".into(), 1); map.insert("render-detail".into(), 1); map.insert("toggle-all-docs".into(), 1); diff --git a/src/librustdoc/html/render/context.rs b/src/librustdoc/html/render/context.rs index 8e643107353..a30c533aa48 100644 --- a/src/librustdoc/html/render/context.rs +++ b/src/librustdoc/html/render/context.rs @@ -17,8 +17,8 @@ use super::print_item::{full_path, item_path, print_item}; use super::search_index::build_index; use super::write_shared::write_shared; use super::{ - collect_spans_and_sources, print_sidebar, scrape_examples_help, settings, AllTypes, - LinkFromSrc, NameDoc, StylePath, BASIC_KEYWORDS, + collect_spans_and_sources, print_sidebar, scrape_examples_help, AllTypes, LinkFromSrc, NameDoc, + StylePath, BASIC_KEYWORDS, }; use crate::clean::{self, types::ExternalLocation, ExternalCrate}; @@ -589,21 +589,18 @@ impl<'tcx> FormatRenderer<'tcx> for Context<'tcx> { page.root_path = "./"; let sidebar = "<h2 class=\"location\">Settings</h2><div class=\"sidebar-elems\"></div>"; - let theme_names: Vec<String> = self - .shared - .style_files - .iter() - .map(StylePath::basename) - .collect::<Result<_, Error>>()?; let v = layout::render( &self.shared.layout, &page, sidebar, - settings( - self.shared.static_root_path.as_deref().unwrap_or("./"), - &self.shared.resource_suffix, - theme_names, - )?, + |buf: &mut Buffer| { + write!( + buf, + "<script defer src=\"{}settings{}.js\"></script>", + page.static_root_path.unwrap_or(""), + page.resource_suffix + ) + }, &self.shared.style_files, ); self.shared.fs.write(settings_file, v)?; diff --git a/src/librustdoc/html/render/mod.rs b/src/librustdoc/html/render/mod.rs index 7a4289b8e60..fedeb449b2e 100644 --- a/src/librustdoc/html/render/mod.rs +++ b/src/librustdoc/html/render/mod.rs @@ -334,134 +334,6 @@ impl AllTypes { } } -#[derive(Debug)] -enum Setting { - Section { - description: &'static str, - sub_settings: Vec<Setting>, - }, - Toggle { - js_data_name: &'static str, - description: &'static str, - default_value: bool, - }, - Select { - js_data_name: &'static str, - description: &'static str, - default_value: &'static str, - options: Vec<String>, - }, -} - -impl Setting { - fn display(&self, root_path: &str, suffix: &str) -> String { - match *self { - Setting::Section { description, ref sub_settings } => format!( - "<div class=\"setting-line\">\ - <div class=\"title\">{}</div>\ - <div class=\"sub-settings\">{}</div> - </div>", - description, - sub_settings.iter().map(|s| s.display(root_path, suffix)).collect::<String>() - ), - Setting::Toggle { js_data_name, description, default_value } => format!( - "<div class=\"setting-line\">\ - <label class=\"toggle\">\ - <input type=\"checkbox\" id=\"{}\" {}>\ - <span class=\"slider\"></span>\ - </label>\ - <div>{}</div>\ - </div>", - js_data_name, - if default_value { " checked" } else { "" }, - description, - ), - Setting::Select { js_data_name, description, default_value, ref options } => format!( - "<div class=\"setting-line\"><div class=\"radio-line\" id=\"{}\"><span class=\"setting-name\">{}</span><div class=\"choices\">{}</div></div></div>", - js_data_name, - description, - options - .iter() - .map(|opt| format!( - "<label for=\"{js_data_name}-{name}\" class=\"choice\"> - <input type=\"radio\" name=\"{js_data_name}\" id=\"{js_data_name}-{name}\" value=\"{name}\" {checked}>\ - {name}\ - </label>", - js_data_name = js_data_name, - name = opt, - checked = if opt == default_value { "checked" } else { "" }, - )) - .collect::<String>(), - ), - } - } -} - -impl From<(&'static str, &'static str, bool)> for Setting { - fn from(values: (&'static str, &'static str, bool)) -> Setting { - Setting::Toggle { js_data_name: values.0, description: values.1, default_value: values.2 } - } -} - -impl<T: Into<Setting>> From<(&'static str, Vec<T>)> for Setting { - fn from(values: (&'static str, Vec<T>)) -> Setting { - Setting::Section { - description: values.0, - sub_settings: values.1.into_iter().map(|v| v.into()).collect::<Vec<_>>(), - } - } -} - -fn settings(root_path: &str, suffix: &str, theme_names: Vec<String>) -> Result<String, Error> { - // (id, explanation, default value) - let settings: &[Setting] = &[ - 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-light-theme", - description: "Preferred light theme", - default_value: "light", - options: theme_names.clone(), - }, - Setting::Select { - js_data_name: "preferred-dark-theme", - description: "Preferred dark theme", - default_value: "dark", - options: theme_names, - }, - ("auto-hide-large-items", "Auto-hide item contents for large items.", true).into(), - ("auto-hide-method-docs", "Auto-hide item methods' documentation", false).into(), - ("auto-hide-trait-implementations", "Auto-hide trait implementation documentation", false) - .into(), - ("go-to-only-result", "Directly go to item in search if there is only one result", false) - .into(), - ("line-numbers", "Show line numbers on code examples", false).into(), - ("disable-shortcuts", "Disable keyboard shortcuts", false).into(), - ]; - - Ok(format!( - "<div class=\"main-heading\"> - <h1 class=\"fqn\">\ - <span class=\"in-band\">Rustdoc settings</span>\ - </h1>\ - <span class=\"out-of-band\">\ - <a id=\"back\" href=\"javascript:void(0)\">Back</a>\ - </span>\ - </div>\ - <div class=\"settings\">{}</div>\ - <link rel=\"stylesheet\" href=\"{root_path}settings{suffix}.css\">\ - <script src=\"{root_path}settings{suffix}.js\"></script>", - settings.iter().map(|s| s.display(root_path, suffix)).collect::<String>(), - root_path = root_path, - suffix = suffix - )) -} - fn scrape_examples_help(shared: &SharedContext<'_>) -> String { let mut content = SCRAPE_EXAMPLES_HELP_MD.to_owned(); content.push_str(&format!( diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index 9e5de9a843a..f20061c65dd 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -57,11 +57,20 @@ function resourcePath(basename, extension) { return getVar("root-path") + basename + getVar("resource-suffix") + extension; } +function hideMain() { + addClass(document.getElementById(MAIN_ID), "hidden"); +} + +function showMain() { + removeClass(document.getElementById(MAIN_ID), "hidden"); +} + (function () { window.rootPath = getVar("root-path"); window.currentCrate = getVar("current-crate"); window.searchJS = resourcePath("search", ".js"); window.searchIndexJS = resourcePath("search-index", ".js"); + window.settingsJS = resourcePath("settings", ".js"); const sidebarVars = document.getElementById("sidebar-vars"); if (sidebarVars) { window.sidebarCurrent = { @@ -104,6 +113,9 @@ function getVirtualKey(ev) { const THEME_PICKER_ELEMENT_ID = "theme-picker"; const THEMES_ELEMENT_ID = "theme-choices"; const MAIN_ID = "main-content"; +const SETTINGS_BUTTON_ID = "settings-menu"; +const ALTERNATIVE_DISPLAY_ID = "alternative-display"; +const NOT_DISPLAYED_ID = "not-displayed"; function getThemesElement() { return document.getElementById(THEMES_ELEMENT_ID); @@ -113,6 +125,10 @@ function getThemePickerElement() { return document.getElementById(THEME_PICKER_ELEMENT_ID); } +function getSettingsButton() { + return document.getElementById(SETTINGS_BUTTON_ID); +} + // Returns the current URL without any query parameter or hash. function getNakedUrl() { return window.location.href.split("?")[0].split("#")[0]; @@ -136,6 +152,10 @@ function hideThemeButtonState() { themePicker.style.borderBottomLeftRadius = "3px"; } +window.hideSettings = function() { + // Does nothing by default. +}; + // Set up the theme picker list. (function () { if (!document.location.href.startsWith("file:///")) { @@ -182,14 +202,120 @@ function hideThemeButtonState() { }); }()); +/** + * This function inserts `newNode` after `referenceNode`. It doesn't work if `referenceNode` + * doesn't have a parent node. + * + * @param {HTMLElement} newNode + * @param {HTMLElement} referenceNode + */ +function insertAfter(newNode, referenceNode) { + referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); +} + +/** + * This function creates a new `<section>` with the given `id` and `classes` if it doesn't already + * exist. + * + * More information about this in `switchDisplayedElement` documentation. + * + * @param {string} id + * @param {string} classes + */ +function getOrCreateSection(id, classes) { + let el = document.getElementById(id); + + if (!el) { + el = document.createElement("section"); + el.id = id; + el.className = classes; + insertAfter(el, document.getElementById(MAIN_ID)); + } + return el; +} + +/** + * Returns the `<section>` element which contains the displayed element. + * + * @return {HTMLElement} + */ +function getAlternativeDisplayElem() { + return getOrCreateSection(ALTERNATIVE_DISPLAY_ID, "content hidden"); +} + +/** + * Returns the `<section>` element which contains the not-displayed elements. + * + * @return {HTMLElement} + */ +function getNotDisplayedElem() { + return getOrCreateSection(NOT_DISPLAYED_ID, "hidden"); +} + +/** + * To nicely switch between displayed "extra" elements (such as search results or settings menu) + * and to alternate between the displayed and not displayed elements, we hold them in two different + * `<section>` elements. They work in pair: one holds the hidden elements while the other + * contains the displayed element (there can be only one at the same time!). So basically, we switch + * elements between the two `<section>` elements. + * + * @param {HTMLElement} elemToDisplay + */ +function switchDisplayedElement(elemToDisplay) { + const el = getAlternativeDisplayElem(); + + if (el.children.length > 0) { + getNotDisplayedElem().appendChild(el.firstElementChild); + } + if (elemToDisplay === null) { + addClass(el, "hidden"); + showMain(); + return; + } + el.appendChild(elemToDisplay); + hideMain(); + removeClass(el, "hidden"); +} + +function browserSupportsHistoryApi() { + return window.history && typeof window.history.pushState === "function"; +} + +// eslint-disable-next-line no-unused-vars +function loadCss(cssFileName) { + const link = document.createElement("link"); + link.href = resourcePath(cssFileName, ".css"); + link.type = "text/css"; + link.rel = "stylesheet"; + document.getElementsByTagName("head")[0].appendChild(link); +} + (function() { "use strict"; + function loadScript(url) { + const script = document.createElement('script'); + script.src = url; + document.head.append(script); + } + + + getSettingsButton().onclick = function(event) { + event.preventDefault(); + loadScript(window.settingsJS); + }; + window.searchState = { loadingText: "Loading search results...", input: document.getElementsByClassName("search-input")[0], outputElement: function() { - return document.getElementById("search"); + let el = document.getElementById("search"); + if (!el) { + el = document.createElement("section"); + el.id = "search"; + getNotDisplayedElem().appendChild(el); + } + return el; }, title: document.title, titleBeforeSearch: document.title, @@ -208,6 +334,9 @@ function hideThemeButtonState() { searchState.timeout = null; } }, + isDisplayed: function() { + return searchState.outputElement().parentElement.id === ALTERNATIVE_DISPLAY_ID; + }, // Sets the focus on the search bar at the top of the page focus: function() { searchState.input.focus(); @@ -220,20 +349,15 @@ function hideThemeButtonState() { if (search === null || typeof search === 'undefined') { search = searchState.outputElement(); } - addClass(main, "hidden"); - removeClass(search, "hidden"); + switchDisplayedElement(search); searchState.mouseMovedAfterSearch = false; document.title = searchState.title; }, - hideResults: function(search) { - if (search === null || typeof search === 'undefined') { - search = searchState.outputElement(); - } - addClass(search, "hidden"); - removeClass(main, "hidden"); + hideResults: function() { + switchDisplayedElement(null); document.title = searchState.titleBeforeSearch; // We also remove the query parameter from the URL. - if (searchState.browserSupportsHistoryApi()) { + if (browserSupportsHistoryApi()) { history.replaceState(null, window.currentCrate + " - Rust", getNakedUrl() + window.location.hash); } @@ -248,20 +372,11 @@ function hideThemeButtonState() { }); return params; }, - browserSupportsHistoryApi: function() { - return window.history && typeof window.history.pushState === "function"; - }, setup: function() { const search_input = searchState.input; if (!searchState.input) { return; } - function loadScript(url) { - const script = document.createElement('script'); - script.src = url; - document.head.append(script); - } - let searchLoaded = false; function loadSearch() { if (!searchLoaded) { @@ -303,23 +418,20 @@ function hideThemeButtonState() { } const toggleAllDocsId = "toggle-all-docs"; - const main = document.getElementById(MAIN_ID); let savedHash = ""; function handleHashes(ev) { - let elem; - const search = searchState.outputElement(); - if (ev !== null && search && !hasClass(search, "hidden") && ev.newURL) { + if (ev !== null && searchState.isDisplayed() && ev.newURL) { // This block occurs when clicking on an element in the navbar while // in a search. - searchState.hideResults(search); + switchDisplayedElement(null); const hash = ev.newURL.slice(ev.newURL.indexOf("#") + 1); - if (searchState.browserSupportsHistoryApi()) { + if (browserSupportsHistoryApi()) { // `window.location.search`` contains all the query parameters, not just `search`. history.replaceState(null, "", getNakedUrl() + window.location.search + "#" + hash); } - elem = document.getElementById(hash); + const elem = document.getElementById(hash); if (elem) { elem.scrollIntoView(); } @@ -389,14 +501,17 @@ function hideThemeButtonState() { } function handleEscape(ev) { + searchState.clearInputTimeout(); const help = getHelpElement(false); - const search = searchState.outputElement(); if (help && !hasClass(help, "hidden")) { displayHelp(false, ev, help); - } else if (search && !hasClass(search, "hidden")) { - searchState.clearInputTimeout(); + } else { + switchDisplayedElement(null); + if (browserSupportsHistoryApi()) { + history.replaceState(null, window.currentCrate + " - Rust", + getNakedUrl() + window.location.hash); + } ev.preventDefault(); - searchState.hideResults(search); } searchState.defocus(); hideThemeButtonState(); @@ -733,10 +848,6 @@ function hideThemeButtonState() { innerToggle.children[0].innerText = labelForToggleButton(sectionIsCollapsed); } - function insertAfter(newNode, referenceNode) { - referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); - } - (function() { const toggles = document.getElementById(toggleAllDocsId); if (toggles) { diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js index a6f7dd74af6..84600fa3e09 100644 --- a/src/librustdoc/html/static/js/search.js +++ b/src/librustdoc/html/static/js/search.js @@ -2,7 +2,7 @@ /* eslint no-var: "error" */ /* eslint prefer-const: "error" */ /* global addClass, getNakedUrl, getSettingValue, hasOwnPropertyRustdoc, initSearch, onEach */ -/* global onEachLazy, removeClass, searchState, hasClass */ +/* global onEachLazy, removeClass, searchState, browserSupportsHistoryApi */ (function() { // This mapping table should match the discriminants of @@ -1786,8 +1786,9 @@ window.initSearch = function(rawSearchIndex) { // Because searching is incremental by character, only the most // recent search query is added to the browser history. - if (searchState.browserSupportsHistoryApi()) { + if (browserSupportsHistoryApi()) { const newURL = buildUrl(query.original, filterCrates); + if (!history.state && !params.search) { history.pushState(null, "", newURL); } else { @@ -1965,10 +1966,9 @@ window.initSearch = function(rawSearchIndex) { if (!searchState.input) { return; } - const search = searchState.outputElement(); - if (search_input.value !== "" && hasClass(search, "hidden")) { - searchState.showResults(search); - if (searchState.browserSupportsHistoryApi()) { + if (search_input.value !== "" && !searchState.isDisplayed()) { + searchState.showResults(); + if (browserSupportsHistoryApi()) { history.replaceState(null, "", buildUrl(search_input.value, getFilterCrates())); } @@ -1980,7 +1980,7 @@ window.initSearch = function(rawSearchIndex) { const searchAfter500ms = function() { searchState.clearInputTimeout(); if (searchState.input.value.length === 0) { - if (searchState.browserSupportsHistoryApi()) { + if (browserSupportsHistoryApi()) { history.replaceState(null, window.currentCrate + " - Rust", getNakedUrl() + window.location.hash); } @@ -2058,7 +2058,7 @@ window.initSearch = function(rawSearchIndex) { // Push and pop states are used to add search results to the browser // history. - if (searchState.browserSupportsHistoryApi()) { + if (browserSupportsHistoryApi()) { // Store the previous <title> so we can revert back to it later. const previousTitle = document.title; diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js index 7bc6f6cfe04..a2f8d56fb32 100644 --- a/src/librustdoc/html/static/js/settings.js +++ b/src/librustdoc/html/static/js/settings.js @@ -2,10 +2,13 @@ /* eslint no-var: "error" */ /* eslint prefer-const: "error" */ // Local js definitions: -/* global getSettingValue, getVirtualKey, onEachLazy, updateLocalStorage, updateSystemTheme */ -/* global addClass, removeClass */ +/* global getSettingValue, getVirtualKey, updateLocalStorage, updateSystemTheme, loadCss */ +/* global addClass, removeClass, onEach, onEachLazy, NOT_DISPLAYED_ID */ +/* global MAIN_ID, getVar, getSettingsButton, switchDisplayedElement, getNotDisplayedElem */ (function () { + const isSettingsPage = window.location.pathname.endsWith("/settings.html"); + function changeSetting(settingName, value) { updateLocalStorage(settingName, value); @@ -55,9 +58,9 @@ } } - function setEvents() { + function setEvents(settingsElement) { updateLightAndDark(); - onEachLazy(document.getElementsByClassName("slider"), function(elem) { + onEachLazy(settingsElement.getElementsByClassName("slider"), function(elem) { const toggle = elem.previousElementSibling; const settingId = toggle.id; const settingValue = getSettingValue(settingId); @@ -70,7 +73,7 @@ toggle.onkeyup = handleKey; toggle.onkeyrelease = handleKey; }); - onEachLazy(document.getElementsByClassName("select-wrapper"), function(elem) { + onEachLazy(settingsElement.getElementsByClassName("select-wrapper"), function(elem) { const select = elem.getElementsByTagName("select")[0]; const settingId = select.id; const settingValue = getSettingValue(settingId); @@ -81,7 +84,7 @@ changeSetting(this.id, this.value); }; }); - onEachLazy(document.querySelectorAll("input[type=\"radio\"]"), function(elem) { + onEachLazy(settingsElement.querySelectorAll("input[type=\"radio\"]"), function(elem) { const settingId = elem.name; const settingValue = getSettingValue(settingId); if (settingValue !== null && settingValue !== "null") { @@ -91,10 +94,182 @@ changeSetting(ev.target.name, ev.target.value); }); }); - document.getElementById("back").addEventListener("click", function() { - history.back(); - }); } - window.addEventListener("DOMContentLoaded", setEvents); + /** + * This function builds the sections inside the "settings page". It takes a `settings` list + * as argument which describes each setting and how to render it. It returns a string + * representing the raw HTML. + * + * @param {Array<Object>} settings + * + * @return {string} + */ + function buildSettingsPageSections(settings) { + let output = ""; + + for (const setting of settings) { + output += `<div class="setting-line">`; + const js_data_name = setting["js_name"]; + const setting_name = setting["name"]; + + if (setting["options"] !== undefined) { + // This is a select setting. + output += `<div class="radio-line" id="${js_data_name}">\ + <span class="setting-name">${setting_name}</span>\ + <div class="choices">`; + onEach(setting["options"], function(option) { + const checked = option === setting["default"] ? " checked" : ""; + + output += `<label for="${js_data_name}-${option}" class="choice">\ + <input type="radio" name="${js_data_name}" \ + id="${js_data_name}-${option}" value="${option}"${checked}>\ + ${option}\ + </label>`; + }); + output += "</div></div>"; + } else { + // This is a toggle. + const checked = setting["default"] === true ? " checked" : ""; + output += ` + <label class="toggle"> + <input type="checkbox" id="${js_data_name}"${checked}> + <span class="slider"></span> + </label> + <div>${setting_name}</div>`; + } + output += "</div>"; + } + return output; + } + + /** + * This function builds the "settings page" and returns the generated HTML element. + * + * @return {HTMLElement} + */ + function buildSettingsPage() { + const themes = getVar("themes").split(","); + const settings = [ + { + "name": "Use system theme", + "js_name": "use-system-theme", + "default": true, + }, + { + "name": "Theme", + "js_name": "theme", + "default": "light", + "options": themes, + }, + { + "name": "Preferred light theme", + "js_name": "preferred-light-theme", + "default": "light", + "options": themes, + }, + { + "name": "Preferred dark theme", + "js_name": "preferred-dark-theme", + "default": "dark", + "options": themes, + }, + { + "name": "Auto-hide item contents for large items", + "js_name": "auto-hide-large-items", + "default": true, + }, + { + "name": "Auto-hide item methods' documentation", + "js_name": "auto-hide-method-docs", + "default": false, + }, + { + "name": "Auto-hide trait implementation documentation", + "js_name": "auto-hide-trait-implementations", + "default": false, + }, + { + "name": "Directly go to item in search if there is only one result", + "js_name": "go-to-only-result", + "default": false, + }, + { + "name": "Show line numbers on code examples", + "js_name": "line-numbers", + "default": false, + }, + { + "name": "Disable keyboard shortcuts", + "js_name": "disable-shortcuts", + "default": false, + }, + ]; + + // First, we add the settings.css file. + loadCss("settings"); + + // Then we build the DOM. + const el = document.createElement("section"); + el.id = "settings"; + let innerHTML = ` + <div class="main-heading"> + <h1 class="fqn"> + <span class="in-band">Rustdoc settings</span> + </h1> + <span class="out-of-band">`; + + if (isSettingsPage) { + innerHTML += + `<a id="back" href="javascript:void(0)" onclick="history.back();">Back</a>`; + } else { + innerHTML += + `<a id="back" href="javascript:void(0)" onclick="switchDisplayedElement(null);">\ + Back</a>`; + } + innerHTML += `</span> + </div> + <div class="settings">${buildSettingsPageSections(settings)}</div>`; + + el.innerHTML = innerHTML; + + if (isSettingsPage) { + document.getElementById(MAIN_ID).appendChild(el); + } else { + getNotDisplayedElem().appendChild(el); + } + return el; + } + + const settingsMenu = buildSettingsPage(); + + if (isSettingsPage) { + // We replace the existing "onclick" callback to do nothing if clicked. + getSettingsButton().onclick = function(event) { + event.preventDefault(); + }; + } else { + // We replace the existing "onclick" callback. + const settingsButton = getSettingsButton(); + settingsButton.onclick = function(event) { + event.preventDefault(); + if (settingsMenu.parentElement.id === NOT_DISPLAYED_ID) { + switchDisplayedElement(settingsMenu); + } else { + window.hideSettings(); + } + }; + window.hideSettings = function() { + switchDisplayedElement(null); + }; + } + + // We now wait a bit for the web browser to end re-computing the DOM... + setTimeout(function() { + setEvents(settingsMenu); + // The setting menu is already displayed if we're on the settings page. + if (!isSettingsPage) { + switchDisplayedElement(settingsMenu); + } + }, 0); })(); diff --git a/src/librustdoc/html/static/js/source-script.js b/src/librustdoc/html/static/js/source-script.js index c48a847665e..6aee0da69f8 100644 --- a/src/librustdoc/html/static/js/source-script.js +++ b/src/librustdoc/html/static/js/source-script.js @@ -6,7 +6,7 @@ /* global search, sourcesIndex */ // Local js definitions: -/* global addClass, getCurrentValue, hasClass, onEachLazy, removeClass, searchState */ +/* global addClass, getCurrentValue, hasClass, onEachLazy, removeClass, browserSupportsHistoryApi */ /* global updateLocalStorage */ (function() { @@ -195,7 +195,7 @@ const handleSourceHighlight = (function() { const set_fragment = function(name) { const x = window.scrollX, y = window.scrollY; - if (searchState.browserSupportsHistoryApi()) { + if (browserSupportsHistoryApi()) { history.replaceState(null, null, "#" + name); highlightSourceLines(); } else { diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html index 564731ab735..470cce93a50 100644 --- a/src/librustdoc/html/templates/page.html +++ b/src/librustdoc/html/templates/page.html @@ -135,7 +135,6 @@ </nav> {#- -#} </div> {#- -#} <section id="main-content" class="content">{{- content|safe -}}</section> {#- -#} - <section id="search" class="content hidden"></section> {#- -#} </div> {#- -#} </main> {#- -#} {{- layout.external_html.after_content|safe -}} diff --git a/src/test/rustdoc-gui/escape-key.goml b/src/test/rustdoc-gui/escape-key.goml index 6e305e81eee..8713bf65c84 100644 --- a/src/test/rustdoc-gui/escape-key.goml +++ b/src/test/rustdoc-gui/escape-key.goml @@ -4,17 +4,20 @@ goto: file://|DOC_PATH|/test_docs/index.html // First, we check that the search results are hidden when the Escape key is pressed. write: (".search-input", "test") wait-for: "#search h1" // The search element is empty before the first search -assert-attribute: ("#search", {"class": "content"}) +// Check that the currently displayed element is search. +wait-for: "#alternative-display #search" assert-attribute: ("#main-content", {"class": "content hidden"}) assert-document-property: ({"URL": "index.html?search=test"}, ENDS_WITH) press-key: "Escape" -assert-attribute: ("#search", {"class": "content hidden"}) +// Checks that search is no longer in the displayed content. +wait-for: "#not-displayed #search" +assert-false: "#alternative-display #search" assert-attribute: ("#main-content", {"class": "content"}) assert-document-property: ({"URL": "index.html"}, [ENDS_WITH]) // Check that focusing the search input brings back the search results focus: ".search-input" -assert-attribute: ("#search", {"class": "content"}) +wait-for: "#alternative-display #search" assert-attribute: ("#main-content", {"class": "content hidden"}) assert-document-property: ({"URL": "index.html?search=test"}, ENDS_WITH) @@ -24,8 +27,8 @@ click: "#help-button" assert-document-property: ({"URL": "index.html?search=test"}, [ENDS_WITH]) assert-attribute: ("#help", {"class": ""}) press-key: "Escape" +wait-for: "#alternative-display #search" assert-attribute: ("#help", {"class": "hidden"}) -assert-attribute: ("#search", {"class": "content"}) assert-attribute: ("#main-content", {"class": "content hidden"}) assert-document-property: ({"URL": "index.html?search=test"}, [ENDS_WITH]) @@ -37,5 +40,6 @@ assert-false: ".search-input:focus" assert: "#results a:focus" press-key: "Escape" assert-attribute: ("#help", {"class": "hidden"}) -assert-attribute: ("#search", {"class": "content hidden"}) +wait-for: "#not-displayed #search" +assert-false: "#alternative-display #search" assert-attribute: ("#main-content", {"class": "content"}) diff --git a/src/test/rustdoc-gui/settings.goml b/src/test/rustdoc-gui/settings.goml new file mode 100644 index 00000000000..6c4611b1cb2 --- /dev/null +++ b/src/test/rustdoc-gui/settings.goml @@ -0,0 +1,67 @@ +// This test ensures that the settings menu display is working as expected. +goto: file://|DOC_PATH|/test_docs/index.html +// First, we check that the settings page doesn't exist. +assert-false: "#settings" +// We now click on the settings button. +click: "#settings-menu" +wait-for: "#settings" +assert: "#main-content.hidden" +assert-css: ("#settings", {"display": "block"}) +// Let's close it by clicking on the same button. +click: "#settings-menu" +assert-false: "#alternative-display #settings" +assert: "#not-displayed #settings" +assert: "#main-content:not(.hidden)" + +// Let's open and then close it again with the "close settings" button. +click: "#settings-menu" +wait-for: "#alternative-display #settings" +assert: "#main-content.hidden" +click: "#back" +wait-for: "#not-displayed #settings" +assert: "#main-content:not(.hidden)" + +// Let's check that pressing "ESCAPE" is closing it. +click: "#settings-menu" +wait-for: "#alternative-display #settings" +press-key: "Escape" +wait-for: "#not-displayed #settings" +assert: "#main-content:not(.hidden)" + +// Let's click on it when the search results are displayed. +focus: ".search-input" +write: "test" +wait-for: "#alternative-display #search" +click: "#settings-menu" +wait-for: "#alternative-display #settings" +assert: "#not-displayed #search" +assert: "#main-content.hidden" + +// Now let's check the content of the settings menu. +local-storage: {"rustdoc-theme": "dark", "rustdoc-use-system-theme": "false"} +reload: +click: "#settings-menu" +wait-for: "#settings" + +// We check that the "Use system theme" is disabled. +assert-property: ("#use-system-theme", {"checked": "false"}) +assert: "//*[@class='setting-line']/*[text()='Use system theme']" +// Meaning that only the "theme" menu is showing up. +assert: ".setting-line:not(.hidden) #theme" +assert: ".setting-line.hidden #preferred-dark-theme" +assert: ".setting-line.hidden #preferred-light-theme" + +// We check that the correct theme is selected. +assert-property: ("#theme .choices #theme-dark", {"checked": "true"}) + +// We now switch the display. +click: "#use-system-theme" +// Wait for the hidden element to show up. +wait-for: ".setting-line:not(.hidden) #preferred-dark-theme" +assert: ".setting-line:not(.hidden) #preferred-light-theme" +// Check that the theme picking is hidden. +assert: ".setting-line.hidden #theme" + +// We check their text as well. +assert-text: ("#preferred-dark-theme .setting-name", "Preferred dark theme") +assert-text: ("#preferred-light-theme .setting-name", "Preferred light theme") diff --git a/src/test/rustdoc-gui/theme-change.goml b/src/test/rustdoc-gui/theme-change.goml index 333391ba279..9706511ea19 100644 --- a/src/test/rustdoc-gui/theme-change.goml +++ b/src/test/rustdoc-gui/theme-change.goml @@ -9,6 +9,7 @@ click: "#theme-choices > button:last-child" wait-for-css: ("body", { "background-color": "rgb(255, 255, 255)" }) goto: file://|DOC_PATH|/settings.html +wait-for: "#settings" click: "#theme-light" wait-for-css: ("body", { "background-color": "rgb(255, 255, 255)" }) assert-local-storage: { "rustdoc-theme": "light" } diff --git a/src/test/rustdoc-gui/theme-in-history.goml b/src/test/rustdoc-gui/theme-in-history.goml index 3b66c85d8da..f576ced1c62 100644 --- a/src/test/rustdoc-gui/theme-in-history.goml +++ b/src/test/rustdoc-gui/theme-in-history.goml @@ -1,15 +1,19 @@ // Ensures that the theme is working when going back in history. goto: file://|DOC_PATH|/test_docs/index.html // Set the theme to dark. -local-storage: {"rustdoc-theme": "dark", "rustdoc-preferred-dark-theme": "dark", "rustdoc-use-system-theme": "false"} +local-storage: { + "rustdoc-theme": "dark", + "rustdoc-preferred-dark-theme": "dark", + "rustdoc-use-system-theme": "false", +} // We reload the page so the local storage settings are being used. reload: assert-css: ("body", { "background-color": "rgb(53, 53, 53)" }) assert-local-storage: { "rustdoc-theme": "dark" } // Now we go to the settings page. -click: "#settings-menu" -wait-for: ".settings" +goto: file://|DOC_PATH|/settings.html +wait-for: "#settings" // We change the theme to "light". click: "#theme-light" wait-for-css: ("body", { "background-color": "rgb(255, 255, 255)" }) @@ -18,7 +22,7 @@ assert-local-storage: { "rustdoc-theme": "light" } // We go back in history. history-go-back: // Confirm that we're not on the settings page. -assert-false: ".settings" +assert-false: "#settings" // Check that the current theme is still "light". assert-css: ("body", { "background-color": "rgb(255, 255, 255)" }) assert-local-storage: { "rustdoc-theme": "light" } |