Add possibility to have multiple themes

author: Guillaume Gomez <guillaume1.gomez@gmail.com> 2018-01-20 21:12:00 +0100
committer: Guillaume Gomez <guillaume1.gomez@gmail.com> 2018-01-21 17:34:55 +0100
commit: 003b2bc1c65251ec2fc80b78ed91c43fb35402ec (patch)
tree: ecd2f010af03127f8dfe3ba2e6847f8538f5bde1 /src
parent: 3001ab10b96dd495f4c579936a592dc993388568 (diff)
download: rust-003b2bc1c65251ec2fc80b78ed91c43fb35402ec.tar.gz
rust-003b2bc1c65251ec2fc80b78ed91c43fb35402ec.zip
6 files changed, 537 insertions, 8 deletions
diff --git a/src/librustdoc/html/layout.rs b/src/librustdoc/html/layout.rs
index 3a18c6b8a80..105b5b103a5 100644
--- a/src/librustdoc/html/layout.rs
+++ b/src/librustdoc/html/layout.rs
@@ -47,8 +47,8 @@ r##"<!DOCTYPE html>
     <title>{title}</title>
 
     <link rel="stylesheet" type="text/css" href="{root_path}normalize.css">
-    <link rel="stylesheet" type="text/css" href="{root_path}rustdoc.css">
-    <link rel="stylesheet" type="text/css" href="{root_path}main.css">
+    <link rel="stylesheet" type="text/css" href="{root_path}rustdoc.css" id="mainThemeStyle">
+    <link rel="stylesheet" type="text/css" href="{root_path}main.css" id="themeStyle">
     {css_extension}
 
     {favicon}
@@ -70,6 +70,10 @@ r##"<!DOCTYPE html>
         {sidebar}
     </nav>
 
+    <div id="theme-picker">&#x1f58c;
+        <div id="theme-choices"></div>
+    </div>
+    <script src="{root_path}theme.js"></script>
     <nav class="sub">
         <form class="search-form js-only">
             <div class="search-container">
diff --git a/src/librustdoc/html/render.rs b/src/librustdoc/html/render.rs
index cfa09ea30a8..007d663cf94 100644
--- a/src/librustdoc/html/render.rs
+++ b/src/librustdoc/html/render.rs
@@ -219,6 +219,17 @@ impl Error {
     }
 }
 
