rustdoc: dedup search form HTML

This change constructs the search form HTML using JavaScript, instead of plain HTML. It uses a custom element because

- the [parser]'s insert algorithm runs the connected callback synchronously, so we won't get layout jank
- it requires very little HTML, so it's a real win in size

[parser]: https://html.spec.whatwg.org/multipage/parsing.html#create-an-element-for-the-token

This shrinks the standard library by about 60MiB, by my test.
This commit is contained in:
Michael Howell 2024-05-04 22:31:30 -07:00
parent 06e88c306a
commit eeb59f16a5
4 changed files with 48 additions and 26 deletions

View File

@ -239,3 +239,46 @@ window.addEventListener("pageshow", ev => {
setTimeout(updateSidebarWidth, 0);
}
});
// Custom elements are used to insert some JS-dependent features into Rustdoc,
// because the [parser] runs the connected callback
// synchronously. It needs to be added synchronously so that nothing below it
// becomes visible until after it's done. Otherwise, you get layout jank.
//
// That's also why this is in storage.js and not main.js.
//
// [parser]: https://html.spec.whatwg.org/multipage/parsing.html
class RustdocSearchElement extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
const rootPath = getVar("root-path");
const currentCrate = getVar("current-crate");
this.innerHTML = `<nav class="sub">
<form class="search-form">
<span></span> <!-- This empty span is a hacky fix for Safari - See #93184 -->
<div id="sidebar-button" tabindex="-1">
<a href="${rootPath}${currentCrate}/all.html" title="show sidebar"></a>
</div>
<input
class="search-input"
name="search"
aria-label="Run search in the documentation"
autocomplete="off"
spellcheck="false"
placeholder="Type S or / to search, ? for more options…"
type="search">
<div id="help-button" tabindex="-1">
<a href="${rootPath}help.html" title="help">?</a>
</div>
<div id="settings-menu" tabindex="-1">
<a href="${rootPath}settings.html" title="settings">
Settings
</a>
</div>
</form>
</nav>`;
}
}
window.customElements.define("rustdoc-search", RustdocSearchElement);

View File

@ -117,30 +117,9 @@
<div class="sidebar-resizer"></div> {# #}
<main> {# #}
{% if page.css_class != "src" %}<div class="width-limiter">{% endif %}
<nav class="sub"> {# #}
<form class="search-form"> {# #}
<span></span> {# This empty span is a hacky fix for Safari - See #93184 #}
<div id="sidebar-button" tabindex="-1"> {# #}
<a href="{{page.root_path|safe}}{{layout.krate|safe}}/all.html" title="show sidebar"></a> {# #}
</div> {# #}
<input {#+ #}
class="search-input" {#+ #}
name="search" {#+ #}
aria-label="Run search in the documentation" {#+ #}
autocomplete="off" {#+ #}
spellcheck="false" {#+ #}
placeholder="Type S or / to search, ? for more options…" {#+ #}
type="search"> {# #}
<div id="help-button" tabindex="-1"> {# #}
<a href="{{page.root_path|safe}}help.html" title="help">?</a> {# #}
</div> {# #}
<div id="settings-menu" tabindex="-1"> {# #}
<a href="{{page.root_path|safe}}settings.html" title="settings"> {# #}
Settings {# #}
</a> {# #}
</div> {# #}
</form> {# #}
</nav> {# #}
{# defined in storage.js to avoid duplicating complex UI across every page #}
{# and because the search form only works if JS is enabled anyway #}
<rustdoc-search></rustdoc-search> {# #}
<section id="main-content" class="content">{{ content|safe }}</section> {# #}
{% if page.css_class != "src" %}</div>{% endif %}
</main> {# #}

View File

@ -4,7 +4,7 @@ javascript: false
go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
show-text: true
assert-css: (".sub", {"display": "none"})
assert-false: ".sub"
// Even though JS is disabled, we should still have themes applied. Links are never black-colored
// if styles are applied so we check that they are not.

View File

@ -4,7 +4,7 @@ javascript: false
go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
// Since the javascript is disabled, there shouldn't be a toggle.
wait-for-css: (".sidebar", {"display": "none"})
assert-css: ("#sidebar-button", {"display": "none"})
assert-false: "#sidebar-button"
// Let's retry with javascript enabled.
javascript: true