Fix test cases and hide-sidebar mode

Author: notriddle

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

@@ -2021,6 +2021,8 @@ a.tooltip:hover::after {
 	display: flex;
 	margin-right: 4px;
 	position: fixed;
+	margin-top: 25px;
+	left: 6px;
 	height: 34px;
 	width: 34px;
 }
@@ -2030,8 +2032,11 @@ a.tooltip:hover::after {
 	z-index: 1;
 }
 .src #sidebar-button {
+	margin-top: 0;
+	top: 8px;
 	left: 8px;
 	z-index: calc(var(--desktop-sidebar-z-index) + 1);
+	border-color: var(--border-color);
 }
 .hide-sidebar .src #sidebar-button {
 	position: static;
@@ -2059,7 +2064,7 @@ button#toggle-all-docs {
 	min-width: 0;
 }
 #sidebar-button > a {
-	background-color: var(--sidebar-background-color);
+	background-color: var(--button-background-color);
 	width: 33px;
 }
 #sidebar-button > a:hover, #sidebar-button > a:focus-visible {
@@ -2070,6 +2075,7 @@ button#toggle-all-docs {
 .settings-menu > a:hover, .settings-menu > a:focus-visible,
 .help-menu > a:hover, #help-menu > a:focus-visible,
 #sidebar-button > a:hover, #sidebar-button > a:focus-visible,
+#copy-path:hover, #copy-path:focus-visible,
 button#toggle-all-docs:hover, button#toggle-all-docs:focus-visible {
 	border-color: var(--settings-button-border-focus);
 	text-decoration: none;
@@ -2183,7 +2189,8 @@ rustdoc-toolbar span.label {
 	margin-left: 10px;
 	padding: 0;
 	padding-left: 2px;
-	border: 0;
+	border: solid 1px transparent;
+	border-radius: var(--button-border-radius);
 	font-size: 0;
 }
 #copy-path::before {
@@ -2708,6 +2715,9 @@ in src-script.js and main.js
 	}
 
 	/* sidebar button becomes topbar button */
+	.hide-sidebar #sidebar-button {
+		margin-top: 0;
+	}
 	#sidebar-button > a::before {
 		content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" \
 			viewBox="0 0 22 22" fill="none" stroke="black">\

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

