diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index d0229bdb5f23c..77062770c189d 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -979,42 +979,51 @@ table,
font-weight: normal;
}
-body.blur > :not(#help) {
- filter: blur(8px);
- -webkit-filter: blur(8px);
- opacity: .7;
+.popover {
+ font-size: 1rem;
+ position: absolute;
+ right: 0;
+ z-index: 2;
+ display: block;
+ margin-top: 7px;
+ border-radius: 3px;
+ border: 1px solid;
+ font-size: 1rem;
}
-#help {
- width: 100%;
- height: 100vh;
- position: fixed;
- top: 0;
- left: 0;
- display: flex;
- justify-content: center;
- align-items: center;
+/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
+.popover::before {
+ content: '';
+ position: absolute;
+ right: 11px;
+ border: solid;
+ border-width: 1px 1px 0 0;
+ display: inline-block;
+ padding: 4px;
+ transform: rotate(-45deg);
+ top: -5px;
}
-#help > div {
- flex: 0 0 auto;
- box-shadow: 0 0 6px rgba(0,0,0,.2);
- width: 550px;
- height: auto;
- border: 1px solid;
+
+#help-button .popover {
+ max-width: 600px;
}
-#help dt {
+
+#help-button .popover::before {
+ right: 48px;
+}
+
+#help-button dt {
float: left;
clear: left;
display: block;
margin-right: 0.5rem;
}
-#help span.top, #help span.bottom {
+#help-button span.top, #help-button span.bottom {
text-align: center;
display: block;
font-size: 1.125rem;
-
}
-#help span.top {
+#help-button span.top {
text-align: center;
display: block;
margin: 10px 0;
@@ -1022,17 +1031,17 @@ body.blur > :not(#help) {
padding-bottom: 4px;
margin-bottom: 6px;
}
-#help span.bottom {
+#help-button span.bottom {
clear: both;
border-top: 1px solid;
}
-#help dd { margin: 5px 35px; }
-#help .infos { padding-left: 0; }
-#help h1, #help h2 { margin-top: 0; }
-#help > div div {
+.side-by-side {
+ text-align: initial;
+}
+.side-by-side > div {
width: 50%;
float: left;
- padding: 0 20px 20px 17px;;
+ padding: 0 20px 20px 17px;
}
.item-info .stab {
@@ -1387,7 +1396,7 @@ pre.rust {
#copy-path {
height: 34px;
}
-#settings-menu > a, #help-button, #copy-path {
+#settings-menu > a, #help-button > button, #copy-path {
padding: 5px;
width: 33px;
border: 1px solid;
@@ -1397,9 +1406,8 @@ pre.rust {
#settings-menu {
padding: 0;
}
-#settings-menu > a {
+#settings-menu > a, #help-button > button {
padding: 5px;
- width: 100%;
height: 100%;
display: block;
}
@@ -1416,7 +1424,7 @@ pre.rust {
animation: rotating 2s linear infinite;
}
-#help-button {
+#help-button > button {
font-family: "Fira Sans", Arial, sans-serif;
text-align: center;
/* Rare exception to specifying font sizes in rem. Since this is acting
diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css
index 1cd8e39e03648..e531e6ce6bbde 100644
--- a/src/librustdoc/html/static/css/settings.css
+++ b/src/librustdoc/html/static/css/settings.css
@@ -86,27 +86,6 @@ input:checked + .slider:before {
display: block;
}
-div#settings {
- position: absolute;
- right: 0;
- z-index: 1;
- display: block;
- margin-top: 7px;
- border-radius: 3px;
- border: 1px solid;
-}
#settings .setting-line {
margin: 1.2em 0.6em;
}
-/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
-div#settings::before {
- content: '';
- position: absolute;
- right: 11px;
- border: solid;
- border-width: 1px 1px 0 0;
- display: inline-block;
- padding: 4px;
- transform: rotate(-45deg);
- top: -5px;
-}
diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index 8e0521d9ad6a1..d27294657192c 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -5,7 +5,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
/* General structure and fonts */
-body, #settings-menu #settings, #settings-menu #settings::before {
+body, .popover, .popover::before {
background-color: #0f1419;
color: #c5c5c5;
}
@@ -567,7 +567,7 @@ kbd {
box-shadow: inset 0 -1px 0 #5c6773;
}
-#settings-menu > a, #help-button {
+#settings-menu > a, #help-button > button {
border-color: #5c6773;
background-color: #0f1419;
color: #fff;
@@ -577,7 +577,8 @@ kbd {
filter: invert(100);
}
-#settings-menu #settings, #settings-menu #settings::before {
+.popover, .popover::before,
+#help-button span.top, #help-button span.bottom {
border-color: #5c6773;
}
@@ -592,7 +593,7 @@ kbd {
}
#settings-menu > a:hover, #settings-menu > a:focus,
-#help-button:hover, #help-button:focus {
+#help-button > button:hover, #help-button > button:focus {
border-color: #e0e0e0;
}
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index 071ad006ed350..48079ea2f3041 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -1,4 +1,4 @@
-body, #settings-menu #settings, #settings-menu #settings::before {
+body, .popover, .popover::before {
background-color: #353535;
color: #ddd;
}
@@ -442,18 +442,19 @@ kbd {
box-shadow: inset 0 -1px 0 #c6cbd1;
}
-#settings-menu > a, #help-button {
+#settings-menu > a, #help-button > button {
border-color: #e0e0e0;
background: #f0f0f0;
color: #000;
}
#settings-menu > a:hover, #settings-menu > a:focus,
-#help-button:hover, #help-button:focus {
+#help-button > button:hover, #help-button > button:focus {
border-color: #ffb900;
}
-#settings-menu #settings, #settings-menu #settings::before {
+.popover, .popover::before,
+#help-button span.top, #help-button span.bottom {
border-color: #d2d2d2;
}
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index 5c3789bf4630a..f4016be967963 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -1,6 +1,6 @@
/* General structure and fonts */
-body, #settings-menu #settings, #settings-menu #settings::before {
+body, .popover, .popover::before {
background-color: white;
color: black;
}
@@ -427,17 +427,18 @@ kbd {
box-shadow: inset 0 -1px 0 #c6cbd1;
}
-#settings-menu > a, #help-button {
+#settings-menu > a, #help-button > button {
border-color: #e0e0e0;
background-color: #fff;
}
#settings-menu > a:hover, #settings-menu > a:focus,
-#help-button:hover, #help-button:focus {
+#help-button > button:hover, #help-button > button:focus {
border-color: #717171;
}
-#settings-menu #settings, #settings-menu #settings::before {
+.popover, .popover::before,
+#help-button span.top, #help-button span.bottom {
border-color: #DDDDDD;
}
diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index b320db9104612..1ea645d3e6594 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@@ -63,6 +63,24 @@ function showMain() {
removeClass(document.getElementById(MAIN_ID), "hidden");
}
+function elemIsInParent(elem, parent) {
+ while (elem && elem !== document.body) {
+ if (elem === parent) {
+ return true;
+ }
+ elem = elem.parentElement;
+ }
+ return false;
+}
+
+function blurHandler(event, parentElem, hideCallback) {
+ if (!elemIsInParent(document.activeElement, parentElem) &&
+ !elemIsInParent(event.relatedTarget, parentElem)
+ ) {
+ hideCallback();
+ }
+}
+
(function() {
window.rootPath = getVar("root-path");
window.currentCrate = getVar("current-crate");
@@ -104,11 +122,16 @@ const MAIN_ID = "main-content";
const SETTINGS_BUTTON_ID = "settings-menu";
const ALTERNATIVE_DISPLAY_ID = "alternative-display";
const NOT_DISPLAYED_ID = "not-displayed";
+const HELP_BUTTON_ID = "help-button";
function getSettingsButton() {
return document.getElementById(SETTINGS_BUTTON_ID);
}
+function getHelpButton() {
+ return document.getElementById(HELP_BUTTON_ID);
+}
+
// Returns the current URL without any query parameter or hash.
function getNakedUrl() {
return window.location.href.split("?")[0].split("#")[0];
@@ -381,55 +404,17 @@ function loadCss(cssFileName) {
openParentDetails(document.getElementById(id));
}
- function getHelpElement(build) {
- if (build) {
- buildHelperPopup();
- }
- return document.getElementById("help");
- }
-
- /**
- * Show the help popup.
- *
- * @param {boolean} display - Whether to show or hide the popup
- * @param {Event} ev - The event that triggered this call
- * @param {Element} [help] - The help element if it already exists
- */
- function displayHelp(display, ev, help) {
- if (display) {
- help = help ? help : getHelpElement(true);
- if (hasClass(help, "hidden")) {
- ev.preventDefault();
- removeClass(help, "hidden");
- addClass(document.body, "blur");
- }
- } else {
- // No need to build the help popup if we want to hide it in case it hasn't been
- // built yet...
- help = help ? help : getHelpElement(false);
- if (help && !hasClass(help, "hidden")) {
- ev.preventDefault();
- addClass(help, "hidden");
- removeClass(document.body, "blur");
- }
- }
- }
-
function handleEscape(ev) {
searchState.clearInputTimeout();
- const help = getHelpElement(false);
- if (help && !hasClass(help, "hidden")) {
- displayHelp(false, ev, help);
- } else {
- switchDisplayedElement(null);
- if (browserSupportsHistoryApi()) {
- history.replaceState(null, window.currentCrate + " - Rust",
- getNakedUrl() + window.location.hash);
- }
- ev.preventDefault();
+ switchDisplayedElement(null);
+ if (browserSupportsHistoryApi()) {
+ history.replaceState(null, window.currentCrate + " - Rust",
+ getNakedUrl() + window.location.hash);
}
+ ev.preventDefault();
searchState.defocus();
window.hideSettings();
+ hideHelp();
}
const disableShortcuts = getSettingValue("disable-shortcuts") === "true";
@@ -453,7 +438,6 @@ function loadCss(cssFileName) {
case "s":
case "S":
- displayHelp(false, ev);
ev.preventDefault();
searchState.focus();
break;
@@ -465,7 +449,7 @@ function loadCss(cssFileName) {
break;
case "?":
- displayHelp(true, ev);
+ showHelp();
break;
default:
@@ -796,9 +780,6 @@ function loadCss(cssFileName) {
elem.addEventListener("click", f);
}
}
- handleClick("help-button", ev => {
- displayHelp(true, ev);
- });
handleClick(MAIN_ID, () => {
hideSidebar();
});
@@ -842,24 +823,16 @@ function loadCss(cssFileName) {
});
}
- let buildHelperPopup = () => {
- const popup = document.createElement("aside");
- addClass(popup, "hidden");
- popup.id = "help";
-
- popup.addEventListener("click", ev => {
- if (ev.target === popup) {
- // Clicked the blurred zone outside the help popup; dismiss help.
- displayHelp(false, ev);
- }
- });
+ function helpBlurHandler(event) {
+ blurHandler(event, getHelpButton(), hideHelp);
+ }
+ function buildHelpMenu() {
const book_info = document.createElement("span");
book_info.className = "top";
book_info.innerHTML = "You can find more information in \
the rustdoc book.";
- const container = document.createElement("div");
const shortcuts = [
["?", "Show this help dialog"],
["S", "Focus the search field"],
@@ -895,23 +868,86 @@ function loadCss(cssFileName) {
addClass(div_infos, "infos");
div_infos.innerHTML = "Search Tricks
" + infos;
- container.appendChild(book_info);
- container.appendChild(div_shortcuts);
- container.appendChild(div_infos);
-
const rustdoc_version = document.createElement("span");
rustdoc_version.className = "bottom";
const rustdoc_version_code = document.createElement("code");
rustdoc_version_code.innerText = "rustdoc " + getVar("rustdoc-version");
rustdoc_version.appendChild(rustdoc_version_code);
+ const container = document.createElement("div");
+ container.className = "popover";
+ container.style.display = "none";
+
+ const side_by_side = document.createElement("div");
+ side_by_side.className = "side-by-side";
+ side_by_side.appendChild(div_shortcuts);
+ side_by_side.appendChild(div_infos);
+
+ container.appendChild(book_info);
+ container.appendChild(side_by_side);
container.appendChild(rustdoc_version);
- popup.appendChild(container);
- insertAfter(popup, document.querySelector("main"));
- // So that it's only built once and then it'll do nothing when called!
- buildHelperPopup = () => {};
- };
+ const help_button = getHelpButton();
+ help_button.appendChild(container);
+
+ container.onblur = helpBlurHandler;
+ container.onclick = event => {
+ event.preventDefault();
+ };
+ help_button.onblur = helpBlurHandler;
+ help_button.children[0].onblur = helpBlurHandler;
+
+ return container;
+ }
+
+ /**
+ * Returns the help menu element (not the button).
+ *
+ * @param {boolean} buildNeeded - If this argument is `false`, the help menu element won't be
+ * built if it doesn't exist.
+ *
+ * @return {HTMLElement}
+ */
+ function getHelpMenu(buildNeeded) {
+ let menu = getHelpButton().querySelector(".popover");
+ if (!menu && buildNeeded) {
+ menu = buildHelpMenu();
+ }
+ return menu;
+ }
+
+ /**
+ * Show the help popup menu.
+ */
+ function showHelp() {
+ const menu = getHelpMenu(true);
+ if (menu.style.display === "none") {
+ menu.style.display = "";
+ }
+ }
+
+ /**
+ * Hide the help popup menu.
+ */
+ function hideHelp() {
+ const menu = getHelpMenu(false);
+ if (menu && menu.style.display !== "none") {
+ menu.style.display = "none";
+ }
+ }
+
+ document.querySelector(`#${HELP_BUTTON_ID} > button`).addEventListener("click", event => {
+ const target = event.target;
+ if (target.tagName !== "BUTTON" || target.parentElement.id !== HELP_BUTTON_ID) {
+ return;
+ }
+ const menu = getHelpMenu(true);
+ if (menu.style.display !== "none") {
+ hideHelp();
+ } else {
+ showHelp();
+ }
+ });
setMobileTopbar();
addSidebarItems();
diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js
index 41bf0ec895580..2445773a96542 100644
--- a/src/librustdoc/html/static/js/settings.js
+++ b/src/librustdoc/html/static/js/settings.js
@@ -1,6 +1,6 @@
// Local js definitions:
/* global getSettingValue, getVirtualKey, updateLocalStorage, updateSystemTheme */
-/* global addClass, removeClass, onEach, onEachLazy */
+/* global addClass, removeClass, onEach, onEachLazy, blurHandler, elemIsInParent */
/* global MAIN_ID, getVar, getSettingsButton */
"use strict";
@@ -209,6 +209,7 @@
const innerHTML = `${buildSettingsPageSections(settings)}
`;
const el = document.createElement(elementKind);
el.id = "settings";
+ el.className = "popover";
el.innerHTML = innerHTML;
if (isSettingsPage) {
@@ -226,23 +227,8 @@
settingsMenu.style.display = "";
}
- function elemIsInParent(elem, parent) {
- while (elem && elem !== document.body) {
- if (elem === parent) {
- return true;
- }
- elem = elem.parentElement;
- }
- return false;
- }
-
- function blurHandler(event) {
- const settingsButton = getSettingsButton();
- if (!elemIsInParent(document.activeElement, settingsButton) &&
- !elemIsInParent(event.relatedTarget, settingsButton)
- ) {
- window.hideSettings();
- }
+ function settingsBlurHandler(event) {
+ blurHandler(event, getSettingsButton(), window.hideSettings);
}
if (isSettingsPage) {
@@ -268,12 +254,12 @@
displaySettings();
}
};
- settingsButton.onblur = blurHandler;
- settingsButton.querySelector("a").onblur = blurHandler;
+ settingsButton.onblur = settingsBlurHandler;
+ settingsButton.querySelector("a").onblur = settingsBlurHandler;
onEachLazy(settingsMenu.querySelectorAll("input"), el => {
- el.onblur = blurHandler;
+ el.onblur = settingsBlurHandler;
});
- settingsMenu.onblur = blurHandler;
+ settingsMenu.onblur = settingsBlurHandler;
}
// We now wait a bit for the web browser to end re-computing the DOM...
diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html
index c4999e2c74fce..dfb3e4e6a2ccd 100644
--- a/src/librustdoc/html/templates/page.html
+++ b/src/librustdoc/html/templates/page.html
@@ -119,7 +119,9 @@
spellcheck="false" {# -#}
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
type="search"> {#- -#}
- {#- -#}
+ {#- -#}
+ {#- -#}
+
{#- -#}