Update to Drupal 8.2.4. For more information, see https://www.drupal.org/project/drupal/releases/8.2.4

core/modules/outside_in/css/outside_in.module.css

@@ -38,12 +38,3 @@
 [dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
   float: right;
 }
-
-.offcanvas-lining {
-  background: #333;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  z-index: -1;
-}

core/modules/outside_in/css/outside_in.motion.css

@@ -32,8 +32,8 @@
 
 /* Transition the editables on the page, their contextual links and their hover states. */
 #main-canvas-wrapper .contextual,
-#main-canvas-wrapper .outside-in-editable,
-#main-canvas-wrapper.js-tray-open .outside-in-editable {
+#main-canvas-wrapper .js-outside-in-edit-mode .outside-in-editable,
+#main-canvas-wrapper.js-tray-open .js-outside-in-edit-mode .outside-in-editable {
   -webkit-transition: all .7s ease;
   -moz-transition: all .7s ease;
   transition: all .7s ease;

core/modules/outside_in/js/offcanvas.js

@@ -120,6 +120,9 @@
           of: window
         };
         settings.dialogClass = 'ui-dialog-offcanvas';
+        // Applies initial height to dialog based on window height.
+        // See http://api.jqueryui.com/dialog for all dialog options.
+        settings.height = $(window).height();
       }
     },
     'dialog:beforeclose': function (event, dialog, $element) {

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/templates/outside-in-page-wrapper.html.twig

@@ -17,5 +17,4 @@
       {{ children }}
     </div>
   </div>
-  <div class="offcanvas-lining"></div>
 {% endif %}

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

@@ -51,18 +51,24 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
    * Tests opening Offcanvas tray by click blocks and elements in the blocks.
    */
   public function testBlocks() {
+    // @todo: re-enable once https://www.drupal.org/node/2830485 is resolved.
+    $this->markTestSkipped('Test skipped due to random failures in DrupalCI, see https://www.drupal.org/node/2830485');
+
+    $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 +80,22 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
     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']) {
@@ -93,8 +114,7 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
       if (isset($block['new_page_text'])) {
         $page->pressButton($block['button_text']);
         // Make sure the changes are present.
-        $this->getSession()->wait(500);
-        $web_assert = $this->assertSession();
+        $this->assertSession()->assertWaitOnAjaxRequest();
         $web_assert->pageTextContains($block['new_page_text']);
       }
 
@@ -124,7 +144,7 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
   protected function toggleEditingMode() {
     $this->waitForElement('div[data-contextual-id="block:block=powered:langcode=en|outside_in::langcode=en"] .contextual-links a');
 
-    $this->waitForElement('#toolbar-bar', 3000);
+    $this->waitForElement('#toolbar-bar');
 
     $edit_button = $this->getSession()->getPage()->find('css', '#toolbar-bar div.contextual-toolbar-tab button');
 
@@ -155,4 +175,5 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
     $this->waitForOffCanvasToOpen();
     $this->assertOffCanvasBlockFormIsValid();
   }
+
 }

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

@@ -36,8 +36,7 @@ abstract class OutsideInJavascriptTestBase extends JavascriptTestBase {
    * Waits for Off-canvas tray to close.
    */
   protected function waitForOffCanvasToClose() {
-    $condition = "(jQuery('#drupal-offcanvas').length == 0)";
-    $this->assertJsCondition($condition);
+    $this->waitForNoElement('#drupal-offcanvas');
   }
 
   /**
@@ -46,9 +45,9 @@ abstract class OutsideInJavascriptTestBase extends JavascriptTestBase {
    * @param string $selector
    *   CSS selector.
    * @param int $timeout
-   *   (optional) Timeout in milliseconds, defaults to 1000.
+   *   (optional) Timeout in milliseconds, defaults to 10000.
    */
-  protected function waitForElement($selector, $timeout = 1000) {
+  protected function waitForElement($selector, $timeout = 10000) {
     $condition = "(jQuery('$selector').length > 0)";
     $this->assertJsCondition($condition, $timeout);
   }
@@ -64,4 +63,17 @@ abstract class OutsideInJavascriptTestBase extends JavascriptTestBase {
     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 10000.
+   */
+  protected function waitForNoElement($selector, $timeout = 10000) {
+    $condition = "(jQuery('$selector').length == 0)";
+    $this->assertJsCondition($condition, $timeout);
+  }
+
 }