Skip to content

rustdoc: search box flickers on page load #90246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
jsha opened this issue Oct 25, 2021 · 0 comments · Fixed by #90333
Closed

rustdoc: search box flickers on page load #90246

jsha opened this issue Oct 25, 2021 · 0 comments · Fixed by #90333
Labels
A-rustdoc-ui Area: Rustdoc UI (generated HTML) T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue.

Comments

@jsha
Copy link
Contributor

jsha commented Oct 25, 2021

Steps to reproduce:

  1. Visit, e.g. https://doc.rust-lang.org/std/string/trait.ToString.html
  2. Open Chrome Developer Tools
  3. Click the Sources tab, then main1.56.0.js.
  4. Click the first line of main1.56.0.js to set a breakpoint.
  5. Reload.
  6. Notice that the search box is grey, but it will later become white.

flicker-on-load

The search box has for a long time been disabled on page load, until the JS runs. It being grey is a side effect of #85367. Before that, our search-focus:disabled style wasn't getting applied. After that, it is. As a quick fix I think we should remove the grey styling on the disabled search bar. I know this means that no-JS users won't have as good a visual indication that the search bar is disabled. Perhaps we should address this by having styles inside a <noscript> tag that hide the search bar entirely.

It's good to minimize the number of changes that happen during page load - this reduces visual distractions and help page loads feel fast.
@jsha jsha added T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue. A-rustdoc-ui Area: Rustdoc UI (generated HTML) labels Oct 25, 2021
@jsha jsha changed the title Search box and Rust logo flicker on page load rustdoc: search box flickers on page load Oct 27, 2021
@jsha jsha mentioned this issue Oct 27, 2021
Merged
matthiaskrgr added a commit to matthiaskrgr/rust that referenced this issue Oct 31, 2021
@matthiaskrgr
Rollup merge of rust-lang#90333 - jsha:flashy-searchbar, r=GuillaumeG…
bdbad5f 
…omez

rustdoc: remove flicker during page load

The search bar has a `:disabled` style that makes it grey, which creates a distracting flicker from grey to white when the page finishes loading. The search bar should stay the same color throughout page load.

A blank white search bar might create an incorrect impression for users with JS turned off. Since they can't use the search functionality, I've hidden the search bar in noscript.css.

Fixes rust-lang#90246
r? `@GuillaumeGomez`

Demo: https://rustdoc.crud.net/jsha/flashy-searchbar/std/string/struct.String.html
@bors bors closed this as completed in bb6901d Nov 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-rustdoc-ui Area: Rustdoc UI (generated HTML) T-rustdoc Relevant to the rustdoc team, which will review and decide on the PR/issue.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

rustdoc: remove flicker during page load jsha/rust
1 participant
@jsha