Issue #2821263 by tedbow: If a toolbar item besides the admin menu is open...

Issue #2821263 by tedbow: If a toolbar item besides the admin menu is open when going into edit mode it is not closed

core/modules/outside_in/js/outside_in.js

@@ -84,6 +84,17 @@
     event.preventDefault();
   }
 
+  /**
+   * Close any active toolbar tray before entering edit mode.
+   */
+  function closeToolbarTrays() {
+    $('#toolbar-bar')
+      .find('.toolbar-tab')
+      .not('.contextual-toolbar-tab')
+      .has('.toolbar-tray.is-active')
+      .find('.toolbar-item').click();
+  }
+
   /**
    *  Helper to switch edit mode state.
    *
@@ -97,10 +108,7 @@
     // Turn on edit mode.
     if (editMode) {
       $editButton.text(Drupal.t('Editing'));
-      // Close the Manage tray if open when entering edit mode.
-      if ($('#toolbar-item-administration-tray').hasClass('is-active')) {
-        $('#toolbar-item-administration').trigger('click');
-      }
+      closeToolbarTrays();
 
       $editables = $('[data-drupal-outsidein="editable"]').once('outsidein');
       if ($editables.length) {

core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php

@@ -51,18 +51,21 @@ protected function setUp() {
    * Tests opening Offcanvas tray by click blocks and elements in the blocks.
    */
   public function testBlocks() {
+    $web_assert = $this->assertSession();
     $blocks = [
       [
         'id' => 'block-powered',
         'new_page_text' => 'Can you imagine anyone showing the label on this block?',
         'element_selector' => '.content a',
         'button_text' => 'Save Powered by Drupal',
+        'toolbar_item' => '#toolbar-item-user',
       ],
       [
         'id' => 'block-branding',
         'new_page_text' => 'The site that will live a very short life.',
         'element_selector' => 'a[rel="home"]:nth-child(2)',
         'button_text' => 'Save Site branding',
+        'toolbar_item' => '#toolbar-item-administration',
       ],
       [
         'id' => 'block-search',
@@ -74,7 +77,22 @@ public function testBlocks() {
     foreach ($blocks as $block) {
       $block_selector = '#' . $block['id'];
       $this->drupalGet('user');
+      if (isset($block['toolbar_item'])) {
+        // Check that you can open a toolbar tray and it will be closed after
+        // entering edit mode.
+        if ($element = $page->find('css', "#toolbar-administration a.is-active")) {
+          // If a tray was open from page load close it.
+          $element->click();
+          $this->waitForNoElement("#toolbar-administration a.is-active");
+        }
+        $page->find('css', $block['toolbar_item'])->click();
+        $this->waitForElement("{$block['toolbar_item']}.is-active");
+      }
       $this->toggleEditingMode();
+      if (isset($block['toolbar_item'])) {
+        $this->waitForNoElement("{$block['toolbar_item']}.is-active");
+      }
+
       $this->openBlockForm($block_selector);
 
       switch ($block['id']) {
@@ -94,7 +112,6 @@ public function testBlocks() {
         $page->pressButton($block['button_text']);
         // Make sure the changes are present.
         $this->getSession()->wait(500);
-        $web_assert = $this->assertSession();
         $web_assert->pageTextContains($block['new_page_text']);
       }
 
@@ -155,4 +172,5 @@ protected function openBlockForm($block_selector) {
     $this->waitForOffCanvasToOpen();
     $this->assertOffCanvasBlockFormIsValid();
   }
+
 }

core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInJavascriptTestBase.php

@@ -36,8 +36,7 @@ protected function waitForOffCanvasToOpen() {
    * Waits for Off-canvas tray to close.
    */
   protected function waitForOffCanvasToClose() {
-    $condition = "(jQuery('#drupal-offcanvas').length == 0)";
-    $this->assertJsCondition($condition);
+    $this->waitForNoElement('#drupal-offcanvas');
   }
 
   /**
@@ -64,4 +63,17 @@ protected function getTray() {
     return $tray;
   }
 
+  /**
+   * Waits for an element to be removed from the page.
+   *
+   * @param string $selector
+   *   CSS selector.
+   * @param int $timeout
+   *   (optional) Timeout in milliseconds, defaults to 1000.
+   */
+  protected function waitForNoElement($selector, $timeout = 1000) {
+    $condition = "(jQuery('$selector').length == 0)";
+    $this->assertJsCondition($condition, $timeout);
+  }
+
 }