Add visual indicator to show which toolbar buttons have trays associated with them

Problem/Motivation

Some top-level toolbar items have trays associated with them, while others don't. Currently there is no visual way to know which buttons have trays associated with them.

Here we see the the toolbar with 5 top-level items, and no tray is open. The manage, shortcuts, and admin (user menu) items all have trays associated with them, while the tour and edit buttons don't. There's no way to know which ones have a tray.

On an admin page, we see the the toolbar has a "back to site" link. 3 more top-level items (manage, shortcuts, and admin user menu) have trays associated with them, Again, there's no way to know which ones have a tray.

Toolbar items which have trays:

• Manage
• Shortcuts
• User menu
• Devel (contrib module)
• Environment indicator (contrib module)

Toolbar items which don't have trays:

• Home
• Back to site
• Tour
• Edit

If toolbar items with tray had an indicator that they control a tray, it would help users to understand what their behaviour is.

The submenus inside the Manage tray already have icons for this, as do details/summary elements elsewhere in page content.

Proposed resolution

Add a visual signifier to toolbars items which have visual trays associated with them.

Scope:

• This is about adding a visual indicator to show which top-level toolbar items have trays.
• A separate issue will improve the way this is conveyed to assistive tech - #3090120: Improve accessibility semantics for Toolbar buttons with trays.

Remaining tasks

• Design.
• Update CSS.
• Tests? e.g. a functional test to confirm the presence of a CSS class on toolbar items with trays, and it's absence from toolbar items without trays.

User interface changes

Adds a visual indicator to show which toolbar buttons have trays associated with them.

API changes

None.

Data model changes

None.