Improve feedback when user toggles into or out of canvas

Problem/Motivation

When you create a model element or select an existing element, a blue dashed border appears around the element and the sidebar displays information about that element. If you click the element again, the sidebar changes to general data about the model, but the blue border remains if your cursor is hovered over the element.

And if an element is selected, but you hover your cursor over another element, they will both have blue dashed borders.

For the new user, this could be slightly confusing. Could we improve the visual feedback from the UI that indicates what is selected: an element or the canvas?

Steps to reproduce

Create a model or open an existing model. Select a model element. Click it again. And then again. Watch the right sidebar during these steps. And when you have selected an element, hover your cursor over another element.

Proposed resolution

One option is for a selected element to have a more prominent colored border, perhaps a solid blue line?

.djs-element.selected .djs-outline {
     stroke-width: 5px;
     stroke-dasharray: none;
     }

And with that perhaps even that same solid blue line around the right sidebar, linking them together visually.

Another option could be to slightly darken the opacity of the canvas and everything in it – except for the selected item and its sidebar – when an item is selected. That would effectively highlight the element.