diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 4f5f8f92264..0ea4d8f1e39 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -41,6 +41,7 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\ --font-family: "Source Serif 4", NanumBarunGothic, serif; --font-family-code: "Source Code Pro", monospace; --line-number-padding: 4px; + --line-number-right-margin: 20px; /* scraped examples icons (34x33px) */ --prev-arrow-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" \ enable-background="new 0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="none" \ @@ -848,22 +849,6 @@ ul.block, .block li, .block ul { border-radius: 6px; } -/* -If the code example line numbers are displayed, there will be a weird radius in the middle from -both the code example and the line numbers, so we need to remove the radius in this case. -*/ -.rustdoc .example-wrap > .example-line-numbers, -.rustdoc .scraped-example .src-line-numbers, -.rustdoc .scraped-example .src-line-numbers > pre { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} -.rustdoc .example-wrap > .example-line-numbers + pre, -.rustdoc .scraped-example .rust { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - .rustdoc .scraped-example { position: relative; } @@ -908,45 +893,31 @@ both the code example and the line numbers, so we need to remove the radius in t overflow: auto; } -.rustdoc .example-wrap pre.example-line-numbers, -.rustdoc .example-wrap .src-line-numbers { - min-width: fit-content; /* prevent collapsing into nothing in truncated scraped examples */ - flex-grow: 0; - text-align: right; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - padding: 14px 8px; - padding-right: 2px; - color: var(--src-line-numbers-span-color); -} - -.example-wrap.digits-1 [data-nosnippet] { +.example-wrap.digits-1:not(.hide-lines) [data-nosnippet] { width: calc(1ch + var(--line-number-padding) * 2); } -.example-wrap.digits-2 [data-nosnippet] { +.example-wrap.digits-2:not(.hide-lines) [data-nosnippet] { width: calc(2ch + var(--line-number-padding) * 2); } -.example-wrap.digits-3 [data-nosnippet] { +.example-wrap.digits-3:not(.hide-lines) [data-nosnippet] { width: calc(3ch + var(--line-number-padding) * 2); } -.example-wrap.digits-4 [data-nosnippet] { +.example-wrap.digits-4:not(.hide-lines) [data-nosnippet] { width: calc(4ch + var(--line-number-padding) * 2); } -.example-wrap.digits-5 [data-nosnippet] { +.example-wrap.digits-5:not(.hide-lines) [data-nosnippet] { width: calc(5ch + var(--line-number-padding) * 2); } -.example-wrap.digits-6 [data-nosnippet] { +.example-wrap.digits-6:not(.hide-lines) [data-nosnippet] { width: calc(6ch + var(--line-number-padding) * 2); } -.example-wrap.digits-7 [data-nosnippet] { +.example-wrap.digits-7:not(.hide-lines) [data-nosnippet] { width: calc(7ch + var(--line-number-padding) * 2); } -.example-wrap.digits-8 [data-nosnippet] { +.example-wrap.digits-8:not(.hide-lines) [data-nosnippet] { width: calc(8ch + var(--line-number-padding) * 2); } -.example-wrap.digits-9 [data-nosnippet] { +.example-wrap.digits-9:not(.hide-lines) [data-nosnippet] { width: calc(9ch + var(--line-number-padding) * 2); } @@ -954,12 +925,12 @@ both the code example and the line numbers, so we need to remove the radius in t color: var(--src-line-numbers-span-color); text-align: right; display: inline-block; - margin-right: 20px; + margin-right: var(--line-number-right-margin); -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; - padding: 0 4px; + padding: 0 var(--line-number-padding); } .example-wrap [data-nosnippet]:target { border-right: none; @@ -967,6 +938,60 @@ both the code example and the line numbers, so we need to remove the radius in t .example-wrap .line-highlighted[data-nosnippet] { background-color: var(--src-line-number-highlighted-background-color); } +:root.word-wrap-source-code .example-wrap [data-nosnippet] { + position: absolute; + left: 0; +} +.word-wrap-source-code .example-wrap pre > code { + position: relative; + word-break: break-all; +} +:root.word-wrap-source-code .example-wrap pre > code { + display: block; + white-space: pre-wrap; +} +:root.word-wrap-source-code .example-wrap pre > code * { + word-break: break-all; +} +:root.word-wrap-source-code .example-wrap.digits-1 pre > code { + padding-left: calc( + 1ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.word-wrap-source-code .example-wrap.digits-2 pre > code { + padding-left: calc( + 2ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.word-wrap-source-code .example-wrap.digits-3 pre > code { + padding-left: calc( + 3ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.word-wrap-source-code .example-wrap.digits-4 pre > code { + padding-left: calc( + 4ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.word-wrap-source-code .example-wrap.digits-5 pre > code { + padding-left: calc( + 5ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.word-wrap-source-code .example-wrap.digits-6 pre > code { + padding-left: calc( + 6ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.word-wrap-source-code .example-wrap.digits-7 pre > code { + padding-left: calc( + 7ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.word-wrap-source-code .example-wrap.digits-8 pre > code { + padding-left: calc( + 8ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.word-wrap-source-code .example-wrap.digits-9 pre > code { + padding-left: calc( + 9ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +.example-wrap.hide-lines [data-nosnippet] { + display: none; +} .search-loading { text-align: center; diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index e46cc1897e9..edfcc1291b9 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -1112,35 +1112,32 @@ function preLoadCss(cssUrl) { // @ts-expect-error window.rustdoc_add_line_numbers_to_examples = () => { - if (document.querySelector(".rustdoc.src")) { - // We are in the source code page, nothing to be done here! - return; + // @ts-expect-error + function generateLine(nb) { + return `<span data-nosnippet>${nb}</span>`; } + onEachLazy(document.querySelectorAll( - ":not(.scraped-example) > .example-wrap > pre:not(.example-line-numbers)", - ), x => { - const parent = x.parentNode; - const line_numbers = parent.querySelectorAll(".example-line-numbers"); - if (line_numbers.length > 0) { + ".rustdoc:not(.src) :not(.scraped-example) > .example-wrap > pre > code", + ), code => { + if (hasClass(code.parentElement.parentElement, "hide-lines")) { + removeClass(code.parentElement.parentElement, "hide-lines"); return; } - const count = x.textContent.split("\n").length; - const elems = []; - for (let i = 0; i < count; ++i) { - elems.push(i + 1); - } - const node = document.createElement("pre"); - addClass(node, "example-line-numbers"); - node.innerHTML = elems.join("\n"); - parent.insertBefore(node, x); + const lines = code.innerHTML.split("\n"); + const digits = (lines.length + "").length; + // @ts-expect-error + code.innerHTML = lines.map((line, index) => generateLine(index + 1) + line).join("\n"); + addClass(code.parentElement.parentElement, `digits-${digits}`); }); }; // @ts-expect-error window.rustdoc_remove_line_numbers_from_examples = () => { - onEachLazy(document.querySelectorAll(".example-wrap > .example-line-numbers"), x => { - x.parentNode.removeChild(x); - }); + onEachLazy( + document.querySelectorAll(".rustdoc:not(.src) :not(.scraped-example) > .example-wrap"), + x => addClass(x, "hide-lines"), + ); }; if (getSettingValue("line-numbers") === "true") { diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js index bf33e0f17e5..5f1bbd27328 100644 --- a/src/librustdoc/html/static/js/settings.js +++ b/src/librustdoc/html/static/js/settings.js @@ -59,6 +59,14 @@ } else { removeClass(document.documentElement, "sans-serif"); } + break; + case "word-wrap-source-code": + if (value === true) { + addClass(document.documentElement, "word-wrap-source-code"); + } else { + removeClass(document.documentElement, "word-wrap-source-code"); + } + break; } } @@ -246,6 +254,11 @@ "js_name": "sans-serif-fonts", "default": false, }, + { + "name": "Word wrap source code", + "js_name": "word-wrap-source-code", + "default": false, + }, ]; // Then we build the DOM. diff --git a/src/librustdoc/html/static/js/storage.js b/src/librustdoc/html/static/js/storage.js index 3042373fb09..425b915b5f9 100644 --- a/src/librustdoc/html/static/js/storage.js +++ b/src/librustdoc/html/static/js/storage.js @@ -286,6 +286,9 @@ if (getSettingValue("hide-modnav") === "true") { if (getSettingValue("sans-serif-fonts") === "true") { addClass(document.documentElement, "sans-serif"); } +if (getSettingValue("word-wrap-source-code") === "true") { + addClass(document.documentElement, "word-wrap-source-code"); +} function updateSidebarWidth() { const desktopSidebarWidth = getSettingValue("desktop-sidebar-width"); if (desktopSidebarWidth && desktopSidebarWidth !== "null") { diff --git a/tests/rustdoc-gui/docblock-code-block-line-number.goml b/tests/rustdoc-gui/docblock-code-block-line-number.goml index 032746a6bdf..97273ceb195 100644 --- a/tests/rustdoc-gui/docblock-code-block-line-number.goml +++ b/tests/rustdoc-gui/docblock-code-block-line-number.goml @@ -21,7 +21,7 @@ assert-css: ( set-local-storage: {"rustdoc-line-numbers": "true"} reload: // We wait for the line numbers to be added into the DOM by the JS... -wait-for: "pre.example-line-numbers" +wait-for: ".digits-1 pre" // Otherwise, we can't check text color show-text: true @@ -35,30 +35,21 @@ define-function: ( call-function: ("switch-theme", {"theme": |theme|}) // If the test didn't fail, it means that it was found! assert-css: ( - "pre.example-line-numbers", + ".digits-1 pre [data-nosnippet]", { "color": |color|, - "margin": "0px", - "padding-top": "14px", - "padding-bottom": "14px", - "padding-left": "8px", - "padding-right": "2px", + "margin-top": "0px", + "margin-bottom": "0px", + "margin-left": "0px", + "margin-right": "20px", + "padding-top": "0px", + "padding-bottom": "0px", + "padding-left": "4px", + "padding-right": "4px", "text-align": "right", - // There should not be a radius on the right of the line numbers. - "border-top-left-radius": "6px", - "border-bottom-left-radius": "6px", - "border-top-right-radius": "0px", - "border-bottom-right-radius": "0px", }, ALL, ) - // There should not be a radius on the left of the line numbers. - assert-css: ("pre.example-line-numbers + .rust", { - "border-top-left-radius": "0px", - "border-bottom-left-radius": "0px", - "border-top-right-radius": "6px", - "border-bottom-right-radius": "6px", - }) }, ) call-function: ("check-colors", { @@ -74,9 +65,6 @@ call-function: ("check-colors", { "color": "#c67e2d", }) -// The first code block has two lines so let's check its `<pre>` elements lists both of them. -assert-text: ("pre.example-line-numbers", "1\n2") - // Now, try changing the setting dynamically. We'll turn it off, using the settings menu, // and make sure it goes away. @@ -87,42 +75,17 @@ assert-css: ("#settings", {"display": "block"}) // Then, click the toggle button. click: "input#line-numbers" -wait-for-false: "pre.example-line-numbers" +wait-for: ".digits-1.hide-lines" assert-local-storage: {"rustdoc-line-numbers": "false" } -// Check that the rounded corners are back. -assert-css: ( - ".example-wrap .rust", - { - "border-top-left-radius": "6px", - "border-bottom-left-radius": "6px", - "border-top-right-radius": "6px", - "border-bottom-right-radius": "6px", - }, - ALL, -) - // Finally, turn it on again. click: "input#line-numbers" -wait-for: "pre.example-line-numbers" +wait-for: ".digits-1:not(.hide-lines)" assert-local-storage: {"rustdoc-line-numbers": "true" } -wait-for: "pre.example-line-numbers" // Same check with scraped examples line numbers. go-to: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html" -assert-css: ( - ".scraped-example .rust", - { - // There should not be a radius on the left of the code. - "border-top-left-radius": "0px", - "border-bottom-left-radius": "0px", - "border-top-right-radius": "6px", - "border-bottom-right-radius": "6px", - }, - ALL, -) - define-function: ( "check-padding", [path, padding_bottom], @@ -203,17 +166,18 @@ assert-local-storage: {"rustdoc-line-numbers": "true" } assert: ".example-wrap > pre.language-txt" assert: ".example-wrap > pre.rust" assert-count: (".example-wrap", 2) -assert-count: (".example-wrap > pre.example-line-numbers", 2) +assert-count: (".example-wrap.digits-1", 2) click: "#settings-menu" wait-for: "#settings" // Then, click the toggle button. click: "input#line-numbers" -wait-for-count: (".example-wrap > pre.example-line-numbers", 0) +wait-for-count: (".example-wrap.digits-1.hide-lines", 2) assert-local-storage-false: {"rustdoc-line-numbers": "true" } // Now turning off the setting. click: "input#line-numbers" -wait-for-count: (".example-wrap > pre.example-line-numbers", 2) +wait-for-count: (".example-wrap.digits-1", 2) +wait-for-count: (".example-wrap.digits-1.hide-lines", 0) assert-local-storage: {"rustdoc-line-numbers": "true" } diff --git a/tests/rustdoc-gui/source-code-wrapping.goml b/tests/rustdoc-gui/source-code-wrapping.goml new file mode 100644 index 00000000000..cb2fd3052cd --- /dev/null +++ b/tests/rustdoc-gui/source-code-wrapping.goml @@ -0,0 +1,47 @@ +// Checks that the interactions with the source code pages are working as expected. +go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html" +show-text: true +set-window-size: (1000, 1000) + +define-function: ( + "click-code-wrapping", + [expected], + block { + click: "#word-wrap-source-code" + wait-for-local-storage: {"rustdoc-word-wrap-source-code": |expected|} + }, +) + +store-size: (".rust code", {"width": width, "height": height}) +click: "#settings-menu" +wait-for: "#settings" +call-function: ("click-code-wrapping", {"expected": "true"}) +wait-for-size-false: (".rust code", {"width": |width|, "height": |height|}) +store-size: (".rust code", {"width": new_width, "height": new_height}) +// The width should now be smaller than the window's and the height +// should have increased. +assert: |width| > |new_width| && |height| < |new_height| + +// Switching back to the original setting. +call-function: ("click-code-wrapping", {"expected": "false"}) +assert-size: (".rust code", {"width": |width|, "height": |height|}) + +// Now let's check in docs code examples. +go-to: "file://" + |DOC_PATH| + "/test_docs/trait_bounds/index.html" +click: "#settings-menu" +wait-for: "#settings" + +store-size: (".example-wrap .rust code", {"width": rust_width, "height": rust_height}) +store-size: (".example-wrap .language-text code", {"width": txt_width, "height": txt_height}) +call-function: ("click-code-wrapping", {"expected": "true"}) +wait-for-size-false: (".example-wrap .rust code", {"width": |rust_width|, "height": |rust_height|}) + +store-size: (".example-wrap .rust code", {"width": new_rust_width, "height": new_rust_height}) +store-size: (".example-wrap .language-text code", {"width": new_txt_width, "height": new_txt_height}) + +assert: |rust_width| > |new_rust_width| && |rust_height| < |new_rust_height| +assert: |txt_width| > |new_txt_width| && |txt_height| < |new_txt_height| + +call-function: ("click-code-wrapping", {"expected": "false"}) +wait-for-size: (".example-wrap .rust code", {"width": |rust_width|, "height": |rust_height|}) +assert-size: (".example-wrap .language-text code", {"width": |txt_width|, "height": |txt_height|}) diff --git a/tests/rustdoc-gui/src/test_docs/lib.rs b/tests/rustdoc-gui/src/test_docs/lib.rs index f9c20ab22b8..31f6b7f09b7 100644 --- a/tests/rustdoc-gui/src/test_docs/lib.rs +++ b/tests/rustdoc-gui/src/test_docs/lib.rs @@ -615,6 +615,15 @@ pub mod private { } } +/// ``` +/// fn super_long_function_name_because_i_need_to_hit_the_limit_and_break_beyond_it() { +/// } +/// ``` +/// +/// ```text +/// fn super_long_function_name_because_i_need_to_hit_the_limit_and_break_beyond_it_v2() { +/// } +/// ``` pub mod trait_bounds { pub trait OneBound: Sized {} pub trait TwoBounds: Sized + Copy {}