Window Inspector

about 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 how to use 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 learn the tool 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 a ui hierarchy 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 b pick 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 c refresh 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 d placement useful for checking the exact placement of the ui components in cet window by displaying their coordinates (x and y axis) origin 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 position 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 e ui guide 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 docid\ oalphiouiw igsdvtqjmp related readings on the grid system extension content docid\ k9e w3zzkehm38jtvqkyu product button docid\ l2jrbivjudj7ixbuu tgz tool button docid\ slm9kidf g5xog2upu0km bound 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 grid styles 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 docid\ oalphiouiw igsdvtqjmp 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 f box model 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 g properties the properties panel displays essential painter properties from the component parent and children, for quick inspection of attributes like font size, alignment, images, etc it allows for inspection of various objects (single click), copy text, reference srcrefs, and quick access to icon images (tooltip, locate file, preview file in right click menu)