rustdoc: use a button instead of a bar for search

[notriddle]

r? @GuillaumeGomez

CC @lolbinarycat @liigo

This is an attempt to address three complaints:

1. The header area takes up a lot of vertical space, and is generally quite "heavy" feeling.

   Fixes [rustdoc] issues of the three-big-buttons #132386

2. Back and forward are kind of wacky, because there's no "single source of truth" for whether the search mode is open or not. Can't find an issue, but here's a screen recording where I reproduce it.

   screen-record-history-bug.mp4

3. You can't see the crate picker list, or anything else that we might want to show you, until after you've already typed your search term. [rustdoc search] allow setting crates to search in before showing results #129537 (also notice the example searches, which exist in Hoogle and this tweak adds)

Preview page: https://notriddle.com/rustdoc-html-demo-15/search-button/std/index.html

Video:

screen-record.mp4

Screenshot:

[lolbinarycat]

My immediate concern is how this will look on mobile, expecially with long crate names.

the status quo is already pretty bad.

[GuillaumeGomez]

I'm not too sure what to think about it. Turning the search input into a button (to make the search input appear) makes it more tricky to access the search feature.

Also, on mobile it's really not great as the space available is very little.

However I like a few things from this PR:

1. When we focus on the search focus, we enter the "search page" which allows to give more information to the users.
   • However, on mobile we need a button to leave this "search page"
2. I like the new layout of the search with the crates filter dropdown above the search input

[rust-log-analyzer]

The job mingw-check failed! Check out the build log: (web) (plain)

Click to see the possible cause of the failure (guessed by this bot)

info: ES-Check: there were no ES version matching errors!  🎉
+ eslint -c ../src/librustdoc/html/static/.eslintrc.js ../src/librustdoc/html/static/js/externs.js ../src/librustdoc/html/static/js/main.js ../src/librustdoc/html/static/js/scrape-examples.js ../src/librustdoc/html/static/js/search.js ../src/librustdoc/html/static/js/settings.js ../src/librustdoc/html/static/js/src-script.js ../src/librustdoc/html/static/js/storage.js

/checkout/src/librustdoc/html/static/js/search.js
  4459:25  error  'getVar' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)
  local time: Thu Nov 21 16:20:43 UTC 2024
  network time: Thu, 21 Nov 2024 16:20:43 GMT
##[error]Process completed with exit code 1.
Post job cleanup.