+macro_rules! try_none {
+    ($e:expr, $file:expr) => ({
+        use std::io;
+        match $e {
+            Some(e) => e,
+            None => return Err(Error::new(io::Error::new(io::ErrorKind::Other, "not found"),
+                                          $file))
+        }
+    })
+}
+
 macro_rules! try_err {
     ($e:expr, $file:expr) => ({
         match $e {
@@ -859,12 +870,75 @@ fn write_shared(cx: &Context,
     // Add all the static files. These may already exist, but we just
     // overwrite them anyway to make sure that they're fresh and up-to-date.
 
-    write(cx.dst.join("main.js"),
-          include_bytes!("static/main.js"))?;
     write(cx.dst.join("rustdoc.css"),
           include_bytes!("static/rustdoc.css"))?;
-    write(cx.dst.join("main.css"),
-          include_bytes!("static/styles/main.css"))?;
+    let path = cx.shared.src_root.join("../librustdoc/html/static/themes");
+    let mut themes: Vec<String> = Vec::new();
+    for entry in try_err!(fs::read_dir(path.clone()), &path) {
+        let entry = try_err!(entry, &path);
+        let mut content = Vec::with_capacity(100000);
+
+        let mut f = try_err!(File::open(entry.path()), &entry.path());
+        try_err!(f.read_to_end(&mut content), &entry.path());
+        write(cx.dst.join(entry.file_name()), content.as_slice())?;
+        themes.push(try_none!(
+                        try_none!(entry.path().file_stem(), &entry.path()).to_str(),
+                        &entry.path()).to_owned());
+    }
+    themes.sort();
+    // To avoid theme switch latencies as much as possible, we put everything theme related
+    // at the beginning of the html files into another js file.
+    write(cx.dst.join("theme.js"), format!(
+r#"var themes = document.getElementById("theme-choices");
+var themePicker = document.getElementById("theme-picker");
+themePicker.onclick = function() {{
+    if (themes.style.display === "block") {{
+        themes.style.display = "none";
+        themePicker.style.borderBottomRightRadius = "3px";
+        themePicker.style.borderBottomLeftRadius = "3px";
+    }} else {{
+        themes.style.display = "block";
+        themePicker.style.borderBottomRightRadius = "0";
+        themePicker.style.borderBottomLeftRadius = "0";
+    }}
+}};
+var currentTheme = document.getElementById("themeStyle");
+var mainTheme = document.getElementById("mainThemeStyle");
+[{}].forEach(function(item) {{
+    var div = document.createElement('div');
+    div.innerHTML = item;
+    div.onclick = function(el) {{
+        switchTheme(currentTheme, mainTheme, item);
+    }};
+    themes.appendChild(div);
+}});
+
+function updateLocalStorage(theme) {{
+    if (typeof(Storage) !== "undefined") {{
+        localStorage.theme = theme;
+    }} else {{
+        // No Web Storage support so we do nothing
+    }}
+}}
+function switchTheme(styleElem, mainStyleElem, newTheme) {{
+    styleElem.href = mainStyleElem.href.replace("rustdoc.css", newTheme + ".css");
+    updateLocalStorage(newTheme);
+}}
+function getCurrentTheme() {{
+    if (typeof(Storage) !== "undefined" && localStorage.theme !== undefined) {{
+        return localStorage.theme;
+    }}
+    return "main";
+}}
+
+switchTheme(currentTheme, mainTheme, getCurrentTheme());
+"#, themes.iter()
+          .map(|s| format!("\"{}\"", s))
+          .collect::<Vec<String>>()
+          .join(",")).as_bytes())?;
+
+    write(cx.dst.join("main.js"), include_bytes!("static/main.js"))?;
+
     if let Some(ref css) = cx.shared.css_file_extension {
         let out = cx.dst.join("theme.css");
         try_err!(fs::copy(css, out), css);
diff --git a/src/librustdoc/html/static/main.js b/src/librustdoc/html/static/main.js
index a9a5bd5de05..659bed18b00 100644
--- a/src/librustdoc/html/static/main.js
+++ b/src/librustdoc/html/static/main.js
@@ -122,6 +122,10 @@
             }
         }
         document.getElementsByTagName("body")[0].style.marginTop = '45px';
+        var themePicker = document.getElementById("theme-picker");
+        if (themePicker) {
+            themePicker.style.position = "fixed";
+        }
     }
 
     function hideSidebar() {
@@ -136,6 +140,10 @@
             filler.remove();
         }
         document.getElementsByTagName("body")[0].style.marginTop = '';
+        var themePicker = document.getElementById("theme-picker");
+        if (themePicker) {
+            themePicker.style.position = "absolute";
+        }
     }
 
     // used for special search precedence
@@ -1532,7 +1540,9 @@
                 ul.appendChild(li);
             }
             div.appendChild(ul);
-            sidebar.appendChild(div);
+            if (sidebar) {
+                sidebar.appendChild(div);
+            }
         }
 
         block("primitive", "Primitive Types");
