Update to Drupal 8.0.0-beta15. For more information, see: https://www.drupal.org/node/2563023

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

@@ -150,7 +150,7 @@
 }
 
 @media only screen and (min-width: 16.5em) {
-  .toolbar .toolbar-bar .toolbar-icon {
+  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
     margin-left: 0;
     margin-right: 0;
     padding-left: 0;
@@ -158,36 +158,42 @@
     text-indent: -9999px;
     width: 4em;
   }
-  .toolbar .toolbar-bar .toolbar-icon:before {
+  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
     background-size: 42% auto;
     left: 0; /* LTR */
     width: 100%;
   }
-  [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before {
+  .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+    background-size: auto auto;
+  }
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
     left: auto;
     right: 0;
   }
 }
 
 @media only screen and (min-width: 36em) {
-  .toolbar .toolbar-bar .toolbar-icon {
+  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
     background-position: left center; /* LTR */
     padding-left: 2.75em; /* LTR */
     padding-right: 1.3333em; /* LTR */
     text-indent: 0;
     width: auto;
   }
-  [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon {
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
     background-position: right center;
     padding-left: 1.3333em;
     padding-right: 2.75em;
   }
-  .toolbar .toolbar-bar .toolbar-icon:before {
+  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
     background-size: 100% auto;
     left: 0.6667em; /* LTR */
     width: 20px;
   }
-  [dir="rtl"] .toolbar .toolbar-bar .toolbar-icon:before {
+  .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+    background-size: auto auto;
+  }
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
     left: 0;
     right: 0.6667em;
   }

core/modules/toolbar/css/toolbar.module.css

@@ -170,6 +170,11 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
   left: auto;
   right: 0;
 }
