8248566: Make API docs more usable on mobile browsers

Reviewed-by: jjg
openjdk · Nov 27, 2020 · 644271e · 644271e · openjdk-notifier · Nov 27, 2020
1 parent 53d1444
commit 644271e
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 11 deletions.
diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/Navigation.java b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/Navigation.java
@@ -901,14 +901,14 @@ public Content getContent() {
         Content aboutContent = userHeader;
         boolean addSearch = options.createIndex();
 
+        Content aboutDiv = HtmlTree.DIV(HtmlStyle.aboutLanguage, aboutContent);
+        navDiv.add(aboutDiv);
         HtmlTree navList = new HtmlTree(TagName.UL)
                 .setId(navListSection.getName())
                 .setStyle(HtmlStyle.navList)
                 .put(HtmlAttr.TITLE, rowListTitle);
         addMainNavLinks(navList);
         navDiv.add(navList);
-        Content aboutDiv = HtmlTree.DIV(HtmlStyle.aboutLanguage, aboutContent);
-        navDiv.add(aboutDiv);
         tree.add(navDiv);
 
         HtmlTree subDiv = new HtmlTree(TagName.DIV).setStyle(HtmlStyle.subNav);

diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/markup/Head.java b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/markup/Head.java
@@ -257,6 +257,8 @@ private Content toContent() {
         tree.add(getGeneratedBy(showTimestamp, generatedDate));
         tree.add(HtmlTree.TITLE(title));
 
+        tree.add(HtmlTree.META("viewport", "width=device-width, initial-scale=1"));
+
         if (charset != null) { // compatibility; should this be allowed?
             tree.add(HtmlTree.META("Content-Type", "text/html", charset));
         }

diff --git a/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/resources/stylesheet.css b/src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/toolkit/resources/stylesheet.css
@@ -101,15 +101,15 @@ button {
  */
 .clear {
     clear:both;
-    height:0px;
+    height:0;
     overflow:hidden;
 }
 .about-language {
     float:right;
-    padding:0px 21px;
+    padding:0 21px 8px 8px;
     font-size:11px;
-    z-index:200;
     margin-top:-9px;
+    height:2.9em;
 }
 .legal-copy {
     margin-left:.5em;
@@ -147,7 +147,7 @@ button {
     padding:0;
     width:100%;
     clear:right;
-    height:2.8em;
+    min-height:2.8em;
     padding-top:10px;
     overflow:hidden;
     font-size:12px;
@@ -168,12 +168,17 @@ button {
 .sub-nav .nav-list {
     padding-top:5px;
 }
-ul.nav-list, ul.sub-nav-list {
+ul.nav-list {
+    display:block;
+    margin:0 25px 0 0;
+    padding:0;
+}
+ul.sub-nav-list {
     float:left;
     margin:0 25px 0 0;
     padding:0;
 }
-ul.nav-list li{
+ul.nav-list li {
     list-style:none;
     float:left;
     padding: 5px 6px;
@@ -761,3 +766,60 @@ table.striped > tbody > tr > th, table.striped > tbody > tr > td {
 table.striped > tbody > tr > th {
     font-weight: normal;
 }
+/**
+ * Tweak font sizes and paddings for small screens.
+ */
+@media screen and (max-width: 1050px) {
+    #search {
+        width: 300px;
+    }
+}
+@media screen and (max-width: 800px) {
+    #search {
+        width: 200px;
+    }
+    .top-nav,
+    .bottom-nav {
+        font-size: 11px;
+        padding-top: 6px;
+    }
+    .sub-nav {
+        font-size: 11px;
+    }
+    .about-language {
+        padding-right: 16px;
+    }
+    ul.nav-list li,
+    .sub-nav .nav-list-search {
+        padding: 6px;
+    }
+    ul.sub-nav-list li {
+        padding-top: 5px;
+    }
+    main {
+        padding: 10px;
+    }
+    .summary section[class$="-summary"], .details section[class$="-details"],
+    .class-uses .detail, .serialized-class-details {
+        padding: 0 8px 5px 8px;
+    }
+    body {
+        -webkit-text-size-adjust: none;
+    }
+}
+@media screen and (max-width: 500px) {
+    #search {
+        width: 150px;
+    }
+    .top-nav,
+    .bottom-nav {
+        font-size: 10px;
+    }
+    .sub-nav {
+        font-size: 10px;
+    }
+    .about-language {
+        font-size: 10px;
+        padding-right: 12px;
+    }
+}
diff --git a/test/langtools/jdk/javadoc/doclet/testCopyFiles/TestCopyFiles.java b/test/langtools/jdk/javadoc/doclet/testCopyFiles/TestCopyFiles.java
@@ -56,6 +56,7 @@ public void testDocFilesInModulePackages() {
                     "Hello World" (phi-WINDOW-TITLE-phi)""",
                 "phi-TOP-phi",
                 // check top navbar
+                "phi-HEADER-phi",
                 """
                     <a href="../../module-summary.html">Module</a>""",
                 """
@@ -66,7 +67,6 @@ public void testDocFilesInModulePackages() {
                     <a href="../../../deprecated-list.html">Deprecated</a>""",
                 """
                     <a href="../../../index-all.html">Index</a>""",
-                "phi-HEADER-phi",
                 """
                     In a named module acme.module and named package <a href="../package-summary.html"><code>p</code></a>.""",
                 "<dt>Since:</",
@@ -93,6 +93,7 @@ public void testDocFilesInMultiModulePackagesWithRecursiveCopy() {
                     "Hello World" (phi-WINDOW-TITLE-phi)""",
                 "phi-TOP-phi",
                 // check top navbar
+                "phi-HEADER-phi",
                 """
                     <a href="../../module-summary.html">Module</a>""",
                 """
@@ -103,7 +104,6 @@ public void testDocFilesInMultiModulePackagesWithRecursiveCopy() {
                     <a href="../../../deprecated-list.html">Deprecated</a>""",
                 """
                     <a href="../../../index-all.html">Index</a>""",
-                "phi-HEADER-phi",
                 """
                     In a named module acme.module and named package <a href="../package-summary.html"><code>p</code></a>.""",
                 "<dt>Since:</",
@@ -117,6 +117,7 @@ public void testDocFilesInMultiModulePackagesWithRecursiveCopy() {
                 "SubSubReadme (phi-WINDOW-TITLE-phi)",
                 "phi-TOP-phi",
                 // check top navbar
+                "phi-HEADER-phi",
                 """
                     <a href="../../../../module-summary.html">Module</a>""",
                 """
@@ -127,7 +128,6 @@ public void testDocFilesInMultiModulePackagesWithRecursiveCopy() {
                     <a href="../../../../../deprecated-list.html">Deprecated</a>""",
                 """
                     <a href="../../../../../index-all.html">Index</a>""",
-                "phi-HEADER-phi",
                 "SubSubReadme.html at third level of doc-file directory.",
                 // check footer
                 "phi-BOTTOM-phi"