Rollup merge of rust-lang#93183 - jsha:mobile-nav-fixes, r=GuillaumeGomez

rustdoc: mobile nav fixes

- Make sure the mobile-topbar doesn't overflow its height if the user sets a bigger font.

- Make sure the sidebar can be scrolled all the way to the bottom by shortening it to accommodate the mobile-topbar.

- Make the item name in the mobile-topbar clickable to go to the top of the page.

- Remove excess padding sidebar in mobile mode.

Demo https://rustdoc.crud.net/jsha/mobile-nav-fixes/std/string/struct.String.html

r? `@GuillaumeGomez`

Author: ehuss

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

@@ -1799,8 +1799,9 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		background-color: rgba(0,0,0,0);
 		margin: 0;
 		padding: 0;
-		padding-left: 15px;
 		z-index: 11;
+		/* Reduce height slightly to account for mobile topbar. */
+		height: calc(100vh - 45px);
 	}
 
 	/* The source view uses a different design for the sidebar toggle, and doesn't have a topbar,
@@ -1831,7 +1832,13 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 		padding: 0.3em;
 		padding-right: 0.6em;
 		text-overflow: ellipsis;
-		overflow-x: hidden;
+		overflow: hidden;
+		white-space: nowrap;
+		/* Rare exception to specifying font sizes in rem. Since the topbar
+		   height is specified in pixels, this also has to be specified in
+		   pixels to avoid overflowing the topbar when the user sets a bigger
+		   font size. */
+		font-size: 22.4px;
 	}
 
 	.mobile-topbar .logo-container {
@@ -1864,6 +1871,9 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 
 	.sidebar-menu-toggle {
 		width: 45px;
+		/* Rare exception to specifying font sizes in rem. Since this is acting
+		   as an icon, it's okay to specify its sizes in pixels. */
+		font-size: 32px;
 		border: none;
 	}
 

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

@@ -216,6 +216,7 @@ a.anchor,
 pre.rust a,
 .sidebar h2 a,
 .sidebar h3 a,
+.mobile-topbar h2 a,
 .in-band a {
 	color: #c5c5c5;
 }

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

@@ -192,6 +192,7 @@ a.anchor,
 pre.rust a,
 .sidebar h2 a,
 .sidebar h3 a,
+.mobile-topbar h2 a,
 .in-band a {
 	color: #ddd;
 }

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

@@ -189,6 +189,7 @@ a.anchor,
 pre.rust a,
 .sidebar h2 a,
 .sidebar h3 a,
+.mobile-topbar h2 a,
 .in-band a {
 	color: #000;
 }

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

@@ -72,7 +72,7 @@ function resourcePath(basename, extension) {
         var mobileLocationTitle = document.querySelector(".mobile-topbar h2.location");
         var locationTitle = document.querySelector(".sidebar h2.location");
         if (mobileLocationTitle && locationTitle) {
-            mobileLocationTitle.innerText = locationTitle.innerText;
+            mobileLocationTitle.innerHTML = locationTitle.innerHTML;
         }
     }
 }());

src/test/rustdoc-gui/mobile.goml

@@ -2,13 +2,17 @@
 goto: file://|DOC_PATH|/staged_api/struct.Foo.html
 size: (400, 600)
 
+font-size: 18
+
 // The out-of-band info (source, stable version, collapse) should be below the
 // h1 when the screen gets narrow enough.
 assert-css: (".main-heading", {
   "display": "flex",
   "flex-direction": "column"
 })
 
+assert-property: (".mobile-topbar h2.location", {"offsetHeight": 45})
+
 // Note: We can't use assert-text here because the 'Since' is set by CSS and
 // is therefore not part of the DOM.
 assert-css: (".content .out-of-band .since::before", { "content": "\"Since \"" })

src/test/rustdoc-gui/sidebar-mobile.goml

@@ -35,3 +35,8 @@ assert-property: (".mobile-topbar", {"clientHeight": "45"})
 click: ".sidebar-menu-toggle"
 click: ".sidebar-links a"
 assert-position: ("#method\.must_use", {"y": 45})
+
+// Check that the bottom-most item on the sidebar menu can be scrolled fully into view.
+click: ".sidebar-menu-toggle"
+scroll-to: ".block.keyword li:nth-child(1)"
+assert-position: (".block.keyword li:nth-child(1)", {"y": 542.96875})

src/test/rustdoc-gui/type-declation-overflow.goml

@@ -31,6 +31,6 @@ assert-property: (".item-decl pre", {"scrollWidth": "950"})
 // On mobile:
 size: (600, 600)
 goto: file://|DOC_PATH|/lib2/too_long/struct.SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName.html
-assert-property: (".mobile-topbar .location", {"scrollWidth": "504"})
+assert-property: (".mobile-topbar .location", {"scrollWidth": "986"})
 assert-property: (".mobile-topbar .location", {"clientWidth": "504"})
 assert-css: (".mobile-topbar .location", {"overflow-x": "hidden"})