2022-09-08 16:41:29 -05:00
|
|
|
// Checking the colors of the codeblocks tooltips.
|
2024-04-05 14:38:55 -05:00
|
|
|
include: "utils.goml"
|
2023-04-11 12:11:34 -05:00
|
|
|
go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html"
|
2022-09-08 16:41:29 -05:00
|
|
|
show-text: true
|
|
|
|
|
2022-10-19 05:01:59 -05:00
|
|
|
define-function: (
|
|
|
|
"check-colors",
|
2024-04-01 14:11:22 -05:00
|
|
|
[theme, background, color, border],
|
2023-01-06 08:18:51 -06:00
|
|
|
block {
|
2024-04-05 14:38:55 -05:00
|
|
|
call-function: ("switch-theme", {"theme": |theme|})
|
2022-10-19 05:01:59 -05:00
|
|
|
|
|
|
|
// compile_fail block
|
2023-01-06 08:18:51 -06:00
|
|
|
assert-css: (
|
2022-10-19 05:01:59 -05:00
|
|
|
".docblock .example-wrap.compile_fail .tooltip",
|
|
|
|
{"color": "rgba(255, 0, 0, 0.5)"},
|
2023-01-06 08:18:51 -06:00
|
|
|
)
|
|
|
|
assert-css: (
|
2022-10-19 05:01:59 -05:00
|
|
|
".docblock .example-wrap.compile_fail",
|
|
|
|
{"border-left": "2px solid rgba(255, 0, 0, 0.5)"},
|
2023-01-06 08:18:51 -06:00
|
|
|
)
|
2022-10-19 05:01:59 -05:00
|
|
|
|
2023-01-06 08:18:51 -06:00
|
|
|
move-cursor-to: ".docblock .example-wrap.compile_fail .tooltip"
|
2022-10-19 05:01:59 -05:00
|
|
|
|
2023-01-06 08:18:51 -06:00
|
|
|
assert-css: (
|
2022-10-19 05:01:59 -05:00
|
|
|
".docblock .example-wrap.compile_fail .tooltip",
|
|
|
|
{"color": "rgb(255, 0, 0)"},
|
2023-01-06 08:18:51 -06:00
|
|
|
)
|
|
|
|
assert-css: (
|
2022-10-19 05:01:59 -05:00
|
|
|
".docblock .example-wrap.compile_fail",
|
|
|
|
{"border-left": "2px solid rgb(255, 0, 0)"},
|
2023-01-06 08:18:51 -06:00
|
|
|
)
|
2023-01-26 14:32:33 -06:00
|
|
|
click: ".docblock .example-wrap.compile_fail .tooltip"
|
|
|
|
assert-text: (
|
|
|
|
".popover.tooltip",
|
|
|
|
"This example deliberately fails to compile"
|
|
|
|
)
|
|
|
|
assert-css: (".popover.tooltip", {
|
|
|
|
"color": |color|,
|
|
|
|
"background-color": |background|,
|
|
|
|
"border-color": |border|,
|
|
|
|
})
|
rustdoc: add interaction delays for tooltip popovers
Designing a good hover microinteraction is a matter of guessing
user intent from what are, literally, vague gestures. In this case,
guessing if hovering in our out of the tooltip base is intentional
or not.
To figure this out, a few different techniques are used:
* When the mouse pointer enters a tooltip anchor point, its hitbox
is grown on the bottom, where the popover is/will appear. This was
already there before this commit: search "hover tunnel" in
rustdoc.css for the implementation.
* This commit adds a delay when the mouse pointer enters the base
anchor, in case the mouse pointer was just passing through and the
user didn't want to open it.
* This commit also adds a delay when the mouse pointer exits the
tooltip's base anchor or its popover, before hiding it.
* A fade-out animation is layered onto the pointer exit delay to
immediately inform the user that they successfully dismissed the
popover, while still providing a way for them to cancel it if
it was a mistake and they still wanted to interact with it.
* No animation is used for revealing it, because we don't want
people to try to interact with an element while it's in the
middle of fading in: either they're allowed to interact with
it while it's fading in, meaning it can't serve as mistake-
proofing for opening the popover, or they can't, but they
might try and be frustrated.
See also:
* https://www.nngroup.com/articles/timing-exposing-content/
* https://www.nngroup.com/articles/tooltip-guidelines/
* https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
2023-05-23 17:29:43 -05:00
|
|
|
click: ".docblock .example-wrap.compile_fail .tooltip"
|
2022-10-19 05:01:59 -05:00
|
|
|
|
|
|
|
// should_panic block
|
2023-01-06 08:18:51 -06:00
|
|
|
assert-css: (
|
2022-10-19 05:01:59 -05:00
|
|
|
".docblock .example-wrap.should_panic .tooltip",
|
|
|
|
{"color": "rgba(255, 0, 0, 0.5)"},
|
2023-01-06 08:18:51 -06:00
|
|
|
)
|
|
|
|
assert-css: (
|
2022-10-19 05:01:59 -05:00
|
|
|
".docblock .example-wrap.should_panic",
|
|
|
|
{"border-left": "2px solid rgba(255, 0, 0, 0.5)"},
|
2023-01-06 08:18:51 -06:00
|
|
|
)
|
2022-10-19 05:01:59 -05:00
|
|
|
|
2023-01-06 08:18:51 -06:00
|
|
|
move-cursor-to: ".docblock .example-wrap.should_panic .tooltip"
|
2022-10-19 05:01:59 -05:00
|
|
|
|
2023-01-06 08:18:51 -06:00
|
|
|
assert-css: (
|
2022-10-19 05:01:59 -05:00
|
|
|
".docblock .example-wrap.should_panic .tooltip",
|
|
|
|
{"color": "rgb(255, 0, 0)"},
|
2023-01-06 08:18:51 -06:00
|
|
|
)
|
|
|
|
assert-css: (
|
2022-10-19 05:01:59 -05:00
|
|
|
".docblock .example-wrap.should_panic",
|
|
|
|
{"border-left": "2px solid rgb(255, 0, 0)"},
|
2023-01-06 08:18:51 -06:00
|
|
|
)
|
2023-01-26 14:32:33 -06:00
|
|
|
click: ".docblock .example-wrap.should_panic .tooltip"
|
|
|
|
assert-text: (
|
|
|
|
".popover.tooltip",
|
|
|
|
"This example panics"
|
2023-01-06 08:18:51 -06:00
|
|
|
)
|
2023-01-26 14:32:33 -06:00
|
|
|
assert-css: (".popover.tooltip", {
|
|
|
|
"color": |color|,
|
|
|
|
"background-color": |background|,
|
|
|
|
"border-color": |border|,
|
|
|
|
})
|
rustdoc: add interaction delays for tooltip popovers
Designing a good hover microinteraction is a matter of guessing
user intent from what are, literally, vague gestures. In this case,
guessing if hovering in our out of the tooltip base is intentional
or not.
To figure this out, a few different techniques are used:
* When the mouse pointer enters a tooltip anchor point, its hitbox
is grown on the bottom, where the popover is/will appear. This was
already there before this commit: search "hover tunnel" in
rustdoc.css for the implementation.
* This commit adds a delay when the mouse pointer enters the base
anchor, in case the mouse pointer was just passing through and the
user didn't want to open it.
* This commit also adds a delay when the mouse pointer exits the
tooltip's base anchor or its popover, before hiding it.
* A fade-out animation is layered onto the pointer exit delay to
immediately inform the user that they successfully dismissed the
popover, while still providing a way for them to cancel it if
it was a mistake and they still wanted to interact with it.
* No animation is used for revealing it, because we don't want
people to try to interact with an element while it's in the
middle of fading in: either they're allowed to interact with
it while it's fading in, meaning it can't serve as mistake-
proofing for opening the popover, or they can't, but they
might try and be frustrated.
See also:
* https://www.nngroup.com/articles/timing-exposing-content/
* https://www.nngroup.com/articles/tooltip-guidelines/
* https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
2023-05-23 17:29:43 -05:00
|
|
|
click: ".docblock .example-wrap.should_panic .tooltip"
|
2022-10-19 05:01:59 -05:00
|
|
|
|
|
|
|
// ignore block
|
2023-01-06 08:18:51 -06:00
|
|
|
assert-css: (
|
2022-10-19 05:01:59 -05:00
|
|
|
".docblock .example-wrap.ignore .tooltip",
|
|
|
|
{"color": "rgba(255, 142, 0, 0.6)"},
|
2023-01-06 08:18:51 -06:00
|
|
|
)
|
|
|
|
assert-css: (
|
2022-10-19 05:01:59 -05:00
|
|
|
".docblock .example-wrap.ignore",
|
|
|
|
{"border-left": "2px solid rgba(255, 142, 0, 0.6)"},
|
2023-01-06 08:18:51 -06:00
|
|
|
)
|
2022-10-19 05:01:59 -05:00
|
|
|
|
2023-01-06 08:18:51 -06:00
|
|
|
move-cursor-to: ".docblock .example-wrap.ignore .tooltip"
|
2022-10-19 05:01:59 -05:00
|
|
|
|
2023-01-06 08:18:51 -06:00
|
|
|
assert-css: (
|
2022-10-19 05:01:59 -05:00
|
|
|
".docblock .example-wrap.ignore .tooltip",
|
|
|
|
{"color": "rgb(255, 142, 0)"},
|
2023-01-06 08:18:51 -06:00
|
|
|
)
|
|
|
|
assert-css: (
|
2022-10-19 05:01:59 -05:00
|
|
|
".docblock .example-wrap.ignore",
|
|
|
|
{"border-left": "2px solid rgb(255, 142, 0)"},
|
2023-01-06 08:18:51 -06:00
|
|
|
)
|
2023-01-26 14:32:33 -06:00
|
|
|
click: ".docblock .example-wrap.ignore .tooltip"
|
|
|
|
assert-text: (
|
|
|
|
".popover.tooltip",
|
|
|
|
"This example is not tested"
|
|
|
|
)
|
|
|
|
assert-css: (".popover.tooltip", {
|
|
|
|
"color": |color|,
|
|
|
|
"background-color": |background|,
|
|
|
|
"border-color": |border|,
|
|
|
|
})
|
|
|
|
click: ".docblock .example-wrap.ignore .tooltip"
|
|
|
|
assert-false: ".popover.tooltip"
|
2023-01-06 08:18:51 -06:00
|
|
|
},
|
2022-10-19 05:01:59 -05:00
|
|
|
)
|
|
|
|
|
2022-11-17 07:31:50 -06:00
|
|
|
call-function: ("check-colors", {
|
|
|
|
"theme": "ayu",
|
2023-05-20 08:35:52 -05:00
|
|
|
"background": "#0f1419",
|
|
|
|
"color": "#c5c5c5",
|
|
|
|
"border": "#5c6773",
|
2022-11-17 07:31:50 -06:00
|
|
|
})
|
|
|
|
call-function: ("check-colors", {
|
|
|
|
"theme": "dark",
|
2023-05-20 08:35:52 -05:00
|
|
|
"background": "#353535",
|
|
|
|
"color": "#ddd",
|
|
|
|
"border": "#e0e0e0",
|
2022-11-17 07:31:50 -06:00
|
|
|
})
|
|
|
|
call-function: ("check-colors", {
|
|
|
|
"theme": "light",
|
2023-05-20 08:35:52 -05:00
|
|
|
"background": "white",
|
|
|
|
"color": "black",
|
|
|
|
"border": "#e0e0e0",
|
2022-11-17 07:31:50 -06:00
|
|
|
})
|