Issue #1944572 by hass, Cottser, idebr: Remove "ul.menu" dependency to prevent theme clashes

core/modules/shortcut/shortcut.module

@@ -277,7 +277,7 @@ function shortcut_renderable_links($shortcut_set = NULL) {
       '#theme' => 'links__toolbar_shortcuts',
       '#links' => $links,
       '#attributes' => array(
-        'class' => array('menu'),
+        'class' => array('toolbar-menu'),
       ),
       '#cache' => array(
         'tags' => $cache_tags,

core/modules/shortcut/src/Tests/ShortcutLinksTest.php

@@ -307,14 +307,14 @@ class ShortcutLinksTest extends ShortcutTestBase {
     // Ensure to give permissions to access the shortcuts.
     $this->drupalLogin($this->drupalCreateUser(array('access toolbar', 'access shortcuts', 'access content overview', 'administer content types')));
     $this->drupalGet(Url::fromRoute('<front>'));
-    $shortcuts = $this->cssSelect('#toolbar-item-shortcuts-tray .menu a');
+    $shortcuts = $this->cssSelect('#toolbar-item-shortcuts-tray .toolbar-menu a');
     $this->assertEqual((string) $shortcuts[0], 'Add content');
     $this->assertEqual((string) $shortcuts[1], 'All content');
     foreach($this->set->getShortcuts() as $shortcut) {
       $shortcut->setWeight($shortcut->getWeight() * -1)->save();
     }
     $this->drupalGet(Url::fromRoute('<front>'));
-    $shortcuts = $this->cssSelect('#toolbar-item-shortcuts-tray .menu a');
+    $shortcuts = $this->cssSelect('#toolbar-item-shortcuts-tray .toolbar-menu a');
     $this->assertEqual((string) $shortcuts[0], 'All content');
     $this->assertEqual((string) $shortcuts[1], 'Add content');
   }

core/modules/shortcut/src/Tests/ShortcutTranslationUITest.php

@@ -74,7 +74,7 @@ class ShortcutTranslationUITest extends ContentTranslationUITestBase {
         $this->drupalGet('<front>', array('language' => $language));
         $expected_path = \Drupal::urlGenerator()->generateFromRoute('user.page', array(), array('language' => $language));
         $label = $entity->getTranslation($langcode)->label();
-        $elements = $this->xpath('//nav[contains(@class, "toolbar-lining")]/ul[@class="menu"]/li/a[contains(@href, :href) and normalize-space(text())=:label]', array(':href' => $expected_path, ':label' => $label));
+        $elements = $this->xpath('//nav[contains(@class, "toolbar-lining")]/ul[@class="toolbar-menu"]/li/a[contains(@href, :href) and normalize-space(text())=:label]', array(':href' => $expected_path, ':label' => $label));
         $this->assertTrue(!empty($elements), format_string('Translated @language shortcut link @label found.', array('@label' => $label, '@language' => $language->getName())));
       }
     }

core/modules/toolbar/css/toolbar.icons.theme.css

@@ -34,36 +34,36 @@
   border: 0;
   font-size: 1em;
 }
