Skip to content

Commit b90d43d

Browse files
notriddlenotriddle
committed
rustdoc-search: reformat type signature display
1 parent 5602103 commit b90d43d

8 files changed

+102
-133
lines changed

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

+27-24
Original file line numberDiff line numberDiff line change
@@ -1058,42 +1058,43 @@ so that we can apply CSS-filters to change the arrow color in themes */
10581058

10591059
.search-results {
10601060
display: none;
1061-
margin: 0;
1062-
padding: 0;
10631061
}
10641062

10651063
.search-results.active {
10661064
display: block;
1065+
margin: 0;
1066+
padding: 0;
10671067
}
10681068

1069-
.search-results > li {
1070-
display: flex;
1071-
cursor: pointer;
1069+
.search-results > a {
1070+
display: grid;
1071+
grid-template-areas:
1072+
"search-result-name search-result-desc"
1073+
"search-result-type-signature search-result-type-signature";
1074+
grid-template-columns: .6fr .4fr;
10721075
/* A little margin ensures the browser's outlining of focused links has room to display. */
10731076
margin: 0 2px;
10741077
border-bottom: 1px solid var(--search-result-border-color);
1075-
gap: 1em;
1078+
column-gap: 1em;
10761079
}
10771080

1078-
.search-results > li > div.desc {
1081+
.search-results > a > div.desc {
10791082
white-space: nowrap;
10801083
text-overflow: ellipsis;
10811084
overflow: hidden;
1082-
flex: 2;
1085+
grid-area: search-result-desc;
10831086
}
10841087

1085-
.search-results li > a:focus,
1086-
.search-results li > a:hover,
1087-
.search-results li:hover > a,
1088-
.search-results li:focus > a {
1088+
.search-results a:focus,
1089+
.search-results a:hover {
10891090
background-color: var(--search-result-link-focus-background-color);
10901091
}
10911092

10921093
.search-results .result-name {
10931094
display: flex;
10941095
align-items: center;
10951096
justify-content: start;
1096-
flex: 3;
1097+
grid-area: search-result-name;
10971098
}
10981099
.search-results .result-name .alias {
10991100
color: var(--search-results-alias-color);
@@ -1115,6 +1116,11 @@ so that we can apply CSS-filters to change the arrow color in themes */
11151116
display: inline;
11161117
}
11171118

1119+
.search-results .type-signature {
1120+
grid-area: search-result-type-signature;
1121+
white-space: pre-wrap;
1122+
}
1123+
11181124
.popover {
11191125
position: absolute;
11201126
top: 100%;
@@ -1495,8 +1501,7 @@ a.test-arrow:hover {
14951501
position: relative;
14961502
}
14971503

1498-
.code-header a.tooltip:hover,
1499-
.search-results a.tooltip:hover {
1504+
.code-header a.tooltip:hover {
15001505
color: var(--link-color);
15011506
}
15021507

@@ -2118,15 +2123,15 @@ in src-script.js and main.js
21182123

21192124
/* Display an alternating layout on tablets and phones */
21202125
.item-table, .item-row, .item-table > li, .item-table > li > div,
2121-
.search-results > li, .search-results > li > div {
2126+
.search-results > a, .search-results > a > div {
21222127
display: block;
21232128
}
21242129

21252130
/* Display an alternating layout on tablets and phones */
2126-
.search-results > li {
2131+
.search-results > a {
21272132
padding: 5px 0px;
21282133
}
2129-
.search-results > li > div.desc, .item-table > li > div.desc {
2134+
.search-results > a > div.desc, .item-table > li > div.desc {
21302135
padding-left: 2em;
21312136
}
21322137
.search-results .result-name {
@@ -2807,19 +2812,17 @@ Original by Dempfi (https://github.com/dempfi/ayu)
28072812
border-right: 1px solid #ffb44c;
28082813
}
28092814

2810-
:root[data-theme="ayu"] .search-results li:hover > a,
2811-
:root[data-theme="ayu"] .search-results li:focus > a,
2812-
:root[data-theme="ayu"] .search-results li > a:hover,
2813-
:root[data-theme="ayu"] .search-results li > a:focus {
2815+
:root[data-theme="ayu"] .search-results a:hover,
2816+
:root[data-theme="ayu"] .search-results a:focus {
28142817
color: #fff !important;
28152818
background-color: #3c3c3c;
28162819
}
28172820

2818-
:root[data-theme="ayu"] .search-results li > a {
2821+
:root[data-theme="ayu"] .search-results a {
28192822
color: #0096cf;
28202823
}
28212824

2822-
:root[data-theme="ayu"] .search-results li div.desc {
2825+
:root[data-theme="ayu"] .search-results a div.desc {
28232826
color: #c5c5c5;
28242827
}
28252828

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

+33-56
Original file line numberDiff line numberDiff line change
@@ -3097,12 +3097,12 @@ function initSearch(rawSearchIndex) {
30973097
const longType = longItemTypes[item.ty];
30983098
const typeName = longType.length !== 0 ? `${longType}` : "?";
30993099

3100-
const li = document.createElement("li");
3100+
const li = document.createElement("a");
31013101
li.className = "result-" + type;
3102+
li.href = item.href;
31023103

3103-
const resultName = document.createElement("a");
3104+
const resultName = document.createElement("span");
31043105
resultName.className = "result-name";
3105-
resultName.href = item.href;
31063106

31073107
resultName.insertAdjacentHTML(
31083108
"beforeend",
@@ -3126,29 +3126,46 @@ ${item.displayPath}<span class="${type}">${name}</span>\
31263126
if (item.displayTypeSignature) {
31273127
const {type, mappedNames, whereClause} = await item.displayTypeSignature;
31283128
const displayType = document.createElement("div");
3129+
type.forEach((value, index) => {
3130+
if (index % 2 !== 0) {
3131+
const highlight = document.createElement("strong");
3132+
highlight.appendChild(document.createTextNode(value));
3133+
displayType.appendChild(highlight);
3134+
} else {
3135+
displayType.appendChild(document.createTextNode(value));
3136+
}
3137+
});
31293138
if (mappedNames.size > 0 || whereClause.size > 0) {
3130-
const tooltip = document.createElement("a");
3131-
tooltip.id = `tooltip-${item.id}`;
3132-
tooltip.href = `#${tooltip.id}`;
3133-
const tooltipCode = document.createElement("code");
3139+
let addWhereLineFn = () => {
3140+
const line = document.createElement("div");
3141+
line.className = "where";
3142+
line.appendChild(document.createTextNode("where"));
3143+
displayType.appendChild(line);
3144+
addWhereLineFn = () => {};
3145+
};
31343146
for (const [name, qname] of mappedNames) {
31353147
// don't care unless the generic name is different
31363148
if (name === qname) {
31373149
continue;
31383150
}
3151+
addWhereLineFn();
31393152
const line = document.createElement("div");
31403153
line.className = "where";
3141-
line.appendChild(document.createTextNode(`${name} is ${qname}`));
3142-
tooltipCode.appendChild(line);
3154+
line.appendChild(document.createTextNode(` ${qname} matches `));
3155+
const lineStrong = document.createElement("strong");
3156+
lineStrong.appendChild(document.createTextNode(name));
3157+
line.appendChild(lineStrong);
3158+
displayType.appendChild(line);
31433159
}
31443160
for (const [name, innerType] of whereClause) {
31453161
// don't care unless there's at least one highlighted entry
31463162
if (innerType.length <= 1) {
31473163
continue;
31483164
}
3165+
addWhereLineFn();
31493166
const line = document.createElement("div");
31503167
line.className = "where";
3151-
line.appendChild(document.createTextNode(`${name}: `));
3168+
line.appendChild(document.createTextNode(` ${name}: `));
31523169
innerType.forEach((value, index) => {
31533170
if (index % 2 !== 0) {
31543171
const highlight = document.createElement("strong");
@@ -3158,55 +3175,15 @@ ${item.displayPath}<span class="${type}">${name}</span>\
31583175
line.appendChild(document.createTextNode(value));
31593176
}
31603177
});
3161-
tooltipCode.appendChild(line);
3162-
}
3163-
if (tooltipCode.childNodes.length !== 0) {
3164-
tooltip.RUSTDOC_TOOLTIP_DOM = document.createElement("div");
3165-
tooltip.RUSTDOC_TOOLTIP_DOM.className = "content";
3166-
const tooltipH3 = document.createElement("h3");
3167-
tooltipH3.innerHTML = "About this result";
3168-
tooltip.RUSTDOC_TOOLTIP_DOM.appendChild(tooltipH3);
3169-
const tooltipPre = document.createElement("pre");
3170-
tooltipPre.appendChild(tooltipCode);
3171-
tooltip.RUSTDOC_TOOLTIP_DOM.appendChild(tooltipPre);
3172-
tooltip.typeWhereClause = whereClause;
3173-
tooltip.innerText = "ⓘ";
3174-
tooltip.className = "tooltip";
3175-
window.rustdocConfigureTooltip(tooltip);
3176-
displayType.appendChild(tooltip);
3177-
displayType.appendChild(document.createTextNode(" "));
3178+
displayType.appendChild(line);
31783179
}
31793180
}
3180-
type.forEach((value, index) => {
3181-
if (index % 2 !== 0) {
3182-
const highlight = document.createElement("strong");
3183-
highlight.appendChild(document.createTextNode(value));
3184-
displayType.appendChild(highlight);
3185-
} else {
3186-
displayType.appendChild(document.createTextNode(value));
3187-
}
3188-
});
31893181
displayType.className = "type-signature";
3190-
description.appendChild(displayType);
3182+
li.appendChild(displayType);
31913183
}
31923184
description.insertAdjacentHTML("beforeend", item.desc);
31933185

31943186
li.appendChild(description);
3195-
li.tabIndex = -1;
3196-
li.onclick = () => {
3197-
// allow user to select the description text without navigating
3198-
// also, they can select the path itself by starting the selection here
3199-
// (a UI feature I got used to from DuckDuckGo)
3200-
if (window.getSelection) {
3201-
const selection = window.getSelection();
3202-
if (selection && !selection.isCollapsed) {
3203-
return;
3204-
}
3205-
}
3206-
// allow clicking anywhere on the list item to go to the page
3207-
// even though the link itself is only the name
3208-
resultName.click();
3209-
};
32103187
return li;
32113188
}));
32123189
lis.then(lis => {
@@ -4293,17 +4270,17 @@ ${item.displayPath}<span class="${type}">${name}</span>\
42934270
// up and down arrow select next/previous search result, or the
42944271
// search box if we're already at the top.
42954272
if (e.which === 38) { // up
4296-
const previous = document.activeElement.parentNode.previousElementSibling;
4273+
const previous = document.activeElement.previousElementSibling;
42974274
if (previous) {
4298-
previous.querySelectorAll("a").item(0).focus();
4275+
previous.focus();
42994276
} else {
43004277
searchState.focus();
43014278
}
43024279
e.preventDefault();
43034280
} else if (e.which === 40) { // down
4304-
const next = document.activeElement.parentNode.nextElementSibling;
4281+
const next = document.activeElement.nextElementSibling;
43054282
if (next) {
4306-
next.querySelectorAll("a").item(0).focus();
4283+
next.focus();
43074284
}
43084285
const rect = document.activeElement.getBoundingClientRect();
43094286
if (window.innerHeight - rect.bottom < rect.height) {

‎tests/rustdoc-gui/search-about-this-result.goml

+11-22
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,21 @@ press-key: "Enter"
88

99
wait-for: "#search-tabs"
1010
assert-count: ("#search-tabs button", 1)
11-
assert-count: (".search-results > li", 1)
12-
assert-count: (".tooltip:not(.popover)", 1)
13-
assert-count: (".tooltip.popover", 0)
11+
assert-count: (".search-results > a", 1)
1412

1513
assert: "//div[@class='type-signature']/strong[text()='Iterator']"
1614
assert: "//div[@class='type-signature']/strong[text()='(']"
1715
assert: "//div[@class='type-signature']/strong[text()=')']"
1816

19-
click: ".tooltip:not(.popover)"
20-
wait-for: ".tooltip.popover"
21-
assert-count: (".tooltip.popover", 1)
17+
assert: "//div[@class='type-signature']/div[@class='where']/strong[text()='FnMut']"
18+
assert: "//div[@class='type-signature']/div[@class='where']/strong[text()='Iterator::Item']"
19+
assert: "//div[@class='type-signature']/div[@class='where']/strong[text()='bool']"
20+
assert: "//div[@class='type-signature']/div[@class='where']/strong[text()='Extend']"
2221

23-
assert: "//div[@class='tooltip popover']//strong[text()='FnMut']"
24-
assert: "//div[@class='tooltip popover']//strong[text()='Iterator::Item']"
25-
assert: "//div[@class='tooltip popover']//strong[text()='bool']"
26-
assert: "//div[@class='tooltip popover']//strong[text()='Extend']"
27-
28-
assert-text: (".tooltip.popover h3", "About this result")
29-
assert-text: (".tooltip.popover pre code div:nth-child(1)", "Iterator::Item is T")
30-
assert-text: (".tooltip.popover pre code div:nth-child(2)", "F: FnMut (&Iterator::Item) -> bool")
31-
assert-text: (".tooltip.popover pre code div:nth-child(3)", "B: Default + Extend<Iterator::Item>")
32-
33-
click: ".tooltip:not(.popover)"
34-
wait-for: 100 // wait-for-false does not exist
35-
assert-count: (".tooltip.popover", 0)
22+
assert-text: ("div.type-signature div.where:nth-child(4)", "where")
23+
assert-text: ("div.type-signature div.where:nth-child(5)", " T matches Iterator::Item")
24+
assert-text: ("div.type-signature div.where:nth-child(6)", " F: FnMut (&Iterator::Item) -> bool")
25+
assert-text: ("div.type-signature div.where:nth-child(7)", " B: Default + Extend<Iterator::Item>")
3626

3727
// Try a simple result that *won't* give an info box.
3828
go-to: "file://" + |DOC_PATH| + "/lib2/index.html?search=F->lib2::WhereWhitespace<T>"
@@ -44,9 +34,8 @@ press-key: "Enter"
4434
wait-for: "#search-tabs"
4535
assert-text: ("//div[@class='type-signature']", "F -> WhereWhitespace<T>")
4636
assert-count: ("#search-tabs button", 1)
47-
assert-count: (".search-results > li", 1)
48-
assert-count: (".tooltip:not(.popover)", 0)
49-
assert-count: (".tooltip.popover", 0)
37+
assert-count: (".search-results > a", 1)
38+
assert-count: ("//div[@class='type-signature']/div[@class='where']", 0)
5039

5140
assert: "//div[@class='type-signature']/strong[text()='F']"
5241
assert: "//div[@class='type-signature']/strong[text()='WhereWhitespace']"

‎tests/rustdoc-gui/search-keyboard.goml

+6-6
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,18 @@ wait-for: "#search-tabs"
1111
press-key: "ArrowDown"
1212
press-key: "ArrowDown"
1313
press-key: "ArrowDown"
14-
assert: ".search-results.active > li:nth-of-type(3) > a:focus"
14+
assert: ".search-results.active > a:nth-of-type(3):focus"
1515

1616
// Now switch to the second tab, then back to the first one, then arrow back up.
1717
press-key: "ArrowRight"
18-
assert: ".search-results.active:nth-of-type(2) > li:nth-of-type(1) > a:focus"
18+
assert: ".search-results.active:nth-of-type(2) > a:nth-of-type(1):focus"
1919
press-key: "ArrowLeft"
20-
assert: ".search-results.active:nth-of-type(1) > li:nth-of-type(3) > a:focus"
20+
assert: ".search-results.active:nth-of-type(1) > a:nth-of-type(3):focus"
2121
press-key: "ArrowUp"
22-
assert: ".search-results.active > li:nth-of-type(2) > a:focus"
22+
assert: ".search-results.active > a:nth-of-type(2):focus"
2323
press-key: "ArrowUp"
24-
assert: ".search-results.active > li:nth-of-type(1) > a:focus"
24+
assert: ".search-results.active > a:nth-of-type(1):focus"
2525
press-key: "ArrowUp"
2626
assert: ".search-input:focus"
2727
press-key: "ArrowDown"
28-
assert: ".search-results.active > li:nth-of-type(1) > a:focus"
28+
assert: ".search-results.active > a:nth-of-type(1):focus"

‎tests/rustdoc-gui/search-reexport.goml

+7-7
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,25 @@ assert-css: ("//*[@id='reexport.TheStdReexport']", {"background-color": "rgba(0,
99
write-into: (".search-input", "TheStdReexport")
1010
// To be SURE that the search will be run.
1111
press-key: 'Enter'
12-
wait-for: "//li[@class='result-import']"
12+
wait-for: "//a[@class='result-import']"
1313
assert-attribute: (
14-
"//li[@class='result-import']/a",
14+
"//a[@class='result-import']",
1515
{"href": "../test_docs/index.html#reexport.TheStdReexport"},
1616
)
17-
assert-text: ("li.result-import .result-name", "re-export test_docs::TheStdReexport")
18-
click: "//li[@class='result-import']"
17+
assert-text: ("a.result-import .result-name", "re-export test_docs::TheStdReexport")
18+
click: "//a[@class='result-import']"
1919
// We check that it has the background modified thanks to the focus.
2020
wait-for-css: ("//*[@id='reexport.TheStdReexport']", {"background-color": "#494a3d"})
2121

2222
// We now check that the alias is working as well on the reexport.
2323
// To be SURE that the search will be run.
2424
press-key: 'Enter'
2525
write-into: (".search-input", "AliasForTheStdReexport")
26-
wait-for: "//li[@class='result-import']"
26+
wait-for: "//a[@class='result-import']"
2727
assert-text: (
28-
"li.result-import .result-name",
28+
"a.result-import .result-name",
2929
"re-export AliasForTheStdReexport - see test_docs::TheStdReexport",
3030
)
3131
// Same thing again, we click on it to ensure the background is once again set as expected.
32-
click: "//li[@class='result-import']"
32+
click: "//a[@class='result-import']"
3333
wait-for-css: ("//*[@id='reexport.TheStdReexport']", {"background-color": "#494a3d"})

0 commit comments

Comments
 (0)