Window Inspector
Window Inspector is a developer tool that aids inspection and debugging of various UI components in CET. The tool displays UI components in tree view format, allowing developers and designers to quickly understand the structure and hierarchy of their UI components. Additionally, it provides information on essential design aspects such as position, boundaries, grid alignment, margins, and properties, ensuring that developers can easily verify and adhere to design guidelines.
- Hover the mouse on the UI component to inspect in CET.
- Hold onto Alt key + click - the View source menu should show up.
- Click on the “Show in inspector” button.
Note: The inspector will only show up for interactable components (green in colour).
Reminder: In Release Mode, make sure to check “Enable view source menu” in Release Debug dialog for the View Source / Inspect menu to show up.
- A: UI Hierarchy
- B: Pick Window
- C: Refresh
- D: Placement
- E: UI Guide
- F: Box model
- G: Properties
- H: Remove all bound
- I: Remove all grid
- Display the list of UI components in tree view (i.e. hierarchical view). Groups can be collapsed/expanded.
- Hovering on a component in the tree view will highlight the respective component in the CET window.
Allows you to inspect UI components by picking the component from the window.
- Selecting the button will activate the picking tool, where the cursor turns into a ‘+’ sign during the pick. The picked component will be reflected in the tree view, allowing you to inspect their structures/classes.
- It will also display all other information of that component under Placement, UI Guide, Grid styles, Box model and Properties based on availability.
Allows to update the position of visible bounds and grids to reflect latest changes.
For example, visualising the bound and grid mode on components, then scrolling the toolbox or resizing the main CET window, may result in the bound and grid visuals being displayed in the wrong positions. A refresh is required to update them to the correct position.
Useful for checking the exact placement of the UI components in CET window by displaying their coordinates (x and y-axis).
- Shows the origin value of the parent window - it is useful to know the parent window’s origin in order to place the child components inside it correctly.
- Fields are disabled as parent origins are not expected to be modified.
- Shows the coordinates of the exact position of the component inside the parent
- Fields are editable - the position of the selected component should update according to the values input.
Useful for checking the bound and grid of the UI components, to ensure that components are contained correctly inside the window and aligned to the 12-grid in Spacing & Layout.
Related readings on the grid system:
- Toggling Bound ON will draw a colored box that shows the exact bound of the selected component. Color of the bound will vary as it is randomly picked from a color palette.
- Once toggled ON, the bound will remain visible until it is toggled OFF. It is possible to have multiple bounds shown at a same time if you have it toggled ON for multiple components.
- Clicking on H: Remove all bound button will toggle all Bound OFF and remove all the colored boxes.
- Toggling Grid ON will draw colored columns within the bound of the selected component. Color of the grids will vary as it is randomly picked from a color palette.
- By default, the number of columns and the spacing in between each column (i.e. gutter) is set to follow the current 12-grid rules stated in Spacing & Layout. This will allow you to check if any of the component (e.g. tool buttons) is not following the grid (i.e. buttons cannot start or end while in the gutter in between columns).
- To aid in solution exploration, grid styles and properties can be tweaked e.g. grid type, count, width and gutter.
- Similar to Bound, the grid will remain visible until it is toggled OFF. It is also possible to have multiple grids shown at a same time.
- Clicking on I: Remove all grid button will toggle all Grid OFF and remove all the colored columns.
Useful for checking the layout of a component such as width, height, and margins to ensure that they have the intended sizes.
Notes:
- Unlike the CSS Box Model in traditional web development, UI elements in CET does not have the distinct concept of margins and padding.
- The Margins value does not take into account the frame width of the control. For example in the example above, Small product buttons should have a margin of 8, however the tool displays it as 7 (based on the in-code margin value), excluding the Frame's width of 1. This is intended for the current version of the tool, and will be improved in the future.
Some fields are editable - the layout of the selected component should update according to the user input. However, not all components depend on margins to position their content, hence changes in the margin values will not result in any visible changes.
Displays selected Painter properties from the component parent and children for quick inspection of attributes like font size, alignment, images, etc.
