Rollup merge of #128394 - GuillaumeGomez:run-button, r=t-rustdoc

Unify run button display with "copy code" button and with mdbook buttons

Follow-up of https://github.com/rust-lang/rust/pull/128339.

It looks like this (coherency++, yeay!):

![Screenshot from 2024-07-30 15-16-31](https://github.com/user-attachments/assets/5e262e5b-f338-4085-94ca-e223033a43db)

Can be tested [here](https://rustdoc.crud.net/imperio/run-button/foo/struct.Bar.html).

r? `@notriddle`

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)",
+})

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: (

tests/rustdoc-gui/run-on-hover.goml

@@ -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)",
-})