-.toolbar .menu ul .toolbar-icon {
+.toolbar .toolbar-menu ul .toolbar-icon {
   padding-left: 1.3333em; /* LTR */
 }
-[dir="rtl"] .toolbar .menu ul .toolbar-icon {
+[dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon {
   padding-left: 0;
   padding-right: 1.3333em;
 }
-.toolbar .menu ul a.toolbar-icon:before {
+.toolbar .toolbar-menu ul a.toolbar-icon:before {
   display: none;
 }
-.toolbar .toolbar-tray-vertical .menu ul a {
+.toolbar .toolbar-tray-vertical .toolbar-menu ul a {
   padding-left: 2.75em; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-vertical .menu ul a {
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
   padding-left: 0;
   padding-right: 2.75em;
 }
-.toolbar .toolbar-tray-vertical .menu ul ul a {
+.toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
   padding-left: 3.75em; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-vertical .menu ul ul a {
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
   padding-left: 0;
   padding-right: 3.75em;
 }
 
-.toolbar .toolbar-tray-vertical .menu a {
+.toolbar .toolbar-tray-vertical .toolbar-menu a {
   padding-left: 2.75em; /* LTR */
   padding-right: 4em; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-vertical .menu a {
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {
   padding-left: 4em;
   padding-right: 2.75em;
 }
@@ -255,11 +255,11 @@
 .toolbar .toolbar-icon.toolbar-handle.open:before {
   background-image: url(../../../misc/icons/787878/chevron-disc-up.svg);
 }
-.toolbar .menu .menu .toolbar-icon.toolbar-handle:before {
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:before {
   background-image: url(../../../misc/icons/5181c6/twistie-down.svg);
   background-size: 75%;
 }
-.toolbar .menu .menu .toolbar-icon.toolbar-handle.open:before {
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:before {
   background-image: url(../../../misc/icons/787878/twistie-up.svg);
   background-size: 75%;
 }

core/modules/toolbar/css/toolbar.menu.css

@@ -1,8 +1,8 @@
 /**
  * @file toolbar.menu.css
  */
-.toolbar .menu,
-[dir="rtl"] .toolbar .menu {
+.toolbar .toolbar-menu,
+[dir="rtl"] .toolbar .toolbar-menu {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -13,9 +13,9 @@
   position: relative;
   width: auto;
 }
-.toolbar .toolbar-tray-horizontal .menu .toolbar-handle,
-.toolbar .toolbar-tray-horizontal .menu ul,
-.toolbar .toolbar-tray-vertical .menu ul {
+.toolbar .toolbar-tray-horizontal .toolbar-menu .toolbar-handle,
+.toolbar .toolbar-tray-horizontal .toolbar-menu ul,
+.toolbar .toolbar-tray-vertical .toolbar-menu ul {
   display: none;
 }
 .toolbar .toolbar-tray-vertical li.open > ul {

core/modules/toolbar/css/toolbar.theme.css

@@ -99,7 +99,7 @@
   color: #000;
   text-decoration: underline;
 }
-.toolbar .menu {
+.toolbar .toolbar-menu {
   background-color: #ffffff;
 }
 .toolbar .toolbar-tray-horizontal .menu-item + .menu-item {
@@ -124,21 +124,21 @@
 .toolbar .toolbar-tray-vertical .menu-item .menu-item {
   border: 0 none;
 }
-.toolbar .toolbar-tray-vertical .menu ul ul {
+.toolbar .toolbar-tray-vertical .toolbar-menu ul ul {
   border-bottom: 1px solid #dddddd;
   border-top: 1px solid #dddddd;
 }
 .toolbar .toolbar-tray-vertical .menu-item:last-child > ul {
   border-bottom: 0;
 }
-.toolbar .toolbar-tray-vertical .menu .menu .menu .menu {
+.toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu {
   margin-left: 0.25em; /* LTR */
 }
-[dir="rtl"] .toolbar .toolbar-tray-vertical .menu .menu .menu .menu {
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu .toolbar-menu .toolbar-menu .toolbar-menu {
   margin-left: 0;
   margin-right: 0.25em;
 }
-.toolbar .menu .menu a {
+.toolbar .toolbar-menu .toolbar-menu a {
   color: #434343;
 }
 

core/modules/toolbar/js/toolbar.menu.js

@@ -2,7 +2,7 @@
  * Builds a nested accordion widget.
  *
  * Invoke on an HTML list element with the jQuery plugin pattern.
- * - For example, $('.menu').drupalToolbarMenu();
+ * - For example, $('.toolbar-menu').drupalToolbarMenu();
  */
 
 (function ($, Drupal, drupalSettings) {
@@ -103,7 +103,7 @@
       // Add a handle to each list item if it has a menu.
       $menu.find('li').each(function (index, element) {
         var $item = $(element);
-        if ($item.children('ul.menu').length) {
+        if ($item.children('ul.toolbar-menu').length) {
           var $box = $item.children('.toolbar-box');
           options.text = Drupal.t('@label', {'@label': $box.find('a').text()});
           $item.children('.toolbar-box')

core/modules/toolbar/js/views/MenuVisualView.js

@@ -35,7 +35,7 @@
       // Render the main menu as a nested, collapsible accordion.
       if ('drupalToolbarMenu' in $.fn) {
         this.$el
-          .children('.menu')
+          .children('.toolbar-menu')
           .drupalToolbarMenu();
       }
     }

core/modules/toolbar/src/Menu/ToolbarMenuLinkTree.php

@@ -0,0 +1,41 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\toolbar\Menu\ToolbarMenuLinkTree.
+ */
+
+namespace Drupal\toolbar\Menu;
+
+use Drupal\Core\Menu\MenuLinkTree;
+
+/**
+ * Extends MenuLinkTree to add specific theme suggestions for the toolbar.
+ */
+class ToolbarMenuLinkTree extends MenuLinkTree {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function build(array $tree, $level = 0) {
+    if ($level == 0) {
+      if (!$tree) {
+        return array();
+      }
+      $build = parent::build($tree, $level);
+
+      /** @var \Drupal\Core\Menu\MenuLinkInterface $link */
+      $first_link = reset($tree)->link;
+      // Get the menu name of the first link.
+      $menu_name = $first_link->getMenuName();
+      // Add a more specific theme suggestion to differentiate this rendered
+      // menu from others.
+      $build['#theme'] = 'menu__toolbar__' . strtr($menu_name, '-', '_');
+      return $build;
+    }
+    else {
+      return parent::build($tree, $level);
+    }
+  }
+
+}

core/modules/toolbar/templates/menu--toolbar.html.twig

@@ -0,0 +1,44 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a toolbar menu.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link url, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *
+ * @ingroup themeable
+ */
+#}
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see http://twig.sensiolabs.org/doc/tags/macro.html
+#}
+{{ menus.menu_links(items, attributes, 0) }}
+
+{% macro menu_links(items, attributes, menu_level) %}
+  {% import _self as menus %}
+  {% if items %}
+    {% if menu_level == 0 %}
+      <ul{{ attributes.addClass('toolbar-menu') }}>
+    {% else %}
+      <ul class="toolbar-menu">
+    {% endif %}
+      {% for item in items %}
+        <li{{ item.attributes }}>
+          {{ link(item.title, item.url) }}
+          {% if item.below %}
+            {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}

core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.module

@@ -38,7 +38,7 @@ function toolbar_test_toolbar() {
           \Drupal::l(t('link 3'), new Url('<front>', [], array('attributes' => array('title' => 'Test link 3 title')))),
         ),
         '#attributes' => array(
-          'class' => array('menu'),
+          'class' => array('toolbar-menu'),
         ),
       ),
     ),

core/modules/toolbar/toolbar.module

@@ -42,6 +42,10 @@ function toolbar_theme($existing, $type, $theme, $path) {
   $items['toolbar'] = array(
     'render element' => 'element',
   );
+  $items['menu__toolbar'] = array(
+    'base hook' => 'menu',
+    'variables' => array('items' => array(), 'attributes' => array()),
+  );
 
   return $items;
 }
@@ -204,7 +208,7 @@ function toolbar_toolbar() {
  * @see drupal_render()
  */
 function toolbar_prerender_toolbar_administration_tray(array $element) {
-  $menu_tree = \Drupal::menuTree();
+  $menu_tree = \Drupal::service('toolbar.menu_tree');
   // Render the top-level administration menu links.
   $parameters = new MenuTreeParameters();
   $parameters->setRoot('system.admin')->excludeRoot()->setTopLevelOnly()->onlyEnabledLinks();
@@ -261,7 +265,7 @@ function toolbar_menu_navigation_links(array $tree) {
  * Returns the rendered subtree of each top-level toolbar link.
  */
 function toolbar_get_rendered_subtrees() {
-  $menu_tree = \Drupal::menuTree();
+  $menu_tree = \Drupal::service('toolbar.menu_tree');
   $parameters = new MenuTreeParameters();
   $parameters->setRoot('system.admin')->excludeRoot()->setMaxDepth(3)->onlyEnabledLinks();
   $tree = $menu_tree->load(NULL, $parameters);

core/modules/toolbar/toolbar.services.yml

@@ -10,3 +10,6 @@ services:
     class: Drupal\toolbar\PageCache\AllowToolbarPath
     tags:
       - { name: page_cache_request_policy }
+  toolbar.menu_tree:
+    class: Drupal\toolbar\Menu\ToolbarMenuLinkTree
+    arguments: ['@menu.tree_storage', '@plugin.manager.menu.link', '@router.route_provider', '@menu.active_trail', '@controller_resolver', '@cache.menu', '@current_route_match']

core/modules/user/user.module

@@ -1365,7 +1365,7 @@ function user_toolbar() {
         '#theme' => 'links__toolbar_user',
         '#links' => $links,
         '#attributes' => array(
-          'class' => array('menu'),
+          'class' => array('toolbar-menu'),
         ),
       ),
     ),