mirror of
https://github.com/openjdk/jdk.git
synced 2026-03-14 18:03:44 +00:00
8367321: Fix CSS bugs in dark theme
8366942: Dark mode pages briefly blink before going dark Reviewed-by: nbenalla, liach
This commit is contained in:
Hannes Wallnöfer
parent
0f2a95c15d
commit
8a20656ed0
@ -378,7 +378,8 @@ public class Head extends Content {
|
||||
mainBodyScript.append("const pathtoroot = ")
|
||||
.appendStringLiteral(ptrPath + "/")
|
||||
.append(";\n")
|
||||
.append("loadScripts(document, 'script');");
|
||||
.append("loadScripts();\n")
|
||||
.append("initTheme();\n");
|
||||
}
|
||||
addScriptElement(head, DocPaths.JQUERY_JS);
|
||||
addScriptElement(head, DocPaths.JQUERY_UI_JS);
|
||||
|
||||
@ -11,12 +11,13 @@ var typeSearchIndex;
|
||||
var memberSearchIndex;
|
||||
var tagSearchIndex;
|
||||
|
||||
var oddRowColor = "odd-row-color";
|
||||
var evenRowColor = "even-row-color";
|
||||
var sortAsc = "sort-asc";
|
||||
var sortDesc = "sort-desc";
|
||||
var tableTab = "table-tab";
|
||||
var activeTableTab = "active-table-tab";
|
||||
const oddRowColor = "odd-row-color";
|
||||
const evenRowColor = "even-row-color";
|
||||
const sortAsc = "sort-asc";
|
||||
const sortDesc = "sort-desc";
|
||||
const tableTab = "table-tab";
|
||||
const activeTableTab = "active-table-tab";
|
||||
const THEMES = Object.freeze(["theme-light", "theme-dark", "theme-os"]);
|
||||
|
||||
const linkIcon = "##REPLACE:doclet.Link_icon##";
|
||||
const linkToSection = "##REPLACE:doclet.Link_to_section##";
|
||||
@ -30,21 +31,20 @@ if (typeof hljs !== "undefined") {
|
||||
}
|
||||
}
|
||||
|
||||
function loadScripts(doc, tag) {
|
||||
createElem(doc, tag, 'script-files/search.js');
|
||||
|
||||
createElem(doc, tag, 'module-search-index.js');
|
||||
createElem(doc, tag, 'package-search-index.js');
|
||||
createElem(doc, tag, 'type-search-index.js');
|
||||
createElem(doc, tag, 'member-search-index.js');
|
||||
createElem(doc, tag, 'tag-search-index.js');
|
||||
function loadScripts() {
|
||||
createScript('script-files/search.js');
|
||||
createScript('module-search-index.js');
|
||||
createScript('package-search-index.js');
|
||||
createScript('type-search-index.js');
|
||||
createScript('member-search-index.js');
|
||||
createScript('tag-search-index.js');
|
||||
}
|
||||
|
||||
function createElem(doc, tag, path) {
|
||||
var script = doc.createElement(tag);
|
||||
var scriptElement = doc.getElementsByTagName(tag)[0];
|
||||
function createScript(path) {
|
||||
var script = document.createElement("script");
|
||||
script.src = pathtoroot + path;
|
||||
scriptElement.parentNode.insertBefore(script, scriptElement);
|
||||
var firstScript = document.getElementsByTagName("script")[0];
|
||||
firstScript.parentNode.insertBefore(script, firstScript);
|
||||
}
|
||||
|
||||
// Helper for making content containing release names comparable lexicographically
|
||||
@ -312,21 +312,31 @@ function makeFilterWidget(sidebar, updateToc) {
|
||||
return sidebar;
|
||||
}
|
||||
|
||||
function getTheme() {
|
||||
return localStorage.getItem('theme') || THEMES[0];
|
||||
}
|
||||
|
||||
function initTheme() {
|
||||
document.body.classList.add(getTheme());
|
||||
}
|
||||
|
||||
function setTopMargin() {
|
||||
// Dynamically set scroll margin to accomodate for draft header
|
||||
var headerHeight = Math.ceil(document.querySelector("header").offsetHeight);
|
||||
document.querySelector(":root")
|
||||
.style.setProperty("--nav-height", headerHeight + "px");
|
||||
}
|
||||
|
||||
document.addEventListener("readystatechange", (e) => {
|
||||
if (document.readyState === "interactive") {
|
||||
setTopMargin();
|
||||
}
|
||||
if (sessionStorage.getItem("sidebar") === "hidden") {
|
||||
const sidebar = document.querySelector(".main-grid nav.toc");
|
||||
if (sidebar) sidebar.classList.add("hide-sidebar");
|
||||
if (sessionStorage.getItem("sidebar") === "hidden") {
|
||||
const sidebar = document.querySelector(".main-grid nav.toc");
|
||||
if (sidebar) sidebar.classList.add("hide-sidebar");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(e) {
|
||||
setTopMargin();
|
||||
const subnav = document.querySelector("ol.sub-nav-list");
|
||||
@ -375,13 +385,16 @@ document.addEventListener("DOMContentLoaded", function(e) {
|
||||
themePanelVisible = false;
|
||||
}
|
||||
}
|
||||
var currentTheme = getTheme();
|
||||
themePanel.querySelectorAll("input").forEach(input => {
|
||||
input.removeAttribute("disabled");
|
||||
if (input.id === currentTheme) {
|
||||
input.checked = true;
|
||||
}
|
||||
input.addEventListener("change", e => {
|
||||
setTheme(e.target.value);
|
||||
})
|
||||
});
|
||||
const THEMES = ["theme-light", "theme-dark", "theme-os"];
|
||||
function setTheme(theme) {
|
||||
THEMES.forEach(t => {
|
||||
if (t !== theme) document.body.classList.remove(t);
|
||||
@ -390,7 +403,6 @@ document.addEventListener("DOMContentLoaded", function(e) {
|
||||
localStorage.setItem("theme", theme);
|
||||
document.getElementById(theme).checked = true;
|
||||
}
|
||||
setTheme(localStorage.getItem("theme") || THEMES[0]);
|
||||
makeFilterWidget(sidebar, updateToc);
|
||||
if (tocMenu) {
|
||||
navbar.appendChild(tocMenu);
|
||||
|
||||
@ -73,7 +73,7 @@ body {
|
||||
--selected-link-color: #4a698a;
|
||||
/* Background colors for generated tables */
|
||||
--table-header-color: #ebeff4;
|
||||
--even-row-color: #ffffff;
|
||||
--even-row-color: #fdfdfe;
|
||||
--odd-row-color: #f0f0f2;
|
||||
/* Text color for page title */
|
||||
--title-color: #2c4557;
|
||||
@ -109,17 +109,19 @@ body {
|
||||
/* Colors for invalid tag notifications */
|
||||
--invalid-tag-background-color: #ffe6e6;
|
||||
--invalid-tag-text-color: #000000;
|
||||
--icon-filter: none;
|
||||
--caption-link-color: var(--subnav-link-color);
|
||||
}
|
||||
|
||||
body.theme-dark {
|
||||
--body-text-color: #e8e8e8;
|
||||
--block-text-color: #e8e8e8;
|
||||
--body-background-color: #222528;
|
||||
--body-background-color: #1f2124;
|
||||
--section-background-color: var(--body-background-color);
|
||||
--detail-background-color: var(--body-background-color);
|
||||
--code-background-color: #303940;
|
||||
--mark-background-color: #313131;
|
||||
--detail-block-color: #f4f4f4;
|
||||
--detail-block-color: #31363c;
|
||||
--navbar-background-color: #395A6F;
|
||||
--navbar-text-color: #ffffff;
|
||||
--subnav-background-color: #3d454d;
|
||||
@ -133,11 +135,11 @@ body.theme-dark {
|
||||
--odd-row-color: #2d3135;
|
||||
--title-color: #fff;
|
||||
--link-color: #94badb;
|
||||
--link-color-active: #ffb45b;
|
||||
--toc-background-color: #31363c;
|
||||
--link-color-active: #e8a351;
|
||||
--toc-background-color: #2f3439;
|
||||
--toc-highlight-color: var(--subnav-background-color);
|
||||
--toc-hover-color: #3f4146;
|
||||
--snippet-background-color: #2d363c;
|
||||
--snippet-background-color: #2c353b;
|
||||
--snippet-text-color: var(--block-text-color);
|
||||
--snippet-highlight-color: #f7c590;
|
||||
--pre-background-color: var(--snippet-background-color);
|
||||
@ -155,10 +157,8 @@ body.theme-dark {
|
||||
--button-focus-filter: brightness(104%);
|
||||
--invalid-tag-background-color: #ffe6e6;
|
||||
--invalid-tag-text-color: #000000;
|
||||
div.main-grid img,
|
||||
.inherited-list h3 > button {
|
||||
filter: invert(100%) brightness(160%);
|
||||
}
|
||||
--icon-filter: invert(100%) brightness(160%);
|
||||
--caption-link-color: var(--link-color);
|
||||
}
|
||||
|
||||
/*
|
||||
@ -168,12 +168,12 @@ body.theme-dark {
|
||||
body {
|
||||
--body-text-color: #e8e8e8;
|
||||
--block-text-color: #e8e8e8;
|
||||
--body-background-color: #222528;
|
||||
--body-background-color: #1f2124;
|
||||
--section-background-color: var(--body-background-color);
|
||||
--detail-background-color: var(--body-background-color);
|
||||
--code-background-color: #303940;
|
||||
--mark-background-color: #313131;
|
||||
--detail-block-color: #f4f4f4;
|
||||
--detail-block-color: #31363c;
|
||||
--navbar-background-color: #395A6F;
|
||||
--navbar-text-color: #ffffff;
|
||||
--subnav-background-color: #3d454d;
|
||||
@ -187,11 +187,11 @@ body.theme-dark {
|
||||
--odd-row-color: #2d3135;
|
||||
--title-color: #fff;
|
||||
--link-color: #94badb;
|
||||
--link-color-active: #ffb45b;
|
||||
--toc-background-color: #31363c;
|
||||
--link-color-active: #e8a351;
|
||||
--toc-background-color: #2f3439;
|
||||
--toc-highlight-color: var(--subnav-background-color);
|
||||
--toc-hover-color: #3f4146;
|
||||
--snippet-background-color: #2d363c;
|
||||
--snippet-background-color: #2c353b;
|
||||
--snippet-text-color: var(--block-text-color);
|
||||
--snippet-highlight-color: #f7c590;
|
||||
--pre-background-color: var(--snippet-background-color);
|
||||
@ -209,15 +209,13 @@ body.theme-dark {
|
||||
--button-focus-filter: brightness(104%);
|
||||
--invalid-tag-background-color: #ffe6e6;
|
||||
--invalid-tag-text-color: #000000;
|
||||
div.main-grid img,
|
||||
.inherited-list h3 > button {
|
||||
filter: invert(100%) brightness(160%);
|
||||
}
|
||||
--icon-filter: invert(100%) brightness(160%);
|
||||
--caption-link-color: var(--link-color);
|
||||
}
|
||||
|
||||
body.theme-light {
|
||||
--body-text-color: #282828;
|
||||
--block-text-color: #282828;
|
||||
--body-text-color: #181818;
|
||||
--block-text-color: #181818;
|
||||
--body-background-color: #ffffff;
|
||||
--section-background-color: var(--body-background-color);
|
||||
--detail-background-color: var(--body-background-color);
|
||||
@ -233,7 +231,7 @@ body.theme-dark {
|
||||
--selected-text-color: #253441;
|
||||
--selected-link-color: #4a698a;
|
||||
--table-header-color: #ebeff4;
|
||||
--even-row-color: #ffffff;
|
||||
--even-row-color: #fdfdfe;
|
||||
--odd-row-color: #f0f0f2;
|
||||
--title-color: #2c4557;
|
||||
--link-color: #437291;
|
||||
@ -259,10 +257,8 @@ body.theme-dark {
|
||||
--button-focus-filter: brightness(104%);
|
||||
--invalid-tag-background-color: #ffe6e6;
|
||||
--invalid-tag-text-color: #000000;
|
||||
div.main-grid img,
|
||||
.inherited-list h3 > button {
|
||||
filter: none;
|
||||
}
|
||||
--icon-filter: none;
|
||||
--caption-link-color: var(--subnav-link-color);
|
||||
}
|
||||
}
|
||||
/*
|
||||
@ -288,6 +284,9 @@ div.main-grid {
|
||||
max-width: var(--max-content-width);
|
||||
margin: var(--content-margin);
|
||||
}
|
||||
div.main-grid img {
|
||||
filter: var(--icon-filter);
|
||||
}
|
||||
a:link, a:visited {
|
||||
text-decoration:none;
|
||||
color:var(--link-color);
|
||||
@ -909,12 +908,12 @@ ul.preview-feature-list input {
|
||||
.caption a:visited,
|
||||
.inherited-list h3 a:link,
|
||||
.inherited-list h3 a:visited {
|
||||
color:var(--subnav-link-color);
|
||||
color:var(--caption-link-color);
|
||||
}
|
||||
.caption a:hover,
|
||||
.caption a:active,
|
||||
.inherited-list.expanded h3 a:hover,
|
||||
.inherited-list.expanded h3 a:active {
|
||||
.inherited-list h3 a:hover,
|
||||
.inherited-list h3 a:active {
|
||||
color: var(--link-color-active);
|
||||
}
|
||||
div.table-tabs {
|
||||
@ -1539,6 +1538,7 @@ section[class$="-details"] .detail > div {
|
||||
height: 1.6em;
|
||||
vertical-align: middle;
|
||||
top: -2px;
|
||||
filter: var(--icon-filter);
|
||||
}
|
||||
.inherited-list h3:has(button) {
|
||||
padding-left: 2px;
|
||||
|
||||
@ -427,7 +427,8 @@ public class TestSearch extends JavadocTester {
|
||||
<script type="text/javascript" src="script-files/jquery-ui.min.js"></script>""",
|
||||
"""
|
||||
const pathtoroot = "./";
|
||||
loadScripts(document, 'script');""",
|
||||
loadScripts();
|
||||
initTheme();""",
|
||||
"<div class=\"nav-list-search\">",
|
||||
"""
|
||||
<li><a href="search.html">Search</a></li>""",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user