Skip to content

Commit 3054759

Browse files
matthiaskrgrmatthiaskrgr
authored
Rollup merge of #107340 - notriddle:notriddle/simplify-doctest-tooltip, r=GuillaumeGomez
rustdoc: merge doctest tooltip with notable traits tooltip Fixes https://discord.com/channels/442252698964721669/443150878111694848/1066420140167680000 <details><summary>a user report where the tooltip arrow overlaps the text</summary> ![](https://cdn.discordapp.com/attachments/443150878111694848/1066420139530145812/this-example-is-not-tested-busted-rendering.png) </details> Fixes #91100 Preview: <https://notriddle.com/notriddle-rustdoc-demos/simplify-doctest-tooltip/std/vec/struct.Vec.html#indexing> Screenshot: ![image](https://user-images.githubusercontent.com/1593513/214975516-72667632-4609-49fa-8c37-e8d2ba1ba7dc.png)
2 parents 2008188 + 7aa4a20 commit 3054759

File tree

12 files changed

+186
-236
lines changed

12 files changed

+186
-236
lines changed

‎src/librustdoc/html/highlight.rs

+11-5
Original file line numberDiff line numberDiff line change
@@ -96,13 +96,19 @@ fn write_header(out: &mut Buffer, class: &str, extra_content: Option<Buffer>, to
9696
);
9797

