Auto merge of #106110 - GuillaumeGomez:toggle-line-background, r=notriddle

Migrate toggle-line-inner background to CSS variable

r? `@notriddle`

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

@@ -1993,6 +1993,11 @@ in storage.js
 .toggle-line-inner {
 	min-width: 2px;
 	height: 100%;
+	background: var(--scrape-example-toggle-line-background);
+}
+
+.toggle-line:hover .toggle-line-inner {
+	background: var(--scrape-example-toggle-line-hover-background);
 }
 
 .more-scraped-examples .scraped-example, .example-links {

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

@@ -89,6 +89,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--source-sidebar-background-hover: #14191f;
 	--table-alt-row-background-color: #191f26;
 	--codeblock-link-background: #333;
+	--scrape-example-toggle-line-background: #999;
+	--scrape-example-toggle-line-hover-background: #c5c5c5;
 }
 
 h1, h2, h3, h4 {
@@ -220,9 +222,3 @@ pre.rust .kw-2, pre.rust .prelude-ty {}
 .scraped-example:not(.expanded) .code-wrapper::after {
 	background: linear-gradient(to top, rgba(15, 20, 25, 1), rgba(15, 20, 25, 0));
 }
-.toggle-line-inner {
-	background: #999;
-}
-.toggle-line:hover .toggle-line-inner {
-	background: #c5c5c5;
-}

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

@@ -84,6 +84,8 @@
 	--source-sidebar-background-hover: #444;
 	--table-alt-row-background-color: #2A2A2A;
 	--codeblock-link-background: #333;
+	--scrape-example-toggle-line-background: #999;
+	--scrape-example-toggle-line-hover-background: #c5c5c5;
 }
 
 #titles > button:not(.selected) {
@@ -116,9 +118,3 @@
 .scraped-example:not(.expanded) .code-wrapper::after {
 	background: linear-gradient(to top, rgba(53, 53, 53, 1), rgba(53, 53, 53, 0));
 }
-.toggle-line-inner {
-	background: #999;
-}
-.toggle-line:hover .toggle-line-inner {
-	background: #c5c5c5;
-}

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

@@ -81,6 +81,8 @@
 	--source-sidebar-background-hover: #e0e0e0;
 	--table-alt-row-background-color: #F5F5F5;
 	--codeblock-link-background: #eee;
+	--scrape-example-toggle-line-background: #ccc;
+	--scrape-example-toggle-line-hover-background: #999;
 }
 
 #titles > button:not(.selected) {
@@ -113,9 +115,3 @@
 .scraped-example:not(.expanded) .code-wrapper::after {
 	background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
 }
-.toggle-line-inner {
-	background: #ccc;
-}
-.toggle-line:hover .toggle-line-inner {
-	background: #999;
-}

src/test/rustdoc-gui/scrape-examples-toggle.goml

@@ -1,10 +1,46 @@
 // This tests checks that the "scraped examples" toggle is working as expected.
 goto: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"
 
+// Checking the color of the toggle line.
+show-text: true
+define-function: (
+    "check-color",
+    (theme, toggle_line_color, toggle_line_hover_color),
+    [
+        ("local-storage", {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}),
+        ("reload"),
+
         // Clicking "More examples..." will open additional examples
-assert-attribute-false: (".more-examples-toggle", {"open": ""})
+        ("assert-attribute-false", (".more-examples-toggle", {"open": ""})),
-click: ".more-examples-toggle"
+        ("click", ".more-examples-toggle"),
-assert-attribute: (".more-examples-toggle", {"open": ""})
+        ("assert-attribute", (".more-examples-toggle", {"open": ""})),
+
+        ("assert-css", (".toggle-line-inner", {"background-color": |toggle_line_color|}, ALL)),
+        ("move-cursor-to", ".toggle-line"),
+        ("assert-css", (
+            ".toggle-line:hover .toggle-line-inner",
+            {"background-color": |toggle_line_hover_color|},
+        )),
+        // Moving cursor away from the toggle line to prevent disrupting next test.
+        ("move-cursor-to", ".search-input"),
+    ],
+)
+
+call-function: ("check-color", {
+    "theme": "ayu",
+    "toggle_line_color": "rgb(153, 153, 153)",
+    "toggle_line_hover_color": "rgb(197, 197, 197)",
+})
+call-function: ("check-color", {
+    "theme": "dark",
+    "toggle_line_color": "rgb(153, 153, 153)",
+    "toggle_line_hover_color": "rgb(197, 197, 197)",
+})
+call-function: ("check-color", {
+    "theme": "light",
+    "toggle_line_color": "rgb(204, 204, 204)",
+    "toggle_line_hover_color": "rgb(153, 153, 153)",
+})
 
 // Toggling all docs will close additional examples
 click: "#toggle-all-docs"