Auto merge of - GuillaumeGomez:better-result-dom-generation, r=jsha

Better result dom generation

First commit is from https://github.com/rust-lang/rust/pull/85506.

We realized in https://github.com/rust-lang/rust/pull/85506#issuecomment-844984162 thanks to `@dns2utf8` that in some cases, the generated search result DOM was invalid. This was not strict enough and the DOM was inserted as a big string, which wasn't great.

r? `@jsha`
This commit is contained in:
bors 2021-05-29 16:27:14 +00:00
commit ff5522fc1a
6 changed files with 70 additions and 22 deletions
src
librustdoc/html/static
test/rustdoc-gui

View File

@ -968,11 +968,11 @@ window.initSearch = function(rawSearchIndex) {
extraClass = " active"; extraClass = " active";
} }
var output = ""; var output = document.createElement("div");
var duplicates = {}; var duplicates = {};
var length = 0; var length = 0;
if (array.length > 0) { if (array.length > 0) {
output = "<div class=\"search-results " + extraClass + "\">"; output.className = "search-results " + extraClass;
array.forEach(function(item) { array.forEach(function(item) {
if (item.is_alias !== true) { if (item.is_alias !== true) {
@ -994,19 +994,46 @@ window.initSearch = function(rawSearchIndex) {
extra = " <i>(keyword)</i>"; extra = " <i>(keyword)</i>";
} }
output += "<a class=\"result-" + type + "\" href=\"" + item.href + "\">" + var link = document.createElement("a");
"<div><div class=\"result-name\">" + link.className = "result-" + type;
(item.is_alias === true ? link.href = item.href;
("<span class=\"alias\"><b>" + item.alias + " </b></span><span " +
"class=\"grey\"><i>&nbsp;- see&nbsp;</i></span>") : "") + var wrapper = document.createElement("div");
item.displayPath + "<span class=\"" + type + "\">" + var resultName = document.createElement("div");
name + extra + "</span></div><div class=\"desc\">" + resultName.className = "result-name";
"<span>" + item.desc +
"&nbsp;</span></div></div></a>"; if (item.is_alias) {
var alias = document.createElement("span");
alias.className = "alias";
var bold = document.createElement("b");
bold.innerText = item.alias;
alias.appendChild(bold);
alias.insertAdjacentHTML(
"beforeend",
"<span class=\"grey\"><i>&nbsp;- see&nbsp;</i></span>");
resultName.appendChild(alias);
}
resultName.insertAdjacentHTML(
"beforeend",
item.displayPath + "<span class=\"" + type + "\">" + name + extra + "</span>");
wrapper.appendChild(resultName);
var description = document.createElement("div");
description.className = "desc";
var spanDesc = document.createElement("span");
spanDesc.innerText = item.desc + "\u00A0";
description.appendChild(spanDesc);
wrapper.appendChild(description);
link.appendChild(wrapper);
output.appendChild(link);
}); });
output += "</div>";
} else { } else {
output = "<div class=\"search-failed\"" + extraClass + ">No results :(<br/>" + output.className = "search-failed" + extraClass;
output.innerHTML = "No results :(<br/>" +
"Try on <a href=\"https://duckduckgo.com/?q=" + "Try on <a href=\"https://duckduckgo.com/?q=" +
encodeURIComponent("rust " + query.query) + encodeURIComponent("rust " + query.query) +
"\">DuckDuckGo</a>?<br/><br/>" + "\">DuckDuckGo</a>?<br/><br/>" +
@ -1018,7 +1045,7 @@ window.initSearch = function(rawSearchIndex) {
"href=\"https://doc.rust-lang.org/book/index.html\">Rust Book</a> for " + "href=\"https://doc.rust-lang.org/book/index.html\">Rust Book</a> for " +
"introductions to language features and the language itself.</li><li><a " + "introductions to language features and the language itself.</li><li><a " +
"href=\"https://docs.rs\">Docs.rs</a> for documentation of crates released on" + "href=\"https://docs.rs\">Docs.rs</a> for documentation of crates released on" +
" <a href=\"https://crates.io/\">crates.io</a>.</li></ul></div>"; " <a href=\"https://crates.io/\">crates.io</a>.</li></ul>";
} }
return [output, length]; return [output, length];
} }
@ -1078,10 +1105,16 @@ window.initSearch = function(rawSearchIndex) {
makeTabHeader(0, "In Names", ret_others[1]) + makeTabHeader(0, "In Names", ret_others[1]) +
makeTabHeader(1, "In Parameters", ret_in_args[1]) + makeTabHeader(1, "In Parameters", ret_in_args[1]) +
makeTabHeader(2, "In Return Types", ret_returned[1]) + makeTabHeader(2, "In Return Types", ret_returned[1]) +
"</div><div id=\"results\">" + "</div>";
ret_others[0] + ret_in_args[0] + ret_returned[0] + "</div>";
var resultsElem = document.createElement("div");
resultsElem.id = "results";
resultsElem.appendChild(ret_others[0]);
resultsElem.appendChild(ret_in_args[0]);
resultsElem.appendChild(ret_returned[0]);
search.innerHTML = output; search.innerHTML = output;
search.appendChild(resultsElem);
// Reset focused elements. // Reset focused elements.
searchState.focusedByTab = [null, null, null]; searchState.focusedByTab = [null, null, null];
searchState.showResults(search); searchState.showResults(search);

View File

@ -565,10 +565,10 @@ kbd {
background-color: rgba(70, 70, 70, 0.33); background-color: rgba(70, 70, 70, 0.33);
} }
.search-results td span.alias { .search-results .result-name span.alias {
color: #c5c5c5; color: #c5c5c5;
} }
.search-results td span.grey { .search-results .result-name span.grey {
color: #999; color: #999;
} }

View File

@ -444,10 +444,10 @@ kbd {
background-color: #606060; background-color: #606060;
} }
.search-results td span.alias { .search-results .result-name span.alias {
color: #fff; color: #fff;
} }
.search-results td span.grey { .search-results .result-name span.grey {
color: #ccc; color: #ccc;
} }

View File

@ -435,10 +435,10 @@ kbd {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
.search-results td span.alias { .search-results .result-name span.alias {
color: #000; color: #000;
} }
.search-results td span.grey { .search-results .result-name span.grey {
color: #999; color: #999;
} }

View File

@ -0,0 +1,14 @@
goto: file://|DOC_PATH|/test_docs/index.html
// We set the theme so we're sure that the corect values will be used, whatever the computer
// this test is running on.
local-storage: {"rustdoc-theme": "dark", "rustdoc-preferred-dark-theme": "dark", "rustdoc-use-system-theme": "false"}
// If the text isn't displayed, the browser doesn't compute color style correctly...
show-text: true
// We reload the page so the local storage settings are being used.
reload:
write: (".search-input", "thisisanalias")
// Waiting for the search results to appear...
wait-for: "#titles"
// Checking that the colors for the alias element are the ones expected.
assert: (".result-name > .alias", {"color": "rgb(255, 255, 255)"})
assert: (".result-name > .alias > .grey", {"color": "rgb(204, 204, 204)"})

View File

@ -36,6 +36,7 @@ impl Foo {
} }
/// Just a normal enum. /// Just a normal enum.
#[doc(alias = "ThisIsAnAlias")]
pub enum WhoLetTheDogOut { pub enum WhoLetTheDogOut {
/// Woof! /// Woof!
Woof, Woof,