Skip to content

Commit

Permalink
Rollup merge of rust-lang#104177 - notriddle:notriddle/js-notable-tra…
Browse files Browse the repository at this point in the history 
…it-v2, r=GuillaumeGomez

rustdoc: use consistent "popover" styling for notable traits

Follow-up to rust-lang#104129
Fixes rust-lang#104313.

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

## Before

![image](https://user-images.githubusercontent.com/1593513/200710372-d2d992ce-0bdc-4437-9a2e-379a29df09cf.png)

![image](https://user-images.githubusercontent.com/1593513/200711266-e372b176-daa9-45f3-a022-738ef0a77d3c.png)

## After

![image](https://user-images.githubusercontent.com/1593513/200710601-09b3b717-116f-43c6-b14f-34a8b02b33c0.png)

![image](https://user-images.githubusercontent.com/1593513/200711288-3978cdc1-a6c2-47f6-9216-e22e3c1f5bdf.png)
  • Loading branch information
@Manishearth
Manishearth authored Nov 12, 2022
2 parents 422299b + 79b6112 commit 36d2291
Show file tree
Hide file tree
Showing 14 changed files with 134 additions and 130 deletions.
6 changes: 2 additions & 4 deletions src/librustdoc/html/render/mod.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1312,9 +1312,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!(
"<span class=\"notable-traits\" data-ty=\"{ty}\">\
<span class=\"notable-traits-tooltip\">ⓘ</span>\
</span>",
" <a href=\"#\" class=\"notable-traits\" data-ty=\"{ty}\">ⓘ</a>",
ty = Escape(&format!("{:#}", ty.print(cx))),
))
} else {
Expand Down Expand Up @@ -1343,7 +1341,7 @@ fn notable_traits_decl(ty: &clean::Type, cx: &Context<'_>) -> (String, String) {
if out.is_empty() {
write!(
&mut out,
"<h3 class=\"notable\">Notable traits for <code>{}</code></h3>\
"<h3>Notable traits for <code>{}</code></h3>\
<pre class=\"content\"><code>",
impl_.for_.print(cx)
);
Expand Down
71 changes: 19 additions & 52 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -929,13 +929,14 @@ so that we can apply CSS-filters to change the arrow color in themes */
border-radius: 3px;
border: 1px solid var(--border-color);
font-size: 1rem;
--popover-arrow-offset: 11px;
}

/* This rule is to draw the little arrow connecting the settings menu to the gear icon. */
.popover::before {
content: '';
position: absolute;
right: 11px;
right: var(--popover-arrow-offset);
border: solid var(--border-color);
border-width: 1px 1px 0 0;
display: inline-block;
Expand All @@ -952,10 +953,7 @@ so that we can apply CSS-filters to change the arrow color in themes */
/* use larger max-width for help popover, but not for help.html */
#help.popover {
max-width: 600px;
}

#help.popover::before {
right: 48px;
--popover-arrow-offset: 48px;
}

#help dt {
Expand Down Expand Up @@ -1274,54 +1272,34 @@ h3.variant {
border-right: 3px solid var(--target-border-color);
}

.notable-traits-tooltip {
display: inline-block;
cursor: pointer;
}

.notable-traits .notable-traits-tooltiptext {
display: inline-block;
visibility: hidden;
.notable-traits {
color: inherit;
margin-right: 15px;
position: relative;
}

.notable-traits-tooltiptext {
padding: 5px 3px 3px 3px;
border-radius: 6px;
margin-left: 5px;
z-index: 10;
font-size: 1rem;
cursor: default;
/* 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 {
position: absolute;
border: 1px solid;
}

.notable-traits-tooltip::after {
/* The margin on the tooltip does not capture hover events,
this extends the area of hover enough so that mouse hover is not
lost when moving the mouse to the tooltip */
content: "\00a0\00a0\00a0";
}

.notable-traits-tooltiptext .docblock {
margin: 0;
top: calc(100% - 10px);
left: -15px;
right: -15px;
height: 20px;
content: "\00a0";
}

.notable-traits-tooltiptext .notable {
font-size: 1.1875rem;
font-weight: 600;
display: block;
.notable .docblock {
margin: 0.25em 0.5em;
}

.notable-traits-tooltiptext pre, .notable-traits-tooltiptext code {
.notable .docblock pre, .notable .docblock code {
background: transparent;
}

.notable-traits-tooltiptext .docblock pre.content {
margin: 0;
padding: 0;
font-size: 1.25rem;
white-space: pre-wrap;
overflow: hidden;
}

.search-failed {
Expand Down Expand Up @@ -1364,12 +1342,6 @@ h3.variant {
font-size: 1rem;
}

.notable-traits {
cursor: pointer;
z-index: 2;
margin-left: 5px;
}

#sidebar-toggle {
position: sticky;
top: 0;
Expand Down Expand Up @@ -1854,11 +1826,6 @@ in storage.js
border-bottom: 1px solid;
}

.notable-traits .notable-traits-tooltiptext {
left: 0;
top: 100%;
}

/* We don't display the help button on mobile devices. */
#help-button {
display: none;
Expand Down
4 changes: 0 additions & 4 deletions src/librustdoc/html/static/css/themes/ayu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,10 +169,6 @@ details.rustdoc-toggle > summary::before {
border-color: transparent #314559 transparent transparent;
}

.notable-traits-tooltiptext {
background-color: #314559;
}

#titles > button.selected {
background-color: #141920 !important;
border-bottom: 1px solid #ffb44c !important;
Expand Down
4 changes: 0 additions & 4 deletions src/librustdoc/html/static/css/themes/dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,10 +92,6 @@ details.rustdoc-toggle > summary::before {
border-color: transparent black transparent transparent;
}

.notable-traits-tooltiptext {
background-color: #111;
}

#titles > button:not(.selected) {
background-color: #252525;
border-top-color: #252525;
Expand Down
4 changes: 0 additions & 4 deletions src/librustdoc/html/static/css/themes/light.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,6 @@ body.source .example-wrap pre.rust a {
border-color: transparent black transparent transparent;
}

.notable-traits-tooltiptext {
background-color: #eee;
}

#titles > button:not(.selected) {
background-color: #e6e6e6;
border-top-color: #e6e6e6;
Expand Down
60 changes: 51 additions & 9 deletions src/librustdoc/html/static/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -850,18 +850,33 @@ function loadCss(cssUrl) {
}
hideNotable();
const ty = e.getAttribute("data-ty");
const tooltip = e.getElementsByClassName("notable-traits-tooltip")[0];
const wrapper = document.createElement("div");
wrapper.innerHTML = "<div class=\"docblock\">" + window.NOTABLE_TRAITS[ty] + "</div>";
wrapper.className = "notable-traits-tooltiptext";
tooltip.appendChild(wrapper);
const pos = wrapper.getBoundingClientRect();
tooltip.removeChild(wrapper);
wrapper.style.top = (pos.top + window.scrollY) + "px";
wrapper.style.left = (pos.left + window.scrollX) + "px";
wrapper.style.width = pos.width + "px";
wrapper.className = "notable popover";
const focusCatcher = document.createElement("div");
focusCatcher.setAttribute("tabindex", "0");
focusCatcher.onfocus = hideNotable;
wrapper.appendChild(focusCatcher);
const pos = e.getBoundingClientRect();
// 5px overlap so that the mouse can easily travel from place to place
wrapper.style.top = (pos.top + window.scrollY + pos.height) + "px";
wrapper.style.left = 0;
wrapper.style.right = "auto";
wrapper.style.visibility = "hidden";
const body = document.getElementsByTagName("body")[0];
body.appendChild(wrapper);
const wrapperPos = wrapper.getBoundingClientRect();
// offset so that the arrow points at the center of the "(i)"
const finalPos = pos.left + window.scrollX - wrapperPos.width + 24;
if (finalPos > 0) {
wrapper.style.left = finalPos + "px";
} else {
wrapper.style.setProperty(
"--popover-arrow-offset",
(wrapperPos.right - pos.right + 4) + "px"
);
}
wrapper.style.visibility = "";
window.CURRENT_NOTABLE_ELEMENT = wrapper;
window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE = e;
wrapper.onpointerleave = function(ev) {
Expand All @@ -875,9 +890,31 @@ function loadCss(cssUrl) {
};
}

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)
) {
// 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
// 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
// consistently with the other two.
setTimeout(hideNotable, 0);
}
}

function hideNotable() {
if (window.CURRENT_NOTABLE_ELEMENT) {
window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE = false;
if (window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE) {
window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.focus();
window.CURRENT_NOTABLE_ELEMENT.NOTABLE_BASE.NOTABLE_FORCE_VISIBLE = false;
}
const body = document.getElementsByTagName("body")[0];
body.removeChild(window.CURRENT_NOTABLE_ELEMENT);
window.CURRENT_NOTABLE_ELEMENT = null;
Expand All @@ -891,7 +928,11 @@ function loadCss(cssUrl) {
hideNotable();
} else {
showNotable(this);
window.CURRENT_NOTABLE_ELEMENT.setAttribute("tabindex", "0");
window.CURRENT_NOTABLE_ELEMENT.focus();
window.CURRENT_NOTABLE_ELEMENT.onblur = notableBlurHandler;
}
return false;
};
e.onpointerenter = function(ev) {
// If this is a synthetic touch event, ignore it. A click event will be along shortly.
Expand Down Expand Up @@ -1018,6 +1059,7 @@ function loadCss(cssUrl) {
onEachLazy(document.querySelectorAll(".search-form .popover"), elem => {
elem.style.display = "none";
});
hideNotable();
};

/**
Expand Down
Loading

0 comments on commit 36d2291

Please sign in to comment.