diff --git a/core/composer.json b/core/composer.json
index 0d103002c7..2d56b1d3b2 100644
--- a/core/composer.json
+++ b/core/composer.json
@@ -122,7 +122,7 @@
         "drupal/migrate_drupal_ui": "self.version",
         "drupal/node": "self.version",
         "drupal/options": "self.version",
-        "drupal/outside_in": "self.version",
+        "drupal/settings_tray": "self.version",
         "drupal/page_cache": "self.version",
         "drupal/path": "self.version",
         "drupal/quickedit": "self.version",
diff --git a/core/modules/outside_in/css/outside_in.form.css b/core/modules/outside_in/css/outside_in.form.css
deleted file mode 100644
index 5d4c3be820..0000000000
--- a/core/modules/outside_in/css/outside_in.form.css
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * @file
- * Visual styling for forms in the Settings Tray module's off canvas tray.
- */
-
-.ui-dialog-outside-in label {
-  line-height: normal;
-  font-size: 12px;
-  font-weight: normal;
-  color: #ddd;
-}
-.ui-dialog-outside-in .description,
-.ui-dialog-outside-in .form-item .description,
-.ui-dialog-outside-in .details-description {
-  color: #ddd;
-  margin-top: 5px;
-  font-size: 12px;
-  font-style: normal;
-}
-.ui-dialog-outside-in .details-wrapper .description {
-  color: #bbb;
-}
-.ui-dialog-outside-in .form-item {
-  margin-bottom: 10px;
-  margin-top: 10px;
-}
-/* Set size and position for all inputs. */
-.ui-dialog-outside-in .form-select,
-.ui-dialog-outside-in .form-text,
-.ui-dialog-outside-in .form-tel,
-.ui-dialog-outside-in .form-email,
-.ui-dialog-outside-in .form-url,
-.ui-dialog-outside-in .form-search,
-.ui-dialog-outside-in .form-number,
-.ui-dialog-outside-in .form-color,
-.ui-dialog-outside-in .form-file,
-.ui-dialog-outside-in .form-textarea,
-.ui-dialog-outside-in .form-date,
-.ui-dialog-outside-in .form-time {
-  box-sizing: border-box;
-  max-width: 100%;
-  padding: 6px;
-  margin-top: 5px;
-  margin-right: 0;
-  margin-bottom: 0;
-  margin-left: 0;
-  border-width: 1px;
-  border-radius: 2px;
-  outline: 0;
-  display: block;
-  font-size: 14px;
-  line-height: 16px;
-  cursor: pointer;
-}
-/* Reduce contrast for fields against dark backround. */
-.ui-dialog-outside-in .form-text,
-.ui-dialog-outside-in .form-tel,
-.ui-dialog-outside-in .form-email,
-.ui-dialog-outside-in .form-url,
-.ui-dialog-outside-in .form-search,
-.ui-dialog-outside-in .form-number,
-.ui-dialog-outside-in .form-color,
-.ui-dialog-outside-in .form-file,
-.ui-dialog-outside-in .form-textarea,
-.ui-dialog-outside-in .form-date,
-.ui-dialog-outside-in .form-time {
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
-  background-color: #eee;
-  border-color: #333;
-  color: #595959;
-}
-.ui-dialog-outside-in .form-text:focus,
-.ui-dialog-outside-in .form-tel:focus,
-.ui-dialog-outside-in .form-email:focus,
-.ui-dialog-outside-in .form-url:focus,
-.ui-dialog-outside-in .form-search:focus,
-.ui-dialog-outside-in .form-number:focus,
-.ui-dialog-outside-in .form-color:focus,
-.ui-dialog-outside-in .form-file:focus,
-.ui-dialog-outside-in .form-textarea:focus,
-.ui-dialog-outside-in .form-date:focus,
-.ui-dialog-outside-in .form-time:focus {
-  border-color: #40b6ff;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125), 0 0 8px #40b6ff;
-  background-color: #fff;
-}
-.ui-dialog-outside-in input[type="checkbox"],
-.ui-dialog-outside-in .checkbox,
-.ui-dialog-outside-in input[type="radio"],
-.ui-dialog-outside-in .radio {
-  position: static;
-  margin: 0;
-}
-.ui-dialog-outside-in td .checkbox {
-  display: table-cell;
-  line-height: normal;
-  vertical-align: middle;
-}
-.ui-dialog-outside-in .form-checkbox,
-.ui-dialog-outside-in .form-radio {
-  /* Add contrast for dark background. */
-  box-shadow: 0 0 2px 1px #000;
-}
-.ui-dialog-outside-in input[type="radio"] {
-  /* Add full circular radius. */
-  border-radius: 50%;
-}
-.ui-dialog-outside-in .form-actions {
-  text-align: center;
-}
diff --git a/core/modules/outside_in/tests/modules/outside_in_test_css/css/css_fix.theme.css b/core/modules/outside_in/tests/modules/outside_in_test_css/css/css_fix.theme.css
deleted file mode 100644
index dc9d72ad20..0000000000
--- a/core/modules/outside_in/tests/modules/outside_in_test_css/css/css_fix.theme.css
+++ /dev/null
@@ -1,4 +0,0 @@
-#main-canvas.js-outside-in-edit-mode a,
-#main-canvas.js-outside-in-edit-mode input {
-  pointer-events: inherit !important;
-}
diff --git a/core/modules/settings_tray/css/off-canvas.base.css b/core/modules/settings_tray/css/off-canvas.base.css
new file mode 100644
index 0000000000..a8bea702ef
--- /dev/null
+++ b/core/modules/settings_tray/css/off-canvas.base.css
@@ -0,0 +1,239 @@
+/*
+ * @file
+ * Set base styles for the settings tray.
+ *
+ */
+
+/* Set some global attributes. */
+#drupal-off-canvas *,
+#drupal-off-canvas *:not(div) {
+  background: #444;
+  font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
+  color: #ddd;
+}
+
+/* Generic elements. */
+#drupal-off-canvas a,
+#drupal-off-canvas .link {
+  border-bottom: none;
+  font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
+  font-size: inherit;
+  font-weight: normal;
+  color: #85bef4;
+  text-decoration: none;
+  transition: color .5s ease;
+}
+
+#drupal-off-canvas a:focus,
+#drupal-off-canvas .link:focus,
+#drupal-off-canvas a:hover,
+#drupal-off-canvas .link:hover {
+  outline: none;
+  color: #46a0f5;
+}
+#drupal-off-canvas hr {
+  height: 1px;
+  background: #cccccc;
+}
+#drupal-off-canvas summary,
+#drupal-off-canvas .fieldgroup:not(.form-composite) > legend {
+  font-weight: bold;
+}
+#drupal-off-canvas h1,
+#drupal-off-canvas .heading-a {
+  display: block;
+  font-weight: bold;
+  font-size: 1.625em;
+  line-height: 1.875em;
+}
+#drupal-off-canvas h2,
+#drupal-off-canvas .heading-b {
+  display: block;
+  font-weight: bold;
+  margin: 10px 0;
+  font-size: 1.385em;
+}
+#drupal-off-canvas h3,
+#drupal-off-canvas .heading-c {
+  display: block;
+  font-weight: bold;
+  margin: 10px 0;
+  font-size: 1.231em;
+}
+#drupal-off-canvas h4,
+#drupal-off-canvas .heading-d {
+  display: block;
+  font-weight: bold;
+  margin: 10px 0;
+  font-size: 1.154em;
+}
+#drupal-off-canvas h5,
+#drupal-off-canvas .heading-e {
+  display: block;
+  font-weight: bold;
+  margin: 10px 0;
+  font-size: 1.077em;
+}
+#drupal-off-canvas h6,
+#drupal-off-canvas .heading-f {
+  display: block;
+  font-weight: bold;
+  margin: 10px 0;
+  font-size: 1.077em;
+}
+#drupal-off-canvas p {
+  margin: 1em 0;
+}
+#drupal-off-canvas dl {
+  margin: 0 0 20px;
+}
+#drupal-off-canvas dl dd,
+#drupal-off-canvas dl dl {
+  margin-left: 20px; /* LTR */
+  margin-bottom: 10px;
+}
+[dir="rtl"] #drupal-off-canvas dl dd,
+[dir="rtl"] #drupal-off-canvas dl dl {
+  margin-right: 20px;
+}
+#drupal-off-canvas blockquote {
+  margin: 1em 40px;
+}
+#drupal-off-canvas address {
+  font-style: italic;
+}
+#drupal-off-canvas u,
+#drupal-off-canvas ins {
+  text-decoration: underline;
+}
+#drupal-off-canvas s,
+#drupal-off-canvas strike,
+#drupal-off-canvas del {
+  text-decoration: line-through;
+}
+#drupal-off-canvas big {
+  font-size: larger;
+}
+#drupal-off-canvas small {
+  font-size: smaller;
+}
+#drupal-off-canvas sub {
+  vertical-align: sub;
+  font-size: smaller;
+  line-height: normal;
+}
+#drupal-off-canvas sup {
+  vertical-align: super;
+  font-size: smaller;
+  line-height: normal;
+}
+#drupal-off-canvas nobr {
+  white-space: nowrap;
+}
+#drupal-off-canvas abbr,
+#drupal-off-canvas acronym {
+  border-bottom: dotted 1px;
+  background: transparent;
+}
+
+#drupal-off-canvas ul {
+  list-style-type: disc;
+  list-style-image: none;
+}
+[dir="rtl"] #drupal-off-canvas .messages__list {
+  margin-right: 0;
+}
+#drupal-off-canvas ol {
+  list-style-type: decimal;
+}
+#drupal-off-canvas ul li,
+#drupal-off-canvas ol li {
+  display: block;
+}
+#drupal-off-canvas quote,
+#drupal-off-canvas code {
+  margin: 20px 0;
+}
+#drupal-off-canvas pre {
+  margin: 20px 0;
+  white-space: pre-wrap;
+}
+
+/* Classes for hidden and visually hidden elements. See hidden.module.css. */
+#drupal-off-canvas .hidden {
+  display: none;
+}
+#drupal-off-canvas .visually-hidden {
+  position: absolute !important;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  height: 1px;
+  width: 1px;
+  word-wrap: normal;
+}
+#drupal-off-canvas .visually-hidden.focusable:active,
+#drupal-off-canvas .visually-hidden.focusable:focus {
+  position: static !important;
+  clip: auto;
+  overflow: visible;
+  height: auto;
+  width: auto;
+}
+#drupal-off-canvas .invisible {
+  visibility: hidden;
+}
+
+/* Some system classes. See system.admin.css. */
+#drupal-off-canvas .panel {
+  padding: 5px 5px 15px;
+}
+#drupal-off-canvas .panel__description {
+  margin: 0 0 3px;
+  padding: 2px 0 3px 0;
+}
+#drupal-off-canvas .compact-link {
+  margin: 0 0 10px 0;
+}
+#drupal-off-canvas small .admin-link:before {
+  content: ' [';
+}
+#drupal-off-canvas small .admin-link:after {
+  content: ']';
+}
+
+/* Override jquery UI */
+#drupal-off-canvas .ui-widget-content a {
+  color: #85bef4 !important;
+}
+
+/* Message styles */
+#drupal-off-canvas .messages {
+  background: no-repeat 10px 17px;
+}
+[dir="rtl"] #drupal-off-canvas .messages {
+  background-position: right 10px top 17px;
+}
+#drupal-off-canvas .messages abbr {
+  color: #444;
+}
+#drupal-off-canvas .messages--status {
+  background-color: #f3faef;
+  background-image: url(../../../misc/icons/73b355/check.svg);
+  color: #325e1c;
+}
+#drupal-off-canvas .messages--warning {
+  background-color: #fdf8ed;
+  background-image: url(../../../misc/icons/e29700/warning.svg);
+  color: #734c00;
+}
+
+#drupal-off-canvas .messages--error {
+  background-color: #fcf4f2;
+  background-image: url(../../../misc/icons/e32700/error.svg);
+  color: #a51b00;
+}
+
+#drupal-off-canvas .messages--error div[role="alert"] {
+  background: transparent;
+  color: inherit;
+}
diff --git a/core/modules/settings_tray/css/off-canvas.button.css b/core/modules/settings_tray/css/off-canvas.button.css
new file mode 100644
index 0000000000..09b3337ccb
--- /dev/null
+++ b/core/modules/settings_tray/css/off-canvas.button.css
@@ -0,0 +1,117 @@
+/**
+ * Visual styling for buttons in the off canvas tray.
+ *
+ * See seven/css/components/buttons.css
+ */
+
+#drupal-off-canvas button,
+#drupal-off-canvas .button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  margin: 0 0 10px;
+  padding: 0;
+  border: 0;
+  box-shadow: none;
+  font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
+  line-height: normal;
+  text-transform: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+#drupal-off-canvas button.link {
+  display: inline;
+  background: transparent;
+  font-size: 14px;
+  color: #85bef4;
+  transition: color .5s ease;
+}
+#drupal-off-canvas button.link:hover,
+#drupal-off-canvas button.link:focus {
+  color: #46a0f5;
+  text-decoration: none;
+}
+#drupal-off-canvas input[type="submit"].button {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  height: auto;
+  padding: 4px 20px;
+  border: 0;
+  border-radius: 20em;
+  background: #777;
+  font-weight: 600;
+  font-size: 14px;
+  color: #f5f5f5;
+  text-align: center;
+  cursor: pointer;
+  transition: background .5s ease;
+}
+#drupal-off-canvas input[type="submit"].button:hover,
+#drupal-off-canvas input[type="submit"].button:focus,
+#drupal-off-canvas input[type="submit"].button:active {
+  border: 0;
+  color: #fff;
+  text-decoration: none;
+  outline: none;
+  z-index: 10;
+}
+#drupal-off-canvas input[type="submit"].button:focus,
+#drupal-off-canvas input[type="submit"].button:active {
+  box-shadow: 0 3px 3px 2px rgba(0,0,0,0.1);
+}
+#drupal-off-canvas input[type="submit"].button--primary {
+  border: 0;
+  background: #277abd;
+  color: #fff;
+  margin-top: 15px;
+}
+#drupal-off-canvas input[type="submit"].button--primary:hover,
+#drupal-off-canvas input[type="submit"].button--primary:focus,
+#drupal-off-canvas input[type="submit"].button--primary:active {
+  background: #2b8bd8;
+  outline: none;
+}
+#drupal-off-canvas .button-action:before {
+  margin-left: -0.2em; /* LTR */
+  padding-right: 0.2em; /* LTR */
+  font-size: 14px;
+  line-height: 16px;
+}
+[dir="rtl"] #drupal-off-canvas .button-action:before {
+  margin-right: -0.2em;
+  margin-left: 0;
+  padding-right: 0;
+  padding-left: 0.2em;
+}
+#drupal-off-canvas .no-touchevents .button--small {
+  font-size: 13px;
+  padding: 2px 1em;  /* 1 */
+}
+#drupal-off-canvas .button:disabled,
+#drupal-off-canvas .button:disabled:active,
+#drupal-off-canvas .button.is-disabled,
+#drupal-off-canvas .button.is-disabled:active {
+  border: 0;
+  background: #555;
+  color: #5c5c5c;
+  font-weight: normal;
+  cursor: default;
+}
+#drupal-off-canvas .button--danger {
+  border-radius: 0;
+  color: #c72100;
+  font-weight: 400;
+  text-decoration: none;
+}
+#drupal-off-canvas .button--danger:hover,
+#drupal-off-canvas .button--danger:focus,
+#drupal-off-canvas .button--danger:active {
+  color: #ff2a00;
+  text-decoration: none;
+  text-shadow: none;
+}
+#drupal-off-canvas .button--danger:disabled,
+#drupal-off-canvas .button--danger.is-disabled {
+  color: #737373;
+  cursor: default;
+}
diff --git a/core/modules/outside_in/css/off-canvas.css b/core/modules/settings_tray/css/off-canvas.css
similarity index 100%
rename from core/modules/outside_in/css/off-canvas.css
rename to core/modules/settings_tray/css/off-canvas.css
diff --git a/core/modules/settings_tray/css/off-canvas.details.css b/core/modules/settings_tray/css/off-canvas.details.css
new file mode 100644
index 0000000000..5e549a811d
--- /dev/null
+++ b/core/modules/settings_tray/css/off-canvas.details.css
@@ -0,0 +1,61 @@
+/**
+ * @file
+ * Visual styling for summary and details in the Settings Tray module's off canvas tray.
+ */
+
+#drupal-off-canvas details,
+#drupal-off-canvas summary {
+  display: block;
+  font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
+}
+#drupal-off-canvas details,
+#drupal-off-canvas summary,
+#drupal-off-canvas .ui-dialog-content {
+  background: #474747;
+  color: #ddd;
+}
+#drupal-off-canvas summary a {
+  color: #ddd;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+#drupal-off-canvas summary a:hover,
+#drupal-off-canvas summary a:focus {
+  color: #fff;
+}
+#drupal-off-canvas details,
+#drupal-off-canvas summary,
+#drupal-off-canvas .details-wrapper {
+  border-width: 0;
+  /* Cancel out the padding of the parent. */
+  margin: 0 -20px;
+  padding: 0 20px;
+}
+#drupal-off-canvas summary {
+  text-shadow: none;
+  padding: 10px 20px;
+  font-size: 14px;
+  transition: all .5s ease;
+}
+#drupal-off-canvas summary:hover,
+#drupal-off-canvas summary:focus {
+  background-color: #222;
+  outline: none;
+}
+#drupal-off-canvas details[open] {
+  padding-bottom: 10px;
+}
+#drupal-off-canvas details[open] > summary {
+  background-color: #333;
+  color: #eee;
+}
+#drupal-off-canvas details[open] > summary:hover {
+  background-color: #222;
+  color: #fff;
+}
+#drupal-off-canvas details .placeholder {
+  font: inherit;
+  color: inherit;
+  font-style: italic;
+  background: transparent;
+}
\ No newline at end of file
diff --git a/core/modules/settings_tray/css/off-canvas.dropbutton.css b/core/modules/settings_tray/css/off-canvas.dropbutton.css
new file mode 100644
index 0000000000..e467a4f341
--- /dev/null
+++ b/core/modules/settings_tray/css/off-canvas.dropbutton.css
@@ -0,0 +1,291 @@
+/**
+ * @file
+ * Styles for dropbuttons in the off-canvas tray.
+ */
+
+#drupal-off-canvas .dropbutton-wrapper,
+#drupal-off-canvas .dropbutton-widget {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: block;
+  position: static;
+  transition: none;
+}
+#drupal-off-canvas .dropbutton-widget {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: #277abd;
+  border-radius: 1em;
+  font-weight: 600;
+  color: #fff;
+  text-transform: none;
+  text-decoration: none;
+  text-align: center;
+  line-height: normal;
+  cursor: pointer;
+  transition: background .5s ease;
+}
+#drupal-off-canvas .dropbutton-widget:hover {
+  background: #2b8bd8;
+}
+
+/*
+ * Style dropbutton single.
+ */
+
+#drupal-off-canvas .dropbutton-single .dropbutton-action a {
+  padding: 0;
+  /* Overlap icon for trigger. */
+  margin-top: -2em;
+  height: 2.2em;
+  cursor: pointer;
+}
+#drupal-off-canvas .dropbutton-single .dropbutton-action:hover,
+#drupal-off-canvas .dropbutton-single .dropbutton-action:focus,
+#drupal-off-canvas .dropbutton-single .dropbutton-action a:hover,
+#drupal-off-canvas .dropbutton-single .dropbutton-action a:focus {
+  text-decoration: none;
+  outline: none;
+}
+#drupal-off-canvas .dropbutton-widget .dropbutton {
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+}
+#drupal-off-canvas .dropbutton li,
+#drupal-off-canvas .dropbutton a {
+  display: block;
+  width: auto;
+  padding: 4px 0;
+  text-align: left;
+  color: #555;
+  outline: none;
+}
+#drupal-off-canvas .dropbutton li:hover,
+#drupal-off-canvas .dropbutton li:focus,
+#drupal-off-canvas .dropbutton a:hover,
+#drupal-off-canvas .dropbutton a:focus {
+  background: transparent;
+  color: #333;
+  outline: none;
+}
+
+/*
+ * Style dropbutton multiple.
+ */
+
+#drupal-off-canvas .dropbutton-multiple .dropbutton-widget {
+  width: 2em;
+  height: 2em;
+}
+#drupal-off-canvas .dropbutton-multiple .dropbutton-widget:hover {
+  background-color: #2b8bd8;
+}
+
+/* Hide the other actions until the dropbutton is triggered. */
+#drupal-off-canvas .dropbutton-multiple .dropbutton .secondary-action {
+  display: none;
+}
+
+/* The toggle to expand the button. */
+#drupal-off-canvas .dropbutton-toggle {
+  position: absolute;
+  top: 0;
+  right: 0; /* LTR */
+  bottom: 0;
+  display: block;
+  width: 2em;
+  color: #fff;
+  text-indent: 110%;
+  white-space: nowrap;
+}
+#drupal-off-canvas .dropbutton-toggle button {
+  display: block;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0 solid transparent;
+  border-bottom-right-radius: 1em; /* LTR */
+  border-top-right-radius: 1em; /* LTR */
+  cursor: pointer;
+}
+#drupal-off-canvas .dropbutton-toggle button:hover,
+#drupal-off-canvas .dropbutton-toggle button:focus {
+  outline: none;
+}
+
+/* The toggle arrow. */
+#drupal-off-canvas .dropbutton-arrow {
+  position: absolute;
+  display: block;
+  height: 0;
+  width: 0;
+  margin-top: 0;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-style: solid;
+  border-width: 0.3333em 0.3333em 0;
+  color: #fff;
+  line-height: 0;
+  overflow: hidden;
+}
+#drupal-off-canvas span.dropbutton-arrow {
+  top: 7px;
+  right: 7px; /* LTR */
+  background: transparent;
+}
+#drupal-off-canvas span.dropbutton-arrow:hover {
+  background: transparent;
+}
+
+#drupal-off-canvas .dropbutton-action > .js-form-submit.form-submit,
+#drupal-off-canvas .dropbutton-toggle button {
+  position: relative;
+  text-shadow: none;
+}
+
+/*
+ * Dropbuttons when in a table cell.
+ */
+
+/* Make sure table cell doesn't collapse around absolute positioned dropbutton. */
+#drupal-off-canvas td .dropbutton-single {
+  min-width: 2em;
+}
+#drupal-off-canvas td .dropbutton-multiple {
+  min-width: 2em;
+  padding-right: 0;
+  padding-left: 0;
+  margin-right: 0;
+  margin-left: 0;
+  border: 0;
+}
+#drupal-off-canvas td .dropbutton-multiple .dropbutton-action a,
+#drupal-off-canvas td .dropbutton-multiple .dropbutton-action input,
+#drupal-off-canvas td .dropbutton-multiple .dropbutton-action button {
+  width: auto;
+  padding: 0;
+  font-size: inherit;
+}
+#drupal-off-canvas td .dropbutton-wrapper {
+  margin-bottom: 0;
+}
+
+/* Push the widget to the right so text expands left. */
+#drupal-off-canvas td .dropbutton-widget {
+  position: absolute;
+  right: 12px; /* LTR */
+  padding: 0;
+  background: #277abd none;
+}
+
+/* Push the wrapper to the right edge of the td. */
+#drupal-off-canvas td .dropbutton-single,
+#drupal-off-canvas td .dropbutton-multiple {
+  float: right; /* LTR */
+  padding-right: 0;
+  margin-right: 0;
+  max-width: initial;
+  min-width: initial;
+  position: relative;
+}
+#drupal-off-canvas td .dropbutton-widget .dropbutton {
+  margin: 0;
+  width: 2em;
+  height: 2em;
+  overflow: hidden;
+  background: transparent;
+}
+
+/* Push text out of the way. */
+#drupal-off-canvas td .dropbutton-multiple li,
+#drupal-off-canvas td .dropbutton-multiple a {
+  margin-left: -9999px;
+  background: transparent;
+}
+#drupal-off-canvas td .dropbutton-multiple.open .dropbutton li,
+#drupal-off-canvas td .dropbutton-multiple.open .dropbutton a {
+  margin-left: 0;
+  width: auto;
+  color: #fff;
+}
+
+/* Collapse the button to a circle. */
+#drupal-off-canvas td .dropbutton-toggle {
+  width: 2em;
+  height: 2em;
+  border-radius: 1em;
+}
+#drupal-off-canvas td .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
+  border: 0;
+  background: transparent;
+}
+
+/* Prevent list item from expanding it's container. */
+#drupal-off-canvas td ul.dropbutton li.edit {
+  width: 2em;
+  height: 2em;
+}
+
+/* Make li text transparent above icon so it's clickable. */
+#drupal-off-canvas td .dropbutton-single li.edit.dropbutton-action > a {
+  color: transparent;
+  z-index: 1;
+}
+
+/* Put pencil icon in place of hidden 'edit' text on single buttons. */
+#drupal-off-canvas td .dropbutton-single .edit:before {
+  content: '.';
+  display: block;
+  color: transparent;
+  background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat center;
+  background-size: 14px;
+}
+
+/* Dropbutton when triggered expands to show secondary items. */
+#drupal-off-canvas .dropbutton-multiple.open {
+  z-index: 100;
+}
+
+/* Create visual separation if there is an adjacent button. */
+#drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
+  box-shadow: 0 3px 3px 2px rgba(0,0,0,0.5);
+}
+
+/* Triggered dropbutton expands to show secondary items. */
+#drupal-off-canvas .dropbutton-multiple.open,
+#drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: none;
+  min-width: 0;
+  padding: 0;
+  overflow: visible;
+}
+
+/* Triggered dropbutton in td expands to show secondary items. */
+#drupal-off-canvas td .dropbutton-multiple.open .dropbutton,
+#drupal-off-canvas .dropbutton-multiple.open .dropbutton .secondary-action {
+  display: block;
+  width: auto;
+  height: auto;
+  padding-right: 1em; /* LTR */
+}
+[dir="rtl"] #drupal-off-canvas td .dropbutton-multiple.open .dropbutton {
+  padding-left: 1em;
+  padding-right: inherit;
+}
+#drupal-off-canvas .dropbutton-multiple.open .dropbutton li a {
+  padding: 2px 1em;
+}
+
+/* When open, the toggle arrow points upward. */
+#drupal-off-canvas .dropbutton-multiple.open span.dropbutton-arrow {
+  border-bottom: 0.3333em solid;
+  border-top-color: transparent;
+  top: 2px;
+}
diff --git a/core/modules/settings_tray/css/off-canvas.form.css b/core/modules/settings_tray/css/off-canvas.form.css
new file mode 100644
index 0000000000..ea8509c305
--- /dev/null
+++ b/core/modules/settings_tray/css/off-canvas.form.css
@@ -0,0 +1,137 @@
+/**
+ * @file
+ * Visual styling for forms in the Settings Tray module's off canvas tray.
+ */
+
+#drupal-off-canvas form {
+  font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
+  color: #ddd;
+}
+#drupal-off-canvas input[type="checkbox"] {
+  -webkit-appearance: checkbox;
+}
+#drupal-off-canvas input[type="radio"] {
+  -webkit-appearance: radio;
+}
+#drupal-off-canvas select {
+  -webkit-appearance: menulist;
+  -moz-appearance: menulist;
+}
+#drupal-off-canvas option {
+  display: block;
+  font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
+}
+#drupal-off-canvas label {
+  line-height: normal;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: bold;
+  color: #ddd;
+}
+#drupal-off-canvas .visually-hidden {
+  opacity: 0;
+  height: 0;
+  width: 0;
+  letter-spacing: -2em;
+}
+#drupal-off-canvas .description,
+#drupal-off-canvas .form-item .description,
+#drupal-off-canvas .details-description {
+  color: #ddd;
+  margin-top: 5px;
+  font-family: inherit;
+  font-size: 12px;
+  font-style: normal;
+}
+#drupal-off-canvas .details-wrapper .description {
+  color: #bbb;
+}
+#drupal-off-canvas .form-item {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+/* Set size and position for all inputs. */
+#drupal-off-canvas .form-select,
+#drupal-off-canvas .form-text,
+#drupal-off-canvas .form-tel,
+#drupal-off-canvas .form-email,
+#drupal-off-canvas .form-url,
+#drupal-off-canvas .form-search,
+#drupal-off-canvas .form-number,
+#drupal-off-canvas .form-color,
+#drupal-off-canvas .form-file,
+#drupal-off-canvas .form-textarea,
+#drupal-off-canvas .form-date,
+#drupal-off-canvas .form-time {
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 6px;
+  margin: 5px 0 0 0;
+  border-width: 1px;
+  border-radius: 2px;
+  display: block;
+  font-family: inherit;
+  font-size: 14px;
+  color: #333;
+  line-height: 16px;
+  cursor: pointer;
+}
+/* Reduce contrast for fields against dark background. */
+#drupal-off-canvas .form-text,
+#drupal-off-canvas .form-tel,
+#drupal-off-canvas .form-email,
+#drupal-off-canvas .form-url,
+#drupal-off-canvas .form-search,
+#drupal-off-canvas .form-number,
+#drupal-off-canvas .form-color,
+#drupal-off-canvas .form-file,
+#drupal-off-canvas .form-textarea,
+#drupal-off-canvas .form-date,
+#drupal-off-canvas .form-time {
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
+  background-color: #eee;
+  border-color: #333;
+  color: #595959;
+}
+#drupal-off-canvas .form-text:focus,
+#drupal-off-canvas .form-tel:focus,
+#drupal-off-canvas .form-email:focus,
+#drupal-off-canvas .form-url:focus,
+#drupal-off-canvas .form-search:focus,
+#drupal-off-canvas .form-number:focus,
+#drupal-off-canvas .form-color:focus,
+#drupal-off-canvas .form-file:focus,
+#drupal-off-canvas .form-textarea:focus,
+#drupal-off-canvas .form-date:focus,
+#drupal-off-canvas .form-time:focus {
+  border-color: #40b6ff;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125), 0 0 8px #40b6ff;
+  background-color: #fff;
+}
+#drupal-off-canvas td .form-item,
+#drupal-off-canvas td .form-select {
+  margin: 0;
+}
+#drupal-off-canvas .form-file {
+  margin-bottom: 5px;
+  width: 100%;
+}
+#drupal-off-canvas .form-actions {
+  text-align: center;
+  margin: 10px 0;
+}
+#drupal-off-canvas .ui-autocomplete {
+  background-color: white;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: default;
+}
+#drupal-off-canvas .ui-autocomplete li {
+  display: block;
+}
+#drupal-off-canvas .ui-autocomplete li a {
+  color: #595959 !important;
+  cursor: pointer;
+  padding: 5px;
+}
diff --git a/core/modules/outside_in/css/off-canvas.motion.css b/core/modules/settings_tray/css/off-canvas.motion.css
similarity index 100%
rename from core/modules/outside_in/css/off-canvas.motion.css
rename to core/modules/settings_tray/css/off-canvas.motion.css
diff --git a/core/modules/settings_tray/css/off-canvas.reset.css b/core/modules/settings_tray/css/off-canvas.reset.css
new file mode 100644
index 0000000000..0315c83221
--- /dev/null
+++ b/core/modules/settings_tray/css/off-canvas.reset.css
@@ -0,0 +1,382 @@
+/*
+ * @file
+ * Reset input form styles for the settings tray.
+ * This is a generic reset. Drupal-specific classes are reset in components.
+ *
+ */
+
+#drupal-off-canvas *:not(div),
+#drupal-off-canvas *:after,
+#drupal-off-canvas *:before {
+  all: initial;
+  box-sizing: border-box;
+  text-shadow: none;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: initial;
+}
+
+/* Reset size and position on elements. */
+#drupal-off-canvas a,
+#drupal-off-canvas abbr,
+#drupal-off-canvas acronym,
+#drupal-off-canvas address,
+#drupal-off-canvas applet,
+#drupal-off-canvas article,
+#drupal-off-canvas aside,
+#drupal-off-canvas audio,
+#drupal-off-canvas b,
+#drupal-off-canvas big,
+#drupal-off-canvas blockquote,
+#drupal-off-canvas body,
+#drupal-off-canvas canvas,
+#drupal-off-canvas caption,
+#drupal-off-canvas cite,
+#drupal-off-canvas code,
+#drupal-off-canvas dd,
+#drupal-off-canvas del,
+#drupal-off-canvas dfn,
+#drupal-off-canvas dialog,
+#drupal-off-canvas dl,
+#drupal-off-canvas dt,
+#drupal-off-canvas em,
+#drupal-off-canvas embed,
+#drupal-off-canvas fieldset,
+#drupal-off-canvas figcaption,
+#drupal-off-canvas figure,
+#drupal-off-canvas footer,
+#drupal-off-canvas form,
+#drupal-off-canvas h1,
+#drupal-off-canvas h2,
+#drupal-off-canvas h3,
+#drupal-off-canvas h4,
+#drupal-off-canvas h5,
+#drupal-off-canvas h6,
+#drupal-off-canvas header,
+#drupal-off-canvas hgroup,
+#drupal-off-canvas hr,
+#drupal-off-canvas html,
+#drupal-off-canvas i,
+#drupal-off-canvas iframe,
+#drupal-off-canvas img,
+#drupal-off-canvas ins,
+#drupal-off-canvas kbd,
+#drupal-off-canvas label,
+#drupal-off-canvas legend,
+#drupal-off-canvas li,
+#drupal-off-canvas main,
+#drupal-off-canvas mark,
+#drupal-off-canvas menu,
+#drupal-off-canvas meter,
+#drupal-off-canvas nav,
+#drupal-off-canvas object,
+#drupal-off-canvas ol,
+#drupal-off-canvas output,
+#drupal-off-canvas p,
+#drupal-off-canvas pre,
+#drupal-off-canvas progress,
+#drupal-off-canvas q,
+#drupal-off-canvas rp,
+#drupal-off-canvas rt,
+#drupal-off-canvas s,
+#drupal-off-canvas samp,
+#drupal-off-canvas section,
+#drupal-off-canvas small,
+#drupal-off-canvas span,
+#drupal-off-canvas strike,
+#drupal-off-canvas strong,
+#drupal-off-canvas sub,
+#drupal-off-canvas sup,
+#drupal-off-canvas table,
+#drupal-off-canvas tbody,
+#drupal-off-canvas td,
+#drupal-off-canvas tfoot,
+#drupal-off-canvas th,
+#drupal-off-canvas thead,
+#drupal-off-canvas time,
+#drupal-off-canvas tr,
+#drupal-off-canvas tt,
+#drupal-off-canvas u,
+#drupal-off-canvas ul,
+#drupal-off-canvas var,
+#drupal-off-canvas video,
+#drupal-off-canvas xmp {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+}
+
+/*
+ * Override the default (display: inline) for browsers that do not recognize HTML5 tags.
+ * IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
+ */
+#drupal-off-canvas article,
+#drupal-off-canvas aside,
+#drupal-off-canvas figcaption,
+#drupal-off-canvas figure,
+#drupal-off-canvas footer,
+#drupal-off-canvas header,
+#drupal-off-canvas hgroup,
+#drupal-off-canvas main,
+#drupal-off-canvas menu,
+#drupal-off-canvas nav,
+#drupal-off-canvas section {
+  display: block;
+  line-height: normal;
+  border-radius: 0;
+}
+
+/*
+ * Makes browsers agree.
+ * IE + Opera = font-weight: bold.
+ * Gecko + WebKit = font-weight: bolder.
+ */
+#drupal-off-canvas b,
+#drupal-off-canvas strong {
+  font-weight: bold;
+}
+
+#drupal-off-canvas em,
+#drupal-off-canvas i {
+  font-style: italic;
+}
+
+#drupal-off-canvas img {
+  color: transparent;
+  font-size: 0;
+  vertical-align: middle;
+}
+
+#drupal-off-canvas ul,
+#drupal-off-canvas ol {
+  list-style: none;
+}
+
+/* reset table styling. */
+#drupal-off-canvas table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+#drupal-off-canvas table thead,
+#drupal-off-canvas table tbody,
+#drupal-off-canvas table tbody tr:nth-child(even),
+#drupal-off-canvas table tbody tr:nth-child(odd),
+#drupal-off-canvas table tfoot {
+  border: 0;
+  background: none;
+  background-color: transparent;
+}
+#drupal-off-canvas th,
+#drupal-off-canvas td,
+#drupal-off-canvas caption {
+  font-weight: normal;
+}
+#drupal-off-canvas q {
+  quotes: none;
+}
+#drupal-off-canvas q:before,
+#drupal-off-canvas q:after {
+  content: none;
+}
+#drupal-off-canvas sub,
+#drupal-off-canvas sup,
+#drupal-off-canvas small {
+  font-size: 75%;
+}
+#drupal-off-canvas sub,
+#drupal-off-canvas sup {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+#drupal-off-canvas sub {
+  bottom: -0.25em;
+}
+#drupal-off-canvas sup {
+  top: -0.5em;
+}
+
+/*
+ * For IE9. Without, occasionally draws shapes
+ * outside the boundaries of <svg> rectangle.
+ */
+#drupal-off-canvas svg {
+  overflow: hidden;
+}
+
+/* Specific resets for inputs. */
+#drupal-off-canvas input[type="search"]::-webkit-search-decoration {
+  display: none;
+}
+#drupal-off-canvas input {
+  margin: 0;
+  padding: 0;
+}
+#drupal-off-canvas input[type="checkbox"],
+#drupal-off-canvas input[type="radio"] {
+  position: static;
+  margin: 0;
+}
+#drupal-off-canvas input:invalid,
+#drupal-off-canvas button:invalid,
+#drupal-off-canvas select:invalid,
+#drupal-off-canvas textarea:invalid,
+#drupal-off-canvas input:focus,
+#drupal-off-canvas button:focus,
+#drupal-off-canvas select:focus,
+#drupal-off-canvas textarea:focus,
+#drupal-off-canvas input[type="file"]:focus,
+#drupal-off-canvas input[type="file"]:active,
+#drupal-off-canvas input[type="radio"]:focus,
+#drupal-off-canvas input[type="radio"]:active,
+#drupal-off-canvas input[type="checkbox"]:focus,
+#drupal-off-canvas input[type="checkbox"]:active {
+  box-shadow: none;
+  z-index: 1;
+}
+#drupal-off-canvas input[role="button"] {
+  cursor: pointer;
+}
+#drupal-off-canvas button,
+#drupal-off-canvas input[type="reset"],
+#drupal-off-canvas input[type="submit"],
+#drupal-off-canvas input[type="button"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  background-image: none;
+  border: 0;
+  outline: 0;
+  overflow: visible;
+  text-shadow: none;
+  text-decoration: none;
+  vertical-align: middle;
+  cursor: pointer;
+}
+#drupal-off-canvas button:hover,
+#drupal-off-canvas input[type="reset"]:hover,
+#drupal-off-canvas input[type="submit"]:hover,
+#drupal-off-canvas input[type="button"]:hover {
+  background-image: none;
+  text-decoration: none;
+}
+#drupal-off-canvas button:active,
+#drupal-off-canvas input[type="reset"]:active,
+#drupal-off-canvas input[type="submit"]:active,
+#drupal-off-canvas input[type="button"]:active {
+  background-image: none;
+  box-shadow: none;
+  border-color: grey;
+}
+#drupal-off-canvas button::-moz-focus-inner,
+#drupal-off-canvas input[type="reset"]::-moz-focus-inner,
+#drupal-off-canvas input[type="submit"]::-moz-focus-inner,
+#drupal-off-canvas input[type="button"]::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+#drupal-off-canvas textarea,
+#drupal-off-canvas select,
+#drupal-off-canvas input[type="date"],
+#drupal-off-canvas input[type="datetime"],
+#drupal-off-canvas input[type="datetime-local"],
+#drupal-off-canvas input[type="email"],
+#drupal-off-canvas input[type="month"],
+#drupal-off-canvas input[type="number"],
+#drupal-off-canvas input[type="password"],
+#drupal-off-canvas input[type="search"],
+#drupal-off-canvas input[type="tel"],
+#drupal-off-canvas input[type="text"],
+#drupal-off-canvas input[type="time"],
+#drupal-off-canvas input[type="url"],
+#drupal-off-canvas input[type="week"] {
+  height: auto;
+  vertical-align: middle;
+  border-radius: 0;
+}
+#drupal-off-canvas textarea[disabled],
+#drupal-off-canvas select[disabled],
+#drupal-off-canvas input[type="date"][disabled],
+#drupal-off-canvas input[type="datetime"][disabled],
+#drupal-off-canvas input[type="datetime-local"][disabled],
+#drupal-off-canvas input[type="email"][disabled],
+#drupal-off-canvas input[type="month"][disabled],
+#drupal-off-canvas input[type="number"][disabled],
+#drupal-off-canvas input[type="password"][disabled],
+#drupal-off-canvas input[type="search"][disabled],
+#drupal-off-canvas input[type="tel"][disabled],
+#drupal-off-canvas input[type="text"][disabled],
+#drupal-off-canvas input[type="time"][disabled],
+#drupal-off-canvas input[type="url"][disabled],
+#drupal-off-canvas input[type="week"][disabled] {
+  background-color: grey;
+}
+#drupal-off-canvas input[type="hidden"] {
+  visibility: hidden;
+}
+#drupal-off-canvas button[disabled],
+#drupal-off-canvas input[disabled],
+#drupal-off-canvas select[disabled],
+#drupal-off-canvas select[disabled] option,
+#drupal-off-canvas select[disabled] optgroup,
+#drupal-off-canvas textarea[disabled] {
+  box-shadow: none;
+  user-select: none;
+  cursor: default;
+}
+#drupal-off-canvas input:placeholder,
+#drupal-off-canvas textarea:placeholder {
+  color: grey;
+}
+#drupal-off-canvas textarea,
+#drupal-off-canvas select[size],
+#drupal-off-canvas select[multiple] {
+  height: auto;
+}
+#drupal-off-canvas select[size="0"],
+#drupal-off-canvas select[size="1"] {
+  height: auto;
+}
+#drupal-off-canvas textarea {
+  min-height: 40px;
+  overflow: auto;
+  resize: vertical;
+  width: 100%;
+}
+#drupal-off-canvas optgroup {
+  color: black;
+  font-style: normal;
+  font-weight: normal;
+}
+#drupal-off-canvas optgroup::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+#drupal-off-canvas * button {
+  background: none;
+  border: 1px solid;
+  border-color: grey;
+  color: black;
+  padding: 0;
+  text-decoration: none;
+  overflow: visible;
+  vertical-align: middle;
+  width: auto;
+}
+#drupal-off-canvas * textarea,
+#drupal-off-canvas * select,
+#drupal-off-canvas *:not(div) textarea,
+#drupal-off-canvas *:not(div) select {
+  background: white;
+  border: 1px solid;
+  border-color: grey;
+  color: black;
+  padding: 0;
+  vertical-align: top;
+}
+
+/* Bootstrap and other frameworks add color to selection. */
+#drupal-off-canvas ::selection {
+  background-color: rgba(175,175,175,0.5);
+  color: inherit;
+}
diff --git a/core/modules/settings_tray/css/off-canvas.table.css b/core/modules/settings_tray/css/off-canvas.table.css
new file mode 100644
index 0000000000..3dce1f356a
--- /dev/null
+++ b/core/modules/settings_tray/css/off-canvas.table.css
@@ -0,0 +1,96 @@
+/**
+ * @file
+ * Visual styling for tables in the Settings Tray module's off canvas tray.
+ */
+
+#drupal-off-canvas table * {
+  font-family: "Lucida Grande", 'Lucida Sans Unicode','liberation sans', sans-serif;
+}
+#drupal-off-canvas table {
+  display: table;
+  width: 100%;
+  min-width: calc(100% + 40px);
+  /* Cancel out the padding of the parent to make the table full width. */
+  margin: 0 -20px -10px -20px;
+  border: 0;
+  border-collapse: collapse;
+  font-size: 12px;
+  color: #ddd;
+}
+#drupal-off-canvas table thead {
+  display: table-header-group;
+}
+#drupal-off-canvas table tbody {
+  display: table-row-group;
+}
+#drupal-off-canvas tr {
+  display: table-row;
+}
+#drupal-off-canvas tr:hover td {
+  background-color: transparent;
+}
+
+#drupal-off-canvas td,
+#drupal-off-canvas th {
+  display: table-cell;
+  height: auto;
+  width: auto;
+  padding: 2px 8px;
+  vertical-align: middle;
+  border-bottom: 1px solid #777;
+  background-color: transparent;
+}
+[dir="rtl"] #drupal-off-canvas th,
+[dir="rtl"] #drupal-off-canvas td {
+  text-align: right;
+}
+#drupal-off-canvas th {
+  font-weight: bold;
+  color: #bbb;
+}
+#drupal-off-canvas th.checkbox,
+#drupal-off-canvas td.checkbox  {
+  width: 20px;
+  padding: 0;
+  text-align: center;
+}
+#drupal-off-canvas div.checkbox.menu-enabled {
+  position: static;
+  display: inline;
+  width: auto;
+}
+#drupal-off-canvas th:first-child,
+#drupal-off-canvas td:first-child {
+  width: 150px;
+}
+/* For lack of a better class, using this to grab the operations th. */
+#drupal-off-canvas .tabledrag-has-colspan {
+  text-align: right;
+  padding-right: 20px;
+}
+#drupal-off-canvas td {
+  padding: 6px 8px;
+  color: #ddd;
+}
+/* Hide overflow with elipsis for links. */
+#drupal-off-canvas td a {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: transparent;
+}
+#drupal-off-canvas tr td:first-child,
+#drupal-off-canvas tr th:first-child {
+  padding-left: 20px; /* LTR */
+}
+[dir="rtl"] #drupal-off-canvas tr td:first-child,
+[dir="rtl"] #drupal-off-canvas tr th:first-child {
+  padding-right: 20px;
+}
+/*
+#drupal-off-canvas .odd,
+#drupal-off-canvas .even {
+  background-image: none;
+  background-color: transparent;
+}*/
diff --git a/core/modules/settings_tray/css/off-canvas.tabledrag.css b/core/modules/settings_tray/css/off-canvas.tabledrag.css
new file mode 100644
index 0000000000..b43d9aa86e
--- /dev/null
+++ b/core/modules/settings_tray/css/off-canvas.tabledrag.css
@@ -0,0 +1,122 @@
+/**
+ * @file
+ * Table drag behavior for Settings Tray module.
+ *
+ * @see tabledrag.js
+ */
+
+#drupal-off-canvas .drag {
+  cursor: move;
+}
+#drupal-off-canvas tr.region-title {
+  font-weight: normal;
+}
+#drupal-off-canvas table .region-message {
+  color: #fff;
+}
+#drupal-off-canvas table .region-populated {
+  display: none;
+}
+#drupal-off-canvas .add-new .tabledrag-changed {
+  display: none;
+}
+#drupal-off-canvas .draggable a.tabledrag-handle {
+  background-image: none;
+  margin: 0 5px 0 0;
+  height: auto;
+  min-width: 20px;
+  padding: 0;
+  overflow: hidden;
+  float: left; /* LTR */
+  text-decoration: none;
+  cursor: move;
+}
+[dir="rtl"] #drupal-off-canvas .draggable a.tabledrag-handle {
+  float: right;
+  margin-right: 0;
+  margin-left: 5px;
+}
+#drupal-off-canvas a.tabledrag-handle .handle {
+  /* Use lighter drag icon against dark background. */
+  background-image: url(../../../misc/icons/bebebe/move.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  height: auto;
+  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 {
+  background-image: url(../../../misc/icons/787878/move.svg);
+  text-decoration: none;
+}
+#drupal-off-canvas tr td {
+  transition: background .3s ease;
+}
+
+#drupal-off-canvas tr td abbr {
+  margin-left: 5px; /* LTR */
+}
+
+[dir="rtl"] #drupal-off-canvas tr td abbr {
+  margin-left: 0;
+  margin-right: 5px;
+}
+#drupal-off-canvas tr:hover td  {
+  background: #222;
+}
+#drupal-off-canvas tr.drag td {
+  background: #111;
+}
+#drupal-off-canvas tr.drag-previous td {
+  background: #000;
+}
+#drupal-off-canvas tr.drag-previous:hover td {
+  background: #222;
+}
+body div.tabledrag-changed-warning {
+  margin-bottom: 0.5em;
+  font-size: 14px;
+}
+#drupal-off-canvas .touchevents .draggable td {
+  padding: 0 10px;
+}
+#drupal-off-canvas .touchevents .draggable .menu-item__link {
+  display: inline-block;
+  padding: 10px 0;
+}
+#drupal-off-canvas .touchevents a.tabledrag-handle {
+  height: 44px;
+  width: 40px;
+}
+#drupal-off-canvas .touchevents a.tabledrag-handle .handle {
+  background-position: 40% 19px; /* LTR */
+  height: 21px;
+}
+[dir="rtl"] #drupal-off-canvas .touch a.tabledrag-handle .handle {
+  background-position: right 40% top 19px;
+}
+#drupal-off-canvas .touchevents .draggable.drag a.tabledrag-handle .handle {
+  background-position: 50% -32px;
+}
+#drupal-off-canvas .tabledrag-toggle-weight-wrapper {
+  padding-top: 10px;
+  text-align: right; /* LTR */
+}
+[dir="rtl"] #drupal-off-canvas .tabledrag-toggle-weight-wrapper {
+  text-align: left;
+}
+#drupal-off-canvas .indentation {
+  float: left; /* LTR */
+  height: auto;
+  margin: 0 3px 0 -10px; /* LTR */
+  padding: 0 0 0 10px; /* LTR */
+  width: auto;
+}
+[dir="rtl"] #drupal-off-canvas .indentation {
+  float: right;
+  margin: 0 -10px 0 3px;
+  padding: 0 10px 0 0;
+}
diff --git a/core/modules/settings_tray/css/off-canvas.theme.css b/core/modules/settings_tray/css/off-canvas.theme.css
new file mode 100644
index 0000000000..0de024f2c8
--- /dev/null
+++ b/core/modules/settings_tray/css/off-canvas.theme.css
@@ -0,0 +1,89 @@
+/* Style the dialog-off-canvas container. */
+.ui-dialog.ui-dialog-off-canvas {
+  background: #444;
+  border: 0 solid transparent;
+  border-radius: 0;
+  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
+  padding: 0;
+  color: #ddd;
+  /* Layer the dialog just under the toolbar. */
+  z-index: 501;
+}
+
+/* Style the tray header. */
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
+  padding: 1em;
+  background: #2d2d2d;
+  border: 0;
+  border-bottom: 1px solid #000;
+  border-radius: 0;
+  font-weight: normal;
+  color: #fff;
+}
+/* Hide the default Jquery UI dialog close button. */
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close .ui-icon {
+  visibility: hidden;
+}
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
+  background-image: url(../../../misc/icons/bebebe/ex.svg);
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  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 {
+  background-image: url(../../../misc/icons/ffffff/ex.svg);
+}
+[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
+  left: 1em;
+  right: auto;
+}
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
+  margin: 0;
+  /* Push the text away from the icon. */
+  padding-left: 30px; /* LTR */
+  padding-right: 0; /* LTR */
+  /* 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;
+  text-align: left; /* LTR */
+}
+[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
+  float: right;
+  text-align: right;
+  padding-left: 0;
+  padding-right: 30px;
+}
+.ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
+  background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat scroll center center;
+  background-size: 100% auto;
+  content: '';
+  display: block;
+  height: 100%;
+  position: absolute;
+  left: 1em; /* LTR */
+  top: 0;
+  width: 20px;
+}
+[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
+  left: auto;
+  right: 1em;
+}
+
+/* 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 {
+  border: 0;
+  font-weight: normal;
+  font-size: 14px;
+  color: #333;
+}
+#drupal-off-canvas .ui-widget-content a {
+  color: #85bef4/*{fcContent}*/;
+}
diff --git a/core/modules/outside_in/css/outside_in.details.css b/core/modules/settings_tray/css/settings_tray.details.css
similarity index 50%
rename from core/modules/outside_in/css/outside_in.details.css
rename to core/modules/settings_tray/css/settings_tray.details.css
index 8ca1406f09..fc75aeaf19 100644
--- a/core/modules/outside_in/css/outside_in.details.css
+++ b/core/modules/settings_tray/css/settings_tray.details.css
@@ -3,50 +3,50 @@
  * Visual styling for summary and details in the Settings Tray module's off canvas tray.
  */
 
