diff --git a/src/librustdoc/html/markdown.rs b/src/librustdoc/html/markdown.rs
index bb8d39aaf1d..c41db654112 100644
--- a/src/librustdoc/html/markdown.rs
+++ b/src/librustdoc/html/markdown.rs
@@ -304,7 +304,8 @@ impl<'a, I: Iterator- >> Iterator for CodeBlocks<'_, 'a, I> {
Some(format!(
"Run",
+ title=\"Run code\" \
+ href=\"{url}?code={test_escaped}{channel}&edition={edition}\">",
))
});
diff --git a/src/librustdoc/html/static/css/noscript.css b/src/librustdoc/html/static/css/noscript.css
index 6e10cf21537..86e8edad703 100644
--- a/src/librustdoc/html/static/css/noscript.css
+++ b/src/librustdoc/html/static/css/noscript.css
@@ -104,10 +104,6 @@ nav.sub {
--code-highlight-doc-comment-color: #4d4d4c;
--src-line-numbers-span-color: #c67e2d;
--src-line-number-highlighted-background-color: #fdffd3;
- --test-arrow-color: #f5f5f5;
- --test-arrow-background-color: rgba(78, 139, 202, 0.2);
- --test-arrow-hover-color: #f5f5f5;
- --test-arrow-hover-background-color: rgb(78, 139, 202);
--target-background-color: #fdffd3;
--target-border-color: #ad7c37;
--kbd-color: #000;
@@ -210,10 +206,6 @@ nav.sub {
--code-highlight-doc-comment-color: #8ca375;
--src-line-numbers-span-color: #3b91e2;
--src-line-number-highlighted-background-color: #0a042f;
- --test-arrow-color: #dedede;
- --test-arrow-background-color: rgba(78, 139, 202, 0.2);
- --test-arrow-hover-color: #dedede;
- --test-arrow-hover-background-color: #4e8bca;
--target-background-color: #494a3d;
--target-border-color: #bb7410;
--kbd-color: #000;
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 02a6bb8f548..eb5a5d935e2 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -353,7 +353,7 @@ details:not(.toggle) summary {
margin-bottom: .6em;
}
-code, pre, a.test-arrow, .code-header {
+code, pre, .code-header {
font-family: "Source Code Pro", monospace;
}
.docblock code, .docblock-short code {
@@ -946,8 +946,8 @@ because of the `[-]` element which would overlap with it. */
.main-heading a:hover,
.example-wrap .rust a:hover,
.all-items a:hover,
-.docblock a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover:not(.doc-anchor),
-.docblock-short a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover,
+.docblock a:not(.scrape-help):not(.tooltip):hover:not(.doc-anchor),
+.docblock-short a:not(.scrape-help):not(.tooltip):hover,
.item-info a {
text-decoration: underline;
}
@@ -1461,22 +1461,17 @@ documentation. */
z-index: 1;
}
a.test-arrow {
- padding: 5px 7px;
- border-radius: var(--button-border-radius);
- font-size: 1rem;
- color: var(--test-arrow-color);
- background-color: var(--test-arrow-background-color);
+ height: var(--copy-path-height);
+ padding: 6px 4px 0 11px;
}
-a.test-arrow:hover {
- color: var(--test-arrow-hover-color);
- background-color: var(--test-arrow-hover-background-color);
+a.test-arrow::before {
+ content: url('data:image/svg+xml,');
}
.example-wrap .button-holder {
display: flex;
}
-.example-wrap:hover > .test-arrow {
- padding: 2px 7px;
-}
+
/*
On iPad, the ":hover" state sticks around, making things work not greatly. Do work around
it, we move it into this media query. More information can be found at:
@@ -1486,29 +1481,34 @@ However, using `@media (hover: hover)` makes this rule never to be applied in GU
instead, we check that it's not a "finger" cursor.
*/
@media not (pointer: coarse) {
- .example-wrap:hover > .test-arrow, .example-wrap:hover > .button-holder {
+ .example-wrap:hover > a.test-arrow, .example-wrap:hover > .button-holder {
visibility: visible;
}
}
.example-wrap .button-holder.keep-visible {
visibility: visible;
}
-.example-wrap .button-holder .copy-button {
- color: var(--copy-path-button-color);
+.example-wrap .button-holder .copy-button, .example-wrap .test-arrow {
background: var(--main-background-color);
+ cursor: pointer;
+ border-radius: var(--button-border-radius);
height: var(--copy-path-height);
width: var(--copy-path-width);
+}
+.example-wrap .button-holder .copy-button {
margin-left: var(--button-left-margin);
padding: 2px 0 0 4px;
border: 0;
- cursor: pointer;
- border-radius: var(--button-border-radius);
+}
+.example-wrap .button-holder .copy-button::before,
+.example-wrap .test-arrow::before {
+ filter: var(--copy-path-img-filter);
}
.example-wrap .button-holder .copy-button::before {
- filter: var(--copy-path-img-filter);
content: var(--clipboard-image);
}
-.example-wrap .button-holder .copy-button:hover::before {
+.example-wrap .button-holder .copy-button:hover::before,
+.example-wrap .test-arrow:hover::before {
filter: var(--copy-path-img-hover-filter);
}
.example-wrap .button-holder .copy-button.clicked::before {
@@ -2552,10 +2552,6 @@ by default.
--code-highlight-doc-comment-color: #4d4d4c;
--src-line-numbers-span-color: #c67e2d;
--src-line-number-highlighted-background-color: #fdffd3;
- --test-arrow-color: #f5f5f5;
- --test-arrow-background-color: rgba(78, 139, 202, 0.2);
- --test-arrow-hover-color: #f5f5f5;
- --test-arrow-hover-background-color: rgb(78, 139, 202);
--target-background-color: #fdffd3;
--target-border-color: #ad7c37;
--kbd-color: #000;
@@ -2658,10 +2654,6 @@ by default.
--code-highlight-doc-comment-color: #8ca375;
--src-line-numbers-span-color: #3b91e2;
--src-line-number-highlighted-background-color: #0a042f;
- --test-arrow-color: #dedede;
- --test-arrow-background-color: rgba(78, 139, 202, 0.2);
- --test-arrow-hover-color: #dedede;
- --test-arrow-hover-background-color: #4e8bca;
--target-background-color: #494a3d;
--target-border-color: #bb7410;
--kbd-color: #000;
@@ -2771,10 +2763,6 @@ Original by Dempfi (https://github.com/dempfi/ayu)
--code-highlight-doc-comment-color: #a1ac88;
--src-line-numbers-span-color: #5c6773;
--src-line-number-highlighted-background-color: rgba(255, 236, 164, 0.06);
- --test-arrow-color: #788797;
- --test-arrow-background-color: rgba(57, 175, 215, 0.09);
- --test-arrow-hover-color: #c5c5c5;
- --test-arrow-hover-background-color: rgba(57, 175, 215, 0.368);
--target-background-color: rgba(255, 236, 164, 0.06);
--target-border-color: rgba(255, 180, 76, 0.85);
--kbd-color: #c5c5c5;
diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index 62fbde6f225..75f2a1418cd 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@@ -1835,10 +1835,14 @@ href="https://doc.rust-lang.org/${channel}/rustdoc/read-documentation/search.htm
function getExampleWrap(event) {
let elem = event.target;
while (!hasClass(elem, "example-wrap")) {
- elem = elem.parentElement;
- if (elem === document.body || hasClass(elem, "docblock")) {
+ if (elem === document.body ||
+ elem.tagName === "A" ||
+ elem.tagName === "BUTTON" ||
+ hasClass(elem, "docblock")
+ ) {
return null;
}
+ elem = elem.parentElement;
}
return elem;
}
diff --git a/tests/rustdoc-gui/code-example-buttons.goml b/tests/rustdoc-gui/code-example-buttons.goml
index 57ea2970072..4f037ec79f5 100644
--- a/tests/rustdoc-gui/code-example-buttons.goml
+++ b/tests/rustdoc-gui/code-example-buttons.goml
@@ -1,5 +1,6 @@
// This test ensures that code blocks buttons are displayed on hover and when you click on them.
go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
+include: "utils.goml"
// First we check we "hover".
move-cursor-to: ".example-wrap"
@@ -19,3 +20,77 @@ click: ".example-wrap"
move-cursor-to: ".search-input"
assert-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 0)
assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })
+
+// Clicking on the "copy code" button shouldn't make the buttons stick.
+click: ".example-wrap .copy-button"
+move-cursor-to: ".search-input"
+assert-count: (".example-wrap:not(:hover) .button-holder.keep-visible", 0)
+assert-css: (".example-wrap .copy-button", { "visibility": "hidden" })
+
+define-function: (
+ "check-buttons",
+ [theme, background, filter, filter_hover],
+ block {
+ call-function: ("switch-theme", {"theme": |theme|})
+
+ assert-css: (".example-wrap .test-arrow", {"visibility": "hidden"})
+ assert-css: (".example-wrap .copy-button", {"visibility": "hidden"})
+
+ move-cursor-to: ".example-wrap"
+ assert-css: (".example-wrap .test-arrow", {
+ "visibility": "visible",
+ "background-color": |background|,
+ "border-radius": "2px",
+ })
+ assert-css: (".example-wrap .test-arrow::before", {
+ "filter": |filter|,
+ })
+ assert-css: (".example-wrap .copy-button", {
+ "visibility": "visible",
+ "background-color": |background|,
+ "border-radius": "2px",
+ })
+ assert-css: (".example-wrap .copy-button::before", {
+ "filter": |filter|,
+ })
+
+ move-cursor-to: ".example-wrap .test-arrow"
+ assert-css: (".example-wrap .test-arrow:hover", {
+ "visibility": "visible",
+ "background-color": |background|,
+ "border-radius": "2px",
+ })
+ assert-css: (".example-wrap .test-arrow:hover::before", {
+ "filter": |filter_hover|,
+ })
+
+ move-cursor-to: ".example-wrap .copy-button"
+ assert-css: (".example-wrap .copy-button:hover", {
+ "visibility": "visible",
+ "background-color": |background|,
+ "border-radius": "2px",
+ })
+ assert-css: (".example-wrap .copy-button:hover::before", {
+ "filter": |filter_hover|,
+ })
+ },
+)
+
+call-function: ("check-buttons",{
+ "theme": "ayu",
+ "background": "#0f1419",
+ "filter": "invert(0.7)",
+ "filter_hover": "invert(1)",
+})
+call-function: ("check-buttons",{
+ "theme": "dark",
+ "background": "#353535",
+ "filter": "invert(0.5)",
+ "filter_hover": "invert(0.65)",
+})
+call-function: ("check-buttons",{
+ "theme": "light",
+ "background": "#fff",
+ "filter": "invert(0.5)",
+ "filter_hover": "invert(0.35)",
+})
diff --git a/tests/rustdoc-gui/copy-code.goml b/tests/rustdoc-gui/copy-code.goml
index 72a5bece175..9cc717bc67a 100644
--- a/tests/rustdoc-gui/copy-code.goml
+++ b/tests/rustdoc-gui/copy-code.goml
@@ -24,11 +24,11 @@ define-function: (
)
call-function: ("check-copy-button", {})
-// Checking that the run button and the copy button have the same height.
+// Checking that the run button and the copy button have the same height and same width.
compare-elements-size: (
".example-wrap:nth-of-type(1) .test-arrow",
".example-wrap:nth-of-type(1) .copy-button",
- ["height"],
+ ["height", "width"],
)
// ... and the same y position.
compare-elements-position: (
diff --git a/tests/rustdoc-gui/run-on-hover.goml b/tests/rustdoc-gui/run-on-hover.goml
deleted file mode 100644
index b62da79b780..00000000000
--- a/tests/rustdoc-gui/run-on-hover.goml
+++ /dev/null
@@ -1,54 +0,0 @@
-// Example code blocks sometimes have a "Run" button to run them on the
-// Playground. That button is hidden until the user hovers over the code block.
-// This test checks that it is hidden, and that it shows on hover. It also
-// checks for its color.
-include: "utils.goml"
-go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
-show-text: true
-
-define-function: (
- "check-run-button",
- [theme, color, background, hover_color, hover_background],
- block {
- call-function: ("switch-theme", {"theme": |theme|})
- assert-css: (".test-arrow", {"visibility": "hidden"})
- move-cursor-to: ".example-wrap"
- assert-css: (".test-arrow", {
- "visibility": "visible",
- "color": |color|,
- "background-color": |background|,
- "font-size": "16px",
- "border-radius": "2px",
- })
- move-cursor-to: ".test-arrow"
- assert-css: (".test-arrow:hover", {
- "visibility": "visible",
- "color": |hover_color|,
- "background-color": |hover_background|,
- "font-size": "16px",
- "border-radius": "2px",
- })
- },
-)
-
-call-function: ("check-run-button", {
- "theme": "ayu",
- "color": "#788797",
- "background": "rgba(57, 175, 215, 0.09)",
- "hover_color": "#c5c5c5",
- "hover_background": "rgba(57, 175, 215, 0.37)",
-})
-call-function: ("check-run-button", {
- "theme": "dark",
- "color": "#dedede",
- "background": "rgba(78, 139, 202, 0.2)",
- "hover_color": "#dedede",
- "hover_background": "rgb(78, 139, 202)",
-})
-call-function: ("check-run-button", {
- "theme": "light",
- "color": "#f5f5f5",
- "background": "rgba(78, 139, 202, 0.2)",
- "hover_color": "#f5f5f5",
- "hover_background": "rgb(78, 139, 202)",
-})
diff --git a/tests/rustdoc/playground-arg.rs b/tests/rustdoc/playground-arg.rs
index 5875451a859..e10a31017ef 100644
--- a/tests/rustdoc/playground-arg.rs
+++ b/tests/rustdoc/playground-arg.rs
@@ -10,4 +10,4 @@
pub fn dummy() {}
// ensure that `extern crate foo;` was inserted into code snips automatically:
-//@ matches foo/index.html '//a[@class="test-arrow"][@href="https://example.com/?code=%23!%5Ballow(unused)%5D%0A%23%5Ballow(unused_extern_crates)%5D%0Aextern+crate+r%23foo;%0Afn+main()+%7B%0A++++use+foo::dummy;%0A++++dummy();%0A%7D&edition=2015"]' "Run"
+//@ matches foo/index.html '//a[@class="test-arrow"][@href="https://example.com/?code=%23!%5Ballow(unused)%5D%0A%23%5Ballow(unused_extern_crates)%5D%0Aextern+crate+r%23foo;%0Afn+main()+%7B%0A++++use+foo::dummy;%0A++++dummy();%0A%7D&edition=2015"]' ""
diff --git a/tests/rustdoc/playground-syntax-error.rs b/tests/rustdoc/playground-syntax-error.rs
index f5067145e02..d989570bf58 100644
--- a/tests/rustdoc/playground-syntax-error.rs
+++ b/tests/rustdoc/playground-syntax-error.rs
@@ -17,5 +17,5 @@
pub fn bar() {}
//@ has foo/fn.bar.html
-//@ has - '//a[@class="test-arrow"]' "Run"
+//@ has - '//a[@class="test-arrow"]' ""
//@ has - '//*[@class="docblock"]' 'foo_recursive'
diff --git a/tests/rustdoc/playground.rs b/tests/rustdoc/playground.rs
index 7880f779067..db2d1669df6 100644
--- a/tests/rustdoc/playground.rs
+++ b/tests/rustdoc/playground.rs
@@ -22,6 +22,6 @@
//! }
//! ```
-//@ matches foo/index.html '//a[@class="test-arrow"][@href="https://www.example.com/?code=%23!%5Ballow(unused)%5D%0Afn+main()+%7B%0A++++println!(%22Hello,+world!%22);%0A%7D&edition=2015"]' "Run"
-//@ matches foo/index.html '//a[@class="test-arrow"][@href="https://www.example.com/?code=%23!%5Ballow(unused)%5D%0Afn+main()+%7B%0A++++println!(%22Hello,+world!%22);%0A%7D&edition=2015"]' "Run"
-//@ matches foo/index.html '//a[@class="test-arrow"][@href="https://www.example.com/?code=%23!%5Ballow(unused)%5D%0A%23!%5Bfeature(something)%5D%0A%0Afn+main()+%7B%0A++++println!(%22Hello,+world!%22);%0A%7D&version=nightly&edition=2015"]' "Run"
+//@ matches foo/index.html '//a[@class="test-arrow"][@href="https://www.example.com/?code=%23!%5Ballow(unused)%5D%0Afn+main()+%7B%0A++++println!(%22Hello,+world!%22);%0A%7D&edition=2015"]' ""
+//@ matches foo/index.html '//a[@class="test-arrow"][@href="https://www.example.com/?code=%23!%5Ballow(unused)%5D%0Afn+main()+%7B%0A++++println!(%22Hello,+world!%22);%0A%7D&edition=2015"]' ""
+//@ matches foo/index.html '//a[@class="test-arrow"][@href="https://www.example.com/?code=%23!%5Ballow(unused)%5D%0A%23!%5Bfeature(something)%5D%0A%0Afn+main()+%7B%0A++++println!(%22Hello,+world!%22);%0A%7D&version=nightly&edition=2015"]' ""