Adding upstream version 86.0.1.upstream/86.0.1upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

28 files changed, 1629 insertions, 0 deletions

diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
new file mode 100644
index 0000000000..ae219d841d
--- /dev/null
+++ b/browser/themes/osx/browser.css
@@ -0,0 +1,644 @@
+/* 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");
+
+%include ../shared/browser.inc.css
+
+:root {
+  --toolbar-non-lwt-bgcolor: #f9f9fa;
+  --toolbar-non-lwt-textcolor: #0c0c0d;
+  --toolbar-non-lwt-bgimage: none;
+
+  --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) + 1px);
+  --toolbarbutton-border-radius: 4px;
+  --toolbarbutton-icon-fill-opacity: .7;
+
+  --panel-separator-color: hsla(210,4%,10%,.14);
+  --arrowpanel-dimmed: hsla(0,0%,80%,.35);
+  --arrowpanel-dimmed-further: hsla(0,0%,80%,.5);
+  --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
+
+  --arrowpanel-field-background: rgba(249,249,250,.3);
+
+  --urlbar-separator-color: hsla(0,0%,16%,.2);
+
+  --chrome-content-separator-color: #e1e1e2;
+}
+
+:root:-moz-lwtheme {
+  --chrome-content-separator-color: rgba(0,0,0,.3);
+}
+
+:root[lwt-popup-brighttext] {
+  --panel-separator-color: rgba(249,249,250,.1);
+
+  --arrowpanel-dimmed: rgba(249,249,250,.1);
+  --arrowpanel-dimmed-further: rgba(249,249,250,.15);
+  --arrowpanel-dimmed-even-further: rgba(249,249,250,.2);
+
+  --arrowpanel-field-background: rgba(12,12,13,.3);
+}
+
+#navigator-toolbox {
+  appearance: none;
+  --tabs-border-color: rgba(0,0,0,.2);
+}
+
+#navigator-toolbox:not(:-moz-lwtheme):-moz-window-inactive {
+  --tabs-border-color: rgba(0,0,0,.05);
+}
+
+#navigator-toolbox:-moz-lwtheme {
+  --tabs-border-color: rgba(0,0,0,.3);
+}
+
+/*
+  This is a workaround for Bug 1482157
+  -moz-default-appearance: toolbox; makes the macOS sheets attached to the
+  element's bottom border. We cannot put this property on the toolbox itself as
+  it cancels all backgrounds that are there, so we set it on the toolbox bottom
+  border.
+*/
+#navigator-toolbox::after {
+  content: "";
+  display: -moz-box;
+  appearance: auto;
+  -moz-default-appearance: toolbox;
+  height: 1px;
+  margin-top: -1px;
+  opacity: 0.001;
+}
+
+#tabbrowser-tabs {
+  --tab-line-color: #0a84ff;
+}
+
+#navigator-toolbox toolbarbutton:-moz-lwtheme {
+  color: inherit;
+  text-shadow: inherit;
+}
+
+/** Begin titlebar **/
+
+#titlebar {
+  /* Centrally align content items vertically */
+  -moz-box-pack: center;
+}
+
+.titlebar-button {
+  display: none;
+}
+
+/* Making the toolbox position:relative (browser.inc.css) occludes titlebar indicators
+ * if the toolbox has a background. Fix this by positioning the relevant elements, too: */
+#titlebar-secondary-buttonbox {
+  position: relative;
+  z-index: 1;
+  /* Centrally align indicators and full screen button vertically */
+  -moz-box-align: center;
+}
+
+.titlebar-buttonbox-container {
+  -moz-box-align: center;
+}
+
+/* These would be margin-inline-start/end if it wasn't for the fact that OS X
+ * doesn't reverse the order of the items in the titlebar in RTL mode. */
+.titlebar-buttonbox {
+  margin-left: 12px;
+}
+
+/** End titlebar **/
+
+:root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
+  border-top: 1px solid rgba(0,0,0,0.65);
+}
+
+.browser-toolbar:not(.titlebar-color) {
+  appearance: none;
+  background: var(--toolbar-bgcolor);
+  color: var(--toolbar-color);
+}
+
+/* Draw the bottom border of the tabs toolbar when titlebar isn't using vibrancy */
+:root:not([inFullscreen], [tabsintitlebar]) #nav-bar:not([tabs-hidden="true"]),
+#nav-bar:not([tabs-hidden="true"]):-moz-lwtheme {
+  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--tabs-border-color);
+}
+
+#nav-bar:not([tabs-hidden="true"]) {
+  /* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed.
+     The animations use position:absolute and require a positioned #nav-bar. */
+  position: relative;
+}
+
+#PersonalToolbar:not(:-moz-lwtheme):-moz-window-inactive,
+#nav-bar:not(:-moz-lwtheme):-moz-window-inactive {
+  background-color: -moz-mac-chrome-inactive;
+}
+
+/* ----- BOOKMARK TOOLBAR ----- */
+
+#nav-bar-customization-target > #wrapper-personal-bookmarks > #personal-bookmarks {
+  min-height: 32px;
+  -moz-box-align: center;
+}
+
+/* Workaround for native menubar inheritance */
+.openintabs-menuitem {
+  list-style-image: none;
+}
+
+.bookmark-item[cutting] > .toolbarbutton-icon,
+.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
+  opacity: 0.5;
+}
+
+.bookmark-item[cutting] > .toolbarbutton-text,
+.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
+  opacity: 0.7;
+}
+
+/* ----- BOOKMARK MENUS ----- */
+
+.bookmark-item > .menu-iconic-left > .menu-iconic-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#bookmarksToolbarFolderMenu,
+#BMB_bookmarksToolbar,
+#panelMenu_bookmarksToolbar {
+  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg");
+}
+
+%include ../shared/toolbarbuttons.inc.css
+%include ../shared/toolbarbutton-icons.inc.css
+%include ../shared/menupanel.inc.css
+
+/* Override OSX-specific toolkit findbar button styles */
+.findbar-button {
+  background-image: none !important;
+  box-shadow: none !important;
+  border: none;
+}
+
+/* On Mac, native buttons keep their full opacity when they become disabled
+ * and only the glyph or text on top of them becomes less opaque. */
+:root:not([customizing]) #back-button[disabled="true"] {
+  opacity: 1 !important;
+  /* Disabled toolbar buttons get an opacity of 0.4 which multiplies
+   * their fill-opacity of 0.7. calc() doesn't work here - we'd need
+   * to multiply two unitless numbers and that's invalid in CSS, so
+   * we need to hard code the value for now. */
+  fill-opacity: 0.28;
+}
+
+/* Inactive elements are faded out on OSX */
+.toolbarbutton-1:not(:hover):-moz-window-inactive,
+.bookmark-item:not(:hover):-moz-window-inactive,
+:root:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] {
+  opacity: 0.5;
+}
+
+/* ----- FULLSCREEN WINDOW CONTROLS ----- */
+
+#minimize-button,
+#close-button,
+#fullscreen-button ~ #window-controls > #restore-button {
+  display: none;
+}
+
+/* Address bar */
+
+%include ../shared/urlbar-searchbar.inc.css
+
+#urlbar,
+#searchbar {
+  font-size: 1.25em;
+}
+
+@supports -moz-bool-pref("browser.urlbar.experimental.expandTextOnFocus") {
+  #urlbar[breakout-extend] {
+    font-size: 1.36em;
+  }
+}
+
+/* Ensure diacritics and other edge-of-font-box glyphs do not get clipped,
+ * even in non-Latin scripts. */
+#urlbar-input {
+  line-height: 1.745em;
+}
+
+%include ../shared/identity-block/identity-block.inc.css
+%include ../shared/notification-icons.inc.css
+%include ../shared/addon-notification.inc.css
+
+#pageAction-urlbar-shareURL,
+#pageAction-panel-shareURL {
+  list-style-image: url("chrome://browser/skin/share.svg");
+}
+
+/* Address bar results view */
+
+%include ../shared/urlbarView.inc.css
+
+:root {
+  --urlbar-popup-url-color: hsl(210, 77%, 47%);
+  --urlbar-popup-action-color: hsl(178, 100%, 28%);
+}
+
+.urlbarView:not(:-moz-lwtheme),
+#PopupSearchAutoComplete:not(:-moz-lwtheme) {
+  /* Set custom disabled text color since native graytext is too faint on macOS 10.14+. */
+  --panel-disabled-color: #737373;
+}
+
+/* ----- AUTOCOMPLETE ----- */
+
+%include ../shared/autocomplete.inc.css
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
+  border-top: 1px solid #C7C7C7;
+}
+
+#BMB_bookmarksPopup[side="top"],
+#BMB_bookmarksPopup[side="bottom"] {
+  margin-inline: -26px;
+}
+
+#BMB_bookmarksPopup[side="left"],
+#BMB_bookmarksPopup[side="right"] {
+  margin-block: -26px;
+}
+
+/* Bookmarking panel */
+
+%include ../shared/places/editBookmarkPanel.inc.css
+
+#editBookmarkPanelRows > vbox > html|input,
+#editBookmarkPanelRows > vbox > hbox > html|input {
+  appearance: none;
+  background-color: var(--arrowpanel-field-background);
+  color: inherit;
+  border-radius: 2px;
+  border: 1px solid var(--panel-separator-color) !important;
+  margin: 0;
+  padding: 3px 6px;
+}
+
+#editBookmarkPanelRows > vbox > html|input:focus,
+#editBookmarkPanelRows > vbox > hbox > html|input:focus {
+  border-color: -moz-mac-focusring !important;
+  box-shadow: var(--focus-ring-box-shadow);
+}
+
+/* The following elements come from editBookmarkPanel.inc.xhtml. Styling that's
+   specific to the editBookmarkPanel should be in browser.css. Styling that
+   should be shared by all editBookmarkPanel.inc.xhtml consumers should be in
+   editBookmark.css. */
+
+#editBMPanel_newFolderBox {
+  background-color: var(--arrowpanel-field-background);
+  color: inherit;
+  border-radius: 0 2px;
+  border: 1px solid var(--panel-separator-color);
+  margin: 0;
+  padding: 0;
+  height: 24px;
+}
+
+#editBMPanel_newFolderButton {
+  appearance: none;
+  -moz-box-flex: 1;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.8;
+  border: none;
+  padding: 0 9px;
+  margin: 0;
+  min-height: 24px;
+  height: 24px;
+  color: inherit;
+  list-style-image: url("chrome://browser/skin/add.svg");
+}
+
+#editBMPanel_newFolderButton:hover {
+  background-color: var(--arrowpanel-dimmed);
+}
+
+#editBMPanel_newFolderButton:hover:active {
+  background-color: var(--arrowpanel-dimmed-further);
+}
+
+#editBMPanel_newFolderButton:-moz-focusring {
+  box-shadow: var(--focus-ring-box-shadow);
+}
+
+#editBMPanel_newFolderButton .button-text {
+  -moz-box-flex: 1; /* push the button icon to the start side */
+  text-align: start;
+}
+
+#editBMPanel_folderMenuList {
+  margin: 0;
+  min-height: 22px;
+  padding-block: 2px 1px;
+  padding-inline: 8px 4px;
+}
+
+#editBMPanel_folderMenuList:-moz-focusring {
+  box-shadow: var(--focus-ring-box-shadow);
+}
+
+#editBMPanel_folderMenuList::part(dropmarker) {
+  appearance: none;
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.8;
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
+  display: -moz-box;
+  -moz-box-align: center;
+  padding-inline-end: 4px;
+  width: 7px;
+}
+
+/**** folder tree and tag selector ****/
+
+#editBMPanel_folderTree,
+#editBMPanel_tagsSelector {
+  appearance: none;
+  background-color: var(--arrowpanel-field-background);
+  color: inherit;
+  border-radius: 2px;
+  border: 1px solid var(--panel-separator-color);
+  margin: 0;
+}
+
+#editBMPanel_folderTree:-moz-focusring,
+#editBMPanel_tagsSelector:-moz-focusring {
+  border-color: -moz-mac-focusring;
+  box-shadow: var(--focus-ring-box-shadow);
+}
+
+#editBMPanel_folderTree > treechildren::-moz-tree-row(blur,selected),
+#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
+  background-color: var(--arrowpanel-dimmed);
+}
+
+#editBMPanel_folderTree > treechildren::-moz-tree-twisty(blur,selected),
+#editBMPanel_folderTree > treechildren::-moz-tree-image(blur,selected),
+#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(blur,selected),
+#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
+  color: inherit;
+}
+
+#editBMPanel_folderTree {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
+  margin: 0 !important;
+  min-width: 27em;
+  position: relative;
+}
+
+/**** expanders ****/
+
+#editBookmarkPanel .expander-up,
+#editBookmarkPanel .expander-down {
+  appearance: none; /* override button.css */
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.8;
+  margin: 0;
+  margin-inline-start: 4px;
+  min-width: 27px;
+  min-height: 22px;
+}
+
+#editBookmarkPanel .expander-up > .button-box > .button-icon,
+#editBookmarkPanel .expander-down > .button-box > .button-icon {
+  margin: 1px 0 0;
+}
+
+#editBookmarkPanel .expander-up > .button-box > .button-text,
+#editBookmarkPanel .expander-down > .button-box > .button-text {
+  display: none;
+}
+
+#editBookmarkPanel .expander-up {
+  list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
+}
+
+#editBookmarkPanel .expander-down {
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
+}
+
+/* ----- SIDEBAR ELEMENTS ----- */
+
+%include ../shared/sidebar.inc.css
+
+#browser {
+  --sidebar-border-color: hsla(240, 5%, 5%, .1);
+}
+
+#sidebar-box {
+  /* Default font size is 11px on mac, so this is 12px */
+  font-size: 1.0909rem;
+  --sidebar-background-color: -moz-mac-source-list;
+}
+
+/* Give the sidebar a vibrant appearance. Only do this when no lwtheme is
+ * in use, because vibrant appearance values only work if there is no
+ * background-color rendered behind the element, and we have :root:-moz-lwtheme
+ * rules which set appearance: none and an opaque background color on the
+ * root element. That background color would interfere with the vibrancy.
+ * See bug 1594132 for fixing this. */
+#sidebar-box:not(:-moz-lwtheme) {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-source-list;
+  -moz-font-smoothing-background-color: -moz-mac-source-list;
+}
+
+/* ----- CONTENT ----- */
+
+.browserContainer > findbar {
+  /* Use the default background gradient from findBar.css */
+  background-color: transparent;
+  color: -moz-DialogText;
+}
+
+.openintabs-menuitem {
+  list-style-image: none;
+}
+
+/* ::::: tabbrowser ::::: */
+
+#tabbrowser-tabbox {
+  margin: 0;
+}
+
+%include ../shared/tabs.inc.css
+
+.tab-label {
+  margin-block: 1px 0;
+}
+
+.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"], [multiselected]) {
+  opacity: .9;
+}
+
+/*
+ * Force the overlay to create a new stacking context so it always appears on
+ * top of the icon.
+ */
+.tab-icon-overlay {
+  opacity: 0.9999;
+}
+
+.tab-label-container:not([selected="true"], [multiselected]) {
+  opacity: .7;
+}
+
+.tabbrowser-tab {
+  font: message-box;
+  border: none;
+}
+.tabbrowser-tab[multiselected]:not(:-moz-lwtheme),
+.tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
+  /* overriding tabbox.css */
+  color: hsl(240, 5%, 5%);
+}
+
+.tabbrowser-tab[multiselected],
+.tabbrowser-tab[visuallyselected=true] {
+  /* overriding tabbox.css */
+  text-shadow: inherit;
+}
+
+:is(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-label-container:not([pinned]),
+:is(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-icon-image[pinned],
+:is(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-throbber[pinned] {
+  box-shadow: var(--focus-ring-box-shadow);
+}
+
+#TabsToolbar > .toolbar-items {
+  padding-top: var(--space-above-tabbar);
+}
+
+#TabsToolbar:not(:-moz-lwtheme) {
+  color: #333;
+}
+
+:root:is([inFullscreen], [tabsintitlebar]) #TabsToolbar:not(:-moz-lwtheme) {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-vibrant-titlebar-dark;
+  -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-dark;
+  background-color: #232323;
+  color: hsl(240, 9%, 98%);
+  text-shadow: none;
+}
+
+.tabbrowser-tab[multiselected]:not(:-moz-lwtheme),
+.tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
+  -moz-font-smoothing-background-color: var(--toolbar-bgcolor);
+}
+
+#tabbrowser-tabs {
+  -moz-box-align: stretch;
+  padding-inline: 0;
+  margin-bottom: 0;
+  position: static;
+}
+
+/* Bookmark drag and drop styles */
+
+.bookmark-item[dragover-into="true"] {
+  background: Highlight !important;
+  color: HighlightText !important;
+}
+
+/* Translation */
+
+%include ../shared/translation/infobar.inc.css
+
+/* Status panel */
+
+#statuspanel-label {
+  margin: 0;
+  padding: 2px 4px;
+  background-color: #f9f9fa;
+  border: 1px none #ddd;
+  border-top-style: solid;
+  color: #444;
+  text-shadow: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  #statuspanel-label {
+    background-color: hsl(240, 1%, 20%);
+    border-color: hsl(240, 1%, 40%);
+    color: rgb(249, 249, 250);
+  }
+}
+
+#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr),
+#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl) {
+  border-right-style: solid;
+  border-top-right-radius: .3em;
+  margin-right: 1em;
+}
+
+#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl),
+#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr) {
+  border-left-style: solid;
+  border-top-left-radius: .3em;
+  margin-left: 1em;
+}
+
+%include ../shared/fullscreen/warning.inc.css
+%include ../shared/ctrlTab.inc.css
+
+/* On mac, the popup notification contents are indented by default and so
+  the default closebutton margins from notification.css require adjustment */
+
+.click-to-play-plugins-notification-description-box > .popup-notification-closebutton {
+  margin-inline-end: -6px;
+  margin-top: -7px;
+}
+
+/* Customization mode */
+
+%include ../shared/customizableui/customizeMode.inc.css
+
+/* End customization mode */
+
+%include ../shared/UITour.inc.css
+
+#UITourTooltipDescription {
+  font-size: 1.18rem;
+  line-height: 2rem;
+}
+
+#UITourTooltipClose {
+  margin-inline-end: -10px;
+  margin-top: -14px;
+}
+
+%include ../shared/contextmenu.inc.css
+
+#context-navigation > .menuitem-iconic {
+  padding-inline: 0;
+}
+
+.cui-widget-panelview[id^=PanelUI-webext-] {
+  border-radius: 3.5px;
+}
+
+.webextension-popup-browser,
+.webextension-popup-stack {
+  border-radius: inherit;
+}
diff --git a/browser/themes/osx/compacttheme.css b/browser/themes/osx/compacttheme.css
new file mode 100644
index 0000000000..3db71f0e52
--- /dev/null
+++ b/browser/themes/osx/compacttheme.css
@@ -0,0 +1,16 @@
+% 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/.
+
+%include ../shared/compacttheme.inc.css
+
+#TabsToolbar:-moz-lwtheme-darktext {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-vibrant-titlebar-light;
+  -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-light;
+}
+
+.tabbrowser-tab[multiselected]:-moz-lwtheme-darktext,
+.tabbrowser-tab[visuallyselected=true]:-moz-lwtheme-darktext {
+  -moz-font-smoothing-background-color: var(--toolbar-bgcolor);
+}
diff --git a/browser/themes/osx/controlcenter/panel.css b/browser/themes/osx/controlcenter/panel.css
new file mode 100644
index 0000000000..41b7204802
--- /dev/null
+++ b/browser/themes/osx/controlcenter/panel.css
@@ -0,0 +1,19 @@
+/* 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/. */
+
+%include ../../shared/controlcenter/panel.inc.css
+
+.identity-popup-expander:-moz-focusring,
+.identity-popup-permission-remove-button:-moz-focusring {
+  box-shadow: var(--focus-ring-box-shadow);
+}
+
+#identity-popup-securityView-body > button {
+  min-height: 30px;
+}
+
+.protections-popup-tp-switch:-moz-focusring,
+#identity-popup-securityView-body > button:-moz-focusring {
+  box-shadow: var(--focus-ring-box-shadow);
+}
diff --git a/browser/themes/osx/customizableui/panelUI.css b/browser/themes/osx/customizableui/panelUI.css
new file mode 100644
index 0000000000..c2fc673cfb
--- /dev/null
+++ b/browser/themes/osx/customizableui/panelUI.css
@@ -0,0 +1,102 @@
+/* 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/. */
+
+%include ../../shared/customizableui/panelUI.inc.css
+
+.restoreallitem > .toolbarbutton-icon {
+  display: none;
+}
+
+.subviewbutton {
+  padding-inline-start: 18px;
+}
+
+.subviewbutton.download {
+  padding-inline-start: 14px;
+}
+
+panelmultiview .toolbaritem-combined-buttons > spacer.before-label {
+  width: 42px; /* 18px toolbarbutton padding + 16px icon + 8px label padding start */
+}
+
+#appMenu-addon-banners > .addon-banner-item,
+#appMenu-mainView > .panel-subview-body > .panel-banner-item {
+  padding-inline-start: 18px;
+}
+
+#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-label {
+  /* 18px space before the avatar, then 16px for the avatar */
+  padding-inline-start: 34px;
+  margin-inline-start: -34px;
+}
+
+#appMenu-fxa-status[fxastatus="signedin"] > #appMenu-fxa-avatar {
+  margin-inline-start: 18px;
+}
+
+.subviewbutton:not([image],[targetURI],.bookmark-item) > .menu-iconic-left {
+  display: none;
+}
+
+#BMB_bookmarksPopup menupopup[placespopup=true]:-moz-lwtheme {
+  appearance: none;
+  background: transparent;
+}
+
+#BMB_bookmarksPopup menupopup[placespopup=true]:-moz-lwtheme::part(innerbox) {
+  background: var(--arrowpanel-background);
+  border-radius: var(--arrowpanel-border-radius);
+  box-shadow: 0 0 0 1px var(--arrowpanel-border-color);
+  color: var(--arrowpanel-color);
+  border: none;
+  margin: 1px;
+}
+
+/* Override OSX-specific toolkit styles for the bookmarks panel */
+menu.subviewbutton > .menu-right {
+  margin-inline-end: -4px;
+  appearance: none;
+}
+
+.PanelUI-subView menuseparator,
+.cui-widget-panelview menuseparator {
+  padding: 0 !important;
+}
+
+.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
+  padding-inline-start: 6px;
+}
+
+.PanelUI-remotetabs-notabsforclient-label {
+  margin-inline-start: 19px;
+  font-size: 13px;
+}
+
+#PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label {
+  margin-inline-start: 23px;
+}
+
+#PanelUI-remotetabs-tabslist {
+  padding-bottom: 4px;
+}
+
+.panel-button {
+  appearance: none;
+  border-radius: 2px;
+  background-color: var(--arrowpanel-dimmed);
+  color: inherit;
+  padding: 2px 6px;
+}
+
+.panel-button@buttonStateHover@ {
+  background-color: var(--arrowpanel-dimmed-further);
+}
+
+.panel-button@buttonStateActive@ {
+  background-color: var(--arrowpanel-dimmed-even-further);
+}
+
+.panel-button:-moz-focusring {
+  box-shadow: var(--focus-ring-box-shadow);
+}
diff --git a/browser/themes/osx/downloads/allDownloadsView.css b/browser/themes/osx/downloads/allDownloadsView.css
new file mode 100644
index 0000000000..ea6faf7386
--- /dev/null
+++ b/browser/themes/osx/downloads/allDownloadsView.css
@@ -0,0 +1,19 @@
+/* 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/. */
+
+%include ../../shared/downloads/allDownloadsView.inc.css
+
+/*** List items ***/
+
+:root {
+  --downloads-item-height: 6em;
+}
+
+.downloadProgress::-moz-progress-bar {
+  background-color: #3c9af8;
+}
+
+.downloadProgress[paused]::-moz-progress-bar {
+  background-color: #a6a6a6;
+}
diff --git a/browser/themes/osx/downloads/downloads.css b/browser/themes/osx/downloads/downloads.css
new file mode 100644
index 0000000000..82cf5367bc
--- /dev/null
+++ b/browser/themes/osx/downloads/downloads.css
@@ -0,0 +1,48 @@
+/* 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/. */
+
+%include ../../shared/downloads/downloads.inc.css
+
+/*** Panel and outer controls ***/
+
+@keyfocus@ #downloadsSummary:focus {
+  outline: 2px -moz-mac-focusring solid;
+  outline-offset: -2px;
+}
+
+/*** List items and similar elements in the summary ***/
+
+:root {
+  --downloads-item-height: 6em;
+  --downloads-item-font-size-factor: 0.95;
+  --downloads-item-details-opacity: 0.7;
+}
+
+.downloadButton:focus > .button-box {
+  outline: 2px -moz-mac-focusring solid;
+  outline-offset: -2px;
+}
+
+@item@[verdict="Malware"]:not(:hover) {
+  color: #aa1b08;
+}
+
+:root[lwt-popup-brighttext] @item@[verdict="Malware"]:not(:hover) {
+  color: #ff0039;
+}
+
+.downloadProgress::-moz-progress-bar {
+  background-color: #3c9af8;
+}
+
+.downloadProgress[paused]::-moz-progress-bar {
+  background-color: #a6a6a6;
+}
+
+/*** Highlighted list items ***/
+
+@keyfocus@ @itemFocused@ {
+  outline: 2px -moz-mac-focusring solid;
+  outline-offset: -2px;
+}
diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn
new file mode 100644
index 0000000000..7ebee60210
--- /dev/null
+++ b/browser/themes/osx/jar.mn
@@ -0,0 +1,36 @@
+# 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/.
+
+browser.jar:
+% skin browser classic/1.0 %skin/classic/browser/
+#include ../shared/jar.inc.mn
+  skin/classic/browser/sanitizeDialog.css
+* skin/classic/browser/syncedtabs/sidebar.css          (syncedtabs/sidebar.css)
+* skin/classic/browser/browser.css
+* skin/classic/browser/compacttheme.css
+  skin/classic/browser/pageInfo.css
+* skin/classic/browser/searchbar.css
+  skin/classic/browser/slowStartup-16.png
+* skin/classic/browser/webRTC-indicator.css
+* skin/classic/browser/controlcenter/panel.css        (controlcenter/panel.css)
+* skin/classic/browser/customizableui/panelUI.css    (customizableui/panelUI.css)
+* skin/classic/browser/downloads/allDownloadsView.css (downloads/allDownloadsView.css)
+* skin/classic/browser/downloads/downloads.css              (downloads/downloads.css)
+  skin/classic/browser/monitor-base.png
+  skin/classic/browser/monitor-border.png
+  skin/classic/browser/notification-icons/geo-blocked.svg  (notification-icons/geo-blocked.svg)
+  skin/classic/browser/notification-icons/geo.svg          (notification-icons/geo.svg)
+* skin/classic/browser/places/sidebar.css                   (places/sidebar.css)
+  skin/classic/browser/places/organizer.css                 (places/organizer.css)
+  skin/classic/browser/places/editBookmark.css              (places/editBookmark.css)
+  skin/classic/browser/preferences/alwaysAsk.png            (preferences/alwaysAsk.png)
+  skin/classic/browser/preferences/application.png          (preferences/application.png)
+  skin/classic/browser/preferences/saveFile.png             (preferences/saveFile.png)
+* skin/classic/browser/preferences/preferences.css          (preferences/preferences.css)
+* skin/classic/browser/preferences/dialog.css               (preferences/dialog.css)
+  skin/classic/browser/preferences/applications.css         (preferences/applications.css)
+  skin/classic/browser/share.svg                            (share.svg)
+  skin/classic/browser/e10s-64@2x.png                                  (../shared/e10s-64@2x.png)
+  skin/classic/browser/webRTC-menubar-indicator.css         (../shared/webRTC-menubar-indicator.css)
+% override chrome://browser/skin/notification-icons/geo-detailed.svg       chrome://browser/skin/notification-icons/geo.svg
diff --git a/browser/themes/osx/monitor-base.png b/browser/themes/osx/monitor-base.png
new file mode 100644
index 0000000000..7b61c6b45b
--- /dev/null
+++ b/browser/themes/osx/monitor-base.png
diff --git a/browser/themes/osx/monitor-border.png b/browser/themes/osx/monitor-border.png
new file mode 100644
index 0000000000..54337d8bb0
--- /dev/null
+++ b/browser/themes/osx/monitor-border.png
diff --git a/browser/themes/osx/moz.build b/browser/themes/osx/moz.build
new file mode 100644
index 0000000000..d988c0ff9b
--- /dev/null
+++ b/browser/themes/osx/moz.build
@@ -0,0 +1,7 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+JAR_MANIFESTS += ["jar.mn"]
diff --git a/browser/themes/osx/notification-icons/geo-blocked.svg b/browser/themes/osx/notification-icons/geo-blocked.svg
new file mode 100644
index 0000000000..ba0891f5d1
--- /dev/null
+++ b/browser/themes/osx/notification-icons/geo-blocked.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" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8 16l3.75-8.75L8 11v5zm6.707-14.707a1 1 0 0 0-1.414 0l-1.768 1.768L0 8h6.586l-5.293 5.293a1 1 0 1 0 1.414 1.414l12-12a1 1 0 0 0 0-1.414z"/>
+</svg>
diff --git a/browser/themes/osx/notification-icons/geo.svg b/browser/themes/osx/notification-icons/geo.svg
new file mode 100644
index 0000000000..f5accf2280
--- /dev/null
+++ b/browser/themes/osx/notification-icons/geo.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" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M0 8l14-6-6 14V8z"/>
+</svg>
diff --git a/browser/themes/osx/pageInfo.css b/browser/themes/osx/pageInfo.css
new file mode 100644
index 0000000000..8fea30df6d
--- /dev/null
+++ b/browser/themes/osx/pageInfo.css
@@ -0,0 +1,134 @@
+/* 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 "chrome://global/skin/global.css";
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+#topBar {
+  appearance: auto;
+  -moz-default-appearance: toolbar;
+  -moz-window-dragging: drag;
+  -moz-box-align: center;
+  -moz-box-pack: center;
+}
+
+#viewGroup {
+  margin: 4px 0 9px;
+}
+
+#viewGroup > radio,
+#viewGroup > toolbarbutton {
+  -moz-box-orient: vertical;
+  -moz-box-align: center;
+  appearance: auto;
+  -moz-default-appearance: toolbarbutton;
+  font: menu;
+  margin: 0;
+  padding: 0 6px;
+  height: 22px;
+}
+
+#viewGroup > radio[selected=true],
+#viewGroup > toolbarbutton[checked=true] {
+  color: #FFF !important;
+  text-shadow: rgba(0, 0, 0, 0.4) 0 1px;
+}
+
+#mainDeck {
+  padding: 10px;
+}
+
+/* Misc */
+tree {
+  margin: .5em;
+}
+
+html|input {
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
+html|input.header {
+  margin-inline-start: 0;
+}
+
+#imagecontainerbox {
+  margin: .5em;
+  background: white;
+  overflow: auto;
+  border: 1px solid ThreeDLightShadow;
+}
+
+html|input:disabled {
+  font-style: italic;
+}
+
+/* General Tab */
+
+#securityBox description {
+  margin-inline-start: 10px;
+}
+
+#general-security-identity {
+  white-space: pre-wrap;
+  line-height: 2em;
+}
+
+/* Media Tab */
+#imagetree {
+  min-height: 10em;
+  margin-bottom: 0;
+}
+
+#mediaSplitter {
+  background: none;
+}
+
+#mediaTable {
+  margin-bottom: 2em;
+}
+
+#mediaLabelColumn {
+  min-width: 10em;
+}
+
+#thepreviewimage {
+  margin: 1em;
+}
+
+treechildren::-moz-tree-cell-text(broken) {
+  font-style: italic;
+  color: graytext;
+}
+
+/* Permissions Tab */
+#permList {
+  margin: .5em;
+  overflow: auto;
+  appearance: auto;
+  -moz-default-appearance: listbox;
+  color: FieldText;
+}
+
+.permission {
+  padding: 6px 7px;
+  min-height: 25px;
+  border-bottom: 1px dotted ThreeDShadow;
+}
+
+.permissionLabel {
+  font-weight: bold;
+}
+
+.permission:hover {
+  background-color: -moz-dialog;
+  color: -moz-DialogText;
+}
+
+/* Security Tab */
+
+#securityPanel table {
+  margin-bottom: 1em;
+}
diff --git a/browser/themes/osx/places/editBookmark.css b/browser/themes/osx/places/editBookmark.css
new file mode 100644
index 0000000000..034bf93432
--- /dev/null
+++ b/browser/themes/osx/places/editBookmark.css
@@ -0,0 +1,77 @@
+/* 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/. */
+
+#editBookmarkPanelRows > vbox {
+  margin-bottom: .5em;
+}
+
+/**** folder menulist ****/
+#editBMPanel_folderMenuList::part(icon),
+.folder-icon > .menu-iconic-left > .menu-iconic-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.folder-icon > .menu-iconic-left {
+  display: -moz-box;
+}
+
+.folder-icon {
+  list-style-image: url("chrome://browser/skin/places/folder.svg") !important;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+/**** expanders ****/
+
+.expander-up,
+.expander-down {
+  margin-block: 0 1px;
+  margin-inline: 8px 4px;
+  padding: 0;
+}
+
+.expander-up {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-disclosure-button-open;
+}
+
+.expander-down {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-disclosure-button-closed;
+}
+
+#editBMPanel_folderTree {
+  margin: 6px 4px 0;
+}
+
+/* Hide the value column of the tag autocomplete popup
+ * leaving only the comment column visible. This is
+ * so that only the tag being edited is shown in the
+ * popup.
+ */
+#editBMPanel_tagsField #treecolAutoCompleteValue {
+  visibility: collapse;
+}
+
+#editBMPanel_tagsSelector > richlistitem > image {
+  appearance: auto;
+  -moz-default-appearance: checkbox;
+  -moz-box-align: center;
+  margin: 0 2px;
+  min-width: 13px;
+  min-height: 13px;
+}
+
+/* ----- BOOKMARK PANEL DROPDOWN MENU ITEMS ----- */
+
+#editBMPanel_folderMenuList[selectedGuid="toolbar_____"],
+#editBMPanel_toolbarFolderItem {
+  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;
+}
+
+#editBMPanel_folderMenuList[selectedGuid="menu________"],
+#editBMPanel_bmRootItem {
+  list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important;
+}
diff --git a/browser/themes/osx/places/organizer.css b/browser/themes/osx/places/organizer.css
new file mode 100644
index 0000000000..95c71f97e5
--- /dev/null
+++ b/browser/themes/osx/places/organizer.css
@@ -0,0 +1,185 @@
+/* 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/. */
+
+/* Places Organizer Sidebars */
+
+#placesList {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-source-list;
+  width: 160px;
+}
+
+#placesList > treechildren::-moz-tree-cell-text {
+  margin-inline-end: 6px;
+}
+
+#placesList > treechildren::-moz-tree-row(selected) {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-source-list-selection;
+  -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
+}
+
+#placesList > treechildren::-moz-tree-row(selected,focus) {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-active-source-list-selection;
+  -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection;
+}
+
+#placesList > treechildren::-moz-tree-cell(separator) {
+  cursor: default;
+}
+
+#placesList > treechildren::-moz-tree-separator {
+  border-top: 1px solid #505d6d;
+  margin: 0 10px;
+}
+
+#placesToolbar {
+  padding: 0 4px 3px;
+}
+
+#placesView {
+  border-top: none !important;
+}
+
+#placesView > splitter {
+  border-inline-start: none !important;
+  border-inline-end: 1px solid #b4b4b4;
+  min-width: 1px;
+  width: 3px;
+  margin-inline-start: -3px;
+  position: relative;
+  background-image: none !important;
+}
+
+#placesToolbar > toolbarbutton {
+  margin: 4px 4px 5px;
+  padding: 0;
+  height: 22px;
+  appearance: auto;
+  -moz-default-appearance: toolbarbutton;
+}
+
+#placesToolbar > toolbarbutton > .toolbarbutton-icon {
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.8;
+  margin: 1px 4px;
+}
+
+#placesToolbar > toolbarbutton:not(#clearDownloadsButton) > .toolbarbutton-text {
+  display: none;
+}
+
+#placesToolbar > toolbarbutton[type="menu"] > .toolbarbutton-menu-dropmarker {
+  list-style-image: url(chrome://global/skin/icons/arrow-dropdown-12.svg);
+  padding: 0;
+  margin-inline-end: 2px;
+}
+
+#placesToolbar > toolbarbutton[disabled] > .toolbarbutton-icon,
+#placesToolbar > toolbarbutton:not(:hover):-moz-window-inactive > .toolbarbutton-icon,
+#placesToolbar > toolbarbutton[type="menu"][disabled] > .toolbarbutton-menu-dropmarker,
+#placesToolbar > toolbarbutton:not(:hover):-moz-window-inactive[type="menu"] > .toolbarbutton-menu-dropmarker {
+  opacity: .5;
+}
+
+#placesToolbar > toolbarbutton:-moz-window-inactive[disabled] > .toolbarbutton-icon,
+#placesToolbar > toolbarbutton:-moz-window-inactive[type="menu"][disabled] > .toolbarbutton-menu-dropmarker {
+  opacity: .25;
+}
+
+#placesToolbar > toolbarbutton > menupopup {
+  margin-top: 1px;
+}
+
+/* back and forward button */
+#back-button,
+#forward-button {
+  list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
+}
+
+#back-button {
+  margin-inline-end: 0 !important; /* override margin from #placesToolbar > toolbarbutton */
+}
+
+#forward-button {
+  margin-inline-start: 0 !important; /* override margin from #placesToolbar > toolbarbutton */
+}
+
+#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#forward-button:-moz-locale-dir(ltr) > .toolbarbutton-icon {
+  transform: scaleX(-1);
+}
+
+#back-button > .toolbarbutton-icon {
+  margin-inline: 3px 2px !important;
+}
+
+#forward-button > .toolbarbutton-icon {
+  margin-inline: 2px 3px !important;
+}
+
+/* organize button */
+#organizeButton {
+  list-style-image: url("chrome://global/skin/icons/settings.svg");
+}
+
+/* view button */
+#viewMenu {
+  list-style-image: url("chrome://browser/skin/sort.svg");
+}
+
+/* maintenance button */
+#maintenanceButton {
+  list-style-image: url("chrome://browser/skin/import-export.svg");
+}
+
+/* Root View */
+#placesView {
+  border-top: 1px solid ThreeDDarkShadow;
+  -moz-user-focus: ignore;
+}
+
+/* Info box */
+#detailsPane {
+  border-top: 1px solid #919191;
+  background-color: #f0f0f0;
+  padding: 10px;
+}
+
+#placeContent {
+  appearance: none;
+  border: none;
+}
+
+#placeContent > treechildren::-moz-tree-cell,
+#placeContent > treechildren::-moz-tree-column {
+  border-inline-end: 1px solid #d7dad7;
+}
+
+#placeContent > treechildren::-moz-tree-cell(separator) {
+  border-color: transparent;
+}
+
+/**
+ * info pane
+ */
+
+#itemsCountText,
+#selectItemDescription {
+  color: GrayText;
+}
+
+/**
+ * Downloads pane
+ */
+
+#clearDownloadsButton {
+  list-style-image: none !important;
+}
+
+#clearDownloadsButton > .toolbarbutton-icon {
+  display: none;
+}
diff --git a/browser/themes/osx/places/sidebar.css b/browser/themes/osx/places/sidebar.css
new file mode 100644
index 0000000000..001d45cccf
--- /dev/null
+++ b/browser/themes/osx/places/sidebar.css
@@ -0,0 +1,55 @@
+/* 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/. */
+
+/* Sidebars */
+
+%include ../../shared/places/sidebar.inc.css
+
+.sidebar-placesTree {
+  margin: 0;
+  /* Default font size is 11px on mac, so this is 12px */
+  font-size: 1.0909rem;
+}
+
+:root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+  min-height: 32px;
+}
+
+.sidebar-placesTreechildren::-moz-tree-separator {
+  border-top: 1px solid #505d6d;
+  margin: 0 10px;
+}
+
+.sidebar-panel:not([lwt-sidebar]) .sidebar-placesTreechildren::-moz-tree-row(selected,blur) {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-source-list-selection;
+  -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
+}
+
+.sidebar-panel:not([lwt-sidebar-highlight]) .sidebar-placesTreechildren::-moz-tree-row(selected,focus) {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-active-source-list-selection;
+  -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection;
+}
+
+.sidebar-placesTreechildren::-moz-tree-cell-text {
+  margin-inline-end: 6px;
+}
+
+#sidebar-search-container {
+  /* Native searchbar styling already adds 4px margin on Mac, so
+   * adding 4px padding results in 8px of total whitespace. */
+  padding: 4px;
+}
+
+#viewButton {
+  margin: 4px 0;
+  margin-inline-end: 4px;
+  /* Default font size is 11px on mac, so this is 12px */
+  font-size: 1.0909rem;
+}
+
+#viewButton:focus {
+  box-shadow: var(--focus-ring-box-shadow);
+}
diff --git a/browser/themes/osx/preferences/alwaysAsk.png b/browser/themes/osx/preferences/alwaysAsk.png
new file mode 100644
index 0000000000..444880422a
--- /dev/null
+++ b/browser/themes/osx/preferences/alwaysAsk.png
diff --git a/browser/themes/osx/preferences/application.png b/browser/themes/osx/preferences/application.png
new file mode 100644
index 0000000000..f8d610f6c2
--- /dev/null
+++ b/browser/themes/osx/preferences/application.png
diff --git a/browser/themes/osx/preferences/applications.css b/browser/themes/osx/preferences/applications.css
new file mode 100644
index 0000000000..78ee02cf27
--- /dev/null
+++ b/browser/themes/osx/preferences/applications.css
@@ -0,0 +1,98 @@
+/* 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/. */
+
+/**
+ * Line up the actions menu with action labels above and below it.
+ * Equalize the distance from the left side of the action box to the left side
+ * of the icon for both the menu and the non-menu versions of the action box.
+ * Also make sure the labels are the same distance away from the icons.
+ */
+.actionsMenu {
+  margin-inline-start: -2px;
+  margin-block: 0 -1px;
+}
+
+.typeIcon,
+.actionIcon {
+  margin-inline: 3px 2px;
+}
+
+#handlersView > richlistitem label {
+  margin-inline-start: 3px;
+  margin-top: 2px;
+}
+
+#handlersView > richlistitem {
+  min-height: 22px;
+}
+
+.typeIcon,
+.actionIcon,
+.actionsMenu::part(icon) {
+  height: 16px;
+  width: 16px;
+}
+
+.actionsMenu::part(icon) {
+  margin-top: 2px;
+  margin-inline: 0px 8px;
+}
+
+.actionsMenu > menupopup > menuitem > .menu-iconic-left {
+  /* Undo content/browser/preferences/handlers.css - we don't
+   * want icon-less labels to line up with the other labels.
+   */
+  min-width: 0;
+}
+
+richlistitem[appHandlerIcon="handleInternally"],
+menuitem[appHandlerIcon="handleInternally"] {
+  list-style-image: url("chrome://branding/content/icon32.png");
+}
+
+richlistitem[appHandlerIcon="ask"],
+menuitem[appHandlerIcon="ask"] {
+  list-style-image: url("chrome://browser/skin/preferences/alwaysAsk.png");
+}
+
+richlistitem[appHandlerIcon="save"],
+menuitem[appHandlerIcon="save"] {
+  list-style-image: url("chrome://browser/skin/preferences/saveFile.png");
+}
+
+richlistitem[appHandlerIcon="plugin"],
+menuitem[appHandlerIcon="plugin"] {
+  list-style-image: url("chrome://global/skin/plugins/plugin.svg");
+}
+
+/* Repeat what menu.css does for .menuitem-iconic */
+menuitem[appHandlerIcon] {
+  padding-top: 1px;
+  padding-bottom: 3px;
+}
+
+menuitem[appHandlerIcon] > .menu-iconic-left > .menu-iconic-icon {
+  margin-inline-start: 0;
+  width: 16px;
+}
+
+#appList {
+  min-height: 212px;
+}
+
+#appList > richlistitem {
+  -moz-box-align: center;
+}
+
+#appList > richlistitem > image {
+  margin: 5px;
+  width: 32px;
+  height: 32px;
+}
+
+#appList > richlistitem > label {
+  margin: 0px;
+  padding: 5px;
+  white-space: nowrap;
+}
diff --git a/browser/themes/osx/preferences/dialog.css b/browser/themes/osx/preferences/dialog.css
new file mode 100644
index 0000000000..071a17876b
--- /dev/null
+++ b/browser/themes/osx/preferences/dialog.css
@@ -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/. */
+
+%include ../../shared/preferences/dialog.inc.css
+
+window {
+  font: message-box !important;
+}
+
+:root > * {
+  font-size: 1.18em;
+}
diff --git a/browser/themes/osx/preferences/preferences.css b/browser/themes/osx/preferences/preferences.css
new file mode 100644
index 0000000000..ffc7e912b2
--- /dev/null
+++ b/browser/themes/osx/preferences/preferences.css
@@ -0,0 +1,46 @@
+/* - 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/. */
+
+%include ../../shared/preferences/preferences.inc.css
+
+body {
+  font-size: 1.36em;
+}
+
+tabpanels {
+  padding: 20px 7px 7px;
+}
+
+#browserUseCurrent,
+#browserUseBookmark,
+#browserUseBlank {
+  margin-top: 10px;
+}
+
+#advancedPrefs {
+  margin: 0 8px;
+}
+
+#privacyPrefs {
+  padding: 0 4px;
+}
+
+#privacyPrefs > tabpanels {
+  padding: 18px 10px 10px;
+}
+
+#OCSPDialogPane {
+  font: message-box !important;
+}
+
+/**
+ * Update Preferences
+ */
+#autoInstallOptions {
+  margin-inline-start: 20px;
+}
+
+.updateControls {
+  margin-inline-start: 10px;
+}
diff --git a/browser/themes/osx/preferences/saveFile.png b/browser/themes/osx/preferences/saveFile.png
new file mode 100644
index 0000000000..3cd1d94066
--- /dev/null
+++ b/browser/themes/osx/preferences/saveFile.png
diff --git a/browser/themes/osx/sanitizeDialog.css b/browser/themes/osx/sanitizeDialog.css
new file mode 100644
index 0000000000..6969c9f4be
--- /dev/null
+++ b/browser/themes/osx/sanitizeDialog.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/. */
+
+/* Align the duration label with the warning box and item list */
+#sanitizeDurationLabel {
+  margin-inline-start: 1px;
+}
+
+#sanitizeEverythingWarningIcon {
+  list-style-image: url("chrome://global/skin/icons/warning-large.png");
+}
diff --git a/browser/themes/osx/searchbar.css b/browser/themes/osx/searchbar.css
new file mode 100644
index 0000000000..5378273ead
--- /dev/null
+++ b/browser/themes/osx/searchbar.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/. */
+
+%include ../shared/searchbar.inc.css
+
+#PopupSearchAutoComplete {
+  border-radius: 4px;
+}
+
+.search-panel-current-engine {
+  border-radius: 4px 4px 0 0;
+}
+
+.search-setting-button {
+  border-radius: 0 0 4px 4px;
+}
diff --git a/browser/themes/osx/share.svg b/browser/themes/osx/share.svg
new file mode 100644
index 0000000000..366c9b6bcb
--- /dev/null
+++ b/browser/themes/osx/share.svg
@@ -0,0 +1,7 @@
+<!-- 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 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M12.707 4.294l-4-4A1 1 0 0 0 8.38.077a.984.984 0 0 0-.246-.05A.938.938 0 0 0 8 0a.938.938 0 0 0-.134.027.984.984 0 0 0-.246.05A1 1 0 0 0 7.291.3l-4 4a1 1 0 0 0 1.416 1.408L7 3.415V11a1 1 0 0 0 2 0V3.415l2.293 2.293a1 1 0 0 0 1.414-1.414z"></path>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-3a1 1 0 0 0-2 0v3a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-3a1 1 0 0 0-1-1z"></path>
+</svg>
diff --git a/browser/themes/osx/slowStartup-16.png b/browser/themes/osx/slowStartup-16.png
new file mode 100644
index 0000000000..2b24f04b98
--- /dev/null
+++ b/browser/themes/osx/slowStartup-16.png
diff --git a/browser/themes/osx/syncedtabs/sidebar.css b/browser/themes/osx/syncedtabs/sidebar.css
new file mode 100644
index 0000000000..10c278f70e
--- /dev/null
+++ b/browser/themes/osx/syncedtabs/sidebar.css
@@ -0,0 +1,31 @@
+/* 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/. */
+
+%include ../../shared/syncedtabs/sidebar.inc.css
+
+/* These styles are intended to mimic XUL trees and the XUL search box. */
+
+body {
+   /* let the -moz-appearance of the sidebar shine through */
+  background-color: transparent;
+}
+
+.item-title-container {
+  box-sizing: border-box;
+  align-items: center;
+  height: 24px;
+  font-size: 12px;
+}
+
+body:not([lwt-sidebar]) .item.selected:not(:focus) > .item-title-container {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-source-list-selection;
+  -moz-font-smoothing-background-color: -moz-mac-source-list-selection;
+}
+
+body:not([lwt-sidebar-highlight]) .item.selected:focus > .item-title-container {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-active-source-list-selection;
+  -moz-font-smoothing-background-color: -moz-mac-active-source-list-selection;
+}
diff --git a/browser/themes/osx/webRTC-indicator.css b/browser/themes/osx/webRTC-indicator.css
new file mode 100644
index 0000000000..784e85adf2
--- /dev/null
+++ b/browser/themes/osx/webRTC-indicator.css
@@ -0,0 +1,51 @@
+%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 url("http://www.w3.org/1999/xhtml");
+
+%include ../shared/webRTC-indicator.inc.css
+
+/**
+ * On macOS, the ordering of the drag indicator and window controls is reversed
+ * to be more native. We re-order all items including their separators so that
+ * the markup and separator hiding and showing logic in the shared CSS file
+ * doesn't need to be macOS-specific.
+ */
+#window-controls {
+  order: 1;
+}
+
+#display-share + .separator {
+  order: 2;
+}
+
+#display-share {
+  order: 3;
+}
+
+#device-share + .separator {
+  order: 4;
+}
+
+#device-share {
+  order: 5;
+}
+
+#drag-indicator {
+  order: 6;
+}
+
+/**
+ * The minimize button on macOS should be circular, and the icon should be
+ * centered. The asset we have for the minimize icon puts it along the bottom,
+ * so we manually offset it here.
+ */
+#minimize {
+  background-position: center -5px;
+  padding: 8px;
+  border: 1px solid transparent;
+  border-radius: 1000px;
+}