Rollup merge of #103980 - notriddle:notriddle/search-results, r=GuillaumeGomez

rustdoc: simplify search results CSS and DOM

Preview: http://notriddle.com/notriddle-rustdoc-demos/search-results/std/index.html?search=vec

There is a layout change caused by this commit, but it's subtle. You won't notice it unless you're looking for it.

## Before

![image](https://user-images.githubusercontent.com/1593513/200060877-05ae4135-db8d-4d24-8dfa-4c06b8ef671c.png)

## After

![image](https://user-images.githubusercontent.com/1593513/200061474-b0ea9e8d-72c3-401f-9106-072307d9e2ff.png)

Author: matthiaskrgr

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

@@ -881,31 +881,24 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	display: block;
 }
 
-.search-results .desc > span {
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	display: block;
-}
-
 .search-results > a {
-	display: block;
+	display: flex;
 	/* A little margin ensures the browser's outlining of focused links has room to display. */
 	margin-left: 2px;
 	margin-right: 2px;
 	border-bottom: 1px solid var(--border-color);
+	gap: 1em;
 }
 
 .search-results > a > div {
-	display: flex;
-	flex-flow: row wrap;
+	flex: 1;
 }
 
-.search-results .result-name, .search-results div.desc {
-	width: 50%;
-}
-.search-results .result-name {
-	padding-right: 1em;
+.search-results > a > div.desc {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	display: block;
 }
 
 .search-results a:hover,
@@ -1867,18 +1860,16 @@ in storage.js
 	}
 
 	/* Display an alternating layout on tablets and phones */
-	.item-table, .item-row, .item-left, .item-right {
+	.item-table, .item-row, .item-left, .item-right,
+	.search-results > a, .search-results > a > div {
 		display: block;
 	}
 
 	/* Display an alternating layout on tablets and phones */
 	.search-results > a {
 		padding: 5px 0px;
 	}
-	.search-results .result-name, .search-results div.desc {
-		width: 100%;
-	}
-	.search-results div.desc, .item-right {
+	.search-results > a > div.desc, .item-right {
 		padding-left: 2em;
 	}
 

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

@@ -1593,7 +1593,6 @@ function initSearch(rawSearchIndex) {
                 link.className = "result-" + type;
                 link.href = item.href;
 
-                const wrapper = document.createElement("div");
                 const resultName = document.createElement("div");
                 resultName.className = "result-name";
 
@@ -1614,16 +1613,13 @@ function initSearch(rawSearchIndex) {
                 resultName.insertAdjacentHTML(
                     "beforeend",
                     item.displayPath + "<span class=\"" + type + "\">" + name + extra + "</span>");
-                wrapper.appendChild(resultName);
+                link.appendChild(resultName);
 
                 const description = document.createElement("div");
                 description.className = "desc";
-                const spanDesc = document.createElement("span");
-                spanDesc.insertAdjacentHTML("beforeend", item.desc);
+                description.insertAdjacentHTML("beforeend", item.desc);
 
-                description.appendChild(spanDesc);
-                wrapper.appendChild(description);
-                link.appendChild(wrapper);
+                link.appendChild(description);
                 output.appendChild(link);
             });
         } else if (query.error === null) {

src/test/rustdoc-gui/search-result-color.goml

@@ -67,7 +67,7 @@ reload:
 // Waiting for the search results to appear...
 wait-for: "#titles"
 assert-css: (
-    "//*[@class='desc']//*[text()='Just a normal struct.']",
+    "//*[@class='desc'][text()='Just a normal struct.']",
     {"color": "rgb(197, 197, 197)"},
 )
 assert-css: (
@@ -159,7 +159,7 @@ assert-css: (
 )
 
 // Checking color and background on hover.
-move-cursor-to: "//*[@class='desc']//*[text()='Just a normal struct.']"
+move-cursor-to: "//*[@class='desc'][text()='Just a normal struct.']"
 assert-css: (
     "//*[@class='result-name']/*[text()='test_docs::']",
     {"color": "rgb(255, 255, 255)"},
@@ -179,7 +179,7 @@ reload:
 // Waiting for the search results to appear...
 wait-for: "#titles"
 assert-css: (
-    "//*[@class='desc']//*[text()='Just a normal struct.']",
+    "//*[@class='desc'][text()='Just a normal struct.']",
     {"color": "rgb(221, 221, 221)"},
 )
 assert-css: (
@@ -276,7 +276,7 @@ reload:
 // Waiting for the search results to appear...
 wait-for: "#titles"
 assert-css: (
-    "//*[@class='desc']//*[text()='Just a normal struct.']",
+    "//*[@class='desc'][text()='Just a normal struct.']",
     {"color": "rgb(0, 0, 0)"},
 )
 assert-css: (

src/test/rustdoc-gui/search-result-display.goml

@@ -7,7 +7,7 @@ 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": "318px"})
+assert-css: (".search-results div.desc", {"width": "310px"})
 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.