List selections should be different colors when focused vs blurred

[michaelgundlach]

The

shows how difficult it is to know what context I'm in, when 4 different items are all selected and colored orange. I keep trying to do actions and being surprised that they don't work, or misunderstanding the context of a Property Section.

• Am I working with the dino file or the dino Scene object?
• Am I in Level.scene or Preload.scene?
• Why am I selecting the dino block but seeing a giant guapen in the Properties pane?

Either selections should be limited to one item at a time in the entire Workbench (so clicking e.g. the dino block would unselect Preload.scene in the Files view etc), or non-focused selections should get their own color e.g. greyish-orange in the Dark theme (so the dino block would be selected orange and Preload.scene in the Files view would be selected greyish-orange.)

[PhaserEditor2D]

The workbench's active part is highlighted. In that image, the Files view is the one selected.
The Inspector view is always connected to the selection of the active part (Files view in the image above).
But I agree that changing the color of the selection of a non-active part is less confusing.

[michaelgundlach]

The active Workbench part may be highlighted, but I cannot tell which one is highlighted even by looking at my own screenshot right now. The highlighting is too subtle, I guess. I did see that highlighting subtly changed as I selected different parts of the Workbench, but it wasn't enough to tell my brain to pay attention to that part.

After looking at the Inspector carefully I realize the Files view must be highlighted, so I guess the fact that its background is the same light background as the Blocks.Images panel means it is selected. Besides the unselected and selected gray being very similar, the unselected Blocks.Images background being the same as the selected color makes it even more difficult to figure out.

[PhaserEditor2D]

Look at the top border of the Files tab. It is orange, it is highlighted. But ok, I agree the whole view could be lighter.

[PhaserEditor2D]

With the Light Blue theme I think it is more explicit.

[michaelgundlach]

Ah! I do see the section highlight line.

I think really the bright orange (or blue) selection is enough to show the user what is focused, as it stands out so well. Just changing the "selected in an inactive part of the Workbench" color should be all that's needed.

[PhaserEditor2D]

Yes. The only "problem" with it is that each time you select a new part the IDE has to re-render all the other parts based on viewers. But it is fine. I will think about this.

[michaelgundlach]

Hmm... I was going to suggest you rely on the .activePart CSS hint, but I see that the selected items are drawn in a canvas, not using HTML. Well, good luck :)