From 8e73e6ae0fc9b197f54b32242a4c70bfa634f309 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20D=C3=BCsing?= <j.duesing13@googlemail.com>
Date: Wed, 17 Dec 2025 15:07:14 +0100
Subject: [PATCH 1/5] Move ConfigurationExplorer HTML template to ScalaDoc v3
 design. Add CE run to unidoc SBT command

---
 TOOLS/ce/src/main/resources/ce.conf       |   2 +-
 TOOLS/ce/src/main/resources/template.html | 119 ++++++++++++++++++----
 build.sbt                                 |   9 +-
 3 files changed, 106 insertions(+), 24 deletions(-)
diff --git a/TOOLS/ce/src/main/resources/ce.conf b/TOOLS/ce/src/main/resources/ce.conf
index a07608269b..a6393d281a 100644
--- a/TOOLS/ce/src/main/resources/ce.conf
+++ b/TOOLS/ce/src/main/resources/ce.conf
@@ -31,7 +31,7 @@
             # This does not render correctly on the documentation due to it being an HTML expression
             # @type String
             # @constraint Must be a valid closed HTML expression
-            headline = "<h3 class=\"key\"> $label $brief$details</h3>"
+            headline = "<div class=\"key\"> <h3>$label</h3> $brief$details</div>"
 
             brief = "<span class=\"preview\">- $brief </span>"
 
diff --git a/TOOLS/ce/src/main/resources/template.html b/TOOLS/ce/src/main/resources/template.html
index 63e0793cea..3d27931631 100644
--- a/TOOLS/ce/src/main/resources/template.html
+++ b/TOOLS/ce/src/main/resources/template.html
@@ -1,58 +1,110 @@
 <!DOCTYPE html>
 <html lang="de">
+
 <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
     <title>The OPAL Framework $version</title>
     <meta content="The OPAL Framework $version" name="description"/>
     <meta content="The OPAL Framework $version" name="keywords"/>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
