From 53637cdd8ed0a2255170f602b348e02211ba9387 Mon Sep 17 00:00:00 2001 From: Lukas Markeffsky <@> Date: Sun, 31 Dec 2023 20:31:06 +0100 Subject: [PATCH 1/2] rustdoc ui: adjust tooltip z-index to be above sidebar --- src/librustdoc/html/static/css/rustdoc.css | 2 +- tests/rustdoc-gui/tooltip-over-sidebar.goml | 12 ++++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 tests/rustdoc-gui/tooltip-over-sidebar.goml diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 6e673aa77c5c8..76e9f534581c1 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1059,7 +1059,7 @@ so that we can apply CSS-filters to change the arrow color in themes */ position: absolute; top: 100%; right: 0; - z-index: 2; + z-index: 101; margin-top: 7px; border-radius: 3px; border: 1px solid var(--border-color); diff --git a/tests/rustdoc-gui/tooltip-over-sidebar.goml b/tests/rustdoc-gui/tooltip-over-sidebar.goml new file mode 100644 index 0000000000000..71bf69787317b --- /dev/null +++ b/tests/rustdoc-gui/tooltip-over-sidebar.goml @@ -0,0 +1,12 @@ +// Check that the doctest info tooltips are above the sidebar. +go-to: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html" +move-cursor-to: ".example-wrap.ignore .tooltip" +wait-for: ".tooltip.popover" + +// Move cursor to top left corner of the tooltip and check that it doesn't fade. +move-cursor-to: ".tooltip.popover" +wait-for: 100 +assert: ".tooltip.popover:not(.fade-out)" + +move-cursor-to: (0, 0) +wait-for: ".tooltip.popover.fade-out" From c4c4ff67fae06d17f85a84c1b2fb81863d5296aa Mon Sep 17 00:00:00 2001 From: Lukas Markeffsky <@> Date: Sun, 31 Dec 2023 22:25:46 +0100 Subject: [PATCH 2/2] use css variable for z-index of the sidebar and calculate the z-indices of things that go over the sidebar --- src/librustdoc/html/static/css/rustdoc.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 76e9f534581c1..c4e97ded1a058 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -14,6 +14,7 @@ and on the RUSTDOC_MOBILE_BREAKPOINT */ --desktop-sidebar-width: 200px; --src-sidebar-width: 300px; + --desktop-sidebar-z-index: 100; } /* See FiraSans-LICENSE.txt for the Fira Sans license. */ @@ -396,7 +397,7 @@ img { height: 100vh; top: 0; left: 0; - z-index: 100; + z-index: var(--desktop-sidebar-z-index); } .rustdoc.src .sidebar { @@ -416,7 +417,7 @@ img { touch-action: none; width: 9px; cursor: col-resize; - z-index: 200; + z-index: calc(var(--desktop-sidebar-z-index) + 1); position: fixed; height: 100%; /* make sure there's a 1px gap between the scrollbar and resize handle */ @@ -448,7 +449,6 @@ img { .sidebar-resizing .sidebar { position: fixed; - z-index: 100; } .sidebar-resizing > body { padding-left: var(--resizing-sidebar-width); @@ -1059,7 +1059,7 @@ so that we can apply CSS-filters to change the arrow color in themes */ position: absolute; top: 100%; right: 0; - z-index: 101; + z-index: calc(var(--desktop-sidebar-z-index) + 1); margin-top: 7px; border-radius: 3px; border: 1px solid var(--border-color);