diff --git a/core/modules/outside_in/css/off-canvas.base.css b/core/modules/outside_in/css/off-canvas.base.css
index 4263886b24..4483ff9392 100644
--- a/core/modules/outside_in/css/off-canvas.base.css
+++ b/core/modules/outside_in/css/off-canvas.base.css
@@ -7,7 +7,7 @@
 #drupal-off-canvas *,
 #drupal-off-canvas *:not(div) {
   background: #444;
-  font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
   color: #ddd;
 }
 
@@ -15,7 +15,7 @@
 #drupal-off-canvas a,
 #drupal-off-canvas .link {
   border-bottom: none;
-  font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
   font-size: inherit;
   font-weight: normal;
   color: #85bef4;
@@ -200,7 +200,7 @@
   content: ']';
 }
 
-/* Override jquery UI */
+/* Override jQuery UI */
 #drupal-off-canvas .ui-widget-content a {
   color: #85bef4 !important;
 }
diff --git a/core/modules/outside_in/css/off-canvas.button.css b/core/modules/outside_in/css/off-canvas.button.css
index 4f7987aa7c..1e757bbf49 100644
--- a/core/modules/outside_in/css/off-canvas.button.css
+++ b/core/modules/outside_in/css/off-canvas.button.css
@@ -12,7 +12,7 @@
   padding: 0;
   border: 0;
   box-shadow: none;
-  font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
   line-height: normal;
   text-transform: none;
   text-decoration: none;
@@ -85,7 +85,7 @@
 }
 #drupal-off-canvas .no-touchevents .button--small {
   font-size: 13px;
-  padding: 2px 1em;  /* 1 */
+  padding: 2px 1em;
 }
 #drupal-off-canvas .button:disabled,
 #drupal-off-canvas .button:disabled:active,
diff --git a/core/modules/outside_in/css/off-canvas.details.css b/core/modules/outside_in/css/off-canvas.details.css
index dcac6a5b04..ac7100f009 100644
--- a/core/modules/outside_in/css/off-canvas.details.css
+++ b/core/modules/outside_in/css/off-canvas.details.css
@@ -6,7 +6,7 @@
 #drupal-off-canvas details,
 #drupal-off-canvas summary {
   display: block;
-  font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
 }
 #drupal-off-canvas details,
 #drupal-off-canvas summary,
diff --git a/core/modules/outside_in/css/off-canvas.form.css b/core/modules/outside_in/css/off-canvas.form.css
index 8e95b78c6d..349f405323 100644
--- a/core/modules/outside_in/css/off-canvas.form.css
+++ b/core/modules/outside_in/css/off-canvas.form.css
@@ -4,7 +4,7 @@
  */
 
 #drupal-off-canvas form {
-  font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
   color: #ddd;
 }
 #drupal-off-canvas input[type="checkbox"] {
@@ -19,7 +19,7 @@
 }
 #drupal-off-canvas option {
   display: block;
-  font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
 }
 #drupal-off-canvas label {
   line-height: normal;
diff --git a/core/modules/outside_in/css/off-canvas.motion.css b/core/modules/outside_in/css/off-canvas.motion.css
index e8df8dbbd2..ae261870bc 100644
--- a/core/modules/outside_in/css/off-canvas.motion.css
+++ b/core/modules/outside_in/css/off-canvas.motion.css
@@ -11,7 +11,5 @@
  */
 
 .dialog-off-canvas__main-canvas {
-  -webkit-transition: all .7s ease;
-  -moz-transition: all .7s ease;
   transition: all .7s ease;
 }
diff --git a/core/modules/outside_in/css/off-canvas.reset.css b/core/modules/outside_in/css/off-canvas.reset.css
index cd87eda9c9..573d8c7c27 100644
--- a/core/modules/outside_in/css/off-canvas.reset.css
+++ b/core/modules/outside_in/css/off-canvas.reset.css
@@ -167,8 +167,7 @@
 #drupal-off-canvas table tbody tr:nth-child(odd),
 #drupal-off-canvas table tfoot {
   border: 0;