-    <link href="lib/index.css" media="screen" type="text/css" rel="stylesheet"/>
-    <link href="lib/template.css" media="screen" type="text/css" rel="stylesheet"/>
-    <link href="lib/print.css" media="print" type="text/css" rel="stylesheet"/>
-    <link href="lib/diagrams.css" media="screen" type="text/css" rel="stylesheet" id="diagrams-css"/>
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+    <script type="text/javascript" src="scripts/theme.js"></script>
+    <script type="text/javascript" src="scripts/searchData.js" defer="true"></script>
+    <script type="text/javascript" src="scripts/scastieConfiguration.js" defer="true"></script>
+    <link rel="stylesheet" href="styles/theme/bundle.css">
+    <link rel="stylesheet" href="styles/theme/components/bundle.css">
+    <link rel="stylesheet" href="styles/theme/components/button/bundle.css">
+    <link rel="stylesheet" href="styles/theme/layout/bundle.css">
+    <link rel="stylesheet" href="styles/nord-light.css">
+    <link rel="stylesheet" href="styles/dotty-icons.css">
+    <link rel="stylesheet" href="styles/filter-bar.css">
+    <link rel="stylesheet" href="styles/code-snippets.css">
+    <link rel="stylesheet" href="styles/searchbar.css">
+    <link rel="stylesheet" href="styles/social-links.css">
+    <link rel="stylesheet" href="styles/versions-dropdown.css">
+    <link rel="stylesheet" href="styles/content-contributors.css">
+    <link rel="stylesheet" href="styles/fontawesome.css">
+
+    <script type="text/javascript" src="hljs/highlight.pack.js" defer="true"></script>
+    <script type="text/javascript" src="scripts/hljs-scala3.js" defer="true"></script>
+    <script type="text/javascript" src="scripts/ux.js" defer="true"></script>
+    <script type="text/javascript" src="scripts/common/component.js" defer="true"></script>
+    <script type="text/javascript" src="scripts/common/utils.js" defer="true"></script>
+    <script type="text/javascript" src="scripts/components/FilterBar.js" defer="true"></script>
+    <script type="text/javascript" src="scripts/components/DocumentableList.js" defer="true"></script>
+    <script type="text/javascript" src="scripts/components/Input.js" defer="true"></script>
+    <script type="text/javascript" src="scripts/components/FilterGroup.js" defer="true"></script>
+    <script type="text/javascript" src="scripts/components/Filter.js" defer="true"></script>
+    <script type="text/javascript" src="scripts/scaladoc-scalajs.js" defer="true"></script>
+    <script type="text/javascript" src="scripts/contributors.js" defer="true"></script>
+    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" defer="true"></script>
+    <script type="text/javascript" src="https://d3js.org/d3.v6.min.js" defer="true"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/graphlib-dot@0.6.2/dist/graphlib-dot.min.js"
+            defer="true"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.1/dagre-d3.min.js"
+            defer="true"></script>
+    <script type="text/javascript" src="https://scastie.scala-lang.org/embedded.js" defer="true"></script>
+    <script type="text/javascript" src="scripts/data.js" defer="true"></script>
+    <link rel="stylesheet" href="styles/apistyles.css">
+    <script>var pathToRoot = "";</script>
+
     <style>
         body {
             font-family: sans-serif;
             padding: 1em;
+            background: var(--background-default);
         }
 
         hr {
-            margin-top : 2em;
-            margin-bottom: 2em;
+            margin-top : 0.75em;
+            margin-bottom: 0.75em;
             border-width: 1px;
-            color: #DCDCDE;
+            color: var(--border-default);
         }
 
         .value {
             padding: 1em;
-            border: 0.1em solid #DCDCDE;
+            border: 0.1em solid var(--border-default);
             border-radius: 0.5em;
             margin-left: 2em;
             display: none;
+            position:relative;
         }
         .value.expanded {
             display: block;
         }
 
         .key {
-            color: #28272D;
-            background-color: #FBFAFD;
             margin: 1em 0em;
+            position:relative;
         }
 
         .preview {
             font-weight: normal;
-            font-size: 0.65em;
-            color: #626168;
+            font-size: 1.0em;
+            margin-left: 2em;
+            color: var(--text-secondary);
+        }
+
+        #config-content {
+            padding-top: calc(6 * var(--base-spacing));
+            padding-bottom: calc(6 * var(--base-spacing));
+            padding-right: 2em;
+            margin-left: 1em;
+            flex-flow: column;
+            color: var(--text-primary);
+            height: 100vh;
+            overflow-y:auto;
         }
 
         .expandButton {
             float: right;
-            color: #626168;
-            font-size: 0.5em;
+            color: var(--text-secondary);
+            font-size: 0.65em;
             padding: 0.4em;
-            border: 0.1em solid #DCDCDE;
+            border: 0.1em solid var(--border-default);
             border-radius: 0.25em;
             border-collapse: collapse;
         }
@@ -103,6 +155,7 @@
         }
 
     </style>
+
     <script type="module">
         import { highlightSearchTerm } from "https://cdn.jsdelivr.net/npm/highlight-search-term@1.0.2/src/index.js";
         const search = document.getElementById("index-input");
@@ -140,20 +193,42 @@
         };
     </script>
 </head>
-<body>
-<div id="search">
-    <span id="doc-title">The OPAL Framework<span id="doc-version">5.0.1-SNAPSHOT</span></span> <span class="close-results"><span class="left">&lt;</span> Back</span>
-    <div id="textfilter">
-        <span class="input"><input autocapitalize="none" placeholder="Search" id="index-input" type="text" accesskey="/" onkeyup="searchConfig()"/><i class="clear material-icons"></i><i id="search-icon" class="material-icons"></i></span>
+<body style="padding-right:0em;padding-left:0em;">
+<div id="header" class="body-small">
+    <div class="header-container-left"><a href="" class="logo-container"><span class="project-name h300">The
+                        OPAL Framework</span></a><span class="text-button"><a href="./config.html"><div class="projectVersion">$version</div></a></span>
+        <div id="version-dropdown" class="dropdown-menu"></div>
     </div>
