Toolbar module responsive layout update and API to add control structures

With the initial commit #1137920-330: Fix toolbar on small screen sizes and redesign toolbar for desktop, we set the Drupal toolbar on the road to evolve from a flat list of links to an application control bar that flexes to accomodate any screen size. That initial commit laid groundwork for several enabling improvements such as the introduction of hook_toolbar and lightweight orientation controls that allow a user to position the toolbar commands on the screen according to their current task's needs.

We made the initial commit with the knowledge that the toolbar will require improvements to several of its sub-systems. We will also need to address how the toolbar interacts with other Drupal core modules such as Overlay.

Development on the Toolbar module is by no means complete. We will continue to improve the UX and DX of this module through the code freeze cycle. Find followup issues here on the project management page: #1846970: [meta] Responsive Toolbar follow-ups.

Visual changes

This update transforms the Drupal 7 Toolbar module from

to this

hook_toolbar

Whereas in Drupal 7, a module such as Shortcut needed to implement hook_page_alter to get code into the Toolbar

/**
 * Implements hook_page_alter().
 */
function shortcut_page_alter(&$page) {
  if (isset($page['page_top']['toolbar'])) {
    // If the toolbar is available, add a pre-render function to display the
    // current shortcuts in the toolbar drawer.
    $page['page_top']['toolbar']['#pre_render'][] = 'shortcut_toolbar_pre_render';
  }
}

in Drupal 8, a module can now implement hook_toolbar and pass a structured array. The definition of the structure passed back in hook_toolbar is still under development [#ISSUE NUMBER]. The desire here is to allow module developers to pass in complex structures to both the top level bar tabs and the associated tray.

/**
 * Implements hook_toolbar().
 */
function shortcut_toolbar() {
  $links = shortcut_renderable_links();
  $links['#attached'] = array(
    'css' => array(
      drupal_get_path('module', 'shortcut') . '/shortcut.base.css',
      drupal_get_path('module', 'shortcut') . '/shortcut.theme.css',
    ),
  );
  $shortcut_set = shortcut_current_displayed_set();
  $configure_link = NULL;
  if (shortcut_set_edit_access($shortcut_set)) {
    $configure_link = array(
      '#type' => 'link',
      '#title' => t('Edit shortcuts'),
      '#href' => 'admin/config/user-interface/shortcut/' . $shortcut_set->set_name,
      '#options' => array('attributes' => array('class' => array('edit-shortcuts'))),
    );
  }

  $links_tray = array(
    '#heading' => t('User-defined shortcuts'),
    'shortcuts' => $links,
    'configure' => $configure_link,
  );

  $items['shortcuts'] = array(
    'tab' => array(
      'title' => t('Shortcuts'),
      'href' => 'admin/config/user-interface/shortcut',
      'html' => FALSE,
      'attributes' => array(
        'title' => t('Shortcuts'),
        'class' => array('icon', 'icon-shortcut'),
      ),
    ),
    'tray' => $links_tray,
    'weight' => -10,
  );
  return $items;
}

Accessibility improvements

On 18 November, 2012, members of the Toolbar development team attended the Drupal Accessibility Sprint in Toronto. There we worked with members of that group to refine the HTML structure of the Toolbar.