-  background: none;
-  background-color: transparent;
+  background: transparent none;
 }
 #drupal-off-canvas th,
 #drupal-off-canvas td,
@@ -325,6 +324,9 @@
 #drupal-off-canvas select[disabled] optgroup,
 #drupal-off-canvas textarea[disabled] {
   box-shadow: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
   cursor: default;
 }
@@ -358,8 +360,7 @@
 }
 #drupal-off-canvas * button {
   background: none;
-  border: 1px solid;
-  border-color: grey;
+  border: 1px solid grey;
   color: black;
   padding: 0;
   text-decoration: none;
@@ -372,14 +373,14 @@
 #drupal-off-canvas *:not(div) textarea,
 #drupal-off-canvas *:not(div) select {
   background: white;
-  border: 1px solid;
-  border-color: grey;
+  border: 1px solid grey;
   color: black;
   padding: 0;
   vertical-align: top;
 }
 
-/* Bootstrap and other frameworks add color to selection. */
+/* To standardize off-canvas selection color. */
+#drupal-off-canvas ::-moz-selection,
 #drupal-off-canvas ::selection {
   background-color: rgba(175,175,175,0.5);
   color: inherit;
diff --git a/core/modules/outside_in/css/off-canvas.table.css b/core/modules/outside_in/css/off-canvas.table.css
index 3a6e749757..d71e5dbdf3 100644
--- a/core/modules/outside_in/css/off-canvas.table.css
+++ b/core/modules/outside_in/css/off-canvas.table.css
@@ -4,7 +4,7 @@
  */
 
 #drupal-off-canvas table * {
-  font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
 }
 #drupal-off-canvas table {
   display: table;
@@ -72,7 +72,7 @@
   padding: 6px 8px;
   color: #ddd;
 }
-/* Hide overflow with elipsis for links. */
+/* Hide overflow with ellipsis for links. */
 #drupal-off-canvas td a {
   display: block;
   overflow: hidden;
diff --git a/core/modules/outside_in/css/off-canvas.tabledrag.css b/core/modules/outside_in/css/off-canvas.tabledrag.css
index 4f6f9bee5e..20f97954da 100644
--- a/core/modules/outside_in/css/off-canvas.tabledrag.css
+++ b/core/modules/outside_in/css/off-canvas.tabledrag.css
@@ -38,6 +38,7 @@
 }
 #drupal-off-canvas a.tabledrag-handle .handle {
   /* Use lighter drag icon against dark background. */
+  background-color: transparent;
   background-image: url(../../../misc/icons/bebebe/move.svg);
   background-repeat: no-repeat;
   background-position: center;
@@ -45,7 +46,6 @@
   margin: 0;
   padding: 0;
   width: auto;
-  background-color: transparent;
 }
 #drupal-off-canvas .draggable a.tabledrag-handle:hover .handle,
 #drupal-off-canvas .draggable a.tabledrag-handle:focus .handle {
diff --git a/core/modules/outside_in/css/off-canvas.theme.css b/core/modules/outside_in/css/off-canvas.theme.css
index 47bdcfbbcf..a2c5f616c2 100644
--- a/core/modules/outside_in/css/off-canvas.theme.css
+++ b/core/modules/outside_in/css/off-canvas.theme.css
@@ -20,7 +20,7 @@
   font-weight: normal;
   color: #fff;
 }
-/* Hide the default Jquery UI dialog close button. */
+/* Hide the default jQuery UI dialog close button. */
 .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close .ui-icon {
   visibility: hidden;
 }
@@ -32,7 +32,6 @@
   border: 0;
   position: absolute;
   right: 1em;
-  -moz-transition: all .5s ease;
   transition: background .5s ease;
 }
 .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover {
@@ -50,7 +49,7 @@
   /* Ensure that long titles do not overlap the close button. */
   max-width: 210px;
   font-size: 16px;
-  font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
   text-align: left; /* LTR */
 }
 [dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
@@ -75,7 +74,7 @@
   right: 1em;
 }
 