+    <div class="header-container-right"><button id="search-toggle" class="icon-button"></button><span
+            id="theme-toggle" class="icon-button"></span><span id="mobile-menu-toggle"
+                                                               class="icon-button hamburger"></span></div>
 </div>
-<div id="content-scroll-container" style="-webkit-overflow-scrolling: touch;">
+<div id="mobile-menu">
+    <div class="mobile-menu-header body-small"><span class="mobile-menu-logo"><span
+            class="project-name h300">The OPAL Framework $version</span></span><button id="mobile-menu-close"
+                                                                              class="icon-button close"></button></div>
+    <div class="mobile-menu-container body-medium"><input id="mobile-scaladoc-searchbar-input"
+                                                          class="scaladoc-searchbar-input" type="search" placeholder="Find anything"><span
+            id="mobile-theme-toggle" class="mobile-menu-item mode"></span></div>
+    </div><span id="mobile-sidebar-toggle" class="floating-button"></span>
+<div id="config-content" class="body-medium">
+    $body
+</div>
+<!--div id="content-scroll-container" style="-webkit-overflow-scrolling: touch;">
     <div id="content-container" style="-webkit-overflow-scrolling: touch;">
         <div id="content">
             $body
         </div>
     </div>
+</div-->
+<div id="footer" class="body-small">
+    <div class="left-container">Based on</div>
+    <div class="right-container">
+        <div class="text"></div>
+    </div>
+    <div class="text-mobile"></div>
 </div>
+<div id="scaladoc-searchBar"></div>
 
 <script>
     document.querySelectorAll('.key').forEach(key => {
diff --git a/build.sbt b/build.sbt
index 46e3e5f3ea..48cbdaf505 100644
--- a/build.sbt
+++ b/build.sbt
@@ -160,7 +160,14 @@ lazy val `OPAL` = (project in file("."))
             validate,
             demos,
             tools
-        )
+        ),
+        Compile / unidoc := {
+            // Overrides doc method to include config documentation at doc
+            val originalDoc = (Compile / unidoc).value
+            (ConfigurationExplorer / Compile / compile).value
+            (ConfigurationExplorer / Compile / run).toTask("").value
+            originalDoc
+        }
     )
     .aggregate(
         common,

From eb95da2782e8173f58729d3085c18be8017b877a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20D=C3=BCsing?= <j.duesing13@googlemail.com>
Date: Wed, 17 Dec 2025 16:21:32 +0100
Subject: [PATCH 2/5] Reintroduce search bar in configuration explorer

---
 TOOLS/ce/src/main/resources/ce.conf       |  2 +-
 TOOLS/ce/src/main/resources/template.html | 39 +++++++++++------------
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/TOOLS/ce/src/main/resources/ce.conf b/TOOLS/ce/src/main/resources/ce.conf
index a6393d281a..a07608269b 100644
--- a/TOOLS/ce/src/main/resources/ce.conf
+++ b/TOOLS/ce/src/main/resources/ce.conf
@@ -31,7 +31,7 @@
             # This does not render correctly on the documentation due to it being an HTML expression
             # @type String
             # @constraint Must be a valid closed HTML expression
-            headline = "<div class=\"key\"> <h3>$label</h3> $brief$details</div>"
+            headline = "<h3 class=\"key\"> $label $brief$details</h3>"
 
             brief = "<span class=\"preview\">- $brief </span>"
 
diff --git a/TOOLS/ce/src/main/resources/template.html b/TOOLS/ce/src/main/resources/template.html
index 3d27931631..b6c7bdf112 100644
--- a/TOOLS/ce/src/main/resources/template.html
+++ b/TOOLS/ce/src/main/resources/template.html
@@ -84,7 +84,6 @@
         .preview {
             font-weight: normal;
             font-size: 1.0em;
-            margin-left: 2em;
             color: var(--text-secondary);
         }
 
@@ -95,10 +94,24 @@
             margin-left: 1em;
             flex-flow: column;
             color: var(--text-primary);
-            height: 100vh;
+            height: 92vh;
             overflow-y:auto;
         }
 
