From 088726238664985ebf2bc60deca96f22245e9ce3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hannes=20Walln=C3=B6fer?= Date: Mon, 10 Mar 2025 07:54:17 +0000 Subject: [PATCH] 8344301: Refine stylesheet for API docs Reviewed-by: liach, nbenalla --- .../doclets/formats/html/resources/link.svg | 4 +- .../formats/html/resources/script.js.template | 16 +- .../formats/html/resources/search-page.js | 2 +- .../formats/html/resources/stylesheet.css | 451 +++++++++++------- .../jdk/javadoc/doclet/AccessH1/AccessH1.java | 6 +- .../CheckStylesheetClasses.java | 10 +- .../doclet/testStylesheet/TestStylesheet.java | 63 +-- 7 files changed, 284 insertions(+), 268 deletions(-) diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/link.svg b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/link.svg index 8013f4f7fd9..88760b0efc3 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/link.svg +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/link.svg @@ -1,13 +1,13 @@ - + \ No newline at end of file diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template index 2185b1c951f..f9119833175 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/script.js.template @@ -1,5 +1,5 @@ /* - * Copyright (c) 2013, 2024, Oracle and/or its affiliates. All rights reserved. + * Copyright (c) 2013, 2025, Oracle and/or its affiliates. All rights reserved. * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER. * * Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl/ @@ -232,20 +232,6 @@ document.addEventListener("readystatechange", (e) => { }); document.addEventListener("DOMContentLoaded", function(e) { setTopMargin(); - // Reset animation for type parameter target highlight - document.querySelectorAll("a").forEach((link) => { - link.addEventListener("click", (e) => { - const href = e.currentTarget.getAttribute("href"); - if (href && href.startsWith("#") && href.indexOf("type-param-") > -1) { - const target = document.getElementById(decodeURI(href.substring(1))); - if (target) { - target.style.animation = "none"; - void target.offsetHeight; - target.style.removeProperty("animation"); - } - } - }) - }); // Make sure current element is visible in breadcrumb navigation on small displays const subnav = document.querySelector("ol.sub-nav-list"); if (subnav && subnav.lastElementChild) { diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/search-page.js b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/search-page.js index bcbd9b59f31..dbfb00a1a1a 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/search-page.js +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/search-page.js @@ -114,7 +114,7 @@ $(window).on("load", function() { }); visibleTabs.push(key); } else { - $("" + categories[key] + $("" + categories[key] + " (" + count + ")").appendTo(tabContainer); renderTable(key, r[key]).appendTo(resultContainer); tabContainer = $("
").appendTo(resultContainer); diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css index bdf84dc0f97..dafe74dab0d 100644 --- a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css +++ b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/stylesheet.css @@ -1,5 +1,5 @@ /* - * Copyright (c) 2010, 2024, Oracle and/or its affiliates. All rights reserved. + * Copyright (c) 2010, 2025, Oracle and/or its affiliates. All rights reserved. * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER. * * Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl/ @@ -21,47 +21,58 @@ --block-font-family: 'DejaVu Serif', Georgia, "Times New Roman", Times, serif; --code-font-family: 'DejaVu Sans Mono', monospace; /* Base font sizes for body and code elements */ - --body-font-size: 14px; - --block-font-size: 14px; + --body-font-size: 14.2px; + --block-font-size: 14.4px; --code-font-size: 14px; - --nav-font-size: 13.2px; + --nav-font-size: 13.4px; /* Line height for continuous text blocks */ - --block-line-height: 1.4em; + --block-line-height: 1.5; + --code-line-height: 1.55; /* Text colors for body and block elements */ --body-text-color: #282828; --block-text-color: #282828; /* Background colors for various elements */ --body-background-color: #ffffff; - --section-background-color: #f8f8f8; + --section-background-color: var(--body-background-color); --detail-background-color: #ffffff; + --code-background-color: #f5f5f5; --mark-background-color: #f7f7f7; + --detail-block-color: #f4f4f4; /* Colors for navigation bar and table captions */ --navbar-background-color: #4D7A97; --navbar-text-color: #ffffff; /* Background color for subnavigation and various headers */ --subnav-background-color: #dee3e9; + --subnav-link-color: #47688a; + --member-heading-background-color: var(--subnav-background-color); /* Background and text colors for selected tabs and navigation items */ --selected-background-color: #f8981d; --selected-text-color: #253441; - --selected-link-color: #1f389c; + --selected-link-color: #4a698a; /* Background colors for generated tables */ + --table-header-color: #ebeff4; --even-row-color: #ffffff; - --odd-row-color: #eeeeef; + --odd-row-color: #f0f0f2; /* Text color for page title */ --title-color: #2c4557; /* Text colors for links */ --link-color: #437291; --link-color-active: #bb7a2a; /* Table of contents */ - --toc-background-color: var(--section-background-color); - --toc-link-color: #4a698a; - /* Snippet colors */ - --snippet-background-color: #ebecee; + --toc-background-color: #f8f8f8; + --toc-highlight-color: var(--subnav-background-color); + --toc-hover-color: #e9ecf0; + /* Snippet and pre colors */ + --snippet-background-color: #f0f0f2; --snippet-text-color: var(--block-text-color); --snippet-highlight-color: #f7c590; + --pre-background-color: #f3f3f5; + --pre-text-color: var(--snippet-text-color); /* Border colors for structural elements and user defined tables */ - --border-color: #ededed; + --border-color: #e6e6e6; --table-border-color: #000000; + /* Styles for table tabs */ + --tab-border-radius: 2px 2px 0 0; /* Search input colors */ --search-input-background-color: #ffffff; --search-input-text-color: #000000; @@ -76,9 +87,10 @@ --invalid-tag-text-color: #000000; /* Navigation bar dimensions */ --top-nav-height: 44px; - --sub-nav-height: 34px; + --sub-nav-height: 36px; --nav-height: calc(var(--top-nav-height) + var(--sub-nav-height)); - scroll-behavior: smooth; + --max-content-width: 1500px; + --content-margin: 0 auto; } /* * Styles for individual HTML elements. @@ -99,12 +111,16 @@ body { main [id] { scroll-margin-top: calc(var(--nav-height) + 6px); } +div.main-grid { + max-width: var(--max-content-width); + margin: var(--content-margin); +} a:link, a:visited { text-decoration:none; color:var(--link-color); } nav a:link, nav a:visited { - color: var(--toc-link-color); + color: var(--subnav-link-color); } a[href]:hover, a[href]:active { text-decoration:none; @@ -113,12 +129,17 @@ a[href]:hover, a[href]:active { pre { font-family:var(--code-font-family); font-size:var(--code-font-size); + line-height: var(--code-line-height); + background-color: var(--pre-background-color); + color: var(--pre-text-color); + padding: 8px; + overflow-x:auto; } h1 { - font-size:1.428em; + font-size:1.425em; } h2 { - font-size:1.285em; + font-size:1.28em; } h3 { font-size:1.14em; @@ -133,29 +154,21 @@ h6 { font-size:0.93em; } /* Disable font boosting for selected elements */ -h1, h2, h3, h4, h5, h6, div.member-signature { +h1, h2, h3, h4, h5, h6, div.member-signature, div.member-signature > span { max-height: 1000em; } ul { list-style-type:disc; } -code, tt { +tt { font-family:var(--code-font-family); } -:not(h1, h2, h3, h4, h5, h6, sup, sub, small, big) > :is(code, tt) { +code { + font-family:var(--code-font-family); font-size:var(--code-font-size); - line-height:1.4em; -} -dt code { - font-family:var(--code-font-family); - font-size:1em; - padding-top:4px; -} -.summary-table dt code { - font-family:var(--code-font-family); - font-size:1em; - vertical-align:top; - padding-top:4px; + background-color: var(--code-background-color); + padding: 1px 2px; + border-radius: 3px; } button { font-family: var(--body-font-family); @@ -182,6 +195,8 @@ hr { white-space: nowrap; } .legal-copy { + font-family: var(--body-font-family); + line-height: normal; } /* * Styles for navigation bar. @@ -200,6 +215,8 @@ hr { align-items: center; width: 100%; height: 100%; + max-width: var(--max-content-width); + margin: var(--content-margin); } .top-nav { background-color:var(--navbar-background-color); @@ -243,7 +260,7 @@ div.sub-nav { } ol.sub-nav-list { flex: 1 1 90%; - line-height: 1.8em; + line-height: 1.8; display: inline-flex; overflow: auto; scroll-snap-type: x mandatory; @@ -261,20 +278,19 @@ ol.sub-nav-list li { scroll-snap-align: start; } ol.sub-nav-list li:not(:first-child) { - list-style-type: " > "; - margin-left: 20px; + list-style-type: "> "; + margin-left: 19px; } ol.sub-nav-list a { padding: 3px; } ol.sub-nav-list a.current-selection { - background-color: var(--section-background-color); - border-radius: 4px; + background-color: var(--toc-background-color); + border-radius: 3px; } .sub-nav .nav-list-search { flex: 1 1 10%; - margin:0; - padding:6px; + margin: 0 15px; position:relative; white-space: nowrap; } @@ -290,6 +306,7 @@ ol.sub-nav-list a.current-selection { background-color:var(--selected-background-color); color:var(--selected-text-color); margin: 0 5px; + border-radius: 1px; } .skip-nav { position:absolute; @@ -297,14 +314,6 @@ ol.sub-nav-list a.current-selection { left:-9999px; overflow:hidden; } -/* - * Hide navigation links and search box in print layout - */ -@media print { - ul.nav-list, div.sub-nav { - display:none; - } -} /* * Styles for page header. */ @@ -335,13 +344,28 @@ body.module-declaration-page .block-list h2 { margin:15px 0; overflow-x:auto; } -body.class-declaration-page .summary h3, +body.class-use-page h2 { + margin-top: 20px; +} body.class-declaration-page .details h3 { - background-color:var(--subnav-background-color); + background-color:var(--member-heading-background-color); border:1px solid var(--border-color); - margin:0 0 6px -8px; - padding:7px 5px; + margin:6px 0; + padding:7px; overflow-x:auto; + font-size: 1.08em; +} +body.class-declaration-page section.detail:target > h3, +body.class-declaration-page section.detail > h3:target { + background-color: var(--navbar-background-color); + color: var(--navbar-text-color); +} +body.class-declaration-page section.detail:target > h3 > a.anchor-link > img, +body.class-declaration-page section.detail > h3:target > a.anchor-link > img { + filter: invert(100%) sepia(4%) saturate(98%) hue-rotate(212deg) brightness(160%) contrast(160%); +} +h1 > sup { + font-size: small; } /* * Styles for page layout containers. @@ -351,7 +375,7 @@ body.class-declaration-page .details h3 { flex-direction: row; } .main-grid main { - flex: 3 1 0; + flex: 3.2 1 0; min-width: 240px } .main-grid nav.toc { @@ -359,8 +383,7 @@ body.class-declaration-page .details h3 { min-width: 240px; } main { - clear:both; - padding:10px 20px; + padding:10px 25px; position:relative; } /* Compensate for non-collapsing margins between element description and summary tables */ @@ -378,9 +401,10 @@ dl.notes > dt { color:var(--body-text-color); } dl.notes > dd { - margin:5px 10px 10px 15px; + margin:6px 10px 10px 15px; font-size:var(--block-font-size); font-family:var(--block-font-family); + line-height:var(--block-line-height); } dl.notes > dd > ul, dl.notes > dd > ol { margin-bottom: 1em; @@ -402,7 +426,6 @@ dl.name-value > dd { */ .main-grid nav.toc { background-color: var(--toc-background-color); - border-right: 1px solid var(--border-color); position: sticky; top: calc(var(--nav-height)); max-height: calc(100vh - var(--nav-height)); @@ -424,7 +447,7 @@ dl.name-value > dd { position: absolute; bottom: 16px; z-index: 3; - background-color: var(--section-background-color); + background-color: var(--toc-background-color); color: #666666; font-size: 0.76rem; border: none; @@ -459,7 +482,8 @@ dl.name-value > dd { } .main-grid nav.toc.hide-sidebar { min-width: revert; - max-width: 28px; + background-color: var(--body-background-color); + max-width: 20px; } .main-grid nav.toc.hide-sidebar div.toc-header, .main-grid nav.toc.hide-sidebar ol.toc-list, @@ -487,16 +511,12 @@ nav.toc > ol.toc-list { } nav.toc ol.toc-list { list-style: none; - padding-left: 8px; + padding-left: 0; margin: 0; } -nav.toc ol.toc-list ol.toc-list { - margin-left: 8px; -} nav.toc ol.toc-list li { margin: 0; font-size: var(--nav-font-size); - overflow-x: hidden; } a.current-selection { font-weight: bold; @@ -504,13 +524,25 @@ a.current-selection { nav.toc a { display: block; padding: 8px; + overflow: hidden; + text-overflow: ellipsis; +} +nav.toc ol.toc-list ol.toc-list a { + padding-left: 24px; +} +nav.toc a:hover { + background-color: var(--toc-hover-color); } nav.toc a.current-selection { - background-color: var(--subnav-background-color); + background-color: var(--toc-highlight-color); } /* * Styles for lists. */ +ul.details-list .block > ul, +ul.details-list .notes dd > ul { + margin: 12px 0; +} li.circle { list-style:circle; } @@ -519,8 +551,7 @@ ul.horizontal li { font-size:0.9em; } div.inheritance { - margin:0; - padding:0; + font-size: 0.99em; } div.inheritance div.inheritance { margin-left:2em; @@ -566,61 +597,75 @@ ul.tag-list li:not(:last-child):after, ul.tag-list-long li:not(:last-child):after { content: ", "; - white-space: pre-wrap; } ul.preview-feature-list { list-style: none; margin:0; padding:0.1em; - line-height: 1.6em; + line-height: 1.6; } /* * Styles for tables. */ .summary-table, .details-table { - width:100%; - border-spacing:0; border:1px solid var(--border-color); border-top:0; padding:0; + margin-bottom: 14px; } .caption { - position:relative; - text-align:left; - background-repeat:no-repeat; - color:var(--selected-text-color); - clear:none; - overflow:hidden; - padding: 10px 0 0 1px; - margin:0; + overflow: auto hidden; + padding: 8px 0 0 1px; } -.caption a:link, .caption a:visited { - color:var(--selected-link-color); -} -.caption a:hover, -.caption a:active { - color:var(--navbar-text-color); -} -.caption span { +.caption span, +.inherited-list h3 { + font-size: 0.98em; font-weight:bold; white-space:nowrap; - padding:5px 12px 7px 12px; - display:inline-block; - float:left; - background-color:var(--selected-background-color); - border: none; - height:16px; -} -div.table-tabs { - padding: 10px 0 0 1px; + border-radius: var(--tab-border-radius); margin: 0; } +.caption span { + background-color: var(--navbar-background-color); + padding:5px 12px 7px 12px; + height:16px; + color:var(--navbar-text-color); + display:inline-block; +} +.inherited-list h3 { + background-color: var(--subnav-background-color); + padding:6px 12px 7px 12px; + height:17px; + width: fit-content; + max-width: 93%; +} +/* Background required for captions with links */ +.class-use-page .caption span, +.package-use-page .caption span, +.constants-summary-page .caption span, +.inherited-list.expanded h3 { + background-color: var(--subnav-background-color); + color: var(--block-text-color); +} +.caption a:link, +.caption a:visited, +.inherited-list.expanded h3 a:link, +.inherited-list.expanded h3 a:visited { + color:var(--subnav-link-color); +} +div.table-tabs { + padding: 8px 0 0 1px; + white-space: nowrap; + overflow-x: auto; +} div.table-tabs > button { + font-size: 0.98em; border: none; cursor: pointer; - padding: 5px 12px 7px 12px; + padding: 6px 12px; font-weight: bold; margin-right: 8px; + border-radius: var(--tab-border-radius); } div.table-tabs > .active-table-tab { background: var(--selected-background-color); @@ -635,7 +680,7 @@ div.table-tabs > button.table-tab { grid-template-columns: minmax(400px, max-content) minmax(400px, auto); } div.checkboxes { - line-height: 2em; + line-height: 2; } div.checkboxes > span { margin-left: 10px; @@ -694,20 +739,20 @@ div.checkboxes > label > input { } } .summary-table > div, .details-table > div { - text-align:left; + font-size: var(--nav-font-size); + line-height: 1.6; padding: 8px 3px 3px 7px; overflow: auto hidden; - scrollbar-width: thin; } -.col-first, .col-second, .col-last, .col-constructor-name, .col-summary-item-name { - vertical-align:top; - padding-right:0; - padding-top:8px; - padding-bottom:3px; +.summary-table > div.table-header, .details-table > div.table-header { + font-size: 0.92em; + line-height: 1.2; + height: 18px; } .table-header { - background:var(--subnav-background-color); + background: var(--table-header-color); font-weight: bold; + border-bottom: 1px solid var(--border-color); } /* Sortable table columns */ .table-header[onclick] { @@ -738,31 +783,17 @@ div.checkboxes > label > input { \ '); } -.col-first, .col-first { - font-size:0.93em; -} -.col-second, .col-second, .col-last, .col-constructor-name, .col-summary-item-name, .col-last { - font-size:0.93em; -} .col-first, .col-second, .col-constructor-name { - vertical-align:top; overflow: auto; } -.col-last { - white-space:normal; -} -.col-first a:link, .col-first a:visited, -.col-second a:link, .col-second a:visited, -.col-first a:link, .col-first a:visited, -.col-second a:link, .col-second a:visited, -.col-constructor-name a:link, .col-constructor-name a:visited, -.col-summary-item-name a:link, .col-summary-item-name a:visited { +body:not(.class-declaration-page) .col-first a:link, +.col-summary-item-name a:link { font-weight:bold; } -.even-row-color, .even-row-color .table-header { +.even-row-color { background-color:var(--even-row-color); } -.odd-row-color, .odd-row-color .table-header { +.odd-row-color { background-color:var(--odd-row-color); } /* @@ -773,18 +804,12 @@ div.block { font-family:var(--block-font-family); line-height:var(--block-line-height); } -.col-last div { - padding-top:0; -} -.col-last a { - padding-bottom:3px; -} .module-signature, .package-signature, .type-signature, .member-signature { font-family:var(--code-font-family); - font-size:1em; + font-size:var(--code-font-size); margin:8px 0 14px 0; white-space: pre-wrap; } @@ -797,10 +822,33 @@ div.block { .member-signature .exceptions { display: inline-block; vertical-align: top; - white-space: pre; + white-space: pre-wrap; } .member-signature .type-parameters { - white-space: normal; + white-space: pre-wrap; +} +:is(h1, h2, h3, h4, h5, h6, sup, sub, small, big) code, +[style*=font-size] code { + font-size: inherit; +} +:is(pre, table, sup, sub) code, +section[id$=-description] > dl.notes code, +div.summary-table code { + background-color: inherit; + padding: initial; +} +.doc-file-page main { + font-family: var(--block-font-family); + font-size: var(--block-font-size); + line-height: var(--block-line-height); +} +.doc-file-page main footer { + font-family: var(--body-font-family); + font-size: var(--body-font-size); +} +.tree-page .hierarchy, +.package-tree-page .hierarchy { + line-height: 1.4; } /* * Styles for formatting effect. @@ -816,7 +864,8 @@ div.block { color:var(--block-text-color); } .deprecated-label, .description-from-type-label, .implementation-label, .member-name-link, -.package-hierarchy-label, .type-name-label, .type-name-link, .search-tag-link, .preview-label, .restricted-label { +.package-hierarchy-label, .type-name-label, .type-name-link, .search-tag-link, .preview-label, +.restricted-label { font-weight:bold; } sup.preview-mark, @@ -840,12 +889,17 @@ sup.restricted-mark > a:link { font-family:var(--block-font-family); border-style:solid; border-width:thin; - border-radius:10px; + border-radius:6px; padding:10px; margin-bottom:10px; margin-right:10px; display:inline-block; } +.deprecation-block code, .preview-block code, .restricted-block code { + font-size: 0.97em; + background-color: inherit; + padding: 0; +} div.block div.deprecation-comment { font-style:normal; } @@ -942,26 +996,26 @@ input[type="text"] { background-image:url('glass.png'); background-size:13px; background-repeat:no-repeat; - background-position:2px 3px; + background-position:3px 5px; background-color: var(--search-input-background-color); color: var(--search-input-text-color); border-color: var(--border-color); border-radius: 4px; padding-left:20px; font-size: var(--nav-font-size); - height: 17px; + height: 19px; } -input#search-input, input#page-search-input { +input#page-search-input { width: calc(180px + 10vw); margin: 0; } input#search-input { - margin: 0 4px; + width: 270px; padding-right: 18px; - max-width: 340px; + margin: 0; } input.filter-input { - width: 40%; + width: 44%; max-width: 140px; margin: 0 4px; padding-right: 18px; @@ -980,8 +1034,8 @@ input#reset-search, input.reset-filter { } input#reset-search { position:absolute; - right:15px; - top:11px; + right:5px; + top:7px; } input.reset-filter { position: relative; @@ -1005,20 +1059,12 @@ input::placeholder { } dd > span:target, h1 > span:target { - animation: 2.4s ease-out highlight; + background-color: var(--search-tag-highlight-color); } section.class-description dd > span:target, section.class-description h1 > span:target { scroll-margin-top: 20em; } -@keyframes highlight { - from { - background-color: var(--search-tag-highlight-color); - } - 60% { - background-color: var(--search-tag-highlight-color); - } -} details.page-search-details { display: inline-block; } @@ -1070,25 +1116,45 @@ span#page-search-link { margin: -100px 0 0 100px; z-index: 5; } -.inherited-list { - margin: 10px 0; -} .horizontal-scroll { overflow: auto hidden; } section.class-description { line-height: 1.4; } -.summary section[class$="-summary"], .details section[class$="-details"], -.class-uses .detail, .serialized-class-details { - padding: 0 20px 5px 10px; - border: 1px solid var(--border-color); +.summary section[class$="-summary"], .details section[class$="-details"] { + margin-bottom: 24px; background-color: var(--section-background-color); } -.inherited-list, section[class$="-details"] .detail { - padding:0 0 5px 8px; +body.class-uses section.detail { + padding: 0 25px 5px 10px; + margin: 25px 0; +} +section.serialized-class-details { + padding: 0 20px 5px 10px; + border: 1px solid var(--border-color); + background-color: var(--detail-block-color); +} +section.serialized-class-details .detail { + overflow: auto; + padding-left: 12px; +} +section[class$="-details"] .detail { background-color:var(--detail-background-color); - border:none; +} +section[class$="-details"] .detail > div { + padding-left: 8px; +} +.inherited-list { + margin: 20px 0; + background-color:var(--detail-background-color); +} +.inherited-list > code { + padding: 8px; + display: block; + background-color: var(--code-background-color); + border-radius: 0; + line-height: var(--code-line-height); } .vertical-separator { padding: 0 5px; @@ -1142,10 +1208,10 @@ main a[href*="://"]:focus::after { */ a.anchor-link { opacity: 0; - transition: opacity 0.1s; + transition: opacity 0.1s 0.1s; } :hover > a.anchor-link { - opacity: 80%; + opacity: 90%; } a.anchor-link:hover, a.anchor-link:focus-visible, @@ -1160,7 +1226,7 @@ a.anchor-link > img { * Styles for copy-to-clipboard buttons */ button.copy { - opacity: 70%; + opacity: 60%; border: none; border-radius: 3px; position: relative; @@ -1169,7 +1235,7 @@ button.copy { cursor: pointer; } :hover > button.copy { - opacity: 80%; + opacity: 70%; } button.copy:hover, button.copy:active, @@ -1191,7 +1257,7 @@ button.copy span { top: -0.1em; transition: all 0.1s; font-size: 0.76rem; - line-height: 1.2em; + line-height: 1.2; opacity: 0; } button.copy:hover span, @@ -1213,7 +1279,7 @@ button#page-search-copy img { } button#page-search-copy span { color: var(--body-text-color); - line-height: 1.2em; + line-height: 1.2; padding: 0.2em; top: -0.18em; } @@ -1234,12 +1300,12 @@ button.snippet-copy img { padding: 0.05em 0; } button.snippet-copy span { - line-height: 1.2em; + line-height: 1.2; padding: 0.2em; position: relative; top: -0.5em; } -div.snippet-container:hover button.snippet-copy span { +div.snippet-container button.snippet-copy:hover span { opacity: 100%; } /* @@ -1321,18 +1387,19 @@ table.striped > tbody > tr > th { font-weight: normal; } /** - * Tweak style for small screens. + * Media queries for responsive design */ -@media screen and (max-width: 1050px) { - .summary section[class$="-summary"], .details section[class$="-details"], - .class-uses .detail, .serialized-class-details { - padding: 0 10px 5px 8px; - } - input#search-input { - width: 22vw; +@media (prefers-reduced-motion: reduce) { + :root { + scroll-behavior: auto; } } -@media screen and (max-width: 920px) { +@media screen and (max-width: 1200px) { + input#search-input { + width: 22.5vw; + } +} +@media screen and (max-width: 1000px) { .main-grid nav.toc { display: none; } @@ -1343,13 +1410,13 @@ table.striped > tbody > tr > th { left: 40vw; width: 60vw; z-index: 7; - background-color: var(--section-background-color); + background-color: var(--toc-background-color); box-sizing: border-box; } .top-nav nav.toc div.toc-header { padding: 6px 15px; font-size: 0.94em; - background-color: var(--section-background-color); + background-color: var(--toc-background-color); top: calc(var(--top-nav-height) + 10px); } .top-nav nav.toc ol.toc-list li { @@ -1435,7 +1502,7 @@ table.striped > tbody > tr > th { } @media screen and (max-width: 800px) { .about-language { - padding-right: 16px; + padding: 0 16px; max-width: 90%; } ul.nav-list li { @@ -1452,9 +1519,18 @@ table.striped > tbody > tr > th { .nav-list-search > a { display: none; } + .member-signature { + white-space: pre-line; + } + .member-signature .annotations { + white-space: pre-wrap; + } input#search-input { width: 18vw; } + .inherited-list h3 { + overflow: auto clip; + } .summary section[class$="-summary"], .details section[class$="-details"], .class-uses .detail, .serialized-class-details { padding: 0; @@ -1464,9 +1540,6 @@ pre.snippet { background-color: var(--snippet-background-color); color: var(--snippet-text-color); padding: 10px; - margin: 12px 0; - overflow: auto; - white-space: pre; } div.snippet-container { position: relative; @@ -1490,3 +1563,11 @@ pre.snippet .highlighted { background-color: var(--snippet-highlight-color); border-radius: 10%; } +/* + * Hide navigation links and search box in print layout + */ +@media print { + ul.nav-list, div.sub-nav, .main-grid nav.toc, button.copy { + display:none; + } +} diff --git a/test/langtools/jdk/javadoc/doclet/AccessH1/AccessH1.java b/test/langtools/jdk/javadoc/doclet/AccessH1/AccessH1.java index 96a31e124c7..daf400f9fc6 100644 --- a/test/langtools/jdk/javadoc/doclet/AccessH1/AccessH1.java +++ b/test/langtools/jdk/javadoc/doclet/AccessH1/AccessH1.java @@ -1,5 +1,5 @@ /* - * Copyright (c) 2002, 2023, Oracle and/or its affiliates. All rights reserved. + * Copyright (c) 2002, 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 4636667 7052425 8016549 8196202 + * @bug 4636667 7052425 8016549 8196202 8344301 * @summary Use , and

