add new panel to rustdoc search that shows up when the search bar is focused

[lolbinarycat]

fixes #129537

[rustbot]

Thanks for the pull request, and welcome! The Rust team is excited to review your changes, and you should hear from @GuillaumeGomez (or someone else) some time within the next two weeks.

Please see the contribution instructions for more information. Namely, in order to ensure the minimum review times lag, PR authors and assigned reviewers should ensure that the review label (S-waiting-on-review and S-waiting-on-author) stays updated, invoking these commands when appropriate:

• @rustbot author: the review is finished, PR author should check the comments and take action accordingly
• @rustbot review: the author is ready for a review, this PR will be queued again in the reviewer's queue

[rustbot]

Some changes occurred in HTML/CSS/JS.

cc @GuillaumeGomez, @jsha

[lolbinarycat]

this list should be prerendered instead of being created dynamically

[GuillaumeGomez]

Please add screenshot/video to show the feature in action.

[lolbinarycat]

here's the current look, it's still unfinished, thus this being marked as draft. I'm hoping to get feedback on the css to see if there's a better way to do this (mainly, removing the margin between the popup and the search bar, and also making the popup wider, as i plan on adding more there in the future.)

[lolbinarycat]

cc @notriddle for suggesting this presentation of the dropdown

[notriddle]

I'm just throwing out suggestions, but could we avoid having nested popups?

When you pick the "search box" in GitHub, you get the list of searchable areas immediately.

Screencast.from.2024-08-30.11-48-07.mp4

[rust-log-analyzer]

The job x86_64-gnu-tools failed! Check out the build log: (web) (plain)

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

......FFF  (129/129)


/checkout/tests/rustdoc-gui/search-filter.goml search-filter... FAILED
[ERROR] `tests/rustdoc-gui/search-filter.goml` line 55: The following errors happened (for selector `#crate-search`): [expected `lib2` for property `"value"`, found `all crates`]: for command `assert-property: ("#crate-search", {"value": "lib2"})`
[ERROR] `tests/rustdoc-gui/search-filter.goml` line 59: The following errors happened: [`Results` doesn't start with `Results in all crates` (for STARTS_WITH check)]: for command `assert-text: (".search-results-title", "Results in all crates", STARTS_WITH)`
[ERROR] `tests/rustdoc-gui/search-filter.goml` line 85: Error: The following CSS properties still don't match: [expected `#fff` for key `color`, found `#c5c5c5`]: for command `wait-for-css: ("#crate-search", {
    "border": "1px solid #5c6773",
    "color": "#fff",
    "background-color": "#0f1419",

/checkout/tests/rustdoc-gui/search-result-display.goml search-result-display... FAILED
/checkout/tests/rustdoc-gui/search-result-display.goml search-result-display... FAILED
[WARNING] `tests/rustdoc-gui/search-result-display.goml` line 37: Delta is 0 for "x", maybe try to use `compare-elements-position` instead?

[ERROR] `tests/rustdoc-gui/search-result-display.goml` line 53: The following errors happened (for selector `#crate-search`): [expected `223px` for key `width`, found `auto`]: for command `assert-css: ("#crate-search", {"width": "223px"})`
[ERROR] `tests/rustdoc-gui/search-result-display.goml` line 54: The following errors happened (for selector `.search-results-title`): [expected `50px` for key `height`, found `42px`]: for command `assert-css: (".search-results-title", {"height": "50px", "width": "640px"})`
[ERROR] `tests/rustdoc-gui/search-result-display.goml` line 64: The following errors happened: [expected a width of `527`, found `0`]: for command `assert-size: ("#crate-search", {"width": 527})`
[ERROR] `tests/rustdoc-gui/search-result-display.goml` line 65: The following errors happened: [expected a height of `50`, found `42`]: for command `assert-size: (".search-results-title", {"height": 50, "width": 640})`
[ERROR] `tests/rustdoc-gui/search-result-display.goml` line 78
    from `tests/rustdoc-gui/search-result-display.goml` line 86: The following errors happened (for selector `#crate-search-div`): [expected `invert(0.41) sepia(0.12) saturate(4.87) hue-rotate(171deg) brightness(0.94) contrast(0.94)` for key `filter`, found `none`]: for command `assert-css: ("#crate-search-div::after", {"filter": |filter|})`
[ERROR] `tests/rustdoc-gui/search-result-display.goml` line 78
    from `tests/rustdoc-gui/search-result-display.goml` line 93: The following errors happened (for selector `#crate-search-div`): [expected `invert(0.94) sepia(0) saturate(7.21) hue-rotate(255deg) brightness(0.9) contrast(0.9)` for key `filter`, found `none`]: for command `assert-css: ("#crate-search-div::after", {"filter": |filter|})`
[ERROR] `tests/rustdoc-gui/search-result-display.goml` line 78
    from `tests/rustdoc-gui/search-result-display.goml` line 100: The following errors happened (for selector `#crate-search-div`): [expected `invert(1) sepia(0) saturate(42.23) hue-rotate(289deg) brightness(1.14) contrast(0.76)` for key `filter`, found `none`]: for command `assert-css: ("#crate-search-div::after", {"filter": |filter|})`
/checkout/tests/rustdoc-gui/source-code-page.goml source-code-page... FAILED
/checkout/tests/rustdoc-gui/source-code-page.goml source-code-page... FAILED
[ERROR] `tests/rustdoc-gui/source-code-page.goml` line 166: The following errors happened (for selector `nav.sub form`): [expected `15` for property `"offsetTop"`, found `0`]: for command `assert-property: ("nav.sub form", {"offsetTop": 15, "offsetHeight": 34})`
Error: ()
Build completed unsuccessfully in 0:03:27
  local time: Fri Aug 30 19:38:33 UTC 2024
  network time: Fri, 30 Aug 2024 19:38:33 GMT

[lolbinarycat]

@notriddle wdym "nested popups"? do you mean the search results should show up in the same contextual panel?

it's also worth noting that on github, if you press enter on the search bar, you'll get taken to a page more like our current search results, replacing the body of the previous page

[notriddle]

1. Clicking the search box causes #search-focus-panel to appear. This is a popover: it overlaps other parts of the page, and it goes away when you click anywhere outside the search box or itself.
2. Clicking the <select> in the #search-focus-panel brings up the second level of popover, which happens to be implemented by the browser itself.

do you mean the search results should show up in the same contextual panel?

I think nested popovers are bad and should be avoided. There's strange ambiguities around closing the popovers (will pressing Escape close both, or just one? how about clicking outside the popovers?) and it requires multiple steps of clicking.

[lolbinarycat]

@notriddle i understand now, but i'm confused, because this system is based off of your comment, was there something else you had in mind?

also, i'm not entirely convinced nested popovers are that bad, since they seem to be the basis for the classic toolbar pattern.

[lolbinarycat]

if you think you can come up with a design that solves the clutter issue better than this, let me know. i did open this PR to get feedback, after all.

[notriddle]

I was picturing something like this:

[bors]

☔ The latest upstream changes (presumably #129809) made this pull request unmergeable. Please resolve the merge conflicts.

[lolbinarycat]

@notriddle that certainly looks nicer for the case where there are few crates, but does it scale? notably, the html <select> element has built-in functionality that allows you to focus an element by typing the first few letters of its name.

I wonder if we should perhaps add a syntax for filtering by crates? like crate:std Vec?

[notriddle]

The crate: filter sounds helpful.

[lolbinarycat]

@notriddle another alternative would be switching to checkboxes to allow searching multiple (but not all) crates. it's unclear how useful this would be, though.