rustdoc: remove flicker during page load #90333

jsha · 2021-10-27T01:57:28Z

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 #90246
r? @GuillaumeGomez

Demo: https://rustdoc.crud.net/jsha/flashy-searchbar/std/string/struct.String.html

rust-highfive · 2021-10-27T01:57:31Z

Some changes occurred in HTML/CSS/JS.

cc @GuillaumeGomez

src/librustdoc/html/static/css/noscript.css

jyn514 · 2021-10-27T17:26:32Z

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.

Hmm, I kind of find the grey bar helpful on mobile, where it can take multiple seconds to load the page - seeing it change lets me know that search is now working. If it were white to start, I think it would seem like the page was broken.

jsha · 2021-10-27T17:47:33Z

seeing it change lets me know that search is now working. If it were white to start, I think it would seem like the page was broken.

We should remove the disabled attribute on the search box entirely, and just ensure that (a) when you start typing, we show a "searching..." indicator so you know the page has responded, and (b) when the search JS does finally load, it takes into account anything in the search bar.

Also, to clarify the request: Are you saying that when you load a page on mobile, you are often hoping to use the search box right away? Or are you using the color search box as a proxy for "whole page is loaded, now I can start scrolling?"

jyn514 · 2021-10-27T18:28:11Z

Are you saying that when you load a page on mobile, you are often hoping to use the search box right away? Or are you using the color search box as a proxy for "whole page is loaded, now I can start scrolling?"

Neither really? I mean, above I was saying that "tapping on the search box does nothing" seems like a bug. I think ideally it would let me start to type in the box even if it didn't yet start searching.

jsha · 2021-10-28T04:27:51Z

I've updated this so the search box is not disabled; if you enter text before the JS is loaded, the JS will trigger a search once it finishes loading.

GuillaumeGomez · 2021-10-28T08:48:21Z

src/librustdoc/html/static/css/noscript.css

+
+.search-input {
+	/* The search bar and related controls don't work without JS */
+	background-color: #e6e6e6;


Normally, there isn't supposed to be color outside of the theme files. However, I don't know how we can do it in here...

GuillaumeGomez · 2021-10-28T08:49:49Z

I've updated this so the search box is not disabled; if you enter text before the JS is loaded, the JS will trigger a search once it finishes loading.

For example on a crate for embedded stuff, the search index is often quite huge but each page kinda small. So that'll mean that we enter something and nothing will happen for a few more seconds. It's not great from a user point of view...

jyn514 · 2021-10-28T09:04:15Z

@GuillaumeGomez I don't see any way around that though; some pages just take a really long time to load. I guess we could show a loading indicator or something but that makes the page feel even more cluttered IMO.

GuillaumeGomez · 2021-10-28T09:06:58Z

Well I guess it's fine then... Just need to fix the color situation on noscript CSS then.

jsha · 2021-10-30T16:01:49Z

Updated to remove the color in noscript.

GuillaumeGomez · 2021-10-30T17:39:12Z

So now, we can enter things in the input, it's just that nothing will happen... Is there a CSS way to handle such case?

jyn514 · 2021-10-30T18:52:14Z

@GuillaumeGomez I don't understand why you asked to remove the grey coloring. It looks fine in all three different themes, and AFAICT you didn't have an alternative in mind.

GuillaumeGomez · 2021-10-30T18:55:39Z

I didn't asked the background colour to be removed. Also, I'm currently complaining about the behaviour when JS is disabled.

jsha · 2021-10-30T21:56:20Z

So now, we can enter things in the input, it's just that nothing will happen... Is there a CSS way to handle such case?

Unfortunately, no. The way to prevent entering things in the input is with the HTML disabled attributes, and you can't set HTML attributes from CSS. I guess we could say search-input:focused { background-color: red } or something similar in <noscript>, but that seems awkward..

GuillaumeGomez · 2021-10-31T11:31:27Z

Can't we keep the disabled part and simply remove it at the beginning of the JS script?

Or maybe we should go with what you suggested: simply not displaying the buttons and the search input at all. That seems like the best and simplest solution. Sorry for making you go back to it...

If you go with this approach, please add a GUI test for it (you can disable js).

jsha · 2021-10-31T17:55:55Z

Can't we keep the disabled part and simply remove it at the beginning of the JS script?

@jyn514 made a good point that someone facing a slow loading page may want to start typing in the search before the JS is loaded. It's fairly easy to support that, so I added that in this PR. Going back to using the disabled attribute would prevent that use case.

Or maybe we should go with what you suggested: simply not displaying the buttons and the search input at all. That seems like the best and simplest solution.

Great, I also think this is the nicest solution. :-)

src/test/rustdoc-gui/javascript-disabled.goml

src/librustdoc/html/static/js/main.js

Also, remove the highlighting of the search bar in disabled state. This reduces flicker when loading a page.

GuillaumeGomez · 2021-10-31T19:48:23Z

r=me once CI pass. I'll open an issue for the double call on the search.

jsha · 2021-10-31T19:53:08Z

Just opened an issue :-D #90454

jsha · 2021-10-31T20:46:03Z

@bors r=GuillaumeGomez

bors · 2021-10-31T20:46:05Z

