How to preview an element (if possible) Follow

Answered

Created August 31, 2022 11:27

Hello friends,

I'm creating a custom theme, and I'm trying to find out what element is the `BigSpinner`:

Maybe there is a way to preview an element that I'm not aware of? I'm sure while developing my theme, I'll continue to face the problem of finding out what element I'm styling.

Any help is appreciated. Thank you!

1 comment

Karol Lewandowski

Created August 31, 2022 13:19

Hi Marcelo,

Unfortunately, there is no easy way of identifying a styled component.

If the key and its documentation aren't specific enough to understand what component it is about, there is no other option than checking the intellij-community sources and investigating it in the code.

BigSpinner.background is used in a loading spinner in the Settings Editor, which can be opened by opening the IDE settings.

What can be helpful to verify if a UI element is the one we are looking for is using UI Inspector:
https://plugins.jetbrains.com/docs/intellij/internal-ui-inspector.html

A workflow to find BigSpinner.background usage could look like this:

Find "BigSpinner.background" text in intellij-community source.
It is defined in com.intellij.openapi.ui.LoadingDecorator.OVERLAY_BACKGROUND.
Find usages of OVERLAY_BACKGROUND.
It is used in com.intellij.openapi.options.newEditor.SettingsEditor class.
Check for SettingsEditor usage - it is used in SettingsDialog - you can guess now that it is used in the Settings dialog.
Open IDE Settings, use UI Inspector and confirm that SettingsEditor is in the components tree and try to invoke an action rendering the spinner you want to style. It's not always easy to do it.

Also, you can use UI Inspector to view the components tree and check its background/foreground properties - they may contain a key that is used when defining a named color used for a given component, e.g.: