8287674: CSS improvements for summary lists

Reviewed-by: jjg

Author: hns

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/DeprecatedListWriter.java

@@ -85,7 +85,7 @@ protected void addExtraSection(DeprecatedAPIListBuilder list, Content content) {
                     "doclet.Deprecated_API_Checkbox_Label"));
             for (int i = 0; i < releases.size(); i++) {
                 // Table column ids are 1-based
-                tabs.add(getReleaseCheckbox(releases.get(i), i + 1));
+                tabs.add(Text.of(" ")).add(getReleaseCheckbox(releases.get(i), i + 1));
             }
             content.add(tabs);
         }

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/NewAPIListWriter.java

@@ -86,7 +86,7 @@ protected void addExtraSection(NewAPIBuilder list, Content content) {
                 int releaseIndex = i + 1;
                 String release = releases.get(i);
                 HtmlId htmlId = HtmlId.of("release-" + releaseIndex);
-                tabs.add(HtmlTree.LABEL(htmlId.name(),
+                tabs.add(Text.of(" ")).add(HtmlTree.LABEL(htmlId.name(),
                                 HtmlTree.INPUT("checkbox", htmlId)
                                         .put(HtmlAttr.CHECKED, "")
                                         .put(HtmlAttr.ONCLICK,

src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/resources/stylesheet.css

@@ -410,13 +410,14 @@ div.table-tabs > button.table-tab {
     grid-template-columns: minmax(400px, max-content) minmax(400px, auto);
 }
 div.checkboxes {
-    line-height: 18px;
+    line-height: 2em;
 }
 div.checkboxes > span {
     margin-left: 10px;
 }
 div.checkboxes > label {
     margin-left: 8px;
+    white-space: nowrap;
 }
 div.checkboxes > label > input {
     margin: 0 2px;
@@ -429,6 +430,10 @@ div.checkboxes > label > input {
     display: grid;
     grid-template-columns: minmax(15%, max-content) minmax(20%, max-content) minmax(20%, auto);
 }
+.three-column-release-summary {
+    display: grid;
+    grid-template-columns: minmax(40%, max-content) minmax(10%, max-content) minmax(40%, auto);
+}
 .four-column-summary {
     display: grid;
     grid-template-columns: minmax(10%, max-content) minmax(15%, max-content) minmax(15%, max-content) minmax(15%, auto);
@@ -448,14 +453,15 @@ div.checkboxes > label > input {
         display: grid;
         grid-template-columns: minmax(10%, max-content) minmax(25%, auto);
     }
-    .three-column-summary .col-last {
+    .three-column-release-summary {
+        display: grid;
+        grid-template-columns: minmax(70%, max-content) minmax(30%, max-content)
+    }
+    .three-column-summary .col-last,
+    .three-column-release-summary .col-last{
         grid-column-end: span 2;
     }
 }
-.three-column-release-summary {
-    display: grid;
-    grid-template-columns: minmax(40%, max-content) minmax(10%, max-content) minmax(40%, auto);
-}
 @media screen and (max-width: 600px) {
     .two-column-summary {
         display: grid;
@@ -465,6 +471,8 @@ div.checkboxes > label > input {
 .summary-table > div, .details-table > div {
     text-align:left;
     padding: 8px 3px 3px 7px;
+    overflow-x: auto;
+    scrollbar-width: thin;
 }
 .col-first, .col-second, .col-last, .col-constructor-name, .col-summary-item-name {
     vertical-align:top;

test/langtools/jdk/javadoc/doclet/testNewApiList/TestNewApiList.java

@@ -119,17 +119,17 @@ private void checkMultiReleaseContents() {
                 <li><a href="#annotation-interface-member">Annotation Interface Elements</a></li>
                 </ul>
                 </div>
-                <div class="checkboxes">Show API added in:<label for="release-1">
+                <div class="checkboxes">Show API added in: <label for="release-1">
                 <input type="checkbox" id="release-1" disabled checked onclick="toggleGlobal(this, '1', 3)">
-                <span>0.9</span></label><label for="release-2">
+                <span>0.9</span></label> <label for="release-2">
                 <input type="checkbox" id="release-2" disabled checked onclick="toggleGlobal(this, '2', 3)">
-                <span>v1.0</span></label><label for="release-3">
+                <span>v1.0</span></label> <label for="release-3">
                 <input type="checkbox" id="release-3" disabled checked onclick="toggleGlobal(this, '3', 3)">
-                <span>1.2</span></label><label for="release-4">
+                <span>1.2</span></label> <label for="release-4">
                 <input type="checkbox" id="release-4" disabled checked onclick="toggleGlobal(this, '4', 3)">
-                <span>2.0b</span></label><label for="release-5">
+                <span>2.0b</span></label> <label for="release-5">
                 <input type="checkbox" id="release-5" disabled checked onclick="toggleGlobal(this, '5', 3)">
-                <span>3.2</span></label><label for="release-6">
+                <span>3.2</span></label> <label for="release-6">
                 <input type="checkbox" id="release-6" disabled checked onclick="toggleGlobal(this, '6', 3)">
                 <span>5</span></label></div>""");
     }
@@ -610,7 +610,7 @@ private void checkSingleReleaseDeprecatedElements() {
                 <li><a href="#annotation-interface-member">Annotation Interface Elements</a></li>
                 </ul>
                 </div>
-                <div class="checkboxes">Show API deprecated in:<label for="release-1">""",
+                <div class="checkboxes">Show API deprecated in: <label for="release-1">""",
             """
                 <div id="for-removal">
                 <div class="table-tabs" role="tablist" aria-orientation="horizontal">
@@ -670,15 +670,15 @@ private void checkPackageContents() {
                 <li><a href="#constructor">Constructors</a></li>
                 </ul>
                 </div>
-                <div class="checkboxes">Show API added in:<label for="release-1">
+                <div class="checkboxes">Show API added in: <label for="release-1">
                 <input type="checkbox" id="release-1" disabled checked onclick="toggleGlobal(this, '1', 3)">
-                <span>1.2</span></label><label for="release-2">
+                <span>1.2</span></label> <label for="release-2">
                 <input type="checkbox" id="release-2" disabled checked onclick="toggleGlobal(this, '2', 3)">
-                <span>2.0b</span></label><label for="release-3">
+                <span>2.0b</span></label> <label for="release-3">
                 <input type="checkbox" id="release-3" disabled checked onclick="toggleGlobal(this, '3', 3)">
-                <span>3.2</span></label><label for="release-4">
+                <span>3.2</span></label> <label for="release-4">
                 <input type="checkbox" id="release-4" disabled checked onclick="toggleGlobal(this, '4', 3)">
-                <span>5</span></label><label for="release-5">
+                <span>5</span></label> <label for="release-5">
                 <input type="checkbox" id="release-5" disabled checked onclick="toggleGlobal(this, '5', 3)">
                 <span>6</span></label></div>""");
     }

test/langtools/jdk/javadoc/doclet/testStylesheet/TestStylesheet.java

@@ -139,6 +139,8 @@ public void test(Path base) {
                     .summary-table > div, .details-table > div {
                         text-align:left;
                         padding: 8px 3px 3px 7px;
+                        overflow-x: auto;
+                        scrollbar-width: thin;
                     }""",
                 "@import url('resources/fonts/dejavu.css');",
                 """