diff --git a/core/modules/outside_in/css/off-canvas.base.css b/core/modules/outside_in/css/off-canvas.base.css
index 4263886b24..aaa713dbbe 100644
--- a/core/modules/outside_in/css/off-canvas.base.css
+++ b/core/modules/outside_in/css/off-canvas.base.css
@@ -1,4 +1,4 @@
-/*
+/**
  * @file
  * Set base styles for the settings tray.
  */
@@ -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..2b734f8a81 100644
--- a/core/modules/outside_in/css/off-canvas.button.css
+++ b/core/modules/outside_in/css/off-canvas.button.css
@@ -1,4 +1,5 @@
 /**
+ * @file
  * Visual styling for buttons in the off canvas tray.
  *
  * See seven/css/components/buttons.css
@@ -85,7 +86,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.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..24d2b4c026 100644
--- a/core/modules/outside_in/css/off-canvas.table.css
+++ b/core/modules/outside_in/css/off-canvas.table.css
@@ -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..0493e3ce44 100644
--- a/core/modules/outside_in/css/off-canvas.theme.css
+++ b/core/modules/outside_in/css/off-canvas.theme.css
@@ -1,3 +1,8 @@
+/**
+ * @file
+ * Styling for the off-canvas ui dialog. Including overrides for jQuery UI.
+ */
+
 /* Style the dialog-off-canvas container. */
 .ui-dialog.ui-dialog-off-canvas {
   background: #444;
@@ -20,7 +25,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 +37,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 {
@@ -75,7 +79,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 +89,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.toolbar.css b/core/modules/outside_in/css/outside_in.toolbar.css
index a199841b0f..e09fb008f9 100644
--- a/core/modules/outside_in/css/outside_in.toolbar.css
+++ b/core/modules/outside_in/css/outside_in.toolbar.css
@@ -21,7 +21,6 @@
 /* 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: linear-gradient(to bottom, #007bc6, #0071b8);
   color: #eee;
   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
@@ -30,7 +29,6 @@
 }
 .toolbar-icon-edit.toolbar-item.is-active {
   background-color: #50a0e9;
-  background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
   color: #eee;
   text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
@@ -40,7 +38,6 @@
 .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: linear-gradient(to bottom, #0c97ed, #1f86c7);
   border-color: #1e5c90;
   color: #fff;
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..53b911437e 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,10 +50,20 @@
   }
 
   /**
-   *  Helper to switch edit mode state.
+   * 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
-   *  True enable edit mode, false disable edit mode.
+   *   True enable edit mode, false disable edit mode.
    */
   function setEditModeState(editMode) {
     if (!document.querySelector('[data-off-canvas-main-canvas]')) {
@@ -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';