Unrolled build for #151216

Rollup merge of #151216 - scrollable-popover-content, r=lolbinarycat

[rustdoc] Make popover menus content scrollable on mobile devices

Fixes #151209.

This is what it looks like:

<img width="468" height="601" alt="image" src="https://github.com/user-attachments/assets/39dcbfea-ca31-4875-947f-155b58ffa4bd" />

The only difference with the current display:

<img width="468" height="601" alt="image" src="https://github.com/user-attachments/assets/b49c6100-3566-4f79-8343-1bf4fe32da78" />

is that we now see the bottom border (and that we can scroll the content too of course).

I applied this change to both the settings and helps popover menus.

r? @lolbinarycat

Author: rust-timer

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

@@ -20,6 +20,7 @@
 	--src-sidebar-width: 300px;
 	--desktop-sidebar-z-index: 100;
 	--sidebar-elems-left-padding: 24px;
+	--popover-top-margin: 7px;
 	/* clipboard <https://github.com/rust-lang/crates.io/commits/main/public/assets/copy.svg> */
 	--clipboard-image: url('data:image/svg+xml,<svg width="19" height="18" viewBox="0 0 24 25" \
 xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\
@@ -1435,7 +1436,7 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	top: 100%;
 	right: 0;
 	z-index: calc(var(--desktop-sidebar-z-index) + 1);
-	margin-top: 7px;
+	margin-top: var(--popover-top-margin);
 	border-radius: 3px;
 	border: 1px solid var(--border-color);
 	background-color: var(--main-background-color);
@@ -2659,14 +2660,15 @@ in src-script.js and main.js
 @media (max-width: 700px) {
 	:root {
 		--impl-items-indent: 0.7em;
+		--topbar-height: 45px;
 	}
 
 	/* When linking to an item with an `id` (for instance, by clicking a link in the sidebar,
 	   or visiting a URL with a fragment like `#method.new`, we don't want the item to be obscured
 	   by the topbar. Anything with an `id` gets scroll-margin-top equal to rustdoc-topbar's size.
 	*/
 	*[id] {
-		scroll-margin-top: 45px;
+		scroll-margin-top: var(--topbar-height);
 	}
 
 	/* We don't display this button on mobile devices. */
@@ -2698,14 +2700,23 @@ in src-script.js and main.js
 		background: var(--main-background-color);
 		border-radius: 0;
 	}
-	#settings.popover {
+	#settings.popover, #help.popover {
 		top: 32px;
+		/* The `+ 1px` part is for the bottom border to be visible. */
+		height: calc(100vh - var(--topbar-height) + var(--popover-top-margin) - 1px);
+	}
+	#settings.popover {
 		--popover-arrow-offset: 48px;
 	}
 	#help.popover {
-		top: 32px;
 		--popover-arrow-offset: 12px;
 	}
+	/* The `overflow-y` property is used on an internal content instead of the top one otherwise the
+	   little arrow at the top can't be displayed. */
+	#settings.popover .settings, #help.popover .content {
+		overflow-y: scroll;
+		height: 100%;
+	}
 
 	.rustdoc {
 		/* Sidebar should overlay main content, rather than pushing main content to the right.
@@ -2728,13 +2739,13 @@ in src-script.js and main.js
 
 	.sidebar {
 		position: fixed;
-		top: 45px;
+		top: var(--topbar-height);
 		/* Hide the sidebar offscreen while not in use. Doing this instead of display: none means
 		   the sidebar stays visible for screen readers, which is useful for navigation. */
 		left: -1000px;
 		z-index: 11;
 		/* Reduce height slightly to account for mobile topbar. */
-		height: calc(100vh - 45px);
+		height: calc(100vh - var(--topbar-height));
 		/* resize indicator: hide this when on touch or mobile */
 		border-right: none;
 		width: 100%;
@@ -2799,7 +2810,7 @@ in src-script.js and main.js
 		flex-direction: row;
 		position: sticky;
 		z-index: 10;
-		height: 45px;
+		height: var(--topbar-height);
 		width: 100%;
 		left: 0;
 		top: 0;

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

@@ -1692,7 +1692,7 @@ function preLoadCss(cssUrl) {
 
         const container = document.createElement("div");
         if (!isHelpPage) {
-            container.className = "popover content";
+            container.className = "popover";
         }
         container.id = "help";
 
@@ -1701,9 +1701,14 @@ function preLoadCss(cssUrl) {
         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);
+        const content = document.createElement("div");
+        content.className = "content";
+
+        content.appendChild(book_info);
+        content.appendChild(side_by_side);
+        content.appendChild(rustdoc_version);
+
+        container.appendChild(content);
 
         if (isHelpPage) {
             const help_section = document.createElement("section");

tests/rustdoc-gui/mobile-topbar-menu-popovers.goml

@@ -0,0 +1,34 @@
+// Ensure that topbar popover menus content can be scrolled on mobile.
+go-to: "file://" + |DOC_PATH| + "/lib2/index.html"
+store-value: (window_height, 500)
+set-window-size: (400, |window_height|)
+
+include: "utils.goml"
+
+// We open the settings menu
+call-function: ("open-settings-menu", {})
+// We ensure it's not scrolled down yet.
+assert-property: ("#settings .settings", {"scrollTop": 0})
+// We ensure its height is smaller than the window's, but its content's height is bigger.
+store-property: ("#settings .settings", {"offsetHeight": menu_height, "scrollHeight": scroll_height})
+assert: |menu_height| < |window_height| && |scroll_height| > |window_height|
+
+// We scroll to the last element of the menu.
+scroll-to: "#settings .setting-line:last-of-type input"
+// The item should be visible now, and so the Y scroll value should have changed.
+// Note: The `scrollTop` value will change if settings are added or removed.
+assert-property: ("#settings .settings", {"scrollTop": 335})
+
+// Now we open the help menu.
+click: ".help-menu a"
+wait-for: "#help"
+// We ensure it's not scrolled down yet.
+assert-property: ("#help .content", {"scrollTop": 0})
+// We ensure its height is smaller than the window's, but its content's height is bigger.
+store-property: ("#help .content", {"offsetHeight": menu_height, "scrollHeight": scroll_height})
+assert: |menu_height| < |window_height| && |scroll_height| > |window_height|
+
+// We scroll to the last element of the menu.
+scroll-to: "#help .infos > :last-child"
+// The item should be visible now, and so the Y scroll value should have changed.
+assert-property: ("#help .content", {"scrollTop": 339})