9898
if tooltip != Tooltip::None {
99+
let edition_code;
99100
write!(
100101
out,
101-
"<div class='tooltip'{}>ⓘ</div>",
102-
if let Tooltip::Edition(edition_info) = tooltip {
103-
format!(" data-edition=\"{}\"", edition_info)
104-
} else {
105-
String::new()
102+
"<a href=\"#\" class=\"tooltip\" title=\"{}\">ⓘ</a>",
103+
match tooltip {
104+
Tooltip::Ignore => "This example is not tested",
105+
Tooltip::CompileFail => "This example deliberately fails to compile",
106+
Tooltip::ShouldPanic => "This example panics",
107+
Tooltip::Edition(edition) => {
108+
edition_code = format!("This example runs with edition {edition}");
109+
&edition_code
110+
}
111+
Tooltip::None => unreachable!(),
106112
},
107113
);
108114
}

‎src/librustdoc/html/render/mod.rs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1310,7 +1310,7 @@ pub(crate) fn notable_traits_button(ty: &clean::Type, cx: &mut Context<'_>) -> O
13101310
if has_notable_trait {
13111311
cx.types_with_notable_traits.insert(ty.clone());
13121312
Some(format!(
1313-
" <a href=\"#\" class=\"notable-traits\" data-ty=\"{ty}\">ⓘ</a>",
1313+
" <a href=\"#\" class=\"tooltip\" data-notable-ty=\"{ty}\">ⓘ</a>",
13141314
ty = Escape(&format!("{:#}", ty.print(cx))),
13151315
))
13161316
} else {

‎src/librustdoc/html/static/css/rustdoc.css

+9-45
Original file line numberDiff line numberDiff line change
@@ -715,8 +715,8 @@ h2.small-section-header > .anchor {
715715
.main-heading a:hover,
716716
.example-wrap > pre.rust a:hover,
717717
.all-items a:hover,
718-
.docblock a:not(.test-arrow):not(.scrape-help):hover,
719-
.docblock-short a:not(.test-arrow):not(.scrape-help):hover,
718+
.docblock a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover,
719+
.docblock-short a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover,
720720
.item-info a {
721721
text-decoration: underline;
722722
}
@@ -1109,44 +1109,8 @@ pre.rust .doccomment {
11091109
display: block;
11101110
left: -25px;
11111111
top: 5px;
1112-
}
1113-
1114-
.example-wrap .tooltip:hover::after {
1115-
padding: 5px 3px 3px 3px;
1116-
border-radius: 6px;
1117-
margin-left: 5px;
1118-
font-size: 1rem;
1119-
border: 1px solid var(--border-color);
1120-
position: absolute;
1121-
width: max-content;
1122-
top: -2px;
1123-
z-index: 1;
1124-
background-color: var(--tooltip-background-color);
1125-
color: var(--tooltip-color);
1126-
}
1127-
1128-
.example-wrap .tooltip:hover::before {
1129-
content: " ";
1130-
position: absolute;
1131-
top: 50%;
1132-
left: 16px;
1133-
margin-top: -5px;
1134-
z-index: 1;
1135-
border: 5px solid transparent;
1136-
border-right-color: var(--tooltip-background-color);
1137-
}
1138-
1139-
.example-wrap.ignore .tooltip:hover::after {
1140-
content: "This example is not tested";
1141-
}
1142-
.example-wrap.compile_fail .tooltip:hover::after {
1143-
content: "This example deliberately fails to compile";
1144-
}
1145-
.example-wrap.should_panic .tooltip:hover::after {
1146-
content: "This example panics";
1147-
}
1148-
.example-wrap.edition .tooltip:hover::after {
1149-
content: "This code runs with edition " attr(data-edition);
1112+
margin: 0;
1113+
line-height: 1;
11501114
}
11511115

11521116
.example-wrap.compile_fail .tooltip,
@@ -1213,7 +1177,7 @@ a.test-arrow:hover {
12131177
border-right: 3px solid var(--target-border-color);
12141178
}
12151179

1216-
.notable-traits {
1180+
.code-header a.tooltip {
12171181
color: inherit;
12181182
margin-right: 15px;
12191183
position: relative;
@@ -1222,7 +1186,7 @@ a.test-arrow:hover {
12221186
/* placeholder thunk so that the mouse can easily travel from "(i)" to popover
12231187
the resulting "hover tunnel" is a stepped triangle, approximating
12241188
https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown */
1225-
.notable-traits:hover::after {
1189+
a.tooltip:hover::after {
12261190
position: absolute;
12271191
top: calc(100% - 10px);
12281192
left: -15px;
@@ -1231,19 +1195,19 @@ a.test-arrow:hover {
12311195
content: "\00a0";
12321196
}
12331197

1234-
.notable .content {
1198+
.popover.tooltip .content {
12351199
margin: 0.25em 0.5em;
12361200
}
12371201

1238-
.notable .content pre, .notable .content code {
1202+
.popover.tooltip .content pre, .popover.tooltip .content code {
12391203
background: transparent;
12401204
margin: 0;
12411205
padding: 0;
12421206
font-size: 1.25rem;
12431207
white-space: pre-wrap;
12441208
}
12451209

1246-
.notable .content > h3:first-child {
1210+
.popover.tooltip .content > h3:first-child {
12471211
margin: 0 0 5px 0;
12481212
}
12491213

‎src/librustdoc/html/static/css/themes/ayu.css

-2
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,6 @@ Original by Dempfi (https://github.com/dempfi/ayu)
7474
--test-arrow-hover-background-color: rgba(57, 175, 215, 0.368);
7575
--target-background-color: rgba(255, 236, 164, 0.06);
7676
--target-border-color: rgba(255, 180, 76, 0.85);
77-
--tooltip-background-color: #314559;
78-
--tooltip-color: #c5c5c5;
7977
--kbd-color: #c5c5c5;
8078
--kbd-background: #314559;
8179
--kbd-box-shadow-color: #5c6773;

‎src/librustdoc/html/static/css/themes/dark.css

-2
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,6 @@
6969
--test-arrow-hover-background-color: #4e8bca;
7070
--target-background-color: #494a3d;
7171
--target-border-color: #bb7410;
72-
--tooltip-background-color: #000;
73-
--tooltip-color: #fff;
7472
--kbd-color: #000;
7573
--kbd-background: #fafbfc;
7674
--kbd-box-shadow-color: #c6cbd1;

‎src/librustdoc/html/static/css/themes/light.css

-2
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,6 @@
6969
--test-arrow-hover-background-color: #4e8bca;
7070
--target-background-color: #fdffd3;
7171
--target-border-color: #ad7c37;
72-
--tooltip-background-color: #000;
73-
--tooltip-color: #fff;
7472
--kbd-color: #000;
7573
--kbd-background: #fafbfc;
7674
--kbd-box-shadow-color: #c6cbd1;

‎src/librustdoc/html/static/js/main.js

+60-52
Original file line numberDiff line numberDiff line change
@@ -378,7 +378,7 @@ function loadCss(cssUrl) {
378378
}
379379
ev.preventDefault();
380380
searchState.defocus();
381-
window.hideAllModals(true); // true = reset focus for notable traits
381+
window.hideAllModals(true); // true = reset focus for tooltips
382382
}
383383

384384
function handleShortcut(ev) {
@@ -784,17 +784,17 @@ function loadCss(cssUrl) {
784784
// we need to switch away from mobile mode and make the main content area scrollable.
785785
hideSidebar();
786786
}
787-
if (window.CURRENT_NOTABLE_ELEMENT) {
788-
// As a workaround to the behavior of `contains: layout` used in doc togglers, the
789-
// notable traits popup is positioned using javascript.
787+
if (window.CURRENT_TOOLTIP_ELEMENT) {
788+
// As a workaround to the behavior of `contains: layout` used in doc togglers,
789+
// tooltip popovers are positioned using javascript.
790790
//
791791
// This means when the window is resized, we need to redo the layout.
792-
const base = window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE;
793-
const force_visible = base.NOTABLE_FORCE_VISIBLE;
794-
hideNotable(false);
792+
const base = window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE;
793+
const force_visible = base.TOOLTIP_FORCE_VISIBLE;
794+
hideTooltip(false);
795795
if (force_visible) {
796-
showNotable(base);
797-
base.NOTABLE_FORCE_VISIBLE = true;
796+
showTooltip(base);
797+
base.TOOLTIP_FORCE_VISIBLE = true;
798798
}
799799
}
800800
});
@@ -822,27 +822,35 @@ function loadCss(cssUrl) {
822822
});
823823
});
824824

825-
function showNotable(e) {
826-
if (!window.NOTABLE_TRAITS) {
825+
function showTooltip(e) {
826+
const notable_ty = e.getAttribute("data-notable-ty");
827+
if (!window.NOTABLE_TRAITS && notable_ty) {
827828
const data = document.getElementById("notable-traits-data");
828829
if (data) {
829830
window.NOTABLE_TRAITS = JSON.parse(data.innerText);
830831
} else {
831-
throw new Error("showNotable() called on page without any notable traits!");
832+
throw new Error("showTooltip() called with notable without any notable traits!");
832833
}
833834
}
834-
if (window.CURRENT_NOTABLE_ELEMENT && window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE === e) {
835+
if (window.CURRENT_TOOLTIP_ELEMENT && window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE === e) {
835836
// Make this function idempotent.
836837
return;
837838
}
838839
window.hideAllModals(false);
839-
const ty = e.getAttribute("data-ty");
840840
const wrapper = document.createElement("div");
841-
wrapper.innerHTML = "<div class=\"content\">" + window.NOTABLE_TRAITS[ty] + "</div>";
842-
wrapper.className = "notable popover";
841+
if (notable_ty) {
842+
wrapper.innerHTML = "<div class=\"content\">" +
843+
window.NOTABLE_TRAITS[notable_ty] + "</div>";
844+
} else if (e.getAttribute("title") !== undefined) {
845+
const titleContent = document.createElement("div");
846+
titleContent.className = "content";
847+
titleContent.appendChild(document.createTextNode(e.getAttribute("title")));
848+
wrapper.appendChild(titleContent);
849+
}
850+
wrapper.className = "tooltip popover";
843851
const focusCatcher = document.createElement("div");
844852
focusCatcher.setAttribute("tabindex", "0");
845-
focusCatcher.onfocus = hideNotable;
853+
focusCatcher.onfocus = hideTooltip;
846854
wrapper.appendChild(focusCatcher);
847855
const pos = e.getBoundingClientRect();
848856
// 5px overlap so that the mouse can easily travel from place to place
@@ -864,62 +872,62 @@ function loadCss(cssUrl) {
864872
);
865873
}
866874
wrapper.style.visibility = "";
867-
window.CURRENT_NOTABLE_ELEMENT = wrapper;
868-
window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE = e;
875+
window.CURRENT_TOOLTIP_ELEMENT = wrapper;
876+
window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE = e;
869877
wrapper.onpointerleave = function(ev) {
870878
// If this is a synthetic touch event, ignore it. A click event will be along shortly.
871879
if (ev.pointerType !== "mouse") {
872880
return;
873881
}
874-
if (!e.NOTABLE_FORCE_VISIBLE && !elemIsInParent(event.relatedTarget, e)) {
875-
hideNotable(true);
882+
if (!e.TOOLTIP_FORCE_VISIBLE && !elemIsInParent(event.relatedTarget, e)) {
883+
hideTooltip(true);
876884
}
877885
};
878886
}
879887

880-
function notableBlurHandler(event) {
881-
if (window.CURRENT_NOTABLE_ELEMENT &&
882-
!elemIsInParent(document.activeElement, window.CURRENT_NOTABLE_ELEMENT) &&
883-
!elemIsInParent(event.relatedTarget, window.CURRENT_NOTABLE_ELEMENT) &&
884-
!elemIsInParent(document.activeElement, window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE) &&
885-
!elemIsInParent(event.relatedTarget, window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE)
888+
function tooltipBlurHandler(event) {
889+
if (window.CURRENT_TOOLTIP_ELEMENT &&
890+
!elemIsInParent(document.activeElement, window.CURRENT_TOOLTIP_ELEMENT) &&
891+
!elemIsInParent(event.relatedTarget, window.CURRENT_TOOLTIP_ELEMENT) &&
892+
!elemIsInParent(document.activeElement, window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE) &&
893+
!elemIsInParent(event.relatedTarget, window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE)
886894
) {
887895
// Work around a difference in the focus behaviour between Firefox, Chrome, and Safari.
888-
// When I click the button on an already-opened notable trait popover, Safari
896+
// When I click the button on an already-opened tooltip popover, Safari
889897
// hides the popover and then immediately shows it again, while everyone else hides it
890898
// and it stays hidden.
891899
//
892900
// To work around this, make sure the click finishes being dispatched before
893-
// hiding the popover. Since `hideNotable()` is idempotent, this makes Safari behave
901+
// hiding the popover. Since `hideTooltip()` is idempotent, this makes Safari behave
894902
// consistently with the other two.
895-
setTimeout(() => hideNotable(false), 0);
903+
setTimeout(() => hideTooltip(false), 0);
896904
}
897905
}
898906

899-
function hideNotable(focus) {
900-
if (window.CURRENT_NOTABLE_ELEMENT) {
901-
if (window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE) {
907+
function hideTooltip(focus) {
908+
if (window.CURRENT_TOOLTIP_ELEMENT) {
909+
if (window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE.TOOLTIP_FORCE_VISIBLE) {
902910
if (focus) {
903-
window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.focus();
911+
window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE.focus();
904912
}
905-
window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE = false;
913+
window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE.TOOLTIP_FORCE_VISIBLE = false;
906914
}
907915
const body = document.getElementsByTagName("body")[0];
908-
body.removeChild(window.CURRENT_NOTABLE_ELEMENT);
909-
window.CURRENT_NOTABLE_ELEMENT = null;
916+
body.removeChild(window.CURRENT_TOOLTIP_ELEMENT);
917+
window.CURRENT_TOOLTIP_ELEMENT = null;
910918
}
911919
}
912920

913-
onEachLazy(document.getElementsByClassName("notable-traits"), e => {
921+
onEachLazy(document.getElementsByClassName("tooltip"), e => {
914922
e.onclick = function() {
915-
this.NOTABLE_FORCE_VISIBLE = this.NOTABLE_FORCE_VISIBLE ? false : true;
916-
if (window.CURRENT_NOTABLE_ELEMENT && !this.NOTABLE_FORCE_VISIBLE) {
917-
hideNotable(true);
923+
this.TOOLTIP_FORCE_VISIBLE = this.TOOLTIP_FORCE_VISIBLE ? false : true;
924+
if (window.CURRENT_TOOLTIP_ELEMENT && !this.TOOLTIP_FORCE_VISIBLE) {
925+
hideTooltip(true);
918926
} else {
919-
showNotable(this);
920-
window.CURRENT_NOTABLE_ELEMENT.setAttribute("tabindex", "0");
921-
window.CURRENT_NOTABLE_ELEMENT.focus();
922-
window.CURRENT_NOTABLE_ELEMENT.onblur = notableBlurHandler;
927+
showTooltip(this);
928+
window.CURRENT_TOOLTIP_ELEMENT.setAttribute("tabindex", "0");
929+
window.CURRENT_TOOLTIP_ELEMENT.focus();
930+
window.CURRENT_TOOLTIP_ELEMENT.onblur = tooltipBlurHandler;
923931
}
924932
return false;
925933
};
@@ -928,16 +936,16 @@ function loadCss(cssUrl) {
928936
if (ev.pointerType !== "mouse") {
929937
return;
930938
}
931-
showNotable(this);
939+
showTooltip(this);
932940
};
933941
e.onpointerleave = function(ev) {
934942
// If this is a synthetic touch event, ignore it. A click event will be along shortly.
935943
if (ev.pointerType !== "mouse") {
936944
return;
937945
}
938-
if (!this.NOTABLE_FORCE_VISIBLE &&
939-
!elemIsInParent(ev.relatedTarget, window.CURRENT_NOTABLE_ELEMENT)) {
940-
hideNotable(true);
946+
if (!this.TOOLTIP_FORCE_VISIBLE &&
947+
!elemIsInParent(ev.relatedTarget, window.CURRENT_TOOLTIP_ELEMENT)) {
948+
hideTooltip(true);
941949
}
942950
};
943951
});
@@ -1039,14 +1047,14 @@ function loadCss(cssUrl) {
10391047
}
10401048

10411049
/**
1042-
* Hide popover menus, notable trait tooltips, and the sidebar (if applicable).
1050+
* Hide popover menus, clickable tooltips, and the sidebar (if applicable).
10431051
*
1044-
* Pass "true" to reset focus for notable traits.
1052+
* Pass "true" to reset focus for tooltip popovers.
10451053
*/
10461054
window.hideAllModals = function(switchFocus) {
10471055
hideSidebar();
10481056
window.hidePopoverMenus();
1049-
hideNotable(switchFocus);
1057+
hideTooltip(switchFocus);
10501058
};
10511059

10521060
/**

0 commit comments

Comments
 (0)