Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit df26fdf

Browse files
matthiaskrgrmatthiaskrgr
authoredJun 26, 2022
Rollup merge of #98297 - GuillaumeGomez:help-pocket-menu, r=notriddle
Transform help popup into a pocket menu Just like we moved the settings menu into a "pocket menu", it's doing the same to the help popup. You can test it [here](https://rustdoc.crud.net/imperio/help-pocket-menu/doc/foo/index.html) and here is a screenshot: ![Screenshot from 2022-06-20 20-58-29](https://user-images.githubusercontent.com/3050060/174663718-538e9d11-3bf9-48b2-8909-f9bfe75af135.png) r? ``````````@jsha``````````
2 parents e8a2e26 + e4b2b41 commit df26fdf

File tree

11 files changed

+248
-184
lines changed

11 files changed

+248
-184
lines changed
 

‎src/librustdoc/html/static/css/rustdoc.css

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -983,60 +983,69 @@ table,
983983
font-weight: normal;
984984
}
985985

986-
body.blur > :not(#help) {
987-
filter: blur(8px);
988-
-webkit-filter: blur(8px);
989-
opacity: .7;
986+
.popover {
987+
font-size: 1rem;
988+
position: absolute;
989+
right: 0;
990+
z-index: 2;
991+
display: block;
992+
margin-top: 7px;
993+
border-radius: 3px;
994+
border: 1px solid;
995+
font-size: 1rem;
990996
}
991997

992-
#help {
993-
width: 100%;
994-
height: 100vh;
995-
position: fixed;
996-
top: 0;
997-
left: 0;
998-
display: flex;
999-
justify-content: center;
1000-
align-items: center;
998+
/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
999+
.popover::before {
1000+
content: '';
1001+
position: absolute;
1002+
right: 11px;
1003+
border: solid;
1004+
border-width: 1px 1px 0 0;
1005+
display: inline-block;
1006+
padding: 4px;
1007+
transform: rotate(-45deg);
1008+
top: -5px;
10011009
}
1002-
#help > div {
1003-
flex: 0 0 auto;
1004-
box-shadow: 0 0 6px rgba(0,0,0,.2);
1005-
width: 550px;
1006-
height: auto;
1007-
border: 1px solid;
1010+
1011+
#help-button .popover {
1012+
max-width: 600px;
10081013
}
1009-
#help dt {
1014+
1015+
#help-button .popover::before {
1016+
right: 48px;
1017+
}
1018+
1019+
#help-button dt {
10101020
float: left;
10111021
clear: left;
10121022
display: block;
10131023
margin-right: 0.5rem;
10141024
}
1015-
#help span.top, #help span.bottom {
1025+
#help-button span.top, #help-button span.bottom {
10161026
text-align: center;
10171027
display: block;
10181028
font-size: 1.125rem;
1019-
10201029
}
1021-
#help span.top {
1030+
#help-button span.top {
10221031
text-align: center;
10231032
display: block;
10241033
margin: 10px 0;
10251034
border-bottom: 1px solid;
10261035
padding-bottom: 4px;
10271036
margin-bottom: 6px;
10281037
}
1029-
#help span.bottom {
1038+
#help-button span.bottom {
10301039
clear: both;
10311040
border-top: 1px solid;
10321041
}
1033-
#help dd { margin: 5px 35px; }
1034-
#help .infos { padding-left: 0; }
1035-
#help h1, #help h2 { margin-top: 0; }
1036-
#help > div div {
1042+
.side-by-side {
1043+
text-align: initial;
1044+
}
1045+
.side-by-side > div {
10371046
width: 50%;
10381047
float: left;
1039-
padding: 0 20px 20px 17px;;
1048+
padding: 0 20px 20px 17px;
10401049
}
10411050

10421051
.item-info .stab {
@@ -1391,7 +1400,7 @@ pre.rust {
13911400
#copy-path {
13921401
height: 34px;
13931402
}
1394-
#settings-menu > a, #help-button, #copy-path {
1403+
#settings-menu > a, #help-button > button, #copy-path {
13951404
padding: 5px;
13961405
width: 33px;
13971406
border: 1px solid;
@@ -1401,9 +1410,8 @@ pre.rust {
14011410
#settings-menu {
14021411
padding: 0;
14031412
}
1404-
#settings-menu > a {
1413+
#settings-menu > a, #help-button > button {
14051414
padding: 5px;
1406-
width: 100%;
14071415
height: 100%;
14081416
display: block;
14091417
}
@@ -1420,7 +1428,7 @@ pre.rust {
14201428
animation: rotating 2s linear infinite;
14211429
}
14221430