-/* Override default styling from jquery UI. */
+/* Override default styling from jQuery UI. */
 #drupal-off-canvas .ui-state-default,
 #drupal-off-canvas .ui-widget-content .ui-state-default,
 #drupal-off-canvas .ui-widget-header .ui-state-default {
@@ -85,5 +84,5 @@
   color: #333;
 }
 #drupal-off-canvas .ui-widget-content a {
-  color: #85bef4/*{fcContent}*/;
+  color: #85bef4;
 }
diff --git a/core/modules/outside_in/css/outside_in.motion.css b/core/modules/outside_in/css/outside_in.motion.css
index 4bdd236321..d327369137 100644
--- a/core/modules/outside_in/css/outside_in.motion.css
+++ b/core/modules/outside_in/css/outside_in.motion.css
@@ -8,8 +8,6 @@
 
 /* Transition the edit icon in the toolbar. */
 #toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
-  -webkit-transition: all .7s ease;
-  -moz-transition: all .7s ease;
   transition: all .7s ease;
 }
 
@@ -17,7 +15,5 @@
 .dialog-off-canvas__main-canvas .contextual,
 .dialog-off-canvas__main-canvas .js-outside-in-edit-mode .outside-in-editable,
 .dialog-off-canvas__main-canvas.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;
 }
diff --git a/core/modules/outside_in/css/outside_in.theme.css b/core/modules/outside_in/css/outside_in.theme.css
index 567db216e3..d52f035cc8 100644
--- a/core/modules/outside_in/css/outside_in.theme.css
+++ b/core/modules/outside_in/css/outside_in.theme.css
@@ -9,6 +9,7 @@
 
 /* Style the edit mode toolbar and tabs. */
 #toolbar-bar.js-outside-in-edit-mode {
+  background-image: -webkit-gradient(linear,left top, left bottom,from(#0c97ed),to(#1f86c7));
   background-image: linear-gradient(to bottom,#0c97ed,#1f86c7);
 }
 .js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
@@ -23,6 +24,7 @@
 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
   background-color: #50a0e9;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#007bc6), to(#0071b8));
   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
   color: #ddd;
   text-shadow: none;
@@ -32,12 +34,14 @@
 /* Make the hover of the inactive state the same as the active state. */
 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item:hover,
 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#0c97ed), to(#1f86c7));
   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
   color: #fff;
 }
 /* Make the hover of the active state the same as the inactive state. */
 .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
   background-color: #2369a6;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#007bc6), to(#0071b8));
   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
   color: #fff;
 }
