renamed debugger to dev tools + some related cleanup

frontend/code/app.ts

@@ -15,9 +15,9 @@ globalThis.RIO_DEBUG_MODE = '{debug_mode}';
 globalThis.CHILD_ATTRIBUTE_NAMES = '{child_attribute_names}';
 globalThis.RUNNING_IN_WINDOW = '{running_in_window}';
 
-// If a debugger is present it is exposed here so the codebase can notify it as
-// needed. This is an instance of `DebuggerConnectorComponent`.
-globalThis.RIO_DEBUGGER = null;
+// If a the devtools are present it is exposed here so the codebase can notify it as
+// needed. This is an instance of `DevToolsConnectorComponent`.
+globalThis.RIO_DEV_TOOLS = null;
 
 // Set to indicate that we're intentionally leaving the page. This can be used
 // to suppress the connection lost popup, reconnects, or similar

frontend/code/componentManagement.ts

@@ -11,7 +11,7 @@ import { ComponentBase, ComponentState } from './components/componentBase';
 import { ComponentId } from './dataModels';
 import { ComponentTreeComponent } from './components/componentTree';
 import { CustomListItemComponent } from './components/customListItem';
-import { DebuggerConnectorComponent } from './components/debuggerConnector';
+import { DevToolsConnectorComponent } from './components/devToolsConnector';
 import { DrawerComponent } from './components/drawer';
 import { DropdownComponent } from './components/dropdown';
 import { FlowComponent as FlowContainerComponent } from './components/flowContainer';
