Skip to content

Commit

Permalink
Rollup merge of #107340 - notriddle:notriddle/simplify-doctest-toolti…
Browse files Browse the repository at this point in the history 
…p, 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)
  • Loading branch information
@matthiaskrgr
matthiaskrgr authored Feb 13, 2023
2 parents 2008188 + 7aa4a20 commit 3054759
Show file tree
Hide file tree
Showing 12 changed files with 186 additions and 236 deletions.
16 changes: 11 additions & 5 deletions src/librustdoc/html/highlight.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,13 +96,19 @@ fn write_header(out: &mut Buffer, class: &str, extra_content: Option<Buffer>, to
);

if tooltip != Tooltip::None {
let edition_code;
write!(
out,
"<div class='tooltip'{}>ⓘ</div>",
if let Tooltip::Edition(edition_info) = tooltip {
format!(" data-edition=\"{}\"", edition_info)
} else {
String::new()
"<a href=\"#\" class=\"tooltip\" title=\"{}\">ⓘ</a>",
match tooltip {
Tooltip::Ignore => "This example is not tested",
Tooltip::CompileFail => "This example deliberately fails to compile",
Tooltip::ShouldPanic => "This example panics",
Tooltip::Edition(edition) => {
edition_code = format!("This example runs with edition {edition}");
&edition_code
}
Tooltip::None => unreachable!(),
},
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/librustdoc/html/render/mod.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1310,7 +1310,7 @@ pub(crate) fn notable_traits_button(ty: &clean::Type, cx: &mut Context<'_>) -> O
if has_notable_trait {
cx.types_with_notable_traits.insert(ty.clone());
Some(format!(
" <a href=\"#\" class=\"notable-traits\" data-ty=\"{ty}\">ⓘ</a>",
" <a href=\"#\" class=\"tooltip\" data-notable-ty=\"{ty}\">ⓘ</a>",
ty = Escape(&format!("{:#}", ty.print(cx))),
))
} else {
Expand Down
54 changes: 9 additions & 45 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -715,8 +715,8 @@ h2.small-section-header > .anchor {
.main-heading a:hover,
.example-wrap > pre.rust a:hover,
.all-items a:hover,
.docblock a:not(.test-arrow):not(.scrape-help):hover,
.docblock-short a:not(.test-arrow):not(.scrape-help):hover,
.docblock a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover,
.docblock-short a:not(.test-arrow):not(.scrape-help):not(.tooltip):hover,
.item-info a {
text-decoration: underline;
}
Expand Down Expand Up @@ -1109,44 +1109,8 @@ pre.rust .doccomment {
display: block;
left: -25px;
top: 5px;
}

.example-wrap .tooltip:hover::after {
padding: 5px 3px 3px 3px;
border-radius: 6px;
margin-left: 5px;
font-size: 1rem;
border: 1px solid var(--border-color);
position: absolute;
width: max-content;
top: -2px;
z-index: 1;
background-color: var(--tooltip-background-color);
color: var(--tooltip-color);
}

.example-wrap .tooltip:hover::before {
content: " ";
position: absolute;
top: 50%;
left: 16px;
margin-top: -5px;
z-index: 1;
border: 5px solid transparent;
border-right-color: var(--tooltip-background-color);
}

.example-wrap.ignore .tooltip:hover::after {
content: "This example is not tested";
}
.example-wrap.compile_fail .tooltip:hover::after {
content: "This example deliberately fails to compile";
}
.example-wrap.should_panic .tooltip:hover::after {
content: "This example panics";
}
.example-wrap.edition .tooltip:hover::after {
content: "This code runs with edition " attr(data-edition);
margin: 0;
line-height: 1;
}

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

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

.notable .content {
.popover.tooltip .content {
margin: 0.25em 0.5em;
}

.notable .content pre, .notable .content code {
.popover.tooltip .content pre, .popover.tooltip .content code {
background: transparent;
margin: 0;
padding: 0;
font-size: 1.25rem;
white-space: pre-wrap;
}

.notable .content > h3:first-child {
.popover.tooltip .content > h3:first-child {
margin: 0 0 5px 0;
}

Expand Down
2 changes: 0 additions & 2 deletions src/librustdoc/html/static/css/themes/ayu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,6 @@ Original by Dempfi (https://github.com/dempfi/ayu)
--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);
--tooltip-background-color: #314559;
--tooltip-color: #c5c5c5;
--kbd-color: #c5c5c5;
--kbd-background: #314559;
--kbd-box-shadow-color: #5c6773;
Expand Down
2 changes: 0 additions & 2 deletions src/librustdoc/html/static/css/themes/dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,6 @@
--test-arrow-hover-background-color: #4e8bca;
--target-background-color: #494a3d;
--target-border-color: #bb7410;
--tooltip-background-color: #000;
--tooltip-color: #fff;
--kbd-color: #000;
--kbd-background: #fafbfc;
--kbd-box-shadow-color: #c6cbd1;
Expand Down
2 changes: 0 additions & 2 deletions src/librustdoc/html/static/css/themes/light.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,6 @@
--test-arrow-hover-background-color: #4e8bca;
--target-background-color: #fdffd3;
--target-border-color: #ad7c37;
--tooltip-background-color: #000;
--tooltip-color: #fff;
--kbd-color: #000;
--kbd-background: #fafbfc;
--kbd-box-shadow-color: #c6cbd1;
Expand Down
112 changes: 60 additions & 52 deletions src/librustdoc/html/static/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -378,7 +378,7 @@ function loadCss(cssUrl) {
}
ev.preventDefault();
searchState.defocus();
window.hideAllModals(true); // true = reset focus for notable traits
window.hideAllModals(true); // true = reset focus for tooltips
}

function handleShortcut(ev) {
Expand Down Expand Up @@ -784,17 +784,17 @@ function loadCss(cssUrl) {
// we need to switch away from mobile mode and make the main content area scrollable.
hideSidebar();
}
if (window.CURRENT_NOTABLE_ELEMENT) {
// As a workaround to the behavior of `contains: layout` used in doc togglers, the
// notable traits popup is positioned using javascript.
if (window.CURRENT_TOOLTIP_ELEMENT) {
// As a workaround to the behavior of `contains: layout` used in doc togglers,
// tooltip popovers are positioned using javascript.
//
// This means when the window is resized, we need to redo the layout.
const base = window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE;
const force_visible = base.NOTABLE_FORCE_VISIBLE;
hideNotable(false);
const base = window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE;
const force_visible = base.TOOLTIP_FORCE_VISIBLE;
hideTooltip(false);
if (force_visible) {
showNotable(base);
base.NOTABLE_FORCE_VISIBLE = true;
showTooltip(base);
base.TOOLTIP_FORCE_VISIBLE = true;
}
}
});
Expand Down Expand Up @@ -822,27 +822,35 @@ function loadCss(cssUrl) {
});
});

function showNotable(e) {
if (!window.NOTABLE_TRAITS) {
function showTooltip(e) {
const notable_ty = e.getAttribute("data-notable-ty");
if (!window.NOTABLE_TRAITS && notable_ty) {
const data = document.getElementById("notable-traits-data");
if (data) {
window.NOTABLE_TRAITS = JSON.parse(data.innerText);
} else {
throw new Error("showNotable() called on page without any notable traits!");
throw new Error("showTooltip() called with notable without any notable traits!");
}
}
if (window.CURRENT_NOTABLE_ELEMENT && window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE === e) {
if (window.CURRENT_TOOLTIP_ELEMENT && window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE === e) {
// Make this function idempotent.
return;
}
window.hideAllModals(false);
const ty = e.getAttribute("data-ty");
const wrapper = document.createElement("div");
wrapper.innerHTML = "<div class=\"content\">" + window.NOTABLE_TRAITS[ty] + "</div>";
wrapper.className = "notable popover";
if (notable_ty) {
wrapper.innerHTML = "<div class=\"content\">" +
window.NOTABLE_TRAITS[notable_ty] + "</div>";
} else if (e.getAttribute("title") !== undefined) {
const titleContent = document.createElement("div");
titleContent.className = "content";
titleContent.appendChild(document.createTextNode(e.getAttribute("title")));
wrapper.appendChild(titleContent);
}
wrapper.className = "tooltip popover";
const focusCatcher = document.createElement("div");
focusCatcher.setAttribute("tabindex", "0");
focusCatcher.onfocus = hideNotable;
focusCatcher.onfocus = hideTooltip;
wrapper.appendChild(focusCatcher);
const pos = e.getBoundingClientRect();
// 5px overlap so that the mouse can easily travel from place to place
Expand All @@ -864,62 +872,62 @@ function loadCss(cssUrl) {
);
}
wrapper.style.visibility = "";
window.CURRENT_NOTABLE_ELEMENT = wrapper;
window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE = e;
window.CURRENT_TOOLTIP_ELEMENT = wrapper;
window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE = e;
wrapper.onpointerleave = function(ev) {
// If this is a synthetic touch event, ignore it. A click event will be along shortly.
if (ev.pointerType !== "mouse") {
return;
}
if (!e.NOTABLE_FORCE_VISIBLE && !elemIsInParent(event.relatedTarget, e)) {
hideNotable(true);
if (!e.TOOLTIP_FORCE_VISIBLE && !elemIsInParent(event.relatedTarget, e)) {
hideTooltip(true);
}
};
}

function notableBlurHandler(event) {
if (window.CURRENT_NOTABLE_ELEMENT &&
!elemIsInParent(document.activeElement, window.CURRENT_NOTABLE_ELEMENT) &&
!elemIsInParent(event.relatedTarget, window.CURRENT_NOTABLE_ELEMENT) &&
!elemIsInParent(document.activeElement, window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE) &&
!elemIsInParent(event.relatedTarget, window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE)
function tooltipBlurHandler(event) {
if (window.CURRENT_TOOLTIP_ELEMENT &&
!elemIsInParent(document.activeElement, window.CURRENT_TOOLTIP_ELEMENT) &&
!elemIsInParent(event.relatedTarget, window.CURRENT_TOOLTIP_ELEMENT) &&
!elemIsInParent(document.activeElement, window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE) &&
!elemIsInParent(event.relatedTarget, window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE)
) {
// Work around a difference in the focus behaviour between Firefox, Chrome, and Safari.
// When I click the button on an already-opened notable trait popover, Safari
// When I click the button on an already-opened tooltip popover, Safari
// hides the popover and then immediately shows it again, while everyone else hides it
// and it stays hidden.
//
// To work around this, make sure the click finishes being dispatched before
// hiding the popover. Since `hideNotable()` is idempotent, this makes Safari behave
// hiding the popover. Since `hideTooltip()` is idempotent, this makes Safari behave
// consistently with the other two.
setTimeout(() => hideNotable(false), 0);
setTimeout(() => hideTooltip(false), 0);
}
}

function hideNotable(focus) {
if (window.CURRENT_NOTABLE_ELEMENT) {
if (window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE) {
function hideTooltip(focus) {
if (window.CURRENT_TOOLTIP_ELEMENT) {
if (window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE.TOOLTIP_FORCE_VISIBLE) {
if (focus) {
window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.focus();
window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE.focus();
}
window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE = false;
window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE.TOOLTIP_FORCE_VISIBLE = false;
}
const body = document.getElementsByTagName("body")[0];
body.removeChild(window.CURRENT_NOTABLE_ELEMENT);
window.CURRENT_NOTABLE_ELEMENT = null;
body.removeChild(window.CURRENT_TOOLTIP_ELEMENT);
window.CURRENT_TOOLTIP_ELEMENT = null;
}
}

onEachLazy(document.getElementsByClassName("notable-traits"), e => {
onEachLazy(document.getElementsByClassName("tooltip"), e => {
e.onclick = function() {
this.NOTABLE_FORCE_VISIBLE = this.NOTABLE_FORCE_VISIBLE ? false : true;
if (window.CURRENT_NOTABLE_ELEMENT && !this.NOTABLE_FORCE_VISIBLE) {
hideNotable(true);
this.TOOLTIP_FORCE_VISIBLE = this.TOOLTIP_FORCE_VISIBLE ? false : true;
if (window.CURRENT_TOOLTIP_ELEMENT && !this.TOOLTIP_FORCE_VISIBLE) {
hideTooltip(true);
} else {
showNotable(this);
window.CURRENT_NOTABLE_ELEMENT.setAttribute("tabindex", "0");
window.CURRENT_NOTABLE_ELEMENT.focus();
window.CURRENT_NOTABLE_ELEMENT.onblur = notableBlurHandler;
showTooltip(this);
window.CURRENT_TOOLTIP_ELEMENT.setAttribute("tabindex", "0");
window.CURRENT_TOOLTIP_ELEMENT.focus();
window.CURRENT_TOOLTIP_ELEMENT.onblur = tooltipBlurHandler;
}
return false;
};
Expand All @@ -928,16 +936,16 @@ function loadCss(cssUrl) {
if (ev.pointerType !== "mouse") {
return;
}
showNotable(this);
showTooltip(this);
};
e.onpointerleave = function(ev) {
// If this is a synthetic touch event, ignore it. A click event will be along shortly.
if (ev.pointerType !== "mouse") {
return;
}
if (!this.NOTABLE_FORCE_VISIBLE &&
!elemIsInParent(ev.relatedTarget, window.CURRENT_NOTABLE_ELEMENT)) {
hideNotable(true);
if (!this.TOOLTIP_FORCE_VISIBLE &&
!elemIsInParent(ev.relatedTarget, window.CURRENT_TOOLTIP_ELEMENT)) {
hideTooltip(true);
}
};
});
Expand Down Expand Up @@ -1039,14 +1047,14 @@ function loadCss(cssUrl) {
}

/**
* Hide popover menus, notable trait tooltips, and the sidebar (if applicable).
* Hide popover menus, clickable tooltips, and the sidebar (if applicable).
*
* Pass "true" to reset focus for notable traits.
* Pass "true" to reset focus for tooltip popovers.
*/
window.hideAllModals = function(switchFocus) {
hideSidebar();
window.hidePopoverMenus();
hideNotable(switchFocus);
hideTooltip(switchFocus);
};

/**
Expand Down
Loading

0 comments on commit 3054759

Please sign in to comment.