diff --git a/core/modules/outside_in/css/outside_in.toolbar.css b/core/modules/outside_in/css/outside_in.toolbar.css
index a199841b0f..8f17da9034 100644
--- a/core/modules/outside_in/css/outside_in.toolbar.css
+++ b/core/modules/outside_in/css/outside_in.toolbar.css
@@ -21,7 +21,7 @@
 /* Style both the edit and editing states of the contextual links toggle tab. */
 .toolbar-icon-edit.toolbar-item {
   background-color: #50a0e9;
-  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#007bc6), to(#0071b8));
   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
   color: #eee;
   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
@@ -30,7 +30,7 @@
 }
 .toolbar-icon-edit.toolbar-item.is-active {
   background-color: #50a0e9;
-  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#007bc6), to(#0071b8));
   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
   color: #eee;
   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
@@ -40,7 +40,7 @@
 .toolbar-tab:hover > .toolbar-icon-edit,
 .toolbar-icon-edit:focus .toolbar-item {
   background-color: #2369a6;
-  background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#0c97ed), to(#1f86c7));
   background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
   border-color: #1e5c90;
   color: #fff;
@@ -66,5 +66,6 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus {
   color: #fff;
 }
 #toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#0094f0), to(#0e69be));
   background-image: linear-gradient(to bottom, #0094f0, #0e69be);
 }
diff --git a/core/modules/outside_in/js/off-canvas.es6.js b/core/modules/outside_in/js/off-canvas.es6.js
index 480561a7c6..056e397992 100644
--- a/core/modules/outside_in/js/off-canvas.es6.js
+++ b/core/modules/outside_in/js/off-canvas.es6.js
@@ -10,8 +10,10 @@
  */
 
 (function ($, Drupal, debounce, displace) {
-  // The minimum width to use body displace needs to match the width at which
-  // the tray will be %100 width. @see outside_in.module.css
+  /**
+   * The minimum width to use body displace needs to match the width at which
+   * the off-canvas dialog will be 100% width. @see outside_in.module.css
+   */
   const minDisplaceWidth = 768;
 
   /**
@@ -69,13 +71,12 @@
 
     const $offsets = $widget.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
     let offset = 0;
-    let modalHeight;
+    const modalHeight = $widget.height();
 
     // Let scroll element take all the height available.
     $element.css({ height: 'auto' });
-    modalHeight = $widget.height();
-    $offsets.each(function () {
-      offset += $(this).outerHeight();
+    $offsets.each((index, element) => {
+      offset += $(element).outerHeight();
     });
 
     // Take internal padding into account.
@@ -116,7 +117,7 @@
   Drupal.behaviors.offCanvasEvents = {
     attach() {
       $(window).once('off-canvas').on({
-        'dialog:aftercreate': function (event, dialog, $element, settings) {
+        'dialog:aftercreate': (event, dialog, $element, settings) => {
           if ($element.is('#drupal-off-canvas')) {
             const eventData = { settings, $element };
             $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
@@ -134,7 +135,7 @@
               .trigger('resize.off-canvas');
           }
         },
-        'dialog:beforecreate': function (event, dialog, $element, settings) {
+        'dialog:beforecreate': (event, dialog, $element, settings) => {
           if ($element.is('#drupal-off-canvas')) {
             $('body').addClass('js-tray-open');
             // @see http://api.jqueryui.com/position/
@@ -149,7 +150,7 @@
             settings.height = $(window).height();
           }
         },
-        'dialog:beforeclose': function (event, dialog, $element) {
+        'dialog:beforeclose': (event, dialog, $element) => {
           if ($element.is('#drupal-off-canvas')) {
             $('body').removeClass('js-tray-open');
             // Remove all *.off-canvas events
diff --git a/core/modules/outside_in/js/off-canvas.js b/core/modules/outside_in/js/off-canvas.js
index 85a9e53675..270c2f1ed5 100644
--- a/core/modules/outside_in/js/off-canvas.js
+++ b/core/modules/outside_in/js/off-canvas.js
@@ -42,12 +42,11 @@
 
     var $offsets = $widget.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
     var offset = 0;
-    var modalHeight = void 0;
+    var modalHeight = $widget.height();
 
     $element.css({ height: 'auto' });
-    modalHeight = $widget.height();
-    $offsets.each(function () {
-      offset += $(this).outerHeight();
+    $offsets.each(function (index, element) {
+      offset += $(element).outerHeight();
     });
 
     var scrollOffset = $element.outerHeight() - $element.height();
diff --git a/core/modules/outside_in/js/outside_in.es6.js b/core/modules/outside_in/js/outside_in.es6.js
index dc5d885272..8d710510d4 100644
--- a/core/modules/outside_in/js/outside_in.es6.js
+++ b/core/modules/outside_in/js/outside_in.es6.js
@@ -13,73 +13,6 @@
   const quickEditItemSelector = '[data-quickedit-entity-id]';
 
   /**
-   * Reacts to contextual links being added.
-   *
-   * @param {jQuery.Event} event
-   *   The `drupalContextualLinkAdded` event.
-   * @param {object} data
-   *   An object containing the data relevant to the event.
-   *
-   * @listens event:drupalContextualLinkAdded
-   */
-  $(document).on('drupalContextualLinkAdded', (event, data) => {
-    // Bind Ajax behaviors to all items showing the class.
-    // @todo Fix contextual links to work with use-ajax links in
-    //    https://www.drupal.org/node/2764931.
-    Drupal.attachBehaviors(data.$el[0]);
-
-    // Bind a listener to all 'Quick edit' links for blocks
-    // Click "Edit" button in toolbar to force Contextual Edit which starts
-    // Settings Tray edit mode also.
-    data.$el.find(blockConfigureSelector)
-      .on('click.outsidein', () => {
-        if (!isInEditMode()) {
-          $(toggleEditSelector).trigger('click').trigger('click.outside_in');
-        }
-        // Always disable QuickEdit regardless of whether "EditMode" was just enabled.
-        disableQuickEdit();
-      });
-  });
-
-  $(document).on('keyup.outsidein', (e) => {
-    if (isInEditMode() && e.keyCode === 27) {
-      Drupal.announce(
-        Drupal.t('Exited edit mode.'),
-      );
-      toggleEditMode();
-    }
-  });
-
-  /**
-   * Gets all items that should be toggled with class during edit mode.
-   *
-   * @return {jQuery}
-   *   Items that should be toggled.
-   */
-  function getItemsToToggle() {
-    return $(itemsToToggleSelector).not(contextualItemsSelector);
-  }
-
-  /**
-   * Helper to check the state of the outside-in mode.
-   *
-   * @todo don't use a class for this.
-   *
-   * @return {boolean}
-   *  State of the outside-in edit mode.
-   */
-  function isInEditMode() {
-    return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
-  }
-
-  /**
-   * Helper to toggle Edit mode.
-   */
-  function toggleEditMode() {
-    setEditModeState(!isInEditMode());
-  }
-
-  /**
    * Prevent default click events except contextual links.
    *
    * In edit mode the default action of click events is suppressed.
@@ -117,6 +50,16 @@
   }
 
   /**
+   * Gets all items that should be toggled with class during edit mode.
+   *
+   * @return {jQuery}
+   *   Items that should be toggled.
+   */
+  function getItemsToToggle() {
+    return $(itemsToToggleSelector).not(contextualItemsSelector);
+  }
+
+  /**
    *  Helper to switch edit mode state.
    *
    * @param {boolean} editMode
@@ -154,7 +97,10 @@
         $(quickEditItemSelector)
           .not(contextualItemsSelector)
           .on('click.outsidein', (e) => {
-            // For all non-contextual links or the contextual QuickEdit link close the off-canvas dialog.
+            /**
+             * For all non-contextual links or the contextual QuickEdit link
+             * close the off-canvas dialog.
+             */
             if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
               closeOffCanvas();
             }
@@ -184,6 +130,69 @@
   }
 
   /**
+   * Helper to check the state of the outside-in mode.
+   *
+   * @todo don't use a class for this.
+   *
+   * @return {boolean}
+   *  State of the outside-in edit mode.
+   */
+  function isInEditMode() {
+    return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
+  }
+
+  /**
+   * Helper to toggle Edit mode.
+   */
+  function toggleEditMode() {
+    setEditModeState(!isInEditMode());
+  }
+
+  /**
+   * Reacts to contextual links being added.
+   *
+   * @param {jQuery.Event} event
+   *   The `drupalContextualLinkAdded` event.
+   * @param {object} data
+   *   An object containing the data relevant to the event.
+   *
+   * @listens event:drupalContextualLinkAdded
+   */
+  $(document).on('drupalContextualLinkAdded', (event, data) => {
+    /**
+     * Bind Ajax behaviors to all items showing the class.
+     * @todo Fix contextual links to work with use-ajax links in
+     * https://www.drupal.org/node/2764931.
+     */
+    Drupal.attachBehaviors(data.$el[0]);
+    /**
+     * Bind a listener to all 'Quick edit' links for blocks. Click "Edit" button
+     * in toolbar to force Contextual Edit which starts Settings Tray edit
+     * mode also.
+     */
+    data.$el.find(blockConfigureSelector)
+      .on('click.outsidein', () => {
+        if (!isInEditMode()) {
+          $(toggleEditSelector).trigger('click').trigger('click.outside_in');
+        }
+        /**
+         * Always disable QuickEdit regardless of whether "EditMode" was just
+         * enabled.
+         */
+        disableQuickEdit();
+      });
+  });
+
+  $(document).on('keyup.outsidein', (e) => {
+    if (isInEditMode() && e.keyCode === 27) {
+      Drupal.announce(
+        Drupal.t('Exited edit mode.'),
+      );
+      toggleEditMode();
+    }
+  });
+
+  /**
    * Attaches contextual's edit toolbar tab behavior.
    *
    * @type {Drupal~behavior}
@@ -231,7 +240,7 @@
 
   // Manage Active editable class on opening and closing of the dialog.
   $(window).on({
-    'dialog:beforecreate': function (event, dialog, $element, settings) {
+    'dialog:beforecreate': (event, dialog, $element, settings) => {
       if ($element.is('#drupal-off-canvas')) {
         $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
         const $activeElement = $(`#${settings.outsideInActiveEditableId}`);
@@ -240,7 +249,7 @@
         }
       }
     },
-    'dialog:beforeclose': function (event, dialog, $element) {
+    'dialog:beforeclose': (event, dialog, $element) => {
       if ($element.is('#drupal-off-canvas')) {
         $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
       }
diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js
index b97d959918..2fee436c02 100644
--- a/core/modules/outside_in/js/outside_in.js
+++ b/core/modules/outside_in/js/outside_in.js
@@ -12,37 +12,6 @@
   var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
   var quickEditItemSelector = '[data-quickedit-entity-id]';
 
-  $(document).on('drupalContextualLinkAdded', function (event, data) {
-    Drupal.attachBehaviors(data.$el[0]);
-
-    data.$el.find(blockConfigureSelector).on('click.outsidein', function () {
-      if (!isInEditMode()) {
-        $(toggleEditSelector).trigger('click').trigger('click.outside_in');
-      }
-
-      disableQuickEdit();
-    });
-  });
-
-  $(document).on('keyup.outsidein', function (e) {
-    if (isInEditMode() && e.keyCode === 27) {
-      Drupal.announce(Drupal.t('Exited edit mode.'));
-      toggleEditMode();
-    }
-  });
-
-  function getItemsToToggle() {
-    return $(itemsToToggleSelector).not(contextualItemsSelector);
-  }
-
-  function isInEditMode() {
-    return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
-  }
-
-  function toggleEditMode() {
-    setEditModeState(!isInEditMode());
-  }
-
   function preventClick(event) {
     if ($(event.target).closest('.contextual-links').length) {
       return;
@@ -62,6 +31,10 @@
     $('.ui-dialog-off-canvas .ui-dialog-titlebar-close').trigger('click');
   }
 
+  function getItemsToToggle() {
+    return $(itemsToToggleSelector).not(contextualItemsSelector);
+  }
+
   function setEditModeState(editMode) {
     if (!document.querySelector('[data-off-canvas-main-canvas]')) {
       throw new Error('data-off-canvas-main-canvas is missing from outside-in-page-wrapper.html.twig');
@@ -112,6 +85,33 @@
     $('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
   }
 
+  function isInEditMode() {
+    return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
+  }
+
+  function toggleEditMode() {
+    setEditModeState(!isInEditMode());
+  }
+
+  $(document).on('drupalContextualLinkAdded', function (event, data) {
+    Drupal.attachBehaviors(data.$el[0]);
+
+    data.$el.find(blockConfigureSelector).on('click.outsidein', function () {
+      if (!isInEditMode()) {
+        $(toggleEditSelector).trigger('click').trigger('click.outside_in');
+      }
+
+      disableQuickEdit();
+    });
+  });
+
+  $(document).on('keyup.outsidein', function (e) {
+    if (isInEditMode() && e.keyCode === 27) {
+      Drupal.announce(Drupal.t('Exited edit mode.'));
+      toggleEditMode();
+    }
+  });
+
   Drupal.behaviors.outsideInEdit = {
     attach: function attach() {
       var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';