Skip to content

Commit

Permalink
Fix tooltip link nesting glitches
Browse files Browse the repository at this point in the history
  • Loading branch information
@notriddle
notriddle committed May 16, 2024
1 parent 4346be5 commit 681f0c2
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 29 deletions.
18 changes: 11 additions & 7 deletions src/librustdoc/html/static/css/rustdoc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1006,30 +1006,34 @@ so that we can apply CSS-filters to change the arrow color in themes */

.search-results {
display: none;
margin: 0;
padding: 0;
}

.search-results.active {
display: block;
}

.search-results > a {
.search-results > li {
display: flex;
cursor: pointer;
/* A little margin ensures the browser's outlining of focused links has room to display. */
margin-left: 2px;
margin-right: 2px;
margin: 0 2px;
border-bottom: 1px solid var(--search-result-border-color);
gap: 1em;
}

.search-results > a > div.desc {
.search-results > li > div.desc {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
flex: 2;
}

.search-results a:hover,
.search-results a:focus {
.search-results li > a:focus,
.search-results li > a:hover,
.search-results li:hover > a,
.search-results li:focus > a {
background-color: var(--search-result-link-focus-background-color);
}

Expand Down Expand Up @@ -2033,7 +2037,7 @@ in src-script.js and main.js

/* Display an alternating layout on tablets and phones */
.item-table, .item-row, .item-table > li, .item-table > li > div,
.search-results > a, .search-results > a > div {
.search-results > li, .search-results > li > div {
display: block;
}

Expand Down
22 changes: 17 additions & 5 deletions src/librustdoc/html/static/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1265,7 +1265,9 @@ function preLoadCss(cssUrl) {
}

window.rustdocConfigureTooltip = e => {
e.onclick = () => {
e.addEventListener("click", ev => {
ev.preventDefault();
ev.stopPropagation();
e.TOOLTIP_FORCE_VISIBLE = e.TOOLTIP_FORCE_VISIBLE ? false : true;
if (window.CURRENT_TOOLTIP_ELEMENT && !e.TOOLTIP_FORCE_VISIBLE) {
hideTooltip(true);
Expand All @@ -1276,12 +1278,16 @@ function preLoadCss(cssUrl) {
window.CURRENT_TOOLTIP_ELEMENT.onblur = tooltipBlurHandler;
}
return false;
};
});
e.onpointerenter = ev => {
// If this is a synthetic touch event, ignore it. A click event will be along shortly.
if (ev.pointerType !== "mouse") {
return;
}
if (window.CURRENT_TOOLTIP_ELEMENT &&
window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE.TOOLTIP_FORCE_VISIBLE) {
return;
}
setTooltipHoverTimeout(e, true);
};
e.onpointermove = ev => {
Expand All @@ -1296,8 +1302,11 @@ function preLoadCss(cssUrl) {
if (ev.pointerType !== "mouse") {
return;
}
if (!e.TOOLTIP_FORCE_VISIBLE && window.CURRENT_TOOLTIP_ELEMENT &&
!window.CURRENT_TOOLTIP_ELEMENT.contains(ev.relatedTarget)) {
if (window.CURRENT_TOOLTIP_ELEMENT &&
window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE !== e) {
return;
}
if (!e.TOOLTIP_FORCE_VISIBLE) {
// Tooltip pointer leave gesture:
//
// Designing a good hover microinteraction is a matter of guessing user
Expand Down Expand Up @@ -1329,7 +1338,10 @@ function preLoadCss(cssUrl) {
// * https://www.nngroup.com/articles/tooltip-guidelines/
// * https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
setTooltipHoverTimeout(e, false);
addClass(window.CURRENT_TOOLTIP_ELEMENT, "fade-out");
if (window.CURRENT_TOOLTIP_ELEMENT &&
!window.CURRENT_TOOLTIP_ELEMENT.contains(ev.relatedTarget)) {
addClass(window.CURRENT_TOOLTIP_ELEMENT, "fade-out");
}
}
};
};
Expand Down
41 changes: 24 additions & 17 deletions src/librustdoc/html/static/js/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3009,27 +3009,27 @@ function initSearch(rawSearchIndex) {
async function addTab(array, query, display) {
const extraClass = display ? " active" : "";

const output = document.createElement("div");
let output = document.createElement("ul");
if (array.length > 0) {
output.className = "search-results " + extraClass;

const links = Promise.all(array.map(async item => {
const lis = Promise.all(array.map(async item => {
const name = item.name;
const type = itemTypes[item.ty];
const longType = longItemTypes[item.ty];
const typeName = longType.length !== 0 ? `${longType}` : "?";

const link = document.createElement("a");
link.className = "result-" + type;
link.href = item.href;
const li = document.createElement("li");
li.className = "result-" + type;

const resultName = document.createElement("div");
const resultName = document.createElement("a");
resultName.className = "result-name";
resultName.href = item.href;

resultName.insertAdjacentHTML(
"beforeend",
`<span class="typename">${typeName}</span>`);
link.appendChild(resultName);
li.appendChild(resultName);

let alias = " ";
if (item.is_alias) {
Expand All @@ -3050,8 +3050,8 @@ ${item.displayPath}<span class="${type}">${name}</span>\
const displayType = document.createElement("div");
if (mappedNames.size > 0 || whereClause.size > 0) {
const tooltip = document.createElement("a");
tooltip.tabIndex = -1;
tooltip.id = `tooltip-${item.id}`;
tooltip.href = `#${tooltip.id}`;
const tooltipCode = document.createElement("code");
for (const [name, qname] of mappedNames) {
const line = document.createElement("div");
Expand Down Expand Up @@ -3106,15 +3106,22 @@ ${item.displayPath}<span class="${type}">${name}</span>\
}
description.insertAdjacentHTML("beforeend", item.desc);

link.appendChild(description);
return link;
li.appendChild(description);
li.tabIndex = -1;
li.onclick = () => {
// allow clicking anywhere on the list item to go to the page
// even though the link itself is only the name
resultName.click();
};
return li;
}));
links.then(links => {
for (const link of links) {
output.appendChild(link);
lis.then(lis => {
for (const li of lis) {
output.appendChild(li);
}
});
} else if (query.error === null) {
output = document.createElement("div");
output.className = "search-failed" + extraClass;
output.innerHTML = "No results :(<br/>" +
"Try on <a href=\"https://duckduckgo.com/?q=" +
Expand Down Expand Up @@ -4176,17 +4183,17 @@ ${item.displayPath}<span class="${type}">${name}</span>\
// up and down arrow select next/previous search result, or the
// search box if we're already at the top.
if (e.which === 38) { // up
const previous = document.activeElement.previousElementSibling;
const previous = document.activeElement.parentNode.previousElementSibling;
if (previous) {
previous.focus();
previous.querySelectorAll("a").item(0).focus();
} else {
searchState.focus();
}
e.preventDefault();
} else if (e.which === 40) { // down
const next = document.activeElement.nextElementSibling;
const next = document.activeElement.parentNode.nextElementSibling;
if (next) {
next.focus();
next.querySelectorAll("a").item(0).focus();
}
const rect = document.activeElement.getBoundingClientRect();
if (window.innerHeight - rect.bottom < rect.height) {
Expand Down

0 comments on commit 681f0c2

Please sign in to comment.