From b615c0c85469c94041a5e68b9d8b68dcf799f9f1 Mon Sep 17 00:00:00 2001 From: Jacob Hoffman-Andrews Date: Sun, 9 May 2021 12:56:21 -0700 Subject: rustdoc: use focus for search navigation Rather than keeping track of highlighted element inside the JS, take advantage of `.focus()` and the :focus CSS pseudo-class. This required wrapping each row of results in one big tag (because anchors can be focused, but table rows cannot). That in turn required moving from a table layout to a div layout with float. This makes it so Ctrl+Enter opens links in new tabs, and using the arrow keys to navigate off the bottom of the page scrolls the rest of the page into view. It also simplifies the keyboard event handling. It eliminates the need for click handlers on the search results, and for tracking mouse movements. This changes the UI treatment of mouse hovering. A hovered element now gets a light grey background, but does not change the focused element. It's possible to have two highlighted search results: one that is focused (via keyboard) and one that is hovered (via mouse). Pressing enter will activate the focused link; clicking will activate the hovered link. This matches up with how Firefox and Chrome handle suggestions in their URL bar, and avoids stray mouse movements changing the focus. Selecting tabs is now done with left/right arrows while any search result is focused. The visibility of results on each search tab is controlled with the "active" class, rather than by setting display: none directly. Note that the old code kept track of highlighted search element when tabbing back and forth. The new code doesn't. --- src/librustdoc/html/static/rustdoc.css | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) (limited to 'src/librustdoc/html/static/rustdoc.css') diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index 1b7eff4604f..b03e657dce0 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -144,7 +144,7 @@ h4.type.trait-impl, h4.associatedconstant.trait-impl, h4.associatedtype.trait-im } h1, h2, h3, h4, -.sidebar, a.source, .search-input, .content table td:first-child > a, +.sidebar, a.source, .search-input, .search-results .result-name, div.item-list .out-of-band, #source-sidebar, #sidebar-toggle, details.rustdoc-toggle > summary::before, @@ -748,6 +748,15 @@ a { outline: 0; } +.search-results { + display: none; + padding-bottom: 2em; +} + +.search-results.active { + display: block; +} + .search-results .desc { white-space: nowrap; text-overflow: ellipsis; @@ -756,22 +765,14 @@ a { } .search-results a { + /* A little margin ensures the browser's outlining of focused links has room to display. */ + margin-left: 2px; + margin-right: 2px; display: block; } -.content .search-results td:first-child { - padding-right: 0; +.result-name { width: 50%; -} -.content .search-results td:first-child a { - padding-right: 10px; -} -.content .search-results td:first-child a:after { - clear: both; - content: ""; - display: block; -} -.content .search-results td:first-child a span { float: left; } @@ -1134,6 +1135,11 @@ pre.rust { .search-failed { text-align: center; margin-top: 20px; + display: none; +} + +.search-failed.active { + display: block; } .search-failed > ul { -- cgit 1.4.1-3-g733a5 From 5d004c1e2020eaa9bc336f09b6b0475c0eef4d78 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Mon, 17 May 2021 13:26:58 +0200 Subject: Improve display for "copy-path" button, making it more discrete --- src/librustdoc/html/static/rustdoc.css | 5 ++--- src/librustdoc/html/static/themes/ayu.css | 17 +++++++++++++---- src/librustdoc/html/static/themes/dark.css | 15 ++++++++++++--- src/librustdoc/html/static/themes/light.css | 15 ++++++++++++--- 4 files changed, 39 insertions(+), 13 deletions(-) (limited to 'src/librustdoc/html/static/rustdoc.css') diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css index e2e1aefa4a8..f11ca52dab1 100644 --- a/src/librustdoc/html/static/rustdoc.css +++ b/src/librustdoc/html/static/rustdoc.css @@ -1262,12 +1262,11 @@ h4 > .notable-traits { } #copy-path { + background: initial; margin-left: 10px; padding: 0; padding-left: 2px; -} -#copy-path> img { - margin-bottom: 2px; + border: 0; } #theme-choices { diff --git a/src/librustdoc/html/static/themes/ayu.css b/src/librustdoc/html/static/themes/ayu.css index 13d1a475e4b..6651260c28f 100644 --- a/src/librustdoc/html/static/themes/ayu.css +++ b/src/librustdoc/html/static/themes/ayu.css @@ -502,20 +502,29 @@ kbd { box-shadow-color: #c6cbd1; } -#theme-picker, #settings-menu, #help-button, #copy-path { +#theme-picker, #settings-menu, #help-button { border-color: #5c6773; background-color: #0f1419; color: #fff; } -#theme-picker > img, #settings-menu > img, #copy-path > img { +#theme-picker > img, #settings-menu > img { filter: invert(100); } +#copy-path { + color: #fff; +} +#copy-path > img { + filter: invert(70%); +} +#copy-path:hover > img { + filter: invert(100%); +} + #theme-picker:hover, #theme-picker:focus, #settings-menu:hover, #settings-menu:focus, -#help-button:hover, #help-button:focus, -#copy-path:hover, #copy-path:focus { +#help-button:hover, #help-button:focus { border-color: #e0e0e0; } diff --git a/src/librustdoc/html/static/themes/dark.css b/src/librustdoc/html/static/themes/dark.css index 945ca9b252e..548306d99eb 100644 --- a/src/librustdoc/html/static/themes/dark.css +++ b/src/librustdoc/html/static/themes/dark.css @@ -392,7 +392,7 @@ kbd { box-shadow-color: #c6cbd1; } -#theme-picker, #settings-menu, #help-button, #copy-path { +#theme-picker, #settings-menu, #help-button { border-color: #e0e0e0; background: #f0f0f0; color: #000; @@ -400,11 +400,20 @@ kbd { #theme-picker:hover, #theme-picker:focus, #settings-menu:hover, #settings-menu:focus, -#help-button:hover, #help-button:focus, -#copy-path:hover, #copy-path:focus { +#help-button:hover, #help-button:focus { border-color: #ffb900; } +#copy-path { + color: #999; +} +#copy-path > img { + filter: invert(50%); +} +#copy-path:hover > img { + filter: invert(65%); +} + #theme-choices { border-color: #e0e0e0; background-color: #353535; diff --git a/src/librustdoc/html/static/themes/light.css b/src/librustdoc/html/static/themes/light.css index 2ed638bdd4f..76e880256fd 100644 --- a/src/librustdoc/html/static/themes/light.css +++ b/src/librustdoc/html/static/themes/light.css @@ -384,18 +384,27 @@ kbd { box-shadow-color: #c6cbd1; } -#theme-picker, #settings-menu, #help-button, #copy-path { +#theme-picker, #settings-menu, #help-button { border-color: #e0e0e0; background-color: #fff; } #theme-picker:hover, #theme-picker:focus, #settings-menu:hover, #settings-menu:focus, -#help-button:hover, #help-button:focus, -#copy-path:hover, #copy-path:focus { +#help-button:hover, #help-button:focus { border-color: #717171; } +#copy-path { + color: #999; +} +#copy-path > img { + filter: invert(50%); +} +#copy-path:hover > img { + filter: invert(35%); +} + #theme-choices { border-color: #ccc; background-color: #fff; -- cgit 1.4.1-3-g733a5