Enhancement: Add option to disable debug button

assets/client/client.css

@@ -19,6 +19,7 @@
 
 #live-debugger-debug-button.live-debugger-inspect-mode {
   background-color: #87cce8;
+  pointer-events: none;
 }
 
 #live-debugger-debug-button.live-debugger-inspect-mode .live-debugger-bug-icon {

assets/client/client.js

@@ -30,7 +30,7 @@ window.document.addEventListener('DOMContentLoaded', function () {
 
     initElementInspection({ baseURL, debugChannel, socketID });
     initTooltip();
-    initDebugMenu(sessionURL, debugChannel);
+    initDebugMenu(metaTag, sessionURL, debugChannel);
     initHighlight(debugChannel);
   }
 

assets/client/components/debug_menu.js

@@ -1,13 +1,26 @@
 import initDebugButton from './debug_button/debug_button';
 import initDebugOptions from './debug_options/debug_options';
 import { dispatchCustomEvent } from '../utils/dom';
+import { isDebugButtonEnabled } from '../utils/meta';
 
-export default function initDebugMenu(liveDebuggerURL, debugChannel) {
+export default function initDebugMenu(metaTag, liveDebuggerURL, debugChannel) {
   const debugButton = initDebugButton();
   const debugMenu = initDebugOptions({ liveDebuggerURL, debugChannel });
 
-  document.body.appendChild(debugButton);
-  document.body.appendChild(debugMenu);
+  if (isDebugButtonEnabled(metaTag)) {
+    document.body.appendChild(debugButton);
+    document.body.appendChild(debugMenu);
+  }
+
+  debugChannel.on('toggle-debug-button', ({ enabled }) => {
+    if (enabled) {
+      document.body.appendChild(debugButton);
+      document.body.appendChild(debugMenu);
+    } else {
+      debugButton.remove();
+      debugMenu.remove();
+    }
+  });
 
   // Hide menu when clicking outside
   document.addEventListener('click', (event) => {

assets/client/components/debug_options/debug_options.js

@@ -44,11 +44,6 @@ export default function initDebugOptions({ liveDebuggerURL, debugChannel }) {
     }
   };
 
-  const onMoveButtonClick = () => {
-    dispatchCustomEvent('lvdbg:move-button-click');
-    hideDebugOptions();
-  };
-
   const onNewTabButtonClick = () => {
     window.open(liveDebuggerURL, '_blank');
     hideDebugOptions();
@@ -59,6 +54,11 @@ export default function initDebugOptions({ liveDebuggerURL, debugChannel }) {
     hideDebugOptions();
   };
 
+  const onMoveButtonClick = () => {
+    dispatchCustomEvent('lvdbg:move-button-click');
+    hideDebugOptions();
+  };
+
   debugOptions
     .querySelector('#live-debugger-debug-tooltip-open-in-new-tab')
     .addEventListener('click', onNewTabButtonClick);

assets/client/services/inspect.js

@@ -145,9 +145,8 @@ export default function initElementInspection({
     inspectMode = false;
     lastID = null;
 
-    document
-      .getElementById('live-debugger-debug-button')
-      .classList.remove('live-debugger-inspect-mode');
+    const debugButton = document.getElementById('live-debugger-debug-button');
+    if (debugButton) debugButton.classList.remove('live-debugger-inspect-mode');
 
     pushClearEvent();
     pushRemoveTooltipEvent();
@@ -167,9 +166,8 @@ export default function initElementInspection({
 
     inspectMode = true;
 
-    document
-      .getElementById('live-debugger-debug-button')
-      .classList.add('live-debugger-inspect-mode');
+    const debugButton = document.getElementById('live-debugger-debug-button');
+    if (debugButton) debugButton.classList.add('live-debugger-inspect-mode');
 
     document.body.classList.add('live-debugger-inspect-mode');
     document.body.addEventListener('click', handleInspect);

assets/client/utils/meta.js

@@ -30,3 +30,7 @@ export function getMetaTag() {
 export function fetchLiveDebuggerBaseURL(metaTag) {
   return metaTag.getAttribute('url');
 }
+
+export function isDebugButtonEnabled(metaTag) {
+  return metaTag.hasAttribute('debug-button');
+}

lib/live_debugger.ex

@@ -4,6 +4,8 @@ defmodule LiveDebugger do
   """
   use Application
 
+  alias LiveDebugger.API.SettingsStorage
+
   @app_name :live_debugger
 
   @default_ip {127, 0, 0, 1}
@@ -21,19 +23,24 @@ defmodule LiveDebugger do
     Supervisor.start_link(children, strategy: :one_for_one, name: LiveDebugger.Supervisor)
   end
 
-  defp get_children() do
-    config = Application.get_all_env(@app_name)
-
-    put_endpoint_config(config)
-    put_live_debugger_tags(config)
+  def update_live_debugger_tags() do
+    @app_name
+    |> Application.get_all_env()
+    |> put_live_debugger_tags()
+  end
 
+  defp get_children() do
     if LiveDebugger.Env.unit_test?() do
       []
     else
       LiveDebugger.API.SettingsStorage.init()
       LiveDebugger.API.TracesStorage.init()
       LiveDebugger.API.StatesStorage.init()
 
+      config = Application.get_all_env(@app_name)
+      put_endpoint_config(config)
+      put_live_debugger_tags(config)
+
       []
       |> LiveDebugger.App.append_app_children()
       |> LiveDebugger.Bus.append_bus_tree()
@@ -91,7 +98,8 @@ defmodule LiveDebugger do
       css_url: live_debugger_css_url,
       phoenix_url: live_debugger_phoenix_url,
       browser_features?: browser_features?,
-      version: version
+      version: version,
+      debug_button?: SettingsStorage.get(:debug_button)
     }
 
     tags = LiveDebugger.Client.ConfigComponent.live_debugger_tags(assigns)

lib/live_debugger/api/settings_storage.ex

@@ -2,7 +2,8 @@ defmodule LiveDebugger.API.SettingsStorage do
   @available_settings [
     :dead_view_mode,
     :tracing_update_on_code_reload,
-    :garbage_collection
+    :garbage_collection,
+    :debug_button
   ]
 
   @moduledoc """
@@ -75,7 +76,8 @@ defmodule LiveDebugger.API.SettingsStorage do
     @default_settings %{
       dead_view_mode: true,
       tracing_update_on_code_reload: false,
-      garbage_collection: true
+      garbage_collection: true,
+      debug_button: true
     }
 
     @table_name :lvdbg_settings

lib/live_debugger/app/settings/web/settings_live.ex

@@ -5,6 +5,7 @@ defmodule LiveDebugger.App.Settings.Web.SettingsLive do
 
   use LiveDebugger.App.Web, :live_view
 
+  alias LiveDebugger.Client
   alias LiveDebugger.App.Events.UserChangedSettings
   alias LiveDebugger.API.SettingsStorage
   alias LiveDebugger.App.Settings.Actions, as: SettingsActions
@@ -79,6 +80,14 @@ defmodule LiveDebugger.App.Settings.Web.SettingsLive do
               phx-click="update"
               phx-value-setting="garbage_collection"
             />
+            <SettingsComponents.settings_switch
+              id="debug-button-switch"
+              label="Debug Button"
+              description="When enabled, a debug button will be added to every LiveView page, allowing you to quickly open LiveDebugger for the current page."
+              checked={@settings[:debug_button]}
+              phx-click="update"
+              phx-value-setting="debug_button"
+            />
           </div>
         </div>
 
@@ -116,6 +125,11 @@ defmodule LiveDebugger.App.Settings.Web.SettingsLive do
     |> SettingsActions.update_settings!(setting, not socket.assigns.settings[setting])
     |> case do
       {:ok, new_settings} ->
+        if setting == :debug_button do
+          LiveDebugger.update_live_debugger_tags()
+          Client.push_event!("*", "toggle-debug-button", %{enabled: new_settings[:debug_button]})
+        end
+
         socket
         |> assign(settings: new_settings)
         |> push_flash(:info, "Setting updated successfully")

lib/live_debugger/client.ex

@@ -9,10 +9,12 @@ defmodule LiveDebugger.Client do
 
   @doc """
   Pushes event to the client.
+  Use \"*\" as `debugged_socket_id` to send event to all connected clients.
 
   ## Examples
 
       LiveDebugger.Client.push_event!("debugged_socket_id", "event", %{"key" => "value"})
+      LiveDebugger.Client.push_event!("*", "event", %{"key" => "value"})
   """
   @spec push_event!(String.t(), String.t(), map()) :: :ok
   def push_event!(debugged_socket_id, event, payload \\ %{}) do

lib/live_debugger/client/channel.ex

@@ -8,6 +8,7 @@ defmodule LiveDebugger.Client.Channel do
 
   @impl true
   def join("client:" <> _debugged_socket_id, _params, socket) do
+    Phoenix.PubSub.subscribe(@pubsub_name, "client:*")
     {:ok, socket}
   end
 

lib/live_debugger/client/config_component.ex

@@ -12,10 +12,11 @@ defmodule LiveDebugger.Client.ConfigComponent do
   attr(:phoenix_url, :string, required: true)
   attr(:browser_features?, :boolean, default: true)
   attr(:version, :string, default: nil)
+  attr(:debug_button?, :boolean, default: true)
 
   def live_debugger_tags(assigns) do
     ~H"""
-    <meta name="live-debugger-config" url={@url} version={@version} />
+    <meta name="live-debugger-config" url={@url} version={@version} debug-button={@debug_button?} />
     <%= if @browser_features? do %>
       <script src={@js_url}>
       </script>