+/* Layer the links just above the toolbar-tray. */
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon{
+  position: relative;
+  z-index: 502;
+}
 /* Hide secondary menus when the tray is horizontal. */
 .toolbar-oriented .toolbar-tray-horizontal .menu-item ul {
   display: none;

core/modules/toolbar/js/escapeAdmin.js

@@ -11,10 +11,10 @@
   var escapeAdminPath = sessionStorage.getItem('escapeAdminPath');
   var windowLocation = window.location;
 
-  // Saves the last non-administrative page in the browser to be able to link back
-  // to it when browsing administrative pages. If there is a destination parameter
-  // there is not need to save the current path because the page is loaded within
-  // an existing "workflow".
+  // Saves the last non-administrative page in the browser to be able to link
+  // back to it when browsing administrative pages. If there is a destination
+  // parameter there is not need to save the current path because the page is
+  // loaded within an existing "workflow".
   if (!pathInfo.currentPathIsAdmin && !/destination=/.test(windowLocation.search)) {
     sessionStorage.setItem('escapeAdminPath', windowLocation);
   }
@@ -22,10 +22,13 @@
   /**
    * Replaces the "Home" link with "Back to site" link.
    *
-   * Back to site link points to the last non-administrative page the user visited
-   * within the same browser tab.
+   * Back to site link points to the last non-administrative page the user
+   * visited within the same browser tab.
    *
    * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the replacement functionality to the toolbar-escape-admin element.
    */
   Drupal.behaviors.escapeAdmin = {
     attach: function () {

core/modules/toolbar/js/models/ToolbarModel.js

@@ -138,9 +138,12 @@
      * @inheritdoc
      *
      * @param {object} attributes
+     *   Attributes for the toolbar.
      * @param {object} options
+     *   Options for the toolbar.
      *
-     * @return {string}
+     * @return {string|undefined}
+     *   Returns an error message if validation failed.
      */
     validate: function (attributes, options) {
       // Prevent the orientation being set to horizontal if it is locked, unless

core/modules/toolbar/js/toolbar.js

@@ -35,6 +35,9 @@
    * Modules register tabs with hook_toolbar().
    *
    * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the toolbar rendering functionality to the toolbar element.
    */
   Drupal.behaviors.toolbar = {
     attach: function (context) {
@@ -131,7 +134,7 @@
         // not the first 'Home' toolbar tab).
         if (Drupal.toolbar.models.toolbarModel.get('orientation') === 'horizontal' && Drupal.toolbar.models.toolbarModel.get('activeTab') === null) {
           Drupal.toolbar.models.toolbarModel.set({
-            'activeTab': $('.toolbar-bar .toolbar-tab:not(.home-toolbar-tab) a').get(0)
+            activeTab: $('.toolbar-bar .toolbar-tab:not(.home-toolbar-tab) a').get(0)
           });
         }
       });
@@ -181,38 +184,41 @@
      * Respond to configured narrow media query changes.
      *
      * @param {Drupal.toolbar.ToolbarModel} model
+     *   A toolbar model
      * @param {string} label
+     *   Media query label.
      * @param {object} mql
+     *   A MediaQueryList object.
      */
     mediaQueryChangeHandler: function (model, label, mql) {
       switch (label) {
         case 'toolbar.narrow':
           model.set({
-            'isOriented': mql.matches,
-            'isTrayToggleVisible': false
+            isOriented: mql.matches,
+            isTrayToggleVisible: false
           });
           // If the toolbar doesn't have an explicit orientation yet, or if the
           // narrow media query doesn't match then set the orientation to
           // vertical.
           if (!mql.matches || !model.get('orientation')) {
-            model.set({'orientation': 'vertical'}, {validate: true});
+            model.set({orientation: 'vertical'}, {validate: true});
           }
           break;
 
         case 'toolbar.standard':
           model.set({
-            'isFixed': mql.matches
+            isFixed: mql.matches
           });
           break;
 
         case 'toolbar.wide':
           model.set({
-            'orientation': ((mql.matches) ? 'horizontal' : 'vertical')
+            orientation: ((mql.matches) ? 'horizontal' : 'vertical')
           }, {validate: true});
           // The tray orientation toggle visibility does not need to be
           // validated.
           model.set({
-            'isTrayToggleVisible': mql.matches
+            isTrayToggleVisible: mql.matches
           });
           break;
 
@@ -238,8 +244,11 @@
    * Ajax command to set the toolbar subtrees.
    *
    * @param {Drupal.Ajax} ajax
+   *   {@link Drupal.Ajax} object created by {@link Drupal.ajax}.
    * @param {object} response
+   *   JSON response from the Ajax request.
    * @param {number} [status]
+   *   XMLHttpRequest status.
    */
   Drupal.AjaxCommands.prototype.setToolbarSubtrees = function (ajax, response, status) {
     Drupal.toolbar.setSubtrees.resolve(response.subtrees);

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

@@ -20,8 +20,8 @@
   $.fn.drupalToolbarMenu = function () {
 
     var ui = {
-      'handleOpen': Drupal.t('Extend'),
-      'handleClose': Drupal.t('Collapse')
+      handleOpen: Drupal.t('Extend'),
+      handleClose: Drupal.t('Collapse')
     };
 
     /**
@@ -97,9 +97,9 @@
      */
     function initItems($menu) {
       var options = {
-        'class': 'toolbar-icon toolbar-handle',
-        'action': ui.handleOpen,
-        'text': ''
+        class: 'toolbar-icon toolbar-handle',
+        action: ui.handleOpen,
+        text: ''
       };
       // Initialize items and their links.
       $menu.find('li > a').wrap('<div class="toolbar-box">');
@@ -179,9 +179,13 @@
    * A toggle is an interactive element often bound to a click handler.
    *
    * @param {object} options
+   *   Options for the button.
    * @param {string} options.class
+   *   Class to set on the button.
    * @param {string} options.action
+   *   Action for the button.
    * @param {string} options.text
+   *   Used as label for the button.
    *
    * @return {string}
    *   A string representing a DOM fragment.

core/modules/toolbar/js/views/ToolbarAuralView.js

@@ -17,7 +17,9 @@
      * @augments Backbone.View
      *
      * @param {object} options
+     *   Options for the view.
      * @param {object} options.strings
+     *   Various strings to use in the view.
      */
     initialize: function (options) {
       this.strings = options.strings;
@@ -30,6 +32,7 @@
      * Announces an orientation change.
      *
      * @param {Drupal.toolbar.ToolbarModel} model
+     *   The toolbar model in question.
      * @param {string} orientation
      *   The new value of the orientation attribute in the model.
      */
@@ -43,6 +46,7 @@
      * Announces a changed active tray.
      *
      * @param {Drupal.toolbar.ToolbarModel} model
+     *   The toolbar model in question.
      * @param {HTMLElement} tray
      *   The new value of the tray attribute in the model.
      */

core/modules/toolbar/js/views/ToolbarVisualView.js

@@ -10,7 +10,10 @@
   Drupal.toolbar.ToolbarVisualView = Backbone.View.extend(/** @lends Drupal.toolbar.ToolbarVisualView# */{
 
     /**
+     * Event map for the `ToolbarVisualView`.
+     *
      * @return {object}
+     *   A map of events.
      */
     events: function () {
       // Prevents delay and simulated mouse events.
@@ -35,7 +38,9 @@
      * @augments Backbone.View
      *
      * @param {object} options
+     *   Options for the view object.
      * @param {object} options.strings
+     *   Various strings to use in the view.
      */
     initialize: function (options) {
       this.strings = options.strings;
@@ -58,6 +63,7 @@
      * @inheritdoc
      *
      * @return {Drupal.toolbar.ToolbarVisualView}
+     *   The `ToolbarVisualView` instance.
      */
     render: function () {
       this.updateTabs();
@@ -91,6 +97,7 @@
      * Responds to a toolbar tab click.
      *
      * @param {jQuery.Event} event
+     *   The event triggered.
      */
     onTabClick: function (event) {
       // If this tab has a tray associated with it, it is considered an
@@ -111,6 +118,7 @@
      * Toggles the orientation of a toolbar tray.
      *
      * @param {jQuery.Event} event
+     *   The event triggered.
      */
     onOrientationToggleClick: function (event) {
       var orientation = this.model.get('orientation');
@@ -238,13 +246,13 @@
     adjustPlacement: function () {
       var $trays = this.$el.find('.toolbar-tray');
       if (!this.model.get('isOriented')) {
-        $trays.css('padding-top', 0);
+        $trays.css('margin-top', 0);
         $trays.removeClass('toolbar-tray-horizontal').addClass('toolbar-tray-vertical');
       }
       else {
         // The toolbar container is invisible. Its placement is used to
         // determine the container for the trays.
-        $trays.css('padding-top', this.$el.find('.toolbar-bar').outerHeight());
+        $trays.css('margin-top', this.$el.find('.toolbar-bar').outerHeight());
       }
     },
 

core/modules/toolbar/src/Tests/ToolbarAdminMenuTest.php

@@ -388,6 +388,7 @@ class ToolbarAdminMenuTest extends WebTestBase {
       'title[0][value]' => 'External URL',
       'link[0][uri]' => 'http://example.org',
       'menu_parent' => 'admin:system.admin',
+      'description[0][value]' => 'External URL & escaped',
     ];
     $this->drupalPostForm('admin/structure/menu/manage/admin/add', $edit, 'Save');
 
@@ -398,6 +399,8 @@ class ToolbarAdminMenuTest extends WebTestBase {
     // Assert that the new menu link is shown in the toolbar on a regular page.
     $this->drupalGet(Url::fromRoute('<front>'));
     $this->assertText('External URL');
+    // Ensure the description is escaped as expected.
+    $this->assertRaw('title="External URL &amp; escaped"');
   }
 
   /**

core/modules/toolbar/src/Tests/ToolbarCacheContextsTest.php

@@ -8,6 +8,7 @@
 namespace Drupal\toolbar\Tests;
 
 use Drupal\Core\Cache\Cache;
+use Drupal\Core\EventSubscriber\MainContentViewSubscriber;
 use Drupal\simpletest\WebTestBase;
 use Drupal\system\Tests\Cache\AssertPageCacheContextsAndTagsTrait;
 
@@ -109,6 +110,7 @@ class ToolbarCacheContextsTest extends WebTestBase {
     $default_cache_contexts = [
       'languages:language_interface',
       'theme',
+      'url.query_args:' . MainContentViewSubscriber::WRAPPER_FORMAT,
     ];
     $cache_contexts = Cache::mergeContexts($default_cache_contexts, $cache_contexts);
 

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

@@ -25,23 +25,24 @@
 <div{{ attributes.addClass('toolbar') }}>
   <nav{{ toolbar_attributes.addClass('toolbar-bar') }}>
     <h2 class="visually-hidden">{{ toolbar_heading }}</h2>
-    {% for tab in tabs %}
-      <div{{ tab.attributes.addClass('toolbar-tab') }}>{{ tab.link }}</div>
+    {% for key, tab in tabs %}
+      {% set tray = trays[key] %}
+      <div{{ tab.attributes.addClass('toolbar-tab') }}>
+        {{ tab.link }}
+        {% spaceless %}
+          <div{{ tray.attributes }}>
+            {% if tray.label %}
+              <nav class="toolbar-lining clearfix" role="navigation" aria-label="{{ tray.label }}">
+                <h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
+            {% else %}
+              <nav class="toolbar-lining clearfix" role="navigation">
+            {% endif %}
+            {{ tray.links }}
+            </nav>
+          </div>
+        {% endspaceless %}
+      </div>
     {% endfor %}
   </nav>
-  {% for tray in trays %}
-    {% spaceless %}
-    <div{{ tray.attributes }}>
-    {% if tray.label %}
-      <nav class="toolbar-lining" role="navigation" aria-label="{{ tray.label }}">
-          <h3 class="toolbar-tray-name visually-hidden">{{ tray.label }}</h3>
-    {% else %}
-      <nav class="toolbar-lining" role="navigation">
-    {% endif %}
-        {{ tray.links }}
-      </nav>
-    </div>
-    {% endspaceless %}
-  {% endfor %}
   {{ remainder }}
 </div>

core/modules/toolbar/toolbar.module

@@ -13,7 +13,6 @@ use Drupal\Core\Routing\RouteMatchInterface;
 use Drupal\Core\Template\Attribute;
 use Drupal\Component\Datetime\DateTimePlus;
 use Drupal\Component\Utility\Crypt;
-use Drupal\Component\Utility\SafeMarkup;
 use Drupal\Core\Url;
 
 /**
@@ -265,7 +264,7 @@ function toolbar_menu_navigation_links(array $tree) {
     $element->options['attributes']['id'] = 'toolbar-link-' . $id;
     $element->options['attributes']['class'][] = 'toolbar-icon';
     $element->options['attributes']['class'][] = 'toolbar-icon-' . strtolower(str_replace(array('.', ' ', '_'), array('-', '-', '-'), $definition['id']));
-    $element->options['attributes']['title'] = SafeMarkup::checkPlain($link->getDescription());
+    $element->options['attributes']['title'] = $link->getDescription();
   }
   return $tree;
 }