Rollup merge of #96939 - GuillaumeGomez:settings-css, r=notriddle

Fix settings page CSS

In #96741, I moved the CSS loading outside of `settings.js`. The result was that on the settings page, there isn't the settings CSS anymore:

![Screenshot from 2022-05-11 11-09-24](https://user-images.githubusercontent.com/3050060/167817969-6750931b-3e6e-4178-b5a9-ee3851e983be.png)

I also used this opportunity to remove unused CSS rules (we don't have `<select>` elements anymore in the settings).

cc `@jsha`
r? `@notriddle`

Author: matthiaskrgr

Diff for: src/librustdoc/html/render/context.rs

@@ -596,9 +596,11 @@ impl<'tcx> FormatRenderer<'tcx> for Context<'tcx> {
             |buf: &mut Buffer| {
                 write!(
                     buf,
-                    "<script defer src=\"{}settings{}.js\"></script>",
-                    page.static_root_path.unwrap_or(""),
-                    page.resource_suffix
+                    "<link rel=\"stylesheet\" type=\"text/css\" \
+                        href=\"{root_path}settings{suffix}.css\">\
+                    <script defer src=\"{root_path}settings{suffix}.js\"></script>",
+                    root_path = page.static_root_path.unwrap_or(""),
+                    suffix = page.resource_suffix,
                 )
             },
             &self.shared.style_files,

Diff for: src/librustdoc/html/static/css/settings.css

@@ -56,38 +56,6 @@
 	position: absolute;
 }
 
-.select-wrapper {
-	float: right;
-	position: relative;
-	height: 27px;
-	min-width: 25%;
-}
-
-.select-wrapper select {
-	appearance: none;
-	-moz-appearance: none;
-	-webkit-appearance: none;
-	background: none;
-	border: 2px solid #ccc;
-	padding-right: 28px;
-	width: 100%;
-}
-
-.select-wrapper img {
-	pointer-events: none;
-	position: absolute;
-	right: 0;
-	bottom: 0;
-	background: #ccc;
-	height: 100%;
-	width: 28px;
-	padding: 0px 4px;
-}
-
-.select-wrapper select option {
-	color: initial;
-}
-
 .slider {
 	position: absolute;
 	cursor: pointer;
@@ -96,7 +64,6 @@
 	right: 0;
 	bottom: 0;
 	background-color: #ccc;
-	-webkit-transition: .3s;
 	transition: .3s;
 }
 
@@ -108,7 +75,6 @@
 	left: 4px;
 	bottom: 4px;
 	background-color: white;
-	-webkit-transition: .3s;
 	transition: .3s;
 }
 
@@ -121,8 +87,6 @@ input:focus + .slider {
 }
 
 input:checked + .slider:before {
-	-webkit-transform: translateX(19px);
-	-ms-transform: translateX(19px);
 	transform: translateX(19px);
 }
 

Diff for: src/test/rustdoc-gui/settings.goml

@@ -65,3 +65,8 @@ assert: ".setting-line.hidden #theme"
 // We check their text as well.
 assert-text: ("#preferred-dark-theme .setting-name", "Preferred dark theme")
 assert-text: ("#preferred-light-theme .setting-name", "Preferred light theme")
+
+// Now we go to the settings page to check that the CSS is loaded as expected.
+goto: file://|DOC_PATH|/settings.html
+wait-for: "#settings"
+assert-css: (".setting-line .toggle", {"width": "45px", "margin-right": "20px"})