Skip to content

Commit 36e26ab

Browse files
notriddlenotriddle
committed
rustdoc-search: reformat type signature display
1 parent 0619248 commit 36e26ab

File tree

8 files changed

+102
-133
lines changed

8 files changed

+102
-133
lines changed

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

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1084,42 +1084,43 @@ so that we can apply CSS-filters to change the arrow color in themes */
10841084

10851085
.search-results {
10861086
display: none;
1087-
margin: 0;
1088-
padding: 0;
10891087
}
10901088

10911089
.search-results.active {
10921090
display: block;
1091+
margin: 0;
1092+
padding: 0;
10931093
}
10941094

1095-
.search-results > li {
1096-
display: flex;
1097-
cursor: pointer;
1095+
.search-results > a {
1096+
display: grid;
1097+
grid-template-areas:
1098+
"search-result-name search-result-desc"
1099+
"search-result-type-signature search-result-type-signature";
1100+
grid-template-columns: .6fr .4fr;
10981101
/* A little margin ensures the browser's outlining of focused links has room to display. */
10991102
margin: 0 2px;
11001103
border-bottom: 1px solid var(--search-result-border-color);
1101-
gap: 1em;
1104+
column-gap: 1em;
11021105
}
11031106

1104-
.search-results > li > div.desc {
1107+
.search-results > a > div.desc {
11051108
white-space: nowrap;
11061109
text-overflow: ellipsis;
11071110
overflow: hidden;
1108-
flex: 2;
1111+
grid-area: search-result-desc;
11091112
}
11101113

1111-
.search-results li > a:focus,
1112-
.search-results li > a:hover,
1113-
.search-results li:hover > a,
1114-
.search-results li:focus > a {
1114+
.search-results a:focus,
1115+
.search-results a:hover {
11151116
background-color: var(--search-result-link-focus-background-color);
11161117
}
11171118

11181119
.search-results .result-name {
11191120
display: flex;
11201121
align-items: center;
11211122
justify-content: start;
1122-
flex: 3;
1123+
grid-area: search-result-name;
11231124
}
11241125
.search-results .result-name .alias {
11251126
color: var(--search-results-alias-color);
@@ -1141,6 +1142,11 @@ so that we can apply CSS-filters to change the arrow color in themes */
11411142
display: inline;
11421143
}
11431144

1145+
.search-results .type-signature {
1146+
grid-area: search-result-type-signature;
1147+
white-space: pre-wrap;
1148+
}
1149+
11441150
.popover {
11451151
position: absolute;
11461152
top: 100%;
@@ -1564,8 +1570,7 @@ instead, we check that it's not a "finger" cursor.
15641570
position: relative;
15651571
}
15661572

1567-
.code-header a.tooltip:hover,
1568-
.search-results a.tooltip:hover {
1573+
.code-header a.tooltip:hover {
15691574
color: var(--link-color);
15701575
}
15711576

@@ -2173,15 +2178,15 @@ in src-script.js and main.js
21732178

21742179
/* Display an alternating layout on tablets and phones */
21752180
.item-table, .item-row, .item-table > li, .item-table > li > div,
2176-
.search-results > li, .search-results > li > div {
2181+
.search-results > a, .search-results > a > div {
21772182
display: block;
21782183
}
21792184

21802185
/* Display an alternating layout on tablets and phones */
2181-
.search-results > li {
2186+
.search-results > a {
21822187
padding: 5px 0px;
21832188
}
2184-
.search-results > li > div.desc, .item-table > li > div.desc {
2189+
.search-results > a > div.desc, .item-table > li > div.desc {
21852190
padding-left: 2em;
21862191
}
21872192
.search-results .result-name {
@@ -2850,19 +2855,17 @@ Original by Dempfi (https://github.com/dempfi/ayu)
28502855
border-right: 1px solid #ffb44c;
28512856
}
28522857

2853-
:root[data-theme="ayu"] .search-results li:hover > a,
2854-
:root[data-theme="ayu"] .search-results li:focus > a,
2855-
:root[data-theme="ayu"] .search-results li > a:hover,
2856-
:root[data-theme="ayu"] .search-results li > a:focus {
2858+
:root[data-theme="ayu"] .search-results a:hover,
2859+
:root[data-theme="ayu"] .search-results a:focus {
28572860
color: #fff !important;
28582861
background-color: #3c3c3c;
28592862
}
28602863

2861-
:root[data-theme="ayu"] .search-results li > a {
2864+
:root[data-theme="ayu"] .search-results a {
28622865
color: #0096cf;
28632866
}
28642867

2865-
:root[data-theme="ayu"] .search-results li div.desc {
2868+
:root[data-theme="ayu"] .search-results a div.desc {
28662869
color: #c5c5c5;
28672870
}
28682871

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

Lines changed: 33 additions & 56 deletions
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‎

Lines changed: 11 additions & 22 deletions
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‎

Lines changed: 6 additions & 6 deletions
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‎

Lines changed: 7 additions & 7 deletions
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)