AttachDevTools (#260)

fabulous-dev · Nov 15, 2024 · 24a52c3 · 24a52c3
1 parent 8b51fe4
commit 24a52c3
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 20 deletions.
diff --git a/extensions/Fabulous.Avalonia.Diagnostics/DevTools.fs b/extensions/Fabulous.Avalonia.Diagnostics/DevTools.fs
@@ -2,43 +2,44 @@
 
 open System.Runtime.CompilerServices
 open Avalonia
+open Avalonia.Controls
 open Avalonia.Diagnostics
 open Fabulous
 open Fabulous.Avalonia
 
 module DevTools =
     let AttachDevTools =
-        Attributes.defineProperty "Application_AttachDevTools" (ValueNone, ValueNone) (fun target (value: DevToolsOptions voption * Input.KeyGesture voption) ->
-            let app = target :?> FabApplication
+        Attributes.defineProperty "MainWindow_AttachDevTools" (ValueNone, ValueNone) (fun target (value: DevToolsOptions voption * Input.KeyGesture voption) ->
+            let app = target :?> Window
             let options, gesture = value
 
             if options.IsSome then
-                app.MainWindow.AttachDevTools(options.Value)
+                app.AttachDevTools(options.Value)
             else if gesture.IsSome then
-                app.MainWindow.AttachDevTools(gesture.Value)
+                app.AttachDevTools(gesture.Value)
             else
-                app.MainWindow.AttachDevTools())
+                app.AttachDevTools())
 
 type DevToolsModifiers =
     /// <summary>Attaches the Avalonia Developer Tools with the specified options.
     /// See https://docs.avaloniaui.net/docs/guides/implementation-guides/developer-tools</summary>
     /// <param name="this">The Current widget.</param>
     /// <param name="value">The Developer Tools options.</param>
     [<Extension>]
-    static member inline attachDevTools(this: WidgetBuilder<'msg, #IFabApplication>, value: DevToolsOptions) =
+    static member inline attachDevTools(this: WidgetBuilder<'msg, #IFabWindow>, value: DevToolsOptions) =
         this.AddScalar(DevTools.AttachDevTools.WithValue((ValueSome value, ValueNone)))
 
     /// <summary>Attaches the Avalonia Developer Tools with the specified gesture.
     /// See https://docs.avaloniaui.net/docs/guides/implementation-guides/developer-tools</summary>
     /// <param name="this">The Current widget.</param>
     /// <param name="value">The key gesture.</param>
     [<Extension>]
-    static member inline attachDevTools(this: WidgetBuilder<'msg, #IFabApplication>, value: Input.KeyGesture) =
+    static member inline attachDevTools(this: WidgetBuilder<'msg, #IFabWindow>, value: Input.KeyGesture) =
         this.AddScalar(DevTools.AttachDevTools.WithValue((ValueNone, ValueSome value)))
 
     /// <summary>Attaches the Avalonia Developer Tools opened using F12.
     /// See https://docs.avaloniaui.net/docs/guides/implementation-guides/developer-tools</summary>
     /// <param name="this">The Current widget.</param>
     [<Extension>]
-    static member inline attachDevTools(this: WidgetBuilder<'msg, #IFabApplication>) =
+    static member inline attachDevTools(this: WidgetBuilder<'msg, #IFabWindow>) =
         this.AddScalar(DevTools.AttachDevTools.WithValue((ValueNone, ValueNone)))
diff --git a/samples/Gallery/MainWindow.fs b/samples/Gallery/MainWindow.fs
@@ -256,21 +256,17 @@ module MainWindow =
         Component("MainWindow") {
             let! model = Context.Mvu program
 
-            (DesktopApplication() {
-                (Window() { hamburgerMenu model })
+            DesktopApplication() {
+                Window(hamburgerMenu model)
                     .title("Fabulous Gallery")
                     .menu(createMenu())
                     .width(1024.)
                     .height(800.)
                     .icon("avares://Gallery/Assets/Icons/logo.ico")
-            })
-            // FIXME this is not working after the last update of Fabulous pre 8
-            // MainWindow is null for some reason. I will investigate this later.
-            // Unhandled exception. System.ArgumentNullException: Value cannot be null. (Parameter 'root')
-            // at Avalonia.Diagnostics.DevTools.Attach(TopLevel root, DevToolsOptions options)
 #if DEBUG
-                .attachDevTools()
+                    .attachDevTools()
 #endif
+            }
             |> _.trayIcon(trayIcon())
             |> _.requestedThemeVariant(model.CurrentTheme)
         }

diff --git a/samples/Playground/App.fs b/samples/Playground/App.fs
@@ -36,12 +36,14 @@ module App =
 #if MOBILE
         SingleViewApplication(content())
 #else
-        DesktopApplication(Window(content()))
-#endif
-
+        DesktopApplication(
+            Window(content())
 #if DEBUG
-            .attachDevTools()
+                .attachDevTools()
 #endif
+        )
+#endif
+
 
     let create () =
         FabulousAppBuilder.Configure(FluentTheme, view)
diff --git a/samples/RenderDemo/MainWindow.fs b/samples/RenderDemo/MainWindow.fs
@@ -34,6 +34,9 @@ module MainWindow =
                 })
                     .expandedModeThresholdWidth(760)
             }
+#if DEBUG
+            |> _.attachDevTools()
+#endif
         }
 
     let create () =

diff --git a/samples/RenderDemo/RenderDemo.fsproj b/samples/RenderDemo/RenderDemo.fsproj
@@ -52,5 +52,6 @@
   <ItemGroup>
     <ProjectReference Include="..\..\src\Fabulous.Avalonia\Fabulous.Avalonia.fsproj" />
     <ProjectReference Include="..\ControlSamples\ControlSamples.csproj" />
+    <ProjectReference Include="..\..\extensions\Fabulous.Avalonia.Diagnostics\Fabulous.Avalonia.Diagnostics.fsproj" />
   </ItemGroup>
 </Project>