Skip to content

Commit fd5c93b

Browse files
notriddlenotriddle
committed
Fix tooltip link nesting glitches
1 parent 7806e74 commit fd5c93b

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

10071007
.search-results {
10081008
display: none;
1009+
margin: 0;
1010+
padding: 0;
10091011
}
10101012

10111013
.search-results.active {
10121014
display: block;
10131015
}
10141016

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

1024-
.search-results > a > div.desc {
1026+
.search-results > li > div.desc {
10251027
white-space: nowrap;
10261028
text-overflow: ellipsis;
10271029
overflow: hidden;
10281030
flex: 2;
10291031
}
10301032

1031-
.search-results a:hover,
1032-
.search-results a:focus {
1033+
.search-results li > a:focus,
1034+
.search-results li > a:hover,
1035+
.search-results li:hover > a,
1036+
.search-results li:focus > a {
10331037
background-color: var(--search-result-link-focus-background-color);
10341038
}
10351039

@@ -2061,7 +2065,7 @@ in src-script.js and main.js
20612065

20622066
/* Display an alternating layout on tablets and phones */
20632067
.item-table, .item-row, .item-table > li, .item-table > li > div,
2064-
.search-results > a, .search-results > a > div {
2068+
.search-results > li, .search-results > li > div {
20652069
display: block;
20662070
}
20672071

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

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

12671267
window.rustdocConfigureTooltip = e => {
1268-
e.onclick = () => {
1268+
e.addEventListener("click", ev => {
1269+
ev.preventDefault();
1270+
ev.stopPropagation();
12691271
e.TOOLTIP_FORCE_VISIBLE = e.TOOLTIP_FORCE_VISIBLE ? false : true;
12701272
if (window.CURRENT_TOOLTIP_ELEMENT && !e.TOOLTIP_FORCE_VISIBLE) {
12711273
hideTooltip(true);
@@ -1276,12 +1278,16 @@ function preLoadCss(cssUrl) {
12761278
window.CURRENT_TOOLTIP_ELEMENT.onblur = tooltipBlurHandler;
12771279
}
12781280
return false;
1279-
};
1281+
});
12801282
e.onpointerenter = ev => {
12811283
// If this is a synthetic touch event, ignore it. A click event will be along shortly.
12821284
if (ev.pointerType !== "mouse") {
12831285
return;
12841286
}
1287+
if (window.CURRENT_TOOLTIP_ELEMENT &&
1288+
window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE.TOOLTIP_FORCE_VISIBLE) {
1289+
return;
1290+
}
12851291
setTooltipHoverTimeout(e, true);
12861292
};
12871293
e.onpointermove = ev => {
@@ -1296,8 +1302,11 @@ function preLoadCss(cssUrl) {
12961302
if (ev.pointerType !== "mouse") {
12971303
return;
12981304
}
1299-
if (!e.TOOLTIP_FORCE_VISIBLE && window.CURRENT_TOOLTIP_ELEMENT &&
1300-
!window.CURRENT_TOOLTIP_ELEMENT.contains(ev.relatedTarget)) {
1305+
if (window.CURRENT_TOOLTIP_ELEMENT &&
1306+
window.CURRENT_TOOLTIP_ELEMENT.TOOLTIP_BASE !== e) {
1307+
return;
1308+
}
1309+
if (!e.TOOLTIP_FORCE_VISIBLE) {
13011310
// Tooltip pointer leave gesture:
13021311
//
13031312
// Designing a good hover microinteraction is a matter of guessing user
@@ -1329,7 +1338,10 @@ function preLoadCss(cssUrl) {
13291338
// * https://www.nngroup.com/articles/tooltip-guidelines/
13301339
// * https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
13311340
setTooltipHoverTimeout(e, false);
1332-
addClass(window.CURRENT_TOOLTIP_ELEMENT, "fade-out");
1341+
if (window.CURRENT_TOOLTIP_ELEMENT &&
1342+
!window.CURRENT_TOOLTIP_ELEMENT.contains(ev.relatedTarget)) {
1343+
addClass(window.CURRENT_TOOLTIP_ELEMENT, "fade-out");
1344+
}
13331345
}
13341346
};
13351347
};

‎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=" +
@@ -4194,17 +4201,17 @@ ${item.displayPath}<span class="${type}">${name}</span>\
41944201
// up and down arrow select next/previous search result, or the
41954202
// search box if we're already at the top.
41964203
if (e.which === 38) { // up
4197-
const previous = document.activeElement.previousElementSibling;
4204+
const previous = document.activeElement.parentNode.previousElementSibling;
41984205
if (previous) {
4199-
previous.focus();
4206+
previous.querySelectorAll("a").item(0).focus();
42004207
} else {
42014208
searchState.focus();
42024209
}
42034210
e.preventDefault();
42044211
} else if (e.which === 40) { // down
4205-
const next = document.activeElement.nextElementSibling;
4212+
const next = document.activeElement.parentNode.nextElementSibling;
42064213
if (next) {
4207-
next.focus();
4214+
next.querySelectorAll("a").item(0).focus();
42084215
}
42094216
const rect = document.activeElement.getBoundingClientRect();
42104217
if (window.innerHeight - rect.bottom < rect.height) {

0 commit comments

Comments
 (0)