Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

rustdoc: merge doctest tooltip with notable traits tooltip #107340

Merged
merged 1 commit into from
Feb 13, 2023
Merged

rustdoc: merge doctest tooltip with notable traits tooltip #107340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 11 additions & 5 deletions src/librustdoc/html/highlight.rs
View file
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1313,7 +1313,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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -697,8 +697,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 @@ -1093,44 +1093,8 @@ pre.rust .doccomment {
display: block;
left: -25px;
top: 5px;
}

.example-wrap .tooltip:hover::after {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems like a regression to me to have it positioned using JS now.

Copy link
Contributor Author

@notriddle notriddle Jan 27, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It still works without JavaScript.

If JS is disabled, the title attribute causes your browser’s built-in tooltip to appear. It’s only actually needed for click handling, which the old setup couldn’t do at all.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without JS it gives:

image

Which seems completely fine to me?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also: do we want to keep the text around? It makes sense for notable tooltips but what about these tooltips?

Copy link
Contributor Author

@notriddle notriddle Jan 27, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah,

The only reason the JS needs to exist at all is because Mobile Safari provides no way to see the title tooltip, and Mobile Chrome didn’t used to even provide a way to see the CSS tooltip (it was completely inaccessible on there, AFAIK).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I see. I forgot about mobile once again... Then can you add GUI test to confirm that the click maintain the tooltip display and then hide the tooltip please?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, never mind about Mobile Chrome. Now that I test it again, it actually does allow getting at the :hover tooltip. It doesn't provide any reasonable way to see the title= attribute, though.

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 @@ -1196,7 +1160,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 @@ -1205,7 +1169,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 @@ -1214,19 +1178,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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,7 +379,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 @@ -789,17 +789,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 @@ -827,27 +827,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 @@ -869,62 +877,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 @@ -933,16 +941,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 @@ -1044,14 +1052,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