diff --git a/src/librustdoc/html/static/rustdoc.css b/src/librustdoc/html/static/rustdoc.css
index 34b04de8673..c1ca86e3292 100644
--- a/src/librustdoc/html/static/rustdoc.css
+++ b/src/librustdoc/html/static/rustdoc.css
@@ -360,7 +360,8 @@ ul.item-list > li > .out-of-band {
 }
 
 h4 > code, h3 > code, .invisible > code {
-	position: inherit;
+	max-width: calc(100% - 41px);
+	display: block;
 }
 
 .in-band, code {
@@ -376,6 +377,7 @@ h4 > code, h3 > code, .invisible > code {
 	margin: 0px;
 	padding: 0px;
 	display: inline-block;
+	max-width: calc(100% - 43px);
 }
 
 .in-band > code {
@@ -1140,3 +1142,37 @@ kbd {
 	border-radius: 3px;
 	box-shadow: inset 0 -1px 0;
 }
+
+#theme-picker {
+	position: absolute;
+	left: 211px;
+	top: 17px;
+	padding: 4px;
+	border: 1px solid;
+	border-radius: 3px;
+	cursor: pointer;
+}
+
+#theme-choices {
+	display: none;
+	position: absolute;
+	left: -1px;
+	top: 30px;
+	border: 1px solid;
+	border-radius: 3px;
+	z-index: 1;
+}
+
+#theme-choices > div {
+	border-top: 1px solid;
+	padding: 4px;
+	text-align: center;
+}
+
+@media (max-width: 700px) {
+	#theme-picker {
+		left: 109px;
+		top: 7px;
+		z-index: 1;
+	}
+}
diff --git a/src/librustdoc/html/static/themes/dark.css b/src/librustdoc/html/static/themes/dark.css
new file mode 100644
index 00000000000..a8245d808c9
--- /dev/null
+++ b/src/librustdoc/html/static/themes/dark.css
@@ -0,0 +1,382 @@
+/**
+ * Copyright 2015 The Rust Project Developers. See the COPYRIGHT
+ * file at the top-level directory of this distribution and at
+ * http://rust-lang.org/COPYRIGHT.
+ *
+ * Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
+ * http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
+ * <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
+ * option. This file may not be copied, modified, or distributed
+ * except according to those terms.
+ */
+
+body {
+	background-color: #353535;
+	color: #ddd;
+}
+
+h1, h2, h3:not(.impl):not(.method):not(.type):not(.tymethod), h4:not(.method):not(.type):not(.tymethod) {
+	color: #ddd;
+}
+h1.fqn {
+	border-bottom-color: #d2d2d2;
+}
+h2, h3:not(.impl):not(.method):not(.type):not(.tymethod), h4:not(.method):not(.type):not(.tymethod) {
+	border-bottom-color: #d2d2d2;
+}
+
+.in-band {
+	background-color: #353535;
+}
+
+.invisible {
+	background: rgba(0, 0, 0, 0);
+}
+
+.docblock code, .docblock-short code {
+	background-color: #2A2A2A;
+}
+pre {
+	background-color: #2A2A2A;
+}
+
+.sidebar {
+	background-color: #505050;
+}
+
+.sidebar .current {
+	background-color: #333;
+}
+
+.source .sidebar {
+	background-color: #353535;
+}
+
+.sidebar .location {
+	border-color: #fff;
+	background: #575757;
+	color: #DDD;
+}
+
+.sidebar .version {
+	border-bottom-color: #DDD;
+}
+
+.sidebar-title {
+	border-top-color: #777;
+	border-bottom-color: #777;
+}
+
+.block a:hover {
+	background: #444;
+}
+
+.line-numbers span { color: #3B91E2; }
+.line-numbers .line-highlighted {
+	background-color: #0a042f !important;
+}
+
+.docblock h1, .docblock h2, .docblock h3, .docblock h4, .docblock h5 {
+	border-bottom-color: #DDD;
+}
+
+.docblock table {
+	border-color: #ddd;
+}
+
+.docblock table td {
+	border-top-color: #ddd;
+	border-bottom-color: #ddd;
+}
+
+.docblock table th {
+	border-top-color: #ddd;
+	border-bottom-color: #ddd;
+}
+
+:target { background: #494a3d; }
+
+:target > .in-band {
+	background: #494a3d;
+}
+
+.content .method .where,
+.content .fn .where,
+.content .where.fmt-newline {
+	color: #ddd;
+}
+
+.content .highlighted {
+	color: #eee !important;
+	background-color: #333;
+}
+.content .highlighted a, .content .highlighted span { color: #eee !important; }
+.content .highlighted.trait { background-color: #013191; }
+.content .highlighted.mod { background-color: #803a1b; }
+.content .highlighted.externcrate { background-color: #afc6e4; }
+.content .highlighted.enum { background-color: #5b4e68; }
+.content .highlighted.struct { background-color: #194e9f; }
+.content .highlighted.fn,
+.content .highlighted.method,
+.content .highlighted.tymethod { background-color: #4950ed; }
+.content .highlighted.type { background-color: #38902c; }
+.content .highlighted.foreigntype { background-color: #f5c4ff; }
+.content .highlighted.macro { background-color: #8ce488; }
+.content .highlighted.constant,
+.content .highlighted.static { background-color: #c3e0ff; }
+.content .highlighted.primitive { background-color: #9aecff; }
+
+.content span.enum, .content a.enum, .block a.current.enum { color: #508157; }
+.content span.struct, .content a.struct, .block a.current.struct { color: #df3600; }
+.content span.type, .content a.type, .block a.current.type { color: #ba5d00; }
+.content span.foreigntype, .content a.foreigntype, .block a.current.foreigntype { color: #cd00e2; }
+.content span.macro, .content a.macro, .block a.current.macro { color: #068000; }
+.content span.union, .content a.union, .block a.current.union { color: #767b27; }
+.content span.constant, .content a.constant, .block a.current.constant,
+.content span.static, .content a.static, .block a.current.static { color: #546e8a; }
+.content span.primitive, .content a.primitive, .block a.current.primitive { color: #2c8093; }
+.content span.externcrate,
+.content span.mod, .content a.mod, .block a.current.mod { color: #967F00; }
+.content span.trait, .content a.trait, .block a.current.trait { color: #7c5af3; }
+.content span.fn, .content a.fn, .block a.current.fn,
+.content span.method, .content a.method, .block a.current.method,
+.content span.tymethod, .content a.tymethod, .block a.current.tymethod,
+.content .fnname{ color: #2BAB63; }
+
+pre.rust .comment { color: #4D4D4C; }
+pre.rust .doccomment { color: #8E908C; }
+
+nav {
+	border-bottom-color: #4e4e4e;
+}
+nav.main .current {
+	border-top-color: #eee;
+	border-bottom-color: #eee;
+}
+nav.main .separator {
+	border-color: #eee;
+}
+a {
+	color: #ddd;
+}
+
+.docblock a, .docblock-short a, .stability a {
+	color: #D2991D;
+}
+
+a.test-arrow {
+	color: #dedede;
+}
+
+.collapse-toggle {
+	color: #999;
+}
+
+.search-input {
+	color: #111;
+	box-shadow: 0 0 0 1px #000, 0 0 0 2px transparent;
+	background-color: #f0f0f0;
+}
+
+.search-input:focus {
+	border-color: #008dfd;
+}
+
+.stab.unstable { background: #FFF5D6; border-color: #FFC600; color: #404040; }
+.stab.deprecated { background: #F3DFFF; border-color: #7F0087;  color: #404040; }
+.stab.portability { background: #C4ECFF; border-color: #7BA5DB;  color: #404040; }
+
+.module-item .stab {
+	color: #ddd;
+}
+
+#help > div {
+	background: #e9e9e9;
+	border-color: #bfbfbf;
+}
+
+#help dt {
+	border-color: #bfbfbf;
+	background: #fff;
+}
+
+.since {
+	color: grey;
+}
+
+tr.result span.primitive::after {
+	color: black;
+}
+
+.line-numbers :target { background-color: transparent; }
+
+/* Code highlighting */
+pre.rust .kw { color: #8959A8; }
+pre.rust .kw-2, pre.rust .prelude-ty { color: #4271AE; }
+pre.rust .number, pre.rust .string { color: #718C00; }
+pre.rust .self, pre.rust .bool-val, pre.rust .prelude-val,
+pre.rust .attribute, pre.rust .attribute .ident { color: #C82829; }
+pre.rust .macro, pre.rust .macro-nonterminal { color: #3E999F; }
+pre.rust .lifetime { color: #B76514; }
+pre.rust .question-mark {
+	color: #ff9011;
+}
+
+a.test-arrow {
+	background-color: rgba(78, 139, 202, 0.2);
+}
+
+a.test-arrow:hover{
+	background-color: #4e8bca;
+}
+
+.toggle-label {
+	color: #999;
+}
+
+:target > code {
+	background: #FDFFD3;
+}
+
+pre.compile_fail {
+	border-left: 2px solid rgba(255,0,0,.6);
+}
+
+pre.compile_fail:hover, .information:hover + pre.compile_fail {
+	border-left: 2px solid #f00;
+}
+
+pre.ignore {
+	border-left: 2px solid rgba(255,142,0,.6);
+}
+
+pre.ignore:hover, .information:hover + pre.ignore {
+	border-left: 2px solid #ff9200;
+}
+
+.tooltip.compile_fail {
+	color: rgba(255,0,0,.6);
+}
+
+.information > .compile_fail:hover {
+	color: #f00;
+}
+
+.tooltip.ignore {
+	color: rgba(255,142,0,.6);
+}
+
+.information > .ignore:hover {
+	color: rgba(255,142,0,1);
+}
+
+.search-failed > a {
+	color: #0089ff;
+}
+
+.tooltip .tooltiptext {
+	background-color: black;
+	color: #fff;
+}
+
+.tooltip .tooltiptext::after {
+	border-color: transparent black transparent transparent;
+}
+
+.important-traits .tooltip .tooltiptext {
+	background-color: white;
+	color: black;
+	border-color: black;
+}
+
+#titles > div {
+	border-bottom-color:  #ccc;
+}
+
+#titles > div.selected {
+	border-bottom-color: #0078ee;
+}
+
+#titles > div:hover {
+	border-bottom-color: #0089ff;
+}
+
+#titles > div > div.count {
+	color: #888;
+}
+
+.modal {
+	background-color: rgba(0,0,0,0.3);
+}
+
+.modal-content {
+	background-color: #272727;
+	border-color: #999;
+}
+
+.modal-content > .close {
+	background-color: #272727;
+	border-color: #999;
+}
+
+.modal-content > .close:hover {
+	background-color: #ff1f1f;
+	color: white;
+}
+
+.modal-content > .whiter {
+	background-color: #272727;
+}
+
+.modal-content > .close:hover + .whiter {
+	background-color: #ff1f1f;
+}
+
+@media (max-width: 700px) {
+	.sidebar-menu {
+		background-color: #505050;
+		border-bottom-color: #e0e0e0;
+		border-right-color: #e0e0e0;
+	}
+
+	.sidebar-elems {
+		background-color: #505050;
+		border-right-color: #000;
+	}
+
+	#sidebar-filler {
+		background-color: #505050;
+		border-bottom-color: #e0e0e0;
+	}
+}
+
+kbd {
+	color: #444d56;
+	background-color: #fafbfc;
+	border-color: #d1d5da;
+	border-bottom-color: #c6cbd1;
+	box-shadow-color: #c6cbd1;
+}
+
+#theme-picker {
+	border-color: #e0e0e0;
+}
+
+#theme-choices {
+	border-color: #e0e0e0;
+	background-color: #353535;
+}
+
+#theme-choices > div {
+	border-top: #e0e0e0;
+}
+
+#theme-choices > div:hover {
+	background-color: #444;
+}
+
+@media (max-width: 700px) {
+	#theme-picker {
+		background: #353535;
+	}
+}
\ No newline at end of file
diff --git a/src/librustdoc/html/static/styles/main.css b/src/librustdoc/html/static/themes/main.css
index bd740562424..84b21e7239f 100644
--- a/src/librustdoc/html/static/styles/main.css
+++ b/src/librustdoc/html/static/themes/main.css
@@ -351,3 +351,26 @@ kbd {
 	border-bottom-color: #c6cbd1;
 	box-shadow-color: #c6cbd1;
 }
+
+#theme-picker {
+	border-color: #e0e0e0;
+}
+
+#theme-choices {
+	border-color: #ccc;
+	background-color: #fff;
+}
+
+#theme-choices > div {
+	border-top: #e0e0e0;
+}
+
+#theme-choices > div:hover {
+	background-color: #eee;
+}
+
+@media (max-width: 700px) {
+	#theme-picker {
+		background: #fff;
+	}
+}
author	Guillaume Gomez <guillaume1.gomez@gmail.com>	2018-01-20 21:12:00 +0100
committer	Guillaume Gomez <guillaume1.gomez@gmail.com>	2018-01-21 17:34:55 +0100
commit	003b2bc1c65251ec2fc80b78ed91c43fb35402ec (patch)
tree	ecd2f010af03127f8dfe3ba2e6847f8538f5bde1 /src
parent	3001ab10b96dd495f4c579936a592dc993388568 (diff)
download	rust-003b2bc1c65251ec2fc80b78ed91c43fb35402ec.tar.gz rust-003b2bc1c65251ec2fc80b78ed91c43fb35402ec.zip