Rollup merge of #120526 - GuillaumeGomez:mobile-long-crate-name, r=no…

…triddle

rustdoc: Correctly handle long crate names on mobile

Fixes #120471.

It now renders like this:

![image](https://github.com/rust-lang/rust/assets/3050060/065b4b8b-ba55-4163-a928-8d7bf735c111)

r? `@notriddle`

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

@@ -1941,13 +1941,8 @@ in src-script.js and main.js
 		   pixels to avoid overflowing the topbar when the user sets a bigger
 		   font size. */
 		font-size: 24px;
-	}
-
-	.mobile-topbar h2 a {
-		display: block;
-		text-overflow: ellipsis;
-		overflow: hidden;
 		white-space: nowrap;
+		text-overflow: ellipsis;
 	}
 
 	.mobile-topbar .logo-container > img {

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

@@ -45,7 +45,7 @@ function setMobileTopbar() {
         const mobileTitle = document.createElement("h2");
         mobileTitle.className = "location";
         if (hasClass(document.querySelector(".rustdoc"), "crate")) {
-            mobileTitle.innerText = `Crate ${window.currentCrate}`;
+            mobileTitle.innerHTML = `Crate <a href="#">${window.currentCrate}</a>`;
         } else if (locationTitle) {
             mobileTitle.innerHTML = locationTitle.innerHTML;
         }

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

@@ -0,0 +1,22 @@
+// Checks that if the crate name is too long on mobile, it will not grow and overflow its parent
+// (thanks to text overflow ellipsis).
+
+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")
+// We store the height we know is correct.
+store-property: (".mobile-topbar .location", {"offsetHeight": height})
+// We change the crate name to something longer.
+set-text: (".mobile-topbar .location a", "cargo_packager_resource_resolver")
+// And we check that the size remained the same.
+assert-property: (".mobile-topbar .location", {"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")
+// And we check that the size remained the same.
+assert-property: (".mobile-topbar .location", {"offsetHeight": |height|})

tests/rustdoc-gui/type-declation-overflow.goml

@@ -39,8 +39,8 @@ assert-property: ("pre.item-decl", {"scrollWidth": "950"})
 set-window-size: (600, 600)
 go-to: "file://" + |DOC_PATH| + "/lib2/too_long/struct.SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName.html"
 // It shouldn't have an overflow in the topbar either.
-store-property: (".mobile-topbar h2", {"scrollWidth": scrollWidth})
-assert-property: (".mobile-topbar h2", {"clientWidth": |scrollWidth|})
+store-property: (".mobile-topbar", {"scrollWidth": scrollWidth})
+assert-property: (".mobile-topbar", {"clientWidth": |scrollWidth|})
 assert-css: (".mobile-topbar h2", {"overflow-x": "hidden"})
 
 // Check wrapping for top main-heading h1 and out-of-band.