@@ -69,7 +69,7 @@ const COMPONENT_CLASSES = {
     'Column-builtin': ColumnComponent,
     'ComponentTree-builtin': ComponentTreeComponent,
     'CustomListItem-builtin': CustomListItemComponent,
-    'DebuggerConnector-builtin': DebuggerConnectorComponent,
+    'DevToolsConnector-builtin': DevToolsConnectorComponent,
     'Drawer-builtin': DrawerComponent,
     'Dropdown-builtin': DropdownComponent,
     'FlowContainer-builtin': FlowContainerComponent,

frontend/code/components/componentBase.ts

@@ -8,7 +8,7 @@ import {
     ClickHandlerArguments,
     ClickHandler,
 } from '../eventHandling';
-import { DebuggerConnectorComponent } from './debuggerConnector';
+import { DevToolsConnectorComponent } from './devToolsConnector';
 import { ComponentId } from '../dataModels';
 
 /// Base for all component states. Updates received from the backend are
@@ -18,7 +18,7 @@ export type ComponentState = {
     // component to spawn.
     _type_?: string;
     // Debugging information. Useful both for developing rio itself, and also
-    // displayed to developers in Rio's debugger
+    // displayed to developers in Rio's dev tools
     _python_type_?: string;
     // Debugging information
     _key_?: string | null;
@@ -31,7 +31,7 @@ export type ComponentState = {
     // Whether the component would like to receive additional space if there is
     // any left over
     _grow_?: [boolean, boolean];
-    // Debugging information: The debugger may not display components to the
+    // Debugging information: The dev tools may not display components to the
     // developer if they're considered internal
     _rio_internal_?: boolean;
 };
@@ -369,12 +369,12 @@ export abstract class ComponentBase {
             deltaState: deltaState,
         });
 
-        // Notify the debugger, if any
-        if (globalThis.RIO_DEBUGGER !== null) {
-            let debuggerTree =
-                globalThis.RIO_DEBUGGER as DebuggerConnectorComponent;
+        // Notify the dev tools, if any
+        if (globalThis.RIO_DEV_TOOLS !== null) {
+            let devToolsComponent =
+                globalThis.RIO_DEV_TOOLS as DevToolsConnectorComponent;
 
-            debuggerTree.afterComponentStateChange({
+            devToolsComponent.afterComponentStateChange({
                 componentIdString: deltaState,
             });
         }

frontend/code/components/componentTree.ts

@@ -2,7 +2,7 @@ import { componentsById, getRootScroller } from '../componentManagement';
 import { applyIcon } from '../designApplication';
 import { ComponentId } from '../dataModels';
 import { ComponentBase, ComponentState } from './componentBase';
-import { DebuggerConnectorComponent } from './debuggerConnector';
+import { DevToolsConnectorComponent } from './devToolsConnector';
 
 export type ComponentTreeState = ComponentState & {
     _type_: 'ComponentTree-builtin';
@@ -18,15 +18,15 @@ export class ComponentTreeComponent extends ComponentBase {
     private selectedComponentId: ComponentId | null = null;
 
     createElement(): HTMLElement {
-        // Register this component with the global debugger, so it receives
-        // updates when a component's state changes.
-        let dbg: DebuggerConnectorComponent = globalThis.RIO_DEBUGGER;
+        // Register this component with the global dev tools component, so it
+        // receives updates when a component's state changes.
+        let dbg: DevToolsConnectorComponent = globalThis.RIO_DEV_TOOLS;
         console.assert(dbg !== null);
         dbg.componentTree = this;
 
         // Spawn the HTML
         let element = document.createElement('div');
-        element.classList.add('rio-debugger-tree-component-tree');
+        element.classList.add('rio-dev-tools-tree-component-tree');
 
         // Populate. This needs to lookup the root component, which isn't in the
         // tree yet.
@@ -37,7 +37,7 @@ export class ComponentTreeComponent extends ComponentBase {
         // Add the highlighter and hide it
         this.highlighterElement = document.createElement('div');
         this.highlighterElement.classList.add(
-            'rio-debugger-component-highlighter'
+            'rio-dev-tools-component-highlighter'
         );
         document.body.appendChild(this.highlighterElement);
 
@@ -47,8 +47,8 @@ export class ComponentTreeComponent extends ComponentBase {
     }
 
     onDestruction(): void {
-        // Unregister this component from the global debugger
-        let dbg: DebuggerConnectorComponent = globalThis.RIO_DEBUGGER;
+        // Unregister this component from the global dev tools component
+        let dbg: DevToolsConnectorComponent = globalThis.RIO_DEV_TOOLS;
         console.assert(dbg !== null);
         dbg.componentTree = null;
 
@@ -166,14 +166,14 @@ export class ComponentTreeComponent extends ComponentBase {
     ) {
         // Create the element for this item
         let element = document.createElement('div');
-        element.id = `rio-debugger-component-tree-item-${component.id}`;
-        element.classList.add('rio-debugger-component-tree-item');
+        element.id = `rio-dev-tools-component-tree-item-${component.id}`;
+        element.classList.add('rio-dev-tools-component-tree-item');
         parentElement.appendChild(element);
 
         // Create the header
         let children = this.getDisplayableChildren(component);
         let header = document.createElement('div');
-        header.classList.add('rio-debugger-component-tree-item-header');
+        header.classList.add('rio-dev-tools-component-tree-item-header');
         header.textContent = component.state._python_type_;
 
         let iconElement = document.createElement('div');
@@ -191,7 +191,9 @@ export class ComponentTreeComponent extends ComponentBase {
 
         // Add the children
         let childElement = document.createElement('div');
-        childElement.classList.add('rio-debugger-component-tree-item-children');
+        childElement.classList.add(
+            'rio-dev-tools-component-tree-item-children'
+        );
         element.appendChild(childElement);
 
         for (let childInfo of children) {
@@ -297,10 +299,10 @@ export class ComponentTreeComponent extends ComponentBase {
 
     getNodeExpanded(instance: ComponentBase): boolean {
         // This is monkey-patched directly in the instance to preserve it across
-        // debugger rebuilds.
+        // dev-tools rebuilds.
 
         // @ts-ignore
-        return instance._rio_debugger_expanded_ === true;
+        return instance._rio_dev_tools_tree_expanded_ === true;
     }
 
     setNodeExpanded(
@@ -310,11 +312,11 @@ export class ComponentTreeComponent extends ComponentBase {
     ) {
         // Monkey-patch the new value in the instance
         // @ts-ignore
-        component._rio_debugger_expanded_ = expanded;
+        component._rio_dev_tools_tree_expanded_ = expanded;
 
         // Get the node element for this instance
         let element = document.getElementById(
-            `rio-debugger-component-tree-item-${component.id}`
+            `rio-dev-tools-component-tree-item-${component.id}`
         );
 
         // Expand / collapse its children.
@@ -340,12 +342,12 @@ export class ComponentTreeComponent extends ComponentBase {
         // Unhighlight all previously highlighted items
         for (let element of Array.from(
             document.querySelectorAll(
-                '.rio-debugger-component-tree-item-header-weakly-selected, .rio-debugger-component-tree-item-header-strongly-selected'
+                '.rio-dev-tools-component-tree-item-header-weakly-selected, .rio-dev-tools-component-tree-item-header-strongly-selected'
             )
         )) {
             element.classList.remove(
-                'rio-debugger-component-tree-item-header-weakly-selected',
-                'rio-debugger-component-tree-item-header-strongly-selected'
+                'rio-dev-tools-component-tree-item-header-weakly-selected',
+                'rio-dev-tools-component-tree-item-header-strongly-selected'
             );
         }
 
@@ -356,12 +358,12 @@ export class ComponentTreeComponent extends ComponentBase {
         let treeItems: HTMLElement[] = [];
 
         let cur: HTMLElement | null = document.getElementById(
-            `rio-debugger-component-tree-item-${selectedComponent.id}`
+            `rio-dev-tools-component-tree-item-${selectedComponent.id}`
         ) as HTMLElement;
 
         while (
             cur !== null &&
-            cur.classList.contains('rio-debugger-component-tree-item')
+            cur.classList.contains('rio-dev-tools-component-tree-item')
         ) {
             treeItems.push(cur.firstElementChild as HTMLElement);
             cur = cur.parentElement!.parentElement;
@@ -369,13 +371,13 @@ export class ComponentTreeComponent extends ComponentBase {
 
         // Strongly select the leafmost item
         treeItems[0].classList.add(
-            'rio-debugger-component-tree-item-header-strongly-selected'
+            'rio-dev-tools-component-tree-item-header-strongly-selected'
         );
 
         // Weakly select the rest
         for (let i = 1; i < treeItems.length; i++) {
             treeItems[i].classList.add(
-                'rio-debugger-component-tree-item-header-weakly-selected'
+                'rio-dev-tools-component-tree-item-header-weakly-selected'
             );
         }
     }
@@ -397,7 +399,7 @@ export class ComponentTreeComponent extends ComponentBase {
                 // Get the element. Not everything will show up, since some
                 // components aren't displayed in the tree (internals).
                 let element = document.getElementById(
-                    `rio-debugger-component-tree-item-rio-id-${componentId}`
+                    `rio-dev-tools-component-tree-item-rio-id-${componentId}`
                 );
 
                 if (element === null) {
@@ -408,12 +410,12 @@ export class ComponentTreeComponent extends ComponentBase {
 
                 // Flash the font to indicate a change
                 elementHeader.classList.add(
-                    'rio-debugger-component-tree-flash'
+                    'rio-dev-tools-component-tree-flash'
                 );
 
                 setTimeout(() => {
                     elementHeader.classList.remove(
-                        'rio-debugger-component-tree-flash'
+                        'rio-dev-tools-component-tree-flash'
                     );
                 }, 5000);
             }

frontend/code/components/devToolsConnector.ts

@@ -2,34 +2,35 @@ import { LayoutContext } from '../layouting';
 import { ComponentBase, ComponentState } from './componentBase';
 import { ComponentTreeComponent } from './componentTree';
 
-export type DebuggerConnectorState = ComponentState & {
-    _type_: 'DebuggerConnector-builtin';
+export type DevToolsConnectorState = ComponentState & {
+    _type_: 'DevToolsConnector-builtin';
 };
 
-export class DebuggerConnectorComponent extends ComponentBase {
-    state: Required<DebuggerConnectorState>;
+export class DevToolsConnectorComponent extends ComponentBase {
+    state: Required<DevToolsConnectorState>;
 
     // If a component tree page is currently visible it is stored here
     public componentTree: ComponentTreeComponent | null = null;
 
     createElement(): HTMLElement {
         // Make the component globally known
-        globalThis.RIO_DEBUGGER = this;
+        globalThis.RIO_DEV_TOOLS = this;
 
         // Create the element
         let element = document.createElement('a');
         element.href = 'https://rio.dev';
         element.target = '_blank';
-        element.classList.add('rio-debugger-navigation-rio-logo');
+        element.classList.add('rio-dev-tools-connector');
         element.innerHTML = `
             <img src="/rio/asset/rio-logos/rio-logo-square.png">
-            <div>Rio</div>
+            <div style="font-size: 1.2rem">Rio</div>
+            <!-- <div style="font-size: 0.9rem">Dev Tools</div> -->
         `;
         return element;
     }
 
     updateElement(
-        deltaState: DebuggerConnectorState,
+        deltaState: DevToolsConnectorState,
         latentComponents: Set<ComponentBase>
     ): void {}
 
@@ -41,8 +42,8 @@ export class DebuggerConnectorComponent extends ComponentBase {
         this.naturalHeight = 7;
     }
 
-    /// Called when the state of any component changes. This allows the debugger
-    /// to update its display.
+    /// Called when the state of any component changes. This allows the dev
+    /// tools to update their display.
     public afterComponentStateChange(deltaStates: {
         [key: string]: { [key: string]: any };
     }) {

frontend/code/components/fundamentalRootComponent.ts

@@ -8,7 +8,7 @@ import { ComponentBase, ComponentState } from './componentBase';
 export type FundamentalRootComponentState = ComponentState & {
     _type_: 'FundamentalRootComponent-builtin';
     content: ComponentId;
-    debugger: ComponentId | null;
+    dev_tools: ComponentId | null;
     connection_lost_component: ComponentId;
 };
 
@@ -17,7 +17,7 @@ export class FundamentalRootComponent extends ComponentBase {
 
     // The width and height for any components that want to span the entire
     // screen and not scroll. This differs from just the window width/height,
-    // because the debugger can also take up space and doesn't count as part of
+    // because the dev tools can also take up space and doesn't count as part of
     // the user's app.
     public overlayWidth: number = 0;
     public overlayHeight: number = 0;
@@ -37,11 +37,11 @@ export class FundamentalRootComponent extends ComponentBase {
         let connectionLostComponent =
             deltaState.connection_lost_component ??
             this.state.connection_lost_component;
-        let debugger_ = deltaState.debugger ?? this.state.debugger;
+        let devTools = deltaState.dev_tools ?? this.state.dev_tools;
 
         let children = [content, connectionLostComponent];
-        if (debugger_ !== null) {
-            children.push(debugger_);
+        if (devTools !== null) {
+            children.push(devTools);
         }
 
         this.replaceChildren(latentComponents, children);
@@ -61,9 +61,9 @@ export class FundamentalRootComponent extends ComponentBase {
             .children[1] as HTMLElement;
         connectionLostPopupElement.classList.add('rio-connection-lost-popup');
 
-        if (deltaState.debugger !== null) {
-            let debuggerElement = this.element.children[2] as HTMLElement;
-            debuggerElement.classList.add('rio-debugger');
+        if (deltaState.dev_tools !== null) {
+            let devToolsElement = this.element.children[2] as HTMLElement;
+            devToolsElement.classList.add('rio-dev-tools');
         }
 
         // Looking up elements via selector is wonky if the element has only
@@ -94,14 +94,14 @@ export class FundamentalRootComponent extends ComponentBase {
         // Overlays take up the full window
         this.overlayWidth = this.allocatedWidth;
 
-        // If there's a debugger, account for that
-        if (this.state.debugger !== null) {
-            let devToolsComponent = componentsById[this.state.debugger]!;
+        // If the dev tools are visible, account for that
+        if (this.state.dev_tools !== null) {
+            let devToolsComponent = componentsById[this.state.dev_tools]!;
             devToolsComponent.allocatedWidth = devToolsComponent.requestedWidth;
 
-            // Even if a debugger is present, only display it if the screen is
-            // wide enough. Having them show up on a tall mobile screen is very
-            // awkward.
+            // Even if dev tools are provided, only display them if the screen
+            // is wide enough. Having them show up on a tall mobile screen is
+            // very awkward.
             //
             // Since the allocated height isn't available here yet, use the
             // window size instead.
@@ -125,7 +125,7 @@ export class FundamentalRootComponent extends ComponentBase {
         child.allocatedWidth = this.overlayWidth;
 
         // Despite being an overlay, the connection lost popup should also cover
-        // the debugger
+        // the dev tools
         let connectionLostPopup =
             componentsById[this.state.connection_lost_component]!;
         connectionLostPopup.allocatedWidth = this.allocatedWidth;
@@ -139,9 +139,9 @@ export class FundamentalRootComponent extends ComponentBase {
         // Overlays take up the full window
         this.overlayHeight = this.allocatedHeight;
 
-        // If there's a debugger, set its height and position it
-        if (this.state.debugger !== null) {
-            let dbgInst = componentsById[this.state.debugger]!;
+        // If dev tools are present, set their height and position it
+        if (this.state.dev_tools !== null) {
+            let dbgInst = componentsById[this.state.dev_tools]!;
             dbgInst.allocatedHeight = this.overlayHeight;
 
             // Position it

frontend/code/rpc.ts

@@ -1,5 +1,5 @@
 import { goingAway, pixelsPerRem } from './app';
-import { DebuggerConnectorComponent } from './components/debuggerConnector';
+import { DevToolsConnectorComponent } from './components/devToolsConnector';
 import { componentsById, updateComponentStates } from './componentManagement';
 import {
     requestFileUpload,
@@ -271,12 +271,12 @@ export async function processMessageReturnResponse(
                 message.params.rootComponentId
             );
 
-            // Notify the debugger, if any
-            if (globalThis.RIO_DEBUGGER !== null) {
-                let debuggerTree =
-                    globalThis.RIO_DEBUGGER as DebuggerConnectorComponent;
+            // Notify the dev tools, if any
+            if (globalThis.RIO_DEV_TOOLS !== null) {
+                let devToolsComponent =
+                    globalThis.RIO_DEV_TOOLS as DevToolsConnectorComponent;
 
-                debuggerTree.afterComponentStateChange(
+                devToolsComponent.afterComponentStateChange(
                     message.params.deltaStates
                 );
             }

frontend/css/style.scss

@@ -24,8 +24,8 @@ html[data-theme='dark'] {
 
 // Z-indices for components which are expected to show up on top
 $z-index-overlay: 10000;
-$z-index-debugger-highlighter: 10001;
-$z-index-debugger: 10002;
+$z-index-dev-tools-highlighter: 10001;
+$z-index-dev-tools: 10002;
 $z-index-popup: 10003;
 $z-index-error-popup: 10004;
 
@@ -137,6 +137,28 @@ select {
     height: 100vh;
 }
 
+// Dev Tools
+.rio-dev-tools {
+    pointer-events: auto;
+}
+
+.rio-dev-tools-hidden::after {
+    pointer-events: none;
+
+    position: fixed;
+    top: 0;
+    right: 0.1rem;
+    bottom: 0;
+
+    content: 'Screen too small for Dev Tools';
+    color: var(--rio-global-neutral-fg);
+    font-size: 0.8rem;
+    writing-mode: vertical-rl;
+    text-align: center;
+
+    opacity: 0.5;
+}
+
 // Row, Column & ListView
 .rio-linear-child-container {
     pointer-events: none;
@@ -2056,20 +2078,15 @@ textarea:not(:placeholder-shown) ~ .rio-input-box-label,
     color: var(--rio-global-warning-bg);
 }
 
-// Debugger
-.rio-debugger {
-    background: var(--rio-global-background-bg);
-    z-index: $z-index-debugger;
-}
-
-.rio-debugger-navigation-rio-logo {
+// Dev Tools Connector
+.rio-dev-tools-connector {
     pointer-events: auto;
 
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: end;
-    gap: 0.35rem;
+    gap: 0.1rem;
     z-index: 2;
 
     text-decoration: none;
@@ -2078,26 +2095,25 @@ textarea:not(:placeholder-shown) ~ .rio-input-box-label,
         width: 2.5rem;
         height: 2.5rem;
         object-fit: contain;
+        margin-bottom: 0.25rem;
     }
 
     div {
-        margin-bottom: 1rem;
-
-        font-size: 1.2rem;
-
-        // font-weight: bold;
         color: var(--rio-local-text-color);
-
         transition: color 1s ease-in-out;
     }
 
+    div:last-child {
+        margin-bottom: 1rem;
+    }
+
     &:hover div {
         color: var(--rio-global-secondary-fg);
         transition: color 0.1s ease-in-out;
     }
 }
 
-.rio-debugger-navigation-rio-logo::before {
+.rio-dev-tools-connector::before {
     content: '';
     position: absolute;
     top: 0;
@@ -2116,15 +2132,17 @@ textarea:not(:placeholder-shown) ~ .rio-input-box-label,
     transition: opacity 1s ease-out;
 }
 
-.rio-debugger-navigation-rio-logo:hover::before {
+.rio-dev-tools-connector:hover::before {
     opacity: 1;
     transition: opacity 0.1s ease-out;
 }
-.rio-debugger-tree-component-tree {
+
+// Dev Tools Component Tree
+.rio-dev-tools-component-tree {
     overflow: auto;
 }
 
-.rio-debugger-tree-component-tree > * {
+.rio-dev-tools-component-tree > * {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -2133,7 +2151,7 @@ textarea:not(:placeholder-shown) ~ .rio-input-box-label,
     overflow-y: auto;
 }
 
-.rio-debugger-component-tree-item {
+.rio-dev-tools-component-tree-item {
     display: flex;
     flex-direction: column;
     gap: 0.2rem;
@@ -2151,11 +2169,11 @@ textarea:not(:placeholder-shown) ~ .rio-input-box-label,
     }
 }
 
-.rio-debugger-component-tree-flash {
+.rio-dev-tools-component-tree-flash {
     animation: flash-text 3s linear;
 }
 
-.rio-debugger-component-tree-item-header {
+.rio-dev-tools-component-tree-item-header {
     pointer-events: auto;
     cursor: pointer;
     z-index: 1;
@@ -2169,39 +2187,22 @@ textarea:not(:placeholder-shown) ~ .rio-input-box-label,
     gap: 0.5rem;
 }
 
-.rio-dev-tools-hidden::after {
-    pointer-events: none;
-
-    position: fixed;
-    top: 0;
-    right: 0.1rem;
-    bottom: 0;
-
-    content: 'Screen too small for Dev Tools';
-    color: var(--rio-global-neutral-fg);
-    font-size: 0.8rem;
-    writing-mode: vertical-rl;
-    text-align: center;
-
-    opacity: 0.5;
-}
-
 // Expander Arrow
-.rio-debugger-component-tree-item
-    > .rio-debugger-component-tree-item-header
+.rio-dev-tools-component-tree-item
+    > .rio-dev-tools-component-tree-item-header
     > div:first-child {
     width: 1rem;
     height: 1rem;
 
     transition: transform 0.1s ease-in-out;
 }
-.rio-debugger-component-tree-item[data-expanded='true']
-    > .rio-debugger-component-tree-item-header
+.rio-dev-tools-component-tree-item[data-expanded='true']
+    > .rio-dev-tools-component-tree-item-header
     > div:first-child {
     transform: rotate(90deg);
 }
 
-.rio-debugger-component-tree-item-header::after {
+.rio-dev-tools-component-tree-item-header::after {
     pointer-events: none;
     content: '';
     display: block;
@@ -2222,52 +2223,52 @@ textarea:not(:placeholder-shown) ~ .rio-input-box-label,
     transition: opacity 0.1s ease-in-out;
 }
 
-.rio-debugger-component-tree-item-header > div > svg {
+.rio-dev-tools-component-tree-item-header > div > svg {
     width: 1rem;
     height: 1rem;
 }
 
-.rio-debugger-component-tree-item-header-weakly-selected {
+.rio-dev-tools-component-tree-item-header-weakly-selected {
     font-weight: bold;
 }
 
-.rio-debugger-component-tree-item-header-strongly-selected {
+.rio-dev-tools-component-tree-item-header-strongly-selected {
     font-weight: bold;
     color: var(--rio-global-secondary-fg);
 }
 
-.rio-debugger-component-tree-item-header:hover::after {
+.rio-dev-tools-component-tree-item-header:hover::after {
     opacity: 0.4;
 }
 
-.rio-debugger-component-tree-item-header-weakly-selected::after {
+.rio-dev-tools-component-tree-item-header-weakly-selected::after {
     opacity: 0.15;
 }
 
-.rio-debugger-component-tree-item-header-strongly-selected::after {
+.rio-dev-tools-component-tree-item-header-strongly-selected::after {
     opacity: 0.6;
 }
 
-.rio-debugger-component-tree-item-header-strongly-selected:hover::after {
+.rio-dev-tools-component-tree-item-header-strongly-selected:hover::after {
     opacity: 0.8;
 }
 
-.rio-debugger-component-tree-item-children {
+.rio-dev-tools-component-tree-item-children {
     margin-left: 0.7rem;
 
     display: none;
     flex-direction: column;
     gap: 0.2rem;
 }
-.rio-debugger-component-tree-item[data-has-children='true'][data-expanded='true']
-    > .rio-debugger-component-tree-item-children {
+.rio-dev-tools-component-tree-item[data-has-children='true'][data-expanded='true']
+    > .rio-dev-tools-component-tree-item-children {
     display: flex;
 }
 
-.rio-debugger-component-highlighter {
+.rio-dev-tools-component-highlighter {
     pointer-events: none;
     position: fixed;
-    z-index: $z-index-debugger-highlighter;
+    z-index: $z-index-dev-tools-highlighter;
 
     transition:
         left 0.3s ease-in-out,
@@ -2300,7 +2301,7 @@ textarea:not(:placeholder-shown) ~ .rio-input-box-label,
     }
 }
 
-.rio-debugger-component-highlighter::after {
+.rio-dev-tools-component-highlighter::after {
     content: '';
     position: absolute;
     display: block;
@@ -2314,18 +2315,17 @@ textarea:not(:placeholder-shown) ~ .rio-input-box-label,
     animation: pulse 1.4s infinite;
 }
 
-.rio-debugger-background {
-    z-index: -1;
+.rio-dev-tools-background {
     position: relative;
 
     background: var(--rio-local-bg);
 }
 
-.rio-debugger-background::after {
+.rio-dev-tools-background::after {
     content: '';
     position: absolute;
     display: block;
-    z-index: -1;
+    z-index: 1;
 
     left: 0;
     top: 0;
@@ -2507,7 +2507,7 @@ textarea:not(:placeholder-shown) ~ .rio-input-box-label,
 
 .rio-code-explorer-highlighter::after {
     content: '';
-    z-index: $z-index-debugger-highlighter;
+    z-index: $z-index-dev-tools-highlighter;
     position: absolute;
 
     border-radius: 1rem;

rio/cli/run_project/app_loading.py

@@ -47,7 +47,7 @@ def make_traceback_html(
 
     return f"""
 <div>
-    <div class="rio-traceback rio-debugger-background rio-switcheroo-neutral">
+    <div class="rio-traceback rio-dev-tools-background rio-switcheroo-neutral">
         <div class="rio-traceback-header">
             {error_icon_svg}
             <div>Couldn't load the app</div>

rio/components/component.py

@@ -479,7 +479,7 @@ class Component(abc.ABC, metaclass=ComponentMeta):
     # always used.
     _rio_internal_: bool = internal_field(init=False, default=False)
 
-    # The stackframe which has created this component. Used by the debugger.
+    # The stackframe which has created this component. Used by the dev tools.
     # Only initialized if in debugging mode.
     _creator_stackframe_: tuple[Path, int] = internal_field(init=False)
 
@@ -702,7 +702,7 @@ class Component(abc.ABC, metaclass=ComponentMeta):
 
     def _get_debug_details(self) -> dict[str, Any]:
         """
-        Used by Rio's debugger to decide which properties to display to a user,
+        Used by Rio's dev tools to decide which properties to display to a user,
         when they select a component.
         """
         result = {}

rio/components/debugger_connector.py

@@ -1,12 +0,0 @@
-from .fundamental_component import FundamentalComponent
-
-__all__ = [
-    "DebuggerConnector",
-]
-
-
-class DebuggerConnector(FundamentalComponent):
-    pass
-
-
-DebuggerConnector._unique_id = "DebuggerConnector-builtin"

rio/components/dev_tools_connector.py

@@ -0,0 +1,12 @@
+from .fundamental_component import FundamentalComponent
+
+__all__ = [
+    "DevToolsConnector",
+]
+
+
+class DevToolsConnector(FundamentalComponent):
+    pass
+
+
+DevToolsConnector._unique_id = "DevToolsConnector-builtin"

rio/components/icon.py

@@ -35,9 +35,9 @@ class Icon(FundamentalComponent):
 
     Icon names are in the format `set_name/icon_name:variant`. Rio already ships
     with the `material` icon set, which contains icons in the style of Google's
-    Material Design. You can browse all available icons in Rio's debugger
-    sidebar. (The debugger sidebar is visible on the right-hand-side when
-    running your project using `rio run`.)
+    Material Design. You can browse all available icons in Rio's dev tools. (The
+    dev tools sidebar is visible on the right-hand-side when running your
+    project using `rio run`.)
 
     The set name and variant can be omitted. If no set name is specified, it
     defaults to `material`. If no variant is specified, the default version of
@@ -48,7 +48,7 @@ class Icon(FundamentalComponent):
 
     `icon`: The name of the icon to display, in the format
         `icon-set/name:variant`. You can browse all available icons in Rio's
-        debugger sidebar.
+        dev tools sidebar.
 
     `fill`: The color scheme of the icon. The text color is used if no fill is
         specified.
@@ -225,7 +225,9 @@ class Icon(FundamentalComponent):
         elif isinstance(self.fill, color.Color):
             fill = self.fill.rgba
         else:
-            assert isinstance(self.fill, str), f"Unsupported fill type: {self.fill}"
+            assert isinstance(
+                self.fill, str
+            ), f"Unsupported fill type: {self.fill}"
             fill = self.fill
 
         # Serialize

rio/components/root_components.py

@@ -29,15 +29,14 @@ class HighLevelRootComponent(Component):
     build_connection_lost_message_function: Callable[[], Component]
 
     def build(self) -> Component:
-        # Spawn a debugger if running in debug mode
-
+        # Spawn the dev tools if running in debug mode
         if self.session._app_server.debug_mode:
             # Avoid a circular import
             import rio.debug.dev_tools
 
-            debugger = rio.debug.dev_tools.DevToolsSidebar()
+            dev_tools = rio.debug.dev_tools.DevToolsSidebar()
         else:
-            debugger = None
+            dev_tools = None
 
         # User content should automatically scroll if it grows too large, so we
         # wrap it in a ScrollContainer
@@ -46,7 +45,7 @@ class HighLevelRootComponent(Component):
         return FundamentalRootComponent(
             user_content,
             utils.safe_build(self.build_connection_lost_message_function),
-            debugger=debugger,
+            dev_tools=dev_tools,
         )
 
 
@@ -59,7 +58,7 @@ class FundamentalRootComponent(FundamentalComponent):
 
     content: Component
     connection_lost_component: Component
-    debugger: Component | None
+    dev_tools: Component | None
 
 
 FundamentalRootComponent._unique_id = "FundamentalRootComponent-builtin"

rio/debug/dev_tools/dev_tools_sidebar.py

@@ -1,7 +1,7 @@
 from typing import *  # type: ignore
 
 import rio.components.class_container
-import rio.components.debugger_connector
+import rio.components.dev_tools_connector
 
 from . import (
     deploy_page,
@@ -77,7 +77,7 @@ class DevToolsSidebar(rio.Component):
 
     def build(self) -> rio.Component:
         return rio.Row(
-            # Big fat line to separate the debugger from the rest of the page
+            # Big fat line to separate the dev tools from the rest of the page
             rio.Rectangle(
                 width=0.3,
                 fill=self.session.theme.primary_palette.background,
@@ -85,7 +85,7 @@ class DevToolsSidebar(rio.Component):
             # Currently active page
             rio.components.class_container.ClassContainer(
                 rio.Switcher(self.get_selected_page()),
-                classes=["rio-switcheroo-neutral", "rio-debugger-background"],
+                classes=["rio-switcheroo-neutral", "rio-dev-tools-background"],
             ),
             # Navigation
             rio.Column(
@@ -122,6 +122,6 @@ class DevToolsSidebar(rio.Component):
                     margin=0.2,
                 ),
                 rio.Spacer(),
-                rio.components.debugger_connector.DebuggerConnector(),
+                rio.components.dev_tools_connector.DevToolsConnector(),
             ),
         )

rio/debug/dev_tools/layout_preview.py

@@ -6,7 +6,7 @@ import rio
 class LayoutPreview(rio.Component):
     """
     WIP component for previewing the layout of another component in the
-    debugger.
+    dev tools.
     """
 
     component: rio.Component

rio/debug/dev_tools/theme_picker_page.py

@@ -259,6 +259,7 @@ class PalettePicker(rio.Component):  #
                         bottom_radius,
                     ),
                     ripple=True,
+                    cursor=rio.CursorStyle.POINTER,
                     transition_time=0.15,
                 ),
                 on_press=self._on_press,

rio/snippets/snippet-files/project-template-Multipage Website/thumbnail.svg

@@ -527,7 +527,7 @@
            aria-owns="rio-linear-child-container14 div35">
           <g
              id="rio-linear-child-container14"
-             aria-owns="rio-component42 rio-spacer5 rio-debugger-navigation-rio-logo1">
+             aria-owns="rio-component42 rio-spacer5 rio-dev-tools-navigation-rio-logo1">
             <g
                id="rio-component42"
                aria-owns="rio-switcher-bar1">