From dd0f5882d969fd17ab0152b9bc7b957bc78e6004 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Fri, 30 Dec 2022 11:58:58 -0700 Subject: [PATCH 1/2] rustdoc: use the regular arrow indicator for dir-entry CSS This mostly reverts 468acca108e65101b802821bded17149dc1d86c9, while still fixing the problem it fixed by using an internal list-style-position. It results in a slight change in the hover indicator, but nothing misleading. --- src/librustdoc/html/static/css/rustdoc.css | 25 ++-------------------- 1 file changed, 2 insertions(+), 23 deletions(-) diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 9fe0dee058830..4ca826bf9e68b 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -1391,31 +1391,10 @@ details.dir-entry { padding-left: 4px; } -details.dir-entry > summary::after { - content: " ►"; - position: absolute; - left: -15px; - top: 0px; - font-size: 80%; - padding: 2px 0px; - /* set width to cover gap between arrow and text */ - width: 25px; -} - -details[open].dir-entry > summary::after { - content: " ▼"; -} - -details.dir-entry > summary::-webkit-details-marker, -details.dir-entry > summary::marker { - display: none; -} - details.dir-entry > summary { - margin: 0 0 0 13px; - list-style: none; + margin: 0 0 0 -4px; + padding: 0 0 0 4px; cursor: pointer; - position: relative; } details.dir-entry div.folders, details.dir-entry div.files { From 399fe5d0cd93f7b78e6464111546788c43ba1f61 Mon Sep 17 00:00:00 2001 From: Michael Howell Date: Sat, 31 Dec 2022 11:23:30 -0700 Subject: [PATCH 2/2] rustdoc: add test case for dir entry summary position --- src/test/rustdoc-gui/source-code-page.goml | 89 +++++++++++++++++++++- 1 file changed, 85 insertions(+), 4 deletions(-) diff --git a/src/test/rustdoc-gui/source-code-page.goml b/src/test/rustdoc-gui/source-code-page.goml index 8a33e71319129..aa79219696020 100644 --- a/src/test/rustdoc-gui/source-code-page.goml +++ b/src/test/rustdoc-gui/source-code-page.goml @@ -111,8 +111,57 @@ assert-property: ("#source-sidebar details:first-of-type", {"open": "true"}) click: "#source-sidebar details:first-of-type > summary" assert-property: ("#source-sidebar details:first-of-type", {"open": "false"}) -// Check the spacing. -assert-css: ("#source-sidebar > details.dir-entry", {"padding-left": "4px"}) +// And open it again, since it'll be the reference we use to check positions. +click: "#source-sidebar details:first-of-type > summary" +assert-property: ("#source-sidebar details:first-of-type", {"open": "true"}) + +// Check the sidebar directory entries have a marker and spacing (desktop). +store-property: ( + link_height, + "#source-sidebar > details:first-of-type.dir-entry[open] > .files > a", + "offsetHeight" +) +define-function: ( + "check-sidebar-dir-entry", + (x, y), + [ + ("assert", "details:first-of-type.dir-entry[open] > summary::marker"), + ("assert-css", ("#source-sidebar > details:first-of-type.dir-entry", {"padding-left": "4px"})), + // This check ensures that the summary is only one line. + ("assert-property", ( + "#source-sidebar > details:first-of-type.dir-entry[open] > summary", + {"offsetHeight": |link_height|} + )), + ("assert-position", ( + "#source-sidebar > details:first-of-type.dir-entry[open] > summary", + {"x": |x|, "y": |y|} + )), + ("assert-property", ( + "#source-sidebar > details:first-of-type.dir-entry[open] > .files > a", + {"offsetHeight": |link_height|} + )), + ("assert-position", ( + "#source-sidebar > details:first-of-type.dir-entry[open] > .files > a", + // left margin + {"x": |x| + 27, "y": |y| + |link_height|} + )), + ] +) +store-property: ( + source_sidebar_title_height, + "#source-sidebar > .title", + "offsetHeight" +) +store-property: ( + source_sidebar_title_y, + "#source-sidebar > .title", + "offsetTop" +) +call-function: ("check-sidebar-dir-entry", { + "x": 0, + // border + margin = 6 + "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6, +}) // Check the search form assert-css: ("nav.sub", {"flex-direction": "row"}) @@ -125,13 +174,45 @@ assert-property: ("nav.sub form", {"offsetTop": 28, "offsetHeight": 34}) assert-property: ("#main-content", {"offsetTop": 90}) // 28 = 90 - 34 - 28 -// Now do the same check on moderately-sized mobile. +// Now do the same check on moderately-sized, tablet mobile. size: (700, 700) assert-css: ("nav.sub", {"flex-direction": "row"}) assert-property: ("nav.sub form", {"offsetTop": 21, "offsetHeight": 34}) assert-property: ("#main-content", {"offsetTop": 76}) // 21 = 76 - 34 - 21 -// Tiny mobile gets a different display where the logo is stacked on top. +// Check the sidebar directory entries have a marker and spacing (tablet). +store-property: ( + source_sidebar_title_height, + "#source-sidebar > .title", + "offsetHeight" +) +store-property: ( + source_sidebar_title_y, + "#source-sidebar > .title", + "offsetTop" +) +call-function: ("check-sidebar-dir-entry", { + "x": 0, + "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6, +}) + +// Tiny, phone mobile gets a different display where the logo is stacked on top. size: (450, 700) assert-css: ("nav.sub", {"flex-direction": "column"}) + +// Check the sidebar directory entries have a marker and spacing (phone). +store-property: ( + source_sidebar_title_height, + "#source-sidebar > .title", + "offsetHeight" +) +store-property: ( + source_sidebar_title_y, + "#source-sidebar > .title", + "offsetTop" +) +call-function: ("check-sidebar-dir-entry", { + "x": 0, + "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6, +})