Make navigation much snappier

Author: romanowski

scala3doc/resources/dotty_res/scripts/ux.js

@@ -15,6 +15,10 @@ window.addEventListener("DOMContentLoaded", () => {
     }
   }
 
+  $("#sideMenu2 span").on('click', function(){
+    $(this).parent().toggleClass("expanded")
+  });
+
 
   if (location.hash) {
     var selected = document.getElementById(location.hash.substring(1));

scala3doc/resources/dotty_res/styles/scalastyle.css

@@ -123,7 +123,7 @@ th {
 }
 
 /* Left bar */
-#sideMenu {
+#sideMenu2 {
   overflow-y: auto;
   scrollbar-width: thin;
   height: 100%;
@@ -159,63 +159,73 @@ th {
   width: 116px;
 }
 
-.sideMenuPart {
-  padding-left: 1em;
+#sideMenu2 div {
+  padding-left: 0.7em;
+  position: relative;
+  display: none;
+}
+
+#sideMenu2 div.expanded {
+  display: block;
+}
+
+#sideMenu2 div>div.expanded {
+  display: none;
+}
+
+#sideMenu2 div.expanded>div {
+  display: block;
+}
+
+#sideMenu2>div{
+  display: block;
 }
-.sideMenuPart a {
+
+#sideMenu2 a {
   align-items: center;
   flex: 1;
   overflow-x: hidden;
   overflow-wrap: anywhere;
   color: var(--leftbar-fg);
   margin-right: .5rem;
-  padding: 7px 0;
-}
-.sideMenuPart > .overview {
-  display: flex;
-  align-items: center;
-  position: relative;
-  user-select: none;
-}
-.sideMenuPart > .overview::before {
-  width: var(--side-width);
-  box-sizing: border-box;
-  content: '';
-  top: 0;
-  right: 0;
-  bottom: 0;
-  position: absolute;
-  z-index: 1;
-}
-.sideMenuPart > .overview:hover::before {
-  background: var(--leftbar-hover-bg);
+  padding-top: 4px;
+  padding-bottom: 4px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  display: block;
+  width: 100%;
 }
-.sideMenuPart > .overview:hover > a {
-  color: var(--leftbar-hover-fg);
+
+#sideMenu2 div.selected {
+  font-weight: bold;
 }
-.sideMenuPart[data-active] > .overview::before {
+
+#sideMenu2 a.selected {
   background: var(--leftbar-current-bg);
+  margin-left: calc(0px - var(--side-width));
+  padding-left: var(--side-width);
 }
-.sideMenuPart[data-active] > .overview > a  {
-  font-weight: bold;
-  color: var(--leftbar-current-fg);
-}
-.sideMenuPart.hidden > .sideMenuPart {
-  height: 0;
-  visibility: hidden;
+
+#sideMenu2 a.selected:before {
+  background: var(--leftbar-current-bg);
 }
-.overview a, .overview .navButton {
-  z-index: 3;
+
+#sideMenu2 a:hover {
+  color: var(--leftbar-hover-fg);
+  background: var(--leftbar-hover-bg);
 }
-.sideMenuPart .navButton {
+
+#sideMenu2 span {
   align-items: center;
-  display: flex;
-  justify-content: flex-end;
-  padding: 7px 10px;
   cursor: pointer;
+  position: absolute;
+  right: 1em;
+  top: 6px;
+  padding: 4px;
 }
