diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index b487cfa5c255..d469b397dcfc 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -190,6 +190,7 @@ h1, h2, h3, h4, h5, h6,
.mobile-topbar,
.search-input,
.search-results .result-name,
+.search-results .type-kind,
.item-name > a,
.out-of-band,
span.since,
@@ -870,6 +871,10 @@ so that we can apply CSS-filters to change the arrow color in themes */
}
.search-results > a > div {
+ flex: 3;
+}
+
+.search-results > a > div.type-kind {
flex: 1;
}
diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js
index f65d39151241..c25c36994fa4 100644
--- a/src/librustdoc/html/static/js/search.js
+++ b/src/librustdoc/html/static/js/search.js
@@ -1866,7 +1866,7 @@ function initSearch(rawSearchIndex) {
const name = item.name;
const type = itemTypes[item.ty];
const longType = longItemTypes[item.ty];
- let extra = longType.length !== 0 ? ` (${longType})` : "";
+ const typeName = longType.length !== 0 ? `${longType}` : "?";
length += 1;
@@ -1878,7 +1878,6 @@ function initSearch(rawSearchIndex) {
resultName.className = "result-name";
if (item.is_alias) {
- extra = "";
const alias = document.createElement("span");
alias.className = "alias";
@@ -1892,9 +1891,15 @@ function initSearch(rawSearchIndex) {
resultName.appendChild(alias);
}
+
+ const typeDisplay = document.createElement("div");
+ typeDisplay.innerText = typeName;
+ typeDisplay.className = "type-kind";
+ link.appendChild(typeDisplay);
+
resultName.insertAdjacentHTML(
"beforeend",
- item.displayPath + "" + name + "" + extra);
+ item.displayPath + "" + name + "");
link.appendChild(resultName);
const description = document.createElement("div");
diff --git a/tests/rustdoc-gui/search-reexport.goml b/tests/rustdoc-gui/search-reexport.goml
index 06a0dc949c4e..4f3ccd715994 100644
--- a/tests/rustdoc-gui/search-reexport.goml
+++ b/tests/rustdoc-gui/search-reexport.goml
@@ -14,7 +14,8 @@ assert-attribute: (
"//a[@class='result-import']",
{"href": "../test_docs/index.html#reexport.TheStdReexport"},
)
-assert-text: ("//a[@class='result-import']", "test_docs::TheStdReexport (re-export)")
+assert-text: ("a.result-import .result-name", "test_docs::TheStdReexport")
+assert-text: ("a.result-import .type-kind", "re-export")
click: "//a[@class='result-import']"
// We check that it has the background modified thanks to the focus.
wait-for-css: ("//*[@id='reexport.TheStdReexport']", {"background-color": "rgb(73, 74, 61)"})
@@ -25,7 +26,7 @@ press-key: 'Enter'
write: (".search-input", "AliasForTheStdReexport")
wait-for: "//a[@class='result-import']"
assert-text: (
- "//a[@class='result-import']",
+ "a.result-import .result-name",
"AliasForTheStdReexport - see test_docs::TheStdReexport",
)
// Same thing again, we click on it to ensure the background is once again set as expected.
diff --git a/tests/rustdoc-gui/search-result-color.goml b/tests/rustdoc-gui/search-result-color.goml
index b0d236ce1e5d..5ae3125a7f18 100644
--- a/tests/rustdoc-gui/search-result-color.goml
+++ b/tests/rustdoc-gui/search-result-color.goml
@@ -5,7 +5,7 @@ define-function: (
(result_kind, color, hover_color),
block {
assert-css: (".result-" + |result_kind| + " ." + |result_kind|, {"color": |color|}, ALL)
- assert-css: (".result-" + |result_kind| + " i", {"color": |default_color|})
+ assert-css: (".result-" + |result_kind| + " .type-kind", {"color": |entry_color|})
assert-css: (
".result-" + |result_kind|,
{"color": |entry_color|, "background-color": |background_color|},
@@ -19,7 +19,7 @@ define-function: (
".result-" + |result_kind| + ":hover ." + |result_kind|,
{"color": |hover_color|},
)
- assert-css: (".result-" + |result_kind| + ":hover i", {"color": |default_color|})
+ assert-css: (".result-" + |result_kind| + ":hover .type-kind", {"color": |hover_entry_color|})
move-cursor-to: ".search-input"
focus: ".result-" + |result_kind|
assert-css: (
@@ -67,14 +67,6 @@ assert-css: (
{"border-bottom-color": "#aaa3"}
)
-store-value: (default_color, "rgb(197, 197, 197)")
-
-// Checking the color of "keyword" text.
-assert-css: (
- "//*[@class='result-name']//*[text()='(keyword)']",
- {"color": |default_color|},
-)
-
store-value: (entry_color, "#0096cf") // color of the search entry
store-value: (hover_entry_color, "#fff") // color of the hovered/focused search entry
store-value: (background_color, "transparent") // background color
@@ -186,14 +178,6 @@ assert-css: (
{"border-bottom-color": "#aaa3"}
)
-store-value: (default_color, "rgb(221, 221, 221)")
-
-// Checking the color for "keyword" text.
-assert-css: (
- "//*[@class='result-name']//*[text()='(keyword)']",
- {"color": |default_color|},
-)
-
store-value: (entry_color, "#ddd") // color of the search entry
store-value: (hover_entry_color, "#ddd") // color of the hovered/focused search entry
store-value: (background_color, "transparent") // background color
@@ -290,14 +274,6 @@ assert-css: (
{"border-bottom-color": "#aaa3"}
)
-store-value: (default_color, "rgb(0, 0, 0)")
-
-// Checking the color for "keyword" text.
-assert-css: (
- "//*[@class='result-name']//*[text()='(keyword)']",
- {"color": |default_color|},
-)
-
store-value: (entry_color, "#000") // color of the search entry
store-value: (hover_entry_color, "#000") // color of the hovered/focused search entry
store-value: (background_color, "transparent") // background color
diff --git a/tests/rustdoc-gui/search-result-display.goml b/tests/rustdoc-gui/search-result-display.goml
index bf096f62c483..08c43b4899cd 100644
--- a/tests/rustdoc-gui/search-result-display.goml
+++ b/tests/rustdoc-gui/search-result-display.goml
@@ -7,11 +7,11 @@ 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-css: (".search-results div.desc", {"width": "310px"})
+assert-size: (".search-results div.desc", {"width": 259})
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-css: (".search-results div.desc", {"width": "566px"})
+assert-size: (".search-results div.desc", {"width": 566})
// The result set is all on one line.
assert-css: (".search-results .result-name > span", {"display": "inline"})
diff --git a/tests/rustdoc-gui/search-result-keyword.goml b/tests/rustdoc-gui/search-result-keyword.goml
index 8d6478e28a5b..3326f5b72f4d 100644
--- a/tests/rustdoc-gui/search-result-keyword.goml
+++ b/tests/rustdoc-gui/search-result-keyword.goml
@@ -9,5 +9,5 @@ wait-for: "#search-tabs"
// less good.
//
// Checking that the CSS is displaying " (keyword)" in italic.
-assert-text: (".result-keyword span.keyword + i", "(keyword)")
-assert-text: (".result-keyword .result-name", "CookieMonster (keyword)")
+assert-text: (".result-keyword .type-kind", "keyword")
+assert-text: (".result-keyword .result-name", "CookieMonster")