-.ui-dialog-outside-in details,
-.ui-dialog-outside-in summary,
-.ui-dialog-outside-in .ui-dialog-content {
+.ui-dialog-settings-tray details,
+.ui-dialog-settings-tray summary,
+.ui-dialog-settings-tray .ui-dialog-content {
   background: #474747;
   color: #ddd;
 }
-.ui-dialog-outside-in summary a {
+.ui-dialog-settings-tray summary a {
   color: #ddd;
   padding-top: 0;
   padding-bottom: 0;
 }
-.ui-dialog-outside-in summary a:hover,
-.ui-dialog-outside-in summary a:focus {
+.ui-dialog-settings-tray summary a:hover,
+.ui-dialog-settings-tray summary a:focus {
   color: #fff;
 }
-.ui-dialog-outside-in details,
-.ui-dialog-outside-in summary,
-.ui-dialog-outside-in .details-wrapper {
+.ui-dialog-settings-tray details,
+.ui-dialog-settings-tray summary,
+.ui-dialog-settings-tray .details-wrapper {
   border-width: 0;
   /* Cancel out the padding of the parent. */
   margin: 0 -20px;
   padding: 0 20px;
 }
-.ui-dialog-outside-in summary {
+.ui-dialog-settings-tray summary {
   text-shadow: none;
   outline: none;
   padding: 10px 20px;
   font-size: 14px;
   transition: all .5s ease;
 }
-.ui-dialog-outside-in summary:hover,
-.ui-dialog-outside-in summary:focus {
+.ui-dialog-settings-tray summary:hover,
+.ui-dialog-settings-tray summary:focus {
   background-color: #222;
   outline: none;
 }
-.ui-dialog-outside-in details[open] {
+.ui-dialog-settings-tray details[open] {
   background-color: #333;
   padding-bottom: 10px;
 }
-.ui-dialog-outside-in details[open] > summary {
+.ui-dialog-settings-tray details[open] > summary {
   background-color: #333;
   color: #eee;
 }
-.ui-dialog-outside-in details[open] > summary:hover {
+.ui-dialog-settings-tray details[open] > summary:hover {
   background-color: #222;
   color: #fff;
 }
diff --git a/core/modules/settings_tray/css/settings_tray.form.css b/core/modules/settings_tray/css/settings_tray.form.css
new file mode 100644
index 0000000000..ed8110e758
--- /dev/null
+++ b/core/modules/settings_tray/css/settings_tray.form.css
@@ -0,0 +1,110 @@
+/**
+ * @file
+ * Visual styling for forms in the Settings Tray module's off canvas tray.
+ */
+
+.ui-dialog-settings-tray label {
+  line-height: normal;
+  font-size: 12px;
+  font-weight: normal;
+  color: #ddd;
+}
+.ui-dialog-settings-tray .description,
+.ui-dialog-settings-tray .form-item .description,
+.ui-dialog-settings-tray .details-description {
+  color: #ddd;
+  margin-top: 5px;
+  font-size: 12px;
+  font-style: normal;
+}
+.ui-dialog-settings-tray .details-wrapper .description {
+  color: #bbb;
+}
+.ui-dialog-settings-tray .form-item {
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+/* Set size and position for all inputs. */
+.ui-dialog-settings-tray .form-select,
+.ui-dialog-settings-tray .form-text,
+.ui-dialog-settings-tray .form-tel,
+.ui-dialog-settings-tray .form-email,
+.ui-dialog-settings-tray .form-url,
+.ui-dialog-settings-tray .form-search,
+.ui-dialog-settings-tray .form-number,
+.ui-dialog-settings-tray .form-color,
+.ui-dialog-settings-tray .form-file,
+.ui-dialog-settings-tray .form-textarea,
+.ui-dialog-settings-tray .form-date,
+.ui-dialog-settings-tray .form-time {
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 6px;
+  margin-top: 5px;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  border-width: 1px;
+  border-radius: 2px;
+  outline: 0;
+  display: block;
+  font-size: 14px;
+  line-height: 16px;
+  cursor: pointer;
+}
+/* Reduce contrast for fields against dark backround. */
+.ui-dialog-settings-tray .form-text,
+.ui-dialog-settings-tray .form-tel,
+.ui-dialog-settings-tray .form-email,
+.ui-dialog-settings-tray .form-url,
+.ui-dialog-settings-tray .form-search,
+.ui-dialog-settings-tray .form-number,
+.ui-dialog-settings-tray .form-color,
+.ui-dialog-settings-tray .form-file,
+.ui-dialog-settings-tray .form-textarea,
+.ui-dialog-settings-tray .form-date,
+.ui-dialog-settings-tray .form-time {
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
+  background-color: #eee;
+  border-color: #333;
+  color: #595959;
+}
+.ui-dialog-settings-tray .form-text:focus,
+.ui-dialog-settings-tray .form-tel:focus,
+.ui-dialog-settings-tray .form-email:focus,
+.ui-dialog-settings-tray .form-url:focus,
+.ui-dialog-settings-tray .form-search:focus,
+.ui-dialog-settings-tray .form-number:focus,
+.ui-dialog-settings-tray .form-color:focus,
+.ui-dialog-settings-tray .form-file:focus,
+.ui-dialog-settings-tray .form-textarea:focus,
+.ui-dialog-settings-tray .form-date:focus,
+.ui-dialog-settings-tray .form-time:focus {
+  border-color: #40b6ff;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .125), 0 0 8px #40b6ff;
+  background-color: #fff;
+}
+.ui-dialog-settings-tray input[type="checkbox"],
+.ui-dialog-settings-tray .checkbox,
+.ui-dialog-settings-tray input[type="radio"],
+.ui-dialog-settings-tray .radio {
+  position: static;
+  margin: 0;
+}
+.ui-dialog-settings-tray td .checkbox {
+  display: table-cell;
+  line-height: normal;
+  vertical-align: middle;
+}
+.ui-dialog-settings-tray .form-checkbox,
+.ui-dialog-settings-tray .form-radio {
+  /* Add contrast for dark background. */
+  box-shadow: 0 0 2px 1px #000;
+}
+.ui-dialog-settings-tray input[type="radio"] {
+  /* Add full circular radius. */
+  border-radius: 50%;
+}
+.ui-dialog-settings-tray .form-actions {
+  text-align: center;
+}
diff --git a/core/modules/outside_in/css/outside_in.module.css b/core/modules/settings_tray/css/settings_tray.module.css
similarity index 84%
rename from core/modules/outside_in/css/outside_in.module.css
rename to core/modules/settings_tray/css/settings_tray.module.css
index 9d90bf227d..1f762ef3fe 100644
--- a/core/modules/outside_in/css/outside_in.module.css
+++ b/core/modules/settings_tray/css/settings_tray.module.css
@@ -14,11 +14,11 @@
   float: right;
 }
 
-#main-canvas.js-outside-in-edit-mode a,
-#main-canvas.js-outside-in-edit-mode input {
+#main-canvas.js-settings-tray-edit-mode a,
+#main-canvas.js-settings-tray-edit-mode input {
   pointer-events: none;
 }
-#main-canvas.js-outside-in-edit-mode .contextual-links a {
+#main-canvas.js-settings-tray-edit-mode .contextual-links a {
   pointer-events: inherit;
 }
 
diff --git a/core/modules/outside_in/css/outside_in.motion.css b/core/modules/settings_tray/css/settings_tray.motion.css
similarity index 82%
rename from core/modules/outside_in/css/outside_in.motion.css
rename to core/modules/settings_tray/css/settings_tray.motion.css
index a7220e185f..644fb22e36 100644
--- a/core/modules/outside_in/css/outside_in.motion.css
+++ b/core/modules/settings_tray/css/settings_tray.motion.css
@@ -19,8 +19,8 @@
 
 /* Transition the editables on the page, their contextual links and their hover states. */
 .dialog-off-canvas__main-canvas .contextual,
-.dialog-off-canvas__main-canvas .js-outside-in-edit-mode .contextual-region.outside-in-editable,
-.dialog-off-canvas__main-canvas.js-tray-open .js-outside-in-edit-mode .contextual-region.outside-in-editable {
+.dialog-off-canvas__main-canvas .js-settings-tray-edit-mode .contextual-region.settings-tray-editable,
+.dialog-off-canvas__main-canvas.js-tray-open .js-settings-tray-edit-mode .contextual-region.settings-tray-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.table.css b/core/modules/settings_tray/css/settings_tray.table.css
similarity index 64%
rename from core/modules/outside_in/css/outside_in.table.css
rename to core/modules/settings_tray/css/settings_tray.table.css
index dc6bb89502..2a1e2cef2b 100644
--- a/core/modules/outside_in/css/outside_in.table.css
+++ b/core/modules/settings_tray/css/settings_tray.table.css
@@ -3,7 +3,7 @@
  * Visual styling for tables in the Settings Tray module's off canvas tray.
  */
 
-.ui-dialog-outside-in table {
+.ui-dialog-settings-tray table {
   border: 0;
   border-collapse: collapse;
   min-width: 300px;
@@ -13,7 +13,7 @@
   margin-left: -20px;
   margin-bottom: -10px;
 }
-.ui-dialog-outside-in tr th {
+.ui-dialog-settings-tray tr th {
   padding: 2px 4px;
   background-color: transparent;
   border: 0;
@@ -22,11 +22,11 @@
   color: #bbb;
   text-align: left; /* LTR */
 }
-[dir="rtl"] .ui-dialog-outside-in tr th {
+[dir="rtl"] .ui-dialog-settings-tray tr th {
   text-align: right;
 }
-.ui-dialog-outside-in tr,
-.ui-dialog-outside-in tr td {
+.ui-dialog-settings-tray tr,
+.ui-dialog-settings-tray tr td {
   padding: 2px 4px;
   height: 35px;
   vertical-align: middle;
@@ -39,28 +39,28 @@
   background-color: transparent;
   font-size: 12px;
 }
-[dir="rtl"] .ui-dialog-outside-in tr th,
-[dir="rtl"] .ui-dialog-outside-in tr td {
+[dir="rtl"] .ui-dialog-settings-tray tr th,
+[dir="rtl"] .ui-dialog-settings-tray tr td {
   text-align: right;
 }
-.ui-dialog-outside-in td a {
+.ui-dialog-settings-tray td a {
   display: block;
   max-width: 120px;
   overflow: hidden;
 }
-.ui-dialog.ui-dialog-outside-in tr td:first-child,
-.ui-dialog.ui-dialog-outside-in tr th:first-child {
+.ui-dialog.ui-dialog-settings-tray tr td:first-child,
+.ui-dialog.ui-dialog-settings-tray tr th:first-child {
   padding-left: 20px; /* LTR */
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
-[dir="rtl"] .ui-dialog.ui-dialog-outside-in tr td:first-child,
-[dir="rtl"] .ui-dialog.ui-dialog-outside-in tr th:first-child {
+[dir="rtl"] .ui-dialog.ui-dialog-settings-tray tr td:first-child,
+[dir="rtl"] .ui-dialog.ui-dialog-settings-tray tr th:first-child {
   padding-right: 20px;
 }
-.ui-dialog-outside-in tr.odd,
-.ui-dialog-outside-in tr.even {
+.ui-dialog-settings-tray tr.odd,
+.ui-dialog-settings-tray tr.even {
   background-image: none;
   background-color: transparent;
 }
diff --git a/core/modules/outside_in/css/outside_in.tabledrag.css b/core/modules/settings_tray/css/settings_tray.tabledrag.css
similarity index 52%
rename from core/modules/outside_in/css/outside_in.tabledrag.css
rename to core/modules/settings_tray/css/settings_tray.tabledrag.css
index 28ebeadc4f..bf076d72f0 100644
--- a/core/modules/outside_in/css/outside_in.tabledrag.css
+++ b/core/modules/settings_tray/css/settings_tray.tabledrag.css
@@ -5,24 +5,24 @@
  * @see tabledrag.js
  */
 
-/* Because base font sizes will vary widely across themes, to maintain consistency outside-in uses only pixels. */
+/* Because base font sizes will vary widely across themes, to maintain consistency settings-tray uses only pixels. */
 
-.ui-dialog-outside-in body.drag {
+.ui-dialog-settings-tray body.drag {
   cursor: move;
 }
-.ui-dialog-outside-in tr.region-title {
+.ui-dialog-settings-tray tr.region-title {
   font-weight: normal;
 }
-.ui-dialog-outside-in tr.region-message {
+.ui-dialog-settings-tray tr.region-message {
   color: #fff;
 }
-.ui-dialog-outside-in tr.region-populated {
+.ui-dialog-settings-tray tr.region-populated {
   display: none;
 }
-.ui-dialog-outside-in tr.add-new .tabledrag-changed {
+.ui-dialog-settings-tray tr.add-new .tabledrag-changed {
   display: none;
 }
-.ui-dialog-outside-in .draggable a.tabledrag-handle {
+.ui-dialog-settings-tray .draggable a.tabledrag-handle {
   background-image: none;
   margin: 0;
   margin-left: 0; /* LTR */
@@ -35,12 +35,12 @@
   text-decoration: none;
   cursor: move;
 }
-[dir="rtl"] .ui-dialog-outside-in .draggable a.tabledrag-handle {
+[dir="rtl"] .ui-dialog-settings-tray .draggable a.tabledrag-handle {
   float: right;
   margin-right: 0;
   margin-left: 5px;
 }
-.ui-dialog-outside-in a.tabledrag-handle .handle {
+.ui-dialog-settings-tray a.tabledrag-handle .handle {
   /* Use lighter drag icon against dark background. */
   background-image: url(../../../misc/icons/bebebe/move.svg);
   background-repeat: no-repeat;
@@ -50,54 +50,54 @@
   padding: 0;
   width: auto;
 }
-.ui-dialog-outside-in .draggable a.tabledrag-handle:hover .handle,
-.ui-dialog-outside-in .draggable a.tabledrag-handle:focus .handle {
+.ui-dialog-settings-tray .draggable a.tabledrag-handle:hover .handle,
+.ui-dialog-settings-tray .draggable a.tabledrag-handle:focus .handle {
   background-image: url(../../../misc/icons/787878/move.svg);
   text-decoration: none;
 }
 
-.ui-dialog-outside-in .touchevents .draggable td {
+.ui-dialog-settings-tray .touchevents .draggable td {
   padding: 0 10px;
 }
-.ui-dialog-outside-in .touchevents .draggable .menu-item__link {
+.ui-dialog-settings-tray .touchevents .draggable .menu-item__link {
   display: inline-block;
   padding: 10px 0;
 }
-.ui-dialog-outside-in .touchevents a.tabledrag-handle {
+.ui-dialog-settings-tray .touchevents a.tabledrag-handle {
   height: 44px;
   width: 40px;
 }
-.ui-dialog-outside-in .touchevents a.tabledrag-handle .handle {
+.ui-dialog-settings-tray .touchevents a.tabledrag-handle .handle {
   background-position: 40% 19px; /* LTR */
   height: 21px;
 }
-[dir="rtl"] .ui-dialog-outside-in .touch a.tabledrag-handle .handle {
+[dir="rtl"] .ui-dialog-settings-tray .touch a.tabledrag-handle .handle {
   background-position: right 40% top 19px;
 }
-.ui-dialog-outside-in .touchevents .draggable.drag a.tabledrag-handle .handle {
+.ui-dialog-settings-tray .touchevents .draggable.drag a.tabledrag-handle .handle {
   background-position: 50% -32px;
 }
-.ui-dialog-outside-in .tabledrag-toggle-weight-wrapper {
+.ui-dialog-settings-tray .tabledrag-toggle-weight-wrapper {
   text-align: right; /* LTR */
 }
-[dir="rtl"] .ui-dialog-outside-in .tabledrag-toggle-weight-wrapper {
+[dir="rtl"] .ui-dialog-settings-tray .tabledrag-toggle-weight-wrapper {
   text-align: left;
 }
-.ui-dialog-outside-in .indentation {
+.ui-dialog-settings-tray .indentation {
   float: left; /* LTR */
   height: auto;
   margin: 0 3px 0 -10px; /* LTR */
   padding: 0 0 0 10px; /* LTR */
   width: auto;
 }
-[dir="rtl"] .ui-dialog-outside-in .indentation {
+[dir="rtl"] .ui-dialog-settings-tray .indentation {
   float: right;
   margin: 0 -10px 0 3px;
   padding: 0 10px 0 0;
 }
-.ui-dialog-outside-in tr.drag {
+.ui-dialog-settings-tray tr.drag {
   background-color: #555;
 }
-.ui-dialog-outside-in tr.drag-previous {
+.ui-dialog-settings-tray tr.drag-previous {
   background-color: #000;
 }
diff --git a/core/modules/outside_in/css/outside_in.theme.css b/core/modules/settings_tray/css/settings_tray.theme.css
similarity index 69%
rename from core/modules/outside_in/css/outside_in.theme.css
rename to core/modules/settings_tray/css/settings_tray.theme.css
index c1e0e0e5bc..77bdb2f955 100644
--- a/core/modules/outside_in/css/outside_in.theme.css
+++ b/core/modules/settings_tray/css/settings_tray.theme.css
@@ -8,13 +8,13 @@
  */
 
 /* Style the edit mode toolbar and tabs. */
-#toolbar-bar.js-outside-in-edit-mode {
+#toolbar-bar.js-settings-tray-edit-mode {
   background-image: linear-gradient(to bottom,#0c97ed,#1f86c7);
 }
-.js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
+.js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
   color: #999;
 }
-.js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
+.js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
   color: #333;
 }
 
@@ -60,17 +60,17 @@
 }
 
 /* Style the editables while in edit mode. */
-.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .contextual-region.outside-in-editable {
+.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .contextual-region.settings-tray-editable {
   outline: 1px dashed rgba(0,0,0,0.5);
   box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
 }
-.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .contextual-region.outside-in-editable:hover,
-.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .contextual-region.outside-in-editable.outside-in-active-editable {
+.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .contextual-region.settings-tray-editable:hover,
+.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .contextual-region.settings-tray-editable.settings-tray-active-editable {
   background-color: rgba(0,0,0,0.2);
 }
 
 /* Style the dialog-off-canvas container. */
-.ui-dialog-outside-in {
+.ui-dialog-settings-tray {
   background: #444;
   border: 0 solid transparent;
   border-radius: 0;
@@ -82,20 +82,20 @@
 }
 
 /* Style content in the tray. */
-.ui-dialog-outside-in p,
-.ui-dialog-outside-in h1,
-.ui-dialog-outside-in h2,
-.ui-dialog-outside-in h3,
-.ui-dialog-outside-in h4,
-.ui-dialog-outside-in h5,
-.ui-dialog-outside-in h6,
-.ui-dialog-outside-in pre,
-.ui-dialog-outside-in legend,
-.ui-dialog-outside-in cite,
-.ui-dialog-outside-in span,
-.ui-dialog-outside-in summary,
-.ui-dialog-outside-in details,
-.ui-dialog-outside-in .form-item {
+.ui-dialog-settings-tray p,
+.ui-dialog-settings-tray h1,
+.ui-dialog-settings-tray h2,
+.ui-dialog-settings-tray h3,
+.ui-dialog-settings-tray h4,
+.ui-dialog-settings-tray h5,
+.ui-dialog-settings-tray h6,
+.ui-dialog-settings-tray pre,
+.ui-dialog-settings-tray legend,
+.ui-dialog-settings-tray cite,
+.ui-dialog-settings-tray span,
+.ui-dialog-settings-tray summary,
+.ui-dialog-settings-tray details,
+.ui-dialog-settings-tray .form-item {
   color: #ddd;
   font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
   font-size: 14px;
@@ -103,8 +103,8 @@
   background-color: transparent;
   text-shadow: none;
 }
-.ui-dialog-outside-in a,
-.ui-dialog-outside-in .link {
+.ui-dialog-settings-tray a,
+.ui-dialog-settings-tray .link {
   border-bottom: none;
   font-family: "Lucida Grande", 'Lucida Sans Unicode', 'liberation sans', sans-serif;
   font-size: 14px;
@@ -113,16 +113,16 @@
   text-decoration: none;
   transition: color .5s ease;
 }
-.ui-dialog-outside-in a:focus,
-.ui-dialog-outside-in .link:focus,
-.ui-dialog-outside-in a:hover,
-.ui-dialog-outside-in .link:hover {
+.ui-dialog-settings-tray a:focus,
+.ui-dialog-settings-tray .link:focus,
+.ui-dialog-settings-tray a:hover,
+.ui-dialog-settings-tray .link:hover {
   outline: none;
   color: #46a0f5;
 }
 
 /* Style the tray header. */
-.ui-dialog-outside-in .ui-dialog-titlebar {
+.ui-dialog-settings-tray .ui-dialog-titlebar {
   padding: 20px;
   background: #2d2d2d;
   border: 0;
@@ -131,7 +131,7 @@
   font-weight: normal;
   color: #fff;
 }
-.ui-dialog-outside-in .ui-dialog-titlebar-close {
+.ui-dialog-settings-tray .ui-dialog-titlebar-close {
   background-image: url(../../../misc/icons/bebebe/ex.svg);
   background-position: center center;
   background-repeat: no-repeat;
@@ -142,14 +142,14 @@
   -moz-transition: all .5s ease;
   transition: background .5s ease;
 }
-.ui-dialog-outside-in .ui-dialog-titlebar-close:hover {
+.ui-dialog-settings-tray .ui-dialog-titlebar-close:hover {
   background-image: url(../../../misc/icons/ffffff/ex.svg);
 }
-[dir="rtl"] .ui-dialog-outside-in .ui-dialog-titlebar-close {
+[dir="rtl"] .ui-dialog-settings-tray .ui-dialog-titlebar-close {
   left: 20px;
   right: auto;
 }
-.ui-dialog-outside-in .ui-dialog-title {
+.ui-dialog-settings-tray .ui-dialog-title {
   font-size: 16px;
   margin: 0;
   /* Push the text away from the icon. */
@@ -159,12 +159,12 @@
   max-width: 210px;
   text-align: left; /* LTR */
 }
-[dir="rtl"] .ui-dialog-outside-in .ui-dialog-title {
+[dir="rtl"] .ui-dialog-settings-tray .ui-dialog-title {
   text-align: right;
   padding-left: 0px;
   padding-right: 0px;
 }
-.ui-dialog-outside-in .ui-dialog-title:before {
+.ui-dialog-settings-tray .ui-dialog-title:before {
   background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat scroll center center;
   background-size: 100% auto;
   content: '';
@@ -175,7 +175,7 @@
   top: 0;
   width: 20px;
 }
-[dir="rtl"] .ui-dialog-outside-in .ui-dialog-title:before {
+[dir="rtl"] .ui-dialog-settings-tray .ui-dialog-title:before {
   left: auto;
   right: 20px;
 }
@@ -190,7 +190,7 @@
   color: #333;
 }
 /* Hide the defauld Jquery UI dialog close button. */
-.ui-dialog-outside-in .ui-icon-closethick {
+.ui-dialog-settings-tray .ui-icon-closethick {
   visibility: hidden;
 }
 
@@ -202,14 +202,14 @@
  *   https://www.drupal.org/node/1945262.
  */
 
-.ui-dialog-outside-in button.link {
+.ui-dialog-settings-tray button.link {
   background: transparent;
   border: 0;
   cursor: pointer;
   margin: 0;
   padding: 0;
 }
-.ui-dialog-outside-in .button {
+.ui-dialog-settings-tray .button {
   width: 100%;
   height: auto;
   margin: 1em auto;
@@ -220,18 +220,18 @@
   color: #fff;
   transition: all .5s ease;
 }
-.ui-dialog-outside-in .button:hover,
-.ui-dialog-outside-in .button:focus {
+.ui-dialog-settings-tray .button:hover,
+.ui-dialog-settings-tray .button:focus {
   background: #888;
 }
-.ui-dialog-outside-in .button--primary {
+.ui-dialog-settings-tray .button--primary {
   background: #277abd none;
   border: none;
   color: #fff;
   transition: all .5s ease;
 }
-.ui-dialog-outside-in .button--primary:hover,
-.ui-dialog-outside-in .button--primary:focus {
+.ui-dialog-settings-tray .button--primary:hover,
+.ui-dialog-settings-tray .button--primary:focus {
   background: #2b8bd8;
 }
 
@@ -241,17 +241,17 @@
  *   https://www.drupal.org/node/1945262.
  */
 
-.ui-dialog-outside-in .dropbutton-widget {
+.ui-dialog-settings-tray .dropbutton-widget {
   background: #7b7b7b none;
   border: 0;
   border-radius: 1em;
   color: #eee;
   transition: background .5s ease;
 }
-.ui-dialog-outside-in .dropbutton-widget:hover {
+.ui-dialog-settings-tray .dropbutton-widget:hover {
   box-shadow: 0 2px 2px 1px rgba(0,0,0,0.5);
 }
-.ui-dialog-outside-in .dropbutton-toggle button {
+.ui-dialog-settings-tray .dropbutton-toggle button {
   background: #7b7b7b none;
   border-bottom-right-radius: 1em; /* LTR */
   border-top-right-radius: 1em; /* LTR */
@@ -260,37 +260,37 @@
   border-left-width: 1px; /* LTR */
   transition: background .5s ease;
 }
-[dir="rtl"] .ui-dialog-outside-in .dropbutton-toggle button {
+[dir="rtl"] .ui-dialog-settings-tray .dropbutton-toggle button {
   border-radius: 0;
   border-bottom-left-radius: 1em;
   border-top-left-radius: 1em;
   border-width: 0;
   border-right-width: 1px;
 }
-.ui-dialog-outside-in .dropbutton .dropbutton-action:hover,
-.ui-dialog-outside-in .dropbutton a:hover {
+.ui-dialog-settings-tray .dropbutton .dropbutton-action:hover,
+.ui-dialog-settings-tray .dropbutton a:hover {
   background: #6b6b6b none;
   border-bottom-left-radius: 1em; /* LTR */
   border-top-left-radius: 1em; /* LTR */
 }
-[dir="rtl"] .ui-dialog-outside-in .dropbutton .dropbutton-action:hover,
-[dir="rtl"] .ui-dialog-outside-in .dropbutton a:hover {
+[dir="rtl"] .ui-dialog-settings-tray .dropbutton .dropbutton-action:hover,
+[dir="rtl"] .ui-dialog-settings-tray .dropbutton a:hover {
   border-radius: 0;
   border-bottom-right-radius: 1em;
   border-top-right-radius: 1em;
 }
-.ui-dialog-outside-in .dropbutton a {
+.ui-dialog-settings-tray .dropbutton a {
   padding: 0.1em 0.8em;
   color: #eee;
   font-size: 90%;
   line-height: 1.8;
   transition: all .5s ease;
 }
-.ui-dialog-outside-in .dropbutton:hover a {
+.ui-dialog-settings-tray .dropbutton:hover a {
   color: #fff;
 }
 /* Make an arrow out of borders with some fancy CSS. */
-.ui-dialog-outside-in span.dropbutton-arrow {
+.ui-dialog-settings-tray span.dropbutton-arrow {
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
@@ -307,19 +307,19 @@
   overflow: hidden;
   color: #fff;
 }
-.js .ui-dialog-outside-in .dropbutton-toggle .dropbutton-arrow:hover {
+.js .ui-dialog-settings-tray .dropbutton-toggle .dropbutton-arrow:hover {
   background: transparent;
 }
-.ui-dialog-outside-in td .dropbutton-multiple {
+.ui-dialog-settings-tray td .dropbutton-multiple {
   padding-right: 0;
 }
-[dir="rtl"].ui-dialog-outside-in td .dropbutton-multiple {
+[dir="rtl"].ui-dialog-settings-tray td .dropbutton-multiple {
   padding-left: 0;
 }
-.ui-dialog-outside-in td .dropbutton-multiple .dropbutton {
+.ui-dialog-settings-tray td .dropbutton-multiple .dropbutton {
   border-right: 0;
   border-left: 0;
 }
-.ui-dialog-outside-in td .dropbutton .secondary-action {
+.ui-dialog-settings-tray td .dropbutton .secondary-action {
   border-top-color: #000;
 }
diff --git a/core/modules/outside_in/css/outside_in.toolbar.css b/core/modules/settings_tray/css/settings_tray.toolbar.css
similarity index 84%
rename from core/modules/outside_in/css/outside_in.toolbar.css
rename to core/modules/settings_tray/css/settings_tray.toolbar.css
index a199841b0f..c8dc7260f0 100644
--- a/core/modules/outside_in/css/outside_in.toolbar.css
+++ b/core/modules/settings_tray/css/settings_tray.toolbar.css
@@ -8,13 +8,13 @@
  */
 
 /* Style the edit mode toolbar and tabs. */
-#toolbar-bar.js-outside-in-edit-mode {
+#toolbar-bar.js-settings-tray-edit-mode {
   background-color: #fff;
 }
-#toolbar-bar.js-outside-in-edit-mode .toolbar-item {
+#toolbar-bar.js-settings-tray-edit-mode .toolbar-item {
   color: #999;
 }
-#toolbar-bar.js-outside-in-edit-mode .toolbar-item .is-active {
+#toolbar-bar.js-settings-tray-edit-mode .toolbar-item .is-active {
   color: #333;
 }
 
@@ -61,10 +61,10 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus {
   background-image: url(../../../misc/icons/ffffff/pencil.svg);
 }
 
-#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
+#toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
   background-image: none;
   color: #fff;
 }
-#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
+#toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
   background-image: linear-gradient(to bottom, #0094f0, #0e69be);
 }
diff --git a/core/modules/outside_in/js/off-canvas.es6.js b/core/modules/settings_tray/js/off-canvas.es6.js
similarity index 98%
rename from core/modules/outside_in/js/off-canvas.es6.js
rename to core/modules/settings_tray/js/off-canvas.es6.js
index 480561a7c6..0123b9c430 100644
--- a/core/modules/outside_in/js/off-canvas.es6.js
+++ b/core/modules/settings_tray/js/off-canvas.es6.js
@@ -11,7 +11,7 @@
 
 (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 tray will be %100 width. @see settings_tray.module.css
   const minDisplaceWidth = 768;
 
   /**
diff --git a/core/modules/outside_in/js/off-canvas.js b/core/modules/settings_tray/js/off-canvas.js
similarity index 100%
rename from core/modules/outside_in/js/off-canvas.js
rename to core/modules/settings_tray/js/off-canvas.js
diff --git a/core/modules/outside_in/js/outside_in.es6.js b/core/modules/settings_tray/js/settings_tray.es6.js
similarity index 77%
rename from core/modules/outside_in/js/outside_in.es6.js
rename to core/modules/settings_tray/js/settings_tray.es6.js
index 25c1902241..cd2661aee4 100644
--- a/core/modules/outside_in/js/outside_in.es6.js
+++ b/core/modules/settings_tray/js/settings_tray.es6.js
@@ -6,9 +6,9 @@
  */
 
 (function ($, Drupal) {
-  const blockConfigureSelector = '[data-outside-in-edit]';
-  const toggleEditSelector = '[data-drupal-outsidein="toggle"]';
-  const itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, .contextual-region[data-drupal-outsidein="editable"] a, .contextual-region[data-drupal-outsidein="editable"] button';
+  const blockConfigureSelector = '[data-settings-tray-edit]';
+  const toggleEditSelector = '[data-drupal-settingstray="toggle"]';
+  const itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, .contextual-region[data-drupal-settingstray="editable"] a, .contextual-region[data-drupal-settingstray="editable"] button';
   const contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
   const quickEditItemSelector = '[data-quickedit-entity-id]';
 
@@ -32,16 +32,16 @@
     // Click "Edit" button in toolbar to force Contextual Edit which starts
     // Settings Tray edit mode also.
     data.$el.find(blockConfigureSelector)
-      .on('click.outsidein', () => {
+      .on('click.settingstray', () => {
         if (!isInEditMode()) {
-          $(toggleEditSelector).trigger('click').trigger('click.outside_in');
+          $(toggleEditSelector).trigger('click').trigger('click.settings_tray');
         }
         // Always disable QuickEdit regardless of whether "EditMode" was just enabled.
         disableQuickEdit();
       });
   });
 
-  $(document).on('keyup.outsidein', (e) => {
+  $(document).on('keyup.settingstray', (e) => {
     if (isInEditMode() && e.keyCode === 27) {
       Drupal.announce(
         Drupal.t('Exited edit mode.'),
@@ -61,15 +61,15 @@
   }
 
   /**
-   * Helper to check the state of the outside-in mode.
+   * Helper to check the state of the settings-tray mode.
    *
    * @todo don't use a class for this.
    *
    * @return {boolean}
-   *  State of the outside-in edit mode.
+   *  State of the settings-tray edit mode.
    */
   function isInEditMode() {
-    return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
+    return $('#toolbar-bar').hasClass('js-settings-tray-edit-mode');
   }
 
   /**
@@ -124,7 +124,7 @@
    */
   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');
+      throw new Error('data-off-canvas-main-canvas is missing from settings-tray-page-wrapper.html.twig');
     }
     editMode = !!editMode;
     const $editButton = $(toggleEditSelector);
@@ -134,16 +134,16 @@
       $editButton.text(Drupal.t('Editing'));
       closeToolbarTrays();
 
-      $editables = $('.contextual-region[data-drupal-outsidein="editable"]').once('outsidein');
+      $editables = $('.contextual-region[data-drupal-settingstray="editable"]').once('settingstray');
       if ($editables.length) {
         // Use event capture to prevent clicks on links.
         document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true);
 
-        // When a click occurs try and find the outside-in edit link
+        // When a click occurs try and find the settings-tray edit link
         // and click it.
         $editables
           .not(contextualItemsSelector)
-          .on('click.outsidein', (e) => {
+          .on('click.settingstray', (e) => {
             // Contextual links are allowed to function in Edit mode.
             if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
               return;
@@ -153,7 +153,7 @@
           });
         $(quickEditItemSelector)
           .not(contextualItemsSelector)
-          .on('click.outsidein', (e) => {
+          .on('click.settingstray', (e) => {
             // 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();
@@ -168,18 +168,18 @@
     }
     // Disable edit mode.
     else {
-      $editables = $('.contextual-region[data-drupal-outsidein="editable"]').removeOnce('outsidein');
+      $editables = $('.contextual-region[data-drupal-settingstray="editable"]').removeOnce('settingstray');
       if ($editables.length) {
         document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true);
-        $editables.off('.outsidein');
-        $(quickEditItemSelector).off('.outsidein');
+        $editables.off('.settingstray');
+        $(quickEditItemSelector).off('.settingstray');
       }
 
       $editButton.text(Drupal.t('Edit'));
       closeOffCanvas();
       disableQuickEdit();
     }
-    getItemsToToggle().toggleClass('js-outside-in-edit-mode', editMode);
+    getItemsToToggle().toggleClass('js-settings-tray-edit-mode', editMode);
     $('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
   }
 
@@ -191,7 +191,7 @@
    * @prop {Drupal~behaviorAttach} attach
    *   Attaches contextual toolbar behavior on a contextualToolbar-init event.
    */
-  Drupal.behaviors.outsideInEdit = {
+  Drupal.behaviors.settingsTrayEdit = {
     attach() {
       const editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
       if (editMode) {
@@ -201,16 +201,16 @@
   };
 
   /**
-   * Toggle the js-outside-edit-mode class on items that we want to disable while in edit mode.
+   * Toggle the js-settings-tray-edit-mode class on items that we want to disable while in edit mode.
    *
    * @type {Drupal~behavior}
    *
    * @prop {Drupal~behaviorAttach} attach
-   *   Toggle the js-outside-edit-mode class.
+   *   Toggle the js-settings-tray-edit-mode class.
    */
   Drupal.behaviors.toggleEditMode = {
     attach() {
-      $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode);
+      $(toggleEditSelector).once('settingstray').on('click.settingstray', toggleEditMode);
       // Find all Ajax instances that use the 'off_canvas' renderer.
       Drupal.ajax.instances
         // If there is an element and the renderer is 'off_canvas' then we want
@@ -223,7 +223,7 @@
           if (!('dialogOptions' in instance.options.data)) {
             instance.options.data.dialogOptions = {};
           }
-          instance.options.data.dialogOptions.outsideInActiveEditableId = $(instance.element).parents('.outside-in-editable').attr('id');
+          instance.options.data.dialogOptions.settingsTrayActiveEditableId = $(instance.element).parents('.settings-tray-editable').attr('id');
           instance.progress = { type: 'fullscreen' };
         });
     },
@@ -233,17 +233,17 @@
   $(window).on({
     'dialog:beforecreate': function (event, dialog, $element, settings) {
       if ($element.is('#drupal-off-canvas')) {
-        $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
-        const $activeElement = $(`#${settings.outsideInActiveEditableId}`);
+        $('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
+        const $activeElement = $(`#${settings.settingsTrayActiveEditableId}`);
         if ($activeElement.length) {
-          $activeElement.addClass('outside-in-active-editable');
-          settings.dialogClass += ' ui-dialog-outside-in';
+          $activeElement.addClass('settings-tray-active-editable');
+          settings.dialogClass += ' ui-dialog-settings-tray';
         }
       }
     },
     'dialog:beforeclose': function (event, dialog, $element) {
       if ($element.is('#drupal-off-canvas')) {
-        $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
+        $('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
       }
     },
   });
diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/settings_tray/js/settings_tray.js
similarity index 69%
rename from core/modules/outside_in/js/outside_in.js
rename to core/modules/settings_tray/js/settings_tray.js
index 350ded0be3..21997dedfb 100644
--- a/core/modules/outside_in/js/outside_in.js
+++ b/core/modules/settings_tray/js/settings_tray.js
@@ -6,25 +6,25 @@
 **/
 
 (function ($, Drupal) {
-  var blockConfigureSelector = '[data-outside-in-edit]';
-  var toggleEditSelector = '[data-drupal-outsidein="toggle"]';
-  var itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, .contextual-region[data-drupal-outsidein="editable"] a, .contextual-region[data-drupal-outsidein="editable"] button';
+  var blockConfigureSelector = '[data-settings-tray-edit]';
+  var toggleEditSelector = '[data-drupal-settingstray="toggle"]';
+  var itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, .contextual-region[data-drupal-settingstray="editable"] a, .contextual-region[data-drupal-settingstray="editable"] button';
   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 () {
+    data.$el.find(blockConfigureSelector).on('click.settingstray', function () {
       if (!isInEditMode()) {
-        $(toggleEditSelector).trigger('click').trigger('click.outside_in');
+        $(toggleEditSelector).trigger('click').trigger('click.settings_tray');
       }
 
       disableQuickEdit();
     });
   });
 
-  $(document).on('keyup.outsidein', function (e) {
+  $(document).on('keyup.settingstray', function (e) {
     if (isInEditMode() && e.keyCode === 27) {
       Drupal.announce(Drupal.t('Exited edit mode.'));
       toggleEditMode();
@@ -36,7 +36,7 @@
   }
 
   function isInEditMode() {
-    return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
+    return $('#toolbar-bar').hasClass('js-settings-tray-edit-mode');
   }
 
   function toggleEditMode() {
@@ -64,7 +64,7 @@
 
   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');
+      throw new Error('data-off-canvas-main-canvas is missing from settings-tray-page-wrapper.html.twig');
     }
     editMode = !!editMode;
     var $editButton = $(toggleEditSelector);
@@ -74,18 +74,18 @@
       $editButton.text(Drupal.t('Editing'));
       closeToolbarTrays();
 
-      $editables = $('.contextual-region[data-drupal-outsidein="editable"]').once('outsidein');
+      $editables = $('.contextual-region[data-drupal-settingstray="editable"]').once('settingstray');
       if ($editables.length) {
         document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true);
 
-        $editables.not(contextualItemsSelector).on('click.outsidein', function (e) {
+        $editables.not(contextualItemsSelector).on('click.settingstray', function (e) {
           if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
             return;
           }
           $(e.currentTarget).find(blockConfigureSelector).trigger('click');
           disableQuickEdit();
         });
-        $(quickEditItemSelector).not(contextualItemsSelector).on('click.outsidein', function (e) {
+        $(quickEditItemSelector).not(contextualItemsSelector).on('click.settingstray', function (e) {
           if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
             closeOffCanvas();
           }
@@ -97,22 +97,22 @@
         });
       }
     } else {
-        $editables = $('.contextual-region[data-drupal-outsidein="editable"]').removeOnce('outsidein');
+        $editables = $('.contextual-region[data-drupal-settingstray="editable"]').removeOnce('settingstray');
         if ($editables.length) {
           document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true);
-          $editables.off('.outsidein');
-          $(quickEditItemSelector).off('.outsidein');
+          $editables.off('.settingstray');
+          $(quickEditItemSelector).off('.settingstray');
         }
 
         $editButton.text(Drupal.t('Edit'));
         closeOffCanvas();
         disableQuickEdit();
       }
-    getItemsToToggle().toggleClass('js-outside-in-edit-mode', editMode);
+    getItemsToToggle().toggleClass('js-settings-tray-edit-mode', editMode);
     $('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
   }
 
-  Drupal.behaviors.outsideInEdit = {
+  Drupal.behaviors.settingsTrayEdit = {
     attach: function attach() {
       var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
       if (editMode) {
@@ -123,7 +123,7 @@
 
   Drupal.behaviors.toggleEditMode = {
     attach: function attach() {
-      $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode);
+      $(toggleEditSelector).once('settingstray').on('click.settingstray', toggleEditMode);
 
       Drupal.ajax.instances.filter(function (instance) {
         return $(instance.element).attr('data-dialog-renderer') === 'off_canvas';
@@ -131,7 +131,7 @@
         if (!('dialogOptions' in instance.options.data)) {
           instance.options.data.dialogOptions = {};
         }
-        instance.options.data.dialogOptions.outsideInActiveEditableId = $(instance.element).parents('.outside-in-editable').attr('id');
+        instance.options.data.dialogOptions.settingsTrayActiveEditableId = $(instance.element).parents('.settings-tray-editable').attr('id');
         instance.progress = { type: 'fullscreen' };
       });
     }
@@ -140,18 +140,18 @@
   $(window).on({
     'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) {
       if ($element.is('#drupal-off-canvas')) {
-        $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
-        var $activeElement = $('#' + settings.outsideInActiveEditableId);
+        $('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
+        var $activeElement = $('#' + settings.settingsTrayActiveEditableId);
         if ($activeElement.length) {
-          $activeElement.addClass('outside-in-active-editable');
-          settings.dialogClass += ' ui-dialog-outside-in';
+          $activeElement.addClass('settings-tray-active-editable');
+          settings.dialogClass += ' ui-dialog-settings-tray';
         }
       }
     },
     'dialog:beforeclose': function dialogBeforeclose(event, dialog, $element) {
       if ($element.is('#drupal-off-canvas')) {
-        $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
+        $('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
       }
     }
   });
-})(jQuery, Drupal);
\ No newline at end of file
+})(jQuery, Drupal);
diff --git a/core/modules/outside_in/outside_in.api.php b/core/modules/settings_tray/settings_tray.api.php
similarity index 89%
rename from core/modules/outside_in/outside_in.api.php
rename to core/modules/settings_tray/settings_tray.api.php
index 913036fc5e..16abc1e8ae 100644
--- a/core/modules/outside_in/outside_in.api.php
+++ b/core/modules/settings_tray/settings_tray.api.php
@@ -6,7 +6,7 @@
  */
 
 /**
- * @defgroup outside_in Settings Tray API
+ * @defgroup settings_tray Settings Tray API
  * @{
  * Settings Tray API
  *
@@ -49,8 +49,8 @@
  * Therefore, the entire Settings Tray API is just this annotation: it controls
  * what the Settings Tray does for a given block.
  *
- * @see outside_in_block_alter()
- * @see \Drupal\Tests\outside_in\Functional\OutsideInBlockTest::testPossibleAnnotations()
+ * @see settings_tray_block_alter()
+ * @see \Drupal\Tests\settings_tray\Functional\SettingsTrayBlockTest::testPossibleAnnotations()
  *
  * @}
  */
diff --git a/core/modules/outside_in/outside_in.info.yml b/core/modules/settings_tray/settings_tray.info.yml
similarity index 100%
rename from core/modules/outside_in/outside_in.info.yml
rename to core/modules/settings_tray/settings_tray.info.yml
diff --git a/core/modules/outside_in/outside_in.install b/core/modules/settings_tray/settings_tray.install
similarity index 95%
rename from core/modules/outside_in/outside_in.install
rename to core/modules/settings_tray/settings_tray.install
index e205e46eb4..bc81c278ac 100644
--- a/core/modules/outside_in/outside_in.install
+++ b/core/modules/settings_tray/settings_tray.install
@@ -10,7 +10,7 @@
 /**
  * Implements hook_install().
  */
-function outside_in_install() {
+function settings_tray_install() {
   // This module affects the rendering of blocks and of the page.
   // @todo Remove in https://www.drupal.org/node/2783791.
   Cache::invalidateTags(['rendered']);
diff --git a/core/modules/outside_in/outside_in.libraries.yml b/core/modules/settings_tray/settings_tray.libraries.yml
similarity index 62%
rename from core/modules/outside_in/outside_in.libraries.yml
rename to core/modules/settings_tray/settings_tray.libraries.yml
index 5c388b82f1..843c5197eb 100644
--- a/core/modules/outside_in/outside_in.libraries.yml
+++ b/core/modules/settings_tray/settings_tray.libraries.yml
@@ -1,20 +1,20 @@
-drupal.outside_in:
+drupal.settings_tray:
   version: VERSION
   js:
-    js/outside_in.js: {}
+    js/settings_tray.js: {}
   css:
     component:
-      css/outside_in.module.css: {}
-      css/outside_in.motion.css: {}
-      css/outside_in.form.css: {}
-      css/outside_in.table.css: {}
-      css/outside_in.details.css: {}
-      css/outside_in.tabledrag.css: {}
+      css/settings_tray.module.css: {}
+      css/settings_tray.motion.css: {}
+      css/settings_tray.form.css: {}
+      css/settings_tray.table.css: {}
+      css/settings_tray.details.css: {}
+      css/settings_tray.tabledrag.css: {}
     theme:
       # @todo Set the group higher than CSS_AGGREGATE_THEME so that it overrides
       #   both jQuery UI and Classy's dialog.css, remove in
       #   https://www.drupal.org/node/1945262.
-      css/outside_in.theme.css: { group: 200 }
+      css/settings_tray.theme.css: { group: 200 }
   dependencies:
     - core/jquery
     - core/drupal
diff --git a/core/modules/outside_in/outside_in.links.contextual.yml b/core/modules/settings_tray/settings_tray.links.contextual.yml
similarity index 73%
rename from core/modules/outside_in/outside_in.links.contextual.yml
rename to core/modules/settings_tray/settings_tray.links.contextual.yml
index b0c0f13d1e..0fa201fdca 100644
--- a/core/modules/outside_in/outside_in.links.contextual.yml
+++ b/core/modules/settings_tray/settings_tray.links.contextual.yml
@@ -1,4 +1,4 @@
-outside_in.block_configure:
+settings_tray.block_configure:
   title: 'Quick edit'
   route_name: 'entity.block.off_canvas_form'
   group: 'block'
diff --git a/core/modules/outside_in/outside_in.module b/core/modules/settings_tray/settings_tray.module
similarity index 69%
rename from core/modules/outside_in/outside_in.module
rename to core/modules/settings_tray/settings_tray.module
index 0d34f3ba96..5451c0f341 100644
--- a/core/modules/outside_in/outside_in.module
+++ b/core/modules/settings_tray/settings_tray.module
@@ -7,18 +7,18 @@
 
 use Drupal\Core\Asset\AttachedAssetsInterface;
 use Drupal\Core\Routing\RouteMatchInterface;
-use Drupal\outside_in\Block\BlockEntityOffCanvasForm;
-use Drupal\outside_in\Form\SystemBrandingOffCanvasForm;
-use Drupal\outside_in\Form\SystemMenuOffCanvasForm;
+use Drupal\settings_tray\Block\BlockEntityOffCanvasForm;
+use Drupal\settings_tray\Form\SystemBrandingOffCanvasForm;
+use Drupal\settings_tray\Form\SystemMenuOffCanvasForm;
 
 /**
  * Implements hook_help().
  */
-function outside_in_help($route_name, RouteMatchInterface $route_match) {
+function settings_tray_help($route_name, RouteMatchInterface $route_match) {
   switch ($route_name) {
-    case 'help.page.outside_in':
+    case 'help.page.settings_tray':
       $output = '<h3>' . t('About') . '</h3>';
-      $output .= '<p>' . t('The Settings Tray module provides an \'edit mode\' in which clicking on a block opens a slide-out tray which allows configuration to be altered without leaving the page.For more information, see the <a href=":outside-in-documentation">online documentation for the Settings Tray module</a>.', [':outside-in-documentation' => 'https://www.drupal.org/documentation/modules/outside_in']) . '</p>';
+      $output .= '<p>' . t('The Settings Tray module provides an \'edit mode\' in which clicking on a block opens a slide-out tray which allows configuration to be altered without leaving the page.For more information, see the <a href=":settings-tray-documentation">online documentation for the Settings Tray module</a>.', [':settings-tray-documentation' => 'https://www.drupal.org/documentation/modules/settings_tray']) . '</p>';
       $output .= '<h3>' . t('Uses') . '</h3>';
       $output .= '<dl>';
       $output .= '<dt>' . t('Editing blocks on the same page in the slide-out tray') . '</dt>';
@@ -32,36 +32,36 @@ function outside_in_help($route_name, RouteMatchInterface $route_match) {
  *
  * Change Configure Blocks into off_canvas links.
  */
-function outside_in_contextual_links_view_alter(&$element, $items) {
-  if (isset($element['#links']['outside-inblock-configure'])) {
-    // Place outside_in link first.
-    $outside_in_link = $element['#links']['outside-inblock-configure'];
-    unset($element['#links']['outside-inblock-configure']);
-    $element['#links'] = ['outside-inblock-configure' => $outside_in_link] + $element['#links'];
-
-    $element['#links']['outside-inblock-configure']['attributes'] = [
+function settings_tray_contextual_links_view_alter(&$element, $items) {
+  if (isset($element['#links']['settings-trayblock-configure'])) {
+    // Place settings_tray link first.
+    $settings_tray_link = $element['#links']['settings-trayblock-configure'];
+    unset($element['#links']['settings-trayblock-configure']);
+    $element['#links'] = ['settings-trayblock-configure' => $settings_tray_link] + $element['#links'];
+
+    $element['#links']['settings-trayblock-configure']['attributes'] = [
       'class' => ['use-ajax'],
       'data-dialog-type' => 'dialog',
       'data-dialog-renderer' => 'off_canvas',
-      'data-outside-in-edit' => TRUE,
+      'data-settings-tray-edit' => TRUE,
     ];
     // If this is content block change title to avoid duplicate "Quick Edit".
     if (isset($element['#links']['block-contentblock-edit'])) {
-      $element['#links']['outside-inblock-configure']['title'] = t('Quick edit settings');
+      $element['#links']['settings-trayblock-configure']['title'] = t('Quick edit settings');
     }
 
-    $element['#attached']['library'][] = 'outside_in/drupal.off_canvas';
+    $element['#attached']['library'][] = 'settings_tray/drupal.off_canvas';
   }
 }
 
 /**
  * Implements hook_block_view_alter().
  */
-function outside_in_block_view_alter(array &$build) {
+function settings_tray_block_view_alter(array &$build) {
   // Force a new 'data-contextual-id' attribute on blocks when this module is
   // enabled so as not to reuse stale data cached client-side.
   // @todo Remove when https://www.drupal.org/node/2773591 is fixed.
-  $build['#contextual_links']['outside_in'] = [
+  $build['#contextual_links']['settings_tray'] = [
     'route_parameters' => [],
   ];
 }
@@ -69,18 +69,18 @@ function outside_in_block_view_alter(array &$build) {
 /**
  * Implements hook_element_info_alter().
  */
-function outside_in_element_info_alter(&$type) {
+function settings_tray_element_info_alter(&$type) {
   if (isset($type['page'])) {
-    $type['page']['#theme_wrappers']['outside_in_page_wrapper'] = ['#weight' => -1000];
+    $type['page']['#theme_wrappers']['settings_tray_page_wrapper'] = ['#weight' => -1000];
   }
 }
 
 /**
  * Implements hook_theme().
  */
-function outside_in_theme() {
+function settings_tray_theme() {
   return [
-    'outside_in_page_wrapper' => [
+    'settings_tray_page_wrapper' => [
       'variables' => ['children' => NULL],
     ],
   ];
@@ -89,7 +89,7 @@ function outside_in_theme() {
 /**
  * Implements hook_entity_type_build().
  */
-function outside_in_entity_type_build(array &$entity_types) {
+function settings_tray_entity_type_build(array &$entity_types) {
   /* @var $entity_types \Drupal\Core\Entity\EntityTypeInterface[] */
   $entity_types['block']
     ->setFormClass('off_canvas', BlockEntityOffCanvasForm::class)
@@ -99,7 +99,7 @@ function outside_in_entity_type_build(array &$entity_types) {
 /**
  * Implements hook_preprocess_HOOK() for block templates.
  */
-function outside_in_preprocess_block(&$variables) {
+function settings_tray_preprocess_block(&$variables) {
   // Only blocks that have an off_canvas form will have a "Quick Edit" link. We
   // could wait for the contextual links to be initialized on the client side,
   // and then add the class and data- attribute below there (via JavaScript).
@@ -108,17 +108,17 @@ function outside_in_preprocess_block(&$variables) {
   // cause flicker. Therefore, for now, we choose to duplicate some logic to
   // guarantee a smooth experience.
   // This is an implementation detail that may change in the future.
-  // @see \Drupal\outside_in\Access\BlockPluginHasOffCanvasFormAccessCheck
-  /** @var \Drupal\outside_in\Access\BlockPluginHasOffCanvasFormAccessCheck $access_checker */
-  $access_checker = \Drupal::service('access_check.outside_in.block.off_canvas_form');
+  // @see \Drupal\settings_tray\Access\BlockPluginHasOffCanvasFormAccessCheck
+  /** @var \Drupal\settings_tray\Access\BlockPluginHasOffCanvasFormAccessCheck $access_checker */
+  $access_checker = \Drupal::service('access_check.settings_tray.block.off_canvas_form');
   /** @var \Drupal\Core\Block\BlockManagerInterface $block_plugin_manager */
   $block_plugin_manager = \Drupal::service('plugin.manager.block');
   /** @var \Drupal\Core\Block\BlockPluginInterface $block_plugin */
   $block_plugin = $block_plugin_manager->createInstance($variables['plugin_id']);
   if ($access_checker->accessBlockPlugin($block_plugin)->isAllowed()) {
     // Add class and attributes to all blocks to allow Javascript to target.
-    $variables['attributes']['class'][] = 'outside-in-editable';
-    $variables['attributes']['data-drupal-outsidein'] = 'editable';
+    $variables['attributes']['class'][] = 'settings-tray-editable';
+    $variables['attributes']['data-drupal-settingstray'] = 'editable';
   }
 }
 
@@ -131,12 +131,12 @@ function outside_in_preprocess_block(&$variables) {
  * @todo Remove the "administer blocks" requirement in https://www.drupal.org/node/2822965
  * @see contextual_toolbar()
  */
-function outside_in_toolbar_alter(&$items) {
+function settings_tray_toolbar_alter(&$items) {
   $items['contextual']['#cache']['contexts'][] = 'user.permissions';
   if (isset($items['contextual']['tab']) && \Drupal::currentUser()->hasPermission('administer blocks')) {
     $items['contextual']['#weight'] = -1000;
-    $items['contextual']['#attached']['library'][] = 'outside_in/drupal.outside_in';
-    $items['contextual']['tab']['#attributes']['data-drupal-outsidein'] = 'toggle';
+    $items['contextual']['#attached']['library'][] = 'settings_tray/drupal.settings_tray';
+    $items['contextual']['tab']['#attributes']['data-drupal-settingstray'] = 'toggle';
 
     // Set a class on items to mark whether they should be active in edit mode.
     // @todo Create a dynamic method for modules to set their own items.
@@ -156,9 +156,9 @@ function outside_in_toolbar_alter(&$items) {
  *
  * Ensures every block plugin definition has an 'off_canvas' form specified.
  *
- * @see \Drupal\outside_in\Access\BlockPluginHasOffCanvasFormAccessCheck
+ * @see \Drupal\settings_tray\Access\BlockPluginHasOffCanvasFormAccessCheck
  */
-function outside_in_block_alter(&$definitions) {
+function settings_tray_block_alter(&$definitions) {
   foreach ($definitions as &$definition) {
     // If the block plugin already defines an 'off_canvas' form, there's nothing
     // to do.
@@ -201,10 +201,10 @@ function outside_in_block_alter(&$definitions) {
 /**
  * Implements hook_css_alter().
  */
-function outside_in_css_alter(&$css, AttachedAssetsInterface $assets) {
+function settings_tray_css_alter(&$css, AttachedAssetsInterface $assets) {
   // @todo Remove once conditional ordering is introduced in
   //   https://www.drupal.org/node/1945262.
-  $path = drupal_get_path('module', 'outside_in') . '/css/outside_in.theme.css';
+  $path = drupal_get_path('module', 'settings_tray') . '/css/settings_tray.theme.css';
   if (isset($css[$path])) {
     // Use 200 to come after CSS_AGGREGATE_THEME.
     $css[$path]['group'] = 200;
diff --git a/core/modules/outside_in/outside_in.routing.yml b/core/modules/settings_tray/settings_tray.routing.yml
similarity index 74%
rename from core/modules/outside_in/outside_in.routing.yml
rename to core/modules/settings_tray/settings_tray.routing.yml
index a778727815..510064b31e 100644
--- a/core/modules/outside_in/outside_in.routing.yml
+++ b/core/modules/settings_tray/settings_tray.routing.yml
@@ -2,7 +2,7 @@ entity.block.off_canvas_form:
   path: '/admin/structure/block/manage/{block}/off-canvas'
   defaults:
     _entity_form: 'block.off_canvas'
-    _title_callback: '\Drupal\outside_in\Block\BlockEntityOffCanvasForm::title'
+    _title_callback: '\Drupal\settings_tray\Block\BlockEntityOffCanvasForm::title'
   requirements:
     _permission: 'administer blocks'
     _access_block_plugin_has_offcanvas_form: 'TRUE'
diff --git a/core/modules/outside_in/outside_in.services.yml b/core/modules/settings_tray/settings_tray.services.yml
similarity index 58%
rename from core/modules/outside_in/outside_in.services.yml
rename to core/modules/settings_tray/settings_tray.services.yml
index 5d95c1e4e5..eea6583210 100644
--- a/core/modules/outside_in/outside_in.services.yml
+++ b/core/modules/settings_tray/settings_tray.services.yml
@@ -1,11 +1,11 @@
 services:
   main_content_renderer.off_canvas:
-    class: Drupal\outside_in\Render\MainContent\OffCanvasRenderer
+    class: Drupal\settings_tray\Render\MainContent\OffCanvasRenderer
     arguments: ['@title_resolver', '@renderer']
     tags:
       - { name: render.main_content_renderer, format: drupal_dialog.off_canvas }
 
-  access_check.outside_in.block.off_canvas_form:
-    class: Drupal\outside_in\Access\BlockPluginHasOffCanvasFormAccessCheck
+  access_check.settings_tray.block.off_canvas_form:
+    class: Drupal\settings_tray\Access\BlockPluginHasOffCanvasFormAccessCheck
     tags:
       - { name: access_check, applies_to: _access_block_plugin_has_offcanvas_form }
diff --git a/core/modules/outside_in/src/Access/BlockPluginHasOffCanvasFormAccessCheck.php b/core/modules/settings_tray/src/Access/BlockPluginHasOffCanvasFormAccessCheck.php
similarity index 90%
rename from core/modules/outside_in/src/Access/BlockPluginHasOffCanvasFormAccessCheck.php
rename to core/modules/settings_tray/src/Access/BlockPluginHasOffCanvasFormAccessCheck.php
index e8136d609f..757bc1b7f9 100644
--- a/core/modules/outside_in/src/Access/BlockPluginHasOffCanvasFormAccessCheck.php
+++ b/core/modules/settings_tray/src/Access/BlockPluginHasOffCanvasFormAccessCheck.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\outside_in\Access;
+namespace Drupal\settings_tray\Access;
 
 use Drupal\block\BlockInterface;
 use Drupal\Core\Access\AccessResult;
@@ -39,8 +39,8 @@ public function access(BlockInterface $block) {
    * @return \Drupal\Core\Access\AccessResultInterface
    *   The access result.
    *
-   * @see outside_in_preprocess_block()
-   * @todo Remove when outside_in_preprocess_block() is removed.
+   * @see settings_tray_preprocess_block()
+   * @todo Remove when settings_tray_preprocess_block() is removed.
    */
   public function accessBlockPlugin(BlockPluginInterface $block_plugin) {
     return AccessResult::allowedIf($block_plugin instanceof PluginWithFormsInterface && $block_plugin->hasFormClass('off_canvas'));
diff --git a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php b/core/modules/settings_tray/src/Ajax/OpenOffCanvasDialogCommand.php
similarity index 98%
rename from core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
rename to core/modules/settings_tray/src/Ajax/OpenOffCanvasDialogCommand.php
index 0dd3736f28..aba5346e6b 100644
--- a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php
+++ b/core/modules/settings_tray/src/Ajax/OpenOffCanvasDialogCommand.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\outside_in\Ajax;
+namespace Drupal\settings_tray\Ajax;
 
 use Drupal\Core\Ajax\OpenDialogCommand;
 
diff --git a/core/modules/outside_in/src/Block/BlockEntityOffCanvasForm.php b/core/modules/settings_tray/src/Block/BlockEntityOffCanvasForm.php
similarity index 99%
rename from core/modules/outside_in/src/Block/BlockEntityOffCanvasForm.php
rename to core/modules/settings_tray/src/Block/BlockEntityOffCanvasForm.php
index d2ff362bf8..14ba5f8a9f 100644
--- a/core/modules/outside_in/src/Block/BlockEntityOffCanvasForm.php
+++ b/core/modules/settings_tray/src/Block/BlockEntityOffCanvasForm.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\outside_in\Block;
+namespace Drupal\settings_tray\Block;
 
 use Drupal\block\BlockForm;
 use Drupal\block\BlockInterface;
diff --git a/core/modules/outside_in/src/Form/SystemBrandingOffCanvasForm.php b/core/modules/settings_tray/src/Form/SystemBrandingOffCanvasForm.php
similarity index 97%
rename from core/modules/outside_in/src/Form/SystemBrandingOffCanvasForm.php
rename to core/modules/settings_tray/src/Form/SystemBrandingOffCanvasForm.php
index 5ecfc77bd8..0b4290e2fa 100644
--- a/core/modules/outside_in/src/Form/SystemBrandingOffCanvasForm.php
+++ b/core/modules/settings_tray/src/Form/SystemBrandingOffCanvasForm.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\outside_in\Form;
+namespace Drupal\settings_tray\Form;
 
 use Drupal\Core\Config\ConfigFactoryInterface;
 use Drupal\Core\DependencyInjection\ContainerInjectionInterface;
@@ -11,7 +11,7 @@
 /**
  * The off-canvas form handler for the SystemBrandingBlock.
  *
- * @see outside_in_block_alter()
+ * @see settings_tray_block_alter()
  *
  * @internal
  */
diff --git a/core/modules/outside_in/src/Form/SystemMenuOffCanvasForm.php b/core/modules/settings_tray/src/Form/SystemMenuOffCanvasForm.php
similarity index 98%
rename from core/modules/outside_in/src/Form/SystemMenuOffCanvasForm.php
rename to core/modules/settings_tray/src/Form/SystemMenuOffCanvasForm.php
index 554b13057c..15d19a87f9 100644
--- a/core/modules/outside_in/src/Form/SystemMenuOffCanvasForm.php
+++ b/core/modules/settings_tray/src/Form/SystemMenuOffCanvasForm.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\outside_in\Form;
+namespace Drupal\settings_tray\Form;
 
 use Drupal\Component\Plugin\PluginInspectionInterface;
 use Drupal\Core\DependencyInjection\ContainerInjectionInterface;
@@ -18,7 +18,7 @@
 /**
  * The off-canvas form handler for the SystemMenuBlock.
  *
- * @see outside_in_block_alter()
+ * @see settings_tray_block_alter()
  *
  * @internal
  */
diff --git a/core/modules/outside_in/src/Render/MainContent/OffCanvasRenderer.php b/core/modules/settings_tray/src/Render/MainContent/OffCanvasRenderer.php
similarity index 91%
rename from core/modules/outside_in/src/Render/MainContent/OffCanvasRenderer.php
rename to core/modules/settings_tray/src/Render/MainContent/OffCanvasRenderer.php
index 8bcaa578d4..835503013f 100644
--- a/core/modules/outside_in/src/Render/MainContent/OffCanvasRenderer.php
+++ b/core/modules/settings_tray/src/Render/MainContent/OffCanvasRenderer.php
@@ -1,13 +1,13 @@
 <?php
 
-namespace Drupal\outside_in\Render\MainContent;
+namespace Drupal\settings_tray\Render\MainContent;
 
 use Drupal\Core\Ajax\AjaxResponse;
 use Drupal\Core\Controller\TitleResolverInterface;
 use Drupal\Core\Render\MainContent\DialogRenderer;
 use Drupal\Core\Render\RendererInterface;
 use Drupal\Core\Routing\RouteMatchInterface;
-use Drupal\outside_in\Ajax\OpenOffCanvasDialogCommand;
+use Drupal\settings_tray\Ajax\OpenOffCanvasDialogCommand;
 use Symfony\Component\HttpFoundation\Request;
 
 /**
@@ -47,7 +47,7 @@ public function renderResponse(array $main_content, Request $request, RouteMatch
     $content = $this->renderer->renderRoot($main_content);
     // Attach the library necessary for using the OpenOffCanvasDialogCommand and
     // set the attachments for this Ajax response.
-    $main_content['#attached']['library'][] = 'outside_in/drupal.off_canvas';
+    $main_content['#attached']['library'][] = 'settings_tray/drupal.off_canvas';
     $response->setAttachments($main_content['#attached']);
 
     // If the main content doesn't provide a title, use the title resolver.
diff --git a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php b/core/modules/settings_tray/src/Tests/Ajax/OffCanvasDialogTest.php
similarity index 93%
rename from core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php
rename to core/modules/settings_tray/src/Tests/Ajax/OffCanvasDialogTest.php
index edf055b577..6a2f5ed575 100644
--- a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php
+++ b/core/modules/settings_tray/src/Tests/Ajax/OffCanvasDialogTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\outside_in\Tests\Ajax;
+namespace Drupal\settings_tray\Tests\Ajax;
 
 use Drupal\ajax_test\Controller\AjaxTestController;
 use Drupal\Core\EventSubscriber\MainContentViewSubscriber;
@@ -9,7 +9,7 @@
 /**
  * Performs tests on opening and manipulating dialogs via AJAX commands.
  *
- * @group outside_in
+ * @group settings_tray
  */
 class OffCanvasDialogTest extends AjaxTestBase {
 
@@ -18,7 +18,7 @@ class OffCanvasDialogTest extends AjaxTestBase {
    *
    * @var array
    */
-  public static $modules = ['outside_in'];
+  public static $modules = ['settings_tray'];
 
   /**
    * Test sending AJAX requests to open and manipulate off-canvas dialog.
diff --git a/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig b/core/modules/settings_tray/templates/settings-tray-page-wrapper.html.twig
similarity index 100%
rename from core/modules/outside_in/templates/outside-in-page-wrapper.html.twig
rename to core/modules/settings_tray/templates/settings-tray-page-wrapper.html.twig
diff --git a/core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.info.yml b/core/modules/settings_tray/tests/modules/off_canvas_test/off_canvas_test.info.yml
similarity index 89%
rename from core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.info.yml
rename to core/modules/settings_tray/tests/modules/off_canvas_test/off_canvas_test.info.yml
index 8c6cc80242..f6cd53947c 100644
--- a/core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.info.yml
+++ b/core/modules/settings_tray/tests/modules/off_canvas_test/off_canvas_test.info.yml
@@ -6,4 +6,4 @@ version: VERSION
 core: 8.x
 dependencies:
   - block
-  - outside_in
+  - settings_tray
diff --git a/core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.routing.yml b/core/modules/settings_tray/tests/modules/off_canvas_test/off_canvas_test.routing.yml
similarity index 100%
rename from core/modules/outside_in/tests/modules/off_canvas_test/off_canvas_test.routing.yml
rename to core/modules/settings_tray/tests/modules/off_canvas_test/off_canvas_test.routing.yml
diff --git a/core/modules/outside_in/tests/modules/off_canvas_test/src/Controller/TestController.php b/core/modules/settings_tray/tests/modules/off_canvas_test/src/Controller/TestController.php
similarity index 94%
rename from core/modules/outside_in/tests/modules/off_canvas_test/src/Controller/TestController.php
rename to core/modules/settings_tray/tests/modules/off_canvas_test/src/Controller/TestController.php
index 6164b06fc2..3658bfd699 100644
--- a/core/modules/outside_in/tests/modules/off_canvas_test/src/Controller/TestController.php
+++ b/core/modules/settings_tray/tests/modules/off_canvas_test/src/Controller/TestController.php
@@ -55,7 +55,7 @@ public function linksDisplay() {
         ],
         '#attached' => [
           'library' => [
-            'outside_in/drupal.outside_in',
+            'settings_tray/drupal.settings_tray',
           ],
         ],
       ],
@@ -73,7 +73,7 @@ public function linksDisplay() {
         ],
         '#attached' => [
           'library' => [
-            'outside_in/drupal.outside_in',
+            'settings_tray/drupal.settings_tray',
           ],
         ],
       ],
@@ -88,7 +88,7 @@ public function linksDisplay() {
         ],
         '#attached' => [
           'library' => [
-            'outside_in/drupal.outside_in',
+            'settings_tray/drupal.settings_tray',
           ],
         ],
       ],
@@ -131,7 +131,7 @@ public function otherDialogLinks() {
       ],
       '#attached' => [
         'library' => [
-          'outside_in/drupal.outside_in',
+          'settings_tray/drupal.settings_tray',
         ],
       ],
     ];
diff --git a/core/modules/outside_in/tests/modules/outside_in_test/outside_in_test.info.yml b/core/modules/settings_tray/tests/modules/settings_tray_test/settings_tray_test.info.yml
similarity index 90%
rename from core/modules/outside_in/tests/modules/outside_in_test/outside_in_test.info.yml
rename to core/modules/settings_tray/tests/modules/settings_tray_test/settings_tray_test.info.yml
index 590f559329..f4f6e80da9 100644
--- a/core/modules/outside_in/tests/modules/outside_in_test/outside_in_test.info.yml
+++ b/core/modules/settings_tray/tests/modules/settings_tray_test/settings_tray_test.info.yml
@@ -6,4 +6,4 @@ version: VERSION
 core: 8.x
 dependencies:
   - block
-  - outside_in
+  - settings_tray
diff --git a/core/modules/outside_in/tests/modules/outside_in_test/src/Form/OffCanvasFormAnntationIsClassBlockForm.php b/core/modules/settings_tray/tests/modules/settings_tray_test/src/Form/OffCanvasFormAnntationIsClassBlockForm.php
similarity index 86%
rename from core/modules/outside_in/tests/modules/outside_in_test/src/Form/OffCanvasFormAnntationIsClassBlockForm.php
rename to core/modules/settings_tray/tests/modules/settings_tray_test/src/Form/OffCanvasFormAnntationIsClassBlockForm.php
index 2136615c9e..d6a80e73b4 100644
--- a/core/modules/outside_in/tests/modules/outside_in_test/src/Form/OffCanvasFormAnntationIsClassBlockForm.php
+++ b/core/modules/settings_tray/tests/modules/settings_tray_test/src/Form/OffCanvasFormAnntationIsClassBlockForm.php
@@ -1,12 +1,12 @@
 <?php
 
-namespace Drupal\outside_in_test\Form;
+namespace Drupal\settings_tray_test\Form;
 
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Plugin\PluginFormBase;
 
 /**
- * @see \Drupal\outside_in_test\Plugin\Block\OffCanvasFormAnnotationIsClassBlock
+ * @see \Drupal\settings_tray_test\Plugin\Block\OffCanvasFormAnnotationIsClassBlock
  */
 class OffCanvasFormAnntationIsClassBlockForm extends PluginFormBase {
 
diff --git a/core/modules/outside_in/tests/modules/outside_in_test/src/Plugin/Block/OffCanvasFormAnnotationIsClassBlock.php b/core/modules/settings_tray/tests/modules/settings_tray_test/src/Plugin/Block/OffCanvasFormAnnotationIsClassBlock.php
similarity index 68%
rename from core/modules/outside_in/tests/modules/outside_in_test/src/Plugin/Block/OffCanvasFormAnnotationIsClassBlock.php
rename to core/modules/settings_tray/tests/modules/settings_tray_test/src/Plugin/Block/OffCanvasFormAnnotationIsClassBlock.php
index 41af9dcf23..f357ee1e08 100644
--- a/core/modules/outside_in/tests/modules/outside_in_test/src/Plugin/Block/OffCanvasFormAnnotationIsClassBlock.php
+++ b/core/modules/settings_tray/tests/modules/settings_tray_test/src/Plugin/Block/OffCanvasFormAnnotationIsClassBlock.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\outside_in_test\Plugin\Block;
+namespace Drupal\settings_tray_test\Plugin\Block;
 
 use Drupal\Core\Block\BlockBase;
 
@@ -8,10 +8,10 @@
  * Block that explicitly provides an "off_canvas" form class.
  *
  * @Block(
- *   id = "outside_in_test_class",
+ *   id = "settings_tray_test_class",
  *   admin_label = "Settings Tray test block: forms[off_canvas]=class",
  *   forms = {
- *     "off_canvas" = "\Drupal\outside_in_test\Form\OffCanvasFormAnntationIsClassBlockForm",
+ *     "off_canvas" = "\Drupal\settings_tray_test\Form\OffCanvasFormAnntationIsClassBlockForm",
  *   },
  * )
  */
diff --git a/core/modules/outside_in/tests/modules/outside_in_test/src/Plugin/Block/OffCanvasFormAnnotationIsFalseBlock.php b/core/modules/settings_tray/tests/modules/settings_tray_test/src/Plugin/Block/OffCanvasFormAnnotationIsFalseBlock.php
similarity index 83%
rename from core/modules/outside_in/tests/modules/outside_in_test/src/Plugin/Block/OffCanvasFormAnnotationIsFalseBlock.php
rename to core/modules/settings_tray/tests/modules/settings_tray_test/src/Plugin/Block/OffCanvasFormAnnotationIsFalseBlock.php
index 6458fa17c6..cffc11e547 100644
--- a/core/modules/outside_in/tests/modules/outside_in_test/src/Plugin/Block/OffCanvasFormAnnotationIsFalseBlock.php
+++ b/core/modules/settings_tray/tests/modules/settings_tray_test/src/Plugin/Block/OffCanvasFormAnnotationIsFalseBlock.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\outside_in_test\Plugin\Block;
+namespace Drupal\settings_tray_test\Plugin\Block;
 
 use Drupal\Core\Block\BlockBase;
 
@@ -8,7 +8,7 @@
  * Block that explicitly provides no "off_canvas" form, thus opting out.
  *
  * @Block(
- *   id = "outside_in_test_false",
+ *   id = "settings_tray_test_false",
  *   admin_label = "Settings Tray test block: forms[off_canvas]=FALSE",
  *   forms = {
  *     "off_canvas" = FALSE,
diff --git a/core/modules/outside_in/tests/modules/outside_in_test/src/Plugin/Block/OffCanvasFormAnnotationNoneBlock.php b/core/modules/settings_tray/tests/modules/settings_tray_test/src/Plugin/Block/OffCanvasFormAnnotationNoneBlock.php
similarity index 81%
rename from core/modules/outside_in/tests/modules/outside_in_test/src/Plugin/Block/OffCanvasFormAnnotationNoneBlock.php
rename to core/modules/settings_tray/tests/modules/settings_tray_test/src/Plugin/Block/OffCanvasFormAnnotationNoneBlock.php
index 1e67f234f3..09e6cc2dd9 100644
--- a/core/modules/outside_in/tests/modules/outside_in_test/src/Plugin/Block/OffCanvasFormAnnotationNoneBlock.php
+++ b/core/modules/settings_tray/tests/modules/settings_tray_test/src/Plugin/Block/OffCanvasFormAnnotationNoneBlock.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\outside_in_test\Plugin\Block;
+namespace Drupal\settings_tray_test\Plugin\Block;
 
 use Drupal\Core\Block\BlockBase;
 
@@ -8,7 +8,7 @@
  * Block that does nothing explicit for Settings Tray.
  *
  * @Block(
- *   id = "outside_in_test_none",
+ *   id = "settings_tray_test_none",
  *   admin_label = "Settings Tray test block: forms[off_canvas] is not specified",
  * )
  */
diff --git a/core/modules/outside_in/tests/modules/outside_in_test/src/Plugin/Block/ValidationErrorBlock.php b/core/modules/settings_tray/tests/modules/settings_tray_test/src/Plugin/Block/ValidationErrorBlock.php
similarity index 88%
rename from core/modules/outside_in/tests/modules/outside_in_test/src/Plugin/Block/ValidationErrorBlock.php
rename to core/modules/settings_tray/tests/modules/settings_tray_test/src/Plugin/Block/ValidationErrorBlock.php
index a78d75f399..f54b1a3f1d 100644
--- a/core/modules/outside_in/tests/modules/outside_in_test/src/Plugin/Block/ValidationErrorBlock.php
+++ b/core/modules/settings_tray/tests/modules/settings_tray_test/src/Plugin/Block/ValidationErrorBlock.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\outside_in_test\Plugin\Block;
+namespace Drupal\settings_tray_test\Plugin\Block;
 
 use Drupal\Core\Block\BlockBase;
 use Drupal\Core\Form\FormStateInterface;
@@ -9,7 +9,7 @@
  * Provides a 'Block with validation error' test block.
  *
  * @Block(
- *   id = "outside_in_test_validation",
+ *   id = "settings_tray_test_validation",
  *   admin_label = @Translation("Block with validation error")
  * )
  */
diff --git a/core/modules/settings_tray/tests/modules/settings_tray_test_css/css/css_fix.theme.css b/core/modules/settings_tray/tests/modules/settings_tray_test_css/css/css_fix.theme.css
new file mode 100644
index 0000000000..f10b14ab02
--- /dev/null
+++ b/core/modules/settings_tray/tests/modules/settings_tray_test_css/css/css_fix.theme.css
@@ -0,0 +1,4 @@
+#main-canvas.js-settings-tray-edit-mode a,
+#main-canvas.js-settings-tray-edit-mode input {
+  pointer-events: inherit !important;
+}
diff --git a/core/modules/outside_in/tests/modules/outside_in_test_css/outside_in_test_css.info.yml b/core/modules/settings_tray/tests/modules/settings_tray_test_css/settings_tray_test_css.info.yml
similarity index 89%
rename from core/modules/outside_in/tests/modules/outside_in_test_css/outside_in_test_css.info.yml
rename to core/modules/settings_tray/tests/modules/settings_tray_test_css/settings_tray_test_css.info.yml
index c7df21f183..cdbb125903 100644
--- a/core/modules/outside_in/tests/modules/outside_in_test_css/outside_in_test_css.info.yml
+++ b/core/modules/settings_tray/tests/modules/settings_tray_test_css/settings_tray_test_css.info.yml
@@ -5,4 +5,4 @@ package: Testing
 version: VERSION
 core: 8.x
 dependencies:
-- outside_in
+- settings_tray
diff --git a/core/modules/outside_in/tests/modules/outside_in_test_css/outside_in_test_css.libraries.yml b/core/modules/settings_tray/tests/modules/settings_tray_test_css/settings_tray_test_css.libraries.yml
similarity index 100%
rename from core/modules/outside_in/tests/modules/outside_in_test_css/outside_in_test_css.libraries.yml
rename to core/modules/settings_tray/tests/modules/settings_tray_test_css/settings_tray_test_css.libraries.yml
diff --git a/core/modules/outside_in/tests/modules/outside_in_test_css/outside_in_test_css.module b/core/modules/settings_tray/tests/modules/settings_tray_test_css/settings_tray_test_css.module
similarity index 58%
rename from core/modules/outside_in/tests/modules/outside_in_test_css/outside_in_test_css.module
rename to core/modules/settings_tray/tests/modules/settings_tray_test_css/settings_tray_test_css.module
index 2cd32e2bf7..3375399395 100644
--- a/core/modules/outside_in/tests/modules/outside_in_test_css/outside_in_test_css.module
+++ b/core/modules/settings_tray/tests/modules/settings_tray_test_css/settings_tray_test_css.module
@@ -10,7 +10,7 @@
 /**
  * Implements hook_page_attachments().
  */
-function outside_in_test_css_page_attachments(array &$attachments) {
+function settings_tray_test_css_page_attachments(array &$attachments) {
   // Unconditionally attach an asset to the page.
-  $attachments['#attached']['library'][] = 'outside_in_test_css/drupal.css_fix';
+  $attachments['#attached']['library'][] = 'settings_tray_test_css/drupal.css_fix';
 }
diff --git a/core/modules/outside_in/tests/src/Functional/OutsideInTest.php b/core/modules/settings_tray/tests/src/Functional/SettingsTrayTest.php
similarity index 77%
rename from core/modules/outside_in/tests/src/Functional/OutsideInTest.php
rename to core/modules/settings_tray/tests/src/Functional/SettingsTrayTest.php
index 1cefffa2ff..3b59b7a20f 100644
--- a/core/modules/outside_in/tests/src/Functional/OutsideInTest.php
+++ b/core/modules/settings_tray/tests/src/Functional/SettingsTrayTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\Tests\outside_in\Functional;
+namespace Drupal\Tests\settings_tray\Functional;
 
 use Drupal\block\Entity\Block;
 use Drupal\Tests\BrowserTestBase;
@@ -8,16 +8,16 @@
 /**
  * Testing opening and saving block forms in the off-canvas dialog.
  *
- * @group outside_in
+ * @group settings_tray
  */
-class OutsideInTest extends BrowserTestBase {
+class SettingsTrayTest extends BrowserTestBase {
 
   /**
    * {@inheritdoc}
    */
   public static $modules = [
-    'outside_in',
-    'outside_in_test',
+    'settings_tray',
+    'settings_tray_test',
   ];
 
   /**
@@ -39,16 +39,16 @@ protected  function getBlockSelector(Block $block) {
    * There is also functional JS test coverage to ensure that the two blocks
    * that support Settings Tray (the "class" & "none" cases) do work correctly.
    *
-   * @see OutsideInBlockFormTest::testBlocks()
+   * @see SettingsTrayBlockFormTest::testBlocks()
    */
   public function testPossibleAnnotations() {
     $test_block_plugin_ids = [
       // Block that explicitly provides an "off_canvas" form class.
-      'outside_in_test_class',
+      'settings_tray_test_class',
       // Block that explicitly provides no "off_canvas" form, thus opting out.
-      'outside_in_test_false',
+      'settings_tray_test_false',
       // Block that does nothing explicit for Settings Tray.
-      'outside_in_test_none',
+      'settings_tray_test_none',
     ];
 
     $placed_blocks = [];
@@ -64,14 +64,14 @@ public function testPossibleAnnotations() {
       // All blocks are rendered.
       $web_assert->elementExists('css', $block_selector);
 
-      // All blocks except 'outside_in_test_false' are editable. For more
+      // All blocks except 'settings_tray_test_false' are editable. For more
       // detailed test coverage, which requires JS execution, see
-      // OutsideInBlockFormTest::testBlocks().
-      if ($plugin_id !== 'outside_in_test_false') {
-        $web_assert->elementExists('css', "{$block_selector}[data-drupal-outsidein=\"editable\"]");
+      // SettingsTrayBlockFormTest::testBlocks().
+      if ($plugin_id !== 'settings_tray_test_false') {
+        $web_assert->elementExists('css', "{$block_selector}[data-drupal-settingstray=\"editable\"]");
       }
       else {
-        $web_assert->elementNotExists('css', "{$block_selector}[data-drupal-outsidein=\"editable\"]");
+        $web_assert->elementNotExists('css', "{$block_selector}[data-drupal-settingstray=\"editable\"]");
       }
     }
   }
@@ -83,7 +83,7 @@ public function testOptOut() {
     $web_assert = $this->assertSession();
 
     $non_excluded_block = $this->placeBlock('system_powered_by_block');
-    $excluded_block_plugin_ids = ['page_title_block', 'system_main_block', 'outside_in_test_false'];
+    $excluded_block_plugin_ids = ['page_title_block', 'system_main_block', 'settings_tray_test_false'];
     $block_selectors = [];
     // Place blocks that should be excluded.
     foreach ($excluded_block_plugin_ids as $excluded_block_plugin_id) {
@@ -93,15 +93,15 @@ public function testOptOut() {
     $this->drupalGet('');
     // Assert that block has been marked as "editable" and contextual that
     // should exist does.
-    $web_assert->elementExists('css', $this->getBlockSelector($non_excluded_block) . "[data-drupal-outsidein=\"editable\"]");
+    $web_assert->elementExists('css', $this->getBlockSelector($non_excluded_block) . "[data-drupal-settingstray=\"editable\"]");
     // Assert that each block that has a "forms[off_canvas] = FALSE" annotation:
     // - is still rendered on the page
-    // - but is not marked as "editable" by outside_in_preprocess_block()
+    // - but is not marked as "editable" by settings_tray_preprocess_block()
     // - and does not have the Settings Tray contextual link
     foreach ($block_selectors as $block_selector) {
       $web_assert->elementExists('css', $block_selector);
-      $web_assert->elementNotExists('css', "{$block_selector}[data-drupal-outsidein=\"editable\"]");
-      $web_assert->elementNotExists('css', "$block_selector [data-outside-in-edit]");
+      $web_assert->elementNotExists('css', "{$block_selector}[data-drupal-settingstray=\"editable\"]");
+      $web_assert->elementNotExists('css', "$block_selector [data-settings-tray-edit]");
     }
   }
 
diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php b/core/modules/settings_tray/tests/src/FunctionalJavascript/OffCanvasTest.php
similarity index 96%
rename from core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php
rename to core/modules/settings_tray/tests/src/FunctionalJavascript/OffCanvasTest.php
index 2f64d9fe2c..347eaeaea9 100644
--- a/core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php
+++ b/core/modules/settings_tray/tests/src/FunctionalJavascript/OffCanvasTest.php
@@ -1,13 +1,13 @@
 <?php
 
-namespace Drupal\Tests\outside_in\FunctionalJavascript;
+namespace Drupal\Tests\settings_tray\FunctionalJavascript;
 
 /**
  * Tests the off-canvas dialog functionality.
  *
- * @group outside_in
+ * @group settings_tray
  */
-class OffCanvasTest extends OutsideInJavascriptTestBase {
+class OffCanvasTest extends SettingsTrayJavascriptTestBase {
 
   /**
    * {@inheritdoc}
@@ -16,7 +16,7 @@ class OffCanvasTest extends OutsideInJavascriptTestBase {
     'block',
     'system',
     'toolbar',
-    'outside_in',
+    'settings_tray',
     'off_canvas_test',
   ];
 
diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php b/core/modules/settings_tray/tests/src/FunctionalJavascript/SettingsTrayBlockFormTest.php
similarity index 94%
rename from core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php
rename to core/modules/settings_tray/tests/src/FunctionalJavascript/SettingsTrayBlockFormTest.php
index 3da0d0a263..a4f9a0bb92 100644
--- a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php
+++ b/core/modules/settings_tray/tests/src/FunctionalJavascript/SettingsTrayBlockFormTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\Tests\outside_in\FunctionalJavascript;
+namespace Drupal\Tests\settings_tray\FunctionalJavascript;
 
 use Drupal\block\Entity\Block;
 use Drupal\block_content\Entity\BlockContent;
@@ -10,9 +10,9 @@
 /**
  * Testing opening and saving block forms in the off-canvas dialog.
  *
- * @group outside_in
+ * @group settings_tray
  */
-class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
+class SettingsTrayBlockFormTest extends SettingsTrayJavascriptTestBase {
 
   const TOOLBAR_EDIT_LINK_SELECTOR = '#toolbar-bar div.contextual-toolbar-tab button';
 
@@ -28,15 +28,15 @@ class OutsideInBlockFormTest extends OutsideInJavascriptTestBase {
     'breakpoint',
     'toolbar',
     'contextual',
-    'outside_in',
+    'settings_tray',
     'quickedit',
     'search',
     'block_content',
-    'outside_in_test',
+    'settings_tray_test',
     // Add test module to override CSS pointer-events properties because they
     // cause test failures.
-    'outside_in_test_css',
-    'outside_in_test',
+    'settings_tray_test_css',
+    'settings_tray_test',
   ];
 
   /**
@@ -112,7 +112,7 @@ public function testBlocks($block_plugin, $new_page_text, $element_selector, $la
           $page->fillField('settings[site_information][site_name]', $new_page_text);
           break;
 
-        case 'outside_in_test_class':
+        case 'settings_tray_test_class':
           $web_assert->elementExists('css', '[data-drupal-selector="edit-settings-some-setting"]');
           break;
       }
@@ -138,7 +138,7 @@ public function testBlocks($block_plugin, $new_page_text, $element_selector, $la
       // suppressed.
       $this->openBlockForm("$block_selector {$element_selector}", $block_selector);
       $web_assert->elementTextContains('css', '.contextual-toolbar-tab button', 'Editing');
-      $web_assert->elementAttributeContains('css', '.dialog-off-canvas__main-canvas', 'class', 'js-outside-in-edit-mode');
+      $web_assert->elementAttributeContains('css', '.dialog-off-canvas__main-canvas', 'class', 'js-settings-tray-edit-mode');
       // Simulate press the Escape key.
       $this->getSession()->executeScript('jQuery("body").trigger(jQuery.Event("keyup", { keyCode: 27 }));');
       $this->waitForOffCanvasToClose();
@@ -146,7 +146,7 @@ public function testBlocks($block_plugin, $new_page_text, $element_selector, $la
       $this->assertEditModeDisabled();
       $web_assert->elementTextContains('css', '#drupal-live-announce', 'Exited edit mode.');
       $web_assert->elementTextNotContains('css', '.contextual-toolbar-tab button', 'Editing');
-      $web_assert->elementAttributeNotContains('css', '.dialog-off-canvas__main-canvas', 'class', 'js-outside-in-edit-mode');
+      $web_assert->elementAttributeNotContains('css', '.dialog-off-canvas__main-canvas', 'class', 'js-settings-tray-edit-mode');
       // Delete the block that was placed for the current theme.
       $block->delete();
     }
@@ -182,8 +182,8 @@ public function providerTestBlocks() {
         'toolbar_item' => NULL,
       ],
       // This is the functional JS test coverage accompanying testPossibleAnnotations().
-      '\Drupal\outside_in_test\Plugin\Block\OffCanvasFormAnnotationIsClassBlock' => [
-        'block_plugin' => 'outside_in_test_class',
+      '\Drupal\settings_tray_test\Plugin\Block\OffCanvasFormAnnotationIsClassBlock' => [
+        'block_plugin' => 'settings_tray_test_class',
         'new_page_text' => NULL,
         'element_selector' => 'span',
         'label_selector' => NULL,
@@ -191,8 +191,8 @@ public function providerTestBlocks() {
         'toolbar_item' => NULL,
       ],
       // This is the functional JS test coverage accompanying testPossibleAnnotations().
-      '\Drupal\outside_in_test\Plugin\Block\OffCanvasFormAnnotationNoneBlock' => [
-        'block_plugin' => 'outside_in_test_none',
+      '\Drupal\settings_tray_test\Plugin\Block\OffCanvasFormAnnotationNoneBlock' => [
+        'block_plugin' => 'settings_tray_test_none',
         'new_page_text' => NULL,
         'element_selector' => 'span',
         'label_selector' => NULL,
@@ -396,8 +396,8 @@ protected function assertEditModeEnabled() {
     $web_assert->elementNotExists('css', '.contextual .trigger.visually-hidden');
     // The toolbar edit button should read "Editing".
     $web_assert->elementContains('css', static::TOOLBAR_EDIT_LINK_SELECTOR, 'Editing');
-    // The main canvas element should have the "js-outside-in-edit-mode" class.
-    $web_assert->elementExists('css', '.dialog-off-canvas__main-canvas.js-outside-in-edit-mode');
+    // The main canvas element should have the "js-settings-tray-edit-mode" class.
+    $web_assert->elementExists('css', '.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode');
   }
 
   /**
@@ -411,9 +411,9 @@ protected function assertEditModeDisabled() {
     $web_assert->elementNotExists('css', '.contextual .trigger:not(.visually-hidden)');
     // The toolbar edit button should read "Edit".
     $web_assert->elementContains('css', static::TOOLBAR_EDIT_LINK_SELECTOR, 'Edit');
-    // The main canvas element should NOT have the "js-outside-in-edit-mode"
+    // The main canvas element should NOT have the "js-settings-tray-edit-mode"
     // class.
-    $web_assert->elementNotExists('css', '.dialog-off-canvas__main-canvas.js-outside-in-edit-mode');
+    $web_assert->elementNotExists('css', '.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode');
   }
 
   /**
@@ -486,7 +486,7 @@ protected function createBlockContentType($label, $create_body = FALSE) {
    * Tests that contextual links in custom blocks are changed.
    *
    * "Quick edit" is quickedit.module link.
-   * "Quick edit settings" is outside_in.module link.
+   * "Quick edit settings" is settings_tray.module link.
    */
   public function testCustomBlockLinks() {
     $this->drupalGet('user');
@@ -534,13 +534,13 @@ public function testValidationMessages() {
     $web_assert = $this->assertSession();
     foreach ($this->getTestThemes() as $theme) {
       $this->enableTheme($theme);
-      $block = $this->placeBlock('outside_in_test_validation');
+      $block = $this->placeBlock('settings_tray_test_validation');
       $this->drupalGet('user');
       $this->enableEditMode();
       $this->openBlockForm($this->getBlockSelector($block));
       $page->pressButton('Save Block with validation error');
       $web_assert->assertWaitOnAjaxRequest();
-      // The outside_in_test_validation test plugin form always has a validation
+      // The settings_tray_test_validation test plugin form always has a validation
       // error.
       $web_assert->elementContains('css', '#drupal-off-canvas', 'Sorry system error. Please save again');
       $this->disableEditMode();
diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInJavascriptTestBase.php b/core/modules/settings_tray/tests/src/FunctionalJavascript/SettingsTrayJavascriptTestBase.php
similarity index 96%
rename from core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInJavascriptTestBase.php
rename to core/modules/settings_tray/tests/src/FunctionalJavascript/SettingsTrayJavascriptTestBase.php
index 2ce2bf64d6..7f7f3943af 100644
--- a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInJavascriptTestBase.php
+++ b/core/modules/settings_tray/tests/src/FunctionalJavascript/SettingsTrayJavascriptTestBase.php
@@ -1,13 +1,13 @@
 <?php
 
-namespace Drupal\Tests\outside_in\FunctionalJavascript;
+namespace Drupal\Tests\settings_tray\FunctionalJavascript;
 
 use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
 
 /**
  * Base class contains common test functionality for the Settings Tray module.
  */
-abstract class OutsideInJavascriptTestBase extends JavascriptTestBase {
+abstract class SettingsTrayJavascriptTestBase extends JavascriptTestBase {
 
   /**
    * {@inheritdoc}
diff --git a/core/modules/outside_in/tests/src/Unit/Access/BlockPluginHasOffCanvasFormAccessCheckTest.php b/core/modules/settings_tray/tests/src/Unit/Access/BlockPluginHasOffCanvasFormAccessCheckTest.php
similarity index 94%
rename from core/modules/outside_in/tests/src/Unit/Access/BlockPluginHasOffCanvasFormAccessCheckTest.php
rename to core/modules/settings_tray/tests/src/Unit/Access/BlockPluginHasOffCanvasFormAccessCheckTest.php
index a8d0aab487..31b0b7e090 100644
--- a/core/modules/outside_in/tests/src/Unit/Access/BlockPluginHasOffCanvasFormAccessCheckTest.php
+++ b/core/modules/settings_tray/tests/src/Unit/Access/BlockPluginHasOffCanvasFormAccessCheckTest.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\Tests\outside_in\Unit\Access;
+namespace Drupal\Tests\settings_tray\Unit\Access;
 
 use Drupal\block\BlockInterface;
 use Drupal\Core\Access\AccessResultAllowed;
@@ -11,12 +11,12 @@
 use Drupal\Core\Cache\UnchangingCacheableDependencyTrait;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Session\AccountInterface;
-use Drupal\outside_in\Access\BlockPluginHasOffCanvasFormAccessCheck;
+use Drupal\settings_tray\Access\BlockPluginHasOffCanvasFormAccessCheck;
 use Drupal\Tests\UnitTestCase;
 
 /**
- * @coversDefaultClass \Drupal\outside_in\Access\BlockPluginHasOffCanvasFormAccessCheck
- * @group outside_in
+ * @coversDefaultClass \Drupal\settings_tray\Access\BlockPluginHasOffCanvasFormAccessCheck
+ * @group settings_tray
  */
 class BlockPluginHasOffCanvasFormAccessCheckTest extends UnitTestCase {
 
diff --git a/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php b/core/modules/settings_tray/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
similarity index 80%
rename from core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
rename to core/modules/settings_tray/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
index d822415d61..b29acff20d 100644
--- a/core/modules/outside_in/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
+++ b/core/modules/settings_tray/tests/src/Unit/Ajax/OpenOffCanvasDialogCommandTest.php
@@ -1,13 +1,13 @@
 <?php
 
-namespace Drupal\Tests\outside_in\Unit\Ajax;
+namespace Drupal\Tests\settings_tray\Unit\Ajax;
 
-use Drupal\outside_in\Ajax\OpenOffCanvasDialogCommand;
+use Drupal\settings_tray\Ajax\OpenOffCanvasDialogCommand;
 use Drupal\Tests\UnitTestCase;
 
 /**
- * @coversDefaultClass \Drupal\outside_in\Ajax\OpenOffCanvasDialogCommand
- * @group outside_in
+ * @coversDefaultClass \Drupal\settings_tray\Ajax\OpenOffCanvasDialogCommand
+ * @group settings_tray
  */
 class OpenOffCanvasDialogCommandTest extends UnitTestCase {