Skip to content

Commit

Permalink
Auto merge of #115829 - notriddle:notriddle/rustdoc-theme-css-merge, …
Browse files Browse the repository at this point in the history 
…r=GuillaumeGomez

rustdoc: merge theme css into rustdoc.css

Based on #115812 (comment)

Having them in separate files used to make more sense, before the migration to CSS variables made the theme files as small as they are nowadays. This is already how docs.rs and mdBook do it.

WebPageTest comparison page:

https://www.webpagetest.org/video/compare.php?tests=230913_AiDc3F_B9E,230913_AiDc7G_B9B

Filmstrip comparison:

![image](https://github.com/rust-lang/rust/assets/1593513/7ccad27b-7497-47ee-94c0-1a701b69c0c2)

Old waterfall:

![image](https://github.com/rust-lang/rust/assets/1593513/7a6e4375-226d-4205-8871-a4d775a70748)

New waterfall:

![image](https://github.com/rust-lang/rust/assets/1593513/e29112e3-84f7-417d-a250-cd6c10fa50f5)
  • Loading branch information
@bors
bors committed Sep 15, 2023
2 parents 33440d7 + ab41e2b commit 81326e1
Show file tree
Hide file tree
Showing 21 changed files with 808 additions and 448 deletions.
2 changes: 1 addition & 1 deletion src/bootstrap/test.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -846,7 +846,7 @@ impl Step for RustdocTheme {
let rustdoc = builder.bootstrap_out.join("rustdoc");
let mut cmd = builder.tool_cmd(Tool::RustdocTheme);
cmd.arg(rustdoc.to_str().unwrap())
.arg(builder.src.join("src/librustdoc/html/static/css/themes").to_str().unwrap())
.arg(builder.src.join("src/librustdoc/html/static/css/rustdoc.css").to_str().unwrap())
.env("RUSTC_STAGE", self.compiler.stage.to_string())
.env("RUSTC_SYSROOT", builder.sysroot(self.compiler))
.env("RUSTDOC_LIBDIR", builder.sysroot_libdir(self.compiler, self.compiler.host))
Expand Down
24 changes: 18 additions & 6 deletions src/librustdoc/config.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -410,9 +410,15 @@ impl Options {

let to_check = matches.opt_strs("check-theme");
if !to_check.is_empty() {
let paths = match theme::load_css_paths(
std::str::from_utf8(static_files::STATIC_FILES.theme_light_css.bytes).unwrap(),
) {
let mut content =
std::str::from_utf8(static_files::STATIC_FILES.rustdoc_css.bytes).unwrap();
if let Some((_, inside)) = content.split_once("/* Begin theme: light */") {
content = inside;
}
if let Some((inside, _)) = content.split_once("/* End theme: light */") {
content = inside;
}
let paths = match theme::load_css_paths(content) {
Ok(p) => p,
Err(e) => {
diag.struct_err(e).emit();
Expand Down Expand Up @@ -550,9 +556,15 @@ impl Options {

let mut themes = Vec::new();
if matches.opt_present("theme") {
let paths = match theme::load_css_paths(
std::str::from_utf8(static_files::STATIC_FILES.theme_light_css.bytes).unwrap(),
) {
let mut content =
std::str::from_utf8(static_files::STATIC_FILES.rustdoc_css.bytes).unwrap();
if let Some((_, inside)) = content.split_once("/* Begin theme: light */") {
content = inside;
}
if let Some((inside, _)) = content.split_once("/* End theme: light */") {
content = inside;
}
let paths = match theme::load_css_paths(content) {
Ok(p) => p,
Err(e) => {
diag.struct_err(e).emit();
Expand Down
15 changes: 3 additions & 12 deletions src/librustdoc/html/render/context.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,8 @@ pub(crate) struct SharedContext<'tcx> {
pub(super) module_sorting: ModuleSorting,
/// Additional CSS files to be added to the generated docs.
pub(crate) style_files: Vec<StylePath>,
/// Suffix to be added on resource files (if suffix is "-v2" then "light.css" becomes
/// "light-v2.css").
/// Suffix to add on resource files (if suffix is "-v2" then "search-index.js" becomes
/// "search-index-v2.js").
pub(crate) resource_suffix: String,
/// Optional path string to be used to load static files on output pages. If not set, uses
/// combinations of `../` to reach the documentation root.
Expand Down Expand Up @@ -714,18 +714,9 @@ impl<'tcx> FormatRenderer<'tcx> for Context<'tcx> {
You need to enable JavaScript be able to update your settings.\
</section>\
</noscript>\
<script defer src=\"{static_root_path}{settings_js}\"></script>\
<link rel=\"preload\" href=\"{static_root_path}{theme_light_css}\" \
as=\"style\">\
<link rel=\"preload\" href=\"{static_root_path}{theme_dark_css}\" \
as=\"style\">\
<link rel=\"preload\" href=\"{static_root_path}{theme_ayu_css}\" \
as=\"style\">",
<script defer src=\"{static_root_path}{settings_js}\"></script>",
static_root_path = page.get_static_root_path(),
settings_js = static_files::STATIC_FILES.settings_js,
theme_light_css = static_files::STATIC_FILES.theme_light_css,
theme_dark_css = static_files::STATIC_FILES.theme_dark_css,
theme_ayu_css = static_files::STATIC_FILES.theme_ayu_css,
);
// Pre-load all theme CSS files, so that switching feels seamless.
//
Expand Down
213 changes: 213 additions & 0 deletions src/librustdoc/html/static/css/noscript.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,216 @@ nav.sub {
https://github.com/rust-lang/rust/issues/102576 */
display: none;
}

/* Begin: styles for themes
Keep the default light and dark themes synchronized with the ones
in rustdoc.css */

/* Begin theme: light */
:root {
--main-background-color: white;
--main-color: black;
--settings-input-color: #2196f3;
--settings-input-border-color: #717171;
--settings-button-color: #000;
--settings-button-border-focus: #717171;
--sidebar-background-color: #f5f5f5;
--sidebar-background-color-hover: #e0e0e0;
--code-block-background-color: #f5f5f5;
--scrollbar-track-background-color: #dcdcdc;
--scrollbar-thumb-background-color: rgba(36, 37, 39, 0.6);
--scrollbar-color: rgba(36, 37, 39, 0.6) #d9d9d9;
--headings-border-bottom-color: #ddd;
--border-color: #e0e0e0;
--button-background-color: #fff;
--right-side-color: grey;
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: none;
--search-input-focused-border-color: #66afe9;
--copy-path-button-color: #999;
--copy-path-img-filter: invert(50%);
--copy-path-img-hover-filter: invert(35%);
--codeblock-error-hover-color: rgb(255, 0, 0);
--codeblock-error-color: rgba(255, 0, 0, .5);
--codeblock-ignore-hover-color: rgb(255, 142, 0);
--codeblock-ignore-color: rgba(255, 142, 0, .6);
--warning-border-color: #ff8e00;
--type-link-color: #ad378a;
--trait-link-color: #6e4fc9;
--assoc-item-link-color: #3873ad;
--function-link-color: #ad7c37;
--macro-link-color: #068000;
--keyword-link-color: #3873ad;
--mod-link-color: #3873ad;
--link-color: #3873ad;
--sidebar-link-color: #356da4;
--sidebar-current-link-background-color: #fff;
--search-result-link-focus-background-color: #ccc;
--search-result-border-color: #aaa3;
--search-color: #000;
--search-error-code-background-color: #d0cccc;
--search-results-alias-color: #000;
--search-results-grey-color: #999;
--search-tab-title-count-color: #888;
--search-tab-button-not-selected-border-top-color: #e6e6e6;
--search-tab-button-not-selected-background: #e6e6e6;
--search-tab-button-selected-border-top-color: #0089ff;
--search-tab-button-selected-background: #fff;
--stab-background-color: #fff5d6;
--stab-code-color: #000;
--code-highlight-kw-color: #8959a8;
--code-highlight-kw-2-color: #4271ae;
--code-highlight-lifetime-color: #b76514;
--code-highlight-prelude-color: #4271ae;
--code-highlight-prelude-val-color: #c82829;
--code-highlight-number-color: #718c00;
--code-highlight-string-color: #718c00;
--code-highlight-literal-color: #c82829;
--code-highlight-attribute-color: #c82829;
--code-highlight-self-color: #c82829;
--code-highlight-macro-color: #3e999f;
--code-highlight-question-mark-color: #ff9011;
--code-highlight-comment-color: #8e908c;
--code-highlight-doc-comment-color: #4d4d4c;
--src-line-numbers-span-color: #c67e2d;
--src-line-number-highlighted-background-color: #fdffd3;
--test-arrow-color: #f5f5f5;
--test-arrow-background-color: rgba(78, 139, 202, 0.2);
--test-arrow-hover-color: #f5f5f5;
--test-arrow-hover-background-color: rgb(78, 139, 202);
--target-background-color: #fdffd3;
--target-border-color: #ad7c37;
--kbd-color: #000;
--kbd-background: #fafbfc;
--kbd-box-shadow-color: #c6cbd1;
--rust-logo-filter: initial;
/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
--crate-search-div-filter: invert(100%) sepia(0%) saturate(4223%) hue-rotate(289deg)
brightness(114%) contrast(76%);
--crate-search-div-hover-filter: invert(44%) sepia(18%) saturate(23%) hue-rotate(317deg)
brightness(96%) contrast(93%);
--crate-search-hover-border: #717171;
--src-sidebar-background-selected: #fff;
--src-sidebar-background-hover: #e0e0e0;
--table-alt-row-background-color: #f5f5f5;
--codeblock-link-background: #eee;
--scrape-example-toggle-line-background: #ccc;
--scrape-example-toggle-line-hover-background: #999;
--scrape-example-code-line-highlight: #fcffd6;
--scrape-example-code-line-highlight-focus: #f6fdb0;
--scrape-example-help-border-color: #555;
--scrape-example-help-color: #333;
--scrape-example-help-hover-border-color: #000;
--scrape-example-help-hover-color: #000;
--scrape-example-code-wrapper-background-start: rgba(255, 255, 255, 1);
--scrape-example-code-wrapper-background-end: rgba(255, 255, 255, 0);
}
/* End theme: light */

@media (prefers-color-scheme: dark) {
/* Begin theme: dark */
:root {
--main-background-color: #353535;
--main-color: #ddd;
--settings-input-color: #2196f3;
--settings-input-border-color: #999;
--settings-button-color: #000;
--settings-button-border-focus: #ffb900;
--sidebar-background-color: #505050;
--sidebar-background-color-hover: #676767;
--code-block-background-color: #2A2A2A;
--scrollbar-track-background-color: #717171;
--scrollbar-thumb-background-color: rgba(32, 34, 37, .6);
--scrollbar-color: rgba(32,34,37,.6) #5a5a5a;
--headings-border-bottom-color: #d2d2d2;
--border-color: #e0e0e0;
--button-background-color: #f0f0f0;
--right-side-color: grey;
--code-attribute-color: #999;
--toggles-color: #999;
--toggle-filter: invert(100%);
--search-input-focused-border-color: #008dfd;
--copy-path-button-color: #999;
--copy-path-img-filter: invert(50%);
--copy-path-img-hover-filter: invert(65%);
--codeblock-error-hover-color: rgb(255, 0, 0);
--codeblock-error-color: rgba(255, 0, 0, .5);
--codeblock-ignore-hover-color: rgb(255, 142, 0);
--codeblock-ignore-color: rgba(255, 142, 0, .6);
--warning-border-color: #ff8e00;
--type-link-color: #2dbfb8;
--trait-link-color: #b78cf2;
--assoc-item-link-color: #d2991d;
--function-link-color: #2bab63;
--macro-link-color: #09bd00;
--keyword-link-color: #d2991d;
--mod-link-color: #d2991d;
--link-color: #d2991d;
--sidebar-link-color: #fdbf35;
--sidebar-current-link-background-color: #444;
--search-result-link-focus-background-color: #616161;
--search-result-border-color: #aaa3;
--search-color: #111;
--search-error-code-background-color: #484848;
--search-results-alias-color: #fff;
--search-results-grey-color: #ccc;
--search-tab-title-count-color: #888;
--search-tab-button-not-selected-border-top-color: #252525;
--search-tab-button-not-selected-background: #252525;
--search-tab-button-selected-border-top-color: #0089ff;
--search-tab-button-selected-background: #353535;
--stab-background-color: #314559;
--stab-code-color: #e6e1cf;
--code-highlight-kw-color: #ab8ac1;
--code-highlight-kw-2-color: #769acb;
--code-highlight-lifetime-color: #d97f26;
--code-highlight-prelude-color: #769acb;
--code-highlight-prelude-val-color: #ee6868;
--code-highlight-number-color: #83a300;
--code-highlight-string-color: #83a300;
--code-highlight-literal-color: #ee6868;
--code-highlight-attribute-color: #ee6868;
--code-highlight-self-color: #ee6868;
--code-highlight-macro-color: #3e999f;
--code-highlight-question-mark-color: #ff9011;
--code-highlight-comment-color: #8d8d8b;
--code-highlight-doc-comment-color: #8ca375;
--src-line-numbers-span-color: #3b91e2;
--src-line-number-highlighted-background-color: #0a042f;
--test-arrow-color: #dedede;
--test-arrow-background-color: rgba(78, 139, 202, 0.2);
--test-arrow-hover-color: #dedede;
--test-arrow-hover-background-color: #4e8bca;
--target-background-color: #494a3d;
--target-border-color: #bb7410;
--kbd-color: #000;
--kbd-background: #fafbfc;
--kbd-box-shadow-color: #c6cbd1;
--rust-logo-filter: drop-shadow(1px 0 0px #fff)
drop-shadow(0 1px 0 #fff)
drop-shadow(-1px 0 0 #fff)
drop-shadow(0 -1px 0 #fff);
/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
--crate-search-div-filter: invert(94%) sepia(0%) saturate(721%) hue-rotate(255deg)
brightness(90%) contrast(90%);
--crate-search-div-hover-filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg)
brightness(100%) contrast(91%);
--crate-search-hover-border: #2196f3;
--src-sidebar-background-selected: #333;
--src-sidebar-background-hover: #444;
--table-alt-row-background-color: #2a2a2a;
--codeblock-link-background: #333;
--scrape-example-toggle-line-background: #999;
--scrape-example-toggle-line-hover-background: #c5c5c5;
--scrape-example-code-line-highlight: #5b3b01;
--scrape-example-code-line-highlight-focus: #7c4b0f;
--scrape-example-help-border-color: #aaa;
--scrape-example-help-color: #eee;
--scrape-example-help-hover-border-color: #fff;
--scrape-example-help-hover-color: #fff;
--scrape-example-code-wrapper-background-start: rgba(53, 53, 53, 1);
--scrape-example-code-wrapper-background-end: rgba(53, 53, 53, 0);
}
/* End theme: dark */
}
Loading

0 comments on commit 81326e1

Please sign in to comment.