diff --git a/frontend/code/app.ts b/frontend/code/app.ts index e305278c..03db353b 100644 --- a/frontend/code/app.ts +++ b/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 diff --git a/frontend/code/componentManagement.ts b/frontend/code/componentManagement.ts index befc511a..280a3d23 100644 --- a/frontend/code/componentManagement.ts +++ b/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, diff --git a/frontend/code/components/componentBase.ts b/frontend/code/components/componentBase.ts index 9d25d826..c72fda57 100644 --- a/frontend/code/components/componentBase.ts +++ b/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, }); } diff --git a/frontend/code/components/componentTree.ts b/frontend/code/components/componentTree.ts index 8b73ba57..7df7a8a4 100644 --- a/frontend/code/components/componentTree.ts +++ b/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); } diff --git a/frontend/code/components/debuggerConnector.ts b/frontend/code/components/devToolsConnector.ts similarity index 71% rename from frontend/code/components/debuggerConnector.ts rename to frontend/code/components/devToolsConnector.ts index 4271161c..ff134800 100644 --- a/frontend/code/components/debuggerConnector.ts +++ b/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; +export class DevToolsConnectorComponent extends ComponentBase { + state: Required; // 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 = ` -
Rio
+
Rio
+ `; return element; } updateElement( - deltaState: DebuggerConnectorState, + deltaState: DevToolsConnectorState, latentComponents: Set ): 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 }; }) { diff --git a/frontend/code/components/fundamentalRootComponent.ts b/frontend/code/components/fundamentalRootComponent.ts index 4a61153a..97e41079 100644 --- a/frontend/code/components/fundamentalRootComponent.ts +++ b/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 diff --git a/frontend/code/rpc.ts b/frontend/code/rpc.ts index d4a5d7f6..2ae1840b 100644 --- a/frontend/code/rpc.ts +++ b/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 ); } diff --git a/frontend/css/style.scss b/frontend/css/style.scss index 209ebfcd..87933e4a 100644 --- a/frontend/css/style.scss +++ b/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; diff --git a/rio/cli/run_project/app_loading.py b/rio/cli/run_project/app_loading.py index 119b9f49..d055f452 100644 --- a/rio/cli/run_project/app_loading.py +++ b/rio/cli/run_project/app_loading.py @@ -47,7 +47,7 @@ def make_traceback_html( return f"""
-
+
{error_icon_svg}
Couldn't load the app
diff --git a/rio/components/component.py b/rio/components/component.py index 51aca944..c9f1fcbb 100644 --- a/rio/components/component.py +++ b/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 = {} diff --git a/rio/components/debugger_connector.py b/rio/components/debugger_connector.py deleted file mode 100644 index fad68962..00000000 --- a/rio/components/debugger_connector.py +++ /dev/null @@ -1,12 +0,0 @@ -from .fundamental_component import FundamentalComponent - -__all__ = [ - "DebuggerConnector", -] - - -class DebuggerConnector(FundamentalComponent): - pass - - -DebuggerConnector._unique_id = "DebuggerConnector-builtin" diff --git a/rio/components/dev_tools_connector.py b/rio/components/dev_tools_connector.py new file mode 100644 index 00000000..14ec6c16 --- /dev/null +++ b/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" diff --git a/rio/components/icon.py b/rio/components/icon.py index 46329297..00de937c 100644 --- a/rio/components/icon.py +++ b/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 diff --git a/rio/components/root_components.py b/rio/components/root_components.py index dbaede83..545ac5eb 100644 --- a/rio/components/root_components.py +++ b/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" diff --git a/rio/debug/dev_tools/dev_tools_sidebar.py b/rio/debug/dev_tools/dev_tools_sidebar.py index 69201f41..5ba4b1c2 100644 --- a/rio/debug/dev_tools/dev_tools_sidebar.py +++ b/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(), ), ) diff --git a/rio/debug/dev_tools/layout_preview.py b/rio/debug/dev_tools/layout_preview.py index 490e0eef..9063b2a1 100644 --- a/rio/debug/dev_tools/layout_preview.py +++ b/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 diff --git a/rio/debug/dev_tools/theme_picker_page.py b/rio/debug/dev_tools/theme_picker_page.py index fd2d7ccb..23820e8a 100644 --- a/rio/debug/dev_tools/theme_picker_page.py +++ b/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, diff --git a/rio/snippets/snippet-files/project-template-Multipage Website/thumbnail.svg b/rio/snippets/snippet-files/project-template-Multipage Website/thumbnail.svg index 2dfeae51..baa3e9d1 100644 --- a/rio/snippets/snippet-files/project-template-Multipage Website/thumbnail.svg +++ b/rio/snippets/snippet-files/project-template-Multipage Website/thumbnail.svg @@ -527,7 +527,7 @@ aria-owns="rio-linear-child-container14 div35"> + aria-owns="rio-component42 rio-spacer5 rio-dev-tools-navigation-rio-logo1">