Rollup merge of #99489 - GuillaumeGomez:gui-fixes, r=notriddle

rustdoc UI fixes

The first commit fixes this bug:

![Screenshot from 2022-07-20 02-54-26](https://user-images.githubusercontent.com/3050060/179879053-fc34f27a-6248-4f5c-9fcb-80adbfc1598c.png)
![Screenshot from 2022-07-20 03-00-03](https://user-images.githubusercontent.com/3050060/179879056-1c0973a0-d535-44e7-a48e-bad692034467.png)

The second one fixes the missing change of border color when the search input is focused.

cc `@jsha`
r? `@notriddle`

Author: matthiaskrgr

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

@@ -949,7 +949,7 @@ table,
 #crate-search {
 	min-width: 115px;
 	margin-top: 5px;
-	padding-left: 0.3125em;
+	padding-left: 0.15em;
 	padding-right: 23px;
 	border: 1px solid;
 	border-radius: 4px;
@@ -958,8 +958,6 @@ table,
 	-moz-appearance: none;
 	-webkit-appearance: none;
 	/* Removes default arrow from firefox */
-	text-indent: 0.01px;
-	text-overflow: "";
 	background-repeat: no-repeat;
 	background-color: transparent;
 	background-size: 20px;
@@ -986,7 +984,6 @@ table,
 	border-radius: 2px;
 	padding: 8px;
 	font-size: 1rem;
-	transition: border-color 300ms ease;
 	width: 100%;
 }
 

src/librustdoc/html/static/css/themes/ayu.css

@@ -184,7 +184,13 @@ details.rustdoc-toggle > summary::before {
 
 #crate-search, .search-input {
 	background-color: #141920;
-	/* Without the `!important`, the border-color is ignored for `<select>`... */
+	border-color: #424c57;
+}
+
+#crate-search {
+	/* Without the `!important`, the border-color is ignored for `<select>`...
+	   It cannot be in the group above because `.search-input` has a different border color on
+	   hover. */
 	border-color: #424c57 !important;
 }
 

src/librustdoc/html/static/css/themes/dark.css

@@ -159,7 +159,13 @@ details.rustdoc-toggle > summary::before {
 #crate-search, .search-input {
 	color: #111;
 	background-color: #f0f0f0;
-	/* Without the `!important`, the border-color is ignored for `<select>`... */
+	border-color: #f0f0f0;
+}
+
+#crate-search {
+	/* Without the `!important`, the border-color is ignored for `<select>`...
+	   It cannot be in the group above because `.search-input` has a different border color on
+	   hover. */
 	border-color: #f0f0f0 !important;
 }
 

src/librustdoc/html/static/css/themes/light.css

@@ -146,7 +146,13 @@ details.rustdoc-toggle > summary::before {
 
 #crate-search, .search-input {
 	background-color: white;
-	/* Without the `!important`, the border-color is ignored for `<select>`... */
+	border-color: #e0e0e0;
+}
+
+#crate-search {
+	/* Without the `!important`, the border-color is ignored for `<select>`...
+	   It cannot be in the group above because `.search-input` has a different border color on
+	   hover. */
 	border-color: #e0e0e0 !important;
 }
 

src/test/rustdoc-gui/search-input.goml

@@ -0,0 +1,23 @@
+// Ensures that the search input border color changes on focus.
+goto: file://|DOC_PATH|/test_docs/index.html
+local-storage: {"rustdoc-use-system-theme": "false", "rustdoc-theme": "dark"}
+reload:
+
+assert-css: (".search-input", {"border-color": "rgb(224, 224, 224)"})
+click: ".search-input"
+focus: ".search-input"
+assert-css: (".search-input", {"border-color": "rgb(0, 141, 253)"})
+
+local-storage: {"rustdoc-theme": "light"}
+reload:
+
+assert-css: (".search-input", {"border-color": "rgb(224, 224, 224)"})
+click: ".search-input"
+assert-css: (".search-input", {"border-color": "rgb(102, 175, 233)"})
+
+local-storage: {"rustdoc-theme": "ayu"}
+reload:
+
+assert-css: (".search-input", {"border-color": "rgb(66, 76, 87)"})
+click: ".search-input"
+assert-css: (".search-input", {"border-color": "rgb(66, 76, 87)"})

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

@@ -18,7 +18,7 @@ assert-css: (".search-results div.desc", {"width": "570px"})
 size: (900, 900)
 
 // First we check the current width and position.
-assert-css: ("#crate-search", {"width": "222px"})
+assert-css: ("#crate-search", {"width": "218px"})
 compare-elements-position-near: (
     "#crate-search",
     "#search-settings .search-results-title",