diff --git a/core/modules/outside_in/js/off-canvas.es6.js b/core/modules/outside_in/js/off-canvas.es6.js
index 50fabecbb3..5b734a6ec7 100644
--- a/core/modules/outside_in/js/off-canvas.es6.js
+++ b/core/modules/outside_in/js/off-canvas.es6.js
@@ -7,10 +7,7 @@
  *  https://www.drupal.org/node/2784443
  */
 
-(function ($, Drupal, debounce, displace) {
-
-  'use strict';
-
+(($, Drupal, debounce, displace) => {
   /**
    * Resets the size of the dialog.
    *
@@ -18,28 +15,28 @@
    *   The event triggered.
    */
   function resetSize(event) {
-    var offCanvasDialog = event.data.offCanvasDialog;
-    var offsets = displace.offsets;
-    var $element = event.data.$element;
-    var container = offCanvasDialog.getContainer($element);
+    const offsets = displace.offsets;
+    const $element = event.data.$element;
+    const container = Drupal.offCanvas.getContainer($element);
 
-    var adjustedOptions = {
+    const topPosition = (offsets.top !== 0 ? `+${offsets.top}` : '');
+    const adjustedOptions = {
       // @see http://api.jqueryui.com/position/
       position: {
-        my: offCanvasDialog.getEdge() + ' top',
-        at: offCanvasDialog.getEdge() + ' top' + (offsets.top !== 0 ? '+' + offsets.top : ''),
-        of: window
-      }
+        my: `${Drupal.offCanvas.getEdge()} top`,
+        at: `${Drupal.offCanvas.getEdge()} top${topPosition}`,
+        of: window,
+      },
     };
 
     container.css({
       position: 'fixed',
-      height: ($(window).height() - (offsets.top + offsets.bottom)) + 'px'
+      height: `${$(window).height() - (offsets.top + offsets.bottom)}px`,
     });
 
     $element
-        .dialog('option', adjustedOptions)
-        .trigger('dialogContentResize.off-canvas');
+      .dialog('option', adjustedOptions)
+      .trigger('dialogContentResize.off-canvas');
   }
 
   /**
@@ -49,21 +46,22 @@
    *   The event triggered.
    */
   function handleDialogResize(event) {
-    var $element = event.data.$element;
-    var offCanvasDialog = event.data.offCanvasDialog;
-    var $container = offCanvasDialog.getContainer($element);
+    const $element = event.data.$element;
+    const $container = Drupal.offCanvas.getContainer($element);
 
-    var $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
-    var offset = 0;
-    var modalHeight;
+    const $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
+    let offset = 0;
 
     // Let scroll element take all the height available.
-    $element.css({height: 'auto'});
-    modalHeight = $container.height();
-    $offsets.each(function () { offset += $(this).outerHeight(); });
+    $element.css({ height: 'auto' });
+    const modalHeight = $container.height();
+
+    $offsets.each(($offset) => {
+      offset += $($offset).outerHeight();
+    });
 
     // Take internal padding into account.
-    var scrollOffset = $element.outerHeight() - $element.height();
+    const scrollOffset = $element.outerHeight() - $element.height();
     $element.height(modalHeight - offset - scrollOffset);
   }
 
@@ -74,19 +72,18 @@
    *   The event triggered.
    */
   function bodyPadding(event) {
-    var offCanvasDialog = event.data.offCanvasDialog;
-    if ($('body').outerWidth() < offCanvasDialog.minDisplaceWidth) {
+    if ($('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
       return;
     }
-    var $element = event.data.$element;
-    var $container = offCanvasDialog.getContainer($element);
-    var $mainCanvasWrapper = offCanvasDialog.$mainCanvasWrapper;
+    const $element = event.data.$element;
+    const $container = Drupal.offCanvas.getContainer($element);
+    const $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
 
-    var width = $container.outerWidth();
-    var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + offCanvasDialog.getEdge());
+    const width = $container.outerWidth();
+    const mainCanvasPadding = $mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`);
     if (width !== mainCanvasPadding) {
-      $mainCanvasWrapper.css('padding-' + offCanvasDialog.getEdge(), width + 'px');
-      $container.attr('data-offset-' + offCanvasDialog.getEdge(), width);
+      $mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, `${width}px`);
+      $container.attr(`data-offset-${Drupal.offCanvas.getEdge()}`, width);
       displace();
     }
   }
@@ -110,81 +107,76 @@
      * Determines if a
      * @return {bool}
      */
-    isOffCanvas: function (dialog, $element, settings) {
+    isOffCanvas(dialog, $element, settings) {
       return $element.is('#drupal-off-canvas');
     },
-    open: function (event, dialog, $element, settings) {
+    open(event, dialog, $element, settings) {
       $('body').addClass('js-tray-open');
       settings.dialogClass += ' ui-dialog-off-canvas';
       // @see http://api.jqueryui.com/position/
       settings.position = {
         my: 'left top',
-        at: this.getEdge() + ' top',
-        of: window
+        at: `${Drupal.offCanvas.getEdge()} top`,
+        of: window,
       };
       // Applies initial height to dialog based on window height.
       // See http://api.jqueryui.com/dialog for all dialog options.
       settings.height = $(window).height();
     },
-    close: function (event, dialog, $element) {
+    close: (event, dialog, $element) => {
       $('body').removeClass('js-tray-open');
       // Remove all *.off-canvas events
       $(document).off('.off-canvas');
       $(window).off('.off-canvas');
-      this.$mainCanvasWrapper.css('padding-' + this.getEdge(), 0);
+      Drupal.offCanvas.$mainCanvasWrapper.css(`padding-${Drupal.offCanvas.getEdge()}`, 0);
     },
-    render: function (event, dialog, $element, settings) {
-      var eventData = {settings: settings, $element: $element, offCanvasDialog: this};
+    render: (event, dialog, $element, settings) => {
+      const eventData = { settings, $element, offCanvasDialog: this };
       $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
 
       $element
-          .on('dialogresize.off-canvas', eventData, debounce(this.bodyPadding, 100))
-          .on('dialogContentResize.off-canvas', eventData, this.handleDialogResize)
-          .on('dialogContentResize.off-canvas', eventData, debounce(this.bodyPadding, 100))
+          .on('dialogresize.off-canvas', eventData, debounce(Drupal.offCanvas.bodyPadding, 100))
+          .on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.handleDialogResize)
+          .on('dialogContentResize.off-canvas', eventData, debounce(Drupal.offCanvas.bodyPadding, 100))
           .trigger('dialogresize.off-canvas');
 
-      this.getContainer($element).attr('data-offset-' + this.getEdge(), '');
+      Drupal.offCanvas.getContainer($element).attr(`data-offset-${Drupal.offCanvas.getEdge()}`, '');
 
       $(window)
-          .on('resize.off-canvas scroll.off-canvas', eventData, debounce(this.resetSize, 100))
-          .trigger('resize.off-canvas');
-    },
-    handleDialogResize: handleDialogResize,
-    resetSize: resetSize,
-    bodyPadding: bodyPadding,
-    getContainer: function ($element) {
-      return $element.dialog('widget');
+        .on('resize.off-canvas scroll.off-canvas', eventData, debounce(Drupal.offCanvas.resetSize, 100))
+        .trigger('resize.off-canvas');
     },
+    handleDialogResize,
+    resetSize,
+    bodyPadding,
+    getContainer: $element => ($element.dialog('widget')),
     /**
      * The edge of the screen that the dialog should appear on.
      *
      * @return {string}
      */
-    getEdge: function () {
-      return document.documentElement.dir === 'rtl' ? 'left' : 'right';
-    }
+    getEdge: () => (document.documentElement.dir === 'rtl' ? 'left' : 'right'),
   };
 
   Drupal.behaviors.offCanvasEvents = {
-    attach: function () {
+    attach: () => {
       $(window).once('off-canvas').on({
-        'dialog:beforecreate': function (event, dialog, $element, settings) {
+        'dialog:beforecreate': (event, dialog, $element, settings) => {
           if (Drupal.offCanvas.isOffCanvas(dialog, $element, settings)) {
-            Drupal.offCanvas.open(event, dialog, $element, settings)
+            Drupal.offCanvas.open(event, dialog, $element, settings);
           }
         },
-        'dialog:aftercreate': function (event, dialog, $element, settings) {
+        'dialog:aftercreate': (event, dialog, $element, settings) => {
           if (Drupal.offCanvas.isOffCanvas(dialog, $element, settings)) {
             Drupal.offCanvas.render(event, dialog, $element, settings);
           }
         },
-        'dialog:beforeclose': function (event, dialog, $element) {
+        'dialog:beforeclose': (event, dialog, $element) => {
           if (Drupal.offCanvas.isOffCanvas(dialog, $element)) {
-            Drupal.offCanvas.close(event, dialog, $element)
+            Drupal.offCanvas.close(event, dialog, $element);
           }
-        }
+        },
       });
-    }
+    },
   };
-
 })(jQuery, Drupal, Drupal.debounce, Drupal.displace);
diff --git a/core/modules/outside_in/js/off-canvas.js b/core/modules/outside_in/js/off-canvas.js
index d442b9c806..cedf2654df 100644
--- a/core/modules/outside_in/js/off-canvas.js
+++ b/core/modules/outside_in/js/off-canvas.js
@@ -4,21 +4,19 @@
 * https://www.drupal.org/node/2815083
 * @preserve
 **/
+var _this = this;
 
 (function ($, Drupal, debounce, displace) {
-
-  'use strict';
-
   function resetSize(event) {
-    var offCanvasDialog = event.data.offCanvasDialog;
     var offsets = displace.offsets;
     var $element = event.data.$element;
-    var container = offCanvasDialog.getContainer($element);
+    var container = Drupal.offCanvas.getContainer($element);
 
+    var topPosition = offsets.top !== 0 ? '+' + offsets.top : '';
     var adjustedOptions = {
       position: {
-        my: offCanvasDialog.getEdge() + ' top',
-        at: offCanvasDialog.getEdge() + ' top' + (offsets.top !== 0 ? '+' + offsets.top : ''),
+        my: Drupal.offCanvas.getEdge() + ' top',
+        at: Drupal.offCanvas.getEdge() + ' top' + topPosition,
         of: window
       }
     };
@@ -33,17 +31,16 @@
 
   function handleDialogResize(event) {
     var $element = event.data.$element;
-    var offCanvasDialog = event.data.offCanvasDialog;
-    var $container = offCanvasDialog.getContainer($element);
+    var $container = Drupal.offCanvas.getContainer($element);
 
     var $offsets = $container.find('> :not(#drupal-off-canvas, .ui-resizable-handle)');
     var offset = 0;
-    var modalHeight;
 
     $element.css({ height: 'auto' });
-    modalHeight = $container.height();
-    $offsets.each(function () {
-      offset += $(this).outerHeight();
+    var modalHeight = $container.height();
+
+    $offsets.each(function ($offset) {
+      offset += $($offset).outerHeight();
     });
 
     var scrollOffset = $element.outerHeight() - $element.height();
@@ -51,19 +48,18 @@
   }
 
   function bodyPadding(event) {
-    var offCanvasDialog = event.data.offCanvasDialog;
-    if ($('body').outerWidth() < offCanvasDialog.minDisplaceWidth) {
+    if ($('body').outerWidth() < Drupal.offCanvas.minDisplaceWidth) {
       return;
     }
     var $element = event.data.$element;
-    var $container = offCanvasDialog.getContainer($element);
-    var $mainCanvasWrapper = offCanvasDialog.$mainCanvasWrapper;
+    var $container = Drupal.offCanvas.getContainer($element);
+    var $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
 
     var width = $container.outerWidth();
-    var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + offCanvasDialog.getEdge());
+    var mainCanvasPadding = $mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge());
     if (width !== mainCanvasPadding) {
-      $mainCanvasWrapper.css('padding-' + offCanvasDialog.getEdge(), width + 'px');
-      $container.attr('data-offset-' + offCanvasDialog.getEdge(), width);
+      $mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), width + 'px');
+      $container.attr('data-offset-' + Drupal.offCanvas.getEdge(), width);
       displace();
     }
   }
@@ -72,7 +68,6 @@
     minDisplaceWidth: 768,
 
     $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
-
     isOffCanvas: function isOffCanvas(dialog, $element, settings) {
       return $element.is('#drupal-off-canvas');
     },
@@ -82,28 +77,29 @@
 
       settings.position = {
         my: 'left top',
-        at: this.getEdge() + ' top',
+        at: Drupal.offCanvas.getEdge() + ' top',
         of: window
       };
 
       settings.height = $(window).height();
     },
+
     close: function close(event, dialog, $element) {
       $('body').removeClass('js-tray-open');
 
       $(document).off('.off-canvas');
       $(window).off('.off-canvas');
-      this.$mainCanvasWrapper.css('padding-' + this.getEdge(), 0);
+      Drupal.offCanvas.$mainCanvasWrapper.css('padding-' + Drupal.offCanvas.getEdge(), 0);
     },
     render: function render(event, dialog, $element, settings) {
-      var eventData = { settings: settings, $element: $element, offCanvasDialog: this };
+      var eventData = { settings: settings, $element: $element, offCanvasDialog: _this };
       $('.ui-dialog-off-canvas, .ui-dialog-off-canvas .ui-dialog-titlebar').toggleClass('ui-dialog-empty-title', !settings.title);
 
-      $element.on('dialogresize.off-canvas', eventData, debounce(this.bodyPadding, 100)).on('dialogContentResize.off-canvas', eventData, this.handleDialogResize).on('dialogContentResize.off-canvas', eventData, debounce(this.bodyPadding, 100)).trigger('dialogresize.off-canvas');
+      $element.on('dialogresize.off-canvas', eventData, debounce(Drupal.offCanvas.bodyPadding, 100)).on('dialogContentResize.off-canvas', eventData, Drupal.offCanvas.handleDialogResize).on('dialogContentResize.off-canvas', eventData, debounce(Drupal.offCanvas.bodyPadding, 100)).trigger('dialogresize.off-canvas');
 
-      this.getContainer($element).attr('data-offset-' + this.getEdge(), '');
+      Drupal.offCanvas.getContainer($element).attr('data-offset-' + Drupal.offCanvas.getEdge(), '');
 
-      $(window).on('resize.off-canvas scroll.off-canvas', eventData, debounce(this.resetSize, 100)).trigger('resize.off-canvas');
+      $(window).on('resize.off-canvas scroll.off-canvas', eventData, debounce(Drupal.offCanvas.resetSize, 100)).trigger('resize.off-canvas');
     },
     handleDialogResize: handleDialogResize,
     resetSize: resetSize,