📌 Commit a4fe76f has been approved by GuillaumeGomez

…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

…askrgr Rollup of 8 pull requests Successful merges: - rust-lang#89826 (Feature gate + make must_not_suspend allow-by-default) - rust-lang#89929 (Handling submodule update failures more gracefully from x.py) - rust-lang#90333 (rustdoc: remove flicker during page load) - rust-lang#90349 (Fix rare ICE during typeck in rustdoc scrape_examples) - rust-lang#90398 (Document `doc(keyword)` unstable attribute) - rust-lang#90441 (Test that promotion follows references when looking for drop) - rust-lang#90450 (Remove `rustc_hir::hir_id::HirIdVec`) - rust-lang#90452 (Remove unnecessary `Option` from `promote_candidate` return type) Failed merges: r? `@ghost` `@rustbot` modify labels: rollup

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 27, 2021

rust-highfive assigned GuillaumeGomez Oct 27, 2021

rust-highfive added the S-waiting-on-review Status: Awaiting review from the assignee but also interested parties. label Oct 27, 2021

GuillaumeGomez reviewed Oct 27, 2021

View reviewed changes

src/librustdoc/html/static/css/noscript.css Show resolved Hide resolved

jsha changed the title ~~rustdoc: remove flicker during page log~~ rustdoc: remove flicker during page load Oct 27, 2021

GuillaumeGomez reviewed Oct 28, 2021

View reviewed changes

GuillaumeGomez reviewed Oct 31, 2021

View reviewed changes

src/test/rustdoc-gui/javascript-disabled.goml Show resolved Hide resolved

GuillaumeGomez reviewed Oct 31, 2021

View reviewed changes

src/test/rustdoc-gui/javascript-disabled.goml Outdated Show resolved Hide resolved

GuillaumeGomez reviewed Oct 31, 2021

View reviewed changes

src/librustdoc/html/static/js/main.js Show resolved Hide resolved

Hide search bar in noscript.css

a4fe76f

Also, remove the highlighting of the search bar in disabled state. This reduces flicker when loading a page.

jsha force-pushed the flashy-searchbar branch from be355c2 to a4fe76f Compare October 31, 2021 19:41

GuillaumeGomez approved these changes Oct 31, 2021

View reviewed changes

jsha removed the S-waiting-on-review Status: Awaiting review from the assignee but also interested parties. label Oct 31, 2021

bors added the S-waiting-on-bors Status: Waiting on bors to run and complete tests. Bors will change the label on completion. label Oct 31, 2021

matthiaskrgr mentioned this pull request Oct 31, 2021

Rollup of 5 pull requests #90458

Closed

matthiaskrgr mentioned this pull request Nov 1, 2021

Rollup of 8 pull requests #90463

Merged

bors merged commit bb6901d into rust-lang:master Nov 1, 2021

rustbot added this to the 1.58.0 milestone Nov 1, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

rustdoc: remove flicker during page load #90333

rustdoc: remove flicker during page load #90333

jsha commented Oct 27, 2021 •

edited

Loading

rust-highfive commented Oct 27, 2021

jyn514 commented Oct 27, 2021 •

edited

Loading

jsha commented Oct 27, 2021

jyn514 commented Oct 27, 2021

jsha commented Oct 28, 2021

GuillaumeGomez Oct 28, 2021

GuillaumeGomez commented Oct 28, 2021

jyn514 commented Oct 28, 2021

GuillaumeGomez commented Oct 28, 2021

jsha commented Oct 30, 2021

GuillaumeGomez commented Oct 30, 2021

jyn514 commented Oct 30, 2021

GuillaumeGomez commented Oct 30, 2021

jsha commented Oct 30, 2021

GuillaumeGomez commented Oct 31, 2021

jsha commented Oct 31, 2021

GuillaumeGomez commented Oct 31, 2021

jsha commented Oct 31, 2021

jsha commented Oct 31, 2021

bors commented Oct 31, 2021

rustdoc: remove flicker during page load #90333

rustdoc: remove flicker during page load #90333

Conversation

jsha commented Oct 27, 2021 • edited Loading

rust-highfive commented Oct 27, 2021

jyn514 commented Oct 27, 2021 • edited Loading

jsha commented Oct 27, 2021

jyn514 commented Oct 27, 2021

jsha commented Oct 28, 2021

GuillaumeGomez Oct 28, 2021

Choose a reason for hiding this comment

GuillaumeGomez commented Oct 28, 2021

jyn514 commented Oct 28, 2021

GuillaumeGomez commented Oct 28, 2021

jsha commented Oct 30, 2021

GuillaumeGomez commented Oct 30, 2021

jyn514 commented Oct 30, 2021

GuillaumeGomez commented Oct 30, 2021

jsha commented Oct 30, 2021

GuillaumeGomez commented Oct 31, 2021

jsha commented Oct 31, 2021

GuillaumeGomez commented Oct 31, 2021

jsha commented Oct 31, 2021

jsha commented Oct 31, 2021

bors commented Oct 31, 2021

jsha commented Oct 27, 2021 •

edited

Loading

jyn514 commented Oct 27, 2021 •

edited

Loading