Add grouping in searchbar. Unify default and Inkuire html representation.

pikinier20 · pikinier20 · commit 26e4f07593ee · 2022-02-22T11:35:16.000+01:00
diff --git a/scaladoc-js/common/css/searchbar.css b/scaladoc-js/common/css/searchbar.css
@@ -206,41 +206,42 @@ div[selected] > .scaladoc-searchbar-inkuire-package {
   overflow: auto;
 }
 
-.scaladoc-searchbar-result {
+.scaladoc-searchbar-row {
+  display: flex;
   background-color: var(--leftbar-bg);
   color: var(--leftbar-fg);
   line-height: 24px;
   padding: 4px 10px 4px 10px;
 }
 
-.scaladoc-searchbar-result-row {
-  display: flex;
+.scaladoc-searchbar-row.hidden {
+  display: none;
+}
+
+.scaladoc-searchbar-row[divider] {
+  border-top: solid 1px var(--leftbar-border);
 }
 
-.scaladoc-searchbar-result .micon {
+.scaladoc-searchbar-row .micon {
   height: 16px;
   width: 16px;
   margin: 4px 8px 0px 0px;
 }
 
-.scaladoc-searchbar-result:first-of-type {
+.scaladoc-searchbar-row:first-of-type {
   margin-top: 10px;
 }
 
-.scaladoc-searchbar-result[selected] {
+.scaladoc-searchbar-row[selected] {
   background-color: var(--leftbar-hover-bg);
   color: var(--leftbar-hover-fg);
 }
 
-.scaladoc-searchbar-result a {
-  /* for some reason, with display:block if there's a wrap between the
-   * search result text and the location span, the dead space to the
-   * left of the location span doesn't get treated as part of the block,
-   * which defeats the purpose of making the <a> a block element.
-   * But inline-block with width:100% works as desired.
-   */
-  display: inline-block;
-  width: 100%;
+.scaladoc-searchbar-row[result] {
+  flex-direction: column;
+}
+
+.scaladoc-searchbar-row[result] a {
   text-indent: -20px;
   padding-left: 20px;
 }
diff --git a/scaladoc-js/main/src/searchbar/SearchbarComponent.scala b/scaladoc-js/main/src/searchbar/SearchbarComponent.scala
@@ -9,18 +9,14 @@ import scala.concurrent.duration._
 import java.net.URI
 
 class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearchEngine, parser: QueryParser):
-  val resultsChunkSize = 100
+  val resultsChunkSize = 5
   extension (p: PageEntry)
     def toHTML =
       val wrapper = document.createElement("div").asInstanceOf[html.Div]
-      wrapper.classList.add("scaladoc-searchbar-result")
-      wrapper.classList.add("scaladoc-searchbar-result-row")
+      wrapper.classList.add("scaladoc-searchbar-row")
+      wrapper.setAttribute("result", "")
       wrapper.classList.add("monospace")
 
-      val icon = document.createElement("span").asInstanceOf[html.Span]
-      icon.classList.add("micon")
-      icon.classList.add(p.kind.take(2))
-
       val resultA = document.createElement("a").asInstanceOf[html.Anchor]
       resultA.href = Globals.pathToRoot + p.location
       resultA.text = s"${p.fullName}"
@@ -34,7 +30,6 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
       location.classList.add("scaladoc-searchbar-location")
       location.textContent = p.description
 
-      wrapper.appendChild(icon)
       wrapper.appendChild(resultA)
       resultA.appendChild(location)
       wrapper.addEventListener("mouseover", {
@@ -45,24 +40,19 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
   extension (m: InkuireMatch)
     def toHTML =
       val wrapper = document.createElement("div").asInstanceOf[html.Div]
-      wrapper.classList.add("scaladoc-searchbar-result")
+      wrapper.classList.add("scaladoc-searchbar-row")
+      wrapper.setAttribute("result", "")
+      wrapper.setAttribute("inkuire-result", "")
       wrapper.classList.add("monospace")
       wrapper.setAttribute("mq", m.mq.toString)
 
-      val resultDiv = document.createElement("div").asInstanceOf[html.Div]
-      resultDiv.classList.add("scaladoc-searchbar-result-row")
-
-      val icon = document.createElement("span").asInstanceOf[html.Span]
-      icon.classList.add("micon")
-      icon.classList.add(m.entryType.take(2))
-
       val resultA = document.createElement("a").asInstanceOf[html.Anchor]
-      resultA.href = 
+      resultA.href =
         if(new URI(m.pageLocation).isAbsolute()) {
           m.pageLocation
         } else {
           Globals.pathToRoot + m.pageLocation
-        } 
+        }
       resultA.text = m.functionName
       resultA.onclick = (event: Event) =>
         if (document.body.contains(rootDiv)) {
@@ -84,9 +74,7 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
       signature.classList.add("scaladoc-searchbar-inkuire-signature")
       signature.textContent = m.prettifiedSignature
 
-      wrapper.appendChild(resultDiv)
-      resultDiv.appendChild(icon)
-      resultDiv.appendChild(resultA)
+      wrapper.appendChild(resultA)
       resultA.appendChild(signature)
       wrapper.appendChild(packageDiv)
       packageDiv.appendChild(packageIcon)
@@ -96,29 +84,78 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
       })
       wrapper
 
+  def createKindSeparator(kind: String) =
+    val kindSeparator = document.createElement("div").asInstanceOf[html.Div]
+    val icon = document.createElement("span").asInstanceOf[html.Span]
+    icon.classList.add("micon")
+    icon.classList.add(kind.take(2))
+    val name = document.createElement("span").asInstanceOf[html.Span]
+    name.textContent = kind
+    kindSeparator.classList.add("scaladoc-searchbar-row")
+    kindSeparator.setAttribute("divider", "")
+    kindSeparator.classList.add("monospace")
+    kindSeparator.appendChild(icon)
+    kindSeparator.appendChild(name)
+    kindSeparator
+
   def handleNewFluffQuery(matchers: List[Matchers]) =
-    val result = engine.query(matchers).map(_.toHTML)
-    resultsDiv.scrollTop = 0
-    while (resultsDiv.hasChildNodes()) resultsDiv.removeChild(resultsDiv.lastChild)
+    val result = engine.query(matchers)
     val fragment = document.createDocumentFragment()
-    result.take(resultsChunkSize).foreach(fragment.appendChild)
-    resultsDiv.appendChild(fragment)
-    def loadMoreResults(result: List[raw.HTMLElement]): Unit = {
-      resultsDiv.onscroll = (event: Event) => {
-        if (resultsDiv.scrollHeight - resultsDiv.scrollTop == resultsDiv.clientHeight) {
-          val fragment = document.createDocumentFragment()
-          result.take(resultsChunkSize).foreach(fragment.appendChild)
-          resultsDiv.appendChild(fragment)
-          loadMoreResults(result.drop(resultsChunkSize))
+    def createLoadMoreElement =
+      val loadMoreElement = document.createElement("div").asInstanceOf[html.Div]
+      loadMoreElement.classList.add("scaladoc-searchbar-row")
+      loadMoreElement.setAttribute("loadmore", "")
+      loadMoreElement.classList.add("monospace")
+      val anchor = document.createElement("a").asInstanceOf[html.Anchor]
+      anchor.text = "Show more..."
+      loadMoreElement.appendChild(anchor)
+      loadMoreElement.addEventListener("mouseover", _ => handleHover(loadMoreElement))
+      loadMoreElement
+    result.groupBy(_.kind).map {
+      case (kind, entries) =>
+        val kindSeparator = createKindSeparator(kind)
+        val htmlEntries = entries.map(_.toHTML)
+        val loadMoreElement = createLoadMoreElement
+        def loadMoreResults(entries: List[raw.HTMLElement]): Unit = {
+          loadMoreElement.onclick = (event: Event) => {
+            entries.take(resultsChunkSize).foreach(_.classList.remove("hidden"))
+            val nextElems = entries.drop(resultsChunkSize)
+            if nextElems.nonEmpty then loadMoreResults(nextElems) else loadMoreElement.classList.add("hidden")
+          }
         }
-      }
+
+        fragment.appendChild(kindSeparator)
+        htmlEntries.foreach(fragment.appendChild)
+        fragment.appendChild(loadMoreElement)
+
+        val nextElems = htmlEntries.drop(resultsChunkSize)
+        if nextElems.nonEmpty then {
+          nextElems.foreach(_.classList.add("hidden"))
+          loadMoreResults(nextElems)
+        } else {
+          loadMoreElement.classList.add("hidden")
+        }
+
     }
-    loadMoreResults(result.drop(resultsChunkSize))
+
+    resultsDiv.scrollTop = 0
+    while (resultsDiv.hasChildNodes()) resultsDiv.removeChild(resultsDiv.lastChild)
+    resultsDiv.appendChild(fragment)
+
+  def createLoadingAnimation: raw.HTMLElement = {
+    val loading = document.createElement("div").asInstanceOf[html.Div]
+    loading.classList.add("loading-wrapper")
+    val animation = document.createElement("div").asInstanceOf[html.Div]
+    animation.classList.add("loading")
+    loading.appendChild(animation)
+    loading
+}
 
   extension (s: String)
     def toHTMLError =
       val wrapper = document.createElement("div").asInstanceOf[html.Div]
-      wrapper.classList.add("scaladoc-searchbar-result")
+      wrapper.classList.add("scaladoc-searchbar-row")
+      wrapper.classList.add("scaladoc-searchbar-error")
       wrapper.classList.add("monospace")
 
       val errorSpan = document.createElement("span").asInstanceOf[html.Span]
@@ -133,35 +170,30 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
     clearTimeout(timeoutHandle)
     resultsDiv.scrollTop = 0
     resultsDiv.onscroll = (event: Event) => { }
-    while (resultsDiv.hasChildNodes()) resultsDiv.removeChild(resultsDiv.lastChild)
+    def clearResults() = while (resultsDiv.hasChildNodes()) resultsDiv.removeChild(resultsDiv.lastChild)
     val fragment = document.createDocumentFragment()
     parser.parse(query) match {
       case EngineMatchersQuery(matchers) =>
+        clearResults()
         handleNewFluffQuery(matchers)
       case BySignature(signature) =>
         timeoutHandle = setTimeout(1.second) {
-          val properResultsDiv = document.createElement("div").asInstanceOf[html.Div]
-          resultsDiv.appendChild(properResultsDiv)
-          val loading = document.createElement("div").asInstanceOf[html.Div]
-          loading.classList.add("loading-wrapper")
-          val animation = document.createElement("div").asInstanceOf[html.Div]
-          animation.classList.add("loading")
-          loading.appendChild(animation)
-          properResultsDiv.appendChild(loading)
+          val loading = createLoadingAnimation
+          val kindSeparator = createKindSeparator("inkuire")
+          clearResults()
+          resultsDiv.appendChild(loading)
+          resultsDiv.appendChild(kindSeparator)
           inkuireEngine.query(query) { (m: InkuireMatch) =>
-            val next = properResultsDiv.children.foldLeft[Option[Element]](None) {
-              case (acc, child) if !acc.isEmpty => acc
-              case (_, child) =>
-                Option.when(child.hasAttribute("mq") && Integer.parseInt(child.getAttribute("mq")) > m.mq)(child)
-            }
+            val next = resultsDiv.children
+              .find(child => child.hasAttribute("mq") && Integer.parseInt(child.getAttribute("mq")) > m.mq)
             next.fold {
-              properResultsDiv.appendChild(m.toHTML)
+              resultsDiv.appendChild(m.toHTML)
             } { next =>
-              properResultsDiv.insertBefore(m.toHTML, next)
+              resultsDiv.insertBefore(m.toHTML, next)
             }
           } { (s: String) =>
-            animation.classList.remove("loading")
-            properResultsDiv.appendChild(s.toHTMLError)
+            resultsDiv.removeChild(loading)
+            resultsDiv.appendChild(s.toHTMLError)
           }
         }
     }
@@ -218,7 +250,7 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
     searchIcon.addEventListener("mousedown", (e: Event) => e.stopPropagation())
     document.body.addEventListener("mousedown", (e: Event) =>
       if (document.body.contains(element)) {
-        document.body.removeChild(element)
+        handleEscape()
       }
     )
     element.addEventListener("keydown", {
@@ -237,32 +269,50 @@ class SearchbarComponent(engine: SearchbarEngine, inkuireEngine: InkuireJSSearch
     val selectedElement = resultsDiv.querySelector("[selected]")
     if selectedElement != null then {
       selectedElement.removeAttribute("selected")
-      val sibling = selectedElement.previousElementSibling
-      if sibling != null && sibling.classList.contains("scaladoc-searchbar-result") then {
+      def recur(elem: raw.Element): raw.Element = {
+        val prev = elem.previousElementSibling
+        if prev == null then null
+        else {
+          if !prev.classList.contains("hidden") &&
+            prev.classList.contains("scaladoc-searchbar-row") &&
+            (prev.hasAttribute("result") || prev.hasAttribute("loadmore"))
+          then prev
+          else recur(prev)
+        }
+      }
+      val sibling = recur(selectedElement)
+      if sibling != null then {
         sibling.setAttribute("selected", "")
         resultsDiv.scrollTop = sibling.asInstanceOf[html.Element].offsetTop - (2 * sibling.asInstanceOf[html.Element].clientHeight)
       }
     }
   }
   private def handleArrowDown() = {
     val selectedElement = resultsDiv.querySelector("[selected]")
+    def recur(elem: raw.Element): raw.Element = {
+      val next = elem.nextElementSibling
+      if next == null then null
+      else {
+        if !next.classList.contains("hidden") &&
+          next.classList.contains("scaladoc-searchbar-row") &&
+          (next.hasAttribute("result") || next.hasAttribute("loadmore"))
+        then next
+        else recur(next)
+      }
+    }
     if selectedElement != null then {
-      val sibling = selectedElement.nextElementSibling
+      val sibling = recur(selectedElement)
       if sibling != null then {
         selectedElement.removeAttribute("selected")
         sibling.setAttribute("selected", "")
         resultsDiv.scrollTop = sibling.asInstanceOf[html.Element].offsetTop - (2 * sibling.asInstanceOf[html.Element].clientHeight)
       }
     } else {
       val firstResult = resultsDiv.firstElementChild
-      if firstResult != null && firstResult.classList.contains("scaladoc-searchbar-result") then {
-        firstResult.setAttribute("selected", "")
-        resultsDiv.scrollTop = firstResult.asInstanceOf[html.Element].offsetTop - (2 * firstResult.asInstanceOf[html.Element].clientHeight)
-      } else if firstResult != null && firstResult.firstElementChild != null && firstResult.firstElementChild.nextElementSibling != null then {
-        // for Inkuire there is another wrapper to avoid displaying old results + the first (child) div is a loading animation wrapper | should be resolved in #12995
-        val properFirstResult = firstResult.firstElementChild.nextElementSibling
-        properFirstResult.setAttribute("selected", "")
-        resultsDiv.scrollTop = properFirstResult.asInstanceOf[html.Element].offsetTop - (2 * properFirstResult.asInstanceOf[html.Element].clientHeight)
+      if firstResult != null then {
+        val toSelect = if firstResult.classList.contains("scaladoc-searchbar-row") && firstResult.hasAttribute("result") then firstResult else recur(firstResult)
+        toSelect.setAttribute("selected", "")
+        resultsDiv.scrollTop = toSelect.asInstanceOf[html.Element].offsetTop - (2 * toSelect.asInstanceOf[html.Element].clientHeight)
       }
     }
   }
diff --git a/scaladoc/resources/dotty_res/images/inkuire.svg b/scaladoc/resources/dotty_res/images/inkuire.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400"><defs><style>.cls-1{fill:#36cd82;}.cls-2{fill:#32af7f;}.cls-3{fill:#2e9c7b;}.cls-4{fill:#19096a;}.cls-5{fill:#0e48a5;}.cls-6{fill:none;}.cls-7{opacity:0.25;fill:url(#linear-gradient);}.cls-8{fill:#fff;}</style><linearGradient id="linear-gradient" x1="141.39" y1="190.92" x2="240.43" y2="190.92" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#122658"/><stop offset="0.16" stop-color="#314e83" stop-opacity="0.94"/><stop offset="0.4" stop-color="#5980b8" stop-opacity="0.86"/><stop offset="0.63" stop-color="#76a4df" stop-opacity="0.8"/><stop offset="0.83" stop-color="#87b9f7" stop-opacity="0.76"/><stop offset="1" stop-color="#8dc1ff" stop-opacity="0.75"/></linearGradient></defs><path class="cls-1" d="M350,200.75a150.22,150.22,0,0,1-3.74,33.42l-88.57-88.58-.05-.05c-1-1.07-2-2.12-3.13-3.13l0,0a79.33,79.33,0,0,0-113,111.25l.11.13c1.48,1.59,3,3.14,4.63,4.61l41,41-.15,0c-4.88.66-8.27,1.13-8.27,1.51v15.89l4.36,4.36c-2.69.38-4.36.7-4.36,1V338l4.34,4.34c-2.67.38-4.34.7-4.34,1v5.93A150,150,0,1,1,350,200.75Z"/><path class="cls-2" d="M346.26,234.17a150.2,150.2,0,0,1-80,101.16L221.2,290.28c0,4.73-21.62,7.43-34,9.07l-41-41a78.94,78.94,0,0,0,43.06,20.28v11.13c0-.67,21.38-2,21.38-5.35v-5.78a79.33,79.33,0,0,0,47-133.06Z"/><path class="cls-1" d="M268.29,200.09A68.29,68.29,0,1,1,200,131.81,68.31,68.31,0,0,1,268.29,200.09Z"/><path class="cls-3" d="M221.2,348.6V332.69c0,5.31-27.27,8.07-38.08,9.65L178.78,338c0-1.34,42.42-4,42.42-10.61V311.48c0,5.31-27.25,8.07-38.06,9.65l-4.36-4.36c.34-1.33,42.42-4,42.42-10.59V290.27l45.08,45.06a148.38,148.38,0,0,1-45.23,13.93A1.41,1.41,0,0,0,221.2,348.6Z"/><path class="cls-1" d="M268.29,200.09A68.29,68.29,0,1,1,200,131.81,68.31,68.31,0,0,1,268.29,200.09Z"/><path class="cls-4" d="M200,131.81a68.29,68.29,0,1,0,68.3,68.28A68.28,68.28,0,0,0,200,131.81Zm0,126.9a58.61,58.61,0,1,1,58.62-58.62A58.61,58.61,0,0,1,200,258.71Z"/><path class="cls-5" d="M258.61,200.09A58.61,58.61,0,1,1,200,141.49,58.61,58.61,0,0,1,258.61,200.09Z"/><line class="cls-6" x1="146.24" y1="258.37" x2="141.61" y2="253.76"/><line class="cls-6" x1="257.64" y1="145.54" x2="254.51" y2="142.41"/><line class="cls-6" x1="257.64" y1="145.54" x2="254.51" y2="142.41"/><path class="cls-7" d="M240.43,181.83a58.62,58.62,0,0,1-90,49.53,58.62,58.62,0,0,1,80.88-80.88A58.3,58.3,0,0,1,240.43,181.83Z"/><path class="cls-8" d="M247,222.93a4.2,4.2,0,1,1-4.19-4.2A4.2,4.2,0,0,1,247,222.93Z"/><path class="cls-8" d="M236.35,236.62a45.36,45.36,0,0,1-8.11,5.6,52.44,52.44,0,0,1-18.57,6.15,44.34,44.34,0,0,1-9.7.34c3-1.3,5.88-2.53,8.68-3.83s5.54-2.7,8.18-4.18,5.2-3,7.7-4.67,4.94-3.38,7.44-5.05Z"/><path class="cls-8" d="M234.16,167.87A56.36,56.36,0,0,0,218,160.12a48.52,48.52,0,0,0-17-1.77,45.92,45.92,0,0,0-42.75,43,49.22,49.22,0,0,0,1.87,17A56,56,0,0,0,168,234.48a40.86,40.86,0,0,1-12.47-14.25,45.74,45.74,0,0,1-5.29-18.88,47.88,47.88,0,0,1,3.07-19.78,49.24,49.24,0,0,1,4.6-9.07,50.61,50.61,0,0,1,6.38-7.93,52,52,0,0,1,7.88-6.44,48.87,48.87,0,0,1,9-4.65,47.4,47.4,0,0,1,19.77-3.17,45.61,45.61,0,0,1,18.92,5.17A40.81,40.81,0,0,1,234.16,167.87Z"/></svg>
diff --git a/scaladoc/resources/dotty_res/styles/scalastyle.css b/scaladoc/resources/dotty_res/styles/scalastyle.css
@@ -848,6 +848,10 @@ footer .mode {
   content: url("../images/method.svg")
 }
 
+.micon.in {
+  content: url("../images/inkuire.svg")
+}
+
 #leftColumn .socials {
   display: none;
 }
diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala
@@ -146,7 +146,7 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
           val descr = m.dri.asFileLocation
           def processMember(member: Member): Seq[JSON] =
             val signatureBuilder = ScalaSignatureProvider.rawSignature(member, InlineSignatureBuilder())().asInstanceOf[InlineSignatureBuilder]
-            val sig = Signature(Plain(s"${member.kind.name} "), Plain(member.name)) ++ signatureBuilder.names.reverse
+            val sig = Signature(Plain(member.name)) ++ signatureBuilder.names.reverse
             val entry = mkEntry(member.dri, member.name, flattenToText(sig), descr, member.kind.name)
             val children = member
                 .membersBy(m => m.kind != Kind.Package && !m.kind.isInstanceOf[Classlike])
@@ -188,6 +188,7 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
     dottyRes("images/val.svg"),
     dottyRes("images/package.svg"),
     dottyRes("images/static.svg"),
+    dottyRes("images/inkuire.svg"),
     dottyRes("images/github-icon-black.png"),
     dottyRes("images/github-icon-white.png"),
     dottyRes("images/discord-icon-black.png"),

Original file line number	Diff line number	Diff line change
`@@ -848,6 +848,10 @@ footer .mode {`
`848`	`848`	`content: url("../images/method.svg")`
`849`	`849`	`}`
`850`	`850`
	`851`	`+.micon.in {`
	`852`	`+ content: url("../images/inkuire.svg")`
	`853`	`+}`
	`854`	`+`
`851`	`855`	`#leftColumn .socials {`
`852`	`856`	`display: none;`
`853`	`857`	`}`