From 599f88d7717aca793e81c68e66f91b5b9be2d732 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 13 Feb 2025 17:39:05 +0100 Subject: Add new setting to wrap source code lines when too long --- src/librustdoc/html/static/css/rustdoc.css | 107 ++++++++++++++++++----------- 1 file changed, 66 insertions(+), 41 deletions(-) (limited to 'src/librustdoc/html/static/css/rustdoc.css') diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 4f5f8f92264..8e904c6200e 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, .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.wrap-source-code .example-wrap [data-nosnippet] { + position: absolute; + left: 0; +} +.wrap-source-code .example-wrap pre > code { + position: relative; + word-break: break-all; +} +:root.wrap-source-code .example-wrap pre > code { + display: block; + white-space: pre-wrap; +} +:root.wrap-source-code .example-wrap pre > code * { + word-break: break-all; +} +:root.wrap-source-code .example-wrap.digits-1 pre > code { + padding-left: calc( + 1ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.wrap-source-code .example-wrap.digits-2 pre > code { + padding-left: calc( + 2ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.wrap-source-code .example-wrap.digits-3 pre > code { + padding-left: calc( + 3ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.wrap-source-code .example-wrap.digits-4 pre > code { + padding-left: calc( + 4ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.wrap-source-code .example-wrap.digits-5 pre > code { + padding-left: calc( + 5ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.wrap-source-code .example-wrap.digits-6 pre > code { + padding-left: calc( + 6ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.wrap-source-code .example-wrap.digits-7 pre > code { + padding-left: calc( + 7ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.wrap-source-code .example-wrap.digits-8 pre > code { + padding-left: calc( + 8ch + var(--line-number-padding) * 2 + var(--line-number-right-margin)); +} +:root.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; -- cgit 1.4.1-3-g733a5 From a1471f3aa68ad97fc809e37c3c2c7b8b9e2ae227 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Sun, 16 Feb 2025 00:34:29 +0100 Subject: Rename feature into `Word wrap source code` --- src/librustdoc/html/static/css/rustdoc.css | 26 +++++++++++++------------- src/librustdoc/html/static/js/settings.js | 10 +++++----- src/librustdoc/html/static/js/storage.js | 4 ++-- tests/rustdoc-gui/source-code-wrapping.goml | 9 ++++++--- 4 files changed, 26 insertions(+), 23 deletions(-) (limited to 'src/librustdoc/html/static/css/rustdoc.css') diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 8e904c6200e..0ea4d8f1e39 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -938,54 +938,54 @@ ul.block, .block li, .block ul { .example-wrap .line-highlighted[data-nosnippet] { background-color: var(--src-line-number-highlighted-background-color); } -:root.wrap-source-code .example-wrap [data-nosnippet] { +:root.word-wrap-source-code .example-wrap [data-nosnippet] { position: absolute; left: 0; } -.wrap-source-code .example-wrap pre > code { +.word-wrap-source-code .example-wrap pre > code { position: relative; word-break: break-all; } -:root.wrap-source-code .example-wrap pre > code { +:root.word-wrap-source-code .example-wrap pre > code { display: block; white-space: pre-wrap; } -:root.wrap-source-code .example-wrap pre > code * { +:root.word-wrap-source-code .example-wrap pre > code * { word-break: break-all; } -:root.wrap-source-code .example-wrap.digits-1 pre > code { +: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.wrap-source-code .example-wrap.digits-2 pre > code { +: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.wrap-source-code .example-wrap.digits-3 pre > code { +: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.wrap-source-code .example-wrap.digits-4 pre > code { +: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.wrap-source-code .example-wrap.digits-5 pre > code { +: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.wrap-source-code .example-wrap.digits-6 pre > code { +: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.wrap-source-code .example-wrap.digits-7 pre > code { +: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.wrap-source-code .example-wrap.digits-8 pre > code { +: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.wrap-source-code .example-wrap.digits-9 pre > code { +: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)); } diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js index 2cf6d6fde8f..5f1bbd27328 100644 --- a/src/librustdoc/html/static/js/settings.js +++ b/src/librustdoc/html/static/js/settings.js @@ -60,11 +60,11 @@ removeClass(document.documentElement, "sans-serif"); } break; - case "wrap-source-code": + case "word-wrap-source-code": if (value === true) { - addClass(document.documentElement, "wrap-source-code"); + addClass(document.documentElement, "word-wrap-source-code"); } else { - removeClass(document.documentElement, "wrap-source-code"); + removeClass(document.documentElement, "word-wrap-source-code"); } break; } @@ -255,8 +255,8 @@ "default": false, }, { - "name": "Wrap source codes", - "js_name": "wrap-source-code", + "name": "Word wrap source code", + "js_name": "word-wrap-source-code", "default": false, }, ]; diff --git a/src/librustdoc/html/static/js/storage.js b/src/librustdoc/html/static/js/storage.js index 4f70166848c..425b915b5f9 100644 --- a/src/librustdoc/html/static/js/storage.js +++ b/src/librustdoc/html/static/js/storage.js @@ -286,8 +286,8 @@ if (getSettingValue("hide-modnav") === "true") { if (getSettingValue("sans-serif-fonts") === "true") { addClass(document.documentElement, "sans-serif"); } -if (getSettingValue("wrap-source-code") === "true") { - addClass(document.documentElement, "wrap-source-code"); +if (getSettingValue("word-wrap-source-code") === "true") { + addClass(document.documentElement, "word-wrap-source-code"); } function updateSidebarWidth() { const desktopSidebarWidth = getSettingValue("desktop-sidebar-width"); diff --git a/tests/rustdoc-gui/source-code-wrapping.goml b/tests/rustdoc-gui/source-code-wrapping.goml index 6b70c4c3447..cb2fd3052cd 100644 --- a/tests/rustdoc-gui/source-code-wrapping.goml +++ b/tests/rustdoc-gui/source-code-wrapping.goml @@ -1,13 +1,14 @@ // 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: "#wrap-source-code" - wait-for-local-storage: {"rustdoc-wrap-source-code": |expected|} + click: "#word-wrap-source-code" + wait-for-local-storage: {"rustdoc-word-wrap-source-code": |expected|} }, ) @@ -15,6 +16,7 @@ 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. @@ -32,6 +34,7 @@ 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}) @@ -40,5 +43,5 @@ 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"}) -assert-size: (".example-wrap .rust code", {"width": |rust_width|, "height": |rust_height|}) +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|}) -- cgit 1.4.1-3-g733a5