Better result dom generation

[GuillaumeGomez]

First commit is from #85506.

We realized in #85506 (comment) 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

[rust-highfive]

Some changes occurred in HTML/CSS/JS.

cc @GuillaumeGomez

[dns2utf8]

I found that some entries are not visible for some reason, but I can select them if I go down with the arrow keys and press enter, for example:

MyWs::fn send_to_client(&mut self, msg: ClientCommand, ctx: &mut WebsocketContext<Self>)

https://data.estada.ch/rustdoc-nightly_4e3e6db01_2021-05-18/multiplayer_snake/index.html?search=send
updated with the current search.js

Update: link to the correct search term

[dns2utf8]

I noticed when I looked at it with Chromium that the entries that are missing don't have a description text:

I am still in a meeting, but I can take a look at it later

[GuillaumeGomez]

Ok, I found the issue. That was a tricky one: it lacks a div when there is no short documentation. The items are there, just not in the right place. Talk about tricky case. Great catch!

[dns2utf8]

Ah yes, and with the float: left on the entry it collapses the whole link to height: 0px 😄

[dns2utf8]

I made an error in one of my comments in the other thread: it should have been 00a0 (nbsp) instead of 00ad (shy) then it works with Firefox too.
Very sorry about that

[GuillaumeGomez]

@dns2utf8 No problem, I'll update the char at the same time as the rest. :)

[dns2utf8]

Suggested change

	var description = document.createElement("div");
	var description = document.createElement("div");
	description.className = "result-description";

Adding this would simplify the CSS in the mobile variant

[GuillaumeGomez]

Let's do it in another PR, this one is big enough, I prefer style changes to be put on their own.

[bors]

☔ The latest upstream changes (presumably #85560) made this pull request unmergeable. Please resolve the merge conflicts.

[GuillaumeGomez]

#85551 slightly changed the DOM generation by moving the desc class on the <span> parent so that will need to be done here too once it's merged.

[GuillaumeGomez]

Updated!

I also realized that some CSS rules weren't updated so I did and I added a test for them.

[GuillaumeGomez]

ping @jsha

[jsha]

@bors r+

We should figure out a better long-term plan for generating HTML in JS - like <template> elements. Manually generating the DOM with createElement calls like this quickly becomes unreadable.

[bors]

📌 Commit 0fae87a has been approved by jsha

[bors]

⌛ Testing commit 0fae87a with merge ff5522f...

[dns2utf8]

I like the templates idea. (Btw. the scroll-margin bug I found is now documented)

[bors]

☀️ Test successful - checks-actions
Approved by: jsha
Pushing ff5522f to master...