+        #config-content a {
+          color: var(--text-primary);
+          text-decoration: underline solid 1px;
+          -webkit-text-decoration-line: underline; /* Safari */
+          text-decoration-line: underline;
+          text-underline-offset: 2px;
+        }
+
+        #index-input {
+            width: 45vw;
+            border: 0.1em solid var(--border-default);
+            border-radius: 0.5em;
+        }
+
         .expandButton {
             float: right;
             color: var(--text-secondary);
@@ -196,10 +209,11 @@
 <body style="padding-right:0em;padding-left:0em;">
 <div id="header" class="body-small">
     <div class="header-container-left"><a href="" class="logo-container"><span class="project-name h300">The
-                        OPAL Framework</span></a><span class="text-button"><a href="./config.html"><div class="projectVersion">$version</div></a></span>
-        <div id="version-dropdown" class="dropdown-menu"></div>
+                        OPAL Framework</span></a>
     </div>
-    <div class="header-container-right"><button id="search-toggle" class="icon-button"></button><span
+    <div class="header-container-right"><div id="textfilter">
+        <input class="scaladoc-searchbar-input" autocomplete="off" autocapitalize="none" placeholder="Search Configuration" id="index-input" type="text" accesskey="/" onkeyup="searchConfig()"/>
+    </div><span
             id="theme-toggle" class="icon-button"></span><span id="mobile-menu-toggle"
                                                                class="icon-button hamburger"></span></div>
 </div>
@@ -214,21 +228,6 @@
 <div id="config-content" class="body-medium">
     $body
 </div>
-<!--div id="content-scroll-container" style="-webkit-overflow-scrolling: touch;">
-    <div id="content-container" style="-webkit-overflow-scrolling: touch;">
-        <div id="content">
-            $body
-        </div>
-    </div>
-</div-->
-<div id="footer" class="body-small">
-    <div class="left-container">Based on</div>
-    <div class="right-container">
-        <div class="text"></div>
-    </div>
-    <div class="text-mobile"></div>
-</div>
-<div id="scaladoc-searchBar"></div>
 
 <script>
     document.querySelectorAll('.key').forEach(key => {

From cd21f38742489b32b455d6cede3f1b75ea0d85d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20D=C3=BCsing?= <j.duesing13@googlemail.com>
Date: Wed, 17 Dec 2025 16:46:40 +0100
Subject: [PATCH 3/5] Remove CE run during normal sbt doc

---
 build.sbt | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/build.sbt b/build.sbt
index 48cbdaf505..86ad7f71fb 100644
--- a/build.sbt
+++ b/build.sbt
@@ -524,13 +524,6 @@ lazy val `ConfigurationExplorer` = (project in file("TOOLS/ce"))
         javaOptions += s"-Dbuild.version=${version.value}",
         name := "Configuration Explorer",
         libraryDependencies ++= Dependencies.ce,
-        Compile / doc := {
-            // Overrides doc method to include config documentation at doc
-            val originalDoc = (Compile / doc).value
-            (Compile / compile).value
-            (Compile / run).toTask("").value
-            originalDoc
-        },
         Compile / doc / scalacOptions ++= Opts.doc.title("OPAL - Configuration Explorer")
     )
     .dependsOn(

From 4e353644b94045d5abfefb9e60e566a7a4c5c288 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20D=C3=BCsing?= <j.duesing13@googlemail.com>
Date: Thu, 12 Feb 2026 15:37:18 +0100
Subject: [PATCH 4/5] Remove unused libraries from CE template

---
 TOOLS/ce/src/main/resources/template.html | 23 -----------------------
 1 file changed, 23 deletions(-)

diff --git a/TOOLS/ce/src/main/resources/template.html b/TOOLS/ce/src/main/resources/template.html
index b6c7bdf112..c369e39654 100644
--- a/TOOLS/ce/src/main/resources/template.html
+++ b/TOOLS/ce/src/main/resources/template.html
@@ -11,8 +11,6 @@
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
     <script type="text/javascript" src="scripts/theme.js"></script>
-    <script type="text/javascript" src="scripts/searchData.js" defer="true"></script>
-    <script type="text/javascript" src="scripts/scastieConfiguration.js" defer="true"></script>
     <link rel="stylesheet" href="styles/theme/bundle.css">
     <link rel="stylesheet" href="styles/theme/components/bundle.css">
     <link rel="stylesheet" href="styles/theme/components/button/bundle.css">
@@ -26,27 +24,6 @@
     <link rel="stylesheet" href="styles/versions-dropdown.css">
     <link rel="stylesheet" href="styles/content-contributors.css">
     <link rel="stylesheet" href="styles/fontawesome.css">
-
-    <script type="text/javascript" src="hljs/highlight.pack.js" defer="true"></script>
-    <script type="text/javascript" src="scripts/hljs-scala3.js" defer="true"></script>
-    <script type="text/javascript" src="scripts/ux.js" defer="true"></script>
-    <script type="text/javascript" src="scripts/common/component.js" defer="true"></script>
-    <script type="text/javascript" src="scripts/common/utils.js" defer="true"></script>
-    <script type="text/javascript" src="scripts/components/FilterBar.js" defer="true"></script>
-    <script type="text/javascript" src="scripts/components/DocumentableList.js" defer="true"></script>
-    <script type="text/javascript" src="scripts/components/Input.js" defer="true"></script>
-    <script type="text/javascript" src="scripts/components/FilterGroup.js" defer="true"></script>
-    <script type="text/javascript" src="scripts/components/Filter.js" defer="true"></script>
-    <script type="text/javascript" src="scripts/scaladoc-scalajs.js" defer="true"></script>
-    <script type="text/javascript" src="scripts/contributors.js" defer="true"></script>
-    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" defer="true"></script>
-    <script type="text/javascript" src="https://d3js.org/d3.v6.min.js" defer="true"></script>
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/graphlib-dot@0.6.2/dist/graphlib-dot.min.js"
-            defer="true"></script>
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dagre-d3/0.6.1/dagre-d3.min.js"
-            defer="true"></script>
-    <script type="text/javascript" src="https://scastie.scala-lang.org/embedded.js" defer="true"></script>
-    <script type="text/javascript" src="scripts/data.js" defer="true"></script>
     <link rel="stylesheet" href="styles/apistyles.css">
     <script>var pathToRoot = "";</script>
 

From c7ad6bfdab8de57a7104282aea1904d20a671d69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20D=C3=BCsing?= <j.duesing13@googlemail.com>
Date: Thu, 12 Feb 2026 15:38:03 +0100
Subject: [PATCH 5/5] Fix bug in CE where missing spaces around '=' sign lead
 to keys missing their last char

---
 TOOLS/ce/src/main/scala/org/opalj/ce/CommentParser.scala | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/TOOLS/ce/src/main/scala/org/opalj/ce/CommentParser.scala b/TOOLS/ce/src/main/scala/org/opalj/ce/CommentParser.scala
index 9fdc5094ba..c0421ab9c8 100644
--- a/TOOLS/ce/src/main/scala/org/opalj/ce/CommentParser.scala
+++ b/TOOLS/ce/src/main/scala/org/opalj/ce/CommentParser.scala
@@ -137,7 +137,7 @@ object CommentParser {
                         val terminatingIndex = line.indexWhere(objectKeyTerminatingChars.contains)
 
                         // Splitting the key from the string (while splitting of the ':' or '=' as they are not needed anymore
-                        currentKey = line.substring(0, terminatingIndex - 1).trim.stripPrefix("\"").stripSuffix("\"")
+                        currentKey = line.substring(0, terminatingIndex).trim.stripPrefix("\"").stripSuffix("\"")
                         line = line.substring(terminatingIndex).stripPrefix(":").stripPrefix("=").trim
 
                         // Evaluating the type of value
