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

Migrate toggle-line-inner background to CSS variable

r? `@notriddle`
This commit is contained in:
bors 2022-12-24 20:23:45 +00:00
commit 46160e6fa9
5 changed files with 51 additions and 22 deletions

View File

@ -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 {

View File

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

View File

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

View File

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

View File

@ -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"
// Clicking "More examples..." will open additional examples
assert-attribute-false: (".more-examples-toggle", {"open": ""})
click: ".more-examples-toggle"
assert-attribute: (".more-examples-toggle", {"open": ""})
// 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": ""})),
("click", ".more-examples-toggle"),
("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"