@@ -253,14 +253,9 @@ function preLoadCss(cssUrl) {
                 const out = nonnull(nonnull(window.searchState.outputElement()).parentElement);
                 const hdr = document.createElement("div");
                 hdr.className = "main-heading search-results-main-heading";
-                const rootPath = getVar("root-path");
-                const currentCrate = getVar("current-crate");
                 hdr.innerHTML = `<nav class="sub">
                     <form class="search-form">
                         <span></span> <!-- This empty span is a hacky fix for Safari: see #93184 -->
-                        <div id="sidebar-button" tabindex="-1">
-                            <a href="${rootPath}${currentCrate}/all.html" title="show sidebar"></a>
-                        </div>
                         <input
                             class="search-input"
                             name="search"
@@ -1753,7 +1748,15 @@ function preLoadCss(cssUrl) {
     // On larger, "desktop-sized" viewports (though that includes many
     // tablets), it's fixed-position, appears in the left side margin,
     // and it can be activated by resizing the sidebar into nothing.
-    const sidebarButton = document.getElementById("sidebar-button");
+    let sidebarButton = document.getElementById("sidebar-button");
+    if (!sidebarButton) {
+        sidebarButton = document.createElement("div");
+        sidebarButton.id = "sidebar-button";
+        const path = `${window.rootPath}${window.currentCrate}/all.html`;
+        sidebarButton.innerHTML = `<a href="${path}" title="show sidebar"></a>`;
+        const body = document.querySelector(".main-heading");
+        body.insertBefore(sidebarButton, body.firstChild);
+    }
     if (sidebarButton) {
         sidebarButton.addEventListener("click", e => {
             removeClass(document.documentElement, "hide-sidebar");

tests/rustdoc-gui/code-example-buttons.goml

@@ -5,25 +5,25 @@ include: "utils.goml"
 // First we check we "hover".
 move-cursor-to: ".example-wrap"
 assert-css: (".example-wrap .copy-button", { "visibility": "visible" })
-move-cursor-to: ".search-input"
+move-cursor-to: "#search-button"
 assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })
 
 // Now we check the click.
 assert-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 0)
 click: ".example-wrap"
-move-cursor-to: ".search-input"
+move-cursor-to: "#search-button"
 // It should have a new class and be visible.
 wait-for-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 1)
 wait-for-css: (".example-wrap:not(:hover) .button-holder.keep-visible", { "visibility": "visible" })
 // Clicking again will remove the class.
 click: ".example-wrap"
-move-cursor-to: ".search-input"
+move-cursor-to: "rustdoc-toolbar #search-button"
 assert-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 0)
 assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })
 
 // Clicking on the "copy code" button shouldn't make the buttons stick.
 click: ".example-wrap .copy-button"
-move-cursor-to: ".search-input"
+move-cursor-to: "#search-button"
 assert-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 0)
 assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })
 // Since we clicked on the copy button, the clipboard content should have been updated.

tests/rustdoc-gui/copy-code.goml

@@ -12,7 +12,7 @@ define-function: (
         assert-count: (".example-wrap .copy-button", 1)
         // We now ensure it's only displayed when the example is hovered.
         assert-css: (".example-wrap .copy-button", { "visibility": "visible" })
-        move-cursor-to: ".search-input"
+        move-cursor-to: "rustdoc-toolbar #search-button"
         assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })
         // Checking that the copy button has the same size as the "copy path" button.
         compare-elements-size: (

tests/rustdoc-gui/cursor.goml

@@ -8,6 +8,8 @@ assert-css: ("#toggle-all-docs", {"cursor": "pointer"})
 assert-css: ("#copy-path", {"cursor": "pointer"})
 
 // the search tabs
+click: "#search-button"
+wait-for: ".search-input"
 write-into: (".search-input", "Foo")
 // To be SURE that the search will be run.
 press-key: 'Enter'

tests/rustdoc-gui/docblock-code-block-line-number.goml

@@ -69,7 +69,7 @@ call-function: ("check-colors", {
 // and make sure it goes away.
 
 // First, open the settings menu.
-click: "#settings-menu"
+click: "rustdoc-toolbar .settings-menu"
 wait-for: "#settings"
 assert-css: ("#settings", {"display": "block"})
 
@@ -121,7 +121,7 @@ call-function: ("check-padding", {
 define-function: ("check-line-numbers-existence", [], block {
     assert-local-storage: {"rustdoc-line-numbers": "true" }
     assert-false: ".example-line-numbers"
-    click: "#settings-menu"
+    click: "rustdoc-toolbar .settings-menu"
     wait-for: "#settings"
 
     // Then, click the toggle button.
@@ -137,7 +137,7 @@ define-function: ("check-line-numbers-existence", [], block {
     // Line numbers should still be there.
     assert-css: ("[data-nosnippet]", { "display": "inline-block"})
     // Closing settings menu.
-    click: "#settings-menu"
+    click: "rustdoc-toolbar .settings-menu"
     wait-for-css: ("#settings", {"display": "none"})
 })
 
@@ -168,7 +168,7 @@ assert: ".example-wrap > pre.rust"
 assert-count: (".example-wrap", 2)
 assert-count: (".example-wrap.digits-1", 2)
 
-click: "#settings-menu"
+click: "rustdoc-toolbar .settings-menu"
 wait-for: "#settings"
 
 // Then, click the toggle button.

tests/rustdoc-gui/escape-key.goml

@@ -2,10 +2,10 @@
 // current content displayed.
 go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
 // First, we check that the search results are hidden when the Escape key is pressed.
+click: "#search-button"
+wait-for: "#search .search-switcher" // The search element is empty before the first search
 write-into: (".search-input", "test")
-// To be SURE that the search will be run.
-press-key: 'Enter'
-wait-for: "#search h1" // The search element is empty before the first search
+press-key: "Enter"
 // Check that the currently displayed element is search.
 wait-for: "#alternative-display #search"
 assert-attribute: ("#main-content", {"class": "content hidden"})
@@ -17,8 +17,8 @@ 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"
+// Check that clicking the search button brings back the search results
+click: "#search-button"
 wait-for: "#alternative-display #search"
 assert-attribute: ("#main-content", {"class": "content hidden"})
 assert-document-property: ({"URL": "index.html?search=test"}, ENDS_WITH)

tests/rustdoc-gui/globals.goml

@@ -10,6 +10,7 @@ assert-window-property: {"srcIndex": null}
 
 // Form input
 go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
+click: "#search-button"
 write-into: (".search-input", "Foo")
 press-key: 'Enter'
 wait-for: "#search-tabs"

tests/rustdoc-gui/help-page.goml

@@ -6,12 +6,12 @@ assert-css: ("#help", {"display": "block"})
 assert-css: ("#help dd", {"font-size": "16px"})
 assert-false: "#help-button > a"
 assert-css: ("#help", {"display": "block"})
-compare-elements-property: (".sub", "#help", ["offsetWidth"])
-compare-elements-position: (".sub", "#help", ["x"])
+compare-elements-property: (".main-heading", "#help", ["offsetWidth"])
+compare-elements-position: (".main-heading", "#help", ["x"])
 set-window-size: (500, 1000) // Try mobile next.
 assert-css: ("#help", {"display": "block"})
-compare-elements-property: (".sub", "#help", ["offsetWidth"])
-compare-elements-position: (".sub", "#help", ["x"])
+compare-elements-property: (".main-heading", "#help", ["offsetWidth"])
+compare-elements-position: (".main-heading", "#help", ["x"])
 
 // Checking the color of the elements of the help menu.
 show-text: true
@@ -54,19 +54,17 @@ go-to: "file://" + |DOC_PATH| + "/test_docs/index.html?search=a"
 wait-for: "#search-tabs" // Waiting for the search.js to load.
 set-window-size: (1000, 1000) // Only supported on desktop.
 assert-false: "#help"
-click: "#help-button > a"
+click: "rustdoc-toolbar .help-menu > a"
 assert-css: ("#help", {"display": "block"})
 assert-css: ("#help dd", {"font-size": "16px"})
-click: "#help-button > a"
-assert-css: ("#help", {"display": "none"})
-compare-elements-property-false: (".sub", "#help", ["offsetWidth"])
-compare-elements-position-false: (".sub", "#help", ["x"])
+click: "rustdoc-toolbar .help-menu > a"
+assert-false: "#help"
 
 // This test ensures that the "the rustdoc book" anchor link within the help popover works.
 go-to: "file://" + |DOC_PATH| + "/test_docs/index.html?search=a"
 wait-for: "#search-tabs" // Waiting for the search.js to load.
 set-window-size: (1000, 1000) // Popover only appears when the screen width is >700px.
 assert-false: "#help"
-click: "#help-button > a"
+click: "rustdoc-toolbar .help-menu > a"
 click: "//*[@id='help']//a[text()='the rustdoc book']"
 wait-for-document-property: ({"URL": "https://doc.rust-lang.org/"}, STARTS_WITH)

tests/rustdoc-gui/hide-mobile-topbar.goml

@@ -1,20 +1,19 @@
 // Checks sidebar resizing stays synced with the setting
-go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
+go-to: "file://" + |DOC_PATH| + "/settings.html"
 set-window-size: (400, 600)
 
 // Verify that the "hide" option is unchecked
-click: "#settings-menu"
 wait-for: "#settings"
 assert-css: ("#settings", {"display": "block"})
 assert-property: ("#hide-sidebar", {"checked": "false"})
-assert-css: (".mobile-topbar", {"display": "flex"})
+assert-css: ("rustdoc-topbar", {"display": "flex"})
 
 // Toggle it
 click: "#hide-sidebar"
 assert-property: ("#hide-sidebar", {"checked": "true"})
-assert-css: (".mobile-topbar", {"display": "none"})
+assert-css: ("rustdoc-topbar", {"display": "none"})
 
 // Toggle it again
 click: "#hide-sidebar"
 assert-property: ("#hide-sidebar", {"checked": "false"})
-assert-css: (".mobile-topbar", {"display": "flex"})
+assert-css: ("rustdoc-topbar", {"display": "flex"})

tests/rustdoc-gui/huge-logo.goml

@@ -8,8 +8,3 @@ assert-property: (".sidebar-crate .logo-container", {"offsetWidth": "96", "offse
 // offsetWidth = width of sidebar, offsetHeight = height + top padding
 assert-property: (".sidebar-crate .logo-container img", {"offsetWidth": "48", "offsetHeight": 64})
 assert-css: (".sidebar-crate .logo-container img", {"border-top-width": "16px", "margin-top": "-16px"})
-
-set-window-size: (400, 600)
-// offset = size + margin
-assert-property: (".mobile-topbar .logo-container", {"offsetWidth": "55", "offsetHeight": 45})
-assert-property: (".mobile-topbar .logo-container img", {"offsetWidth": "35", "offsetHeight": 35})

tests/rustdoc-gui/item-info.goml

@@ -20,7 +20,7 @@ store-position: (
     {"x": second_line_x, "y": second_line_y},
 )
 assert: |first_line_x| != |second_line_x| && |first_line_x| == 521 && |second_line_x| == 277
-assert: |first_line_y| != |second_line_y| && |first_line_y| == 718 && |second_line_y| == 741
+assert: |first_line_y| != |second_line_y| && |first_line_y| == 674 && |second_line_y| == 697
 
 // Now we ensure that they're not rendered on the same line.
 set-window-size: (1100, 800)

tests/rustdoc-gui/mobile-crate-name.goml

@@ -5,18 +5,18 @@ go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
 // First we change the title to make it big.
 set-window-size: (350, 800)
 // We ensure that the "format" of the title is the same as the one we'll use.
-assert-text: (".mobile-topbar .location a", "test_docs")
+assert-text: ("rustdoc-topbar h2 a", "Crate test_docs")
 // We store the height we know is correct.
-store-property: (".mobile-topbar .location", {"offsetHeight": height})
+store-property: ("rustdoc-topbar h2", {"offsetHeight": height})
 // We change the crate name to something longer.
-set-text: (".mobile-topbar .location a", "cargo_packager_resource_resolver")
+set-text: ("rustdoc-topbar h2 a", "cargo_packager_resource_resolver")
 // And we check that the size remained the same.
-assert-property: (".mobile-topbar .location", {"offsetHeight": |height|})
+assert-property: ("rustdoc-topbar h2", {"offsetHeight": |height|})
 
 // Now we check if it works for the non-crate pages as well.
 go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
 // We store the height we know is correct.
-store-property: (".mobile-topbar .location", {"offsetHeight": height})
-set-text: (".mobile-topbar .location a", "Something_incredibly_long_because")
+store-property: ("rustdoc-topbar h2", {"offsetHeight": height})
+set-text: ("rustdoc-topbar h2 a", "Something_incredibly_long_because")
 // And we check that the size remained the same.
-assert-property: (".mobile-topbar .location", {"offsetHeight": |height|})
+assert-property: ("rustdoc-topbar h2", {"offsetHeight": |height|})

tests/rustdoc-gui/mobile.goml

@@ -5,7 +5,7 @@ set-window-size: (400, 600)
 set-font-size: 18
 wait-for: 100 // wait a bit for the resize and the font-size change to be fully taken into account.
 
-assert-property: (".mobile-topbar h2", {"offsetHeight": 33})
+assert-property: ("rustdoc-topbar h2", {"offsetHeight": 33})
 
 // On the settings page, the theme buttons should not line-wrap. Instead, they should
 // all be placed as a group on a line below the setting name "Theme."

tests/rustdoc-gui/notable-trait-failure.png

@@ -82,15 +82,6 @@ call-function: ("check-notable-tooltip-position", {
     "i_x": 528,
 })
 
-// Checking on mobile now.
-set-window-size: (650, 600)
-wait-for-size: ("body", {"width": 650})
-call-function: ("check-notable-tooltip-position-complete", {
-    "x": 26,
-    "i_x": 305,
-    "popover_x": 0,
-})
-
 // Now check the colors.
 define-function: (
     "check-colors",
@@ -176,6 +167,15 @@ call-function: (
     },
 )
 
+// Checking on mobile now.
+set-window-size: (650, 600)
+wait-for-size: ("body", {"width": 650})
+call-function: ("check-notable-tooltip-position-complete", {
+    "x": 26,
+    "i_x": 305,
+    "popover_x": 0,
+})
+
 reload:
 
 // Check that pressing escape works
@@ -189,7 +189,7 @@ assert: "#method\.create_an_iterator_from_read .tooltip:focus"
 // Check that clicking outside works.
 click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
 assert-count: ("//*[@class='tooltip popover']", 1)
-click: ".search-input"
+click: ".main-heading h1"
 assert-count: ("//*[@class='tooltip popover']", 0)
 assert-false: "#method\.create_an_iterator_from_read .tooltip:focus"
 
@@ -219,14 +219,14 @@ define-function: (
         store-window-property: {"scrollY": scroll}
         click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
         wait-for: "//*[@class='tooltip popover']"
-        click: "#settings-menu a"
+        click: ".main-heading h1"
     }
 )
 
 // Now we check that the focus isn't given back to the wrong item when opening
 // another popover.
 call-function: ("setup-popup", {})
-click: ".search-input"
+click: ".main-heading h1"
 // We ensure we didn't come back to the previous focused item.
 assert-window-property-false: {"scrollY": |scroll|}
 
@@ -251,7 +251,7 @@ reload:
 assert-count: ("//*[@class='tooltip popover']", 0)
 click: "//*[@id='method.create_an_iterator_from_read']//*[@class='tooltip']"
 assert-count: ("//*[@class='tooltip popover']", 1)
-click: "#settings-menu a"
+click: "rustdoc-toolbar .settings-menu a"
 wait-for: "#settings"
 assert-count: ("//*[@class='tooltip popover']", 0)
 assert-false: "#method\.create_an_iterator_from_read .tooltip:focus"