1423-
#help-button {
1431+
#help-button > button {
14241432
font-family: "Fira Sans", Arial, sans-serif;
14251433
text-align: center;
14261434
/* Rare exception to specifying font sizes in rem. Since this is acting

‎src/librustdoc/html/static/css/settings.css

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -86,27 +86,6 @@ input:checked + .slider:before {
8686
display: block;
8787
}
8888

89-
div#settings {
90-
position: absolute;
91-
right: 0;
92-
z-index: 1;
93-
display: block;
94-
margin-top: 7px;
95-
border-radius: 3px;
96-
border: 1px solid;
97-
}
9889
#settings .setting-line {
9990
margin: 1.2em 0.6em;
10091
}
101-
/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
102-
div#settings::before {
103-
content: '';
104-
position: absolute;
105-
right: 11px;
106-
border: solid;
107-
border-width: 1px 1px 0 0;
108-
display: inline-block;
109-
padding: 4px;
110-
transform: rotate(-45deg);
111-
top: -5px;
112-
}

‎src/librustdoc/html/static/css/themes/ayu.css

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Original by Dempfi (https://github.com/dempfi/ayu)
55

66
/* General structure and fonts */
77

8-
body, #settings-menu #settings, #settings-menu #settings::before {
8+
body, .popover, .popover::before {
99
background-color: #0f1419;
1010
color: #c5c5c5;
1111
}
@@ -567,7 +567,7 @@ kbd {
567567
box-shadow: inset 0 -1px 0 #5c6773;
568568
}
569569

570-
#settings-menu > a, #help-button {
570+
#settings-menu > a, #help-button > button {
571571
border-color: #5c6773;
572572
background-color: #0f1419;
573573
color: #fff;
@@ -577,7 +577,8 @@ kbd {
577577
filter: invert(100);
578578
}
579579

580-
#settings-menu #settings, #settings-menu #settings::before {
580+
.popover, .popover::before,
581+
#help-button span.top, #help-button span.bottom {
581582
border-color: #5c6773;
582583
}
583584

@@ -592,7 +593,7 @@ kbd {
592593
}
593594

594595
#settings-menu > a:hover, #settings-menu > a:focus,
595-
#help-button:hover, #help-button:focus {
596+
#help-button > button:hover, #help-button > button:focus {
596597
border-color: #e0e0e0;
597598
}
598599

‎src/librustdoc/html/static/css/themes/dark.css

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
body, #settings-menu #settings, #settings-menu #settings::before {
1+
body, .popover, .popover::before {
22
background-color: #353535;
33
color: #ddd;
44
}
@@ -442,18 +442,19 @@ kbd {
442442
box-shadow: inset 0 -1px 0 #c6cbd1;
443443
}
444444

445-
#settings-menu > a, #help-button {
445+
#settings-menu > a, #help-button > button {
446446
border-color: #e0e0e0;
447447
background: #f0f0f0;
448448
color: #000;
449449
}
450450

451451
#settings-menu > a:hover, #settings-menu > a:focus,
452-
#help-button:hover, #help-button:focus {
452+
#help-button > button:hover, #help-button > button:focus {
453453
border-color: #ffb900;
454454
}
455455

456-
#settings-menu #settings, #settings-menu #settings::before {
456+
.popover, .popover::before,
457+
#help-button span.top, #help-button span.bottom {
457458
border-color: #d2d2d2;
458459
}
459460

‎src/librustdoc/html/static/css/themes/light.css

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* General structure and fonts */
22

3-
body, #settings-menu #settings, #settings-menu #settings::before {
3+
body, .popover, .popover::before {
44
background-color: white;
55
color: black;
66
}
@@ -427,17 +427,18 @@ kbd {
427427
box-shadow: inset 0 -1px 0 #c6cbd1;
428428
}
429429

430-
#settings-menu > a, #help-button {
430+
#settings-menu > a, #help-button > button {
431431
border-color: #e0e0e0;
432432
background-color: #fff;
433433
}
434434

435435
#settings-menu > a:hover, #settings-menu > a:focus,
436-
#help-button:hover, #help-button:focus {
436+
#help-button > button:hover, #help-button > button:focus {
437437
border-color: #717171;
438438
}
439439

440-
#settings-menu #settings, #settings-menu #settings::before {
440+
.popover, .popover::before,
441+
#help-button span.top, #help-button span.bottom {
441442
border-color: #DDDDDD;
442443
}
443444

