From eeb59f16a5f40e14dc29b95155b7f2569329e3ec Mon Sep 17 00:00:00 2001 From: Michael Howell 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 = ``; + } +} +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 @@
{# #}
{# #} {% if page.css_class != "src" %}
{% endif %} - {# #} + {# defined in storage.js to avoid duplicating complex UI across every page #} + {# and because the search form only works if JS is enabled anyway #} + {# #}
{{ content|safe }}
{# #} {% if page.css_class != "src" %}
{% endif %}
{# #} 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