diff --git a/lib/live_debugger_web/live/settings_live.ex b/lib/live_debugger_web/live/settings_live.ex
new file mode 100644
index 000000000..092811a90
--- /dev/null
+++ b/lib/live_debugger_web/live/settings_live.ex
@@ -0,0 +1,160 @@
+defmodule LiveDebuggerWeb.SettingsLive do
+ @moduledoc """
+ LiveView for the settings page.
+ """
+
+ use LiveDebuggerWeb, :live_view
+
+ alias LiveDebuggerWeb.Components.Navbar
+ alias LiveDebuggerWeb.Helpers.RoutesHelper
+
+ @impl true
+ def render(assigns) do
+ ~H"""
+
+
+
+
+
+
+
+ <.h1>Settings
+
+
+ <%!-- Upper section --%>
+
+ <%!-- Appearance --%>
+
+
Appearance
+
+ <.dark_mode_button />
+ <.light_mode_button />
+
+
+ <%!-- Checkboxes --%>
+
+ <.settings_switch
+ label="Enable DeadView mode"
+ description="When enabled, LiveDebugger won't redirect to new LiveView after page redirect or reload, allowing you to browse assigns and traces of dead LiveViews."
+ checked={false}
+ phx-click="update"
+ phx-value-setting="deadview_mode"
+ />
+
+ <.settings_switch
+ label="Enable global tracing"
+ description="Enabling this feature may have a negative impact on application performance."
+ checked={false}
+ phx-click="update"
+ phx-value-setting="global_tracing"
+ />
+
+ <.settings_switch
+ label="Refresh tracing on reload"
+ description="Enabling this feature may have a negative impact on application performance."
+ checked={false}
+ phx-click="update"
+ phx-value-setting="refresh_tracing_on_reload"
+ />
+
+
+
+ <%!-- Lower section --%>
+
+ <%!-- Restart button --%>
+
+
+
Restart LiveDebugger
+
+ Use this option if LiveDebugger appears to stop responding or not working properly.
+
+
+ <.button variant="secondary" phx-click="restart">Restart LiveDebugger
+
+
+
+
+ """
+ end
+
+ @impl true
+ def handle_event("update", %{"setting" => _setting}, socket) do
+ {:noreply, socket}
+ end
+
+ @impl true
+ def handle_event("restart", _, socket) do
+ {:noreply, socket}
+ end
+
+ attr(:label, :string, required: true)
+ attr(:description, :string, required: true)
+ attr(:checked, :boolean, default: false)
+ attr(:rest, :global)
+
+ defp settings_switch(assigns) do
+ ~H"""
+
+ <.toggle_switch checked={@checked} wrapper_class="pr-3 py-0" {@rest} />
+
+
<%= @label %>
+
<%= @description %>
+
+
+ """
+ end
+
+ defp dark_mode_button(assigns) do
+ ~H"""
+ <.mode_button
+ id="dark-mode-switch"
+ icon="icon-moon"
+ text="Dark"
+ class="dark:hidden text-button-secondary-content bg-button-secondary-bg hover:bg-button-secondary-bg-hover border border-default-border"
+ phx-hook="ToggleTheme"
+ />
+ <.mode_button
+ icon="icon-moon"
+ text="Dark"
+ class="hidden dark:flex text-button-primary-content bg-button-primary-bg"
+ />
+ """
+ end
+
+ defp light_mode_button(assigns) do
+ ~H"""
+ <.mode_button
+ id="light-mode-switch"
+ icon="icon-sun"
+ text="Light"
+ class="hidden dark:flex text-button-secondary-content bg-button-secondary-bg hover:bg-button-secondary-bg-hover border border-default-border"
+ phx-hook="ToggleTheme"
+ />
+ <.mode_button
+ icon="icon-sun"
+ text="Light"
+ class="dark:hidden text-button-primary-content bg-button-primary-bg"
+ />
+ """
+ end
+
+ attr(:icon, :string, required: true)
+ attr(:text, :string, required: true)
+ attr(:class, :string, default: "")
+ attr(:rest, :global)
+
+ defp mode_button(assigns) do
+ ~H"""
+
+ """
+ end
+end
diff --git a/lib/live_debugger_web/live/traces_live.ex b/lib/live_debugger_web/live/traces_live.ex
index d0bbb5eb7..ed8578719 100644
--- a/lib/live_debugger_web/live/traces_live.ex
+++ b/lib/live_debugger_web/live/traces_live.ex
@@ -84,7 +84,7 @@ defmodule LiveDebuggerWeb.TracesLive do
def render(assigns) do
~H"""
- <.section title="Callback traces" id="traces" inner_class="mx-0 my-4 px-4" class="flex-1">
+ <.section title="Callback traces" id="traces" inner_class="mx-0 mt-4 px-4" class="flex-1">
<:right_panel>
@@ -145,13 +145,13 @@ defmodule LiveDebuggerWeb.TracesLive do
<.button
:if={not @tracing_helper.tracing_started? && @traces_continuation != :end_of_table}
phx-click="load-more"
- class="w-40"
+ class="w-4 mb-4"
variant="secondary"
>
Load more
<% else %>
- <.spinner size="sm" />
+ <.spinner size="sm" class="mb-4" />
<% end %>
diff --git a/lib/live_debugger_web/live/window_dashboard_live.ex b/lib/live_debugger_web/live/window_dashboard_live.ex
index c69b4e243..4bf6895e8 100644
--- a/lib/live_debugger_web/live/window_dashboard_live.ex
+++ b/lib/live_debugger_web/live/window_dashboard_live.ex
@@ -35,7 +35,7 @@ defmodule LiveDebuggerWeb.WindowDashboardLive do
/>
-
+
diff --git a/lib/live_debugger_web/router.ex b/lib/live_debugger_web/router.ex
index 7782bb49d..c0b47f512 100644
--- a/lib/live_debugger_web/router.ex
+++ b/lib/live_debugger_web/router.ex
@@ -22,6 +22,7 @@ defmodule LiveDebuggerWeb.Router do
live("/pid/:pid", ChannelDashboardLive)
live("/transport_pid/:transport_pid", WindowDashboardLive)
+ live("/settings", SettingsLive)
live("/", LiveViewsDashboardLive)
end
end
diff --git a/test/live_debugger/channel_dashboard_test.exs b/test/live_debugger/channel_dashboard_test.exs
index e78b09578..f1564e936 100644
--- a/test/live_debugger/channel_dashboard_test.exs
+++ b/test/live_debugger/channel_dashboard_test.exs
@@ -108,6 +108,21 @@ defmodule LiveDebugger.ChannelDashboardTest do
end)
end
+ @sessions 2
+ feature "settings button exists and redirects to settings page", %{
+ sessions: [dev_app, debugger]
+ } do
+ dev_app
+ |> visit(@dev_app_url)
+
+ debugger
+ |> visit("/")
+ |> click(first_link())
+ |> assert_has(css("navbar a[href=\"/settings\"]"))
+ |> click(css("navbar a[href=\"/settings\"]"))
+ |> assert_has(css("h1", text: "Settings"))
+ end
+
@sessions 2
feature "user can change nodes using node tree and see their assigns and callback traces", %{
sessions: [dev_app, debugger]
diff --git a/test/live_debugger/live_views_dashboard_test.exs b/test/live_debugger/live_views_dashboard_test.exs
index 4f888b9cb..847a05d99 100644
--- a/test/live_debugger/live_views_dashboard_test.exs
+++ b/test/live_debugger/live_views_dashboard_test.exs
@@ -22,6 +22,20 @@ defmodule LiveDebugger.LiveViewsDashboardTest do
|> assert_has(live_sessions(count: 2))
end
+ @sessions 2
+ feature "settings button exists and redirects to settings page", %{
+ sessions: [dev_app, debugger]
+ } do
+ dev_app
+ |> visit(@dev_app_url)
+
+ debugger
+ |> visit("/")
+ |> assert_has(css("navbar a[href=\"/settings\"]"))
+ |> click(css("navbar a[href=\"/settings\"]"))
+ |> assert_has(css("h1", text: "Settings"))
+ end
+
defp title(text: text), do: css("h1", text: text)
defp live_sessions(count: count), do: css("#live-sessions > div", count: count)
diff --git a/test/live_debugger/window_dashboard_test.exs b/test/live_debugger/window_dashboard_test.exs
index 9257e0762..c91177e44 100644
--- a/test/live_debugger/window_dashboard_test.exs
+++ b/test/live_debugger/window_dashboard_test.exs
@@ -31,6 +31,22 @@ defmodule LiveDebugger.WindowDashboardTest do
|> assert_has(live_sessions(count: 1))
end
+ @sessions 2
+ feature "settings button exists and redirects to settings page", %{
+ sessions: [dev_app, debugger]
+ } do
+ dev_app
+ |> visit(@dev_app_url)
+
+ debugger
+ |> visit("/")
+ |> click(window_link())
+ |> assert_has(title(text: "Active LiveViews in a single window"))
+ |> assert_has(css("navbar a[href=\"/settings\"]"))
+ |> click(css("navbar a[href=\"/settings\"]"))
+ |> assert_has(css("h1", text: "Settings"))
+ end
+
defp title(text: text), do: css("h1", text: text)
defp live_sessions(count: count), do: css("#live-sessions ", count: count)