[UX] Admin bar: Decide strategy to customize or provide icons for 1st-level menu items

[klonos]

This is not necessarily a core problem per se, but it falls into the realm of making it easier for site builders and contrib to achieve things easier/faster (or for things to work OOTB when possible).

It would be nice if core accommodated this scenario and provided a more consistent style/experience, regardless of whether it is custom or contrib code that provides such a menu item (in which case the expectation would be that the responsibility falls on the custom/contrib module to also provide an icon).

A really common use case in the past was the "Development" menu item that becomes available when the popular devel module was installed. Although most recent versions of the contrib module provide an icon, older versions didn't (and the icon for it was actually provided by the core admin_bar module - so we added icons in core in order to accommodate for a contrib module). That resulted in this: [screenshot pending]

You can intentionally create this problem if you manually place a menu item at the top level in the admin bar:

Credits for the ideas here:

• https://www.drupal.org/project/drupal/issues/3432173

  The new navigation provides a new feature by adding icons to first level menu items. So far this is implemented by CSS with a background in the item, so if a contrib or a site-builder wants to add a new first level item and add an icon to it they need to write some CSS.

  Proposed resolution

  It would be great to find a way that makes it easy to create and personalize new menu items with icons, and provide an easy way for contrib modules and distributions to provide their own configuration.

  So in here we'd need to provide and discuss options that would make extensibility and maintenance easy. Some options could be:

  • CSS background (what we have right now)
  • A YML / config based strategy
  • UI selector with a set of open-source icons shipped with the Navigation module itself
  • Create a contrib module that provides more icons from an open-source library
  • Other ideas?

• https://www.drupal.org/project/drupal/issues/3424744

  If we use a default icon, then all new menu items who don't supply a custom icon in code, will have the same icon, which is very confusing.

  Proposed resolution

  Instead of a default icon, use the first two letters of the menu item name.

[quicksketch]

@klonos You might need to update your screenshot a bit, as it's no longer accurate with the new SVG icons. Top level menu links are now always assigned a default "chevron" icon if they have not specified one. That would be the case for all custom links currently.

But now that core provides so many icons, Devel module can easily specify its top-level icon in hook_menu() like this:

function devel_menu() {
  $items['admin/devel'] = array(
    'title' => t('Development'),
    'icon' => 'code', // <- New line
    'access arguments' => array('access devel information'),
    'page callback' => 'system_admin_menu_block_page',
    'weight' => 5,
    'file' => 'system.admin.inc',
    'file path' => backdrop_get_path('module', 'system'),
  );

So I think as far as contrib modules are concerned, this problem is already solved. Adding icons to custom menu links is another thing, but that doesn't sound like what this issue is requesting.

[klonos]

You might need to update your screenshot a bit, as it's no longer accurate with the new SVG icons. ...

Yup, will do that 👍🏼

... Top level menu links are now always assigned a default "chevron" icon if they have not specified one. That would be the case for all custom links currently.

And that is one of the problems: custom icons will now be hard to distinguish with the same default icon used for all of them (the icon basically loses its value). As stated in the second d.org issue listed in the issue summary:

If we use a default icon, then all new menu items who don't supply a custom icon in code, will have the same icon, which is very confusing.

[jenlampton]

And that is one of the problems: custom icons will now be hard to distinguish with the same default icon used for all of them

I still think this is not a big enough problem to worry about in core. The icon can be specified by any module adding it's link into the admin bar. I think people adding custom links into the admin bar is not common enough to reach the 80% mark.