109 files changed, 5500 insertions, 0 deletions
diff --git a/toolkit/themes/shared/about.css b/toolkit/themes/shared/about.css
new file mode 100644
index 000000000..25f52992a
--- /dev/null
+++ b/toolkit/themes/shared/about.css
@@ -0,0 +1,62 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html {
+  background: -moz-Dialog;
+  padding: 0 1em;
+  font: message-box;
+}
+
+body {
+  color: -moz-FieldText;
+  position: relative;
+  min-width: 330px;
+  max-width: 50em;
+  margin: 4em auto;
+  border: 1px solid ThreeDShadow;
+  border-radius: 10px;
+  padding: 3em;
+  padding-inline-start: 30px;
+  background: -moz-Field;
+}
+
+.aboutPageWideContainer {
+  max-width: 80%;
+}
+
+#aboutLogoContainer {
+  border: 1px solid ThreeDLightShadow;
+  width: 300px;
+  margin-bottom: 2em;
+}
+
+img {
+  border: 0;
+}
+
+#version {
+  font-weight: bold;
+  color: #909090;
+  margin: -24px 0 9px 17px;
+}
+
+ul {
+  margin: 0;
+  margin-inline-start: 1.5em;
+  padding: 0;
+  list-style: square;
+}
+
+ul > li {
+  margin-top: .5em;
+}
+
+th, td {
+  padding: 0 5px;
+}
+
+.columns {
+  -moz-column-width: 20em;
+  -moz-column-gap: 3em;
+}
diff --git a/toolkit/themes/shared/aboutCache.css b/toolkit/themes/shared/aboutCache.css
new file mode 100644
index 000000000..7fb631808
--- /dev/null
+++ b/toolkit/themes/shared/aboutCache.css
@@ -0,0 +1,70 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+h2 {
+  margin-top: 2em;
+}
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  margin-bottom: 1em;
+  padding: 0.5em 0;
+  border-radius: 10px;
+}
+
+#disk,
+#memory,
+#offline {
+  background-color: rgba(0, 0, 0, .1);
+}
+
+th {
+  width: 14em;
+  white-space: nowrap;
+  text-align: end;
+}
+
+td {
+  font-family: -moz-fixed;
+  word-wrap: break-word;
+}
+
+#col-key {
+  width: 60%;
+}
+
+#col-dataSize,
+#col-fetchCount,
+#col-lastModified,
+#col-expires {
+  width: 13%;
+}
+
+#col-pinned {
+  width: 5em;
+}
+
+#entries > tbody > tr:nth-child(odd) {
+  background-color: rgba(0, 0, 0, .03);
+}
+
+#entries > tbody > tr:nth-child(even) {
+  background-color: rgba(0, 0, 0, .06);
+}
+
+#entries > tbody > tr > td {
+  padding: .5em 0;
+  text-align: center;
+}
+
+#entries > thead > tr > th {
+  text-align: center;
+  white-space: normal;
+}
+
+#entries > thead > tr > th:first-child,
+#entries > tbody > tr > td:first-child {
+  text-align: start;
+}
diff --git a/toolkit/themes/shared/aboutCacheEntry.css b/toolkit/themes/shared/aboutCacheEntry.css
new file mode 100644
index 000000000..8c8eb9a97
--- /dev/null
+++ b/toolkit/themes/shared/aboutCacheEntry.css
@@ -0,0 +1,29 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+body {
+  display: table;
+}
+
+table {
+  table-layout: fixed;
+  width: 100%;
+}
+
+th {
+  width: 12em;
+  word-wrap: break-word;
+  vertical-align: top;
+  text-align: end;
+}
+
+td {
+  display: block;
+  font-family: -moz-fixed;
+  white-space: pre-wrap;
+}
+
+#td-key {
+  word-wrap: break-word;
+}
diff --git a/toolkit/themes/shared/aboutMemory.css b/toolkit/themes/shared/aboutMemory.css
new file mode 100644
index 000000000..88fa27d50
--- /dev/null
+++ b/toolkit/themes/shared/aboutMemory.css
@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://global/content/aboutMemory.css");
diff --git a/toolkit/themes/shared/aboutNetworking.css b/toolkit/themes/shared/aboutNetworking.css
new file mode 100644
index 000000000..981c04a39
--- /dev/null
+++ b/toolkit/themes/shared/aboutNetworking.css
@@ -0,0 +1,123 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://global/skin/in-content/common.css");
+
+html {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+}
+
+#sectionTitle {
+  float: left;
+}
+
+#refreshDiv {
+  justify-content: flex-end;
+  margin-bottom: 0.5em;
+}
+
+#refreshButton {
+  margin-top: 0;
+}
+
+/** Categories **/
+
+.category {
+  cursor: pointer;
+  /* Center category names */
+  display: flex;
+  align-items: center;
+}
+
+.category .category-name {
+  pointer-events: none;
+}
+
+#categories hr {
+  border-top-color: rgba(255,255,255,0.15);
+}
+
+/** Warning container **/
+
+/* XXX: a lot of this is duplicated from info-pages.css since that stylesheet
+   is incompatible with this type of layout */
+.warningBackground:not([hidden]) {
+  display: flex;
+}
+
+.warningBackground {
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  position: fixed;
+  background: var(--in-content-page-background);
+}
+
+.title {
+  position: relative;
+  border-bottom: 1px solid var(--in-content-box-border-color);
+  margin-bottom: 1em;
+  padding-bottom: 0.5em;
+}
+
+.title::before {
+  content: "";
+  left: -2.3em;
+  top: 0;
+  position: absolute;
+  display: block;
+  width: 1.6em;
+  height: 1.6em;
+  background: url("chrome://global/skin/icons/warning.svg") no-repeat left center;
+  background-size: 1.6em;
+}
+
+.warningBackground button {
+  margin-top: 1em;
+  margin-left: 0;
+  min-width: 100px;
+}
+
+/** Content area **/
+
+.main-content {
+  flex: 1;
+}
+
+.tab {
+  padding: 0.5em 0;
+}
+
+.tab table {
+  width: 100%;
+}
+
+th, td, table {
+  border-collapse: collapse;
+  border: none;
+  text-align: start;
+}
+
+th {
+  padding-bottom: 0.5em;
+  font-size: larger;
+}
+
+td {
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid var(--in-content-box-border-color);
+}
diff --git a/toolkit/themes/shared/aboutProfiles.css b/toolkit/themes/shared/aboutProfiles.css
new file mode 100644
index 000000000..09dc9ea81
--- /dev/null
+++ b/toolkit/themes/shared/aboutProfiles.css
@@ -0,0 +1,68 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html {
+  --aboutProfiles-table-background: #ebebeb;
+  background-color: var(--in-content-page-background);
+}
+
+body {
+  margin: 40px 48px;
+}
+
+.page-subtitle {
+  margin-bottom: 3em;
+}
+
+button {
+  margin-inline-start: 0;
+  margin-inline-end: 8px;
+}
+
+table {
+  background-color: var(--aboutProfiles-table-background);
+  color: var(--in-content-text-color);
+  font: message-box;
+  text-align: start;
+  width: 100%;
+  border: 1px solid var(--in-content-border-color);
+  border-spacing: 0px;
+}
+
+th, td {
+  border: 1px solid var(--in-content-border-color);
+  padding: 4px;
+  text-align: start;
+}
+
+th {
+  background-color: var(--in-content-table-header-background);
+  color: var(--in-content-selected-text);
+}
+
+th.column {
+  white-space: nowrap;
+  width: 0px;
+}
+
+td {
+  border-color: var(--in-content-table-border-dark-color);
+}
+
+#action-box {
+  background-color: var(--aboutProfiles-table-background);
+  border: 1px solid var(--in-content-border-color);
+  color: var(--in-content-text-color);
+  float: right;
+  margin-top: 2em;
+  margin-bottom: 20px;
+  margin-inline-start: 20px;
+  margin-inline-end: 0;
+  padding: 16px;
+  width: 30%;
+}
+
+#action-box:dir(rtl) {
+  float: left;
+}
diff --git a/toolkit/themes/shared/aboutReader.css b/toolkit/themes/shared/aboutReader.css
new file mode 100644
index 000000000..49436de84
--- /dev/null
+++ b/toolkit/themes/shared/aboutReader.css
@@ -0,0 +1,178 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+body {
+  padding: 64px 51px;
+}
+
+@media print {
+  #container {
+    max-width: 100% !important;
+    font-size: 14px !important;
+    font-family: Georgia, "Times New Roman", serif !important;
+  }
+
+  body {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+}
+
+body.loaded {
+  transition: color 0.4s, background-color 0.4s;
+}
+
+body.light {
+  color: #333333;
+  background-color: #ffffff;
+}
+
+body.dark {
+  color: #eeeeee;
+  background-color: #333333;
+}
+
+body.dark *::-moz-selection {
+  background-color: #FFFFFF;
+  color: #0095DD;
+}
+body.dark a::-moz-selection {
+  color: #DD4800;
+}
+
+body.sepia {
+  color: #5b4636;
+  background-color: #f4ecd8;
+}
+
+body.sans-serif,
+body.sans-serif .remove-button {
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+body.serif,
+body.serif .remove-button  {
+  font-family: Georgia, "Times New Roman", serif;
+}
+
+#container {
+  max-width: 30em;
+  margin: 0 auto;
+}
+
+#container.font-size1 {
+  font-size: 12px;
+}
+
+#container.font-size2 {
+  font-size: 14px;
+}
+
+#container.font-size3 {
+  font-size: 16px;
+}
+
+#container.font-size4  {
+  font-size: 18px;
+}
+
+#container.font-size5 {
+  font-size: 20px;
+}
+
+#container.font-size6 {
+  font-size: 22px;
+}
+
+#container.font-size7 {
+  font-size: 24px;
+}
+
+#container.font-size8 {
+  font-size: 26px;
+}
+
+#container.font-size9 {
+  font-size: 28px;
+}
+
+#container.content-width1 {
+  max-width: 20em;
+}
+
+#container.content-width2 {
+  max-width: 25em;
+}
+
+#container.content-width3 {
+  max-width: 30em;
+}
+
+#container.content-width4  {
+  max-width: 35em;
+}
+
+#container.content-width5 {
+  max-width: 40em;
+}
+
+#container.content-width6 {
+  max-width: 45em;
+}
+
+#container.content-width7 {
+  max-width: 50em;
+}
+
+#container.content-width8 {
+  max-width: 55em;
+}
+
+#container.content-width9 {
+  max-width: 60em;
+}
+
+/* Override some controls and content styles based on color scheme */
+
+body.light > .container > .header > .domain {
+  border-bottom-color: #333333 !important;
+}
+
+body.sepia > .container > .header > .domain {
+  border-bottom-color: #5b4636 !important;
+}
+
+body.dark > .container > .header > .domain {
+  border-bottom-color: #eeeeee !important;
+}
+
+body.sepia > .container > .footer {
+  background-color: #dedad4 !important;
+}
+
+body.light blockquote {
+  border-inline-start: 2px solid #333333 !important;
+}
+
+body.sepia blockquote {
+  border-inline-start: 2px solid #5b4636 !important;
+}
+
+body.dark blockquote {
+  border-inline-start: 2px solid #eeeeee !important;
+}
+
+/* Add toolbar transition base on loaded class  */
+
+body.loaded .toolbar {
+  transition: transform 0.3s ease-out;
+}
+
+body:not(.loaded) .toolbar:-moz-locale-dir(ltr) {
+  transform: translateX(-100%);
+}
+
+body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
+  transform: translateX(100%);
+}
diff --git a/toolkit/themes/shared/aboutReaderContent.css b/toolkit/themes/shared/aboutReaderContent.css
new file mode 100644
index 000000000..633391d37
--- /dev/null
+++ b/toolkit/themes/shared/aboutReaderContent.css
@@ -0,0 +1,177 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#moz-reader-content {
+  display: none;
+  font-size: 1em;
+  line-height: 1.6em;
+}
+
+#moz-reader-content.line-height1 {
+  line-height: 1em;
+}
+
+#moz-reader-content.line-height2 {
+  line-height: 1.2em;
+}
+
+#moz-reader-content.line-height3 {
+  line-height: 1.4em;
+}
+
+#moz-reader-content.line-height4 {
+  line-height: 1.6em;
+}
+
+#moz-reader-content.line-height5 {
+  line-height: 1.8em;
+}
+
+#moz-reader-content.line-height6 {
+  line-height: 2.0em;
+}
+
+#moz-reader-content.line-height7 {
+  line-height: 2.2em;
+}
+
+#moz-reader-content.line-height8 {
+  line-height: 2.4em;
+}
+
+#moz-reader-content.line-height9 {
+  line-height: 2.6em;
+}
+
+@media print {
+  p,
+  code,
+  pre,
+  blockquote,
+  ul,
+  ol,
+  li,
+  figure,
+  .wp-caption {
+    margin: 0 0 10px 0 !important;
+  }
+}
+
+h1,
+h2,
+h3 {
+  font-weight: bold;
+}
+
+h1 {
+  font-size: 1.6em;
+  line-height: 1.25em;
+}
+
+h2 {
+  font-size: 1.2em;
+  line-height: 1.51em;
+}
+
+h3 {
+  font-size: 1em;
+  line-height: 1.66em;
+}
+
+a:link {
+  text-decoration: underline;
+  font-weight: normal;
+}
+
+a:link,
+a:link:hover,
+a:link:active {
+  color: #0095dd;
+}
+
+a:visited {
+  color: #c2e;
+}
+
+* {
+  max-width: 100%;
+  height: auto;
+}
+
+p,
+code,
+pre,
+blockquote,
+ul,
+ol,
+li,
+figure,
+.wp-caption {
+  margin: -10px -10px 20px -10px;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+li {
+  margin-bottom: 0;
+}
+
+li > ul,
+li > ol {
+  margin-bottom: -10px;
+}
+
+p > img:only-child,
+p > a:only-child > img:only-child,
+.wp-caption img,
+figure img {
+  display: block;
+}
+
+img[moz-reader-center] {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.caption,
+.wp-caption-text,
+figcaption {
+  font-size: 0.9em;
+  line-height: 1.48em;
+  font-style: italic;
+}
+
+code,
+pre {
+  white-space: pre-wrap;
+}
+
+blockquote {
+  padding: 0;
+  padding-inline-start: 16px;
+}
+
+ul,
+ol {
+  padding: 0;
+}
+
+ul {
+  padding-inline-start: 30px;
+  list-style: disc;
+}
+
+ol {
+  padding-inline-start: 30px;
+  list-style: decimal;
+}
+
+/* Hide elements with common "hidden" class names */
+.visually-hidden,
+.visuallyhidden,
+.hidden,
+.invisible,
+.sr-only {
+  display: none;
+}
diff --git a/toolkit/themes/shared/aboutReaderControls.css b/toolkit/themes/shared/aboutReaderControls.css
new file mode 100644
index 000000000..afd65f458
--- /dev/null
+++ b/toolkit/themes/shared/aboutReaderControls.css
@@ -0,0 +1,388 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.light-button {
+  color: #333333;
+  background-color: #ffffff;
+}
+
+.dark-button {
+  color: #eeeeee;
+  background-color: #333333;
+}
+
+.sepia-button {
+  color: #5b4636;
+  background-color: #f4ecd8;
+}
+
+.sans-serif-button {
+  font-family: Helvetica, Arial, sans-serif;
+}
+
+.serif-button {
+  font-family: Georgia, "Times New Roman", serif;
+}
+
+/* Loading/error message */
+
+#reader-message {
+  margin-top: 40px;
+  display: none;
+  text-align: center;
+  width: 100%;
+  font-size: 0.9em;
+}
+
+/* Header */
+
+.header {
+  text-align: start;
+  display: none;
+}
+
+.domain {
+  font-size: 0.9em;
+  line-height: 1.48em;
+  padding-bottom: 4px;
+  font-family: Helvetica, Arial, sans-serif;
+  text-decoration: none;
+  border-bottom: 1px solid;
+  color: #0095dd;
+}
+
+.header > h1 {
+  font-size: 1.6em;
+  line-height: 1.25em;
+  width: 100%;
+  margin: 30px 0;
+  padding: 0;
+}
+
+.header > .credits {
+  font-size: 0.9em;
+  line-height: 1.48em;
+  margin: 0 0 30px 0;
+  padding: 0;
+  font-style: italic;
+}
+
+/*======= Controls toolbar =======*/
+
+.toolbar {
+  font-family: Helvetica, Arial, sans-serif;
+  position: fixed;
+  height: 100%;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: #fbfbfb;
+  -moz-user-select: none;
+  border-right: 1px solid #b5b5b5;
+  z-index: 1;
+}
+
+.button {
+  display: block;
+  background-size: 24px 24px;
+  background-repeat: no-repeat;
+  color: #333;
+  background-color: #fbfbfb;
+  height: 40px;
+  padding: 0;
+}
+
+.toolbar .button {
+  width: 40px;
+  background-position: center;
+  margin-right: -1px;
+  border-top: 0;
+  border-left: 0;
+  border-right: 1px solid #b5b5b5;
+  border-bottom: 1px solid #c1c1c1;
+}
+
+.button[hidden] {
+  display: none;
+}
+
+.dropdown {
+  text-align: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.dropdown li {
+  margin: 0;
+  padding: 0;
+}
+
+/*======= Popup =======*/
+
+.dropdown-popup {
+  min-width: 300px;
+  text-align: start;
+  position: absolute;
+  left: 48px; /* offset to account for toolbar width */
+  z-index: 1000;
+  background-color: #fbfbfb;
+  visibility: hidden;
+  border-radius: 4px;
+  border: 1px solid #b5b5b5;
+  border-bottom-width: 0;
+  box-shadow: 0 1px 12px #666;
+}
+
+.keep-open .dropdown-popup {
+  z-index: initial;
+}
+
+.dropdown-popup > hr {
+  display: none;
+}
+
+.open > .dropdown-popup {
+  visibility: visible;
+}
+
+.dropdown-arrow {
+  position: absolute;
+  top: 30px; /* offset arrow from top of popup */
+  left: -16px;
+  width: 24px;
+  height: 24px;
+  background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
+  display: block;
+}
+
+/*======= Font style popup =======*/
+
+#font-type-buttons,
+#font-size-buttons,
+#color-scheme-buttons,
+#content-width-buttons,
+#line-height-buttons {
+  display: flex;
+  flex-direction: row;
+}
+
+#font-type-buttons > button:first-child {
+  border-top-left-radius: 3px;
+}
+#font-type-buttons > button:last-child {
+  border-top-right-radius: 3px;
+}
+#color-scheme-buttons > button:first-child {
+  border-bottom-left-radius: 3px;
+}
+#color-scheme-buttons > button:last-child {
+  border-bottom-right-radius: 3px;
+}
+
+#font-type-buttons > button,
+#font-size-buttons > button,
+#color-scheme-buttons > button,
+#content-width-buttons > button,
+#line-height-buttons > button {
+  text-align: center;
+  border: 0;
+}
+
+#font-type-buttons > button,
+#font-size-buttons > button,
+#content-width-buttons > button,
+#line-height-buttons > button {
+  width: 50%;
+  background-color: transparent;
+  border-left: 1px solid #B5B5B5;
+  border-bottom: 1px solid #B5B5B5;
+}
+
+#color-scheme-buttons > button {
+  width: 33.33%;
+  font-size: 14px;
+}
+
+#color-scheme-buttons > .dark-button {
+  margin-top: -1px;
+  height: 61px;
+}
+
+#font-type-buttons > button:first-child,
+#font-size-buttons > button:first-child,
+#content-width-buttons > button:first-child,
+#line-height-buttons > button:first-child {
+  border-left: 0;
+}
+
+#font-type-buttons > button {
+  display: inline-block;
+  font-size: 62px;
+  height: 100px;
+}
+
+#font-size-buttons > button,
+#color-scheme-buttons > button,
+#content-width-buttons > button,
+#line-height-buttons > button {
+  height: 60px;
+}
+
+#font-type-buttons > button:active:hover,
+#font-type-buttons > button.selected,
+#color-scheme-buttons > button:active:hover,
+#color-scheme-buttons > button.selected {
+  box-shadow: inset 0 -3px 0 0 #fc6420;
+}
+
+#font-type-buttons > button:active:hover,
+#font-type-buttons > button.selected {
+  border-bottom: 1px solid #FC6420;
+}
+
+/* Make the serif button content the same size as the sans-serif button content. */
+#font-type-buttons > button > .description {
+  color: #666;
+  font-size: 12px;
+  margin-top: -5px;
+}
+
+/* Font sizes are different per-platform, so we need custom CSS to line them up. */
+%ifdef XP_MACOSX
+#font-type-buttons > .sans-serif-button > .name {
+  margin-top: 10px;
+}
+
+#font-type-buttons > .sans-serif-button > .description {
+  margin-top: -4px;
+}
+
+#font-type-buttons > .serif-button > .name {
+  font-size: 63px;
+}
+%elifdef XP_WIN
+#font-type-buttons > .sans-serif-button > .name {
+  margin-top: 2px;
+}
+
+#font-type-buttons > .sans-serif-button > .description {
+  margin-top: -4px;
+}
+
+#font-type-buttons > .serif-button > .name {
+  font-size: 63px;
+}
+%else
+#font-type-buttons > .sans-serif-button > .name {
+  margin-top: 5px;
+}
+
+#font-type-buttons > .sans-serif-button > .description {
+  margin-top: -8px;
+}
+
+#font-type-buttons > .serif-button > .name {
+  font-size: 70px;
+}
+%endif
+
+.button:hover,
+#font-size-buttons > button:hover,
+#font-type-buttons > button:hover,
+#content-width-buttons > button:hover,
+#line-height-buttons > button:hover {
+  background-color: #ebebeb;
+}
+
+.dropdown.open,
+.button:active,
+#font-size-buttons > button:active,
+#font-size-buttons > button.selected,
+#content-width-buttons > button:active,
+#content-width-buttons > button.selected,
+#line-height-buttons > button:active,
+#line-height-buttons > button.selected {
+  background-color: #dadada;
+}
+
+/* Only used on Android */
+#font-size-sample {
+  display: none;
+}
+
+.minus-button,
+.plus-button,
+.content-width-minus-button,
+.content-width-plus-button,
+.line-height-minus-button,
+.line-height-plus-button {
+  background-color: transparent;
+  border: 0;
+  background-size: 18px 18px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+/*======= Toolbar icons =======*/
+
+.close-button {
+  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
+  height: 68px;
+  background-position: center 8px;
+}
+
+.close-button:hover {
+  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
+  background-color: #d94141;
+  border-bottom: 1px solid #d94141;
+  border-right: 1px solid #d94141;
+}
+
+.close-button:hover:active {
+  background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
+  background-color: #AE2325;
+  border-bottom: 1px solid #AE2325;
+  border-right: 1px solid #AE2325;
+}
+
+.style-button {
+  background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
+}
+
+.minus-button {
+  background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
+}
+
+.plus-button {
+  background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
+}
+
+.content-width-minus-button {
+  background-size: 42px 16px;
+  background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");
+}
+
+.content-width-plus-button {
+  background-size: 44px 16px;
+  background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg");
+}
+
+.line-height-minus-button {
+  background-size: 34px 14px;
+  background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg");
+}
+
+.line-height-plus-button {
+  background-size: 34px 24px;
+  background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
+}
+
+@media print {
+  .toolbar {
+    display: none !important;
+  }
+}
diff --git a/toolkit/themes/shared/aboutServiceWorkers.css b/toolkit/themes/shared/aboutServiceWorkers.css
new file mode 100644
index 000000000..1f1f29757
--- /dev/null
+++ b/toolkit/themes/shared/aboutServiceWorkers.css
@@ -0,0 +1,44 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+body {
+  min-width: 330px;
+  max-width: 100%;
+  min-height: 330px;
+  max-height: 100%;
+}
+
+.warningBackground {
+  display: none;
+  background: -moz-Dialog;
+  width:100%;
+  height:100%;
+  z-index:10;
+  top:0;
+  left:0;
+  position:fixed;
+}
+
+.warningMessage {
+  color: -moz-FieldText;
+  position: relative;
+  min-width: 330px;
+  max-width: 50em;
+  margin: 4em auto;
+  border: 1px solid ThreeDShadow;
+  border-radius: 10px;
+  padding: 3em;
+  padding-inline-start: 30px;
+  background: -moz-Field;
+  margin-left: auto;
+  text-align: center;
+}
+
+.active {
+  display: block;
+}
+
+.inactive {
+  display: none;
+}
diff --git a/toolkit/themes/shared/aboutSupport.css b/toolkit/themes/shared/aboutSupport.css
new file mode 100644
index 000000000..d26cd3cbd
--- /dev/null
+++ b/toolkit/themes/shared/aboutSupport.css
@@ -0,0 +1,131 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html {
+  --aboutSupport-table-background: #ebebeb;
+  background-color: var(--in-content-page-background);
+}
+
+body {
+  margin: 40px 48px;
+}
+
+.page-subtitle {
+  margin-bottom: 3em;
+}
+
+.major-section {
+  margin-top: 2em;
+  margin-bottom: 1em;
+  font-size: large;
+  text-align: start;
+  font-weight: bold;
+}
+
+button {
+  margin-inline-start: 0;
+  margin-inline-end: 8px;
+}
+
+table {
+  background-color: var(--aboutSupport-table-background);
+  color: var(--in-content-text-color);
+  font: message-box;
+  text-align: start;
+  width: 100%;
+  border: 1px solid var(--in-content-border-color);
+  border-spacing: 0px;
+}
+
+th, td {
+  border: 1px solid var(--in-content-border-color);
+  padding: 4px;
+}
+
+thead th {
+  text-align: center;
+}
+
+th {
+  text-align: start;
+  background-color: var(--in-content-table-header-background);
+  color: var(--in-content-selected-text);
+}
+
+th.title-column {
+  white-space: nowrap;
+  width: 0px;
+  font-size: medium;
+}
+
+th.column {
+  white-space: nowrap;
+  width: 0px;
+}
+
+td {
+  text-align: start;
+  border-color: var(--in-content-table-border-dark-color);
+}
+
+.prefs-table {
+  width: 100%;
+  table-layout: fixed;
+}
+
+.pref-name {
+  width: 70%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.pref-value {
+  width: 30%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#action-box {
+  background-color: var(--aboutSupport-table-background);
+  border: 1px solid var(--in-content-border-color);
+  color: var(--in-content-text-color);
+  float: right;
+  margin-top: 2em;
+  margin-bottom: 20px;
+  margin-inline-start: 20px;
+  margin-inline-end: 0;
+  padding: 16px;
+  width: 30%;
+}
+
+#action-box,
+#reset-box,
+#safe-mode-box {
+  display: none;
+}
+
+#action-box:dir(rtl) {
+  float: left;
+}
+
+#reset-box > h3 {
+  margin-top: 0;
+}
+
+#action-box button {
+  display: block;
+}
+
+#verify-place-result {
+  max-height: 200px;
+  overflow: auto;
+}
+
+.block {
+  display: block;
+}
+
+.hidden {
+  display: none;
+}
diff --git a/toolkit/themes/shared/alert-common.css b/toolkit/themes/shared/alert-common.css
new file mode 100644
index 000000000..010e89393
--- /dev/null
+++ b/toolkit/themes/shared/alert-common.css
@@ -0,0 +1,165 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* ===== alert.css =====================================================
+  == Shared styles specific to the alerts dialog.
+  ======================================================================= */
+
+@import url("chrome://global/skin/");
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+#alertBox[animate] {
+  animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
+}
+
+#alertBox[animate][clicked] {
+  animation-duration: .6s;
+  animation-name: alert-clicked-animation;
+}
+
+/* This is used if the close button is clicked
+   before the animation has finished. */
+#alertBox[animate][closing] {
+  animation-duration: .6s;
+  animation-name: alert-closing-animation;
+}
+
+#alertBox[animate]:not([clicked]):not([closing]):hover {
+  /* !important is necessary because CSS animations have highest
+     importance in the cascade with exception to !important rules. */
+  opacity: 1 !important;
+}
+
+@keyframes alert-animation {
+  from {
+    opacity: 0;
+  }
+  5% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes alert-clicked-animation {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes alert-closing-animation {
+  to {
+    opacity: 0;
+  }
+}
+
+#alertIcon {
+  margin-top: 6px;
+  margin-inline-start: 8px;
+  margin-inline-end: 0;
+  margin-bottom: 0;
+  width: 16px;
+  min-height: 16px;
+  max-height: 16px;
+}
+
+@media (resolution: 2dppx) {
+  #alertIcon {
+    image-rendering: -moz-crisp-edges;
+  }
+}
+
+#alertImage {
+  width: 80px;
+  height: 80px;
+  max-width: 80px;
+  max-height: 80px;
+  object-fit: scale-down;
+  margin: 0 7px 7px;
+}
+
+.alertTextBox {
+  padding-top: 4px;
+  /* The text box width is increased to make up for the lack of image when one
+     is not provided. 349px is the text box width when a picture is present,
+     255px, plus the width of the image, 80px, and the margins, 7px each. */
+  width: 349px;
+}
+
+#alertBox[hasImage] > box > #alertTextBox {
+  width: 255px;
+}
+
+#alertBox:not([hasImage]) > box > #alertTextBox {
+  padding-inline-start: 8px;
+}
+
+#alertTextLabel {
+  padding-inline-end: 8px;
+}
+
+.alertTitle {
+  -moz-box-flex: 1;
+  font-weight: bold;
+  padding: 6px 8px 0;
+  width: 255px;
+}
+
+#alertFooter {
+  -moz-box-align: start;
+}
+
+#alertBox:not([hasOrigin]) > box > #alertTextBox,
+#alertFooter {
+  padding-bottom: 5px;
+}
+
+#alertSourceLabel {
+  -moz-box-flex: 1;
+  font-size: 83.334%;
+  color: GrayText;
+}
+
+#alertSettings {
+  -moz-appearance: none;
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 20px;
+  min-width: 0;
+  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-grayscale");
+  margin-inline-end: 0;
+  margin-bottom: 0;
+}
+
+#alertSettings > .button-box {
+  padding: 0;
+}
+
+#alertSettings:hover,
+#alertSettings[open] {
+  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-inverted");
+}
+
+#alertSettings:hover {
+  background-color: rgb(128,128,128);
+}
+
+#alertSettings[open],
+#alertSettings:hover:active {
+  background-color: rgb(102,102,102);
+}
+
+#alertSettings[focusedViaMouse]:-moz-focusring > .button-box {
+  border-color: transparent;
+}
+
+#alertSettings > .button-box > .button-menu-dropmarker,
+#alertSettings > .button-box > .box-inherit > .button-text {
+  display: none;
+}
diff --git a/toolkit/themes/shared/appPicker.css b/toolkit/themes/shared/appPicker.css
new file mode 100644
index 000000000..3bdb31b6c
--- /dev/null
+++ b/toolkit/themes/shared/appPicker.css
@@ -0,0 +1,23 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+
+#app-picker {
+  width: 320px;
+}
+
+#content-description {
+  font-weight: bold;
+}
+
+#content-icon,
+.listcell-icon {
+  margin: 5px;
+  width: 32px;
+  height: 32px;
+}
+
+.listcell-label {
+  padding: 5px;
+}
diff --git a/toolkit/themes/shared/config.css b/toolkit/themes/shared/config.css
new file mode 100644
index 000000000..8e8d23ace
--- /dev/null
+++ b/toolkit/themes/shared/config.css
@@ -0,0 +1,49 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#warningScreen {
+  font-size: 15px;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-inline-start: calc(48px + 4.6em);
+  padding-inline-end: 48px;
+}
+
+.title {
+  background-image: url("chrome://global/skin/icons/warning.svg");
+}
+
+#warningTitle {
+  font-weight: lighter;
+  line-height: 1.2;
+  color: #333;
+  margin: 0;
+  margin-bottom: .5em;
+}
+
+#warningText {
+  margin: 1em 0;
+}
+
+#warningButton {
+  margin-top: 0.6em;
+}
+
+#filterRow {
+  margin-top: 4px;
+  margin-inline-start: 4px;
+}
+
+#configTree {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+#configTreeBody::-moz-tree-cell-text(user) {
+  font-weight: bold;
+}
+
+#configTreeBody::-moz-tree-cell-text(locked) {
+  font-style: italic;
+}
diff --git a/toolkit/themes/shared/extensions/alerticon-error.svg b/toolkit/themes/shared/extensions/alerticon-error.svg
new file mode 100644
index 000000000..cb883e16e
--- /dev/null
+++ b/toolkit/themes/shared/extensions/alerticon-error.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 18 18">
+	<path fill="#e62117" d="M10.124,1.324l7.705,14.127c0.234,0.421,0.228,0.843-0.019,1.264c-0.114,0.193-0.271,0.347-0.467,0.461c-0.198,0.114-0.41,0.171-0.638,0.171H1.294c-0.228,0-0.44-0.057-0.636-0.171c-0.198-0.114-0.353-0.268-0.467-0.461c-0.247-0.421-0.254-0.843-0.02-1.264L7.876,1.324C7.99,1.117,8.147,0.953,8.348,0.833C8.548,0.712,8.766,0.652,9,0.652c0.234,0,0.451,0.06,0.652,0.181C9.853,0.953,10.009,1.117,10.124,1.324z M10.264,10.695l0.181-4.605c0-0.08-0.034-0.143-0.1-0.191c-0.087-0.073-0.168-0.11-0.241-0.11H7.896c-0.073,0-0.154,0.037-0.241,0.11c-0.067,0.048-0.1,0.118-0.1,0.211l0.17,4.586c0,0.067,0.034,0.122,0.1,0.165c0.067,0.044,0.147,0.065,0.241,0.065h1.856c0.094,0,0.172-0.021,0.236-0.065C10.222,10.818,10.258,10.762,10.264,10.695z M10.284,14.448v-1.907c0-0.094-0.031-0.172-0.095-0.236c-0.064-0.064-0.139-0.095-0.225-0.095H8.036c-0.087,0-0.162,0.031-0.225,0.095c-0.064,0.064-0.095,0.142-0.095,0.236v1.907c0,0.094,0.031,0.173,0.095,0.236c0.064,0.064,0.138,0.095,0.225,0.095h1.927c0.086,0,0.162-0.031,0.225-0.095C10.252,14.621,10.284,14.542,10.284,14.448z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/alerticon-info-negative.svg b/toolkit/themes/shared/extensions/alerticon-info-negative.svg
new file mode 100644
index 000000000..733f8571a
--- /dev/null
+++ b/toolkit/themes/shared/extensions/alerticon-info-negative.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 18 18">
+	<path fill="#828282" d="M10.124,1.324l7.705,14.127c0.234,0.421,0.228,0.843-0.019,1.264c-0.114,0.193-0.271,0.347-0.467,0.461c-0.198,0.114-0.41,0.171-0.638,0.171H1.294c-0.228,0-0.44-0.057-0.636-0.171c-0.198-0.114-0.353-0.268-0.467-0.461c-0.247-0.421-0.254-0.843-0.02-1.264L7.876,1.324C7.99,1.117,8.147,0.953,8.348,0.833C8.548,0.712,8.766,0.652,9,0.652c0.234,0,0.451,0.06,0.652,0.181C9.853,0.953,10.009,1.117,10.124,1.324z M10.264,10.695l0.181-4.605c0-0.08-0.034-0.143-0.1-0.191c-0.087-0.073-0.168-0.11-0.241-0.11H7.896c-0.073,0-0.154,0.037-0.241,0.11c-0.067,0.048-0.1,0.118-0.1,0.211l0.17,4.586c0,0.067,0.034,0.122,0.1,0.165c0.067,0.044,0.147,0.065,0.241,0.065h1.856c0.094,0,0.172-0.021,0.236-0.065C10.222,10.818,10.258,10.762,10.264,10.695z M10.284,14.448v-1.907c0-0.094-0.031-0.172-0.095-0.236c-0.064-0.064-0.139-0.095-0.225-0.095H8.036c-0.087,0-0.162,0.031-0.225,0.095c-0.064,0.064-0.095,0.142-0.095,0.236v1.907c0,0.094,0.031,0.173,0.095,0.236c0.064,0.064,0.138,0.095,0.225,0.095h1.927c0.086,0,0.162-0.031,0.225-0.095C10.252,14.621,10.284,14.542,10.284,14.448z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/alerticon-info-positive.svg b/toolkit/themes/shared/extensions/alerticon-info-positive.svg
new file mode 100644
index 000000000..031190bce
--- /dev/null
+++ b/toolkit/themes/shared/extensions/alerticon-info-positive.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 18 18">
+	<path fill="#62c44e" d="M18,4.796c0,0.31-0.109,0.573-0.325,0.79l-8.408,8.406l-1.579,1.58c-0.217,0.217-0.48,0.325-0.789,0.325c-0.31,0-0.573-0.108-0.79-0.325l-1.579-1.58L0.325,9.79C0.108,9.573,0,9.31,0,9s0.108-0.573,0.325-0.79l1.58-1.579c0.216-0.217,0.479-0.325,0.789-0.325s0.573,0.108,0.79,0.325l3.414,3.426l7.617-7.63c0.217-0.216,0.48-0.325,0.79-0.325c0.309,0,0.572,0.109,0.789,0.325l1.58,1.58C17.891,4.224,18,4.487,18,4.796z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/alerticon-warning.svg b/toolkit/themes/shared/extensions/alerticon-warning.svg
new file mode 100644
index 000000000..2b403220e
--- /dev/null
+++ b/toolkit/themes/shared/extensions/alerticon-warning.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 18 18">
+	<path fill="#f0cd2f" d="M10.124,1.324l7.705,14.127c0.234,0.421,0.228,0.843-0.019,1.264c-0.114,0.193-0.271,0.347-0.467,0.461c-0.198,0.114-0.41,0.171-0.638,0.171H1.294c-0.228,0-0.44-0.057-0.636-0.171c-0.198-0.114-0.353-0.268-0.467-0.461c-0.247-0.421-0.254-0.843-0.02-1.264L7.876,1.324C7.99,1.117,8.147,0.953,8.348,0.833C8.548,0.712,8.766,0.652,9,0.652c0.234,0,0.451,0.06,0.652,0.181C9.853,0.953,10.009,1.117,10.124,1.324z M10.264,10.695l0.181-4.605c0-0.08-0.034-0.143-0.1-0.191c-0.087-0.073-0.168-0.11-0.241-0.11H7.896c-0.073,0-0.154,0.037-0.241,0.11c-0.067,0.048-0.1,0.118-0.1,0.211l0.17,4.586c0,0.067,0.034,0.122,0.1,0.165c0.067,0.044,0.147,0.065,0.241,0.065h1.856c0.094,0,0.172-0.021,0.236-0.065C10.222,10.818,10.258,10.762,10.264,10.695z M10.284,14.448v-1.907c0-0.094-0.031-0.172-0.095-0.236c-0.064-0.064-0.139-0.095-0.225-0.095H8.036c-0.087,0-0.162,0.031-0.225,0.095c-0.064,0.064-0.095,0.142-0.095,0.236v1.907c0,0.094,0.031,0.173,0.095,0.236c0.064,0.064,0.138,0.095,0.225,0.095h1.927c0.086,0,0.162-0.031,0.225-0.095C10.252,14.621,10.284,14.542,10.284,14.448z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/extensionGeneric.svg b/toolkit/themes/shared/extensions/extensionGeneric.svg
new file mode 100644
index 000000000..28c2f7ba3
--- /dev/null
+++ b/toolkit/themes/shared/extensions/extensionGeneric.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="gradient-linear-puzzle-piece" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#66cc52" stop-opacity="1"/>
+      <stop offset="100%" stop-color="#60bf4c" stop-opacity="1"/>
+    </linearGradient>
+  </defs>
+  <path fill="url('#gradient-linear-puzzle-piece')" d="M42,62c2.2,0,4-1.8,4-4l0-14.2c0,0,0.4-3.7,2.8-3.7c2.4,0,2.2,3.9,6.7,3.9c2.3,0,6.2-1.2,6.2-8.2 c0-7-3.9-7.9-6.2-7.9c-4.5,0-4.3,3.7-6.7,3.7c-2.4,0-2.8-3.8-2.8-3.8V22c0-2.2-1.8-4-4-4H31.5c0,0-3.4-0.6-3.4-3 c0-2.4,3.8-2.6,3.8-7.1c0-2.3-1.3-5.9-8.3-5.9s-8,3.6-8,5.9c0,4.5,3.4,4.7,3.4,7.1c0,2.4-3.4,3-3.4,3H6c-2.2,0-4,1.8-4,4l0,7.8 c0,0-0.4,6,4.4,6c3.1,0,3.2-4.1,7.3-4.1c2,0,4,1.9,4,6c0,4.2-2,6.3-4,6.3c-4,0-4.2-4.1-7.3-4.1c-4.8,0-4.4,5.8-4.4,5.8L2,58 c0,2.2,1.8,4,4,4H19c0,0,6.3,0.4,6.3-4.4c0-3.1-4-3.6-4-7.7c0-2,2.2-4.5,6.4-4.5c4.2,0,6.6,2.5,6.6,4.5c0,4-3.9,4.6-3.9,7.7 c0,4.9,6.3,4.4,6.3,4.4H42z"/>
+</svg>
diff --git a/toolkit/themes/shared/extensions/extensions.inc.css b/toolkit/themes/shared/extensions/extensions.inc.css
new file mode 100644
index 000000000..c4523bbe6
--- /dev/null
+++ b/toolkit/themes/shared/extensions/extensions.inc.css
@@ -0,0 +1,1082 @@
+%if 0
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+%endif
+@import url("chrome://global/skin/in-content/common.css");
+
+.main-content {
+  padding: 0;
+}
+
+#nav-header {
+  min-height: 39px;
+  background-color: #424f5a;
+}
+
+.view-pane > .list > scrollbox {
+  padding-right: 48px;
+  padding-left: 48px;
+}
+
+
+/*** global warnings ***/
+
+.global-warning-container {
+  overflow-x: hidden;
+}
+
+.global-warning {
+  -moz-box-align: center;
+  padding: 0 8px;
+  color: #c8a91e;
+  font-weight: bold;
+}
+
+#addons-page[warning] .global-warning-container {
+  background-image: linear-gradient(transparent, rgba(255, 255, 0, 0.1));
+}
+
+#detail-view .global-warning {
+  padding: 4px 12px;
+  border-bottom: 1px solid #c1c1c1;
+}
+
+@media (max-width: 600px) {
+  .global-warning-text {
+    display: none;
+  }
+
+  .global-warning .warning-icon {
+    background-color: #fff;
+    box-shadow: 0 0 2px 5px #fff;
+    border-radius: 10px;
+  }
+}
+
+/*** global informations ***/
+
+/* Plugins aren't yet disabled by safemode (bug 342333),
+   so don't show that warning when viewing plugins. */
+#addons-page[warning="safemode"] .view-pane[type="plugin"] .global-warning-container,
+#addons-page[warning="safemode"] #detail-view[loading="true"] .global-warning-container {
+  background-color: inherit;
+  background-image: none;
+}
+
+
+/*** notification icons ***/
+
+.warning-icon,
+.error-icon,
+.pending-icon,
+.info-icon {
+  width: 16px;
+  height: 16px;
+  margin: 3px 0;
+}
+
+.warning-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
+}
+
+.error-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/alerticon-error.svg");
+}
+
+.pending-icon,
+.info-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-positive.svg");
+}
+
+.addon-view[pending="disable"] .pending-icon,
+.addon-view[pending="uninstall"] .pending-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
+}
+
+/*** view alert boxes ***/
+
+.alert-container {
+  -moz-box-align: center;
+  margin-right: 48px;
+  margin-left: 48px;
+}
+
+.alert-spacer-before {
+  -moz-box-flex: 1;
+}
+
+.alert-spacer-after {
+  -moz-box-flex: 3;
+}
+
+.alert {
+  -moz-box-align: center;
+  padding: 10px;
+  color: #333;
+  border: 1px solid #c1c1c1;
+  border-radius: 2px;
+  background-color: #ebebeb;
+}
+
+.alert .alert-title {
+  font-weight: bold;
+  font-size: 200%;
+  margin-bottom: 15px;
+}
+
+.alert button {
+  margin: 1em 2em;
+}
+
+.loading {
+  list-style-image: url("chrome://global/skin/icons/loading.png");
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .loading > image {
+    width: 16px;
+    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
+  }
+}
+
+button.warning {
+  list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
+}
+
+
+/*** category selector ***/
+
+#categories {
+  padding-top: 0;
+}
+
+.category[selected="true"]:hover {
+  background-color:#1A2533;
+}
+
+.category[disabled] {
+  overflow: hidden;
+  height: 0;
+  min-height: 0;
+  opacity: 0;
+  transition-property: min-height, opacity;
+  transition-duration: 1s, 0.8s;
+}
+
+.category:not([disabled]) {
+  min-height: 40px;
+  transition-property: min-height, opacity;
+  transition-duration: 1s, 0.8s;
+}
+
+/* Maximize the size of the viewport when the window is small */
+@media (max-width: 800px) {
+  .category-name {
+    display: none;
+  }
+}
+
+.category-badge {
+  background-color: #55D4FF;
+  padding: 2px 8px;
+  margin: 6px 0;
+  margin-inline-start: 6px;
+  border-radius: 100%;
+  color: #FFF;
+  font-weight: bold;
+  text-align: center;
+}
+
+.category-badge[value="0"] {
+  display: none;
+}
+
+#category-search > .category-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/category-search.png");
+}
+#category-discover > .category-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/category-discover.png");
+}
+#category-locale > .category-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/category-languages.png");
+}
+#category-extension > .category-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/category-extensions.svg");
+}
+#category-service > .category-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/category-service.png");
+}
+#category-theme > .category-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/category-themes.png");
+}
+#category-plugin > .category-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/category-plugins.png");
+}
+#category-dictionary > .category-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/category-dictionaries.png");
+}
+#category-experiment > .category-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/category-experiments.png");
+}
+#category-availableUpdates > .category-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/category-available.png");
+}
+#category-recentUpdates > .category-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/category-recent.png");
+}
+
+
+/*** header ***/
+
+#header {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  margin-right: 48px;
+  margin-left: 48px;
+}
+
+@media (max-width: 600px) {
+  #header-search {
+    width: 12em;
+  }
+}
+
+.view-header {
+  margin: 0 48px;
+  border-bottom: 1px solid #c1c1c1;
+}
+
+#header-utils-btn {
+  height: 30px;
+  line-height: 20px;
+  border-color: #c1c1c1;
+  background-color: #fbfbfb;
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+#header-utils-btn:not([disabled="true"]):active:hover,
+#header-utils-btn[open="true"] {
+  background-color: #dadada;
+}
+
+.header-button {
+  -moz-appearance: none;
+  border: 1px solid;
+  border-radius: 2px;
+}
+
+.header-button[disabled="true"] > .toolbarbutton-icon {
+  opacity: 0.4;
+}
+
+.header-button:not([disabled="true"]):hover,
+#header-utils-btn:not([disabled="true"]):hover {
+  background-color: #ebebeb;
+  cursor: pointer;
+}
+
+.header-button > .toolbarbutton-text {
+  display: none;
+}
+
+.nav-button {
+  list-style-image: url(chrome://mozapps/skin/extensions/navigation.png);
+  margin-top: 15px;
+  margin-bottom: 15px;
+  border-color: transparent;
+}
+
+.nav-button:not([disabled="true"]):hover {
+  border-color: #ebebeb;
+}
+
+#back-btn:-moz-locale-dir(ltr),
+#forward-btn:-moz-locale-dir(rtl) {
+  -moz-image-region: rect(0, 18px, 18px, 0);
+}
+
+#back-btn:-moz-locale-dir(rtl),
+#forward-btn:-moz-locale-dir(ltr) {
+  -moz-image-region: rect(0, 36px, 18px, 18px);
+}
+
+
+/*** sorters ***/
+
+.sort-controls {
+  -moz-appearance: none;
+}
+
+.sorter {
+  height: 35px;
+  border: none;
+  border-radius: 0;
+  background-color: transparent;
+  color: #536680;
+  margin: 0;
+  min-width: 12px !important;
+  -moz-box-direction: reverse;
+}
+
+.sorter .button-box {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.sorter[checkState="1"],
+.sorter[checkState="2"] {
+  background-color: #ebebeb;
+  box-shadow: 0 -4px 0 0 #ff9500 inset;
+}
+
+.sorter .button-icon {
+  margin-inline-start: 6px;
+}
+
+
+/*** discover view ***/
+
+.discover-spacer-before,
+.discover-spacer-after {
+  -moz-box-flex: 1;
+}
+
+#discover-error .alert {
+  max-width: 45em;
+  -moz-box-flex: 1;
+}
+
+.discover-logo {
+  list-style-image: url("chrome://mozapps/skin/extensions/discover-logo.png");
+  margin-inline-end: 15px;
+}
+
+.discover-title {
+  font-weight: bold;
+  font-size: 24px;
+  font-family: MetaWebPro-Book, "Trebuchet MS", sans-serif;
+  margin: 0 0 15px 0;
+}
+
+.discover-description {
+  text-align: justify;
+  margin: 0 0 15px 0;
+}
+
+.discover-footer {
+  text-align: justify;
+}
+
+
+/*** list ***/
+
+.list {
+  -moz-appearance: none;
+  margin: 0;
+  border-width: 0 !important;
+  background-color: transparent;
+}
+
+.list > scrollbox > .scrollbox-innerbox {
+  border: 1px dotted transparent;
+}
+
+.list:-moz-focusring > scrollbox > .scrollbox-innerbox {
+  border-color: #0095dd;
+}
+
+.addon {
+  color: #444;
+  border-bottom: 1px solid #c1c1c1;
+  padding: 5px;
+  background-origin: border-box;
+}
+
+.addon:not(:only-child):last-child {
+  border-bottom-width: 0;
+}
+
+.details {
+  cursor: pointer;
+  margin: 0;
+  margin-inline-start: 10px;
+}
+
+.icon-container {
+  width: 48px;
+  height: 48px;
+  margin: 3px 7px;
+  -moz-box-align: center;
+  -moz-box-pack: center;
+}
+
+.icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.svg");
+  max-width: 32px;
+  max-height: 32px;
+}
+
+.content-inner-container {
+  margin-inline-end: 5px;
+}
+
+.addon[active="false"] .icon {
+  filter: grayscale(1);
+}
+
+.addon-view[type="theme"] .icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
+}
+
+.addon-view[type="locale"] .icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
+}
+
+.addon-view[type="plugin"] .icon {
+  list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
+}
+
+.addon-view[type="dictionary"] .icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
+}
+
+.addon-view[type="experiment"] .icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/experimentGeneric.png");
+}
+
+.name-container {
+  font-size: 1.3rem;
+  font-weight: bold;
+  -moz-box-align: end;
+  -moz-box-flex: 1;
+}
+
+.creator {
+  font-weight: bold;
+}
+
+.description-container {
+  margin-inline-start: 6px;
+  -moz-box-align: center;
+  font-size: 1.25rem;
+}
+
+.description {
+  margin: 0;
+}
+
+.warning,
+.pending,
+.error {
+  margin-inline-start: 48px;
+  font-weight: bold;
+  -moz-box-align: center;
+}
+
+.content-container,
+.basicinfo-container {
+  -moz-box-align: start;
+}
+
+.addon[status="installing"] > .content-container {
+  -moz-box-align: stretch;
+}
+
+.update-info-container {
+  -moz-box-align: center;
+}
+
+.update-available {
+  -moz-box-align: end;
+}
+
+.install-status-container {
+  -moz-box-pack: end;
+  -moz-box-align: end;
+}
+
+.name-outer-container {
+  -moz-box-pack: center;
+}
+
+.relnotes-toggle-container,
+.icon-outer-container {
+  -moz-box-pack: start;
+}
+
+.status-container,
+.control-container {
+  -moz-box-pack: end;
+}
+
+.addon-view .warning {
+  color: #d8b826;
+}
+
+.addon-view .error {
+  color: #e62117;
+}
+
+.addon-view .pending {
+  color: #62c44e;
+}
+
+.addon-view[pending="disable"] .pending,
+.addon-view[pending="uninstall"] .pending {
+  color: #898989;
+}
+
+.addon .relnotes-container {
+  -moz-box-align: start;
+  margin-inline-start: 6px;
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition-property: height, opacity;
+  transition-duration: 0.5s, 0.5s;
+}
+
+.addon[show-relnotes] .relnotes-container {
+  opacity: 1;
+  transition-property: height, opacity;
+  transition-duration: 0.5s, 0.5s;
+}
+
+.addon .relnotes-header {
+  font-weight: bold;
+  margin: 10px 0;
+}
+
+.addon .relnotes-toggle {
+  -moz-appearance: none;
+  border: none;
+  background: transparent;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.addon .relnotes-toggle > .button-box > .button-icon {
+  padding-inline-start: 4px;
+}
+
+.addon-view[notification],
+.addon-view[pending] {
+  --view-highlight-color: transparent;
+  background-image: radial-gradient(at 50% 0%,
+                                    var(--view-highlight-color) 0%,
+                                    transparent 75%);
+}
+.addon-view[notification="warning"] {
+  --view-highlight-color: #F9F5E5;
+}
+
+.addon-view[notification="error"] {
+  --view-highlight-color: #FFE8E9;
+}
+
+.addon-view[pending="enable"],
+.addon-view[pending="upgrade"],
+.addon-view[pending="install"] {
+  --view-highlight-color: #EFFAF2;
+}
+
+.addon-view[pending="disable"],
+.addon-view[pending="uninstall"] {
+  --view-highlight-color: #F2F2F2;
+}
+
+.addon[selected] {
+  background-color: #fafafa;
+  color: #333;
+  padding-inline-start: 1px; /* compensate the 4px border */
+  border-inline-start: solid 4px #ff9500;
+}
+
+.addon[active="false"] > .content-container > .content-inner-container {
+  color: #999;
+}
+
+.addon[active="false"][selected] > .content-container > .content-inner-container {
+  color: #777;
+}
+
+
+/*** item - uninstalled ***/
+
+.addon[status="uninstalled"] {
+  border: none;
+}
+
+.addon[status="uninstalled"] > .container {
+  -moz-box-align: center;
+  padding: 4px 20px;
+  background-color: #FDFFA8;
+  border-radius: 8px;
+  font-size: 120%;
+}
+
+.addon[status="uninstalled"][selected] {
+  background-color: transparent;
+}
+
+
+/*** search view ***/
+
+#search-filter {
+  padding: 5px 20px;
+  margin-right: 48px;
+  margin-left: 48px;
+  font-size: 120%;
+  border-bottom: 1px solid #c1c1c1;
+  overflow-x: hidden;
+}
+
+#search-filter-label {
+  font-weight: bold;
+  color: grey;
+  margin-inline-end: 10px;
+}
+
+#search-allresults-link {
+  margin-top: 1em;
+  margin-bottom: 2em;
+}
+
+
+/*** detail view ***/
+
+#detail-view > .box-inherit {
+  margin-right: 48px;
+  margin-left: 48px;
+}
+
+#detail-view .loading {
+  opacity: 0;
+}
+
+#detail-view[loading-extended] .loading {
+  opacity: 1;
+  transition-property: opacity;
+  transition-duration: 1s;
+}
+
+.detail-view-container {
+  padding-inline-end: 2em;
+  padding-bottom: 2em;
+  font-size: 1.25rem;
+  color: #333;
+}
+
+#detail-notifications {
+  margin-top: 1em;
+  margin-bottom: 2em;
+}
+
+#detail-notifications .warning,
+#detail-notifications .pending,
+#detail-notifications .error {
+  margin-inline-start: 0;
+}
+
+#detail-icon-container {
+  width: 64px;
+  margin-inline-end: 10px;
+  margin-top: 6px;
+}
+
+#detail-icon {
+  max-width: 64px;
+  max-height: 64px;
+}
+
+#detail-summary {
+  margin-bottom: 2em;
+}
+
+#detail-name-container {
+  font-size: 2.5rem;
+  font-weight: normal;
+}
+
+#detail-screenshot-box {
+  margin-inline-end: 2em;
+  background-image: linear-gradient(rgba(255,255,255,.5), transparent);
+  background-color: white;
+  box-shadow: 0 1px 2px #666;
+  border-radius: 2px;
+}
+
+#detail-screenshot {
+  max-width: 300px;
+  max-height: 300px;
+}
+
+#detail-screenshot[loading] {
+  background-image: url("chrome://global/skin/icons/loading.png");
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+}
+
+@media (min-resolution: 1.1dppx) {
+  #detail-screenshot[loading] {
+    background-image: url("chrome://global/skin/icons/loading@2x.png");
+    background-size: 16px;
+  }
+}
+
+#detail-screenshot[loading="error"] {
+  background-image: url("chrome://global/skin/media/error.png");
+}
+
+#detail-desc-container {
+  margin-bottom: 2em;
+}
+
+#detail-desc, #detail-fulldesc {
+  margin-inline-start: 6px;
+  /* This is necessary to fix layout issues with multi-line descriptions, see
+     bug 592712*/
+  outline: solid transparent;
+  white-space: pre-wrap;
+  min-width: 10em;
+}
+
+#detail-fulldesc {
+  margin-top: 1em;
+}
+
+#detail-contributions {
+  border-radius: 2px;
+  border: 1px solid #D2DBE8;
+  margin-bottom: 2em;
+  padding: 1em;
+  background-color: #F3F7FB;
+}
+
+#detail-contrib-description {
+  font-style: italic;
+  margin-bottom: 1em;
+  color: #373D48;
+}
+
+#detail-contrib-suggested {
+  color: grey;
+  font-weight: bold;
+}
+
+#detail-contrib-btn {
+  color: #FFF;
+  text-shadow: none;
+  border: 1px solid #0095dd;
+  list-style-image: url("chrome://mozapps/skin/extensions/heart.png");
+  background-color: #0095dd;
+}
+
+#detail-contrib-btn .button-icon {
+  margin-inline-end: 5px;
+}
+
+#detail-contrib-btn:not(:active):hover {
+  border-color: #008acb;
+  background-color: #008acb;
+}
+
+#detail-contrib-btn:active:hover {
+  background-color: #006b9d;
+  border-color: #006b9d;
+}
+
+#detail-grid {
+  margin-bottom: 2em;
+}
+
+#detail-grid > columns > column:first-child {
+  min-width: 15em;
+  max-width: 25em;
+}
+
+.detail-row[first-row="true"],
+.detail-row-complex[first-row="true"],
+setting[first-row="true"] {
+  border-top: none;
+}
+
+.detail-row,
+.detail-row-complex,
+setting {
+  border-top: 1px solid #c1c1c1;
+  -moz-box-align: center;
+  min-height: 35px;
+  line-height: 20px;
+  text-shadow: 0 1px 1px #fefffe;
+}
+
+#detail-controls {
+  margin-bottom: 1em;
+}
+
+.inline-options-browser,
+setting[first-row="true"] {
+  margin-top: 2em;
+}
+
+setting {
+  -moz-box-align: start;
+}
+
+.preferences-alignment {
+  min-height: 30px;
+  -moz-box-align: center;
+}
+
+.preferences-description {
+  font-size: 90.9%;
+  color: graytext;
+  margin-top: -2px;
+  margin-inline-start: 2em;
+  white-space: pre-wrap;
+}
+
+.preferences-description:empty {
+  display: none;
+}
+
+setting[type="radio"] > radiogroup {
+  -moz-box-orient: horizontal;
+}
+
+
+/*** creator ***/
+
+.creator > label {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+.creator > .text-link {
+  margin-top: 1px;
+  margin-bottom: 1px;
+}
+
+
+/*** rating ***/
+
+.meta-rating {
+  margin-inline-end: 0;
+  padding-top: 2px;
+}
+
+
+/*** download progress ***/
+
+.download-progress {
+  border: 1px solid #c1c1c1;
+  border-radius: 2px;
+  background-color: #fbfbfb;
+  width: 200px;
+  height: 30px;
+  margin: 2px 4px;
+}
+
+.download-progress[mode="undetermined"] {
+  border-color: #0095dd;
+}
+
+.download-progress .start-cap,
+.download-progress[complete] .end-cap,
+.download-progress[mode="undetermined"] .end-cap,
+.download-progress .progress .progress-bar {
+  -moz-appearance: none;
+  background-color: #0095dd;
+}
+
+.download-progress .progress .progress-bar  {
+  min-height: 28px;
+}
+
+.download-progress .progress {
+  -moz-appearance: none;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+.download-progress .start-cap,
+.download-progress .end-cap {
+  width: 4px;
+}
+
+.download-progress .start-cap:-moz-locale-dir(ltr),
+.download-progress .end-cap:-moz-locale-dir(rtl) {
+  border-radius: 1px 0 0 1px;
+}
+
+.download-progress .end-cap:-moz-locale-dir(ltr),
+.download-progress .start-cap:-moz-locale-dir(rtl) {
+  border-radius: 0 1px 1px 0;
+}
+
+.download-progress .cancel {
+  -moz-appearance: none;
+  padding: 3px;
+  min-width: 0;
+  width: 20px;
+  height: 20px;
+  margin: 3px;
+}
+
+.download-progress .cancel .button-box {
+  /* override in-content/common.css !important rule */
+  padding: 0 !important;
+  border: none;
+}
+
+.download-progress .cancel .button-text {
+  display: none;
+}
+
+.download-progress .cancel .button-icon {
+  margin: 0;
+}
+
+.download-progress .cancel {
+  list-style-image: url('chrome://mozapps/skin/extensions/cancel.png');
+}
+
+.download-progress .status-container {
+  -moz-box-align: center;
+}
+
+.download-progress .status {
+  color: #333;
+  text-shadow: #fff 0 0 2px;
+}
+
+
+/*** install status ***/
+
+.install-status {
+  -moz-box-align: center;
+}
+
+
+/*** check for updates ***/
+
+#updates-container {
+  -moz-box-align: center;
+}
+
+#updates-container .button-link {
+  font-weight: bold;
+}
+
+#updates-installed,
+#updates-downloaded {
+  color: #00BB00;
+  font-weight: bold;
+}
+
+#update-selected {
+  margin: 12px;
+}
+
+
+/*** buttons ***/
+
+.addon-control[disabled="true"]:not(.no-auto-hide) {
+  display: none;
+}
+
+.no-auto-hide .addon-control {
+  display: block !important;
+}
+
+button.button-link {
+  -moz-appearance: none;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  color: #0095dd;
+  cursor: pointer;
+  min-width: 0;
+  min-height: 20px;
+  margin: 0 6px;
+}
+
+button.button-link:not(:-moz-focusring) > .button-box {
+  border-width: 0;
+  margin: 1px;
+}
+
+button.button-link:hover {
+  background-color: transparent;
+  color: #178ce5;
+  text-decoration: underline;
+}
+
+/* Needed to override normal button style from inContent.css */
+button.button-link:not([disabled="true"]):active:hover {
+  background-color: transparent;
+  color: #ff9500;
+  text-decoration: none;
+}
+
+
+/*** telemetry experiments ***/
+
+#detail-experiment-container {
+  font-size: 80%;
+  margin-bottom: 1em;
+}
+
+#detail-experiment-bullet-container,
+#detail-experiment-state,
+#detail-experiment-time,
+.experiment-bullet-container,
+.experiment-state,
+.experiment-time {
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.addon .experiment-bullet,
+#detail-experiment-bullet {
+  fill: rgb(158, 158, 158);
+}
+
+.addon[active="true"] .experiment-bullet,
+#detail-view[active="true"] #detail-experiment-bullet {
+  fill: rgb(106, 201, 20);
+}
+
+/*** info UI for add-ons that have been disabled for being unsigned ***/
+
+#show-disabled-unsigned-extensions:not(:hover) {
+  background-color: #fcf8ed;
+}
+
+#disabled-unsigned-addons-info {
+  margin-bottom: 2em;
+  margin-right: 48px;
+  margin-left: 48px;
+}
+
+#disabled-unsigned-addons-heading {
+  font-size: 1.4em;
+  font-weight: bold;
+  margin-bottom: .5em;
+}
+
+#signing-dev-info {
+  font-style: italic;
+}
+
+#detail-findUpdates-btn[hidden] {
+  display: -moz-box;
+  visibility: hidden;
+}
diff --git a/toolkit/themes/shared/extensions/navigation.png b/toolkit/themes/shared/extensions/navigation.png
new file mode 100644
index 000000000..67ff3d9a7
--- /dev/null
+++ b/toolkit/themes/shared/extensions/navigation.png
diff --git a/toolkit/themes/shared/extensions/newaddon.inc.css b/toolkit/themes/shared/extensions/newaddon.inc.css
new file mode 100644
index 000000000..52352ccd2
--- /dev/null
+++ b/toolkit/themes/shared/extensions/newaddon.inc.css
@@ -0,0 +1,114 @@
+%if 0
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+%endif
+@import url("chrome://global/skin/in-content/common.css");
+
+#addon-page {
+  font-size: 1.1em;
+}
+
+#addon-scrollbox {
+  overflow: auto;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+}
+
+#spacer-start {
+  -moz-box-flex: 1;
+}
+
+#spacer-end {
+  -moz-box-flex: 3;
+}
+
+#addon-container {
+  overflow: visible;
+  max-width: 800px;
+  margin: 20px;
+  padding: 30px 90px;
+}
+
+#addon-info {
+  -moz-box-align: start;
+  margin: 25px 10px;
+}
+
+#icon {
+  margin-top: 8px;
+  margin-inline-end: 10px;
+  max-width: 64px;
+  max-height: 64px;
+  list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.svg");
+}
+
+.addon-info[type="theme"] #icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");
+}
+
+.addon-info[type="locale"] #icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/localeGeneric.png");
+}
+
+.addon-info[type="plugin"] #icon {
+  list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");
+}
+
+.addon-info[type="dictionary"] #icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/dictionaryGeneric.png");
+}
+
+#name {
+  font-size: 130%;
+}
+
+#author {
+  color: GrayText;
+}
+
+#location {
+  color: GrayText;
+}
+
+#warning {
+  margin-bottom: 25px;
+  -moz-box-align: start;
+}
+
+#warning-icon {
+  list-style-image: url("chrome://mozapps/skin/extensions/alerticon-warning.svg");
+  width: 16px;
+  height: 16px;
+  margin-top: 5px;
+  margin-inline-end: 5px;
+}
+
+#allow {
+  margin-inline-start: 84px;
+  margin-bottom: 20px;
+}
+
+#buttonDeck {
+  margin-top: 25px;
+  -moz-box-align: stretch;
+}
+
+#continuePanel {
+  -moz-box-pack: end;
+  -moz-box-align: end;
+}
+
+#restartPanel {
+  -moz-box-pack: end;
+  -moz-box-align: stretch;
+}
+
+#restartPanelButtons {
+  margin-top: 25px;
+  -moz-box-pack: end;
+}
+
+#later {
+  color: GrayText;
+}
diff --git a/toolkit/themes/shared/extensions/utilities.svg b/toolkit/themes/shared/extensions/utilities.svg
new file mode 100644
index 000000000..8bf24458c
--- /dev/null
+++ b/toolkit/themes/shared/extensions/utilities.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+  <style>
+    use:not(:target) {
+      display: none;
+    }
+    use {
+      fill: #424f5a;
+    }
+    use[id$="-native"] {
+      fill: GrayText;
+    }
+    use[id$="-grayscale"] {
+      fill: #4d4d4d;
+    }
+    use[id$="-inverted"] {
+      fill: #ddd;
+    }
+  </style>
+  <defs>
+    <path id="utilities-shape" d="m11.5,13.9l-.6-1.5c.3-.2 .5-.4 .8-.6 .2-.2 .4-.5 .6-.7l1.5,.6c.3,.1 .6,0 .7-.3l.4-1c.1-.3 0-.6-.3-.7l-1.5-.6c.1-.6 .1-1.3 0-2l1.5-.6c.3-.1 .4-.4 .3-.7l-.4-1c-.1-.3-.4-.4-.7-.3l-1.5,.6c-.2-.3-.4-.5-.6-.8-.2-.1-.5-.3-.7-.5l.6-1.5c.1-.3 0-.6-.3-.7l-.9-.4c-.3-.1-.6,0-.7,.3l-.6,1.5c-.6-.1-1.3-.1-2,0l-.6-1.5c-.1-.3-.4-.4-.7-.3l-1,.4c-.2,.1-.3,.4-.2,.6l.6,1.5c-.3,.3-.5,.5-.8,.7-.2,.3-.4,.5-.6,.8l-1.5-.7c-.3-.1-.6,0-.7,.3l-.4,.9c-.1,.3 0,.6 .3,.7l1.5,.7c-.1,.6-.1,1.3 0,1.9l-1.5,.6c-.3,.1-.4,.4-.3,.7l.4,1c.1,.3 .4,.4 .7,.3l1.5-.6c.2,.3 .4,.5 .6,.8 .2,.2 .5,.4 .7,.6l-.6,1.5c-.1,.3 0,.6 .3,.7l1,.4c.3,.1 .6,0 .7-.3l.6-1.5c.6,.1 1.3,.1 2,0l.6,1.5c.1,.3 .4,.4 .7,.3l1-.4c.1-.1 .3-.4 .1-.7zm-5.1-4.2c-.9-.9-.9-2.4 0-3.3 .9-.9 2.4-.9 3.3,0 .9,.9 .9,2.4 0,3.3-.9,.9-2.4,.9-3.3,0z"/>
+  </defs>
+  <use id="utilities" xlink:href="#utilities-shape"/>
+  <use id="utilities-native" xlink:href="#utilities-shape"/>
+  <use id="utilities-grayscale" xlink:href="#utilities-shape"/>
+  <use id="utilities-inverted" xlink:href="#utilities-shape"/>
+</svg>
diff --git a/toolkit/themes/shared/formautofill/requestAutocomplete.css b/toolkit/themes/shared/formautofill/requestAutocomplete.css
new file mode 100644
index 000000000..7ddd77c6b
--- /dev/null
+++ b/toolkit/themes/shared/formautofill/requestAutocomplete.css
@@ -0,0 +1,11 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://global/skin/in-content/common.css");
+
+:root {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+}
diff --git a/toolkit/themes/shared/icons/find-arrows.svg b/toolkit/themes/shared/icons/find-arrows.svg
new file mode 100644
index 000000000..608c0a7db
--- /dev/null
+++ b/toolkit/themes/shared/icons/find-arrows.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+  <style>
+    path:not(:target) {
+      display: none;
+    }
+    path {
+      fill: -moz-dialogtext;
+    }
+  </style>
+  <path id="glyph-find-previous" d="M5.407,1.5l-5,4.599L1.65,7.283l3.757-3.387l3.705,3.385l1.296-1.158L5.407,1.5z"/>
+  <path id="glyph-find-next" d="M5.547,8.255L0.538,3.53l1.239-1.265l3.77,3.641l3.719-3.641l1.264,1.188L5.547,8.255z"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/input-clear.svg b/toolkit/themes/shared/icons/input-clear.svg
new file mode 100644
index 000000000..0abaaf9b1
--- /dev/null
+++ b/toolkit/themes/shared/icons/input-clear.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+ <!-- This Source Code Form is subject to the terms of the Mozilla Public
+    - License, v. 2.0. If a copy of the MPL was not distributed with this
+    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+  <style>
+    .st0 {
+      fill: #858585;
+    }
+    .st1 {
+      fill: #FFFFFF;
+    }
+  </style>
+  <circle id="Combined-Shape" class="st0" cx="6" cy="6" r="6"/>
+  <polygon id="Close_Button_-_Normal-path" class="st1" points="9,8.1 8.1,9 6,6.9 3.9,9 3,8.1 5.1,6 3,3.9 3.9,3 6,5.1 8.1,3 9,3.9 6.9,6"/>
+</svg>
diff --git a/toolkit/themes/shared/icons/loading.png b/toolkit/themes/shared/icons/loading.png
new file mode 100644
index 000000000..b886c73ef
--- /dev/null
+++ b/toolkit/themes/shared/icons/loading.png
diff --git a/toolkit/themes/shared/icons/loading@2x.png b/toolkit/themes/shared/icons/loading@2x.png
new file mode 100644
index 000000000..ac928c585
--- /dev/null
+++ b/toolkit/themes/shared/icons/loading@2x.png
diff --git a/toolkit/themes/shared/in-content/check-partial.svg b/toolkit/themes/shared/in-content/check-partial.svg
new file mode 100644
index 000000000..e436abf0d
--- /dev/null
+++ b/toolkit/themes/shared/in-content/check-partial.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21" height="21" viewBox="0 0 21 21">
+  <style>
+    use:not(:target) {
+      display: none;
+    }
+    use {
+      fill: #2292d0;
+    }
+    use[id$="-inverted"] {
+      fill: #fff;
+      stroke: #0095dd;
+      stroke-width: 0.5;
+    }
+    use[id$="-native"] {
+      fill: -moz-dialogText;
+    }
+  </style>
+  <defs>
+    <rect id="check-shape" x="3" y="9" width="15" height="3"/>
+  </defs>
+  <use id="check-partial" xlink:href="#check-shape"/>
+  <use id="check-partial-inverted" xlink:href="#check-shape"/>
+  <use id="check-partial-native" xlink:href="#check-shape"/>
+</svg>
diff --git a/toolkit/themes/shared/in-content/check.svg b/toolkit/themes/shared/in-content/check.svg
new file mode 100644
index 000000000..1f9f99cca
--- /dev/null
+++ b/toolkit/themes/shared/in-content/check.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21" height="21" viewBox="0 0 21 21">
+  <style>
+    use:not(:target) {
+      display: none;
+    }
+    use {
+      fill: #2292d0;
+    }
+    use[id$="-inverted"] {
+      fill: #fff;
+      stroke: #0095dd;
+      stroke-width: 0.5;
+    }
+    use[id$="-native"] {
+      fill: -moz-dialogText;
+    }
+  </style>
+  <defs>
+    <path id="check-shape" d="M 9.39,16.5 16.28,6 14.77,4.5 9.37,12.7 6.28,9.2 4.7,10.7 z"/>
+  </defs>
+  <use id="check" xlink:href="#check-shape"/>
+  <use id="check-inverted" xlink:href="#check-shape"/>
+  <use id="check-native" xlink:href="#check-shape"/>
+</svg>
diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css
new file mode 100644
index 000000000..ecd961d8d
--- /dev/null
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -0,0 +1,830 @@
+%if 0
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+%endif
+@namespace html "http://www.w3.org/1999/xhtml";
+@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
+*|*:root {
+  --in-content-page-color: #424e5a;
+  --in-content-page-background: #fbfbfb;
+  --in-content-text-color: #333;
+  --in-content-selected-text: #fff;
+  --in-content-header-border-color: #c8c8c8;
+  --in-content-box-background: #fff;
+  --in-content-box-background-odd: #f3f6fa;
+  --in-content-box-background-hover: #ebebeb;
+  --in-content-box-background-active: #dadada;
+  --in-content-box-border-color: #c1c1c1;
+  --in-content-item-hover: rgba(0,149,221,0.25);
+  --in-content-item-selected: #0095dd;
+  --in-content-border-highlight: #ff9500;
+  --in-content-border-focus: #0095dd;
+  --in-content-border-color: #c1c1c1;
+  --in-content-category-text: #c1c1c1;
+  --in-content-category-border-focus: 1px dotted #fff;
+  --in-content-category-text-selected: #f2f2f2;
+  --in-content-category-background: #424f5a;
+  --in-content-category-background-hover: #5e6972;
+  --in-content-category-background-active: #343f48;
+  --in-content-tab-color: #424f5a;
+  --in-content-link-color: #0095dd;
+  --in-content-link-color-hover: #178ce5;
+  --in-content-link-color-active: #ff9500;
+  --in-content-link-color-visited: #551a8b;
+  --in-content-primary-button-background: #0095dd;
+  --in-content-primary-button-background-hover: #008acb;
+  --in-content-primary-button-background-active: #006b9d;
+  --in-content-table-border-dark-color: #d1d1d1;
+  --in-content-table-header-background: #0095dd;
+}
+
+html|html,
+xul|page,
+xul|window {
+  font: message-box;
+  -moz-appearance: none;
+  background-color: var(--in-content-page-background);
+  color: var(--in-content-page-color);
+}
+
+html|body {
+  font-size: 15px;
+  font-weight: normal;
+  margin: 0;
+}
+
+html|h1 {
+  font-size: 2.5em;
+  font-weight: lighter;
+  line-height: 1.2;
+  color: var(--in-content-text-color);
+  margin: 0;
+  margin-bottom: .5em;
+}
+
+html|hr {
+  border-style: solid none none none;
+  border-color: var(--in-content-border-color);
+}
+
+xul|caption {
+  -moz-appearance: none;
+  margin: 0;
+}
+
+html|h2,
+xul|caption > xul|checkbox,
+xul|caption > xul|label {
+  font-size: 1.3rem;
+  font-weight: bold;
+  line-height: 22px;
+}
+
+xul|caption > xul|checkbox,
+xul|caption > xul|label {
+  margin: 0 !important;
+}
+
+*|*.main-content {
+  padding-top: 40px;
+  padding-inline-end: 44px; /* compensate the 4px margin of child elements */
+  padding-bottom: 48px;
+  padding-inline-start: 48px;
+  overflow: auto;
+}
+
+xul|prefpane > xul|*.content-box {
+  overflow: visible;
+}
+
+/* groupboxes */
+
+xul|groupbox {
+  -moz-appearance: none;
+  border: none;
+  margin: 15px 0 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  font-size: 1.25rem;
+}
+
+xul|groupbox xul|label:not(.menu-accel):not(.menu-text):not(.indent),
+xul|groupbox xul|description {
+  /* !important needed to override toolkit !important rule */
+  margin-inline-start: 0 !important;
+  margin-inline-end: 0 !important;
+}
+
+/* tabpanels and tabs */
+
+xul|tabpanels {
+  -moz-appearance: none;
+  font-size: 1.25rem;
+  line-height: 22px;
+  border: none;
+  padding: 0;
+  background-color: transparent;
+  color: inherit;
+}
+
+xul|tabs {
+  margin-bottom: 15px;
+  border-top: 1px solid var(--in-content-box-border-color);
+  border-bottom: 1px solid var(--in-content-box-border-color);
+  background-color: var(--in-content-page-background);
+}
+
+xul|*.tabs-left,
+xul|*.tabs-right {
+  border-bottom: none;
+}
+
+xul|tab {
+  -moz-appearance: none;
+  margin-top: 0;
+  padding: 4px 20px;
+  min-height: 44px;
+  color: var(--in-content-tab-color);
+  background-color: var(--in-content-page-background);
+  border-width: 0;
+  /* !important overrides tabbox.css RTL and visuallyselected rules */
+  border-radius: 0 !important;
+  transition: background-color 50ms ease 0s;
+}
+
+xul|tab:hover {
+  background-color: var(--in-content-box-background-hover);
+}
+
+xul|tab[selected] {
+  background-color: var(--in-content-box-background-hover);
+  padding-bottom: 0; /* compensate the 4px border */
+  border-bottom: 4px solid var(--in-content-border-highlight);
+}
+
+xul|*.tab-text {
+  font-size: 1.3rem;
+  line-height: 22px;
+}
+
+/* html buttons */
+
+html|button {
+  padding: 3px;
+  /* override forms.css */
+  font: inherit;
+}
+
+/* xul buttons and menulists */
+
+*|button,
+html|select,
+xul|colorpicker[type="button"],
+xul|menulist {
+  -moz-appearance: none;
+  min-height: 30px;
+  color: var(--in-content-text-color);
+  border: 1px solid var(--in-content-box-border-color);
+  -moz-border-top-colors: none !important;
+  -moz-border-right-colors: none !important;
+  -moz-border-bottom-colors: none !important;
+  -moz-border-left-colors: none !important;
+  border-radius: 2px;
+  background-color: var(--in-content-page-background);
+}
+
+html|button:enabled:hover,
+html|select:enabled:hover,
+xul|button:not([disabled="true"]):hover,
+xul|colorpicker[type="button"]:not([disabled="true"]):hover,
+xul|menulist:not([disabled="true"]):hover {
+  background-color: var(--in-content-box-background-hover);
+}
+
+html|button:enabled:hover:active,
+html|select:enabled:hover:active,
+xul|button:not([disabled="true"]):hover:active,
+xul|colorpicker[type="button"]:not([disabled="true"]):hover:active,
+xul|menulist[open="true"]:not([disabled="true"]) {
+  background-color: var(--in-content-box-background-active);
+}
+
+html|button:disabled,
+html|select:disabled,
+xul|button[disabled="true"],
+xul|colorpicker[type="button"][disabled="true"],
+xul|menulist[disabled="true"] {
+  opacity: 0.5;
+}
+
+*|button.primary {
+  background-color: var(--in-content-primary-button-background);
+  border-color: transparent;
+  color: var(--in-content-selected-text);
+}
+
+html|button.primary:enabled:hover,
+xul|button.primary:not([disabled="true"]):hover {
+  background-color: var(--in-content-primary-button-background-hover);
+}
+
+html|button.primary:enabled:hover:active,
+xul|button.primary:not([disabled="true"]):hover:active {
+  background-color: var(--in-content-primary-button-background-active);
+}
+
+xul|colorpicker[type="button"] {
+  padding: 6px;
+  width: 50px;
+}
+
+xul|button > xul|*.button-box,
+xul|menulist > xul|*.menulist-label-box {
+  padding-right: 10px !important;
+  padding-left: 10px !important;
+}
+
+xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] {
+  margin-inline-end: 5px;
+}
+
+xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
+  -moz-appearance: none;
+  margin: 1px 0;
+  margin-inline-start: 10px;
+  padding: 0;
+  width: 10px;
+  height: 16px;
+  border: none;
+  background-color: transparent;
+  list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
+}
+
+xul|*.help-button {
+  min-width: 16px;
+  margin-inline-end: 0;
+  border-width: 0;
+  background-image: none;
+  box-shadow: none;
+  list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help");
+}
+
+xul|*.help-button:not([disabled="true"]):hover {
+  background-image: none;
+  /* Override default button background */
+  background-color: transparent;
+  list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help-hover");
+}
+
+xul|*.help-button:not([disabled="true"]):hover:active {
+  background-image: none;
+  /* Override default button background */
+  background-color: transparent;
+  list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help-pressed");
+}
+
+xul|*.close-icon > xul|*.button-box,
+xul|*.help-button > xul|*.button-box {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+xul|*.help-button > xul|*.button-box > xul|*.button-icon {
+  width: 16px;
+  height: 16px;
+}
+
+xul|*.help-button > xul|*.button-box > xul|*.button-text {
+  display: none;
+}
+
+html|*.help-button {
+  width: 16px;
+  height: 16px;
+  border: 0;
+  padding: 0;
+  display: inline-block;
+  background-image: url("chrome://global/skin/in-content/help-glyph.svg#help");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+}
+
+html|*.help-button:hover {
+  background-image: url("chrome://global/skin/in-content/help-glyph.svg#help-hover");
+}
+
+html|*.help-button:hover:active {
+  background-image: url("chrome://global/skin/in-content/help-glyph.svg#help-pressed");
+}
+
+xul|*.spinbuttons-button {
+  min-height: initial;
+  margin-inline-start: 10px !important;
+  margin-inline-end: 2px !important;
+}
+
+xul|*.spinbuttons-up {
+  margin-top: 2px !important;
+  border-radius: 1px 1px 0 0;
+}
+
+xul|*.spinbuttons-down  {
+  margin-bottom: 2px !important;
+  border-radius: 0 0 1px 1px;
+}
+
+xul|*.spinbuttons-button > xul|*.button-box {
+  padding: 1px 5px 2px !important;
+}
+
+xul|*.spinbuttons-up > xul|*.button-box > xul|*.button-icon {
+  list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
+}
+
+xul|*.spinbuttons-up[disabled="true"] > xul|*.button-box > xul|*.button-icon {
+  list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif");
+}
+
+xul|*.spinbuttons-down > xul|*.button-box > xul|*.button-icon {
+  list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
+}
+
+xul|*.spinbuttons-down[disabled="true"] > xul|*.button-box > xul|*.button-icon {
+  list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
+}
+
+xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
+  -moz-appearance: none;
+  margin-inline-end: 4px;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
+}
+
+xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon {
+  width: 18px;
+  height: 18px;
+}
+
+xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
+  list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown-disabled")
+}
+
+xul|menulist > xul|menupopup,
+xul|button[type="menu"] > xul|menupopup {
+  -moz-appearance: none;
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 2px;
+  background-color: var(--in-content-box-background);
+}
+
+xul|menulist > xul|menupopup xul|menu,
+xul|menulist > xul|menupopup xul|menuitem,
+xul|button[type="menu"] > xul|menupopup xul|menu,
+xul|button[type="menu"] > xul|menupopup xul|menuitem {
+  -moz-appearance: none;
+  font-size: 1em;
+  color: var(--in-content-text-color);
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  padding-inline-start: 10px;
+  padding-inline-end: 30px;
+}
+
+xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
+xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"],
+xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
+xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
+  color: var(--in-content-text-color);
+  background-color: var(--in-content-item-hover);
+}
+
+xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
+xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"],
+xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
+xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
+  color: var(--in-content-selected-text);
+  background-color: var(--in-content-item-selected);
+}
+
+xul|menulist > xul|menupopup > xul|menu[disabled="true"],
+xul|menulist > xul|menupopup > xul|menuitem[disabled="true"],
+xul|button[type="menu"] > xul|menupopup > xul|menu[disabled="true"],
+xul|button[type="menu"] > xul|menupopup > xul|menuitem[disabled="true"] {
+  color: #999;
+  /* override the [_moz-menuactive="true"] background color from
+     global/menu.css */
+  background-color: transparent;
+}
+
+xul|menulist > xul|menupopup xul|menuseparator,
+xul|button[type="menu"] > xul|menupopup xul|menuseparator {
+  -moz-appearance: none;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid var(--in-content-box-border-color);
+  border-bottom: none;
+}
+
+/* textboxes */
+
+html|input[type="text"],
+html|textarea,
+xul|textbox {
+  -moz-appearance: none;
+  color: var(--in-content-text-color);
+  border: 1px solid var(--in-content-box-border-color);
+  -moz-border-top-colors: none !important;
+  -moz-border-right-colors: none !important;
+  -moz-border-bottom-colors: none !important;
+  -moz-border-left-colors: none !important;
+  border-radius: 2px;
+  background-color: var(--in-content-box-background);
+}
+
+xul|textbox {
+  min-height: 30px;
+  padding-right: 10px;
+  padding-left: 10px;
+}
+
+/* Create a separate rule to unset these styles on .tree-input instead of
+   using :not(.tree-input) so the selector specifity doesn't change. */
+xul|textbox.tree-input {
+  min-height: unset;
+  padding-right: unset;
+  padding-left: unset;
+}
+
+html|input[type="text"],
+html|textarea {
+  font-family: inherit;
+  font-size: inherit;
+  padding: 5px 10px;
+}
+
+html|input[type="text"]:focus,
+html|textarea:focus,
+xul|textbox[focused] {
+  border-color: var(--in-content-border-focus);
+}
+
+html|input[type="text"]:disabled,
+html|textarea:disabled,
+xul|textbox[disabled="true"] {
+  opacity: 0.5;
+}
+
+/* Links */
+
+html|a,
+.text-link {
+  color: var(--in-content-link-color);
+  text-decoration: none;
+}
+
+html|a:hover,
+.text-link:hover {
+  color: var(--in-content-link-color-hover);
+  text-decoration: underline;
+}
+
+html|a:visited {
+  color: var(--in-content-link-color-visited);
+}
+
+html|a:hover:active,
+.text-link:hover:active {
+  color: var(--in-content-link-color-active);
+  text-decoration: none;
+}
+
+/* Checkboxes and radio buttons */
+
+/* Hide the actual checkbox */
+html|input[type="checkbox"] {
+  opacity: 0;
+  width: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+/* Create a box to style as the checkbox */
+html|input[type="checkbox"] + html|label:before {
+  display: inline-block;
+  content: "";
+  vertical-align: middle;
+}
+
+html|input[type="checkbox"] + html|label {
+  line-height: 0px;
+}
+
+xul|checkbox {
+  margin-inline-start: 0;
+}
+
+xul|*.checkbox-check,
+html|input[type="checkbox"] + html|label:before {
+  -moz-appearance: none;
+  width: 23px;
+  height: 23px;
+  border-radius: 2px;
+  border: 1px solid var(--in-content-box-border-color);
+  margin-inline-end: 10px;
+  background-color: #f1f1f1;
+  /* !important needed to override toolkit checked !important rule */
+  background-image: linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
+  background-position: center center;
+  background-repeat: no-repeat;
+  box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
+}
+
+xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check,
+html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
+  border-color: var(--in-content-border-focus);
+}
+
+xul|*.checkbox-check[checked] {
+  list-style-image: url("chrome://global/skin/in-content/check.svg#check");
+}
+
+html|input[type="checkbox"]:checked + html|label:before {
+  background-image: url("chrome://global/skin/in-content/check.svg#check"), linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
+}
+
+xul|checkbox[disabled="true"] > xul|*.checkbox-check,
+html|input[type="checkbox"]:disabled + html|label {
+  opacity: 0.5;
+}
+
+xul|*.checkbox-label-box {
+  margin-inline-start: -1px; /* negative margin for the transparent border */
+  padding-inline-start: 0;
+}
+
+xul|richlistitem > xul|*.checkbox-check {
+  margin: 3px 6px;
+}
+
+html|*.toggle-container-with-text {
+  display: flex;
+  align-items: center;
+}
+
+xul|radio {
+  margin-inline-start: 0;
+}
+
+xul|*.radio-check {
+  -moz-appearance: none;
+  width: 23px;
+  height: 23px;
+  border: 1px solid var(--in-content-box-border-color);
+  border-radius: 50%;
+  margin-inline-end: 10px;
+  background-color: #f1f1f1;
+  background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
+  box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
+}
+
+xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
+  border-color: var(--in-content-border-focus);
+}
+
+xul|*.radio-check[selected] {
+  list-style-image: url("chrome://global/skin/in-content/radio.svg#radio");
+}
+
+xul|radio[disabled="true"] > xul|*.radio-check {
+  opacity: 0.5;
+}
+
+xul|*.radio-label-box {
+  margin-inline-start: -1px; /* negative margin for the transparent border */
+  margin-inline-end: 10px;
+  padding-inline-start: 0;
+}
+
+/* Category List */
+
+*|*#categories {
+  -moz-appearance: none;
+  background-color: var(--in-content-category-background);
+  padding-top: 39px;
+  margin: 0;
+  border-width: 0;
+}
+
+*|*.category {
+  -moz-appearance: none;
+  color: var(--in-content-category-text);
+  border-inline-end-width: 0;
+  padding-inline-start: 15px;
+  padding-inline-end: 21px;
+  min-height: 40px;
+  transition: background-color 150ms;
+}
+
+*|*.category:hover {
+  background-color: var(--in-content-category-background-hover);
+}
+
+*|*.category[selected],
+*|*.category.selected {
+  background-color: var(--in-content-category-background-active);
+  color: var(--in-content-category-text-selected);
+  padding-inline-start: 11px; /* compensate the 4px border */
+  border-inline-start: solid 4px var(--in-content-border-highlight);
+}
+
+*|*#categories[keyboard-navigation="true"]:-moz-focusring > *|*.category[current] {
+  border-top: var(--in-content-category-border-focus);
+  border-bottom: var(--in-content-category-border-focus);
+}
+
+*|*.category-name {
+  line-height: 22px;
+  font-size: 1.25rem;
+  padding-bottom: 2px;
+  padding-inline-start: 9px;
+  margin: 0;
+  -moz-user-select: none;
+}
+
+*|*.category-icon {
+  width: 24px;
+  height: 24px;
+}
+
+/* header */
+
+*|*.header {
+  border-bottom: 1px solid var(--in-content-header-border-color);
+  margin-inline-end: 4px; /* add the 4px end-margin of other elements */
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  -moz-box-align: baseline;
+}
+
+*|*.header-name {
+  font-size: 2.5rem;
+  font-weight: normal;
+  line-height: 40px;
+  margin: 0;
+  -moz-user-select: none;
+}
+
+/* File fields */
+
+xul|filefield {
+  -moz-appearance: none;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
+xul|*.fileFieldContentBox {
+  background-color: transparent;
+}
+
+xul|*.fileFieldIcon {
+  margin-inline-start: 10px;
+  margin-inline-end: 0;
+}
+
+xul|*.fileFieldLabel {
+  margin-inline-start: -26px;
+  padding-inline-start: 36px;
+}
+
+xul|textbox:-moz-locale-dir(rtl),
+xul|*.fileFieldLabel:-moz-locale-dir(rtl),
+xul|textbox + xul|button:-moz-locale-dir(ltr),
+xul|filefield + xul|button:-moz-locale-dir(ltr) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+xul|textbox:-moz-locale-dir(ltr),
+xul|*.fileFieldLabel:-moz-locale-dir(ltr),
+xul|textbox + xul|button:-moz-locale-dir(rtl),
+xul|filefield + xul|button:-moz-locale-dir(rtl) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+xul|textbox + xul|button,
+xul|filefield + xul|button {
+  border-inline-start: none;
+}
+
+/* List boxes */
+
+xul|richlistbox,
+xul|listbox {
+  -moz-appearance: none;
+  margin-inline-start: 0;
+  background-color: var(--in-content-box-background);
+  border: 1px solid var(--in-content-box-border-color);
+  color: var(--in-content-text-color);
+}
+
+xul|treechildren::-moz-tree-row,
+xul|listbox xul|listitem {
+  padding: 0.3em;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background-image: none;
+}
+
+xul|treechildren::-moz-tree-row(hover),
+xul|listbox xul|listitem:hover {
+  background-color: var(--in-content-item-hover);
+}
+
+xul|treechildren::-moz-tree-row(selected),
+xul|listbox xul|listitem[selected="true"] {
+  background-color: var(--in-content-item-selected);
+  color: var(--in-content-selected-text);
+}
+
+/* Trees */
+
+xul|tree {
+  -moz-appearance: none;
+  font-size: 1em;
+  border: 1px solid var(--in-content-box-border-color);
+  background-color: var(--in-content-box-background);
+  margin: 0;
+}
+
+xul|tree:-moz-focusring,
+xul|richlistbox:-moz-focusring {
+  border: 1px dotted var(--in-content-border-focus);
+}
+
+xul|listheader,
+xul|treecols {
+  -moz-appearance: none;
+  border: none;
+  border-bottom: 1px solid var(--in-content-border-color);
+  padding: 0;
+}
+
+.autocomplete-tree > xul|treecols {
+  border-bottom: none !important;
+}
+
+xul|treecol:not([hideheader="true"]),
+xul|treecolpicker {
+  -moz-appearance: none;
+  border: none;
+  background-color: var(--in-content-box-background-hover);
+  color: #808080;
+  padding: 5px 10px;
+}
+
+xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover,
+xul|treecolpicker:hover {
+  background-color: var(--in-content-box-background-active);
+  color: var(--in-content-text-color);
+}
+
+xul|treecol:not([hideheader="true"]):not(:first-child),
+xul|treecolpicker {
+  border-inline-start-width: 1px;
+  border-inline-start-style: solid;
+  border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
+}
+
+xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
+  list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
+  width: 18px;
+  height: 18px;
+}
+
+xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] {
+  transform: scaleY(-1);
+}
+
+/* This is the only way to increase the height of a tree row unfortunately */
+xul|treechildren::-moz-tree-row {
+  min-height: 2em;
+}
+
+/* Color needs to be set on tree cell in order to be applied */
+xul|treechildren::-moz-tree-cell-text {
+  color: var(--in-content-text-color);
+}
+
+xul|treechildren::-moz-tree-cell-text(selected) {
+  color: var(--in-content-selected-text);
+}
diff --git a/toolkit/themes/shared/in-content/dropdown.svg b/toolkit/themes/shared/in-content/dropdown.svg
new file mode 100644
index 000000000..bc7bad2c5
--- /dev/null
+++ b/toolkit/themes/shared/in-content/dropdown.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
+  <style>
+    use:not(:target) {
+      display: none;
+    }
+    use {
+      fill: -moz-DialogText;
+    }
+    use[id$="-disabled"] {
+      fill: GrayText;
+    }
+  </style>
+  <defs>
+    <path id="dropdown-shape" d="M12,6l-4.016,4L4,6H12z"/>
+  </defs>
+  <use id="dropdown" xlink:href="#dropdown-shape"/>
+  <use id="dropdown-disabled" xlink:href="#dropdown-shape"/>
+</svg>
diff --git a/toolkit/themes/shared/in-content/help-glyph.svg b/toolkit/themes/shared/in-content/help-glyph.svg
new file mode 100644
index 000000000..5dc3af4e1
--- /dev/null
+++ b/toolkit/themes/shared/in-content/help-glyph.svg
@@ -0,0 +1,28 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+  <style>
+    use:not(:target) { display: none; }
+
+    path { fill: #999; }
+    circle { fill: none; stroke: #999; stroke-width: 2; }
+
+    #help-hover path { fill: #fff; }
+    #help-hover circle { fill: #808080; stroke: #808080; }
+
+    #help-pressed path { fill: #fff; }
+    #help-pressed circle { fill: #666; stroke: #666; }
+  </style>
+
+  <defs>
+    <g id="help-shape">
+      <circle cx="12" cy="12" r="11" />
+      <path d="M12.2,4.9c-1.6,0-2.9,0.4-3.8,0.8L9.2,8c0.6-0.4,1.5-0.6,2.2-0.6c1.1,0,1.6,0.5,1.6,1.2 c0,0.7-0.6,1.3-1.3,2.1c-1,1.1-1.4,2.1-1.3,3.2l0,0.5h3V14c0-0.9,0.3-1.7,1.2-2.5c0.9-0.9,1.9-1.9,1.9-3.4 C16.6,6.4,15.2,4.9,12.2,4.9z M12,16.1c-1.1,0-1.9,0.8-1.9,1.9c0,1.1,0.8,1.9,1.9,1.9c1.2,0,1.9-0.8,1.9-1.9 C13.9,16.9,13.1,16.1,12,16.1z"/>
+    </g>
+  </defs>
+
+  <use id="help"          xlink:href="#help-shape" />
+  <use id="help-hover"    xlink:href="#help-shape" />
+  <use id="help-pressed"  xlink:href="#help-shape" />
+</svg>
diff --git a/toolkit/themes/shared/in-content/info-pages.inc.css b/toolkit/themes/shared/in-content/info-pages.inc.css
new file mode 100644
index 000000000..4889602a0
--- /dev/null
+++ b/toolkit/themes/shared/in-content/info-pages.inc.css
@@ -0,0 +1,109 @@
+% This Source Code Form is subject to the terms of the Mozilla Public
+% License, v. 2.0. If a copy of the MPL was not distributed with this
+% file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@import url("chrome://global/skin/in-content/common.css");
+/* Body and container */
+body {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-inline-start: calc(48px + 4.6em);
+  padding-inline-end: 48px;
+  align-items: center;
+  justify-content: center;
+}
+
+.container {
+  min-width: 13em;
+  max-width: 52em;
+}
+
+.container.restore-chosen {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 10vh 0;
+}
+
+/* Typography */
+.title {
+  background-image: url("chrome://global/skin/icons/info.svg");
+  background-position: left 0;
+  background-repeat: no-repeat;
+  background-size: 1.6em;
+  margin-inline-start: -2.3em;
+  padding-inline-start: 2.3em;
+  font-size: 2.5em;
+}
+
+.title:dir(rtl) {
+  background-position: right 0;
+}
+
+.title-text {
+  border-bottom: 1px solid #C1C1C1;
+  font-size: inherit;
+  padding-bottom: 0.4em;
+}
+
+@media (max-width: 675px) {
+  body {
+    padding: 0 48px;
+  }
+
+  .title {
+    background-image: none !important;
+    padding-inline-start: 0;
+    margin-inline-start: 0;
+  }
+
+  .title-text {
+    padding-top: 0;
+  }
+}
+
+ul, ol {
+  margin: 0;
+  padding: 0;
+  margin-inline-start: 1em;
+}
+
+ul > li, ol > li {
+  margin-bottom: .5em;
+}
+
+ul {
+  list-style: disc;
+}
+
+/* Buttons */
+.button-container {
+  margin-top: 1.2em;
+}
+
+.button-container > button {
+  min-width: 150px;
+}
+
+.button-container > button:first-child {
+  margin-inline-start: 0;
+}
+
+/* Trees */
+.tree-container {
+  margin-top: 1.2em;
+  flex-grow: 1;
+  min-height: 12em;
+}
+
+.tree-container > tree {
+  height: 100%;
+}
+
+tree {
+  width: 100%;
+}
diff --git a/toolkit/themes/shared/in-content/radio.svg b/toolkit/themes/shared/in-content/radio.svg
new file mode 100644
index 000000000..97826bc20
--- /dev/null
+++ b/toolkit/themes/shared/in-content/radio.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 21 21">
+  <style>
+    use:not(:target) {
+      display: none;
+    }
+    use {
+      fill: #2292d0;
+    }
+    use[id$="-native"] {
+      fill: -moz-dialogText;
+    }
+  </style>
+  <defs>
+    <circle id="radio-shape" cx="10.5" cy="10.5" r="6"/>
+  </defs>
+  <use id="radio" xlink:href="#radio-shape"/>
+  <use id="radio-native" xlink:href="#radio-shape"/>
+</svg>
diff --git a/toolkit/themes/shared/incontent-icons/blocked.svg b/toolkit/themes/shared/incontent-icons/blocked.svg
new file mode 100644
index 000000000..2f1c6413c
--- /dev/null
+++ b/toolkit/themes/shared/incontent-icons/blocked.svg
@@ -0,0 +1,13 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 45 45">
+  <defs>
+    <circle id="stop-sign" cx="22.5" cy="22.5" r="20.5"/>
+    <mask id="stop-symbol">
+      <rect width="45" height="45" fill="#fff"/>
+      <line x1="10" y1="23" x2="35" y2="23" stroke="#000" stroke-width="6"/>
+    </mask>
+  </defs>
+  <use xlink:href="#stop-sign" mask="url(#stop-symbol)" fill="#fff"/>
+</svg>
+\ No newline at end of file
diff --git a/toolkit/themes/shared/incontent-icons/info.svg b/toolkit/themes/shared/incontent-icons/info.svg
new file mode 100644
index 000000000..2fc0607a1
--- /dev/null
+++ b/toolkit/themes/shared/incontent-icons/info.svg
@@ -0,0 +1,8 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="#424e5a">
+  <circle cx="50" cy="50" r="44" stroke="#424e5a" stroke-width="11" fill="none"/>
+  <circle cx="50" cy="24.6" r="6.4"/>
+  <rect x="45" y="39.9" width="10.1" height="41.8"/>
+</svg>
diff --git a/toolkit/themes/shared/incontent-icons/warning.svg b/toolkit/themes/shared/incontent-icons/warning.svg
new file mode 100644
index 000000000..bde2da120
--- /dev/null
+++ b/toolkit/themes/shared/incontent-icons/warning.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60">
+  <defs>
+    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="30" y1="10" x2="30" y2="50">
+      <stop offset="0" style="stop-color: #fedb00"/>
+      <stop offset="1" style="stop-color: #fcce00"/>
+    </linearGradient>
+  </defs>
+  <path fill="url(#gradient)" d="M49.316,42.867L33.829,12.7c-0.879-1.715-2.274-2.7-3.828-2.7c-1.554,0-2.949,0.985-3.829,2.702 L10.685,42.864c-0.869,1.69-0.913,3.482-0.121,4.909C11.35,49.187,12.817,50,14.591,50h30.82c1.772,0,3.24-0.81,4.023-2.224 C50.227,46.349,50.185,44.56,49.316,42.867z M32.176,22.304l-0.48,14.304h-3.424L27.76,22.304H32.176z M30,44.896 c-1.44,0-2.592-1.184-2.592-2.592c0-1.44,1.152-2.592,2.592-2.592c1.472,0,2.592,1.152,2.592,2.592 C32.592,43.712,31.472,44.896,30,44.896z"/>
+</svg>
diff --git a/toolkit/themes/shared/jar.inc.mn b/toolkit/themes/shared/jar.inc.mn
new file mode 100644
index 000000000..9c3d86a40
--- /dev/null
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -0,0 +1,99 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+# This is not a complete / proper jar manifest. It is included by the
+# actual theme-specific manifests, so that shared resources need only
+# be specified once. As a result, the source file paths are relative
+# to the location of the actual manifest.
+
+toolkit.jar:
+% skin global classic/1.0 %skin/classic/global/
+% skin help classic/1.0 %skin/classic/help/
+% skin mozapps classic/1.0 %skin/classic/mozapps/
+  skin/classic/global/about.css                            (../../shared/about.css)
+  skin/classic/global/aboutCache.css                       (../../shared/aboutCache.css)
+  skin/classic/global/aboutCacheEntry.css                  (../../shared/aboutCacheEntry.css)
+  skin/classic/global/aboutMemory.css                      (../../shared/aboutMemory.css)
+  skin/classic/global/aboutReader.css                      (../../shared/aboutReader.css)
+  skin/classic/global/aboutReaderContent.css               (../../shared/aboutReaderContent.css)
+* skin/classic/global/aboutReaderControls.css              (../../shared/aboutReaderControls.css)
+  skin/classic/global/aboutSupport.css                     (../../shared/aboutSupport.css)
+  skin/classic/global/appPicker.css                        (../../shared/appPicker.css)
+  skin/classic/global/config.css                           (../../shared/config.css)
+  skin/classic/global/timepicker.css                       (../../shared/timepicker.css)
+  skin/classic/global/icons/find-arrows.svg                (../../shared/icons/find-arrows.svg)
+  skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)
+  skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)
+  skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
+  skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
+  skin/classic/global/icons/warning.svg                    (../../shared/incontent-icons/warning.svg)
+  skin/classic/global/icons/blocked.svg                    (../../shared/incontent-icons/blocked.svg)
+  skin/classic/global/alerts/alert-common.css              (../../shared/alert-common.css)
+  skin/classic/global/narrate.css                          (../../shared/narrate.css)
+  skin/classic/global/narrateControls.css                  (../../shared/narrateControls.css)
+  skin/classic/global/narrate/arrow.svg                    (../../shared/narrate/arrow.svg)
+  skin/classic/global/narrate/back.svg                     (../../shared/narrate/back.svg)
+  skin/classic/global/narrate/fast.svg                     (../../shared/narrate/fast.svg)
+  skin/classic/global/narrate/forward.svg                  (../../shared/narrate/forward.svg)
+  skin/classic/global/narrate/slow.svg                     (../../shared/narrate/slow.svg)
+  skin/classic/global/narrate/start.svg                    (../../shared/narrate/start.svg)
+  skin/classic/global/narrate/stop.svg                     (../../shared/narrate/stop.svg)
+  skin/classic/global/menu/shared-menu-check@2x.png        (../../shared/menu-check@2x.png)
+  skin/classic/global/menu/shared-menu-check.png           (../../shared/menu-check.png)
+  skin/classic/global/menu/shared-menu-check-active.svg    (../../shared/menu-check-active.svg)
+  skin/classic/global/menu/shared-menu-check-black.svg     (../../shared/menu-check-black.svg)
+  skin/classic/global/menu/shared-menu-check-hover.svg     (../../shared/menu-check-hover.svg)
+  skin/classic/global/in-content/check.svg                 (../../shared/in-content/check.svg)
+  skin/classic/global/in-content/check-partial.svg         (../../shared/in-content/check-partial.svg)
+  skin/classic/global/in-content/dropdown.svg              (../../shared/in-content/dropdown.svg)
+  skin/classic/global/in-content/help-glyph.svg            (../../shared/in-content/help-glyph.svg)
+  skin/classic/global/in-content/radio.svg                 (../../shared/in-content/radio.svg)
+  skin/classic/global/passwordmgr.css                      (../../shared/passwordmgr.css)
+  skin/classic/global/reader/RM-Close-24x24.svg            (../../shared/reader/RM-Close-24x24.svg)
+  skin/classic/global/reader/RM-Minus-24x24.svg            (../../shared/reader/RM-Minus-24x24.svg)
+  skin/classic/global/reader/RM-Plus-24x24.svg             (../../shared/reader/RM-Plus-24x24.svg)
+  skin/classic/global/reader/RM-Type-Controls-24x24.svg    (../../shared/reader/RM-Type-Controls-24x24.svg)
+  skin/classic/global/reader/RM-Type-Controls-Arrow.svg    (../../shared/reader/RM-Type-Controls-Arrow.svg)
+  skin/classic/global/reader/RM-Content-Width-Minus-42x16.svg            (../../shared/reader/RM-Content-Width-Minus-42x16.svg)
+  skin/classic/global/reader/RM-Content-Width-Plus-44x16.svg             (../../shared/reader/RM-Content-Width-Plus-44x16.svg)
+  skin/classic/global/reader/RM-Line-Height-Minus-38x14.svg            (../../shared/reader/RM-Line-Height-Minus-38x14.svg)
+  skin/classic/global/reader/RM-Line-Height-Plus-38x24.svg             (../../shared/reader/RM-Line-Height-Plus-38x24.svg)
+  skin/classic/global/media/TopLevelImageDocument.css      (../../shared/media/TopLevelImageDocument.css)
+  skin/classic/global/media/TopLevelVideoDocument.css      (../../shared/media/TopLevelVideoDocument.css)
+  skin/classic/global/media/imagedoc-lightnoise.png        (../../shared/media/imagedoc-lightnoise.png)
+  skin/classic/global/media/imagedoc-darknoise.png         (../../shared/media/imagedoc-darknoise.png)
+* skin/classic/global/media/videocontrols.css              (../../shared/media/videocontrols.css)
+  skin/classic/global/media/pauseButton.png                (../../shared/media/pauseButton.png)
+  skin/classic/global/media/pauseButton@2x.png             (../../shared/media/pauseButton@2x.png)
+  skin/classic/global/media/playButton.png                 (../../shared/media/playButton.png)
+  skin/classic/global/media/playButton@2x.png              (../../shared/media/playButton@2x.png)
+  skin/classic/global/media/muteButton.png                 (../../shared/media/muteButton.png)
+  skin/classic/global/media/muteButton@2x.png              (../../shared/media/muteButton@2x.png)
+  skin/classic/global/media/unmuteButton.png               (../../shared/media/unmuteButton.png)
+  skin/classic/global/media/unmuteButton@2x.png            (../../shared/media/unmuteButton@2x.png)
+  skin/classic/global/media/noAudio.png                    (../../shared/media/noAudio.png)
+  skin/classic/global/media/noAudio@2x.png                 (../../shared/media/noAudio@2x.png)
+  skin/classic/global/media/closeCaptionButton.png         (../../shared/media/closeCaptionButton.png)
+  skin/classic/global/media/closeCaptionButton@2x.png      (../../shared/media/closeCaptionButton@2x.png)
+  skin/classic/global/media/fullscreenButton.png           (../../shared/media/fullscreenButton.png)
+  skin/classic/global/media/fullscreenButton@2x.png        (../../shared/media/fullscreenButton@2x.png)
+  skin/classic/global/media/scrubberThumb.png              (../../shared/media/scrubberThumb.png)
+  skin/classic/global/media/scrubberThumb@2x.png           (../../shared/media/scrubberThumb@2x.png)
+  skin/classic/global/media/scrubberThumbWide.png          (../../shared/media/scrubberThumbWide.png)
+  skin/classic/global/media/scrubberThumbWide@2x.png       (../../shared/media/scrubberThumbWide@2x.png)
+  skin/classic/global/media/error.png                      (../../shared/media/error.png)
+  skin/classic/global/media/throbber.png                   (../../shared/media/throbber.png)
+  skin/classic/global/media/stalled.png                    (../../shared/media/stalled.png)
+  skin/classic/global/media/volume-empty.png               (../../shared/media/volume-empty.png)
+  skin/classic/global/media/volume-empty@2x.png            (../../shared/media/volume-empty@2x.png)
+  skin/classic/global/media/volume-full.png                (../../shared/media/volume-full.png)
+  skin/classic/global/media/volume-full@2x.png             (../../shared/media/volume-full@2x.png)
+  skin/classic/global/media/clicktoplay-bgtexture.png      (../../shared/media/clicktoplay-bgtexture.png)
+  skin/classic/global/media/videoClickToPlayButton.svg     (../../shared/media/videoClickToPlayButton.svg)
+#ifdef MOZ_PLACES
+  skin/classic/mozapps/places/defaultFavicon.png           (../../shared/places/defaultFavicon.png)
+  skin/classic/mozapps/places/defaultFavicon@2x.png        (../../shared/places/defaultFavicon@2x.png)
+  skin/classic/mozapps/places/defaultFavicon-inverted.png  (../../shared/places/defaultFavicon-inverted.png)
+  skin/classic/mozapps/places/defaultFavicon-inverted@2x.png (../../shared/places/defaultFavicon-inverted@2x.png)
+#endif
diff --git a/toolkit/themes/shared/media/TopLevelImageDocument.css b/toolkit/themes/shared/media/TopLevelImageDocument.css
new file mode 100644
index 000000000..524217516
--- /dev/null
+++ b/toolkit/themes/shared/media/TopLevelImageDocument.css
@@ -0,0 +1,17 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@media not print {
+  /* N.B.: Remember to update ImageDocument.css in the tree or reftests may fail! */
+
+  body {
+    color: #eee;
+    background-image: url("chrome://global/skin/media/imagedoc-darknoise.png");
+  }
+
+  img.transparent {
+    background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png");
+    color: #222;
+  }
+}
diff --git a/toolkit/themes/shared/media/TopLevelVideoDocument.css b/toolkit/themes/shared/media/TopLevelVideoDocument.css
new file mode 100644
index 000000000..760cdcd53
--- /dev/null
+++ b/toolkit/themes/shared/media/TopLevelVideoDocument.css
@@ -0,0 +1,12 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+body {
+  background-image: url("chrome://global/skin/media/imagedoc-darknoise.png");
+  background-color: rgb(33,33,33); /* Average color of that ^ image. */
+}
+
+video {
+  box-shadow: 0 0 15px #000;
+}
diff --git a/toolkit/themes/shared/media/clicktoplay-bgtexture.png b/toolkit/themes/shared/media/clicktoplay-bgtexture.png
new file mode 100644
index 000000000..caffc241c
--- /dev/null
+++ b/toolkit/themes/shared/media/clicktoplay-bgtexture.png
diff --git a/toolkit/themes/shared/media/closeCaptionButton.png b/toolkit/themes/shared/media/closeCaptionButton.png
new file mode 100644
index 000000000..469310fb1
--- /dev/null
+++ b/toolkit/themes/shared/media/closeCaptionButton.png
diff --git a/toolkit/themes/shared/media/closeCaptionButton@2x.png b/toolkit/themes/shared/media/closeCaptionButton@2x.png
new file mode 100644
index 000000000..033507892
--- /dev/null
+++ b/toolkit/themes/shared/media/closeCaptionButton@2x.png
diff --git a/toolkit/themes/shared/media/error.png b/toolkit/themes/shared/media/error.png
new file mode 100644
index 000000000..58e37283a
--- /dev/null
+++ b/toolkit/themes/shared/media/error.png
diff --git a/toolkit/themes/shared/media/fullscreenButton.png b/toolkit/themes/shared/media/fullscreenButton.png
new file mode 100644
index 000000000..ffbc3d5ae
--- /dev/null
+++ b/toolkit/themes/shared/media/fullscreenButton.png
diff --git a/toolkit/themes/shared/media/fullscreenButton@2x.png b/toolkit/themes/shared/media/fullscreenButton@2x.png
new file mode 100644
index 000000000..b09ebbd43
--- /dev/null
+++ b/toolkit/themes/shared/media/fullscreenButton@2x.png
diff --git a/toolkit/themes/shared/media/imagedoc-darknoise.png b/toolkit/themes/shared/media/imagedoc-darknoise.png
new file mode 100644
index 000000000..5c33e24d4
--- /dev/null
+++ b/toolkit/themes/shared/media/imagedoc-darknoise.png
diff --git a/toolkit/themes/shared/media/imagedoc-lightnoise.png b/toolkit/themes/shared/media/imagedoc-lightnoise.png
new file mode 100644
index 000000000..3467cf4d4
--- /dev/null
+++ b/toolkit/themes/shared/media/imagedoc-lightnoise.png
diff --git a/toolkit/themes/shared/media/muteButton.png b/toolkit/themes/shared/media/muteButton.png
new file mode 100644
index 000000000..894480761
--- /dev/null
+++ b/toolkit/themes/shared/media/muteButton.png
diff --git a/toolkit/themes/shared/media/muteButton@2x.png b/toolkit/themes/shared/media/muteButton@2x.png
new file mode 100644
index 000000000..b2cd21c5e
--- /dev/null
+++ b/toolkit/themes/shared/media/muteButton@2x.png
diff --git a/toolkit/themes/shared/media/noAudio.png b/toolkit/themes/shared/media/noAudio.png
new file mode 100644
index 000000000..3db8c973b
--- /dev/null
+++ b/toolkit/themes/shared/media/noAudio.png
diff --git a/toolkit/themes/shared/media/noAudio@2x.png b/toolkit/themes/shared/media/noAudio@2x.png
new file mode 100644
index 000000000..7de728b2d
--- /dev/null
+++ b/toolkit/themes/shared/media/noAudio@2x.png
diff --git a/toolkit/themes/shared/media/pauseButton.png b/toolkit/themes/shared/media/pauseButton.png
new file mode 100644
index 000000000..944098ca1
--- /dev/null
+++ b/toolkit/themes/shared/media/pauseButton.png
diff --git a/toolkit/themes/shared/media/pauseButton@2x.png b/toolkit/themes/shared/media/pauseButton@2x.png
new file mode 100644
index 000000000..df2291941
--- /dev/null
+++ b/toolkit/themes/shared/media/pauseButton@2x.png
diff --git a/toolkit/themes/shared/media/playButton.png b/toolkit/themes/shared/media/playButton.png
new file mode 100644
index 000000000..11e2731df
--- /dev/null
+++ b/toolkit/themes/shared/media/playButton.png
diff --git a/toolkit/themes/shared/media/playButton@2x.png b/toolkit/themes/shared/media/playButton@2x.png
new file mode 100644
index 000000000..fb20075b2
--- /dev/null
+++ b/toolkit/themes/shared/media/playButton@2x.png
diff --git a/toolkit/themes/shared/media/scrubberThumb.png b/toolkit/themes/shared/media/scrubberThumb.png
new file mode 100644
index 000000000..f15962763
--- /dev/null
+++ b/toolkit/themes/shared/media/scrubberThumb.png
diff --git a/toolkit/themes/shared/media/scrubberThumb@2x.png b/toolkit/themes/shared/media/scrubberThumb@2x.png
new file mode 100644
index 000000000..f8790f467
--- /dev/null
+++ b/toolkit/themes/shared/media/scrubberThumb@2x.png
diff --git a/toolkit/themes/shared/media/scrubberThumbWide.png b/toolkit/themes/shared/media/scrubberThumbWide.png
new file mode 100644
index 000000000..96d2ed751
--- /dev/null
+++ b/toolkit/themes/shared/media/scrubberThumbWide.png
diff --git a/toolkit/themes/shared/media/scrubberThumbWide@2x.png b/toolkit/themes/shared/media/scrubberThumbWide@2x.png
new file mode 100644
index 000000000..52c9d7272
--- /dev/null
+++ b/toolkit/themes/shared/media/scrubberThumbWide@2x.png
diff --git a/toolkit/themes/shared/media/stalled.png b/toolkit/themes/shared/media/stalled.png
new file mode 100644
index 000000000..525375889
--- /dev/null
+++ b/toolkit/themes/shared/media/stalled.png
diff --git a/toolkit/themes/shared/media/throbber.png b/toolkit/themes/shared/media/throbber.png
new file mode 100644
index 000000000..8e49fe5b2
--- /dev/null
+++ b/toolkit/themes/shared/media/throbber.png
diff --git a/toolkit/themes/shared/media/unmuteButton.png b/toolkit/themes/shared/media/unmuteButton.png
new file mode 100644
index 000000000..5b76e2fa4
--- /dev/null
+++ b/toolkit/themes/shared/media/unmuteButton.png
diff --git a/toolkit/themes/shared/media/unmuteButton@2x.png b/toolkit/themes/shared/media/unmuteButton@2x.png
new file mode 100644
index 000000000..86f21859e
--- /dev/null
+++ b/toolkit/themes/shared/media/unmuteButton@2x.png
diff --git a/toolkit/themes/shared/media/videoClickToPlayButton.svg b/toolkit/themes/shared/media/videoClickToPlayButton.svg
new file mode 100644
index 000000000..f7ca6b653
--- /dev/null
+++ b/toolkit/themes/shared/media/videoClickToPlayButton.svg
@@ -0,0 +1,30 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" viewBox="0 0 64 64">
+  <defs>
+    <linearGradient id="whiteGradientStops">
+      <stop style="stop-color:#fff;stop-opacity:.95" offset="0"/>
+      <stop style="stop-color:#fff;stop-opacity:.75" offset=".45"/>
+      <stop style="stop-color:#fff;stop-opacity:.72" offset=".55"/>
+      <stop style="stop-color:#fff;stop-opacity:.65" offset="1"/>
+    </linearGradient>
+    <linearGradient x1="32" y1="0" x2="32" y2="62" id="whiteGradient" xlink:href="#whiteGradientStops" gradientUnits="userSpaceOnUse"/>
+    <linearGradient id="arrowGradientStops">
+      <stop style="stop-color:#333;stop-opacity:.5" offset="0"/>
+      <stop style="stop-color:#666;stop-opacity:.5" offset="1"/>
+    </linearGradient>
+    <linearGradient x1="32" y1="16" x2="32" y2="48" id="arrowGradient" xlink:href="#arrowGradientStops" gradientUnits="userSpaceOnUse"/>
+    <filter x="-0.15" y="-0.15" width="1.25" height="1.25" color-interpolation-filters="sRGB" id="dropShadow">
+      <feDropShadow dx="0" dy="1" flood-opacity="0.5"/>
+    </filter>
+    <mask id="dropShadowMask">
+      <path style="fill:#fff;" d="M47.285,30.991L23.75,17.24c-0.357-0.208-0.692-0.278-0.969-0.221 C22.32,17.115,22,17.555,22,18.252v27.499c0,1.112,0.797,1.568,1.75,1.011l23.535-13.748C48.238,32.458,48.238,31.547,47.285,30.991 z M0,0v64h64V0H0z M32,60C16.536,60,4,47.464,4,32S16.536,4,32,4s28,12.536,28,28S47.464,60,32,60z"/>
+    </mask>
+  </defs>
+  <path mask="url(#dropShadowMask)" id="playButtonShadow" style="filter:url(#dropShadow);" d="M32,4C16.536,4,4,16.536,4,32s12.536,28,28,28s28-12.536,28-28S47.464,4,32,4z M47.285,33.014 L23.75,46.762C22.797,47.319,22,46.863,22,45.751v-27.5c0-0.697,0.32-1.137,0.781-1.232c0.277-0.058,0.612,0.012,0.969,0.221 l23.535,13.751C48.238,31.546,48.238,32.458,47.285,33.014z"/>
+  <path id="playButtonArrow" style="fill:url(#arrowGradient);" d="M22.781,17.019C22.32,17.114,22,17.555,22,18.251v27.5c0,1.112,0.797,1.568,1.75,1.011 l23.535-13.748c0.953-0.556,0.953-1.467,0-2.023L23.75,17.24C23.393,17.031,23.058,16.961,22.781,17.019z"/>
+  <path id="playButton" style="fill:url(#whiteGradient);" d="M32,4C16.536,4,4,16.536,4,32s12.536,28,28,28s28-12.536,28-28S47.464,4,32,4z M47.285,33.014 L23.75,46.762C22.797,47.319,22,46.863,22,45.751v-27.5c0-0.697,0.32-1.137,0.781-1.232c0.277-0.058,0.612,0.012,0.969,0.221 l23.535,13.751C48.238,31.546,48.238,32.458,47.285,33.014z"/>
+  <path id="playButtonEdgeHighlights" style="fill:white;fill-opacity:.3;" d="M32,4C16.536,4,4,16.536,4,32s12.536,28,28,28s28-12.536,28-28S47.464,4,32,4z M32,59C17.112,59,5,46.888,5,32S17.112,5,32,5s27,12.112,27,27S46.888,59,32,59z M47.789,30.127l-23.534-13.75 C23.826,16.126,23.396,16,22.976,16c-0.135,0-0.27,0.014-0.398,0.041C21.62,16.238,21,17.106,21,18.251v27.5 C21,47.075,21.812,48,22.977,48c0.423,0,0.854-0.126,1.279-0.375L47.79,33.877c0.769-0.449,1.21-1.132,1.21-1.875 S48.559,30.576,47.789,30.127z M47.285,33.014L23.75,46.762C23.474,46.924,23.211,47,22.977,47C22.402,47,22,46.541,22,45.751v-27.5 c0-0.697,0.32-1.137,0.781-1.232L22.976,17c0.233,0,0.498,0.079,0.775,0.24l23.535,13.751 C48.238,31.546,48.238,32.458,47.285,33.014z"/>
+  <path id="playButtonTopEdgeHighlights" style="fill:white;fill-opacity:.8;" d="M32,4C16.536,4,4,16.536,4,32c0,0.167,0.01,0.333,0.013,0.5 C4.28,17.268,16.704,5,32,5c15.296,0,27.72,12.268,27.987,27.5C59.99,32.333,60,32.167,60,32C60,16.536,47.464,4,32,4z M47.285,33.014L23.75,46.762C22.797,47.319,22,46.863,22,45.751v1c0,1.112,0.797,1.568,1.75,1.011l23.535-13.748 c0.697-0.406,0.879-1.003,0.556-1.512C47.723,32.688,47.541,32.864,47.285,33.014z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/videocontrols.css b/toolkit/themes/shared/media/videocontrols.css
new file mode 100644
index 000000000..a40d77fe3
--- /dev/null
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -0,0 +1,440 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+.controlBar {
+  height: 28px;
+  background-color: rgba(35,31,32,.74);
+}
+
+.playButton,
+.muteButton,
+.closedCaptionButton,
+.fullscreenButton {
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  -moz-appearance: none;   /* Remove the native button appearance and styling */
+  margin: 0;
+  padding: 0;
+  min-height: 28px;
+  min-width: 28px;
+  border: none;
+  opacity: 0.7;
+}
+
+.playButton:hover,
+.muteButton:hover,
+.closedCaptionButton:hover,
+.fullscreenButton:hover {
+  opacity: 1;
+}
+
+.playButton:hover:active,
+.muteButton:hover:active,
+.closedCaptionButton:hover:active,
+.fullscreenButton:hover:active {
+  opacity: 0.4;
+}
+
+.playButton {
+  background-image: url(chrome://global/skin/media/pauseButton.png);
+  margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */
+  position: relative; /* Trick to work around negative margin interfering with clicking on the button. */
+}
+
+.playButton[paused] {
+  background-image: url(chrome://global/skin/media/playButton.png);
+}
+
+.muteButton {
+  background-image: url(chrome://global/skin/media/muteButton.png);
+  min-width: 33px;
+}
+.muteButton[muted] {
+  background-image: url(chrome://global/skin/media/unmuteButton.png);
+}
+
+.muteButton[noAudio] {
+  background-image: url(chrome://global/skin/media/noAudio.png);
+}
+
+.muteButton[noAudio] + .volumeStack {
+  display: none;
+}
+
+.closedCaptionButton {
+  background-image: url(chrome://global/skin/media/closeCaptionButton.png);
+  background-position: 4px;
+}
+
+.closedCaptionButton[enabled] {
+  opacity: 1;
+}
+
+.closedCaptionButton[hidden] {
+  display: none;
+}
+
+.fullscreenButton {
+  background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0);
+}
+
+.fullscreenButton[fullscreened] {
+  background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16);
+}
+
+.volumeControl {
+  width: 32px;
+  opacity: 0;
+}
+
+.volumeBackground,
+.volumeForeground {
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 32px;
+}
+
+.volumeBackground {
+  background-image: url(chrome://global/skin/media/volume-empty.png);
+}
+
+.volumeForeground {
+  background-image: url(chrome://global/skin/media/volume-full.png);
+  background-clip: content-box;
+}
+
+.textTrackList {
+  display: -moz-box;
+  -moz-appearance: none;
+  -moz-box-pack: end;
+  -moz-box-align: end;
+  padding: 0;
+}
+
+.textTrackList[hidden] {
+  display: none;
+}
+
+.textTrackList > html|*.textTrackItem {
+  -moz-appearance: none;
+  -moz-box-align: start;
+  text-align: start;
+  overflow: hidden;
+  margin: 0;
+  padding: 2px 10px;
+  -moz-margin-end: 10px;
+  border: none;
+  color: rgba(255,255,255,.5);
+  background-color: rgba(35,31,32,.74);
+  white-space: nowrap;
+}
+
+.textTrackList > html|*.textTrackItem[on] {
+  color: white;
+  background-color: black;
+}
+
+.textTrackList > html|*.textTrackItem:hover {
+  background-color: rgba(0,0,0,.55);
+}
+
+.controlBar[fullscreen-unavailable] {
+  /* This value is duplicated in the videocontrols.xml adjustControlSize function. */
+  padding-inline-end: 8px;
+}
+
+.volumeControl .scale-thumb {
+  min-width: 0;
+  opacity: 0;
+}
+
+.durationBox {
+  -moz-box-pack: center;
+}
+
+.durationLabel {
+  margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */
+  padding-left: 8px; /* don't bump into the scrubber bar */
+  color: rgba(255,255,255,.75);
+  font: message-box;
+  font-size: 11px;
+}
+
+%ifdef XP_MACOSX
+.durationLabel {
+  padding-top: 2px; /* center vertically with scrubber bar */
+}
+%else
+.durationLabel {
+  padding-top: 0; /* center vertically with scrubber bar */
+}
+%endif
+
+.positionLabel {
+  display: none;
+}
+
+.backgroundBar {
+  /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */
+  /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
+  margin: 10px 22px;
+  background-color: rgba(255,255,255,.5);
+  border-radius: 2.5px;
+}
+
+.bufferBar,
+.progressBar {
+  /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */
+  /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
+  margin: 10px 22px;
+  -moz-appearance: none;
+  border: none;
+  background-color: transparent;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* .progress-bar is an element inside the <progressmeter> implementation. */
+.bufferBar .progress-bar {
+  /*
+   * Note that this is drawn on top of the .backgroundBar. So although this
+   * has the same background-color specified, the semitransparent
+   * compositing gives it a different visual appearance.
+   */
+  background-color: rgba(255,255,255,.5);
+  border-radius: 2.5px;
+  -moz-appearance: none;
+}
+
+.progressBar .progress-bar {
+  background-color: white;
+  border-radius: 2.5px;
+  -moz-appearance: none;
+}
+
+/* .scale-slider is an element inside the <scale> implementation. */
+.scrubber .scale-slider,
+.volumeControl .scale-slider {
+  /* Hide the default horizontal bar. */
+  -moz-appearance: none;
+  background: none;
+  margin: 0;
+}
+
+.scrubber .scale-slider {
+  /* abs(margin-top) + margin-bottom + bar height == timeThumb height */
+  margin-top: -10px;
+  margin-bottom: 10px;
+}
+/* .scale-thumb is an element inside the <scale> implementation. */
+.scrubber .scale-thumb,
+.volumeControl .scale-thumb {
+  /* Override the default thumb appearance with a custom image. */
+  -moz-appearance: none;
+  background: transparent;
+  border: none;
+}
+
+.timeThumb {
+  background: url(chrome://global/skin/media/scrubberThumb.png) no-repeat center;
+  min-width: 45px;
+  min-height: 28px;
+  -moz-box-pack: center;
+}
+
+.timeThumb[showhours="true"] {
+  background-image: url(chrome://global/skin/media/scrubberThumbWide.png);
+}
+
+.timeLabel {
+  color: rgba(255,255,255,.75);
+  font: message-box;
+  font-size: 10px;
+  text-shadow: rgba(0,0,0,.3) 0 1px;
+  padding-top: 7px;
+}
+
+%ifdef XP_MACOSX
+.timeLabel {
+  padding-top: 7px; /* center vertically with scrubber bar */
+}
+%else
+.timeLabel {
+  padding-top: 5px; /* center vertically with scrubber bar */
+}
+%endif
+
+.statusOverlay {
+  -moz-box-align: center;
+  -moz-box-pack: center;
+  background-color: rgba(0,0,0,.55);
+}
+
+.statusIcon {
+  margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */
+  width: 36px;
+  height: 36px;
+}
+
+.statusIcon[type="throbber"] {
+  background: url(chrome://global/skin/media/throbber.png) no-repeat center;
+}
+
+.statusIcon[type="throbber"][stalled] {
+  background: url(chrome://global/skin/media/stalled.png) no-repeat center;
+}
+
+.statusIcon[type="error"] {
+  background: url(chrome://global/skin/media/error.png) no-repeat center;
+}
+
+/* Overlay Play button */
+.clickToPlay {
+  width: 64px;
+  height: 64px;
+  -moz-box-pack: center;
+  -moz-box-align: center;
+  opacity: 0.7;
+  background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png),
+                    url(chrome://global/skin/media/videoClickToPlayButton.svg);
+  background-repeat: repeat, no-repeat;
+  background-position: center, center;
+  background-size: auto, 64px 64px;
+  background-color: hsla(0,0%,10%,.5);
+}
+.clickToPlay:hover {
+  opacity: 1;
+}
+
+/* Statistics formatting */
+html|*.statsDiv {
+  position: relative;
+}
+html|td {
+  height: 1em;
+  max-height: 1em;
+  padding: 0 2px;
+}
+html|table {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 11px;
+  color: white;
+  text-shadow:
+    -1px -1px 0 #000,
+    1px -1px 0 #000,
+    -1px 1px 0 #000,
+    1px 1px 0 #000;
+  min-width: 100%;
+  background: rgba(68,68,68,.7);
+  table-layout: fixed;
+  border-collapse: collapse;
+  position: absolute;
+}
+
+/* CSS Transitions */
+.clickToPlay {
+  transition-property: opacity, background-size;
+  transition-duration: 400ms, 400ms;
+}
+.clickToPlay[fadeout] {
+  background-size: auto, 192px 192px;
+  opacity: 0;
+}
+.clickToPlay[fadeout][immediate] {
+  transition-property: opacity, background-size;
+  transition-duration: 0s, 0s;
+}
+.controlBar:not([immediate]) {
+  transition-property: opacity;
+  transition-duration: 200ms;
+}
+.controlBar[fadeout] {
+  opacity: 0;
+}
+.volumeStack:not([immediate]) {
+  transition-property: opacity, margin-top;
+  transition-duration: 200ms, 200ms;
+}
+.volumeStack[fadeout] {
+  opacity: 0;
+  margin-top: 0;
+}
+.statusOverlay:not([immediate]) {
+  transition-property: opacity;
+  transition-duration: 300ms;
+  transition-delay: 750ms;
+}
+.statusOverlay[fadeout] {
+  opacity: 0;
+}
+
+/* Error description formatting */
+.errorLabel {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 11px;
+  color: #bbb;
+  text-shadow:
+    -1px -1px 0 #000,
+    1px -1px 0 #000,
+    -1px 1px 0 #000,
+    1px 1px 0 #000;
+  padding: 0 10px;
+  text-align: center;
+}
+
+@media (min-resolution: 2dppx) {
+  .playButton {
+    background-image: url(chrome://global/skin/media/pauseButton@2x.png);
+    background-size: 28px 28px;
+  }
+  .playButton[paused] {
+    background-image: url(chrome://global/skin/media/playButton@2x.png);
+    background-size: 28px 28px;
+  }
+  .volumeBackground {
+    background-image: url(chrome://global/skin/media/volume-empty@2x.png);
+    background-size: 32px 16px;
+  }
+  .volumeForeground {
+    background-image: url(chrome://global/skin/media/volume-full@2x.png);
+    background-size: 32px 16px;
+  }
+  .muteButton {
+    background-image: url(chrome://global/skin/media/muteButton@2x.png);
+    background-size: 33px 28px;
+  }
+  .muteButton[muted] {
+    background-image: url(chrome://global/skin/media/unmuteButton@2x.png);
+    background-size: 33px 28px;
+  }
+  .muteButton[noAudio] {
+    background-image: url(chrome://global/skin/media/noAudio@2x.png);
+    background-size: 33px 28px;
+  }
+  .closedCaptionButton {
+    background-image: url(chrome://global/skin/media/closeCaptionButton@2x.png);
+    background-position: 4px;
+    background-size: 28px 28px;
+  }
+  .fullscreenButton {
+    background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 32, 32, 0);
+    background-size: 16px 16px;
+  }
+  .fullscreenButton[fullscreened] {
+    background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 64, 32, 32);
+    background-size: 16px 16px;
+  }
+  .timeThumb {
+    background-image: url(chrome://global/skin/media/scrubberThumb@2x.png);
+    background-size: 33px 28px;
+  }
+  .timeThumb[showhours="true"] {
+    background-image: url(chrome://global/skin/media/scrubberThumbWide@2x.png);
+    background-size: 45px 28px;
+  }
+}
diff --git a/toolkit/themes/shared/media/volume-empty.png b/toolkit/themes/shared/media/volume-empty.png
new file mode 100644
index 000000000..589abfbd5
--- /dev/null
+++ b/toolkit/themes/shared/media/volume-empty.png
diff --git a/toolkit/themes/shared/media/volume-empty@2x.png b/toolkit/themes/shared/media/volume-empty@2x.png
new file mode 100644
index 000000000..ca494e893
--- /dev/null
+++ b/toolkit/themes/shared/media/volume-empty@2x.png
diff --git a/toolkit/themes/shared/media/volume-full.png b/toolkit/themes/shared/media/volume-full.png
new file mode 100644
index 000000000..4398a569b
--- /dev/null
+++ b/toolkit/themes/shared/media/volume-full.png
diff --git a/toolkit/themes/shared/media/volume-full@2x.png b/toolkit/themes/shared/media/volume-full@2x.png
new file mode 100644
index 000000000..5bf63c7ee
--- /dev/null
+++ b/toolkit/themes/shared/media/volume-full@2x.png
diff --git a/toolkit/themes/shared/menu-check-active.svg b/toolkit/themes/shared/menu-check-active.svg
new file mode 100644
index 000000000..ba8a7c992
--- /dev/null
+++ b/toolkit/themes/shared/menu-check-active.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <polygon fill="#4a90e2" points="7.1,15.5 0.5,10.8 2.2,8.3 6.3,11.2 13,0.5 15.5,2.2 "/>
+</svg>
diff --git a/toolkit/themes/shared/menu-check-black.svg b/toolkit/themes/shared/menu-check-black.svg
new file mode 100644
index 000000000..f388f8151
--- /dev/null
+++ b/toolkit/themes/shared/menu-check-black.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9">
+  <polygon points="4,9 0,6.2 1,4.7 3.5,6.4 7.5,0 9,1 "/>
+</svg>
diff --git a/toolkit/themes/shared/menu-check-hover.svg b/toolkit/themes/shared/menu-check-hover.svg
new file mode 100644
index 000000000..b8c8ec322
--- /dev/null
+++ b/toolkit/themes/shared/menu-check-hover.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9">
+  <polygon fill="#ccc" points="4,9 0,6.2 1,4.7 3.5,6.4 7.5,0 9,1 "/>
+</svg>
diff --git a/toolkit/themes/shared/menu-check.png b/toolkit/themes/shared/menu-check.png
new file mode 100644
index 000000000..d82635a63
--- /dev/null
+++ b/toolkit/themes/shared/menu-check.png
diff --git a/toolkit/themes/shared/menu-check@2x.png b/toolkit/themes/shared/menu-check@2x.png
new file mode 100644
index 000000000..2b1f83613
--- /dev/null
+++ b/toolkit/themes/shared/menu-check@2x.png
diff --git a/toolkit/themes/shared/mozapps.inc.mn b/toolkit/themes/shared/mozapps.inc.mn
new file mode 100644
index 000000000..bb43fd4d2
--- /dev/null
+++ b/toolkit/themes/shared/mozapps.inc.mn
@@ -0,0 +1,28 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+# This is not a complete / proper jar manifest. It is included by the
+# actual theme-specific manifests, so that shared resources need only
+# be specified once. As a result, the source file paths are relative
+# to the location of the actual manifest.
+
+  skin/classic/mozapps/extensions/extensionGeneric.svg       (../../shared/extensions/extensionGeneric.svg)
+  skin/classic/mozapps/extensions/utilities.svg              (../../shared/extensions/utilities.svg)
+  skin/classic/mozapps/extensions/navigation.png             (../../shared/extensions/navigation.png)
+  skin/classic/mozapps/extensions/alerticon-warning.svg      (../../shared/extensions/alerticon-warning.svg)
+  skin/classic/mozapps/extensions/alerticon-error.svg        (../../shared/extensions/alerticon-error.svg)
+  skin/classic/mozapps/extensions/alerticon-info-positive.svg (../../shared/extensions/alerticon-info-positive.svg)
+  skin/classic/mozapps/extensions/alerticon-info-negative.svg (../../shared/extensions/alerticon-info-negative.svg)
+  skin/classic/mozapps/formautofill/requestAutocomplete.css  (../../shared/formautofill/requestAutocomplete.css)
+  skin/classic/mozapps/plugins/pluginProblem.css             (../../shared/plugins/pluginProblem.css)
+  skin/classic/mozapps/aboutNetworking.css                   (../../shared/aboutNetworking.css)
+#ifndef ANDROID
+  skin/classic/mozapps/aboutProfiles.css                     (../../shared/aboutProfiles.css)
+#endif
+  skin/classic/mozapps/aboutServiceWorkers.css               (../../shared/aboutServiceWorkers.css)
+  skin/classic/mozapps/plugins/contentPluginActivate.png     (../../shared/plugins/contentPluginActivate.png)
+  skin/classic/mozapps/plugins/contentPluginBlocked.png      (../../shared/plugins/contentPluginBlocked.png)
+  skin/classic/mozapps/plugins/contentPluginClose.png        (../../shared/plugins/contentPluginClose.png)
+  skin/classic/mozapps/plugins/contentPluginCrashed.png      (../../shared/plugins/contentPluginCrashed.png)
+  skin/classic/mozapps/plugins/contentPluginStripe.png       (../../shared/plugins/contentPluginStripe.png)
diff --git a/toolkit/themes/shared/narrate.css b/toolkit/themes/shared/narrate.css
new file mode 100644
index 000000000..8a44e78e2
--- /dev/null
+++ b/toolkit/themes/shared/narrate.css
@@ -0,0 +1,46 @@
+.narrating {
+  position: relative;
+  z-index: 1;
+}
+
+body.light .narrating {
+  background-color: #ffc;
+}
+
+body.sepia .narrating {
+  background-color: #e0d7c5;
+}
+
+body.dark .narrating {
+  background-color: #242424;
+}
+
+.narrate-word-highlight {
+  position: absolute;
+  display: none;
+  transform: translate(-50%, calc(-50% - 2px));
+  z-index: -1;
+  border-bottom-style: solid;
+  border-bottom-width: 7px;
+  transition: left 0.1s ease;
+}
+
+.narrating > .narrate-word-highlight {
+  display: inline-block;
+}
+
+.narrate-word-highlight.newline {
+  transition: none;
+}
+
+body.light .narrate-word-highlight {
+  border-bottom-color: #ffe087;
+}
+
+body.sepia .narrate-word-highlight {
+  border-bottom-color: #bdb5a5;
+}
+
+body.dark .narrate-word-highlight {
+  border-bottom-color: #6f6f6f;
+}
diff --git a/toolkit/themes/shared/narrate/arrow.svg b/toolkit/themes/shared/narrate/arrow.svg
new file mode 100644
index 000000000..2fb21417d
--- /dev/null
+++ b/toolkit/themes/shared/narrate/arrow.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12">
+  <path d="M6 9L1 4l1-1 4 4 4-4 1 1z" fill="#4C4C4C"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/back.svg b/toolkit/themes/shared/narrate/back.svg
new file mode 100644
index 000000000..d29586e38
--- /dev/null
+++ b/toolkit/themes/shared/narrate/back.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      use:not(:target) {
+        display: none;
+      }
+      #disabled {
+        opacity: 0.5;
+      }
+    </style>
+    <path id="shape" d="M 5 0 C 4.446 0 4 0.446 4 1 L 4 23 C 4 23.554 4.446 24 5 24 L 7 24 C 7.554 24 8 23.554 8 23 L 8 12.404297 C 8.04108 12.509297 8.109944 12.610125 8.203125 12.703125 L 19.296875 23.775391 C 19.495259 23.972391 19.661613 24.039562 19.796875 23.976562 C 19.932137 23.915564 20 23.748516 20 23.478516 L 20 0.52148438 C 20 0.25248437 19.93214 0.084484365 19.796875 0.021484375 C 19.661613 -0.040515625 19.495259 0.02856248 19.296875 0.2265625 L 8.203125 11.298828 C 8.1099445 11.381828 8.04108 11.481703 8 11.595703 L 8 1 C 8 0.446 7.554 0 7 0 L 5 0 z " fill="gray"/>
+  </defs>
+  <use id="enabled" xlink:href="#shape"/>
+  <use id="disabled" xlink:href="#shape"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/fast.svg b/toolkit/themes/shared/narrate/fast.svg
new file mode 100644
index 000000000..cd25a6a03
--- /dev/null
+++ b/toolkit/themes/shared/narrate/fast.svg
@@ -0,0 +1,3 @@
+<svg id="Icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20.4">
+    <path fill="gray" d="M14.42 16.68a.77.77 0 0 0 .54.7l2.51.68a1.58 1.58 0 0 1 1.06 1.22l.05.39-3.89-.53a4.34 4.34 0 0 1-1.74-.72L7.2 14.03a5.79 5.79 0 0 1-5.34-4.88h-.82a1 1 0 0 1-1-1l2.9-3.24a6.16 6.16 0 0 1 4.7-2.39 5.88 5.88 0 0 1 .77.05 5 5 0 0 1 .87.15c3.75 1 6.5 5.84 6.5 5.84a2.27 2.27 0 0 0 1.14.85h.17a1.27 1.27 0 0 0 1.22-.4l.78-1-2.47-1.2c-3.38-1.46-2.46-5.71-2.46-5.71 0-.26.23-.32.42-.14l5.32 5-4.31-4.81a1.39 1.39 0 0 1 .81-1.22l4.17 6.65.33.31 2.19 1.54a2.44 2.44 0 0 1 .92 1.75v2.77l-.16.13a1.66 1.66 0 0 1-1.63.19l-.75-.36a2.57 2.57 0 0 0-2.55.32l-2.18 1.82a4.28 4.28 0 0 1-.89.55 10.18 10.18 0 0 0-4.62-8.46c-.27-.16-.66.31-.47.48a10.52 10.52 0 0 1 3.68 8.5v.48zm8.38-5.42a.49.49 0 1 0-.49-.49.49.49 0 0 0 .49.49zm-18 9.14v-.52a1.39 1.39 0 0 1 .93-1.25s2.7-.66 3.43-1.84l2.06 1.63a25.62 25.62 0 0 1-6.43 2z"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/forward.svg b/toolkit/themes/shared/narrate/forward.svg
new file mode 100644
index 000000000..53e64e951
--- /dev/null
+++ b/toolkit/themes/shared/narrate/forward.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      use:not(:target) {
+        display: none;
+      }
+      #disabled {
+        opacity: 0.5;
+      }
+    </style>
+    <path id="shape" d="m 19,0 c 0.554,0 1,0.446 1,1 l 0,22 c 0,0.554 -0.446,1 -1,1 l -2,0 c -0.554,0 -1,-0.446 -1,-1 l 0,-10.595703 c -0.04108,0.105 -0.109944,0.205828 -0.203125,0.298828 L 4.703125,23.775391 c -0.198384,0.197 -0.364738,0.264171 -0.5,0.201171 C 4.067863,23.915564 4,23.748516 4,23.478516 L 4,0.52148438 c 0,-0.26900001 0.06786,-0.43700001 0.203125,-0.5 0.135262,-0.062 0.301616,0.0070781 0.5,0.20507812 l 11.09375,11.0722655 c 0.09318,0.083 0.162045,0.182875 0.203125,0.296875 L 16,1 c 0,-0.554 0.446,-1 1,-1 l 2,0 z" fill="gray"/>
+  </defs>
+  <use id="enabled" xlink:href="#shape"/>
+  <use id="disabled" xlink:href="#shape"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/slow.svg b/toolkit/themes/shared/narrate/slow.svg
new file mode 100644
index 000000000..1892b66e1
--- /dev/null
+++ b/toolkit/themes/shared/narrate/slow.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g fill="gray">
+        <path d="M1.684,13.486c-0.209,0-0.404-0.132-0.474-0.341c-0.528-1.58-0.23-5.767,4.097-7.921 c1.315-0.656,2.589-0.988,3.787-0.988c3.237,0,5.096,2.341,5.99,3.465c0.158,0.199,0.181,0.533,0,0.713 c-0.793,0.794-1.852,1.542-3.231,2.286c-2.46,1.327-5.045,1.775-7.121,2.134c-1.123,0.194-2.093,0.361-2.89,0.627 C1.789,13.479,1.735,13.486,1.684,13.486L1.684,13.486z"/>
+        <path d="M23.185,5.465c-0.86-1.121-2.074-1.819-3.168-1.819c-0.641,0-1.556,0.23-2.273,1.328 c-0.374,0.571-0.577,1.161-0.773,1.73c-0.512,1.482-1.041,3.016-4.662,4.969c-2.316,1.249-4.707,1.664-6.815,2.03 c-2.524,0.438-4.704,0.814-5.455,2.622c-0.069,0.165-0.045,0.354,0.062,0.495c0.107,0.143,0.281,0.217,0.46,0.193 c0.667-0.081,1.533,0.041,2.434,0.217c-0.122,0.146-0.261,0.286-0.391,0.418c-0.38,0.385-0.774,0.783-0.657,1.292 c0.108,0.474,0.604,0.699,0.966,0.828c0.399,0.142,0.843,0.217,1.283,0.217c1.241,0,2.216-0.579,2.649-1.539 c1.704,0.287,3.487,0.313,5.043,0.313l1.639-0.006c0.066,0.056,0.178,0.166,0.264,0.25c0.504,0.506,1.348,1.351,2.721,1.351 c0.129,0,0.264-0.008,0.416-0.026c0.687-0.102,1.351-0.267,1.574-0.787c0.227-0.528-0.123-1.023-0.526-1.597 c-0.481-0.685-1.08-1.532-0.998-2.652c0.196-0.397,0.368-0.824,0.546-1.267c0.479-1.19,0.975-2.421,2.12-3.513 c0.431,0.343,1.022,0.549,1.63,0.549l0,0c0.439,0,0.876-0.102,1.295-0.3c0.624-0.293,1.104-0.967,1.316-1.847 C24.175,7.707,23.914,6.418,23.185,5.465L23.185,5.465z M20.397,7.757c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5 c0.275,0,0.5,0.224,0.5,0.5S20.674,7.757,20.397,7.757z"/>
+    </g>
+</svg>
diff --git a/toolkit/themes/shared/narrate/start.svg b/toolkit/themes/shared/narrate/start.svg
new file mode 100644
index 000000000..95fa71313
--- /dev/null
+++ b/toolkit/themes/shared/narrate/start.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M21.64 12.44L2.827 22.895c-.217.123-.403.137-.56.042-.155-.094-.233-.264-.233-.51V1.572c0-.244.08-.414.233-.51.157-.093.343-.08.56.044L21.642 11.56c.217.124.326.27.326.44 0 .17-.11.316-.327.44z" fill="gray"/>
+</svg>
diff --git a/toolkit/themes/shared/narrate/stop.svg b/toolkit/themes/shared/narrate/stop.svg
new file mode 100644
index 000000000..c017c578f
--- /dev/null
+++ b/toolkit/themes/shared/narrate/stop.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <rect ry="1" rx="1" y="2" x="2" height="20" width="20" fill="gray"/>
+</svg>
diff --git a/toolkit/themes/shared/narrateControls.css b/toolkit/themes/shared/narrateControls.css
new file mode 100644
index 000000000..91d02d85a
--- /dev/null
+++ b/toolkit/themes/shared/narrateControls.css
@@ -0,0 +1,185 @@
+:scope {
+  --border-color: #e5e5e5;
+}
+
+#narrate-toggle > svg {
+  display: block;
+  margin: 0 8px;
+}
+
+.dropdown-popup button {
+  background-color: transparent;
+}
+
+.dropdown-popup button:hover:not(:disabled) {
+  background-color: #eaeaea;
+}
+
+.narrate-row {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  box-sizing: border-box;
+}
+
+.narrate-row:not(:first-child) {
+  border-top: 1px solid var(--border-color);
+}
+
+/* Control buttons */
+
+#narrate-control > button {
+  background-size: 24px 24px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  height: 64px;
+  width: 100px;
+  border: none;
+  color: #666;
+  box-sizing: border-box;
+}
+
+#narrate-control > button:not(:first-child) {
+  border-left: 1px solid var(--border-color);
+}
+
+#narrate-skip-previous {
+  border-top-left-radius: 3px;
+  background-image: url("chrome://global/skin/narrate/back.svg#enabled");
+}
+
+#narrate-skip-next {
+  border-top-right-radius: 3px;
+  background-image: url("chrome://global/skin/narrate/forward.svg#enabled");
+}
+
+#narrate-skip-previous:disabled {
+  background-image: url("chrome://global/skin/narrate/back.svg#disabled");
+}
+
+#narrate-skip-next:disabled {
+  background-image: url("chrome://global/skin/narrate/forward.svg#disabled");
+}
+
+#narrate-start-stop {
+  background-image: url("chrome://global/skin/narrate/start.svg");
+}
+
+#narrate-dropdown.speaking #narrate-start-stop {
+  background-image: url("chrome://global/skin/narrate/stop.svg");
+}
+
+/* Rate control */
+
+#narrate-rate::before, #narrate-rate::after {
+  content: '';
+  width: 48px;
+  height: 40px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 24px auto;
+}
+
+#narrate-rate::before {
+  background-image: url("chrome://global/skin/narrate/slow.svg");
+}
+
+#narrate-rate::after {
+  background-image: url("chrome://global/skin/narrate/fast.svg");
+}
+
+#narrate-rate-input {
+  margin: 0 1px;
+  flex-grow: 1;
+}
+
+#narrate-rate-input::-moz-range-track {
+  background-color: #979797;
+  height: 2px;
+}
+
+#narrate-rate-input::-moz-range-progress {
+  background-color: #2EA3FF;
+  height: 2px;
+}
+
+#narrate-rate-input::-moz-range-thumb {
+  background-color: #808080;
+  height: 16px;
+  width: 16px;
+  border-radius: 8px;
+  border-width: 0;
+}
+
+#narrate-rate-input:active::-moz-range-thumb {
+  background-color: #2EA3FF;
+}
+
+/* Voice selection */
+
+.voiceselect {
+  width: 100%;
+}
+
+.voiceselect > button.select-toggle,
+.voiceselect > .options > button.option {
+  -moz-appearance: none;
+  border: none;
+  width: 100%;
+  min-height: 40px;
+}
+
+.voiceselect.open > button.select-toggle {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.voiceselect > button.select-toggle::after {
+  content: '';
+  background-image: url("chrome://global/skin/narrate/arrow.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  display: inline-block;
+  width: 1.5em;
+  height: 1em;
+  vertical-align: middle;
+}
+
+.voiceselect > .options > button.option:not(:first-child) {
+  border-top: 1px solid var(--border-color);
+}
+
+.voiceselect > .options > button.option  {
+  box-sizing: border-box;
+}
+
+.voiceselect > .options:not(.hovering) > button.option:focus {
+  background-color: #eaeaea;
+}
+
+.voiceselect > .options:not(.hovering) > button.option:hover:not(:focus) {
+  background-color: transparent;
+}
+
+.voiceselect > .options > button.option::-moz-focus-inner {
+  outline: none;
+  border: 0;
+}
+
+.voiceselect > .options {
+  display: none;
+  overflow-y: auto;
+}
+
+.voiceselect.open > .options {
+  display: block;
+}
+
+.current-voice {
+  color: #7f7f7f;
+}
+
+.voiceselect:not(.open) > button,
+.option:last-child {
+  border-radius: 0 0 3px 3px;
+}
diff --git a/toolkit/themes/shared/non-mac.jar.inc.mn b/toolkit/themes/shared/non-mac.jar.inc.mn
new file mode 100644
index 000000000..151749f72
--- /dev/null
+++ b/toolkit/themes/shared/non-mac.jar.inc.mn
@@ -0,0 +1,141 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+# This is not a complete / proper jar manifest. It is conditionally included
+# by the shared jar manifest, which in turn is included by the os-specific
+# manifests.
+# As a result, the source file paths are relative to the location of the
+# actual manifests.
+
+#include jar.inc.mn
+
+  skin/classic/global/arrow.css                            (../../windows/global/arrow.css)
+  skin/classic/global/customizeToolbar.css                 (../../windows/global/customizeToolbar.css)
+  skin/classic/global/datetimepicker.css                   (../../windows/global/datetimepicker.css)
+  skin/classic/global/dialog.css                           (../../windows/global/dialog.css)
+  skin/classic/global/expander.css                         (../../windows/global/expander.css)
+  skin/classic/global/filefield.css                        (../../windows/global/filefield.css)
+  skin/classic/global/globalBindings.xml                   (../../windows/global/globalBindings.xml)
+  skin/classic/global/linkTree.css                         (../../windows/global/linkTree.css)
+  skin/classic/global/progressmeter.css                    (../../windows/global/progressmeter.css)
+  skin/classic/global/resizer.css                          (../../windows/global/resizer.css)
+  skin/classic/global/richlistbox.css                      (../../windows/global/richlistbox.css)
+  skin/classic/global/scale.css                            (../../windows/global/scale.css)
+#ifndef MOZ_THEME_FASTSTRIPE
+  skin/classic/global/scrollbars.css                       (../../windows/global/xulscrollbars.css)
+#endif
+  skin/classic/global/spinbuttons.css                      (../../windows/global/spinbuttons.css)
+  skin/classic/global/tabprompts.css                       (../../windows/global/tabprompts.css)
+  skin/classic/global/wizard.css                           (../../windows/global/wizard.css)
+
+  skin/classic/global/arrow/arrow-dn.gif                   (../../windows/global/arrow/arrow-dn.gif)
+  skin/classic/global/arrow/arrow-dn-dis.gif               (../../windows/global/arrow/arrow-dn-dis.gif)
+  skin/classic/global/arrow/arrow-dn-hov.gif               (../../windows/global/arrow/arrow-dn-hov.gif)
+  skin/classic/global/arrow/arrow-dn-sharp.gif             (../../windows/global/arrow/arrow-dn-sharp.gif)
+  skin/classic/global/arrow/arrow-down.png                 (../../windows/global/arrow/arrow-down.png)
+  skin/classic/global/arrow/arrow-lft.gif                  (../../windows/global/arrow/arrow-lft.gif)
+  skin/classic/global/arrow/arrow-lft-dis.gif              (../../windows/global/arrow/arrow-lft-dis.gif)
+  skin/classic/global/arrow/arrow-lft-sharp.gif            (../../windows/global/arrow/arrow-lft-sharp.gif)
+  skin/classic/global/arrow/arrow-lft-sharp-end.gif        (../../windows/global/arrow/arrow-lft-sharp-end.gif)
+  skin/classic/global/arrow/arrow-rit.gif                  (../../windows/global/arrow/arrow-rit.gif)
+  skin/classic/global/arrow/arrow-rit-dis.gif              (../../windows/global/arrow/arrow-rit-dis.gif)
+  skin/classic/global/arrow/arrow-rit-sharp.gif            (../../windows/global/arrow/arrow-rit-sharp.gif)
+  skin/classic/global/arrow/arrow-rit-sharp-end.gif        (../../windows/global/arrow/arrow-rit-sharp-end.gif)
+  skin/classic/global/arrow/arrow-up.gif                   (../../windows/global/arrow/arrow-up.gif)
+  skin/classic/global/arrow/arrow-up-dis.gif               (../../windows/global/arrow/arrow-up-dis.gif)
+  skin/classic/global/arrow/arrow-up-hov.gif               (../../windows/global/arrow/arrow-up-hov.gif)
+  skin/classic/global/arrow/arrow-up-sharp.gif             (../../windows/global/arrow/arrow-up-sharp.gif)
+  skin/classic/global/arrow/panelarrow-horizontal.svg      (../../windows/global/arrow/panelarrow-horizontal.svg)
+  skin/classic/global/arrow/panelarrow-vertical.svg        (../../windows/global/arrow/panelarrow-vertical.svg)
+  skin/classic/global/arrow/panelarrow-horizontal-themed.svg (../../windows/global/arrow/panelarrow-horizontal-themed.svg)
+  skin/classic/global/arrow/panelarrow-vertical-themed.svg   (../../windows/global/arrow/panelarrow-vertical-themed.svg)
+
+  skin/classic/global/checkbox/cbox-check.gif              (../../windows/global/checkbox/cbox-check.gif)
+  skin/classic/global/checkbox/cbox-check-dis.gif          (../../windows/global/checkbox/cbox-check-dis.gif)
+* skin/classic/global/dirListing/dirListing.css            (../../windows/global/dirListing/dirListing.css)
+  skin/classic/global/dirListing/folder.png                (../../windows/global/dirListing/folder.png)
+  skin/classic/global/dirListing/local.png                 (../../windows/global/dirListing/local.png)
+  skin/classic/global/dirListing/up.png                    (../../windows/global/dirListing/up.png)
+  skin/classic/global/icons/Close.gif                      (../../windows/global/icons/Close.gif)
+  skin/classic/global/icons/close.png                      (../../windows/global/icons/close.png)
+  skin/classic/global/icons/close@2x.png                   (../../windows/global/icons/close@2x.png)
+  skin/classic/global/icons/close-inverted.png             (../../windows/global/icons/close-inverted.png)
+  skin/classic/global/icons/close-inverted@2x.png          (../../windows/global/icons/close-inverted@2x.png)
+  skin/classic/global/icons/collapse.png                   (../../windows/global/icons/collapse.png)
+  skin/classic/global/icons/Error.png                      (../../windows/global/icons/Error.png)
+  skin/classic/global/icons/error-16.png                   (../../windows/global/icons/error-16.png)
+  skin/classic/global/icons/error-64.png                   (../../windows/global/icons/error-64.png)
+  skin/classic/global/icons/expand.png                     (../../windows/global/icons/expand.png)
+  skin/classic/global/icons/folder-item.png                (../../windows/global/icons/folder-item.png)
+  skin/classic/global/icons/information-16.png             (../../windows/global/icons/information-16.png)
+  skin/classic/global/icons/information-24.png             (../../windows/global/icons/information-24.png)
+  skin/classic/global/icons/information-32.png             (../../windows/global/icons/information-32.png)
+  skin/classic/global/icons/Minimize.gif                   (../../windows/global/icons/Minimize.gif)
+  skin/classic/global/icons/Print-preview.png              (../../windows/global/icons/Print-preview.png)
+  skin/classic/global/icons/Portrait.png                   (../../windows/global/icons/Portrait.png)
+  skin/classic/global/icons/Landscape.png                  (../../windows/global/icons/Landscape.png)
+  skin/classic/global/icons/Question.png                   (../../windows/global/icons/Question.png)
+  skin/classic/global/icons/question-16.png                (../../windows/global/icons/question-16.png)
+  skin/classic/global/icons/question-64.png                (../../windows/global/icons/question-64.png)
+  skin/classic/global/icons/resizer-rtl.png                (../../windows/global/icons/resizer-rtl.png)
+  skin/classic/global/icons/Restore.gif                    (../../windows/global/icons/Restore.gif)
+  skin/classic/global/icons/Search-close.png               (../../windows/global/icons/Search-close.png)
+  skin/classic/global/icons/Search-glass.png               (../../windows/global/icons/Search-glass.png)
+  skin/classic/global/icons/tabprompts-bgtexture.png       (../../windows/global/icons/tabprompts-bgtexture.png)
+  skin/classic/global/icons/Warning.png                    (../../windows/global/icons/Warning.png)
+  skin/classic/global/icons/warning-large.png              (../../windows/global/icons/warning-large.png)
+  skin/classic/global/icons/warning-16.png                 (../../windows/global/icons/warning-16.png)
+  skin/classic/global/icons/warning-64.png                 (../../windows/global/icons/warning-64.png)
+  skin/classic/global/icons/windowControls.png             (../../windows/global/icons/windowControls.png)
+  skin/classic/global/radio/radio-check.gif                (../../windows/global/radio/radio-check.gif)
+  skin/classic/global/radio/radio-check-dis.gif            (../../windows/global/radio/radio-check-dis.gif)
+  skin/classic/global/scale/scale-tray-horiz.gif           (../../windows/global/scale/scale-tray-horiz.gif)
+  skin/classic/global/scale/scale-tray-vert.gif            (../../windows/global/scale/scale-tray-vert.gif)
+  skin/classic/global/scrollbar/slider.gif                 (../../windows/global/scrollbar/slider.gif)
+  skin/classic/global/splitter/grip-bottom.gif             (../../windows/global/splitter/grip-bottom.gif)
+  skin/classic/global/splitter/grip-top.gif                (../../windows/global/splitter/grip-top.gif)
+  skin/classic/global/splitter/grip-left.gif               (../../windows/global/splitter/grip-left.gif)
+  skin/classic/global/splitter/grip-right.gif              (../../windows/global/splitter/grip-right.gif)
+  skin/classic/global/toolbar/chevron.gif                  (../../windows/global/toolbar/chevron.gif)
+  skin/classic/global/toolbar/chevron-inverted.png         (../../windows/global/toolbar/chevron-inverted.png)
+  skin/classic/global/tree/columnpicker.gif                (../../windows/global/tree/columnpicker.gif)
+  skin/classic/global/tree/sort-asc.png                    (../../windows/global/tree/sort-asc.png)
+  skin/classic/global/tree/sort-dsc.png                    (../../windows/global/tree/sort-dsc.png)
+  skin/classic/global/tree/sort-asc-classic.png            (../../windows/global/tree/sort-asc-classic.png)
+  skin/classic/global/tree/sort-dsc-classic.png            (../../windows/global/tree/sort-dsc-classic.png)
+
+  skin/classic/mozapps/downloads/downloadButtons.png         (../../windows/mozapps/downloads/downloadButtons.png)
+  skin/classic/mozapps/downloads/unknownContentType.css      (../../windows/mozapps/downloads/unknownContentType.css)
+  skin/classic/mozapps/extensions/about.css                  (../../windows/mozapps/extensions/about.css)
+  skin/classic/mozapps/extensions/blocklist.css              (../../windows/mozapps/extensions/blocklist.css)
+  skin/classic/mozapps/extensions/update.css                 (../../windows/mozapps/extensions/update.css)
+  skin/classic/mozapps/extensions/discover-logo.png          (../../windows/mozapps/extensions/discover-logo.png)
+  skin/classic/mozapps/extensions/experimentGeneric.png      (../../windows/mozapps/extensions/experimentGeneric.png)
+  skin/classic/mozapps/extensions/rating-won.png             (../../windows/mozapps/extensions/rating-won.png)
+  skin/classic/mozapps/extensions/rating-not-won.png         (../../windows/mozapps/extensions/rating-not-won.png)
+  skin/classic/mozapps/extensions/cancel.png                 (../../windows/mozapps/extensions/cancel.png)
+  skin/classic/mozapps/extensions/eula.css                   (../../windows/mozapps/extensions/eula.css)
+  skin/classic/mozapps/handling/handling.css                 (../../windows/mozapps/handling/handling.css)
+  skin/classic/mozapps/plugins/pluginBlocked-64.png          (../../windows/mozapps/plugins/pluginBlocked-64.png)
+  skin/classic/mozapps/plugins/pluginHelp-16.png             (../../windows/mozapps/plugins/pluginHelp-16.png)
+  skin/classic/mozapps/profile/profileSelection.css          (../../windows/mozapps/profile/profileSelection.css)
+  skin/classic/mozapps/update/downloadButtons.png            (../../windows/mozapps/update/downloadButtons.png)
+* skin/classic/mozapps/xpinstall/xpinstallConfirm.css        (../../windows/mozapps/extensions/xpinstallConfirm.css)
+
+#if MOZ_BUILD_APP == browser
+[browser/extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}] chrome.jar:
+#elif MOZ_SEPARATE_MANIFEST_FOR_THEME_OVERRIDES
+[extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}] chrome.jar:
+#endif
+% override chrome://global/skin/arrow/arrow-lft-hov.gif           chrome://global/skin/arrow/arrow-lft.gif
+% override chrome://global/skin/arrow/arrow-rit-hov.gif           chrome://global/skin/arrow/arrow-rit.gif
+% override chrome://mozapps/skin/extensions/category-dictionaries.png     chrome://mozapps/skin/extensions/dictionaryGeneric.png
+% override chrome://mozapps/skin/extensions/category-experiments.png      chrome://mozapps/skin/extensions/experimentGeneric.png
+% override chrome://mozapps/skin/extensions/category-extensions.svg       chrome://mozapps/skin/extensions/extensionGeneric.svg
+% override chrome://mozapps/skin/extensions/category-languages.png        chrome://mozapps/skin/extensions/localeGeneric.png
+% override chrome://mozapps/skin/extensions/category-themes.png           chrome://mozapps/skin/extensions/themeGeneric.png
+% override chrome://mozapps/skin/plugins/notifyPluginCrashed.png          chrome://mozapps/skin/plugins/pluginGeneric-16.png
+% override chrome://mozapps/skin/plugins/notifyPluginGeneric.png          chrome://mozapps/skin/plugins/pluginGeneric-16.png
+% override chrome://mozapps/skin/xpinstall/xpinstallItemGeneric.png       chrome://mozapps/skin/extensions/extensionGeneric.png
+
diff --git a/toolkit/themes/shared/passwordmgr.css b/toolkit/themes/shared/passwordmgr.css
new file mode 100644
index 000000000..f95d176d7
--- /dev/null
+++ b/toolkit/themes/shared/passwordmgr.css
@@ -0,0 +1,26 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+.contentPane {
+  margin: 9px 8px 5px 8px;
+}
+
+.actionButtons {
+  margin: 0px 3px 6px 3px !important;
+}
+
+treechildren::-moz-tree-image(siteCol) {
+  list-style-image: url(chrome://mozapps/skin/places/defaultFavicon.png);
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 5px;
+}
+
+@media (min-resolution: 1.1dppx) {
+  treechildren::-moz-tree-image(siteCol) {
+    list-style-image: url(chrome://mozapps/skin/places/defaultFavicon@2x.png);
+  }
+}
diff --git a/toolkit/themes/shared/places/defaultFavicon-inverted.png b/toolkit/themes/shared/places/defaultFavicon-inverted.png
new file mode 100644
index 000000000..82c8d1f87
--- /dev/null
+++ b/toolkit/themes/shared/places/defaultFavicon-inverted.png
diff --git a/toolkit/themes/shared/places/defaultFavicon-inverted@2x.png b/toolkit/themes/shared/places/defaultFavicon-inverted@2x.png
new file mode 100644
index 000000000..b5663444e
--- /dev/null
+++ b/toolkit/themes/shared/places/defaultFavicon-inverted@2x.png
diff --git a/toolkit/themes/shared/places/defaultFavicon.png b/toolkit/themes/shared/places/defaultFavicon.png
new file mode 100644
index 000000000..4092dfb55
--- /dev/null
+++ b/toolkit/themes/shared/places/defaultFavicon.png
diff --git a/toolkit/themes/shared/places/defaultFavicon@2x.png b/toolkit/themes/shared/places/defaultFavicon@2x.png
new file mode 100644
index 000000000..a1b23f683
--- /dev/null
+++ b/toolkit/themes/shared/places/defaultFavicon@2x.png
diff --git a/toolkit/themes/shared/plugins/contentPluginActivate.png b/toolkit/themes/shared/plugins/contentPluginActivate.png
new file mode 100644
index 000000000..31351dc3b
--- /dev/null
+++ b/toolkit/themes/shared/plugins/contentPluginActivate.png
diff --git a/toolkit/themes/shared/plugins/contentPluginBlocked.png b/toolkit/themes/shared/plugins/contentPluginBlocked.png
new file mode 100644
index 000000000..1e092bf18
--- /dev/null
+++ b/toolkit/themes/shared/plugins/contentPluginBlocked.png
diff --git a/toolkit/themes/shared/plugins/contentPluginClose.png b/toolkit/themes/shared/plugins/contentPluginClose.png
new file mode 100644
index 000000000..61eb55828
--- /dev/null
+++ b/toolkit/themes/shared/plugins/contentPluginClose.png
diff --git a/toolkit/themes/shared/plugins/contentPluginCrashed.png b/toolkit/themes/shared/plugins/contentPluginCrashed.png
new file mode 100644
index 000000000..89d3e91a9
--- /dev/null
+++ b/toolkit/themes/shared/plugins/contentPluginCrashed.png
diff --git a/toolkit/themes/shared/plugins/contentPluginDisabled.png b/toolkit/themes/shared/plugins/contentPluginDisabled.png
new file mode 100644
index 000000000..b8b6a1020
--- /dev/null
+++ b/toolkit/themes/shared/plugins/contentPluginDisabled.png
diff --git a/toolkit/themes/shared/plugins/contentPluginStripe.png b/toolkit/themes/shared/plugins/contentPluginStripe.png
new file mode 100644
index 000000000..6035ee121
--- /dev/null
+++ b/toolkit/themes/shared/plugins/contentPluginStripe.png
diff --git a/toolkit/themes/shared/plugins/pluginProblem.css b/toolkit/themes/shared/plugins/pluginProblem.css
new file mode 100644
index 000000000..9929bd92a
--- /dev/null
+++ b/toolkit/themes/shared/plugins/pluginProblem.css
@@ -0,0 +1,206 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace html url(http://www.w3.org/1999/xhtml);
+
+/* These styles affect only the bound element, not other page content. */
+/* Keep any changes to these styles in sync with plugin-doorhanger.inc.css */
+.mainBox {
+  font: message-box;
+  font-size: 12px;
+  text-align: center;
+  display: table;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(72,72,72);
+  color: white;
+  -moz-user-select: none;
+}
+
+.hoverBox {
+  display: table-cell;
+  box-sizing: border-box;
+  padding: 5px;
+  vertical-align: middle;
+  width: 100%;
+  height: 100%;
+}
+:-moz-handler-vulnerable-updatable .hoverBox:active,
+:-moz-handler-vulnerable-no-update .hoverBox:active,
+:-moz-handler-clicktoplay .hoverBox:active {
+  background-color: rgb(65, 65, 65);
+}
+
+:-moz-handler-clicktoplay .hoverBox:active .msgTapToPlay,
+:-moz-handler-clicktoplay .hoverBox:active .msgClickToPlay,
+:-moz-handler-vulnerable-updatable .hoverBox:active .msgTapToPlay,
+:-moz-handler-vulnerable-updatable .hoverBox:active .msgClickToPlay,
+:-moz-handler-vulnerable-no-update .hoverBox:active .msgTapToPlay,
+:-moz-handler-vulnerable-no-update .hoverBox:active .msgClickToPlay {
+  color: red;
+}
+
+:-moz-handler-vulnerable-updatable .hoverBox,
+:-moz-handler-vulnerable-no-update .hoverBox,
+:-moz-handler-blocked .hoverBox,
+:-moz-handler-crashed .hoverBox {
+  background-image: url(chrome://mozapps/skin/plugins/contentPluginStripe.png);
+}
+
+html|a {
+  color: white;
+}
+
+.icon {
+  width: 48px;
+  height: 48px;
+  background-position: center;
+  background-repeat: no-repeat;
+  border: none;
+  background-color: transparent;
+  -moz-user-focus: ignore;
+  margin-bottom: 6px;
+}
+
+:-moz-handler-vulnerable-updatable .icon,
+:-moz-handler-vulnerable-no-update .icon {
+  background-image: url(chrome://mozapps/skin/plugins/contentPluginBlocked.png);
+  -moz-user-focus: normal;
+}
+:-moz-handler-blocked .icon {
+  background-image: url(chrome://mozapps/skin/plugins/contentPluginBlocked.png);
+}
+a .icon,
+:-moz-handler-clicktoplay .icon {
+  background-image: url(chrome://mozapps/skin/plugins/contentPluginActivate.png);
+  -moz-user-focus: normal;
+}
+:-moz-handler-crashed .icon {
+  background-image: url(chrome://mozapps/skin/plugins/contentPluginCrashed.png);
+}
+
+.throbber {
+  padding-left: 16px; /* width of the background image */
+  background: url(chrome://global/skin/icons/loading.png) no-repeat;
+  margin-left: 5px;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .throbber {
+    background-image: url(chrome://global/skin/icons/loading@2x.png);
+    background-size: 16px;
+  }
+}
+
+.msgTapToPlay,
+.msgClickToPlay {
+  text-decoration: underline;
+}
+
+@media not all and (-moz-touch-enabled) {
+  :-moz-handler-clicktoplay .msgTapToPlay,
+  a .msgTapToPlay  {
+    display: none;
+  }
+}
+
+@media (-moz-touch-enabled) {
+    :-moz-handler-clicktoplay .msgClickToPlay,
+    a .msgClickToPlay {
+    display: none;
+  }
+}
+
+.submitStatus div {
+  min-height: 19px; /* height of biggest line (with throbber) */
+}
+
+.submitComment {
+  width: 340px;
+  height: 70px;
+  padding: 5px;
+  border: none;
+  border-radius: 5px;
+  resize: none;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.submitURLOptInBox {
+  text-align: start;
+}
+
+.submitURLOptIn {
+  margin-left: -1px;
+}
+
+.mainBox[chromedir="rtl"] .submitURLOptIn {
+  margin-left: 0;
+  margin-right: -1px;
+}
+
+.submitButtonBox {
+  margin-top: 7px;
+}
+
+.submitButton {
+  float: right;
+}
+
+.mainBox[chromedir="rtl"] .submitButton {
+  float: left;
+}
+
+.helpIcon {
+  display: inline-block;
+  min-width: 16px;
+  min-height: 16px;
+  background: url(chrome://mozapps/skin/plugins/pluginHelp-16.png) no-repeat;
+  cursor: pointer;
+  float: left;
+}
+
+.mainBox[chromedir="rtl"] .helpIcon {
+  float: right;
+}
+
+.closeIcon {
+  display: block;
+  width: 16px;
+  height: 16px;
+  margin-top: 4px;
+  margin-inline-start: -20px;
+  margin-inline-end: 4px;
+  border: none;
+  background-color: transparent;
+  background-image: url("chrome://mozapps/skin/plugins/contentPluginClose.png");
+  background-repeat: no-repeat;
+}
+
+.closeIcon:hover {
+  background-position: -16px 0;
+}
+
+.closeIcon:hover:active {
+  background-position: -32px 0;
+}
+
+.action-link {
+  display: inline-block;
+  border-radius: 10px;
+  background-color: rgb(35, 35, 35);
+  padding: 2px 8px;
+  margin-top: 7px;
+  text-decoration: none;
+}
+.action-link:active {
+  background-color: rgb(20, 20, 20);
+}
+
+:-moz-handler-vulnerable-updatable .action-link {
+  background-color: #a81b0c;
+}
+:-moz-handler-vulnerable-updatable .action-link:active {
+  background-color: #801409;
+}
diff --git a/toolkit/themes/shared/reader/RM-Close-24x24.svg b/toolkit/themes/shared/reader/RM-Close-24x24.svg
new file mode 100644
index 000000000..89fc1eb86
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Close-24x24.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      use:not(:target) {
+        display: none;
+      }
+      #close {
+        fill: #808080;
+      }
+      #close-hover {
+        fill: #fff;
+      }
+    </style>
+
+    <path id="close-shape" d="M19,22H6a2,2,0,0,1-2-2V18l2,2H18a1,1,0,0,0,1-1V5a1,1,0,0,0-1-1H6L4,6V4A2,2,0,0,1,6,2H19a2,2,0,0,1,2,2V20A2,2,0,0,1,19,22Zm-6-9H5.4l4.2,4.154L8.186,18.631,1.567,12.017,8.021,5.411,9.5,6.95,5.424,11H13v2Z"/>
+  </defs>
+  <use id="close" xlink:href="#close-shape"/>
+  <use id="close-hover" xlink:href="#close-shape"/>
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg
new file mode 100644
index 000000000..48bbb9e89
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="42"
+     height="16"
+     viewBox="0 0 42 16"
+     fill="#808080">
+
+  <path d="M14.5,7 L8.75,1.25 L10,-1.91791433e-15 L18,8 L17.375,8.625 L10,16 L8.75,14.75 L14.5,9 L1.13686838e-13,9 L1.13686838e-13,7 L14.5,7 Z"/>
+  <path d="M38.5,7 L32.75,1.25 L34,6.58831647e-15 L42,8 L41.375,8.625 L34,16 L32.75,14.75 L38.5,9 L24,9 L24,7 L38.5,7 Z" transform="translate(33.000000, 8.000000) scale(-1, 1) translate(-33.000000, -8.000000)"/>
+
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg b/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg
new file mode 100644
index 000000000..bcdcbe8ad
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="44"
+     height="16"
+     viewBox="0 0 44 16"
+     fill="#808080">
+
+  <path d="M14.5,7 L8.75,1.25 L10,-1.91791433e-15 L18,8 L17.375,8.625 L10,16 L8.75,14.75 L14.5,9 L1.13686838e-13,9 L1.13686838e-13,7 L14.5,7 Z" transform="translate(9.000000, 8.000000) scale(-1, 1) translate(-9.000000, -8.000000)"/>
+  <path d="M40.5,7 L34.75,1.25 L36,-5.17110888e-16 L44,8 L43.375,8.625 L36,16 L34.75,14.75 L40.5,9 L26,9 L26,7 L40.5,7 Z"/>
+
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg b/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg
new file mode 100644
index 000000000..05d52828a
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="38"
+     height="14"
+     viewBox="0 0 38 14"
+     fill="#808080">
+
+  <rect x="0" y="0" width="28" height="2"/>
+  <rect x="0" y="6" width="38" height="2"/>
+  <rect x="0" y="12" width="18" height="2"/>
+
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg b/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg
new file mode 100644
index 000000000..0a5ee0dcc
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="38"
+     height="24"
+     viewBox="0 0 38 24"
+     fill="#808080">
+
+  <rect x="0" y="0" width="28" height="2"/>
+  <rect x="0" y="11" width="38" height="2"/>
+  <rect x="0" y="22" width="18" height="2"/>
+
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Minus-24x24.svg b/toolkit/themes/shared/reader/RM-Minus-24x24.svg
new file mode 100644
index 000000000..e85a39761
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Minus-24x24.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" fill="#808080" d="M0,13.5v-3h24v3H0z"/>
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Plus-24x24.svg b/toolkit/themes/shared/reader/RM-Plus-24x24.svg
new file mode 100644
index 000000000..f3a98ddb2
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Plus-24x24.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill-rule="evenodd" fill="#808080" d="M24,13.5H13.5V24h-3V13.5H0v-3h10.5V0h3v10.5H24V13.5z"/>
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg b/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg
new file mode 100644
index 000000000..5f43818de
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path fill="#737373" d="M10.87,18.989h2.144L8.3,3.991H5.724l-4.739,15H3.044l1.115-4.171h5.6ZM4.652,12.91L6.968,5.69l2.294,7.22H4.652ZM22.1,16.515v-5.06c0-2.31-.984-3.713-3.65-3.713a10.236,10.236,0,0,0-3.7.756L15.116,9.9A9.9,9.9,0,0,1,18.1,9.317c1.533,0,1.958.627,1.958,2.223v0.975h-1.35c-3.086,0-4.871,1.125-4.871,3.5a3.217,3.217,0,0,0,3.527,3.338,3.205,3.205,0,0,0,2.945-1.659,2.573,2.573,0,0,0,2.436,1.659l0.441-1.344A1.408,1.408,0,0,1,22.1,16.515ZM17.8,17.9a1.744,1.744,0,0,1-1.911-1.995c0-1.512,1.029-2.111,3.065-2.111h1.1V16.18C19.426,17.334,18.938,17.9,17.8,17.9Z"/>
+</svg>
diff --git a/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg
new file mode 100644
index 000000000..837392ff3
--- /dev/null
+++ b/toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <polygon opacity="0.15"  points="16.583,0.015 16.569,0 4.583,12 16.569,24 16.583,23.985"/>
+  <polygon fill="#fbfbfb" points="16.575,1.021 16.561,1.008 5.583,12 16.577,23.008 16.591,22.994 "/>
+</svg>
diff --git a/toolkit/themes/shared/timepicker.css b/toolkit/themes/shared/timepicker.css
new file mode 100644
index 000000000..e8d081b30
--- /dev/null
+++ b/toolkit/themes/shared/timepicker.css
@@ -0,0 +1,153 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:root {
+  --font-size-default: 1.1rem;
+  --spinner-width: 3rem;
+  --spinner-margin-top-bottom: 0.4rem;
+  --spinner-item-height: 2.4rem;
+  --spinner-item-margin-bottom: 0.1rem;
+  --spinner-button-height: 1.2rem;
+  --colon-width: 2rem;
+  --day-period-spacing-width: 1rem;
+
+  --border: 0.1rem solid #D6D6D6;
+  --border-radius: 0.3rem;
+
+  --font-color: #191919;
+  --fill-color: #EBEBEB;
+
+  --selected-font-color: #FFFFFF;
+  --selected-fill-color: #0996F8;
+
+  --button-font-color: #858585;
+  --button-font-color-hover: #4D4D4D;
+  --button-font-color-active: #191919;
+
+  --disabled-opacity: 0.2;
+}
+
+html {
+  font-size: 10px;
+}
+
+body {
+  margin: 0;
+  color: var(--font-color);
+  font-size: var(--font-size-default);
+}
+
+#time-picker {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.spinner-container {
+  font-family: sans-serif;
+  display: flex;
+  flex-direction: column;
+  width: var(--spinner-width);
+}
+
+.spinner-container > button {
+  -moz-appearance: none;
+  border: none;
+  background: none;
+  background-color: var(--button-font-color);
+  height: var(--spinner-button-height);
+}
+
+.spinner-container > button:hover {
+  background-color: var(--button-font-color-hover);
+}
+
+.spinner-container > button.active {
+  background-color: var(--button-font-color-active);
+}
+
+.spinner-container > button.up {
+  mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-previous") no-repeat 50% 50%;
+}
+
+.spinner-container > button.down {
+  mask: url("chrome://global/skin/icons/find-arrows.svg#glyph-find-next") no-repeat 50% 50%;
+}
+
+.spinner-container.hide-buttons > button {
+  visibility: hidden;
+}
+
+.spinner-container > .spinner {
+  position: relative;
+  width: 100%;
+  margin: var(--spinner-margin-top-bottom) 0;
+  cursor: default;
+  overflow-y: scroll;
+  scroll-snap-type: mandatory;
+  scroll-snap-points-y: repeat(100%);
+}
+
+.spinner-container > .spinner > div {
+  box-sizing: border-box;
+  position: relative;
+  text-align: center;
+  padding: calc((var(--spinner-item-height) - var(--font-size-default)) / 2) 0;
+  margin-bottom: var(--spinner-item-margin-bottom);
+  height: var(--spinner-item-height);
+  -moz-user-select: none;
+  scroll-snap-coordinate: 0 0;
+}
+
+.spinner-container > .spinner > div:hover::before {
+  background: var(--fill-color);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  content: "";
+  position: absolute;
+  top: 0%;
+  bottom: 0%;
+  left: 0%;
+  right: 0%;
+  z-index: -10;
+}
+
+.spinner-container > .spinner:not(.scrolling) > div.selection {
+  color: var(--selected-font-color);
+}
+
+.spinner-container > .spinner > div.selection::before {
+  background: var(--selected-fill-color);
+  border: none;
+  border-radius: var(--border-radius);
+  content: "";
+  position: absolute;
+  top: 0%;
+  bottom: 0%;
+  left: 0%;
+  right: 0%;
+  z-index: -10;
+}
+
+.spinner-container > .spinner > div.disabled::before,
+.spinner-container > .spinner.scrolling > div.selection::before,
+.spinner-container > .spinner.scrolling > div:hover::before {
+  display: none;
+}
+
+.spinner-container > .spinner > div.disabled {
+  opacity: var(--disabled-opacity);
+}
+
+.colon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--colon-width);
+  margin-bottom: 0.3rem;
+}
+
+.spacer {
+  width: var(--day-period-spacing-width);
+}
+\ No newline at end of file