Rollup merge of #113100 - GuillaumeGomez:search-result-long-name, r=notriddle

Fix display of long items in search results

Fixes https://github.com/rust-lang/rust/issues/113060.

You can test the result [here](https://rustdoc.crud.net/imperio/search-result-long-name/lib2/index.html).

To make it a bit better, I also reduced a bit the size of the short documentation from half to 2 fifth of the width.

r? `@notriddle`

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

@@ -8,6 +8,7 @@
 
 :root {
 	--nav-sub-mobile-padding: 8px;
+	--search-typename-width: 6.75rem;
 }
 
 /* See FiraSans-LICENSE.txt for the Fira Sans license. */
@@ -869,14 +870,11 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	gap: 1em;
 }
 
-.search-results > a > div {
-	flex: 1;
-}
-
 .search-results > a > div.desc {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
+	flex: 2;
 }
 
 .search-results a:hover,
@@ -884,6 +882,12 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	background-color: var(--search-result-link-focus-background-color);
 }
 
+.search-results .result-name {
+	display: flex;
+	align-items: center;
+	justify-content: start;
+	flex: 3;
+}
 .search-results .result-name span.alias {
 	color: var(--search-results-alias-color);
 }
@@ -891,10 +895,14 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	color: var(--search-results-grey-color);
 }
 .search-results .result-name .typename {
-	display: inline-block;
 	color: var(--search-results-grey-color);
 	font-size: 0.875rem;
-	width: 6.25rem;
+	width: var(--search-typename-width);
+}
+.search-results .result-name .path {
+	word-break: break-all;
+	max-width: calc(100% - var(--search-typename-width));
+	display: inline-block;
 }
 
 .popover {
@@ -1730,6 +1738,16 @@ in source-script.js
 	.search-results > a > div.desc, .item-table > li > div.desc {
 		padding-left: 2em;
 	}
+	.search-results .result-name {
+		display: block;
+	}
+	.search-results .result-name .typename {
+		width: initial;
+		margin-right: 0;
+	}
+	.search-results .result-name .typename, .search-results .result-name .path {
+		display: inline;
+	}
 
 	.source-sidebar-expanded .source .sidebar {
 		max-width: 100vw;

src/librustdoc/html/static/js/search.js

@@ -2024,9 +2024,11 @@ function initSearch(rawSearchIndex) {
 
                 resultName.insertAdjacentHTML(
                     "beforeend",
-                    `<span class="typename">${typeName}</span>`
-                    + ` ${item.displayPath}<span class="${type}">${name}</span>`
-                );
+                    `\
+<span class="typename">${typeName}</span>\
+<div class="path">\
+ ${item.displayPath}<span class="${type}">${name}</span>\
+</div>`);
                 link.appendChild(resultName);
 
                 const description = document.createElement("div");

tests/rustdoc-gui/search-result-color.goml

@@ -61,7 +61,7 @@ assert-css: (
     {"color": "#c5c5c5"},
 )
 assert-css: (
-    "//*[@class='result-name']/*[text()='test_docs::']",
+    "//*[@class='result-name']//*[text()='test_docs::']",
     {"color": "#0096cf"},
 )
 
@@ -138,7 +138,7 @@ call-function: (
 move-cursor-to: ".search-input"
 focus: ".search-input" // To ensure the `<a>` container isnt focus or hover.
 assert-css: (
-    "//*[@class='result-name']/*[text()='test_docs::']/ancestor::a",
+    "//*[@class='result-name']//*[text()='test_docs::']/ancestor::a",
     {"color": "#0096cf", "background-color": "transparent"},
     ALL,
 )
@@ -146,11 +146,11 @@ assert-css: (
 // Checking color and background on hover.
 move-cursor-to: "//*[@class='desc'][text()='Just a normal struct.']"
 assert-css: (
-    "//*[@class='result-name']/*[text()='test_docs::']",
+    "//*[@class='result-name']//*[text()='test_docs::']",
     {"color": "#fff"},
 )
 assert-css: (
-    "//*[@class='result-name']/*[text()='test_docs::']/ancestor::a",
+    "//*[@class='result-name']//*[text()='test_docs::']/ancestor::a",
     {"color": "#fff", "background-color": "rgb(60, 60, 60)"},
 )
 
@@ -173,7 +173,7 @@ assert-css: (
     {"color": "#ddd"},
 )
 assert-css: (
-    "//*[@class='result-name']/*[text()='test_docs::']",
+    "//*[@class='result-name']//*[text()='test_docs::']",
     {"color": "#ddd"},
 )
 
@@ -250,7 +250,7 @@ call-function: (
 move-cursor-to: ".search-input"
 focus: ".search-input" // To ensure the `<a>` container isnt focus or hover.
 assert-css: (
-    "//*[@class='result-name']/*[text()='test_docs::']/ancestor::a",
+    "//*[@class='result-name']//*[text()='test_docs::']/ancestor::a",
     {"color": "#ddd", "background-color": "transparent"},
 )
 
@@ -270,7 +270,7 @@ assert-css: (
     {"color": "#000"},
 )
 assert-css: (
-    "//*[@class='result-name']/*[text()='test_docs::']",
+    "//*[@class='result-name']//*[text()='test_docs::']",
     {"color": "#000"},
 )
 
@@ -347,7 +347,7 @@ call-function: (
 move-cursor-to: ".search-input"
 focus: ".search-input" // To ensure the `<a>` container isnt focus or hover.
 assert-css: (
-    "//*[@class='result-name']/*[text()='test_docs::']/ancestor::a",
+    "//*[@class='result-name']//*[text()='test_docs::']/ancestor::a",
     {"color": "#000", "background-color": "transparent"},
 )
 

tests/rustdoc-gui/search-result-display.goml

@@ -1,3 +1,4 @@
+// ignore-tidy-linelength
 // Checks that the search results have the expected width.
 go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
 set-window-size: (900, 1000)
@@ -7,15 +8,40 @@ press-key: 'Enter'
 wait-for: "#crate-search"
 // The width is returned by "getComputedStyle" which returns the exact number instead of the
 // CSS rule which is "50%"...
-assert-size: (".search-results div.desc", {"width": 310})
+assert-size: (".search-results div.desc", {"width": 248})
+store-size: (".search-results .result-name .typename", {"width": width})
 set-window-size: (600, 100)
 // As counter-intuitive as it may seem, in this width, the width is "100%", which is why
 // when computed it's larger.
 assert-size: (".search-results div.desc", {"width": 566})
 
 // The result set is all on one line.
-assert-css: (".search-results .result-name > span:not(.typename)", {"display": "inline"})
-assert-css: (".search-results .result-name > span.typename", {"display": "inline-block"})
+compare-elements-position-near: (
+    ".search-results .result-name .typename",
+    ".search-results .result-name .path",
+    {"y": 2},
+)
+compare-elements-position-near-false: (
+    ".search-results .result-name .typename",
+    ".search-results .result-name .path",
+    {"x": 5},
+)
+// The width of the "typename" isn't fixed anymore in this display mode.
+store-size: (".search-results .result-name .typename", {"width": new_width})
+assert: |new_width| < |width| - 10
+
+// Check that if the search is too long on mobile, it'll go under the "typename".
+go-to: "file://" + |DOC_PATH| + "/test_docs/index.html?search=SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName"
+wait-for: "#crate-search"
+compare-elements-position-near: (
+    ".search-results .result-name .typename",
+    ".search-results .result-name .path",
+    {"y": 2, "x": 0},
+)
+store-size: (".search-results .result-name", {"width": width, "height": height})
+store-size: (".search-results .result-name .path", {"width": sub_width, "height": sub_height})
+assert: |width| < |sub_width| + 8 && |width| > |sub_width| - 8
+assert: |height| < |sub_height| + 8 && |height| > |sub_height| - 8
 
 // Check that the crate filter `<select>` is correctly handled when it goes to next line.
 // To do so we need to update the length of one of its `<option>`.