Work on the debug pane's content

Author: Mytrill

dist/hyperapp-devtools.js

@@ -0,0 +1,8 @@
+import "./DebugPaneContent.scss";
+import { State, Actions, Run } from "../api";
+export interface DebugPaneContentProps {
+    state: State;
+    actions: Actions;
+    runs: Run[];
+}
+export declare function DebugPaneContent(props: DebugPaneContentProps): JSX.Element;

dist/hyperapp-devtools.js.map

@@ -0,0 +1,7 @@
+import "./ObjectDetailsPane.scss";
+import { State, Actions } from "../api";
+export interface ObjectDetailsPaneProps {
+    state: State;
+    actions: Actions;
+}
+export declare function ObjectDetailsPane(props: ObjectDetailsPaneProps): JSX.Element;

dist/src/components/DebugPaneContent.d.ts

@@ -6,12 +6,4 @@
   background: #fefefe;
   border: 1px solid black;
   color: black;
-
-  .debug-content {
-    flex-grow: 1;
-
-    pre {
-      margin: 0rem;
-    }
-  }
 }

dist/src/components/ObjectDetailsPane.d.ts

@@ -4,8 +4,10 @@ import { State, Actions, PaneDisplay } from "../api"
 
 import { DebuggerOptions } from "./DebuggerOptions"
 import { DebugPaneToolbar } from "./DebugPaneToolbar"
+import { DebugPaneContent } from "./DebugPaneContent"
 
 import "./DebugPane.scss"
+import { getRuns } from "../selectors"
 
 export interface DebugPaneProps {
   state: State
@@ -15,13 +17,12 @@ export interface DebugPaneProps {
 export function DebugPane(props: DebugPaneProps) {
   const { state, actions } = props
 
+  const runs = getRuns(state)
   return (
     <div class="debug-pane">
       {DebugPaneToolbar({ state, actions })}
       {DebuggerOptions({ state, actions })}
-      <div class="debug-content scrollable">
-        <pre class="scrollable-content">{JSON.stringify(state, null, 2)}</pre>
-      </div>
+      {DebugPaneContent({ state, actions, runs })}
     </div>
   )
 }

examples/hyperapp-devtools.js

@@ -0,0 +1,30 @@
+import { h } from "hyperapp"
+
+import "./DebugPaneContent.scss"
+
+import { State, Actions, Run } from "../api"
+import { ObjectDetailsPane } from "./ObjectDetailsPane"
+import { RunsPane } from "./RunsPane"
+
+export interface DebugPaneContentProps {
+  state: State
+  actions: Actions
+  runs: Run[]
+}
+
+export function DebugPaneContent(props: DebugPaneContentProps) {
+  const { state, actions, runs } = props
+  if (runs.length === 0) {
+    return (
+      <div class="debug-pane-content">
+        <p>No debug information found, please debug this project.</p>
+      </div>
+    )
+  }
+  return (
+    <div class="debug-pane-content">
+      {RunsPane({ state, actions, runs })}
+      {ObjectDetailsPane({ state, actions })}
+    </div>
+  )
+}

src/components/DebugPane.scss

@@ -0,0 +1,7 @@
+.object-details-pane {
+  flex-grow: 1;
+
+  pre {
+    margin: 0rem;
+  }
+}