Skip to content

Commit 0746ecc

Browse files
notriddlenotriddle
committed
Fix tooltip link nesting glitches
1 parent 956deaa commit 0746ecc

File tree

3 files changed

+52
-29
lines changed

3 files changed

+52
-29
lines changed

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

+11-7
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

+17-5
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

+24-17
Original file line numberDiff line numberDiff line change
@@ -3023,27 +3023,27 @@ function initSearch(rawSearchIndex) {
30233023
async function addTab(array, query, display) {
30243024
const extraClass = display ? " active" : "";
30253025

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

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

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

3040-
const resultName = document.createElement("div");
3039+
const resultName = document.createElement("a");
30413040
resultName.className = "result-name";
3041+
resultName.href = item.href;
30423042

30433043
resultName.insertAdjacentHTML(
30443044
"beforeend",
30453045
`<span class="typename">${typeName}</span>`);
3046-
link.appendChild(resultName);
3046+
li.appendChild(resultName);
30473047

30483048
let alias = " ";
30493049
if (item.is_alias) {
@@ -3064,8 +3064,8 @@ ${item.displayPath}<span class="${type}">${name}</span>\
30643064
const displayType = document.createElement("div");
30653065
if (mappedNames.size > 0 || whereClause.size > 0) {
30663066
const tooltip = document.createElement("a");
3067-
tooltip.tabIndex = -1;
30683067
tooltip.id = `tooltip-${item.id}`;
3068+
tooltip.href = `#${tooltip.id}`;
30693069
const tooltipCode = document.createElement("code");
30703070
for (const [name, qname] of mappedNames) {
30713071
const line = document.createElement("div");
@@ -3120,15 +3120,22 @@ ${item.displayPath}<span class="${type}">${name}</span>\
31203120
}
31213121
description.insertAdjacentHTML("beforeend", item.desc);
31223122

3123-
link.appendChild(description);
3124-
return link;
3123+
li.appendChild(description);
3124+
li.tabIndex = -1;
3125+
li.onclick = () => {
3126+
// allow clicking anywhere on the list item to go to the page
3127+
// even though the link itself is only the name
3128+
resultName.click();
3129+
};
3130+
return li;
31253131
}));
3126-
links.then(links => {
3127-
for (const link of links) {
3128-
output.appendChild(link);
3132+
lis.then(lis => {
3133+
for (const li of lis) {
3134+
output.appendChild(li);
31293135
}
31303136
});
31313137
} else if (query.error === null) {
3138+
output = document.createElement("div");
31323139
output.className = "search-failed" + extraClass;
31333140
output.innerHTML = "No results :(<br/>" +
31343141
"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)