in proper sequence for accessibility * @library ../../lib * @modules jdk.javadoc/jdk.javadoc.internal.tool @@ -53,7 +53,7 @@ public class AccessH1 extends JavadocTester { checkOutput("resource-files/stylesheet.css", true, """ h1 { - font-size:1.428em; + font-size:1.425em; }"""); // Test the doc title in the overview page diff --git a/test/langtools/jdk/javadoc/doclet/checkStylesheetClasses/CheckStylesheetClasses.java b/test/langtools/jdk/javadoc/doclet/checkStylesheetClasses/CheckStylesheetClasses.java index f103ef4e608..5d86e317b9f 100644 --- a/test/langtools/jdk/javadoc/doclet/checkStylesheetClasses/CheckStylesheetClasses.java +++ b/test/langtools/jdk/javadoc/doclet/checkStylesheetClasses/CheckStylesheetClasses.java @@ -1,5 +1,5 @@ /* - * Copyright (c) 2021, 2024, Oracle and/or its affiliates. All rights reserved. + * Copyright (c) 2021, 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 @@ -118,13 +118,13 @@ public class CheckStylesheetClasses { htmlStyleNames.removeIf(s -> s.endsWith("-summary") && !styleSheetNames.contains(s)); // signature classes - removeAll(htmlStyleNames, "annotations", "element-name", "extends-implements", + removeAll(htmlStyleNames, "element-name", "extends-implements", "modifiers", "permits", "return-type"); // misc: these are defined in HtmlStyle, and used by the doclet - removeAll(htmlStyleNames, "col-plain", "external-link", "header", - "hierarchy", "index", "package-uses", "packages", "permits-note", - "serialized-package-container", "source-container"); + removeAll(htmlStyleNames, "col-plain", "external-link", "header", "index", + "package-uses", "packages", "permits-note", "serialized-package-container", + "source-container"); // Remove names from styleSheetNames if they are false positives, // or used by other code (i.e. not HtmlStyle), diff --git a/test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java b/test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java index a3dce5448f0..0ee5aafa063 100644 --- a/test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java +++ b/test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java @@ -25,7 +25,7 @@ * @test * @bug 4494033 7028815 7052425 8007338 8023608 8008164 8016549 8072461 8154261 8162363 8160196 8151743 8177417 * 8175218 8176452 8181215 8182263 8183511 8169819 8183037 8185369 8182765 8196201 8184205 8223378 8241544 - * 8253117 8263528 8289334 8292594 8347058 + * 8253117 8263528 8289334 8292594 8347058 8344301 * @summary Run tests on doclet stylesheet. * @library /tools/lib ../../lib * @modules jdk.javadoc/jdk.javadoc.internal.tool @@ -81,56 +81,13 @@ public class TestStylesheet extends JavadocTester { ul { list-style-type:disc; }""", - """ - .caption { - position:relative; - text-align:left; - background-repeat:no-repeat; - color:var(--selected-text-color); - clear:none; - overflow:hidden; - padding: 10px 0 0 1px; - margin:0; - }""", - """ - .caption span { - font-weight:bold; - white-space:nowrap; - padding:5px 12px 7px 12px; - display:inline-block; - float:left; - background-color:var(--selected-background-color); - border: none; - height:16px; - }""", - """ - div.table-tabs > button { - border: none; - cursor: pointer; - padding: 5px 12px 7px 12px; - font-weight: bold; - margin-right: 8px; - } - div.table-tabs > .active-table-tab { - background: var(--selected-background-color); - color: var(--selected-text-color); - } - div.table-tabs > button.table-tab { - background: var(--navbar-background-color); - color: var(--navbar-text-color); - }""", // Test the formatting styles for proper content display in use and constant values pages. - """ - .col-first, .col-second, .col-constructor-name { - vertical-align:top; - overflow: auto; - }""", """ .summary-table > div, .details-table > div { - text-align:left; + font-size: var(--nav-font-size); + line-height: 1.6; padding: 8px 3px 3px 7px; overflow: auto hidden; - scrollbar-width: thin; }""", "@import url('fonts/dejavu.css');", """ @@ -143,12 +100,8 @@ public class TestStylesheet extends JavadocTester { color:var(--link-color-active); }""", """ - .col-first a:link, .col-first a:visited, - .col-second a:link, .col-second a:visited, - .col-first a:link, .col-first a:visited, - .col-second a:link, .col-second a:visited, - .col-constructor-name a:link, .col-constructor-name a:visited, - .col-summary-item-name a:link, .col-summary-item-name a:visited { + body:not(.class-declaration-page) .col-first a:link, + .col-summary-item-name a:link { font-weight:bold; }""", """ @@ -157,7 +110,7 @@ public class TestStylesheet extends JavadocTester { font-family:var(--block-font-family); border-style:solid; border-width:thin; - border-radius:10px; + border-radius:6px; padding:10px; margin-bottom:10px; margin-right:10px; @@ -318,14 +271,11 @@ public class TestStylesheet extends JavadocTester { // entries for elements "all-classes-index-page", "all-packages-index-page", - "constants-summary-page", "deprecated-list-page", "help-page", "index-redirect-page", "package-declaration-page", - "package-tree-page", "single-index-page", - "tree-page", // the following names are matched by [class$='...'] in the stylesheet "constructor-details", "constructor-summary", @@ -341,7 +291,6 @@ public class TestStylesheet extends JavadocTester { "packages", "return-type", // and others... - "hierarchy", // for the hierarchy on a tree page "index" // on the index page ); Set all = new TreeSet<>(styles);