infernap12/jdk
1
0
Fork 0
mirror of https://github.com/openjdk/jdk.git synced 2026-01-28 03:58:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

8370612: Simplify implementation of dark theme

Browse Source 
8371021: Tab order in theme picker is broken

Reviewed-by: jlamperth, liach
This commit is contained in:
Hannes Wallnöfer 2025-11-10 10:06:09 +00:00
parent c0b82ff2e5
commit 49f51f9450
9 changed files with 113 additions and 418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/Navigation.java
View File

@ -500,14 +500,28 @@ public class Navigation {
private void addThemeSwitcher(Content target) {
var selectTheme = contents.getContent("doclet.theme.select_theme");
target.add(HtmlTree.LI(HtmlTree.BUTTON(HtmlIds.THEME_BUTTON)
.add(HtmlTree.IMG(pathToRoot.resolve(DocPaths.RESOURCE_FILES).resolve(DocPaths.SUN_SVG),
selectTheme.toString()).addStyle(HtmlIds.THEME_LIGHT.name()))
.add(HtmlTree.IMG(pathToRoot.resolve(DocPaths.RESOURCE_FILES).resolve(DocPaths.MOON_SVG),
selectTheme.toString()).addStyle(HtmlIds.THEME_DARK.name()))
.put(HtmlAttr.ARIA_LABEL, selectTheme.toString())
.put(HtmlAttr.TITLE, selectTheme.toString())));
}
private void addThemePanel(Content target) {
var selectTheme = contents.getContent("doclet.theme.select_theme");
target.add(HtmlTree.DIV(HtmlIds.THEME_PANEL)
.add(HtmlTree.DIV(selectTheme))
.add(HtmlTree.DIV(HtmlTree.LABEL(HtmlIds.THEME_LIGHT.name(), Text.EMPTY)
.add(HtmlTree.INPUT(HtmlAttr.InputType.RADIO, HtmlIds.THEME_LIGHT)
.put(HtmlAttr.NAME, "theme").put(HtmlAttr.VALUE, HtmlIds.THEME_LIGHT.name()))
.add(HtmlTree.SPAN(contents.getContent("doclet.theme.light"))))
.add(HtmlTree.LABEL(HtmlIds.THEME_DARK.name(), Text.EMPTY)
.add(HtmlTree.INPUT(HtmlAttr.InputType.RADIO, HtmlIds.THEME_DARK)
.put(HtmlAttr.NAME, "theme").put(HtmlAttr.VALUE, HtmlIds.THEME_DARK.name()))
.add(HtmlTree.SPAN(contents.getContent("doclet.theme.dark"))))
.add(HtmlTree.LABEL(HtmlIds.THEME_OS.name(), Text.EMPTY)
.add(HtmlTree.INPUT(HtmlAttr.InputType.RADIO, HtmlIds.THEME_OS)
.put(HtmlAttr.NAME, "theme").put(HtmlAttr.VALUE, HtmlIds.THEME_OS.name()))
.add(HtmlTree.SPAN(contents.getContent("doclet.theme.system"))))));
}
private void addSearch(Content target) {
var resources = configuration.getDocResources();
var inputText = HtmlTree.INPUT(HtmlAttr.InputType.TEXT, HtmlIds.SEARCH_INPUT)
@ -557,6 +571,7 @@ public class Navigation {
.put(HtmlAttr.TITLE, rowListTitle);
addMainNavLinks(navList);
navContent.add(navList);
addThemePanel(navContent);
var aboutDiv = HtmlTree.DIV(HtmlStyles.aboutLanguage, aboutContent);
navContent.add(aboutDiv);
navigationBar.add(HtmlTree.DIV(HtmlStyles.topNav, navContent).setId(HtmlIds.NAVBAR_TOP));
@ -574,22 +589,6 @@ public class Navigation {
breadcrumbNav.addAll(subNavLinks, HtmlTree::LI);
subNavContent.addUnchecked(breadcrumbNav);
var selectTheme = contents.getContent("doclet.theme.select_theme");
subNavContent.add(HtmlTree.DIV(HtmlIds.THEME_PANEL)
.add(HtmlTree.DIV(selectTheme))
.add(HtmlTree.DIV(HtmlTree.LABEL(HtmlIds.THEME_LIGHT.name(), Text.EMPTY)
.add(HtmlTree.INPUT(HtmlAttr.InputType.RADIO, HtmlIds.THEME_LIGHT)
.put(HtmlAttr.NAME, "theme").put(HtmlAttr.VALUE, HtmlIds.THEME_LIGHT.name()))
.add(HtmlTree.SPAN(contents.getContent("doclet.theme.light"))))
.add(HtmlTree.LABEL(HtmlIds.THEME_DARK.name(), Text.EMPTY)
.add(HtmlTree.INPUT(HtmlAttr.InputType.RADIO, HtmlIds.THEME_DARK)
.put(HtmlAttr.NAME, "theme").put(HtmlAttr.VALUE, HtmlIds.THEME_DARK.name()))
.add(HtmlTree.SPAN(contents.getContent("doclet.theme.dark"))))
.add(HtmlTree.LABEL(HtmlIds.THEME_OS.name(), Text.EMPTY)
.add(HtmlTree.INPUT(HtmlAttr.InputType.RADIO, HtmlIds.THEME_OS)
.put(HtmlAttr.NAME, "theme").put(HtmlAttr.VALUE, HtmlIds.THEME_OS.name()))
.add(HtmlTree.SPAN(contents.getContent("doclet.theme.system"))))));
if (options.createIndex() && documentedPage != PageMode.SEARCH) {
addSearch(subNavContent);
}

126
src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/highlight.css
View File

@ -65,7 +65,7 @@
/* ignored */
}
body.theme-dark {
:root[data-theme="theme-dark"] {
.hljs-title.function_,
.hljs-template-variable {
color: #66bcce;
@ -126,127 +126,3 @@ body.theme-dark {
/* ignored */
}
}
@media (prefers-color-scheme: dark) {
.hljs-title.function_,
.hljs-template-variable {
color: #66bcce;
}
.hljs-code,
.hljs-comment,
.hljs-quote {
color:#9d9d9d;
font-style: italic;
}
.hljs-meta {
color: #836F00;
}
.hljs-symbol,
.hljs-template-tag,
.hljs-keyword,
.hljs-literal,
.hljs-name,
.hljs-built_in,
.hljs-char.escape_ {
color: #88aece;
}
.hljs-variable,
.hljs-property,
.hljs-attr,
.hljs-section {
color: #c59bc1;
}
.hljs-attribute {
color: #c59bc1;
}
.hljs-regexp,
.hljs-number {
color: #cfe374;
}
.hljs-link {
color: #b5bd68;
}
.hljs-string {
color: #b5bd68;
}
.hljs-doctag {
text-decoration: underline;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-subst,
.hljs-title,
.hljs-params,
.hljs-bullet,
.hljs-formula,
.hljs-tag,
.hljs-type {
/* ignored */
}
body.theme-light {
.hljs-title.function_,
.hljs-template-variable {
color: #00738F;
}
.hljs-code,
.hljs-comment,
.hljs-quote {
color: #6e6e71;
font-style: italic;
}
.hljs-meta {
color: #836F00;
}
.hljs-symbol,
.hljs-template-tag,
.hljs-keyword,
.hljs-literal,
.hljs-name,
.hljs-built_in,
.hljs-char.escape_ {
color: #0C40C2;
}
.hljs-variable,
.hljs-property,
.hljs-attr,
.hljs-section {
color: #841191;
}
.hljs-attribute {
color: #164ad9;
}
.hljs-regexp,
.hljs-number {
color: #104BEB;
}
.hljs-link {
color: #47688a;
}
.hljs-string {
color: #008313;
}
.hljs-doctag {
text-decoration: underline;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-subst,
.hljs-title,
.hljs-params,
.hljs-bullet,
.hljs-formula,
.hljs-tag,
.hljs-type {
/* ignored */
}
}
}

46
src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template
View File

@ -17,7 +17,9 @@ 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 THEME_LIGHT = "theme-light";
const THEME_DARK = "theme-dark";
const THEME_OS = "theme-os";
const linkIcon = "##REPLACE:doclet.Link_icon##";
const linkToSection = "##REPLACE:doclet.Link_to_section##";
@ -320,12 +322,21 @@ function makeFilterWidget(sidebar, updateToc) {
return sidebar;
}
const osDarkTheme = window.matchMedia("(prefers-color-scheme: dark)");
osDarkTheme.addEventListener("change", e => {
if (getTheme() === THEME_OS) {
setTheme(THEME_OS);
}
});
function getTheme() {
return localStorage.getItem('theme') || THEMES[0];
return localStorage.getItem("theme") || THEME_LIGHT;
}
function setTheme(theme) {
var value = theme !== THEME_OS ? theme : osDarkTheme.matches ? THEME_DARK : THEME_LIGHT;
document.documentElement.setAttribute("data-theme", value);
}
function initTheme() {
document.body.classList.add(getTheme());
setTheme(getTheme());
}
function setTopMargin() {
@ -347,7 +358,6 @@ document.addEventListener("readystatechange", (e) => {
document.addEventListener("DOMContentLoaded", function(e) {
setTopMargin();
const subnav = document.querySelector("ol.sub-nav-list");
const keymap = new Map();
const searchInput = document.getElementById("search-input")
|| document.getElementById("page-search-input");
@ -360,10 +370,9 @@ document.addEventListener("DOMContentLoaded", function(e) {
keymap.set(".", filterInput);
}
// Clone TOC sidebar to header for mobile navigation
const navbar = document.querySelector("div#navbar-top");
const sidebar = document.querySelector(".main-grid nav.toc");
const main = document.querySelector(".main-grid main");
const mainnav = navbar.querySelector("ul.nav-list");
const mainnav = document.querySelector("div#navbar-top ul.nav-list");
const toggleButton = document.querySelector("button#navbar-toggle-button");
const tocMenu = sidebar ? sidebar.cloneNode(true) : null;
const themeButton = document.querySelector("button#theme-button");
@ -401,19 +410,22 @@ document.addEventListener("DOMContentLoaded", function(e) {
}
input.addEventListener("change", e => {
setTheme(e.target.value);
localStorage.setItem("theme", e.target.value);
})
});
function setTheme(theme) {
THEMES.forEach(t => {
if (t !== theme) document.body.classList.remove(t);
});
document.body.classList.add(theme);
localStorage.setItem("theme", theme);
document.getElementById(theme).checked = true;
}
themePanel.addEventListener("focusout", e => {
if (e.relatedTarget && !themePanel.contains(e.relatedTarget) && !themeButton.contains(e.relatedTarget)) {
closeThemePanel();
}
});
themePanel.addEventListener("keydown", e => {
if (e.key === "Escape" || e.key === "Enter") {
closeThemePanel();
}
});
makeFilterWidget(sidebar, updateToc);
if (tocMenu) {
navbar.appendChild(tocMenu);
document.querySelector("div#navbar-top").appendChild(tocMenu);
makeFilterWidget(tocMenu, updateToc);
var menuInput = tocMenu.querySelector("input.filter-input");
}
@ -473,7 +485,7 @@ document.addEventListener("DOMContentLoaded", function(e) {
expanded = true;
mainnav.style.display = "block";
mainnav.style.removeProperty("height");
var maxHeight = window.innerHeight - subnav.offsetTop + 4;
var maxHeight = window.innerHeight - document.querySelector("div.sub-nav").offsetTop;
var expandedHeight = Math.min(maxHeight, mainnav.scrollHeight + 10);
if (tocMenu) {
tocMenu.style.display = "flex";

226
src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css
View File

@ -34,22 +34,6 @@
--nav-height: calc(var(--top-nav-height) + var(--sub-nav-height));
--max-content-width: 1500px;
--content-margin: 0 auto;
/* Inline SVG icons for dark theme */
--right-svg-dark: url('data:image/svg+xml; utf8, \
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> \
<path d="m35.763 5.058 38.675 36.885a12.596 12.596 90 0 1 0 18.23L35.763 97.058v-18.32l27.055-25.431a2.975 2.975 90.09 0 0 .007-4.33L35.763 23.38Z" \
style="fill:%23fff;stroke-width:.285806" transform="translate(-5.292 -1.058)"/> \
</svg>');
--glass-svg-dark: url('data:image/svg+xml; utf8, \
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
<path d="M66.37 55.005C64.415 58.958 60.147 63.321 56.153 66l32.478 33.456L99.377 88.99Z" style="fill:%23a1d3ff"/>\
<circle cx="35.072" cy="35.072" r="30.635" style="fill:none;stroke:%23a1d3ff;stroke-width:8"/></svg>');
--x-svg-dark: url('data:image/svg+xml; utf8, \
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
<path d="m8 8 84 84" style="stroke:%23e0e0e0;stroke-width:15"/>\
<path d="M8 92 92 8" style="stroke:%23e0e0e0;stroke-width:15"/></svg>');
}
body {
/* Text colors for body and block elements */
--body-text-color: #181818;
--block-text-color: #181818;
@ -111,9 +95,14 @@ body {
--invalid-tag-text-color: #000000;
--icon-filter: none;
--caption-link-color: var(--subnav-link-color);
/* SVG icons for light theme */
--right-svg: url("right.svg");
--glass-svg: url("glass.svg");
--x-svg: url("x.svg");
--current-theme-svg: url("sun.svg");
}
body.theme-dark {
/* Dark theme variables */
:root[data-theme="theme-dark"] {
--body-text-color: #e8e8e8;
--block-text-color: #e8e8e8;
--body-background-color: #1f2124;
@ -159,107 +148,21 @@ body.theme-dark {
--invalid-tag-text-color: #000000;
--icon-filter: invert(100%) brightness(160%);
--caption-link-color: var(--link-color);
}
/*
* Dark theme
*/
@media (prefers-color-scheme: dark) {
body {
--body-text-color: #e8e8e8;
--block-text-color: #e8e8e8;
--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: #31363c;
--navbar-background-color: #395A6F;
--navbar-text-color: #ffffff;
--subnav-background-color: #3d454d;
--subnav-link-color: #d8dcdf;
--member-heading-background-color: var(--subnav-background-color);
--selected-background-color: #f8981d;
--selected-text-color: #253441;
--selected-link-color: #4a698a;
--table-header-color: #38444d;
--even-row-color: #222528;
--odd-row-color: #2d3135;
--title-color: #fff;
--link-color: #94badb;
--link-color-active: #e8a351;
--toc-background-color: #2f3439;
--toc-highlight-color: var(--subnav-background-color);
--toc-hover-color: #3f4146;
--snippet-background-color: #2c353b;
--snippet-text-color: var(--block-text-color);
--snippet-highlight-color: #f7c590;
--pre-background-color: var(--snippet-background-color);
--pre-text-color: var(--snippet-text-color);
--border-color: #444444;
--table-border-color: #717171;
--tab-border-radius: 2px 2px 0 0;
--search-input-background-color: #303030;
--search-input-text-color: #d0d0d0;
--search-input-placeholder-color: #979797;
--search-tag-background-color: #c6c61e;
--search-tag-text-color: #282828;
--button-border-color: #909090;
--button-active-filter: brightness(96%);
--button-focus-filter: brightness(104%);
--invalid-tag-background-color: #ffe6e6;
--invalid-tag-text-color: #000000;
--icon-filter: invert(100%) brightness(160%);
--caption-link-color: var(--link-color);
}
body.theme-light {
--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);
--code-background-color: #f5f5f5;
--mark-background-color: #f7f7f7;
--detail-block-color: #f4f4f4;
--navbar-background-color: #4D7A97;
--navbar-text-color: #ffffff;
--subnav-background-color: #dee3e9;
--subnav-link-color: #47688a;
--member-heading-background-color: var(--subnav-background-color);
--selected-background-color: #f8981d;
--selected-text-color: #253441;
--selected-link-color: #4a698a;
--table-header-color: #ebeff4;
--even-row-color: #fdfdfe;
--odd-row-color: #f0f0f2;
--title-color: #2c4557;
--link-color: #437291;
--link-color-active: #bb7a2a;
--toc-background-color: #f8f8f8;
--toc-highlight-color: var(--subnav-background-color);
--toc-hover-color: #e9ecf0;
--snippet-background-color: #f2f2f4;
--snippet-text-color: var(--block-text-color);
--snippet-highlight-color: #f7c590;
--pre-background-color: var(--snippet-background-color);
--pre-text-color: var(--snippet-text-color);
--border-color: #e6e6e6;
--table-border-color: #000000;
--tab-border-radius: 2px 2px 0 0;
--search-input-background-color: #ffffff;
--search-input-text-color: #000000;
--search-input-placeholder-color: #757575;
--search-tag-background-color: #ffff66;
--search-tag-text-color: var(--block-text-color);
--button-border-color: #b0b8c8;
--button-active-filter: brightness(96%);
--button-focus-filter: brightness(104%);
--invalid-tag-background-color: #ffe6e6;
--invalid-tag-text-color: #000000;
--icon-filter: none;
--caption-link-color: var(--subnav-link-color);
}
/* Inline SVG icons for dark theme */
--right-svg: url('data:image/svg+xml; utf8, \
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> \
<path d="m35.763 5.058 38.675 36.885a12.596 12.596 90 0 1 0 18.23L35.763 97.058v-18.32l27.055-25.431a2.975 2.975 90.09 0 0 .007-4.33L35.763 23.38Z" \
style="fill:%23fff;stroke-width:.285806" transform="translate(-5.292 -1.058)"/> \
</svg>');
--glass-svg: url('data:image/svg+xml; utf8, \
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> \
<path d="M66.37 55.005C64.415 58.958 60.147 63.321 56.153 66l32.478 33.456L99.377 88.99Z" style="fill:%23a1d3ff"/>\
<circle cx="35.072" cy="35.072" r="30.635" style="fill:none;stroke:%23a1d3ff;stroke-width:8"/></svg>');
--x-svg: url('data:image/svg+xml; utf8, \
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
<path d="m8 8 84 84" style="stroke:%23e0e0e0;stroke-width:15"/>\
<path d="M8 92 92 8" style="stroke:%23e0e0e0;stroke-width:15"/></svg>');
--current-theme-svg: url("moon.svg");
}
/*
* Styles for individual HTML elements.
@ -386,7 +289,6 @@ hr {
height: 100%;
max-width: var(--max-content-width);
margin: var(--content-margin);
position: relative;
}
.top-nav {
background-color:var(--navbar-background-color);
@ -415,6 +317,8 @@ button#theme-button {
height: 32px;
padding: 6px;
margin-left: -6px;
background: var(--current-theme-svg) no-repeat 6px;
background-size: 18px 18px;
background-color: transparent;
border: 1px solid transparent;
border-radius: 6px;
@ -424,26 +328,6 @@ button#theme-button:hover,
button#theme-button:focus-visible {
border: 1px solid var(--button-border-color);
}
button#theme-button img {
display: none;
width: 18px;
}
body.theme-light button#theme-button img.theme-light {
display: inline;
}
body.theme-dark button#theme-button img.theme-dark {
display: inline;
}
@media (prefers-color-scheme: dark) {
body.theme-os button#theme-button img.theme-dark {
display: inline;
}
}
@media (prefers-color-scheme: light) {
body.theme-os button#theme-button img.theme-light {
display: inline;
}
}
div#theme-panel {
display: none;
position: fixed;
@ -507,22 +391,11 @@ ol.sub-nav-list li {
margin-right: -4px;
}
ol.sub-nav-list li:not(:first-child) {
background: url("right.svg") no-repeat 3px;
background: var(--right-svg) no-repeat 3px;
background-size: 10px;
padding-left: 17px;
list-style: none;
}
body.theme-dark ol.sub-nav-list li:not(:first-child) {
background-image: var(--right-svg-dark);
}
@media (prefers-color-scheme: dark) {
ol.sub-nav-list li:not(:first-child) {
background-image: var(--right-svg-dark);
}
body.theme-light ol.sub-nav-list li:not(:first-child) {
background-image: url("right.svg");
}
}
ol.sub-nav-list a {
padding: 3px;
}
@ -683,13 +556,10 @@ dl.name-value > dd {
padding: 15px 20px;
}
.main-grid nav.toc > ol.toc-list {
max-height: calc(100vh - var(--nav-height) - 100px);
max-height: calc(100vh - var(--nav-height) - 110px);
padding-left: 12px;
}
.main-grid nav.toc button {
position: absolute;
bottom: 16px;
z-index: 3;
background-color: var(--toc-background-color);
color: #666666;
font-size: 0.76rem;
@ -697,12 +567,19 @@ dl.name-value > dd {
padding: 6px 10px;
white-space: nowrap;
border: 1px solid transparent;
border-radius: 3px;
}
.main-grid nav.toc button > img {
vertical-align: middle;
width: 16px;
height: 16px;
}
.main-grid nav.toc button.hide-sidebar,
.main-grid nav.toc button.show-sidebar {
position: absolute;
bottom: 15px;
z-index: 3;
}
.main-grid nav.toc button.hide-sidebar {
right: 0;
}
@ -716,7 +593,7 @@ dl.name-value > dd {
.main-grid nav.toc button:hover,
.main-grid nav.toc button:focus {
color: var(--body-text-color);
border: 1px solid var(--subnav-background-color);
border: 1px solid var(--button-border-color);
}
.main-grid nav.toc button:active {
background-color: var(--subnav-background-color);
@ -758,6 +635,7 @@ nav.toc div.toc-header {
nav.toc > ol.toc-list {
overflow: hidden auto;
overscroll-behavior: contain;
height: inherit;
}
nav.toc ol.toc-list {
list-style: none;
@ -1281,7 +1159,7 @@ li.ui-static-link a, li.ui-static-link a:visited {
padding: 3px 4px;
}
input[type="text"] {
background-image:url('glass.svg');
background-image:var(--glass-svg);
background-size:13px;
background-repeat:no-repeat;
background-position:3px 4px;
@ -1294,17 +1172,6 @@ input[type="text"] {
font-size: var(--nav-font-size);
height: 19px;
}
body.theme-dark input[type="text"] {
background-image: var(--glass-svg-dark);
}
@media (prefers-color-scheme: dark) {
input[type="text"] {
background-image: var(--glass-svg-dark);
}
body.theme-light input[type="text"] {
background-image: url('glass.svg');
}
}
input#page-search-input {
width: calc(180px + 10vw);
margin: 10px 0;
@ -1320,7 +1187,7 @@ input.filter-input {
}
input#reset-search, input.reset-filter, input#page-search-reset {
background-color: transparent;
background-image:url('x.svg');
background-image:var(--x-svg);
background-repeat:no-repeat;
background-size:contain;
border:0;
@ -1332,21 +1199,6 @@ input#reset-search, input.reset-filter, input#page-search-reset {
font-size:0;
visibility:hidden;
}
body.theme-dark input#reset-search,
body.theme-dark input.reset-filter,
body.theme-dark input#page-search-reset {
background-image: var(--x-svg-dark);
}
@media (prefers-color-scheme: dark) {
input#reset-search, input.reset-filter, input#page-search-reset {
background-image: var(--x-svg-dark);
}
body.theme-light input#reset-search,
body.theme-light input.reset-filter,
body.theme-light input#page-search-reset {
background-image: url('x.svg');
}
}
input#reset-search {
position:absolute;
right:5px;
@ -1801,7 +1653,7 @@ table.striped > tbody > tr > th {
top: var(--top-nav-height);
left: 40vw;
width: 60vw;
z-index: 7;
z-index: 5;
background-color: var(--toc-background-color);
box-sizing: border-box;
}
@ -1973,7 +1825,7 @@ nav.toc div.toc-header .toc-sort-toggle {
position: static;
display: inline-flex;
align-items: center;
padding: .5em;
padding: 4px;
cursor: pointer;
}

3
test/langtools/jdk/javadoc/doclet/checkStylesheetClasses/CheckStylesheetClasses.java
View File

@ -143,9 +143,6 @@ public class CheckStylesheetClasses {
"search-result-desc", "search-result-label", "search-result-link", "selected",
"sort-asc", "sort-desc", "two-column-search-results", "visible");
// used for themes
removeAll(styleSheetNames, "theme-dark", "theme-light", "theme-os");
// very JDK specific
styleSheetNames.remove("module-graph");
styleSheetNames.remove("sealed-graph");

37
test/langtools/jdk/javadoc/doclet/testNavigation/TestModuleNavigation.java
View File

@ -1,5 +1,5 @@
/*
* Copyright (c) 2018, 2024, Oracle and/or its affiliates. All rights reserved.
* Copyright (c) 2018, 2025, Oracle and/or its affiliates. All rights reserved.
* DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
*
* This code is free software; you can redistribute it and/or modify it
@ -23,7 +23,7 @@
/*
* @test
* @bug 8196027 8196202 8320458 8342705
* @bug 8196027 8196202 8320458 8342705 8371021
* @summary test navigation links
* @modules jdk.compiler/com.sun.tools.javac.api
* jdk.compiler/com.sun.tools.javac.main
@ -36,7 +36,6 @@
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import javadoc.tester.JavadocTester;
import toolbox.ModuleBuilder;
@ -87,9 +86,7 @@ public class TestModuleNavigation extends JavadocTester {
<li><a href="../index-all.html">Index</a></li>
<li><a href="../search.html">Search</a></li>
<li><a href="../help-doc.html#module">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="..\
/resource-files/sun.svg" alt="Select Theme" class="theme-light"><img src="../resource-fil\
es/moon.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("overview-tree.html", true,
@ -101,9 +98,7 @@ public class TestModuleNavigation extends JavadocTester {
<li><a href="index-all.html">Index</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="help-doc.html#tree">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="re\
source-files/sun.svg" alt="Select Theme" class="theme-light"><img src="resource-files/moo\
n.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("deprecated-list.html", true,
@ -115,9 +110,7 @@ public class TestModuleNavigation extends JavadocTester {
<li><a href="index-all.html">Index</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="help-doc.html#deprecated">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="re\
source-files/sun.svg" alt="Select Theme" class="theme-light"><img src="resource-files/moo\
n.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("index-all.html", true,
@ -129,9 +122,7 @@ public class TestModuleNavigation extends JavadocTester {
<li class="nav-bar-cell1-rev">Index</li>
<li><a href="search.html">Search</a></li>
<li><a href="help-doc.html#index">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="re\
source-files/sun.svg" alt="Select Theme" class="theme-light"><img src="resource-files/moo\
n.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("search.html", true,
@ -143,9 +134,7 @@ public class TestModuleNavigation extends JavadocTester {
<li><a href="index-all.html">Index</a></li>
<li class="nav-bar-cell1-rev">Search</li>
<li><a href="help-doc.html#search">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="re\
source-files/sun.svg" alt="Select Theme" class="theme-light"><img src="resource-files/moo\
n.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("help-doc.html", true,
@ -157,9 +146,7 @@ public class TestModuleNavigation extends JavadocTester {
<li><a href="index-all.html">Index</a></li>
<li><a href="search.html">Search</a></li>
<li class="nav-bar-cell1-rev">Help</li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="re\
source-files/sun.svg" alt="Select Theme" class="theme-light"><img src="resource-files/moo\
n.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("m/p1/package-summary.html", true,
@ -172,9 +159,7 @@ public class TestModuleNavigation extends JavadocTester {
<li><a href="../../index-all.html">Index</a></li>
<li><a href="../../search.html">Search</a></li>
<li><a href="../../help-doc.html#package">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="..\
/../resource-files/sun.svg" alt="Select Theme" class="theme-light"><img src="../../resour\
ce-files/moon.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("m/p1/A.html", true,
@ -187,9 +172,7 @@ public class TestModuleNavigation extends JavadocTester {
<li><a href="../../index-all.html">Index</a></li>
<li><a href="../../search.html">Search</a></li>
<li><a href="../../help-doc.html#class">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="..\
/../resource-files/sun.svg" alt="Select Theme" class="theme-light"><img src="../../resour\
ce-files/moon.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
}

46
test/langtools/jdk/javadoc/doclet/testNavigation/TestNavigation.java
View File

@ -25,7 +25,7 @@
* @test
* @bug 7025314 8023700 7198273 8025633 8026567 8081854 8196027 8182765
* 8196200 8196202 8223378 8258659 8261976 8320458 8329537 8350638
* 8342705
* 8342705 8371021
* @summary Make sure the Next/Prev Class links iterate through all types.
* Make sure the navagation is 2 columns, not 3.
* @library /tools/lib ../../lib
@ -71,9 +71,7 @@ public class TestNavigation extends JavadocTester {
<li><a href="index-all.html">Index</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="help-doc.html#overview">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="re\
source-files/sun.svg" alt="Select Theme" class="theme-light"><img src="resource-files/moo\
n.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("pkg/package-summary.html", true,
@ -85,9 +83,7 @@ public class TestNavigation extends JavadocTester {
<li><a href="../index-all.html">Index</a></li>
<li><a href="../search.html">Search</a></li>
<li><a href="../help-doc.html#package">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="..\
/resource-files/sun.svg" alt="Select Theme" class="theme-light"><img src="../resource-fil\
es/moon.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("pkg/A.html", true,
@ -99,9 +95,7 @@ public class TestNavigation extends JavadocTester {
<li><a href="../index-all.html">Index</a></li>
<li><a href="../search.html">Search</a></li>
<li><a href="../help-doc.html#class">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="..\
/resource-files/sun.svg" alt="Select Theme" class="theme-light"><img src="../resource-fil\
es/moon.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("pkg/C.html", true,
@ -113,9 +107,7 @@ public class TestNavigation extends JavadocTester {
<li><a href="../index-all.html">Index</a></li>
<li><a href="../search.html">Search</a></li>
<li><a href="../help-doc.html#class">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="..\
/resource-files/sun.svg" alt="Select Theme" class="theme-light"><img src="../resource-fil\
es/moon.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("pkg/E.html", true,
@ -127,9 +119,7 @@ public class TestNavigation extends JavadocTester {
<li><a href="../index-all.html">Index</a></li>
<li><a href="../search.html">Search</a></li>
<li><a href="../help-doc.html#class">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="..\
/resource-files/sun.svg" alt="Select Theme" class="theme-light"><img src="../resource-fil\
es/moon.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("pkg/I.html", true,
@ -355,9 +345,7 @@ public class TestNavigation extends JavadocTester {
<li><a href="../index-all.html">Index</a></li>
<li><a href="../search.html">Search</a></li>
<li><a href="../help-doc.html#package">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="..\
/resource-files/sun.svg" alt="Select Theme" class="theme-light"><img src="../resource-fil\
es/moon.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("pkg/A.html", true,
@ -369,9 +357,7 @@ public class TestNavigation extends JavadocTester {
<li><a href="../index-all.html">Index</a></li>
<li><a href="../search.html">Search</a></li>
<li><a href="../help-doc.html#class">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="..\
/resource-files/sun.svg" alt="Select Theme" class="theme-light"><img src="../resource-fil\
es/moon.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("pkg/C.html", true,
@ -383,9 +369,7 @@ public class TestNavigation extends JavadocTester {
<li><a href="../index-all.html">Index</a></li>
<li><a href="../search.html">Search</a></li>
<li><a href="../help-doc.html#class">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="..\
/resource-files/sun.svg" alt="Select Theme" class="theme-light"><img src="../resource-fil\
es/moon.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("pkg/E.html", true,
@ -397,9 +381,7 @@ public class TestNavigation extends JavadocTester {
<li><a href="../index-all.html">Index</a></li>
<li><a href="../search.html">Search</a></li>
<li><a href="../help-doc.html#class">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="..\
/resource-files/sun.svg" alt="Select Theme" class="theme-light"><img src="../resource-fil\
es/moon.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""");
checkOutput("pkg/I.html", true,
@ -439,9 +421,7 @@ public class TestNavigation extends JavadocTester {
<li><a href="index-all.html">Index</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="help-doc.html#package">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="re\
source-files/sun.svg" alt="Select Theme" class="theme-light"><img src="resource-files/moo\
n.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""",
"""
<ol class="sub-nav-list">
@ -457,9 +437,7 @@ public class TestNavigation extends JavadocTester {
<li><a href="index-all.html">Index</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="help-doc.html#class">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="re\
source-files/sun.svg" alt="Select Theme" class="theme-light"><img src="resource-files/moo\
n.svg" alt="Select Theme" class="theme-dark"></button></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></button></li>
</ul>""",
"""
<ol class="sub-nav-list">

6
test/langtools/jdk/javadoc/doclet/testSpecTag/TestSpecTag.java
View File

@ -126,10 +126,8 @@ public class TestSpecTag extends JavadocTester {
<li><a href="index-all.html">Index</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="help-doc.html#external-specs">Help</a></li>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"><img src="re\
source-files/sun.svg" alt="Select Theme" class="theme-light"><img src="resource-files/moo\
n.svg" alt="Select Theme" class="theme-dark"></button></li>
</ul>
<li><button id="theme-button" aria-label="Select Theme" title="Select Theme"></b\
utton></li>
""");
}

2
test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java
View File

@ -121,7 +121,7 @@ public class TestStylesheet extends JavadocTester {
"""
input#reset-search, input.reset-filter, input#page-search-reset {
background-color: transparent;
background-image:url('x.svg');
background-image:var(--x-svg);
background-repeat:no-repeat;
background-size:contain;
border:0;