When you've loaded traces, click View traces to visualize the uploaded traces. Tabs for each trace appear on the top panel of the window. If the uploaded file contains the relevant traces, a floating view of the screen recording trace or screenshot is overlaid on the screen:
Figure 1. View traces on Winscope.
The following sections describe the UI elements on the View traces screen.
Rectangles
A LAYERS panel for Winscope views, such as WindowManager, SurfaceFlinger, and ViewCapture, includes rectangular elements from the trace that visually represent their position and order on the z-axis.
Through the navigation controls on the LAYERS panel, you can modify the mode in which the rectangular layers are drawn, along with their spacing and rotation:
Figure 2. Rectangle controls.
Gradient format
To inspect all elements in the hierarchy more effectively, you can use the rect format button to switch the rectangle drawing format to Gradient. In the gradient format, the rect format button turns light gray.
In this mode, the opacity of each rectangle is reduced based on its z-ordering, with rectangles with higher z-orders being more translucent. This lets you see all the elements in the hierarchy without having to worry about rectangles obscuring each other:
Figure 3. Rectangle gradient.
Opacity format
To change the rectangle drawing format to opacity, click the rect format button. In the opacity format, the rect format button turns dark gray.
In this mode, each rectangle is drawn based on its opacity, such as surface or view opacity:
Figure 4. Rectangle opacity.
Wireframe format
To change the rectangle representation to wireframe, click the rect format button. This representation makes it simpler to examine and analyze individual elements within the hierarchy. In the wireframe_ format, the rect format button turns into an outline with no shading:
Figure 5. Rectangle wireframe.
Rotation
Use the rotation slider to change the perspective of the rectangles between 0 and 45 degrees, letting you spot scenarios where elements go off screen:
Figure 6. Rectangle rotation.
Spacing
Use the spacing slider to control the spacing between layers, creating a flattened or more spread view for better inspecting elements z-ordering:
Figure 7. Rectangle facing.
Display and window selection
In the SurfaceFlinger view, when recording data on devices with multiple displays, a menu shows the available displays so that the you can select only the displays of interest.
In ViewCapture, when recording multiple system windows, such as notification shade, task bar, and launcher, the menu lists available windows.
Pan and zoom
You can adjust the position of the rectangles either horizontally or vertically by clicking their area and dragging the mouse. For zooming in, zooming out, or resetting the zoom level, you can use either the scroll wheel or the zoom buttons on the control bar.
Hierarchy
Winscope viewers often incorporate a hierarchy viewer. The viewer in Figure 1 depicts various hierarchies based on the trace being analyzed. For example, the viewer can display the window hierarchy within WindowManager or the view hierarchy within a System UI window.
For information on specific hierarchy types, see sections on respective traces.
This section describes the general hierarchy usage, such as the Show diff, Show only V, Flat, and Search features.
Figure 8. Hierarchy controls.
Show diff
When the Show diff feature is enabled, Winscope automatically monitors and displays the changes between the current state and the previous state. The Show diff feature highlights elements that are removed in red, elements that are modified in blue, and new elements that are created in green. This visual representation allows for quicker identification and understanding of the differences between the two states, making it easier to track changes and identify potential issues.
Figure 9. Show diff hierarchy.
Search and filter
The hierarchy viewer offers a search capability that uses regular expressions (regex). This filter targets both the element's name and its value (for properties). When the filter matches a child element in the hierarchy, the entire chain of parents up to the tree's root becomes visible, as shown in the following figure:
Figure 10. Search hierarchy.
Show only visible
With the Show only visible feature, you can filter out all concealed elements within a hierarchy. By default, Winscope shows both visible and invisible elements. Visible elements are drawn in black, while invisible ones appear in gray.
Flat
The Flat button reorganizes the hierarchical structure by eliminating the parent-child relationships among elements. This action renders all elements on the same level. When combined with the Show only visible option, the resulting hierarchy displays only the visible elements, excluding their parent elements, as shown in the following figure:
Figure 11. Flat hierarchy.
Properties
Within Winscope, many viewers integrate a properties viewer. This viewer presents various lists of properties associated with an element selected from the hierarchy view. For example, the viewer can show the properties of an activity within WindowManager or those of a view in System UI.
For information on specific properties, see sections on SurfaceFlinger, WindowManager, and View Capture traces.
This section describes the general hierarchy in the Show diff, Search, and Show defaults features.
Show diff
Usage of the Show diff feature is the same as Show diff in the hierarchy view.
Search and filter
Usage of the Search feature is the same as Search in the hierarchy view.
Show defaults
By default, Winscope displays only modified property values, which are
nondefault values for their respective data types. For example, Winscope omits
false for booleans, 0 for integers, null for objects, and [] for arrays.
This streamlining simplifies the list of properties visible to the user.
However, it's beneficial in certain situations to have a comprehensive view
of all element-related information. In such cases, the Show defaults option
reveals all available properties in Winscope, including those
with empty or null values.
Figure 12. Properties defaults.
General shortcuts
Winscope supports the following shortcuts:
Figure 13. General shortcuts.