-.sideMenuPart .navButtonContent::before {
-  content: "\e905"; /* arrow up */
+
+#sideMenu2 span::before {
+  content: "\e903"; /* arrow down */
   font-family: "dotty-icons" !important;
   font-size: 20px;
   line-height: var(--leftbar-font-size);
@@ -225,10 +235,11 @@ th {
   align-items: center;
   justify-content: center;
 }
-.sideMenuPart.hidden .navButtonContent::before {
-  content: "\e903"; /* arrow down */
+#sideMenu2 .expanded>span::before {
+  content: "\e905"; /* arrow up */
 }
-.sideMenuPart .navButton:hover .navButtonContent::before {
+
+#sideMenu2 .div:hover>span::before {
   color: var(--leftbar-current-bg);
 }
 
@@ -295,7 +306,7 @@ th {
   padding-top: 0;
 }
 
-span[data-unresolved-link].strikethrough, a.strikethrough, div.strikethrough {
+span[data-unresolved-link].deprecated, a.deprecated, div.deprecated {
   text-decoration: line-through;
 }
 .brief {

scala3doc/src/dotty/dokka/DocContext.scala

@@ -86,6 +86,9 @@ case class DocContext(args: Scala3doc.Args, compilerContext: CompilerContext)
 
     lazy val displaySourceSets = getSourceSets.toDisplaySourceSet
 
+    import org.jetbrains.dokka.base.renderers.html.{NavigationNode, NavigationPage}
+    var navigationNode: Option[NavigationNode] = None
+
     val logger = new Scala3DocDokkaLogger(using compilerContext)
 
     lazy val staticSiteContext = args.docsRoot.map(path => StaticSiteContext(

scala3doc/src/dotty/dokka/site/NavigationCreator.scala

@@ -62,11 +62,20 @@ class NavigationCreator(using ctx: DocContext) extends PageTransformer:
     def defaultApiPages = processApiPages(input.getChildren.asScala.toList)
     val nodes = ctx.staticSiteContext.fold(defaultApiPages)(processStaticPages(input))
 
-    val navigationPage = new NavigationPage(new NavigationNode(
+    summon[DocContext].navigationNode = Some(new NavigationNode(
       ctx.args.name,
       ctx.staticSiteContext.fold(topLevelDri)(_ => docsRootDRI),
       ctx.displaySourceSets,
       nodes
     ))
+
+    val emptyNode = new NavigationNode(
+      ctx.args.name,
+      ctx.staticSiteContext.fold(topLevelDri)(_ => docsRootDRI),
+      ctx.displaySourceSets,
+      JNil,
+    )
+
+    val navigationPage = new NavigationPage(emptyNode)
     val newChildren = input.getChildren ++ JList(emptyNavigationJson, navigationPage)
     input.modified(input.getName, newChildren)

scala3doc/src/dotty/renderers/ScalaHtmlRenderer.scala

@@ -27,8 +27,11 @@ import scala.util.Try
 import org.jetbrains.dokka.base.renderers.html.SearchbarDataInstaller
 import org.jsoup.Jsoup
 import java.nio.file.Paths
+import org.jetbrains.dokka.base.renderers.html.{NavigationNode, NavigationPage}
 
 class SignatureRenderer(pageContext: ContentPage, sourceSetRestriciton: JSet[DisplaySourceSet], locationProvider: LocationProvider):
+  val currentDri = pageContext.getDri.asScala.head
+
   def link(dri: DRI): Option[String] = Option(locationProvider.resolve(dri, sourceSetRestriciton, pageContext))
 
   def renderLink(name: String, dri: DRI, modifiers: AppliedAttr*) =
@@ -106,7 +109,7 @@ class ScalaHtmlRenderer(using ctx: DokkaContext) extends HtmlRenderer(ctx) {
         withHtml(f, buildDocumentableList(n, pageContext, ss).toString())
       case n: DocumentableFilter => withHtml(f, buildDocumentableFilter.toString)
       case mi: MemberInfo =>
-        val memberHtml = div(renderers(pageContext)._2.memberInfo(mi.member))
+        val memberHtml = div(renderers(pageContext)._2.fullMember(mi.member))
         withHtml(f, memberHtml.toString)
       case other => super.buildContentNode(f, node, pageContext, sourceSetRestriciton)
     }
@@ -116,6 +119,29 @@ class ScalaHtmlRenderer(using ctx: DokkaContext) extends HtmlRenderer(ctx) {
     val renderer = SignatureRenderer(pageContext, sourceSets, getLocationProvider)
     (renderer, new MemberRenderer(renderer, buildWithKotlinx(_, pageContext, null)))
 
+  private def buildNavigation(r: SignatureRenderer)(rootNav: NavigationNode): AppliedTag =
+    val currentPageDri = r.currentDri
+
+    def renderNested(nav: NavigationNode): (Boolean, AppliedTag) =
+      val isSelected = nav.getDri == currentPageDri
+      def linkHtml(exapnded: Boolean = false) =
+        val attrs = if (isSelected) Seq(cls := "selected expanded") else Nil
+        a(href := r.link(nav.getDri).getOrElse("#"), attrs)(nav.getName)
+
+      nav.getChildren match
+        case empty if empty.isEmpty => isSelected -> div(linkHtml())
+        case children =>
+          val nested = children.asScala.map(renderNested).toList
+          val expanded = nested.exists(_._1) | nav == rootNav
+          val attr = if expanded || isSelected then Seq(cls := "expanded") else Nil
+          (isSelected || expanded) -> div(attr)(
+            linkHtml(expanded),
+            span(),
+            nested.map(_._2)
+          )
+
+    renderNested(rootNav)._2
+
   private def buildDocumentableList(n: DocumentableList, pageContext: ContentPage, sourceSetRestriciton: JSet[DisplaySourceSet]) =
     def render(n: ContentNode) = raw(buildWithKotlinx(n, pageContext, null))
 
@@ -296,6 +322,8 @@ class ScalaHtmlRenderer(using ctx: DokkaContext) extends HtmlRenderer(ctx) {
         span(img(src := resolveRoot(page, s"project-logo/$fileName")))
       }.toSeq
 
+    val renderer = SignatureRenderer(page.asInstanceOf[ContentPage], sourceSets, getLocationProvider)
+
     html(
       head(
         meta(charset := "utf-8"),
@@ -319,7 +347,9 @@ class ScalaHtmlRenderer(using ctx: DokkaContext) extends HtmlRenderer(ctx) {
                 )
               ),
               div(id := "paneSearch"),
-              nav(id := "sideMenu"),
+              nav(id := "sideMenu2")(
+                summon[DocContext ].navigationNode.fold("No Navigation")(buildNavigation(renderer))
+              ),
             ),
             div(id := "main")(
               div (id := "leftToggler")(