Auto merge of rust-lang#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`

Author: bors

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);
 }
 

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");

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']"

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

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"})

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")