Rollup merge of #104129 - notriddle:notriddle/102576-js-notable-trait, r=Manishearth

rustdoc: use javascript to layout notable traits popups

Fixes #102576

Preview: https://notriddle.com/notriddle-rustdoc-demos/102576-js-notable-trait/std/iter/trait.Iterator.html#method.step_by

## Before

![image](https://user-images.githubusercontent.com/1593513/200432713-23aa8d49-ba2b-469f-9eab-089e0c174039.png)

## After

![image](https://user-images.githubusercontent.com/1593513/200432735-edd5b53d-e99d-4fc5-9410-8a79e0efdc9d.png)

1 files changed, 93 insertions, 9 deletions

diff --git a/src/test/rustdoc-gui/notable-trait.goml b/src/test/rustdoc-gui/notable-trait.goml
index efe0cb15f08..d8261d8dc90 100644
--- a/src/test/rustdoc-gui/notable-trait.goml
+++ b/src/test/rustdoc-gui/notable-trait.goml
@@ -25,22 +25,28 @@ assert-position: (
     {"x": 951},
 )
 // The tooltip should be beside the `i`
+// Also, clicking the tooltip should bring its text into the DOM
+assert-count: ("//*[@class='notable-traits-tooltiptext']", 0)
 click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+assert-count: ("//*[@class='notable-traits-tooltiptext']", 1)
 compare-elements-position-near: (
     "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits-tooltiptext force-tooltip']",
+    "//*[@class='notable-traits-tooltiptext']",
     {"y": 2}
 )
 compare-elements-position-false: (
     "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits-tooltiptext force-tooltip']",
+    "//*[@class='notable-traits-tooltiptext']",
     ("x")
 )
 // The docblock should be flush with the border.
 assert-css: (
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits-tooltiptext force-tooltip']/*[@class='docblock']",
+    "//*[@class='notable-traits-tooltiptext']/*[@class='docblock']",
     {"margin-left": "0px"}
 )
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+move-cursor-to: "//h1"
+assert-count: ("//*[@class='notable-traits-tooltiptext']", 0)
 
 // Now only the `i` should be on the next line.
 size: (1055, 600)
@@ -98,26 +104,31 @@ assert-position: (
     {"x": 289},
 )
 // The tooltip should be below `i`
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+assert-count: ("//*[@class='notable-traits-tooltiptext']", 1)
 compare-elements-position-near-false: (
     "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits-tooltiptext force-tooltip']",
+    "//*[@class='notable-traits-tooltiptext']",
     {"y": 2}
 )
 compare-elements-position-false: (
     "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits-tooltiptext force-tooltip']",
+    "//*[@class='notable-traits-tooltiptext']",
     ("x")
 )
 compare-elements-position-near: (
-    "//*[@id='method.create_an_iterator_from_read']/parent::*",
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits-tooltiptext force-tooltip']",
-    {"x": 5}
+    "//*[@id='method.create_an_iterator_from_read']",
+    "//*[@class='notable-traits-tooltiptext']",
+    {"x": 10}
 )
 // The docblock should be flush with the border.
 assert-css: (
-    "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits-tooltiptext force-tooltip']/*[@class='docblock']",
+    "//*[@class='notable-traits-tooltiptext']/*[@class='docblock']",
     {"margin-left": "0px"}
 )
+click: "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"
+move-cursor-to: "//h1"
+assert-count: ("//*[@class='notable-traits-tooltiptext']", 0)
 
 // Checking on very small mobile. The `i` should be on its own line.
 size: (365, 600)
@@ -126,3 +137,76 @@ compare-elements-position-false: (
     "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']",
     ("y", "x"),
 )
+
+// Now check the colors.
+define-function: (
+    "check-colors",
+    (theme, header_color, content_color, type_color, trait_color),
+    [
+        ("goto", "file://" + |DOC_PATH| + "/test_docs/struct.NotableStructWithLongName.html"),
+        // This is needed to ensure that the text color is computed.
+        ("show-text", true),
+
+        // Setting the theme.
+        ("local-storage", {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}),
+        // We reload the page so the local storage settings are being used.
+        ("reload"),
+
+        ("move-cursor-to", "//*[@id='method.create_an_iterator_from_read']//*[@class='notable-traits']"),
+        ("assert-count", (".notable-traits-tooltiptext", 1)),
+
+        ("assert-css", (
+             ".notable-traits-tooltiptext h3.notable",
+             {"color": |header_color|},
+             ALL,
+        )),
+        ("assert-css", (
+             ".notable-traits-tooltiptext pre.content",
+             {"color": |content_color|},
+             ALL,
+        )),
+        ("assert-css", (
+             ".notable-traits-tooltiptext pre.content a.struct",
+             {"color": |type_color|},
+             ALL,
+        )),
+        ("assert-css", (
+             ".notable-traits-tooltiptext pre.content a.trait",
+             {"color": |trait_color|},
+             ALL,
+        )),
+    ]
+)
+
+call-function: (
+    "check-colors",
+    {
+        "theme": "ayu",
+        "content_color": "rgb(230, 225, 207)",
+        "header_color": "rgb(255, 255, 255)",
+        "type_color": "rgb(255, 160, 165)",
+        "trait_color": "rgb(57, 175, 215)",
+    },
+)
+
+call-function: (
+    "check-colors",
+    {
+        "theme": "dark",
+        "content_color": "rgb(221, 221, 221)",
+        "header_color": "rgb(221, 221, 221)",
+        "type_color": "rgb(45, 191, 184)",
+        "trait_color": "rgb(183, 140, 242)",
+    },
+)
+
+call-function: (
+    "check-colors",
+    {
+        "theme": "light",
+        "content_color": "rgb(0, 0, 0)",
+        "header_color": "rgb(0, 0, 0)",
+        "type_color": "rgb(173, 55, 138)",
+        "trait_color": "rgb(110, 79, 201)",
+    },
+)