Issue #3371005 by omkar.podey, lauriii, hooroomoo, tim.plunkett, Rajeshreeputra, smustgrave, catch, Wim Leers, Utkarsh_33: Toolbar doesn't indicate active menu trail for pages not included in Toolbar

3 files changed, 83 insertions, 8 deletions

diff --git a/core/modules/toolbar/js/models/MenuModel.js b/core/modules/toolbar/js/models/MenuModel.js
index 3d5f8352e11..19657c8bbd2 100644
--- a/core/modules/toolbar/js/models/MenuModel.js
+++ b/core/modules/toolbar/js/models/MenuModel.js
@@ -16,13 +16,13 @@
       /**
        * @type {object}
        *
-       * @prop {object} subtrees
+       * @prop {object|null} subtrees
        */
       defaults: /** @lends Drupal.toolbar.MenuModel# */ {
         /**
-         * @type {object}
+         * @type {object|null}
          */
-        subtrees: {},
+        subtrees: null,
       },
     },
   );
diff --git a/core/modules/toolbar/js/toolbar.menu.js b/core/modules/toolbar/js/toolbar.menu.js
index bde02e4be82..bb2a5ff0905 100644
--- a/core/modules/toolbar/js/toolbar.menu.js
+++ b/core/modules/toolbar/js/toolbar.menu.js
@@ -14,6 +14,33 @@
    */
   let activeItem = Drupal.url(drupalSettings.path.currentPath);
 
+  /**
+   * Maintains active tab in horizontal orientation.
+   */
+  $.fn.drupalToolbarMenuHorizontal = function () {
+    let currentPath = drupalSettings.path.currentPath;
+    const menu = once('toolbar-menu-horizontal', this);
+    if (menu.length) {
+      const $menu = $(menu);
+      if (activeItem) {
+        const count = currentPath.split('/').length;
+        // Find the deepest link with its parent info and start
+        // marking active.
+        for (let i = 0; i < count; i++) {
+          const $menuItem = $menu.find(
+            `a[data-drupal-link-system-path="${currentPath}"]`,
+          );
+          if ($menuItem.length !== 0) {
+            $menuItem.closest('a').addClass('is-active');
+            break;
+          }
+          const lastIndex = currentPath.lastIndexOf('/');
+          currentPath = currentPath.slice(0, lastIndex);
+        }
+      }
+    }
+  };
+
   $.fn.drupalToolbarMenu = function () {
     const ui = {
       handleOpen: Drupal.t('Extend'),
@@ -153,6 +180,7 @@
      *   The root of the menu.
      */
     function openActiveItem($menu) {
+      let currentPath = drupalSettings.path.currentPath;
       const pathItem = $menu.find(`a[href="${window.location.pathname}"]`);
       if (pathItem.length && !activeItem) {
         activeItem = window.location.pathname;
@@ -161,16 +189,36 @@
         const $activeItem = $menu
           .find(`a[href="${activeItem}"]`)
           .addClass('menu-item--active');
-        const $activeTrail = $activeItem
-          .parentsUntil('.root', 'li')
-          .addClass('menu-item--active-trail');
-        toggleList($activeTrail, true);
+        if (pathItem.length === 0 && activeItem) {
+          const count = currentPath.split('/').length;
+          // Find the deepest link with its parent info and start
+          // marking active.
+          for (let i = 0; i < count; i++) {
+            const $menuItem = $menu.find(
+              `a[data-drupal-link-system-path="${currentPath}"]`,
+            );
+            if ($menuItem.length !== 0) {
+              const $activeTrail = $menuItem
+                .parentsUntil('.root', 'li')
+                .addClass('menu-item--active-trail');
+              toggleList($activeTrail, true);
+              break;
+            }
+            const lastIndex = currentPath.lastIndexOf('/');
+            currentPath = currentPath.slice(0, lastIndex);
+          }
+        } else {
+          const $activeTrail = $activeItem
+            .parentsUntil('.root', 'li')
+            .addClass('menu-item--active-trail');
+          toggleList($activeTrail, true);
+        }
       }
     }
 
     // Return the jQuery object.
     return this.each(function (selector) {
-      const menu = once('toolbar-menu', this);
+      const menu = once('toolbar-menu-vertical', this);
       if (menu.length) {
         const $menu = $(menu);
         // Bind event handlers.
diff --git a/core/modules/toolbar/js/views/MenuVisualView.js b/core/modules/toolbar/js/views/MenuVisualView.js
index 916afb21a09..d230d4dfa7c 100644
--- a/core/modules/toolbar/js/views/MenuVisualView.js
+++ b/core/modules/toolbar/js/views/MenuVisualView.js
@@ -15,13 +15,40 @@
        */
       initialize() {
         this.listenTo(this.model, 'change:subtrees', this.render);
+
+        // Render the view immediately on initialization.
+        this.render();
       },
 
       /**
        * {@inheritdoc}
        */
       render() {
+        this.renderVertical();
+        this.renderHorizontal();
+      },
+
+      /**
+       * Renders the toolbar menu in horizontal mode.
+       */
+      renderHorizontal() {
+        // Render horizontal.
+        if ('drupalToolbarMenu' in $.fn) {
+          this.$el.children('.toolbar-menu').drupalToolbarMenuHorizontal();
+        }
+      },
+
+      /**
+       * Renders the toolbar menu in vertical mode.
+       */
+      renderVertical() {
         const subtrees = this.model.get('subtrees');
+
+        // Rendering the vertical menu depends on the subtrees.
+        if (!this.model.get('subtrees')) {
+          return;
+        }
+
         // Add subtrees.
         Object.keys(subtrees || {}).forEach((id) => {
           $(