summaryrefslogtreecommitdiffstats
path: root/toolkit/themes/shared
diff options
context:
space:
mode:
Diffstat (limited to 'toolkit/themes/shared')
-rw-r--r--toolkit/themes/shared/about.css62
-rw-r--r--toolkit/themes/shared/aboutCache.css70
-rw-r--r--toolkit/themes/shared/aboutCacheEntry.css29
-rw-r--r--toolkit/themes/shared/aboutMemory.css5
-rw-r--r--toolkit/themes/shared/aboutNetworking.css123
-rw-r--r--toolkit/themes/shared/aboutProfiles.css68
-rw-r--r--toolkit/themes/shared/aboutReader.css178
-rw-r--r--toolkit/themes/shared/aboutReaderContent.css177
-rw-r--r--toolkit/themes/shared/aboutReaderControls.css388
-rw-r--r--toolkit/themes/shared/aboutServiceWorkers.css44
-rw-r--r--toolkit/themes/shared/aboutSupport.css131
-rw-r--r--toolkit/themes/shared/alert-common.css165
-rw-r--r--toolkit/themes/shared/appPicker.css23
-rw-r--r--toolkit/themes/shared/config.css49
-rw-r--r--toolkit/themes/shared/extensions/alerticon-error.svg6
-rw-r--r--toolkit/themes/shared/extensions/alerticon-info-negative.svg6
-rw-r--r--toolkit/themes/shared/extensions/alerticon-info-positive.svg6
-rw-r--r--toolkit/themes/shared/extensions/alerticon-warning.svg6
-rw-r--r--toolkit/themes/shared/extensions/extensionGeneric.svg12
-rw-r--r--toolkit/themes/shared/extensions/extensions.inc.css1082
-rw-r--r--toolkit/themes/shared/extensions/navigation.pngbin0 -> 663 bytes
-rw-r--r--toolkit/themes/shared/extensions/newaddon.inc.css114
-rw-r--r--toolkit/themes/shared/extensions/utilities.svg30
-rw-r--r--toolkit/themes/shared/formautofill/requestAutocomplete.css11
-rw-r--r--toolkit/themes/shared/icons/find-arrows.svg16
-rw-r--r--toolkit/themes/shared/icons/input-clear.svg16
-rw-r--r--toolkit/themes/shared/icons/loading.pngbin0 -> 12585 bytes
-rw-r--r--toolkit/themes/shared/icons/loading@2x.pngbin0 -> 40165 bytes
-rw-r--r--toolkit/themes/shared/in-content/check-partial.svg28
-rw-r--r--toolkit/themes/shared/in-content/check.svg28
-rw-r--r--toolkit/themes/shared/in-content/common.inc.css830
-rw-r--r--toolkit/themes/shared/in-content/dropdown.svg22
-rw-r--r--toolkit/themes/shared/in-content/help-glyph.svg28
-rw-r--r--toolkit/themes/shared/in-content/info-pages.inc.css109
-rw-r--r--toolkit/themes/shared/in-content/radio.svg22
-rw-r--r--toolkit/themes/shared/incontent-icons/blocked.svg13
-rw-r--r--toolkit/themes/shared/incontent-icons/info.svg8
-rw-r--r--toolkit/themes/shared/incontent-icons/warning.svg13
-rw-r--r--toolkit/themes/shared/jar.inc.mn99
-rw-r--r--toolkit/themes/shared/media/TopLevelImageDocument.css17
-rw-r--r--toolkit/themes/shared/media/TopLevelVideoDocument.css12
-rw-r--r--toolkit/themes/shared/media/clicktoplay-bgtexture.pngbin0 -> 5940 bytes
-rw-r--r--toolkit/themes/shared/media/closeCaptionButton.pngbin0 -> 583 bytes
-rw-r--r--toolkit/themes/shared/media/closeCaptionButton@2x.pngbin0 -> 1335 bytes
-rw-r--r--toolkit/themes/shared/media/error.pngbin0 -> 433 bytes
-rw-r--r--toolkit/themes/shared/media/fullscreenButton.pngbin0 -> 733 bytes
-rw-r--r--toolkit/themes/shared/media/fullscreenButton@2x.pngbin0 -> 1759 bytes
-rw-r--r--toolkit/themes/shared/media/imagedoc-darknoise.pngbin0 -> 3050 bytes
-rw-r--r--toolkit/themes/shared/media/imagedoc-lightnoise.pngbin0 -> 4025 bytes
-rw-r--r--toolkit/themes/shared/media/muteButton.pngbin0 -> 619 bytes
-rw-r--r--toolkit/themes/shared/media/muteButton@2x.pngbin0 -> 1185 bytes
-rw-r--r--toolkit/themes/shared/media/noAudio.pngbin0 -> 930 bytes
-rw-r--r--toolkit/themes/shared/media/noAudio@2x.pngbin0 -> 1756 bytes
-rw-r--r--toolkit/themes/shared/media/pauseButton.pngbin0 -> 269 bytes
-rw-r--r--toolkit/themes/shared/media/pauseButton@2x.pngbin0 -> 434 bytes
-rw-r--r--toolkit/themes/shared/media/playButton.pngbin0 -> 448 bytes
-rw-r--r--toolkit/themes/shared/media/playButton@2x.pngbin0 -> 831 bytes
-rw-r--r--toolkit/themes/shared/media/scrubberThumb.pngbin0 -> 562 bytes
-rw-r--r--toolkit/themes/shared/media/scrubberThumb@2x.pngbin0 -> 1354 bytes
-rw-r--r--toolkit/themes/shared/media/scrubberThumbWide.pngbin0 -> 563 bytes
-rw-r--r--toolkit/themes/shared/media/scrubberThumbWide@2x.pngbin0 -> 1396 bytes
-rw-r--r--toolkit/themes/shared/media/stalled.pngbin0 -> 20763 bytes
-rw-r--r--toolkit/themes/shared/media/throbber.pngbin0 -> 30718 bytes
-rw-r--r--toolkit/themes/shared/media/unmuteButton.pngbin0 -> 324 bytes
-rw-r--r--toolkit/themes/shared/media/unmuteButton@2x.pngbin0 -> 542 bytes
-rw-r--r--toolkit/themes/shared/media/videoClickToPlayButton.svg30
-rw-r--r--toolkit/themes/shared/media/videocontrols.css440
-rw-r--r--toolkit/themes/shared/media/volume-empty.pngbin0 -> 295 bytes
-rw-r--r--toolkit/themes/shared/media/volume-empty@2x.pngbin0 -> 268 bytes
-rw-r--r--toolkit/themes/shared/media/volume-full.pngbin0 -> 297 bytes
-rw-r--r--toolkit/themes/shared/media/volume-full@2x.pngbin0 -> 267 bytes
-rw-r--r--toolkit/themes/shared/menu-check-active.svg7
-rw-r--r--toolkit/themes/shared/menu-check-black.svg7
-rw-r--r--toolkit/themes/shared/menu-check-hover.svg7
-rw-r--r--toolkit/themes/shared/menu-check.pngbin0 -> 197 bytes
-rw-r--r--toolkit/themes/shared/menu-check@2x.pngbin0 -> 377 bytes
-rw-r--r--toolkit/themes/shared/mozapps.inc.mn28
-rw-r--r--toolkit/themes/shared/narrate.css46
-rw-r--r--toolkit/themes/shared/narrate/arrow.svg3
-rw-r--r--toolkit/themes/shared/narrate/back.svg15
-rw-r--r--toolkit/themes/shared/narrate/fast.svg3
-rw-r--r--toolkit/themes/shared/narrate/forward.svg15
-rw-r--r--toolkit/themes/shared/narrate/slow.svg6
-rw-r--r--toolkit/themes/shared/narrate/start.svg3
-rw-r--r--toolkit/themes/shared/narrate/stop.svg3
-rw-r--r--toolkit/themes/shared/narrateControls.css185
-rw-r--r--toolkit/themes/shared/non-mac.jar.inc.mn141
-rw-r--r--toolkit/themes/shared/passwordmgr.css26
-rw-r--r--toolkit/themes/shared/places/defaultFavicon-inverted.pngbin0 -> 452 bytes
-rw-r--r--toolkit/themes/shared/places/defaultFavicon-inverted@2x.pngbin0 -> 1005 bytes
-rw-r--r--toolkit/themes/shared/places/defaultFavicon.pngbin0 -> 485 bytes
-rw-r--r--toolkit/themes/shared/places/defaultFavicon@2x.pngbin0 -> 1146 bytes
-rw-r--r--toolkit/themes/shared/plugins/contentPluginActivate.pngbin0 -> 3043 bytes
-rw-r--r--toolkit/themes/shared/plugins/contentPluginBlocked.pngbin0 -> 1514 bytes
-rw-r--r--toolkit/themes/shared/plugins/contentPluginClose.pngbin0 -> 1370 bytes
-rw-r--r--toolkit/themes/shared/plugins/contentPluginCrashed.pngbin0 -> 1470 bytes
-rw-r--r--toolkit/themes/shared/plugins/contentPluginDisabled.pngbin0 -> 1620 bytes
-rw-r--r--toolkit/themes/shared/plugins/contentPluginStripe.pngbin0 -> 460 bytes
-rw-r--r--toolkit/themes/shared/plugins/pluginProblem.css206
-rw-r--r--toolkit/themes/shared/reader/RM-Close-24x24.svg23
-rw-r--r--toolkit/themes/shared/reader/RM-Content-Width-Minus-42x16.svg19
-rw-r--r--toolkit/themes/shared/reader/RM-Content-Width-Plus-44x16.svg19
-rw-r--r--toolkit/themes/shared/reader/RM-Line-Height-Minus-38x14.svg20
-rw-r--r--toolkit/themes/shared/reader/RM-Line-Height-Plus-38x24.svg20
-rw-r--r--toolkit/themes/shared/reader/RM-Minus-24x24.svg7
-rw-r--r--toolkit/themes/shared/reader/RM-Plus-24x24.svg7
-rw-r--r--toolkit/themes/shared/reader/RM-Type-Controls-24x24.svg7
-rw-r--r--toolkit/themes/shared/reader/RM-Type-Controls-Arrow.svg8
-rw-r--r--toolkit/themes/shared/timepicker.css153
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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
Binary files differ
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