Implement concise view switch in API members

Author: pikinier20

scaladoc-js/common/src/utils/SafeLocalStorage.scala

@@ -20,7 +20,7 @@ class SafeLocalStorage[T <: js.Any](key: String, defaultValue: T) {
   def checkSupport[U](defaultValue: U)(callback: () => U): U =
     if isLocalStorageSupported then callback() else defaultValue
 
-  def parseData(data: String): T =
+  private def parseData(data: String): T =
     try {
       Option(JSON.parse(data).asInstanceOf[T]).getOrElse(defaultValue)
     } catch {

scaladoc-js/main/src/ux/Ux.scala

@@ -1,5 +1,6 @@
 package dotty.tools.scaladoc
 
+import scala.scalajs.js
 import org.scalajs.dom._
 import org.scalajs.dom.ext._
 
@@ -20,4 +21,31 @@ class Ux():
         case e: html.Span => e
       }.foreach(modifySpan)
 
-  sideMenuItemsWordBreaking()
+  def loadConciseView(): Unit =
+    val localStorageValue = SafeLocalStorage("__CONCISE_VIEW__", js.Array(false)) // One-element js.Array is a hack for having type extending js.Any
+    val conciseViewSwitchInput = Option(document.getElementById("concise-view-switch"))
+      .map(_.querySelector("input").asInstanceOf[html.Input])
+
+    def modifyContent(concise: Boolean) =
+      if (concise) {
+        document.querySelector(".membersList").classList.add("concise")
+      } else {
+        document.querySelector(".membersList").classList.remove("concise")
+      }
+
+    conciseViewSwitchInput.foreach { input =>
+      val storedValue = localStorageValue.getData.head
+      modifyContent(storedValue)
+      input.checked = storedValue
+      input.addEventListener("change", e => {
+        val target = e.target.asInstanceOf[html.Input]
+        localStorageValue.setData(js.Array(target.checked))
+        modifyContent(target.checked)
+      })
+    }
+
+  sideMenuItemsWordBreaking()
+  loadConciseView()
+
+
+

scaladoc/resources/dotty_res/styles/theme/color-tokens.css

@@ -92,6 +92,11 @@
   --shadow-first: var(--shadow1);
   --shadow-second: var(--shadow2);
   --shadow-inset: var(--grey7);
+
+  /* switch */
+  --switch-button: var(--grey1);
+  --switch-background-default: var(--grey9);
+  --switch-background-selected: var(--indigo8);
 }
 
 :root.theme-dark {
@@ -187,4 +192,9 @@
   --shadow-first: var(--shadow1);
   --shadow-second: var(--shadow2);
   --shadow-inset: var(--grey7);
+
+  /* switch */
+  --switch-button: var(--grey12);
+  --switch-background-default: var(--grey9);
+  --switch-background-selected: var(--indigo11);
 }

scaladoc/resources/dotty_res/styles/theme/components/api-member.css

@@ -13,6 +13,7 @@
 
 .documentableElement .signature {
   margin-right: calc(3 * var(--base-spacing));
+  line-height: 1.5;
 }
 
 .documentableElement:hover {

scaladoc/resources/dotty_res/styles/theme/components/switch.css

@@ -0,0 +1,53 @@
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 32px;
+  height: 18px;
+  margin: var(--base-spacing);
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--switch-background-default);
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 34px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 1px;
+  bottom: 1px;
+  background-color: var(--switch-button);
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: var(--switch-background-selected);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px var(--switch-background-selected);
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(14px);
+  -ms-transform: translateX(14px);
+  transform: translateX(14px);
+}

scaladoc/resources/dotty_res/styles/theme/layout/content.css

@@ -424,3 +424,34 @@
 #content section:last-child {
   margin-bottom: calc(6 * var(--base-spacing));
 }
+
+.membersList {
+  position: relative;
+}
+
+#concise-view-switch {
+  position: absolute;
+  right: 0;
+  top: var(--base-spacing);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.membersList.concise .documentableElement {
+  padding-top: var(--base-spacing);
+  padding-bottom: var(--base-spacing);
+  margin: var(--base-spacing);
+}
+
+.membersList.concise .documentableBrief p {
+  margin-block-start: 0.5em;
+}
+
+.membersList.concise .documentableElement .modifiers {
+  display: none;
+}
+
+.membersList.concise .documentableElement.expand .modifiers {
+  display: unset;
+}

scaladoc/src/dotty/tools/scaladoc/renderers/MemberRenderer.scala

@@ -328,6 +328,13 @@ class MemberRenderer(signatureRenderer: SignatureRenderer)(using DocContext) ext
 
     div(cls := "membersList expand")(
     h2(cls := "h500")("Members list"),
+    div(cls := "body-small", id := "concise-view-switch")(
+      span("Concise view"),
+      label(cls := "switch")(
+        input(Attr("type") := "checkbox")(),
+        span(cls := "slider")()
+      )
+    ),
     renderTabs(
       singleSelection = false,
       buildGroup("Packages", Seq(