From d796ad4209b2c45d66a8e8b2fa8beac462c80671 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 995fd5d054d53..3686bbbda7a24 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1046,7 +1046,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 b1853eb3bd579d9126fa392ced94b05d45efc67e 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 | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 3686bbbda7a24..cd53fcb8b7c16 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. */ @@ -386,7 +387,7 @@ img { height: 100vh; top: 0; left: 0; - z-index: 100; + z-index: var(--desktop-sidebar-z-index); } .rustdoc.src .sidebar { @@ -407,7 +408,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 */ @@ -439,7 +440,6 @@ img { .sidebar-resizing .sidebar { position: fixed; - z-index: 100; } .sidebar-resizing > body { padding-left: var(--resizing-sidebar-width); @@ -1046,7 +1046,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); @@ -1561,7 +1561,7 @@ a.tooltip:hover::after { } .src #sidebar-button { left: 8px; - z-index: 101; + z-index: calc(var(--desktop-sidebar-z-index) + 1); } .hide-sidebar .src #sidebar-button { position: static;