Chore: v0.2.0 preparation (#356)

* Added new `What's next?` section to readme

* Removed experimental feature flags

* Updated config

* Added highlighting to config

* Changed format of config

* Updated version

* Updated feature list

* Updated docs with new features

* Refactored README

* Fixed filters button

* Update version

Author: kraleppa

README.md

@@ -2,7 +2,7 @@
 
 <div align="center">
 
-[![Version Badge](https://img.shields.io/badge/version-v0.1.7-%23b5e1f1)](https://hexdocs.pm/live_debugger)
+[![Version Badge](https://img.shields.io/badge/version-v0.2.0-%23b5e1f1)](https://hexdocs.pm/live_debugger)
 [![Hex.pm Downloads](https://img.shields.io/hexpm/dw/live_debugger?style=flat&label=downloads&color=%23b5e1f1)](https://hex.pm/packages/live_debugger)
 [![GitHub License](https://img.shields.io/github/license/software-mansion/live-debugger?color=%23b5e1f1)](https://github.com/software-mansion/live-debugger/blob/main/LICENSE)
 
@@ -14,7 +14,8 @@ Designed to enhance your development experience LiveDebugger gives you:
 
 - :deciduous_tree: A detailed view of your LiveComponents tree
 - :mag: The ability to inspect assigns for LiveViews and LiveComponents
-- :link: Tracing of their callback executions
+- :link: Tracing and filtering of their callback executions
+- :flashlight: Components highlighting
 
 https://github.com/user-attachments/assets/a09d440c-4217-4597-b30e-f8b911a9094a
 
@@ -30,7 +31,7 @@ Add `live_debugger` to your list of dependencies in `mix.exs`:
 ```elixir
   defp deps do
     [
-      {:live_debugger, "~> 0.1.7", only: :dev}
+      {:live_debugger, "~> 0.2.0", only: :dev}
     ]
   end
 ```
@@ -55,6 +56,16 @@ LiveDebugger has [Igniter](https://github.com/ash-project/igniter) support - an
 mix igniter.install live_debugger
 ```
 
+### DevTools extension
+
+Since version v0.2.0 you can install official LiveDebugger DevTools extension, giving you the ability to interact with its features alongside your application's runtime.
+
+- [Chrome extension](https://chromewebstore.google.com/detail/gmdfnfcigbfkmghbjeelmbkbiglbmbpe?utm_source=item-share-cb)
+- Firefox extension - coming soon!
+
+> [!NOTE]  
+> Ensure the main LiveDebugger dependency is added to your mix project, as the browser plugin alone is not enough.
+
 ## Optional configuration
 
 ### Browser features
@@ -65,10 +76,13 @@ Some features require injecting JS into the debugged application. They are enabl
 # config/dev.exs
 
 # Disables all browser features and does not inject LiveDebugger JS
-config :live_debugger, browser_features?: false
+config :live_debugger, :browser_features?, false
 
 # Disables only debug button
-config :live_debugger, debug_button?: false
+config :live_debugger, :debug_button?, false
+
+# Disables only components highlighting
+config :live_debugger, :highlighting?, false
 ```
 
 ### Content Security Policy
@@ -88,14 +102,20 @@ In `router.ex` of your Phoenix app, make sure your locally running Phoenix app c
 ```elixir
 # config/dev.exs
 
+# Allows you to disable LiveDebugger manually if needed
+config :live_debugger, :disabled?, true
+
+# Time in ms after tracing will be initialized. Useful in case multi-nodes envs
+config :live_debugger, :tracing_setup_delay, 0
+
+# LiveDebugger endpoint config
 config :live_debugger,
   ip: {127, 0, 0, 1}, # IP on which LiveDebugger will be hosted
   port: 4007, # Port on which LiveDebugger will be hosted
-  secret_key_base: "YOUR_SECRET_KEY_BASE", # Secret key used for LiveDebuggerWeb.Endpoint
-  signing_salt: "your_signing_salt", # Signing salt used for LiveDebuggerWeb.Endpoint
-  adapter: Bandit.PhoenixAdapter, # Adapter used in LiveDebuggerWeb.Endpoint
+  secret_key_base: "YOUR_SECRET_KEY_BASE", # Secret key used for LiveDebugger.Endpoint
+  signing_salt: "your_signing_salt", # Signing salt used for LiveDebugger.Endpoint
+  adapter: Bandit.PhoenixAdapter, # Adapter used in LiveDebugger.Endpoint
   server: true, # Forces LiveDebugger to start even if project is not started with the `mix phx.server`
-  tracing_setup_delay: 0 # Time in ms after tracing will be initialized. Useful in case multi-nodes envs
 ```
 
 ## Contributing
@@ -115,6 +135,10 @@ LiveReload is working both for `.ex` files and static files, but if some styles
 mix assets.build:dev
 ```
 
+## What's next
+
+To learn about our upcoming plans and developments, please visit our [discussion page](https://github.com/software-mansion/live-debugger/discussions/355).
+
 ## Authors
 
 LiveDebugger is created by Software Mansion.

config/config.exs

@@ -49,8 +49,6 @@ if config_env() == :dev do
     ]
 
   config :live_debugger, LiveDebuggerWeb.Endpoint, debug_errors: true
-
-  config :live_debugger, experimental_features: :all
 end
 
 if config_env() == :test do

docs/config.md

@@ -6,10 +6,13 @@ Some features require injecting JS into the debugged application. They are enabl
 # config/dev.exs
 
 # Disables all browser features and does not inject LiveDebugger JS
-config :live_debugger, browser_features?: false
+config :live_debugger, :browser_features?, false
 
 # Disables only debug button
-config :live_debugger, debug_button?: false
+config :live_debugger, :debug_button?, false
+
+# Disables only components highlighting
+config :live_debugger, :highlighting?, false
 ```
 
 ### Content Security Policy
@@ -29,12 +32,18 @@ In `router.ex` of your Phoenix app, make sure your locally running Phoenix app c
 ```elixir
 # config/dev.exs
 
+# Allows you to disable LiveDebugger manually if needed
+config :live_debugger, :disabled?, true
+
+# Time in ms after tracing will be initialized. Useful in case multi-nodes envs
+config :live_debugger, :tracing_setup_delay, 0
+
+# LiveDebugger endpoint config
 config :live_debugger,
   ip: {127, 0, 0, 1}, # IP on which LiveDebugger will be hosted
   port: 4007, # Port on which LiveDebugger will be hosted
   secret_key_base: "YOUR_SECRET_KEY_BASE", # Secret key used for LiveDebugger.Endpoint
   signing_salt: "your_signing_salt", # Signing salt used for LiveDebugger.Endpoint
   adapter: Bandit.PhoenixAdapter, # Adapter used in LiveDebugger.Endpoint
   server: true, # Forces LiveDebugger to start even if project is not started with the `mix phx.server`
-  tracing_setup_delay: 0 # Time in ms after tracing will be initialized. Useful in case multi-nodes envs
 ```

docs/welcome.md

@@ -7,6 +7,7 @@ Designed to enhance your development experience LiveDebugger gives you:
 - A detailed view of your LiveComponents tree
 - The ability to inspect assigns for LiveViews and LiveComponents
 - Tracing of their callback executions
+- Components highlighting
 
 ## Installation
 
@@ -23,7 +24,7 @@ Add `live_debugger` to your list of dependencies in `mix.exs`:
 ```elixir
   defp deps do
     [
-      {:live_debugger, "~> 0.1.7", only: :dev}
+      {:live_debugger, "~> 0.2.0", only: :dev}
     ]
   end
 ```
@@ -50,6 +51,17 @@ mix igniter.install live_debugger
 
 <!-- tabs-close -->
 
+### DevTools extension
+
+Since version v0.2.0 you can install official LiveDebugger DevTools extension, giving you the ability to interact with its features alongside your application's runtime.
+
+- [Chrome extension](https://chromewebstore.google.com/detail/gmdfnfcigbfkmghbjeelmbkbiglbmbpe?utm_source=item-share-cb)
+- Firefox extension - coming soon!
+
+> #### Note {: .info}
+>
+> Ensure the main LiveDebugger dependency is added to your mix project, as the browser plugin alone is not enough.
+
 ## Authors
 
 LiveDebugger is created by Software Mansion.

lib/live_debugger/feature.ex

@@ -1,32 +1,15 @@
 defmodule LiveDebugger.Feature do
   @moduledoc """
   Feature flags for LiveDebugger.
-  If you create a new feature, create a new function here with defined rules for enabling it.
+  If you create a new feature that can be enabled or disabled, create a new function here with defined rules for enabling it.
   """
 
   def enabled?(:highlighting) do
-    experimental_feature_enabled?(:highlighting) and
-      Application.get_env(:live_debugger, :browser_features?, true) and
+    Application.get_env(:live_debugger, :browser_features?, true) and
       Application.get_env(:live_debugger, :highlighting?, true)
   end
 
-  def enabled?(:dark_mode) do
-    experimental_feature_enabled?(:dark_mode)
-  end
-
-  def enabled?(:callback_filters) do
-    experimental_feature_enabled?(:callback_filters)
-  end
-
   def enabled?(feature_name) do
     raise "Feature #{feature_name} is not allowed"
   end
-
-  defp experimental_feature_enabled?(feature_name) do
-    case Application.get_env(:live_debugger, :experimental_features, false) do
-      :all -> true
-      features when is_list(features) -> Enum.member?(features, feature_name)
-      _ -> false
-    end
-  end
 end

lib/live_debugger_web/components.ex

@@ -562,20 +562,18 @@ defmodule LiveDebuggerWeb.Components do
           <.icon name="icon-logo-text" class="h-6 w-32" />
         </div>
         <div class="flex items-center">
-          <%= if LiveDebugger.Feature.enabled?(:dark_mode) do %>
-            <.nav_icon
-              id="light-mode-switch"
-              class="dark:hidden"
-              icon="icon-moon"
-              phx-hook="ToggleTheme"
-            />
-            <.nav_icon
-              id="dark-mode-switch"
-              class="hidden dark:block"
-              icon="icon-sun"
-              phx-hook="ToggleTheme"
-            />
-          <% end %>
+          <.nav_icon
+            id="light-mode-switch"
+            class="dark:hidden"
+            icon="icon-moon"
+            phx-hook="ToggleTheme"
+          />
+          <.nav_icon
+            id="dark-mode-switch"
+            class="hidden dark:block"
+            icon="icon-sun"
+            phx-hook="ToggleTheme"
+          />
           <%= @inner_block && render_slot(@inner_block) %>
         </div>
       </div>

lib/live_debugger_web/layout.ex

@@ -47,11 +47,7 @@ defmodule LiveDebuggerWeb.Layout do
             },
           });
 
-          // Disable theme detection till we finish darkmode
-          <%= if LiveDebugger.Feature.enabled?(:dark_mode) do %>
-            window.setTheme();
-          <% end %>
-
+          window.setTheme();
           liveSocket.connect();
 
           window.liveSocket = liveSocket;

lib/live_debugger_web/live/traces_live.ex

@@ -90,10 +90,7 @@ defmodule LiveDebuggerWeb.TracesLive do
             <Traces.refresh_button :if={not @tracing_helper.tracing_started?} />
             <Traces.clear_button :if={not @tracing_helper.tracing_started?} />
             <.live_component
-              :if={
-                not @tracing_helper.tracing_started? &&
-                  LiveDebugger.Feature.enabled?(:callback_filters)
-              }
+              :if={not @tracing_helper.tracing_started?}
               module={LiveDebuggerWeb.LiveComponents.LiveDropdown}
               id="filters-dropdown"
             >
@@ -140,10 +137,7 @@ defmodule LiveDebuggerWeb.TracesLive do
               <% end %>
             <% end %>
           </div>
-          <div
-            :if={LiveDebugger.Feature.enabled?(:callback_filters)}
-            class="flex items-center justify-center mt-4"
-          >
+          <div class="flex items-center justify-center mt-4">
             <%= if @traces_continuation != :loading  do %>
               <.button
                 :if={not @tracing_helper.tracing_started? && @traces_continuation != :end_of_table}

mix.exs

@@ -1,7 +1,7 @@
 defmodule LiveDebugger.MixProject do
   use Mix.Project
 
-  @version "0.1.7"
+  @version "0.2.0-dev"
 
   def project do
     [