Add back the column

Author: notriddle

src/librustdoc/html/static/css/noscript.css

@@ -11,7 +11,7 @@ rules.
 
 #copy-path, #sidebar-button, .sidebar-resizer {
 	/* It requires JS to work so no need to display it in this case. */
-	display: none;
+	display: none !important;
 }
 
 nav.sub {

src/librustdoc/html/static/css/rustdoc.css

@@ -391,6 +391,7 @@ img {
 
 .rustdoc.src .sidebar {
 	flex-basis: 50px;
+	width: 50px;
 	border-right: 1px solid;
 	overflow-x: hidden;
 	/* The sidebar is by default hidden  */
@@ -414,14 +415,14 @@ img {
 }
 
 .rustdoc.src .sidebar-resizer {
-	/* src pages have separate closed flag */
-	display: none;
+	/* when closed, place resizer glow on top of the normal src sidebar border (no need to
+	worry about sidebar) */
+	left: 49px;
 }
 
 .src-sidebar-expanded .src .sidebar-resizer {
 	/* for src sidebar, gap is already provided by 1px border on sidebar itself, so place resizer
 	   to right of it */
-	display: block;
 	left: var(--src-sidebar-width);
 }
 
@@ -437,7 +438,7 @@ img {
 }
 
 .sidebar-resizing .sidebar {
-	position: fixed !important;
+	position: fixed;
 	z-index: 100;
 }
 .sidebar-resizing > body {
@@ -491,21 +492,20 @@ img {
 	background-color: var(--sidebar-background-color);
 }
 
-.src .sidebar {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: -1000px;
+.src .sidebar > * {
+	visibility: hidden;
 }
 
 .src-sidebar-expanded .src .sidebar {
-	position: sticky;
-	left: 0;
 	overflow-y: auto;
 	flex-basis: var(--src-sidebar-width);
 	width: var(--src-sidebar-width);
 }
 
+.src-sidebar-expanded .src .sidebar > * {
+	visibility: visible;
+}
+
 #all-types {
 	margin-top: 1em;
 }
@@ -1561,15 +1561,9 @@ a.tooltip:hover::after {
 	z-index: 1;
 }
 .src #sidebar-button {
-	left: 12px;
+	left: 8px;
 	z-index: 101;
 }
-.src .search-form {
-	margin-left: 40px;
-}
-.src-sidebar-expanded .src .search-form {
-	margin-left: 0;
-}
 #settings-menu > a, #help-button > a, #sidebar-button > a {
 	display: flex;
 	align-items: center;
@@ -1879,6 +1873,9 @@ in src-script.js and main.js
 		height: 100vh;
 		border: 0;
 	}
+	.src .search-form {
+		margin-left: 40px;
+	}
 
 	.sidebar.shown,
 	.src-sidebar-expanded .src .sidebar,

tests/rustdoc-gui/huge-logo.goml

@@ -11,13 +11,3 @@ set-window-size: (400, 600)
 // offset = size + margin
 assert-property: (".mobile-topbar .logo-container", {"offsetWidth": "55", "offsetHeight": 45})
 assert-property: (".mobile-topbar .logo-container img", {"offsetWidth": "35", "offsetHeight": 35})
-
-go-to: "file://" + |DOC_PATH| + "/src/huge_logo/lib.rs.html"
-
-set-window-size: (1280, 1024)
-assert-property: (".sub-logo-container", {"offsetWidth": "60", "offsetHeight": 60})
-
-set-window-size: (400, 600)
-// 43 because 35px + 8px of margin
-assert-css: (".sub-logo-container > img", {"margin-bottom": "8px"})
-assert-property: (".sub-logo-container", {"offsetWidth": "35", "offsetHeight": 43})

tests/rustdoc-gui/rust-logo.goml

@@ -11,12 +11,6 @@ define-function: (
         set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
         reload:
         assert-css: (".rust-logo", {"filter": |filter|})
-        // Going to the source code page.
-        go-to: "file://" + |DOC_PATH| + "/src/staged_api/lib.rs.html"
-        // Changing theme (since it's local files, the local storage works by folder).
-        set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
-        reload:
-        assert-css: (".rust-logo", {"filter": |filter|})
         // Now we check that the non-rust logos don't have a CSS filter set.
         go-to: "file://" + |DOC_PATH| + "/huge_logo/index.html"
         // Changing theme on the new page (again...).
@@ -31,10 +25,6 @@ define-function: (
         assert-false: ".rust-logo"
         assert-false: ".logo-container"
         assert-false: ".sub-logo-container"
-        go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
-        assert-false: ".rust-logo"
-        assert-false: ".logo-container"
-        assert-false: ".sub-logo-container"
     },
 )
 

tests/rustdoc-gui/sidebar-source-code-display.goml

@@ -9,10 +9,10 @@ assert-css: ("#sidebar-button", {"display": "none"})
 javascript: true
 reload:
 wait-for: "#src-sidebar"
-assert-css: ("#src-sidebar", {"position": "absolute", "left": "-1000px"})
+assert-css: (".src .sidebar > *", {"visibility": "hidden"})
 // Let's expand the sidebar now.
-click: "#src-sidebar"
-wait-for-css: ("#src-sidebar", {"position": "sticky", "left": "0"})
+click: "#sidebar-button"
+wait-for-css: (".src .sidebar > *", {"visibility": "visible"})
 
 // We now check that opening the sidebar and clicking a link will leave it open.
 // The behavior here on desktop is different than the behavior on mobile,
@@ -32,12 +32,11 @@ define-function: (
     "check-colors",
     (
         theme, color, color_hover, background, background_hover, background_toggle,
-        background_toggle_hover,
     ),
     block {
         set-local-storage: {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}
         reload:
-        wait-for-css: ("#src-sidebar", {"position": "sticky", "left": "0"})
+        wait-for-css: (".src .sidebar > *", {"visibility": "visible"})
         assert-css: (
             "#src-sidebar details[open] > .files a.selected",
             {"color": |color_hover|, "background-color": |background|},
@@ -108,20 +107,23 @@ call-function: ("check-colors", {
     "color_hover": "#000",
     "background": "#fff",
     "background_hover": "#e0e0e0",
+    "background_toggle": "rgba(0, 0, 0, 0)",
 })
 call-function: ("check-colors", {
     "theme": "dark",
     "color": "#ddd",
     "color_hover": "#ddd",
     "background": "#333",
     "background_hover": "#444",
+    "background_toggle": "rgba(0, 0, 0, 0)",
 })
 call-function: ("check-colors", {
     "theme": "ayu",
     "color": "#c5c5c5",
     "color_hover": "#ffb44c",
     "background": "#14191f",
     "background_hover": "#14191f",
+    "background_toggle": "rgba(0, 0, 0, 0)",
 })
 
 // Now checking on mobile devices.

tests/rustdoc-gui/sidebar-source-code.goml

@@ -52,20 +52,20 @@ wait-for: "#sidebar-button"
 // We check that the sidebar isn't expanded and has the expected width.
 assert-css: ("nav.sidebar", {"width": "50px"})
 // We now click on the button to expand the sidebar.
-click: (10, 10)
+click: "#sidebar-button"
 // We wait for the sidebar to be expanded.
 wait-for-css: (".src-sidebar-expanded nav.sidebar", {"width": "300px"})
 assert-css: (".src-sidebar-expanded nav.sidebar a", {"font-size": "14px"})
 // We collapse the sidebar.
-click: (10, 10)
+click: "#sidebar-button"
 // We ensure that the class has been removed.
 wait-for: "html:not(.src-sidebar-expanded)"
 assert: "nav.sidebar"
 
 // Checking that only the path to the current file is "open".
 go-to: "file://" + |DOC_PATH| + "/src/lib2/another_folder/sub_mod/mod.rs.html"
 // First we expand the sidebar again.
-click: (10, 10)
+click: "#sidebar-button"
 // We wait for the sidebar to be expanded.
 wait-for-css: (".src-sidebar-expanded nav.sidebar", {"width": "300px"})
 assert: "//*[@class='dir-entry' and @open]/*[text()='lib2']"

tests/rustdoc-gui/source-code-page.goml

@@ -146,14 +146,13 @@ define-function: (
         )
     }
 )
-store-property: ("#src-sidebar > .title", {
+store-property: (".src-sidebar-title", {
     "offsetHeight": source_sidebar_title_height,
     "offsetTop": source_sidebar_title_y,
 })
 call-function: ("check-sidebar-dir-entry", {
     "x": 0,
-    // border + margin = 6
-    "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
+    "y": |source_sidebar_title_y| + |source_sidebar_title_height|,
 })
 
 // Check the search form
@@ -175,35 +174,25 @@ assert-property: ("#main-content", {"offsetTop": 50})
 // 8 = 50 - 34 - 8
 
 // Check the sidebar directory entries have a marker and spacing (tablet).
-store-property: ("#src-sidebar > .title", {
+store-property: (".src-sidebar-title", {
     "offsetHeight": source_sidebar_title_height,
     "offsetTop": source_sidebar_title_y,
 })
 call-function: ("check-sidebar-dir-entry", {
     "x": 0,
-    "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
+    "y": |source_sidebar_title_y| + |source_sidebar_title_height|,
 })
 
 // Tiny, phone mobile gets a different display where the logo is stacked on top.
 set-window-size: (450, 700)
 assert-css: ("nav.sub", {"flex-direction": "column"})
 
 // Check the sidebar directory entries have a marker and spacing (phone).
-store-property: ("#src-sidebar > .title", {
+store-property: (".src-sidebar-title", {
     "offsetHeight": source_sidebar_title_height,
     "offsetTop": source_sidebar_title_y,
 })
 call-function: ("check-sidebar-dir-entry", {
     "x": 0,
-    "y": |source_sidebar_title_y| + |source_sidebar_title_height| + 6,
+    "y": |source_sidebar_title_y| + |source_sidebar_title_height|,
 })
-
-// The logo is not present on this page.
-assert-false: ".sub-logo-container > img"
-
-// Check the staged-api page instead, which does.
-// Now we check that the logo has a bottom margin so it's not stuck to the search input.
-go-to: "file://" + |DOC_PATH| + "/src/staged_api/lib.rs.html"
-assert-css: (".sub-logo-container > img", {"margin-bottom": "8px"})
-store-property: (".sub-logo-container", {"clientHeight": logo_height})
-assert-position: (".search-form", {"y": |logo_height| + 8})