How to highlight a field's background in a custom editor without having its size (borders) enlarged? (177475)

[Xtro]

Hi.

I want to highlight the background of a field in my custom editor. This highlight is going to be conditional so it will toggle on and off.

I tried and make it work actually but the way I did it, the field gains an extra border when I apply the highlighted background style so it changes its size. If I keep toggling the highlight condition, it makes every other thing in the editor move up and down.

The thing I noticed is, GUILayout.BeginHorizontal causes this problem. If I pass it a style parameter (even an empty style), it adds an extra border to the horizontal area (wrong). If I call BeginHorizontal without a parameter, the horizontal area comes without an extra border so it’s size is smaller (correct and better).

Here is my example code:

    static bool Highlighted;
    public override void OnInspectorGUI()
    {
        Highlighted = GUILayout.Toggle(Highlighted, "highlight?");

        GUI.backgroundColor = Highlighted ? Color.green : Color.white;

        var HighlightStyle = new GUIStyle { normal = { background = Texture2D.whiteTexture } };

        if (Highlighted) GUILayout.BeginHorizontal(HighlightStyle); // with style parameter
        else GUILayout.BeginHorizontal(); // no style parameter

        GUI.backgroundColor = Color.white;
        EditorGUILayout.ColorField(Color.white);

        GUILayout.EndHorizontal();
    }

[Xtro]

EDIT: After so many trial and errors, this is my final solution. I want to thank Izzy2000 so much for his help. Mostly he came up with the idea. I just tested his suggestions and compiled them into the solution. Please note that this solution is a HACK. If Unity team fixes this bug in the future, this solution may be invalid.

Here is my entire code:

    public static class EditorUtilities
    {
        public static readonly GUIStyle SolidBackgroundStyle = new GUIStyle { margin = { left = -4, right = -4, top = -2, bottom = -2 }, normal = { background = Texture2D.whiteTexture } };
        public static readonly GUIStyle SolidBackgroundStyleFix = new GUIStyle { padding = { left = -4, right = -4, top = -2, bottom = -2 } };
}

using UnityEditor;
using UnityEngine;

[CustomEditor(typeof(WidgetDriver))]
class WidgetDriverEditor : UnityEditor.Editor
{
    static bool Highlighted;
    public override void OnInspectorGUI()
    {
        EditorGUILayout.ColorField(Color.red); // extra place holder field

        Highlighted = GUILayout.Toggle(Highlighted, "highlight?");

        GUI.backgroundColor = Highlighted ? Color.green : Color.white;
        if (Highlighted)
        {
            GUILayout.BeginHorizontal(EditorUtilities.SolidBackgroundStyleFix);
            GUILayout.BeginHorizontal(EditorUtilities.SolidBackgroundStyle);
        }
        else GUILayout.BeginHorizontal(); // no style parameter

        GUI.backgroundColor = Color.white;
        EditorGUILayout.ColorField(Color.white);

        GUILayout.EndHorizontal();
        if (Highlighted) GUILayout.EndHorizontal(); // for SolidBackgroundStyleFix

        EditorGUILayout.ColorField(Color.red); // extra place holder field
    }
}

[Lathspell]

3 years later, but I’ll throw my two cents here just in case someone finds it useful. This solution works, but feels really hacky, as stated by Xtro. This has been my solution; not in the same approach Xtro tried, but the same result.

    public static Color ColorField(
        string label, 
        Color value, 
        bool highlight, 
        int hMargin = 1, 
        int vMargin = 1)
    {
        Rect fieldRect = EditorGUILayout.GetControlRect(
            hasLabel: true,
            height: EditorGUIUtility.singleLineHeight, 
            style: EditorStyles.colorField);

        if (highlight)
        {
            Rect highlightRect = new Rect(
                x: fieldRect.x - hMargin + EditorGUIUtility.labelWidth, 
                y: fieldRect.y - vMargin, 
                width: fieldRect.width + (hMargin*2) - EditorGUIUtility.labelWidth, 
                height: fieldRect.height + vMargin*2);
            EditorGUI.DrawRect(highlightRect, Color.green);
        }
        return EditorGUI.ColorField(fieldRect, label, value);
    }

As you can see, first I reserve an area of the Inspector UI by creating a Rect. In my example, this Rect is specified to be a ColorField with a label that will be single line.

The call to GetControlRect will already save the space, so if you try to run the code to that point, you’ll see a blank area on your UI.

Next step is to create the Rect of the highlight, if needed. For doing so, I make a Rect based on the dimensions of the one Unity provided me, but adding the margin. Since the colorField I’m doing will have a label, I take out the labelWidth as well, because I don’t want the label to be coloured.

Notice that this second rect has been done from scratch, so it won’t save any space on the UI, but it will paint over anything found in that position. Now I use this Rect to paint a solid green square, that will be on the background.

Over it, I use the initial Rect to paint the ColorField as Unity would do by calling EditorGUILayout.ColorField. I skipped many of the options it has, but you can use them all.

After using this new control on your editor, the result should be something like this:

        EditorGUILayoutExtensions.ColorField("Highlighted colorField", Color.red, true, 4, 2);
        EditorGUILayoutExtensions.ColorField("Regular colorField", Color.red, false, 4, 2);

[MechUnit5]

It seems that there are spacing differences between the default GUIStyle and a newly created GUIStyle. This can be solved by having a second, uncustomized style is used whenever you want the regular style.

    static bool Highlighted;
    public override void OnInspectorGUI()
    {
        Highlighted = GUILayout.Toggle(Highlighted, "highlight?");

        GUI.backgroundColor = Highlighted ? Color.green : Color.white;

        var HighlightStyle = new GUIStyle { normal = { background = Texture2D.whiteTexture } };
        var BlankStyle = new GUIStyle(); //BLANK STYLE USED IN PLACE OF DEFAULT STYLE

        if (Highlighted) {
            EditorGUILayout.BeginHorizontal(HighlightStyle); // with style parameter
        }
        else {
            EditorGUILayout.BeginHorizontal(BlankStyle); // no style parameter
        }
         
        GUI.backgroundColor = Color.white;
        EditorGUILayout.ColorField(Color.white);

        EditorGUILayout.EndHorizontal();
    }

The only change from the code you posted was that second style.

A side note on the code itself. Custom Inspector classes have their own OnEnable() function that gets fired when they are created in the inspector. Basically, whenever you click on the object and the Inspector is visible and unlocked. I’d recommend setting your styles in that function, which would look something like this:

    GUIStyle HighlightStyle;
    GUIStyle BlankStyle;

    void OnEnable()
    {
        HighlightStyle = new GUIStyle { normal = { background = Texture2D.whiteTexture } };
        BlankStyle = new GUIStyle();
    }

For an editor this size it’s not really necessary, but it’s only a little more code to keep the garbage collector a little happier.

Also, the use of the static bool. That’s gonna be shared across multiple inspectors, but not in a way you may think. The weird behavior can be seen if you open up two inspectors next two each other, each locked to a different object that has this custom inspector, and start playing with the “highlight?” checkbox. Sometimes one will turn on, sometimes it will flicker and reset to its previous state. I recommend using a regular old bool instead.