‎src/librustdoc/html/static/js/main.js

Lines changed: 103 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,24 @@ function showMain() {
6363
removeClass(document.getElementById(MAIN_ID), "hidden");
6464
}
6565

66+
function elemIsInParent(elem, parent) {
67+
while (elem && elem !== document.body) {
68+
if (elem === parent) {
69+
return true;
70+
}
71+
elem = elem.parentElement;
72+
}
73+
return false;
74+
}
75+
76+
function blurHandler(event, parentElem, hideCallback) {
77+
if (!elemIsInParent(document.activeElement, parentElem) &&
78+
!elemIsInParent(event.relatedTarget, parentElem)
79+
) {
80+
hideCallback();
81+
}
82+
}
83+
6684
(function() {
6785
window.rootPath = getVar("root-path");
6886
window.currentCrate = getVar("current-crate");
@@ -104,20 +122,21 @@ const MAIN_ID = "main-content";
104122
const SETTINGS_BUTTON_ID = "settings-menu";
105123
const ALTERNATIVE_DISPLAY_ID = "alternative-display";
106124
const NOT_DISPLAYED_ID = "not-displayed";
125+
const HELP_BUTTON_ID = "help-button";
107126

108127
function getSettingsButton() {
109128
return document.getElementById(SETTINGS_BUTTON_ID);
110129
}
111130

131+
function getHelpButton() {
132+
return document.getElementById(HELP_BUTTON_ID);
133+
}
134+
112135
// Returns the current URL without any query parameter or hash.
113136
function getNakedUrl() {
114137
return window.location.href.split("?")[0].split("#")[0];
115138
}
116139

117-
window.hideSettings = () => {
118-
// Does nothing by default.
119-
};
120-
121140
/**
122141
* This function inserts `newNode` after `referenceNode`. It doesn't work if `referenceNode`
123142
* doesn't have a parent node.
@@ -381,55 +400,16 @@ function loadCss(cssFileName) {
381400
openParentDetails(document.getElementById(id));
382401
}
383402

384-
function getHelpElement(build) {
385-
if (build) {
386-
buildHelperPopup();
387-
}
388-
return document.getElementById("help");
389-
}
390-
391-
/**
392-
* Show the help popup.
393-
*
394-
* @param {boolean} display - Whether to show or hide the popup
395-
* @param {Event} ev - The event that triggered this call
396-
* @param {Element} [help] - The help element if it already exists
397-
*/
398-
function displayHelp(display, ev, help) {
399-
if (display) {
400-
help = help ? help : getHelpElement(true);
401-
if (hasClass(help, "hidden")) {
402-
ev.preventDefault();
403-
removeClass(help, "hidden");
404-
addClass(document.body, "blur");
405-
}
406-
} else {
407-
// No need to build the help popup if we want to hide it in case it hasn't been
408-
// built yet...
409-
help = help ? help : getHelpElement(false);
410-
if (help && !hasClass(help, "hidden")) {
411-
ev.preventDefault();
412-
addClass(help, "hidden");
413-
removeClass(document.body, "blur");
414-
}
415-
}
416-
}
417-
418403
function handleEscape(ev) {
419404
searchState.clearInputTimeout();
420-
const help = getHelpElement(false);
421-
if (help && !hasClass(help, "hidden")) {
422-
displayHelp(false, ev, help);
423-
} else {
424-
switchDisplayedElement(null);
425-
if (browserSupportsHistoryApi()) {
426-
history.replaceState(null, window.currentCrate + " - Rust",
427-
getNakedUrl() + window.location.hash);
428-
}
429-
ev.preventDefault();
405+
switchDisplayedElement(null);
406+
if (browserSupportsHistoryApi()) {
407+
history.replaceState(null, window.currentCrate + " - Rust",
408+
getNakedUrl() + window.location.hash);
430409
}
410+
ev.preventDefault();
431411
searchState.defocus();
432-
window.hideSettings();
412+
window.hidePopoverMenus();
433413
}
434414

435415
const disableShortcuts = getSettingValue("disable-shortcuts") === "true";
@@ -453,7 +433,6 @@ function loadCss(cssFileName) {
453433

454434
case "s":
455435
case "S":
456-
displayHelp(false, ev);
457436
ev.preventDefault();
458437
searchState.focus();
459438
break;
@@ -465,7 +444,7 @@ function loadCss(cssFileName) {
465444
break;
466445

467446
case "?":
468-
displayHelp(true, ev);
447+
showHelp();
469448
break;
470449

471450
default:
@@ -796,9 +775,6 @@ function loadCss(cssFileName) {
796775
elem.addEventListener("click", f);
797776
}
798777
}
799-
handleClick("help-button", ev => {
800-
displayHelp(true, ev);
801-
});
802778
handleClick(MAIN_ID, () => {
803779
hideSidebar();
804780
});
@@ -842,24 +818,16 @@ function loadCss(cssFileName) {
842818
});
843819
}
844820

845-
let buildHelperPopup = () => {
846-
const popup = document.createElement("aside");
847-
addClass(popup, "hidden");
848-
popup.id = "help";
849-
850-
popup.addEventListener("click", ev => {
851-
if (ev.target === popup) {
852-
// Clicked the blurred zone outside the help popup; dismiss help.
853-
displayHelp(false, ev);
854-
}
855-
});
821+
function helpBlurHandler(event) {
822+
blurHandler(event, getHelpButton(), window.hidePopoverMenus);
823+
}
856824

825+
function buildHelpMenu() {
857826
const book_info = document.createElement("span");
858827
book_info.className = "top";
859828
book_info.innerHTML = "You can find more information in \
860829
<a href=\"https://doc.rust-lang.org/rustdoc/\">the rustdoc book</a>.";
861830

862-
const container = document.createElement("div");
863831
const shortcuts = [
864832
["?", "Show this help dialog"],
865833
["S", "Focus the search field"],
@@ -895,24 +863,85 @@ function loadCss(cssFileName) {
895863
addClass(div_infos, "infos");
896864
div_infos.innerHTML = "<h2>Search Tricks</h2>" + infos;
897865

898-
container.appendChild(book_info);
899-
container.appendChild(div_shortcuts);
900-
container.appendChild(div_infos);
901-
902866
const rustdoc_version = document.createElement("span");
903867
rustdoc_version.className = "bottom";
904868
const rustdoc_version_code = document.createElement("code");
905869
rustdoc_version_code.innerText = "rustdoc " + getVar("rustdoc-version");
906870
rustdoc_version.appendChild(rustdoc_version_code);
907871

872+
const container = document.createElement("div");
873+
container.className = "popover";
874+
container.style.display = "none";
875+
876+
const side_by_side = document.createElement("div");
877+
side_by_side.className = "side-by-side";
878+
side_by_side.appendChild(div_shortcuts);
879+
side_by_side.appendChild(div_infos);
880+
881+
container.appendChild(book_info);
882+
container.appendChild(side_by_side);
908883
container.appendChild(rustdoc_version);
909884

910-
popup.appendChild(container);
911-
insertAfter(popup, document.querySelector("main"));
912-
// So that it's only built once and then it'll do nothing when called!
913-
buildHelperPopup = () => {};
885+
const help_button = getHelpButton();
886+
help_button.appendChild(container);
887+
888+
container.onblur = helpBlurHandler;
889+
container.onclick = event => {
890+
event.preventDefault();
891+
};
892+
help_button.onblur = helpBlurHandler;
893+
help_button.children[0].onblur = helpBlurHandler;
894+
895+
return container;
896+
}
897+
898+
/**
899+
* Hide all the popover menus.
900+
*/
901+
window.hidePopoverMenus = function() {
902+
onEachLazy(document.querySelectorAll(".search-container .popover"), elem => {
903+
elem.style.display = "none";
904+
});
914905
};
915906

907+
/**
908+
* Returns the help menu element (not the button).
909+
*
910+
* @param {boolean} buildNeeded - If this argument is `false`, the help menu element won't be
911+
* built if it doesn't exist.
912+
*
913+
* @return {HTMLElement}
914+
*/
915+
function getHelpMenu(buildNeeded) {
916+
let menu = getHelpButton().querySelector(".popover");
917+
if (!menu && buildNeeded) {
918+
menu = buildHelpMenu();
919+
}
920+
return menu;
921+
}
922+
923+
/**
924+
* Show the help popup menu.
925+
*/
926+
function showHelp() {
927+
const menu = getHelpMenu(true);
928+
if (menu.style.display === "none") {
929+
menu.style.display = "";
930+
}
931+
}
932+
933+
document.querySelector(`#${HELP_BUTTON_ID} > button`).addEventListener("click", event => {
934+
const target = event.target;
935+
if (target.tagName !== "BUTTON" || target.parentElement.id !== HELP_BUTTON_ID) {
936+
return;
937+
}
938+
const menu = getHelpMenu(true);
939+
const shouldShowHelp = menu.style.display === "none";
940+
if (shouldShowHelp) {
941+
showHelp();
942+
}
943+
});
944+
916945
setMobileTopbar();
917946
addSidebarItems();
918947
addSidebarCrates();

‎src/librustdoc/html/static/js/settings.js

Lines changed: 12 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Local js definitions:
22
/* global getSettingValue, getVirtualKey, updateLocalStorage, updateSystemTheme */
3-
/* global addClass, removeClass, onEach, onEachLazy */
3+
/* global addClass, removeClass, onEach, onEachLazy, blurHandler, elemIsInParent */
44
/* global MAIN_ID, getVar, getSettingsButton */
55

66
"use strict";
@@ -209,6 +209,7 @@
209209
const innerHTML = `<div class="settings">${buildSettingsPageSections(settings)}</div>`;
210210
const el = document.createElement(elementKind);
211211
el.id = "settings";
212+
el.className = "popover";
212213
el.innerHTML = innerHTML;
213214

214215
if (isSettingsPage) {
@@ -226,23 +227,8 @@
226227
settingsMenu.style.display = "";
227228
}
228229

229-
function elemIsInParent(elem, parent) {
230-
while (elem && elem !== document.body) {
231-
if (elem === parent) {
232-
return true;
233-
}
234-
elem = elem.parentElement;
235-
}
236-
return false;
237-
}
238-
239-
function blurHandler(event) {
240-
const settingsButton = getSettingsButton();
241-
if (!elemIsInParent(document.activeElement, settingsButton) &&
242-
!elemIsInParent(event.relatedTarget, settingsButton)
243-
) {
244-
window.hideSettings();
245-
}
230+
function settingsBlurHandler(event) {
231+
blurHandler(event, getSettingsButton(), window.hidePopoverMenus);
246232
}
247233

248234
if (isSettingsPage) {
@@ -254,26 +240,24 @@
254240
// We replace the existing "onclick" callback.
255241
const settingsButton = getSettingsButton();
256242
const settingsMenu = document.getElementById("settings");
257-
window.hideSettings = function() {
258-
settingsMenu.style.display = "none";
259-
};
260243
settingsButton.onclick = function(event) {
261244
if (elemIsInParent(event.target, settingsMenu)) {
262245
return;
263246
}
264247
event.preventDefault();
265-
if (settingsMenu.style.display !== "none") {
266-
window.hideSettings();
267-
} else {
248+
const shouldDisplaySettings = settingsMenu.style.display === "none";
249+
250+
window.hidePopoverMenus();
251+
if (shouldDisplaySettings) {
268252
displaySettings();
269253
}
270254
};
271-
settingsButton.onblur = blurHandler;
272-
settingsButton.querySelector("a").onblur = blurHandler;
255+
settingsButton.onblur = settingsBlurHandler;
256+
settingsButton.querySelector("a").onblur = settingsBlurHandler;
273257
onEachLazy(settingsMenu.querySelectorAll("input"), el => {
274-
el.onblur = blurHandler;
258+
el.onblur = settingsBlurHandler;
275259
});
276-
settingsMenu.onblur = blurHandler;
260+
settingsMenu.onblur = settingsBlurHandler;
277261
}
278262

279263
// We now wait a bit for the web browser to end re-computing the DOM...

‎src/librustdoc/html/templates/page.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,9 @@ <h2 class="location"></h2>
119119
spellcheck="false" {# -#}
120120
placeholder="Click or press ‘S’ to search, ‘?’ for more options…" {# -#}
121121
type="search"> {#- -#}
122-
<button type="button" id="help-button" title="help">?</button> {#- -#}
122+
<div id="help-button" title="help" tabindex="-1"> {#- -#}
123+
<button type="button">?</button> {#- -#}
124+
</div> {#- -#}
123125
<div id="settings-menu" tabindex="-1">
124126
<a href="{{page.root_path|safe}}settings.html" title="settings"> {#- -#}
125127
<img width="22" height="22" alt="Change settings" {# -#}

‎src/test/rustdoc-gui/escape-key.goml

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,25 +21,13 @@ wait-for: "#alternative-display #search"
2121
assert-attribute: ("#main-content", {"class": "content hidden"})
2222
assert-document-property: ({"URL": "index.html?search=test"}, ENDS_WITH)
2323

24-
// Now let's check that when the help popup is displayed and we press Escape, it doesn't
25-
// hide the search results too.
26-
click: "#help-button"
27-
assert-document-property: ({"URL": "index.html?search=test"}, [ENDS_WITH])
28-
assert-attribute: ("#help", {"class": ""})
29-
press-key: "Escape"
30-
wait-for: "#alternative-display #search"
31-
assert-attribute: ("#help", {"class": "hidden"})
32-
assert-attribute: ("#main-content", {"class": "content hidden"})
33-
assert-document-property: ({"URL": "index.html?search=test"}, [ENDS_WITH])
34-
3524
// Check that Escape hides the search results when a search result is focused.
3625
focus: ".search-input"
3726
assert: ".search-input:focus"
3827
press-key: "ArrowDown"
3928
assert-false: ".search-input:focus"
4029
assert: "#results a:focus"
4130
press-key: "Escape"
42-
assert-attribute: ("#help", {"class": "hidden"})
4331
wait-for: "#not-displayed #search"
4432
assert-false: "#alternative-display #search"
4533
assert-attribute: ("#main-content", {"class": "content"})

‎src/test/rustdoc-gui/pocket-menu.goml

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
// This test ensures that the "pocket menus" are working as expected.
2+
goto: file://|DOC_PATH|/test_docs/index.html
3+
// First we check that the help menu doesn't exist yet.
4+
assert-false: "#help-button .popover"
5+
// Then we display the help menu.
6+
click: "#help-button"
7+
assert: "#help-button .popover"
8+
assert-css: ("#help-button .popover", {"display": "block"})
9+
10+
// Now we click somewhere else on the page to ensure it is handling the blur event
11+
// correctly.
12+
click: ".sidebar"
13+
assert-css: ("#help-button .popover", {"display": "none"})
14+
15+
// Now we will check that we cannot have two "pocket menus" displayed at the same time.
16+
click: "#help-button"
17+
assert-css: ("#help-button .popover", {"display": "block"})
18+
click: "#settings-menu"
19+
assert-css: ("#help-button .popover", {"display": "none"})
20+
assert-css: ("#settings-menu .popover", {"display": "block"})
21+
22+
// Now the other way.
23+
click: "#help-button"
24+
assert-css: ("#help-button .popover", {"display": "block"})
25+
assert-css: ("#settings-menu .popover", {"display": "none"})
26+
27+
// We check the borders color now:
28+
29+
// Ayu theme
30+
local-storage: {
31+
"rustdoc-theme": "ayu",
32+
"rustdoc-use-system-theme": "false",
33+
}
34+
reload:
35+
36+
click: "#help-button"
37+
assert-css: (
38+
"#help-button .popover",
39+
{"display": "block", "border-color": "rgb(92, 103, 115)"},
40+
)
41+
compare-elements-css: ("#help-button .popover", "#help-button .top", ["border-color"])
42+
compare-elements-css: ("#help-button .popover", "#help-button .bottom", ["border-color"])
43+
44+
// Dark theme
45+
local-storage: {
46+
"rustdoc-theme": "dark",
47+
"rustdoc-use-system-theme": "false",
48+
}
49+
reload:
50+
51+
click: "#help-button"
52+
assert-css: (
53+
"#help-button .popover",
54+
{"display": "block", "border-color": "rgb(210, 210, 210)"},
55+
)
56+
compare-elements-css: ("#help-button .popover", "#help-button .top", ["border-color"])
57+
compare-elements-css: ("#help-button .popover", "#help-button .bottom", ["border-color"])
58+
59+
// Light theme
60+
local-storage: {
61+
"rustdoc-theme": "light",
62+
"rustdoc-use-system-theme": "false",
63+
}
64+
reload:
65+
66+
click: "#help-button"
67+
assert-css: (
68+
"#help-button .popover",
69+
{"display": "block", "border-color": "rgb(221, 221, 221)"},
70+
)
71+
compare-elements-css: ("#help-button .popover", "#help-button .top", ["border-color"])
72+
compare-elements-css: ("#help-button .popover", "#help-button .bottom", ["border-color"])

‎src/test/rustdoc-gui/shortcuts.goml

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ press-key: "Escape"
88
assert-false: "input.search-input:focus"
99
// We now check for the help popup.
1010
press-key: "?"
11-
assert-css: ("#help", {"display": "flex"})
12-
assert-false: "#help.hidden"
11+
assert-css: ("#help-button .popover", {"display": "block"})
1312
press-key: "Escape"
14-
assert-css: ("#help.hidden", {"display": "none"})
13+
assert-css: ("#help-button .popover", {"display": "none"})

0 commit comments

Comments
 (0)
Please sign in to comment.