Skip to content

Commit 44e05a1

Browse files
notriddlenotriddle
committed
Fix tooltip link nesting glitches
1 parent 8d50c9e commit 44e05a1

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
@@ -1057,30 +1057,34 @@ so that we can apply CSS-filters to change the arrow color in themes */
10571057

10581058
.search-results {
10591059
display: none;
1060+
margin: 0;
1061+
padding: 0;
10601062
}
10611063

10621064
.search-results.active {
10631065
display: block;
10641066
}
10651067

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

1075-
.search-results > a > div.desc {
1077+
.search-results > li > div.desc {
10761078
white-space: nowrap;
10771079
text-overflow: ellipsis;
10781080
overflow: hidden;
10791081
flex: 2;
10801082
}
10811083

1082-
.search-results a:hover,
1083-
.search-results a:focus {
1084+
.search-results li > a:focus,
1085+
.search-results li > a:hover,
1086+
.search-results li:hover > a,
1087+
.search-results li:focus > a {
10841088
background-color: var(--search-result-link-focus-background-color);
10851089
}
10861090

@@ -2112,7 +2116,7 @@ in src-script.js and main.js
21122116

21132117
/* Display an alternating layout on tablets and phones */
21142118
.item-table, .item-row, .item-table > li, .item-table > li > div,
2115-
.search-results > a, .search-results > a > div {
2119+
.search-results > li, .search-results > li > div {
21162120
display: block;
21172121
}
21182122

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

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

12691269
window.rustdocConfigureTooltip = e => {
1270-
e.onclick = () => {
1270+
e.addEventListener("click", ev => {
1271+
ev.preventDefault();
1272+
ev.stopPropagation();
12711273
e.TOOLTIP_FORCE_VISIBLE = e.TOOLTIP_FORCE_VISIBLE ? false : true;
12721274
if (window.CURRENT_TOOLTIP_ELEMENT && !e.TOOLTIP_FORCE_VISIBLE) {
12731275
hideTooltip(true);
@@ -1278,12 +1280,16 @@ function preLoadCss(cssUrl) {
12781280
window.CURRENT_TOOLTIP_ELEMENT.onblur = tooltipBlurHandler;
12791281
}
12801282
return false;
1281-
};
1283+
});
12821284
e.onpointerenter = ev => {
12831285
// If this is a synthetic touch event, ignore it. A click event will be along shortly.
12841286
if (ev.pointerType !== "mouse") {
12851287
return;
12861288
}
1289+
if (window.CURRENT_TOOLTIP_ELEMENT &&
1290+
window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE.TOOLTIP_FORCE_VISIBLE) {
1291+
return;
1292+
}
12871293
setTooltipHoverTimeout(e, true);
12881294
};
12891295
e.onpointermove = ev => {
@@ -1298,8 +1304,11 @@ function preLoadCss(cssUrl) {
12981304
if (ev.pointerType !== "mouse") {
12991305
return;
13001306
}
1301-
if (!e.TOOLTIP_FORCE_VISIBLE && window.CURRENT_TOOLTIP_ELEMENT &&
1302-
!window.CURRENT_TOOLTIP_ELEMENT.contains(ev.relatedTarget)) {
1307+
if (window.CURRENT_TOOLTIP_ELEMENT &&
1308+
window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE !== e) {
1309+
return;
1310+
}
1311+
if (!e.TOOLTIP_FORCE_VISIBLE) {
13031312
// Tooltip pointer leave gesture:
13041313
//
13051314
// Designing a good hover microinteraction is a matter of guessing user
@@ -1331,7 +1340,10 @@ function preLoadCss(cssUrl) {
13311340
// * https://www.nngroup.com/articles/tooltip-guidelines/
13321341
// * https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
13331342
setTooltipHoverTimeout(e, false);
1334-
addClass(window.CURRENT_TOOLTIP_ELEMENT, "fade-out");
1343+
if (window.CURRENT_TOOLTIP_ELEMENT &&
1344+
!window.CURRENT_TOOLTIP_ELEMENT.contains(ev.relatedTarget)) {
1345+
addClass(window.CURRENT_TOOLTIP_ELEMENT, "fade-out");
1346+
}
13351347
}
13361348
};
13371349
};

‎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)