From eeb59f16a5f40e14dc29b95155b7f2569329e3ec Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Sat, 4 May 2024 22:31:30 -0700
Subject: [PATCH] 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.
---
src/librustdoc/html/static/js/storage.js | 43 +++++++++++++++++++
src/librustdoc/html/templates/page.html | 27 ++----------
tests/rustdoc-gui/javascript-disabled.goml | 2 +-
.../sidebar-source-code-display.goml | 2 +-
4 files changed, 48 insertions(+), 26 deletions(-)
diff --git a/src/librustdoc/html/static/js/storage.js b/src/librustdoc/html/static/js/storage.js
index 73c543567c0..4a27ca92fff 100644
--- a/src/librustdoc/html/static/js/storage.js
+++ b/src/librustdoc/html/static/js/storage.js
@@ -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);
diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html
index 1e01cd70b96..cdf01fa7a97 100644
--- a/src/librustdoc/html/templates/page.html
+++ b/src/librustdoc/html/templates/page.html
@@ -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> {# #}
diff --git a/tests/rustdoc-gui/javascript-disabled.goml b/tests/rustdoc-gui/javascript-disabled.goml
index a7579ef7ec1..c6a7ad94b3f 100644
--- a/tests/rustdoc-gui/javascript-disabled.goml
+++ b/tests/rustdoc-gui/javascript-disabled.goml
@@ -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.
diff --git a/tests/rustdoc-gui/sidebar-source-code-display.goml b/tests/rustdoc-gui/sidebar-source-code-display.goml
index 3bfbe820b8d..7ce3be8a5b3 100644
--- a/tests/rustdoc-gui/sidebar-source-code-display.goml
+++ b/tests/rustdoc-gui/sidebar-source-code-display.goml
@@ -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