Fix Scastie CSS. Add option to set scastie sbt configuration

scaladoc-js/resources/code-snippets.css

@@ -160,8 +160,8 @@ input:checked + .slider:before {
 }
 
 
-.snippet .buttons>:not(:last-child) {
-  border-left: 2px solid var(--inactive-bg);
+.snippet .buttons>:not(:first-child) {
+  border-right: 2px solid var(--inactive-bg);
 }
 
 .snippet .buttons>* {
@@ -219,35 +219,36 @@ input:checked + .slider:before {
   height:unset;
 }
 
-.snippet .scastie.embedded .editor-container .code .CodeMirror-scroll {
-  height:unset !important;
-  min-height: 50px !important;
+.snippet .scastie.embedded .app.light .editor-container .code .CodeMirror-scroll {
+  height:unset;
+  min-height: 50px;
 }
 
-.snippet .scastie .editor-container .console-container .console {
-  height: unset !important;
+.snippet .scastie .app.light .editor-container .console-container .console {
+  height: unset;
 }
 
-.snippet .scastie .CodeMirror-gutters {
+.snippet .scastie .app.light .CodeMirror-gutters {
   background-color: var(--code-bg) !important;
+  border-color: var(--code-bg) !important;
 }
 
-.snippet .scastie .CodeMirror {
-  color: var(--code-fg) !important;
-  background-color: var(--code-bg) !important;
+.snippet .scastie .app.light .CodeMirror {
+  color: var(--code-fg);
+  background-color: var(--code-bg);
 }
 
-.snippet .scastie .embedded-menu > * {
-  background-color: transparent !important;
-  color: var(--active-fg) !important;
+.snippet .scastie .app.light .embedded-menu > * {
+  background-color: transparent;
+  color: var(--active-fg);
   width: 64px;
   font-size: 1em;
   padding: 8px;
   position: unset;
 }
 
-.snippet .scastie .embedded-menu li:hover {
-  background-color: var(--active-bg) !important;
+.snippet .scastie .app.light .embedded-menu li:hover {
+  background-color: var(--active-bg);
 }
 
 .snippet .scastie .embedded-menu {
@@ -269,21 +270,37 @@ input:checked + .slider:before {
 }
 
 
-.snippet .scastie .output-console pre {
+.snippet .scastie .app.light .output-console pre {
   color: white;
   background-color: rgb(0, 43, 54);
 }
 
 .snippet .scastie .app.light .editor-container .handler {
-  background-color: var(--code-bg) !important;
+  background-color: var(--code-bg);
 }
 
 .snippet .scastie .console-container {
   margin-left: 30px;
 }
 
-.snippet .scastie .main-panel {
-  background-color: unset !important;
+.snippet .scastie .app.light .main-panel {
+  background-color: unset;
+}
+
+.snippet .scastie .cm-s-solarized.cm-s-light .CodeMirror-widget .fold,
+.snippet .scastie .cm-s-solarized.cm-s-light .CodeMirror-linewidget .compilation-info,
+.snippet .scastie .cm-s-solarized.cm-s-light .CodeMirror-linewidget .runtime-error,
+.snippet .scastie .cm-s-solarized.cm-s-light .CodeMirror-linewidget .line,
+.snippet .scastie .cm-s-solarized.cm-s-light .CodeMirror-linewidget .inline {
+  background-color: var(--code-bg);
+}
+
+.snippet .scastie .ansi-color-yellow {
+  color: #b58900;
+}
+
+.snippet .fa-warning:before, .fa-exclamation-triangle:before {
+  color: #b58900;
 }
 
 @media(max-width: 576px) {

scaladoc-js/src/code-snippets/CodeSnippets.scala

@@ -7,6 +7,13 @@ import org.scalajs.dom.ext._
 import CodeSnippetsGlobals._
 
 class CodeSnippets:
+  lazy val scastieConfig = getScastieConfiguration
+
+  private def getScastieConfiguration: js.Dynamic =
+    js.Dynamic.literal(
+      sbtConfig = scastieConfiguration,
+      targetType = "scala3"
+    )
 
   private def getButtonsSection(snippet: html.Element): Option[html.Div] = snippet.querySelector("div.buttons") match {
     case div: html.Div => Some(div)
@@ -109,44 +116,70 @@ class CodeSnippets:
       div
     }
     def runButton = {
-      val div = document.createElement("div")
-      val button = document.createElement("button").asInstanceOf[html.Button]
-      val icon = document.createElement("i")
-      def initialState() = {
-        icon.classList.add("fas")
-        icon.classList.add("fa-play")
-        button.setAttribute("state", "run")
-      }
-      def toggleState() = {
-        icon.classList.toggle("fa-play")
-        icon.classList.toggle("fa-times")
-        if button.getAttribute("state") == "run" then button.setAttribute("state", "exit")
-        else button.setAttribute("state", "run")
-      }
-      initialState()
-      button.appendChild(icon)
-      button.classList.add("run-button")
-      button.addEventListener("click", _ =>
-        if button.getAttribute("state") == "run" then
-          scastie.Embedded(snippet.querySelector("pre"))
-        else
-          snippet.querySelector("pre") match {
-            case p: html.Element => p.style = ""
-            case _ =>
-          }
-          snippet.querySelector(".scastie.embedded") match {
-            case s: html.Element => snippet.removeChild(s)
-            case _ =>
-          }
-        toggleState()
+      val div = document.createElement("div").asInstanceOf[html.Div]
+      val runButton = document.createElement("button").asInstanceOf[html.Button]
+      val runIcon = document.createElement("i")
+      runIcon.classList.add("fas")
+      runIcon.classList.add("fa-play")
+      runButton.classList.add("run-button")
+      runButton.appendChild(runIcon)
+
+      runButton.addEventListener("click", _ =>
+        if !runButton.hasAttribute("opened") then {
+          scastie.Embedded(snippet.querySelector("pre"), scastieConfig)
+          runButton.setAttribute("opened", "opened")
+        }
+        snippet.querySelector(".scastie .embedded-menu .run-button") match {
+          case btn: html.Element =>
+            btn.style = "display:none;"
+            btn.click()
+          case _ =>
+        }
+        snippet.querySelector(".buttons .exit-button") match {
+          case btn: html.Element => btn.parentElement.style = ""
+          case _ =>
+        }
       )
-      div.appendChild(button)
+
+      div.appendChild(runButton)
+      div
+    }
+    def exitButton = {
+      val div = document.createElement("div").asInstanceOf[html.Div]
+      val exitButton = document.createElement("button").asInstanceOf[html.Element]
+      val exitIcon = document.createElement("i")
+      exitIcon.classList.toggle("fas")
+      exitIcon.classList.toggle("fa-times")
+      exitButton.classList.add("exit-button")
+      div.style = "display:none;"
+      exitButton.appendChild(exitIcon)
+
+      exitButton.addEventListener("click", _ =>
+        snippet.querySelector("pre") match {
+          case p: html.Element => p.style = ""
+          case _ =>
+        }
+        snippet.querySelector(".scastie.embedded") match {
+          case s: html.Element => snippet.removeChild(s)
+          case _ =>
+        }
+        snippet.querySelector(".buttons .run-button") match {
+          case btn: html.Element => btn.removeAttribute("opened")
+          case _ =>
+        }
+        div.style = "display:none;"
+      )
+
+      div.appendChild(exitButton)
       div
     }
     val buttonsSection = getButtonsSection(snippet)
     buttonsSection.foreach(s =>
       s.appendChild(copyButton)
-      if !snippet.hasAttribute("hasContext") then s.appendChild(runButton)
+      if !snippet.hasAttribute("hasContext") then {
+        s.appendChild(runButton)
+        s.appendChild(exitButton)
+      }
     )
   }
 

scaladoc-js/src/code-snippets/CodeSnippetsGlobals.scala

@@ -7,4 +7,5 @@ import scala.scalajs.js.annotation.JSGlobalScope
 @JSGlobalScope
 object CodeSnippetsGlobals extends js.Object {
   val scastie: Scastie = js.native
+  val scastieConfiguration: String = js.native
 }

scaladoc/src/dotty/tools/scaladoc/Scaladoc.scala

@@ -58,7 +58,8 @@ object Scaladoc:
     noLinkWarnings: Boolean = false,
     versionsDictionaryUrl: Option[String] = None,
     generateInkuire : Boolean = false,
-    apiSubdirectory : Boolean = false
+    apiSubdirectory : Boolean = false,
+    scastieConfiguration: String = ""
   )
 
   def run(args: Array[String], rootContext: CompilerContext): Reporter =
@@ -224,6 +225,7 @@ object Scaladoc:
         versionsDictionaryUrl.nonDefault,
         generateInkuire.get,
         apiSubdirectory.get,
+        scastieConfiguration.get
       )
       (Some(docArgs), newContext)
     }

scaladoc/src/dotty/tools/scaladoc/ScaladocSettings.scala

@@ -120,5 +120,8 @@ class ScaladocSettings extends SettingGroup with AllScalaSettings:
   val apiSubdirectory: Setting[Boolean] =
     BooleanSetting("-Yapi-subdirectory", "Put the API documentation pages inside a directory `api/`", false)
 
+  val scastieConfiguration: Setting[String] =
+    StringSetting("-scastie-configuration", "Scastie configuration", "Additional configuration passed to Scastie in code snippets", "")
+
   def scaladocSpecificSettings: Set[Setting[_]] =
-    Set(sourceLinks, syntax, revision, externalDocumentationMappings, socialLinks, skipById, skipByRegex, deprecatedSkipPackages, docRootContent, snippetCompiler, generateInkuire)
+    Set(sourceLinks, syntax, revision, externalDocumentationMappings, socialLinks, skipById, skipByRegex, deprecatedSkipPackages, docRootContent, snippetCompiler, generateInkuire, scastieConfiguration)

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

@@ -45,7 +45,6 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
       val end = if param < 0 then url.length else param
       val point = url.lastIndexOf('.', end)
       url.substring(point+1, end)
-
     for res <- resources yield
       fileExtension(res) match
         case "css" => link(rel := "stylesheet", href := resolveLink(dri, res))
@@ -121,7 +120,8 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
     fromResources ++ urls ++ projectLogo ++ Seq(scaladocVersionFile, dynamicJsData)
 
   val searchDataPath = "scripts/searchData.js"
-  val memberResourcesPaths = Seq(searchDataPath) ++ memberResources.map(_.path)
+  val scastieConfigurationPath = "scripts/scastieConfiguration.js"
+  val memberResourcesPaths = Seq(searchDataPath) ++ Seq(scastieConfigurationPath) ++ memberResources.map(_.path)
   val earlyMemberResourcePaths = earlyMemberResources.map(_.path)
 
   def searchData(pages: Seq[Page]) =
@@ -161,6 +161,11 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
     val entries = pages.flatMap(processPage)
     Resource.Text(searchDataPath, s"pages = ${jsonList(entries)};")
 
+  def scastieConfiguration() =
+    Resource.Text(scastieConfigurationPath, s"scastieConfiguration = \"${
+      ctx.args.scastieConfiguration.replace('"'.toString, """\"""")
+    }\"")
+
 
   def allResources(pages: Seq[Page]): Seq[Resource] = earlyMemberResources ++ memberResources ++ Seq(
     dottyRes("favicon.ico"),
@@ -190,7 +195,8 @@ trait Resources(using ctx: DocContext) extends Locations, Writer:
     dottyRes("images/twitter-icon-white.png"),
     dottyRes("images/gitter-icon-black.png"),
     dottyRes("images/gitter-icon-white.png"),
-    searchData(pages)
+    searchData(pages),
+    scastieConfiguration(),
   )
 
   def renderResource(resource: Resource): Seq[String] =