Skip to content

Commit 94ef806

Browse files
notriddlenotriddle
committed
Fix tooltip link nesting glitches
1 parent 0bdfdb1 commit 94ef806

File tree

3 files changed

+52
-29
lines changed

3 files changed

+52
-29
lines changed

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1083,30 +1083,34 @@ so that we can apply CSS-filters to change the arrow color in themes */
10831083

10841084
.search-results {
10851085
display: none;
1086+
margin: 0;
1087+
padding: 0;
10861088
}
10871089

10881090
.search-results.active {
10891091
display: block;
10901092
}
10911093

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

1101-
.search-results > a > div.desc {
1103+
.search-results > li > div.desc {
11021104
white-space: nowrap;
11031105
text-overflow: ellipsis;
11041106
overflow: hidden;
11051107
flex: 2;
11061108
}
11071109

1108-
.search-results a:hover,
1109-
.search-results a:focus {
1110+
.search-results li > a:focus,
1111+
.search-results li > a:hover,
1112+
.search-results li:hover > a,
1113+
.search-results li:focus > a {
11101114
background-color: var(--search-result-link-focus-background-color);
11111115
}
11121116

@@ -2167,7 +2171,7 @@ in src-script.js and main.js
21672171

21682172
/* Display an alternating layout on tablets and phones */
21692173
.item-table, .item-row, .item-table > li, .item-table > li > div,
2170-
.search-results > a, .search-results > a > div {
2174+
.search-results > li, .search-results > li > div {
21712175
display: block;
21722176
}
21732177

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

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1270,7 +1270,9 @@ function preLoadCss(cssUrl) {
12701270
}
12711271

12721272
window.rustdocConfigureTooltip = e => {
1273-
e.onclick = () => {
1273+
e.addEventListener("click", ev => {
1274+
ev.preventDefault();
1275+
ev.stopPropagation();
12741276
e.TOOLTIP_FORCE_VISIBLE = e.TOOLTIP_FORCE_VISIBLE ? false : true;
12751277
if (window.CURRENT_TOOLTIP_ELEMENT && !e.TOOLTIP_FORCE_VISIBLE) {
12761278
hideTooltip(true);
@@ -1281,12 +1283,16 @@ function preLoadCss(cssUrl) {
12811283
window.CURRENT_TOOLTIP_ELEMENT.onblur = tooltipBlurHandler;
12821284
}
12831285
return false;
1284-
};
1286+
});
12851287
e.onpointerenter = ev => {
12861288
// If this is a synthetic touch event, ignore it. A click event will be along shortly.
12871289
if (ev.pointerType !== "mouse") {
12881290
return;
12891291
}
1292+
if (window.CURRENT_TOOLTIP_ELEMENT &&
1293+
window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE.TOOLTIP_FORCE_VISIBLE) {
1294+
return;
1295+
}
12901296
setTooltipHoverTimeout(e, true);
12911297
};
12921298
e.onpointermove = ev => {
@@ -1301,8 +1307,11 @@ function preLoadCss(cssUrl) {
13011307
if (ev.pointerType !== "mouse") {
13021308
return;
13031309
}
1304-
if (!e.TOOLTIP_FORCE_VISIBLE && window.CURRENT_TOOLTIP_ELEMENT &&
1305-
!window.CURRENT_TOOLTIP_ELEMENT.contains(ev.relatedTarget)) {
1310+
if (window.CURRENT_TOOLTIP_ELEMENT &&
1311+
window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE !== e) {
1312+
return;
1313+
}
1314+
if (!e.TOOLTIP_FORCE_VISIBLE) {
13061315
// Tooltip pointer leave gesture:
13071316
//
13081317
// Designing a good hover microinteraction is a matter of guessing user
@@ -1334,7 +1343,10 @@ function preLoadCss(cssUrl) {
13341343
// * https://www.nngroup.com/articles/tooltip-guidelines/
13351344
// * https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
13361345
setTooltipHoverTimeout(e, false);
1337-
addClass(window.CURRENT_TOOLTIP_ELEMENT, "fade-out");
1346+
if (window.CURRENT_TOOLTIP_ELEMENT &&
1347+
!window.CURRENT_TOOLTIP_ELEMENT.contains(ev.relatedTarget)) {
1348+
addClass(window.CURRENT_TOOLTIP_ELEMENT, "fade-out");
1349+
}
13381350
}
13391351
};
13401352
};

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

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3027,27 +3027,27 @@ function initSearch(rawSearchIndex) {
30273027
async function addTab(array, query, display) {
30283028
const extraClass = display ? " active" : "";
30293029

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

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

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

3044-
const resultName = document.createElement("div");
3043+
const resultName = document.createElement("a");
30453044
resultName.className = "result-name";
3045+
resultName.href = item.href;
30463046

30473047
resultName.insertAdjacentHTML(
30483048
"beforeend",
30493049
`<span class="typename">${typeName}</span>`);
3050-
link.appendChild(resultName);
3050+
li.appendChild(resultName);
30513051

30523052
let alias = " ";
30533053
if (item.is_alias) {
@@ -3068,8 +3068,8 @@ ${item.displayPath}<span class="${type}">${name}</span>\
30683068
const displayType = document.createElement("div");
30693069
if (mappedNames.size > 0 || whereClause.size > 0) {
30703070
const tooltip = document.createElement("a");
3071-
tooltip.tabIndex = -1;
30723071
tooltip.id = `tooltip-${item.id}`;
3072+
tooltip.href = `#${tooltip.id}`;
30733073
const tooltipCode = document.createElement("code");
30743074
for (const [name, qname] of mappedNames) {
30753075
const line = document.createElement("div");
@@ -3124,15 +3124,22 @@ ${item.displayPath}<span class="${type}">${name}</span>\
31243124
}
31253125
description.insertAdjacentHTML("beforeend", item.desc);
31263126

3127-
link.appendChild(description);
3128-
return link;
3127+
li.appendChild(description);
3128+
li.tabIndex = -1;
3129+
li.onclick = () => {
3130+
// allow clicking anywhere on the list item to go to the page
3131+
// even though the link itself is only the name
3132+
resultName.click();
3133+
};
3134+
return li;
31293135
}));
3130-
links.then(links => {
3131-
for (const link of links) {
3132-
output.appendChild(link);
3136+
lis.then(lis => {
3137+
for (const li of lis) {
3138+
output.appendChild(li);
31333139
}
31343140
});
31353141
} else if (query.error === null) {
3142+
output = document.createElement("div");
31363143
output.className = "search-failed" + extraClass;
31373144
output.innerHTML = "No results :(<br/>" +
31383145
"Try on <a href=\"https://duckduckgo.com/?q=" +
@@ -4190,17 +4197,17 @@ ${item.displayPath}<span class="${type}">${name}</span>\
41904197
// up and down arrow select next/previous search result, or the
41914198
// search box if we're already at the top.
41924199
if (e.which === 38) { // up
4193-
const previous = document.activeElement.previousElementSibling;
4200+
const previous = document.activeElement.parentNode.previousElementSibling;
41944201
if (previous) {
4195-
previous.focus();
4202+
previous.querySelectorAll("a").item(0).focus();
41964203
} else {
41974204
searchState.focus();
41984205
}
41994206
e.preventDefault();
42004207
} else if (e.which === 40) { // down
4201-
const next = document.activeElement.nextElementSibling;
4208+
const next = document.activeElement.parentNode.nextElementSibling;
42024209
if (next) {
4203-
next.focus();
4210+
next.querySelectorAll("a").item(0).focus();
42044211
}
42054212
const rect = document.activeElement.getBoundingClientRect();
42064213
if (window.innerHeight - rect.bottom < rect.height) {

0 commit comments

Comments
 (0)