Auto merge of #110688 - GuillaumeGomez:result-search-type, r=notriddle,jsha

rustdoc: Add search result item types after their name

Here what it looks like:

![Screenshot from 2023-04-22 15-16-58](https://user-images.githubusercontent.com/3050060/233789566-b5f3f625-3b78-4c56-a7ee-0a4f2d62e667.png)

The idea is to improve accessibility by providing this information directly in the text and not only in the text color. Currently we already use it for doc aliases and for primitive types, so I extended it to all types.

r? `@notriddle`

6 files changed, 42 insertions, 40 deletions

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 054cfe7597e..b487cfa5c25 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -213,7 +213,7 @@ a.anchor,
 h1 a,
 .search-results a,
 .stab,
-.result-name .primitive > i, .result-name .keyword > i {
+.result-name i {
 	color: var(--main-color);
 }
 
@@ -887,7 +887,7 @@ so that we can apply CSS-filters to change the arrow color in themes */
 .search-results .result-name span.alias {
 	color: var(--search-results-alias-color);
 }
-.search-results .result-name span.grey {
+.search-results .result-name .grey {
 	color: var(--search-results-grey-color);
 }
 
diff --git a/src/librustdoc/html/static/js/search.js b/src/librustdoc/html/static/js/search.js
index 25259971eff..e724bf1601a 100644
--- a/src/librustdoc/html/static/js/search.js
+++ b/src/librustdoc/html/static/js/search.js
@@ -35,6 +35,35 @@ const itemTypes = [
     "traitalias",
 ];
 
+const longItemTypes = [
+    "module",
+    "extern crate",
+    "re-export",
+    "struct",
+    "enum",
+    "function",
+    "type alias",
+    "static",
+    "trait",
+    "",
+    "trait method",
+    "method",
+    "struct field",
+    "enum variant",
+    "macro",
+    "primitive type",
+    "associated type",
+    "constant",
+    "associated constant",
+    "union",
+    "foreign type",
+    "keyword",
+    "existential type",
+    "attribute macro",
+    "derive macro",
+    "trait alias",
+];
+
 // used for special search precedence
 const TY_PRIMITIVE = itemTypes.indexOf("primitive");
 const TY_KEYWORD = itemTypes.indexOf("keyword");
@@ -1966,16 +1995,11 @@ function initSearch(rawSearchIndex) {
             array.forEach(item => {
                 const name = item.name;
                 const type = itemTypes[item.ty];
+                const longType = longItemTypes[item.ty];
+                const typeName = longType.length !== 0 ? `${longType}` : "?";
 
                 length += 1;
 
-                let extra = "";
-                if (type === "primitive") {
-                    extra = " <i>(primitive type)</i>";
-                } else if (type === "keyword") {
-                    extra = " <i>(keyword)</i>";
-                }
-
                 const link = document.createElement("a");
                 link.className = "result-" + type;
                 link.href = item.href;
@@ -1993,13 +2017,14 @@ function initSearch(rawSearchIndex) {
 
                     alias.insertAdjacentHTML(
                         "beforeend",
-                        "<span class=\"grey\"><i>&nbsp;- see&nbsp;</i></span>");
+                        "<i class=\"grey\">&nbsp;- see&nbsp;</i>");
 
                     resultName.appendChild(alias);
                 }
+
                 resultName.insertAdjacentHTML(
                     "beforeend",
-                    item.displayPath + "<span class=\"" + type + "\">" + name + extra + "</span>");
+                    `${typeName} ${item.displayPath}<span class="${type}">${name}</span>`);
                 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 c5c386ce750..6ea6d53e287 100644
--- a/tests/rustdoc-gui/search-reexport.goml
+++ b/tests/rustdoc-gui/search-reexport.goml
@@ -14,7 +14,7 @@ assert-attribute: (
     "//a[@class='result-import']",
     {"href": "../test_docs/index.html#reexport.TheStdReexport"},
 )
-assert-text: ("//a[@class='result-import']", "test_docs::TheStdReexport")
+assert-text: ("a.result-import .result-name", "re-export test_docs::TheStdReexport")
 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": "#494a3d"})
@@ -25,8 +25,8 @@ press-key: 'Enter'
 write: (".search-input", "AliasForTheStdReexport")
 wait-for: "//a[@class='result-import']"
 assert-text: (
-    "//a[@class='result-import']",
-    "AliasForTheStdReexport - see test_docs::TheStdReexport",
+    "a.result-import .result-name",
+    "AliasForTheStdReexport - see re-export test_docs::TheStdReexport",
 )
 // Same thing again, we click on it to ensure the background is once again set as expected.
 click: "//a[@class='result-import']"
diff --git a/tests/rustdoc-gui/search-result-color.goml b/tests/rustdoc-gui/search-result-color.goml
index 90f7160b724..c75e4141434 100644
--- a/tests/rustdoc-gui/search-result-color.goml
+++ b/tests/rustdoc-gui/search-result-color.goml
@@ -65,12 +65,6 @@ assert-css: (
     {"border-bottom-color": "#aaa3"}
 )
 
-// Checking the color of "keyword" text.
-assert-css: (
-    "//*[@class='result-name']//*[text()='(keyword)']",
-    {"color": "#788797"},
-)
-
 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
@@ -182,12 +176,6 @@ assert-css: (
     {"border-bottom-color": "#aaa3"}
 )
 
-// Checking the color for "keyword" text.
-assert-css: (
-    "//*[@class='result-name']//*[text()='(keyword)']",
-    {"color": "#ddd"},
-)
-
 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
@@ -284,12 +272,6 @@ assert-css: (
     {"border-bottom-color": "#aaa3"}
 )
 
-// Checking the color for "keyword" text.
-assert-css: (
-    "//*[@class='result-name']//*[text()='(keyword)']",
-    {"color": "#000"},
-)
-
 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 bf096f62c48..afb3a44be30 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": 310})
 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 5d56e9d9cd4..1b2be6d4e3e 100644
--- a/tests/rustdoc-gui/search-result-keyword.goml
+++ b/tests/rustdoc-gui/search-result-keyword.goml
@@ -5,9 +5,4 @@ write: (".search-input", "CookieMonster")
 press-key: 'Enter'
 // Waiting for the search results to appear...
 wait-for: "#search-tabs"
-// Note: The two next assert commands could be merged as one but readability would be
-// less good.
-//
-// Checking that the CSS is displaying " (keyword)" in italic.
-assert-text: (".result-name span.keyword > i", "(keyword)")
-assert-text: (".result-name span.keyword", "CookieMonster (keyword)")
+assert-text: (".result-keyword .result-name", "keyword CookieMonster")