17 files changed, 1038 insertions, 0 deletions
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
new file mode 100644
index 0000000000..e16c87ff37
--- /dev/null
+++ b/browser/themes/osx/browser.css
@@ -0,0 +1,458 @@
+/* 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://browser/skin/browser-shared.css");
+@import url("chrome://browser/skin/browser-custom-colors.css");
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  --toolbar-non-lwt-bgcolor: -moz-dialog;
+  --toolbar-non-lwt-textcolor: -moz-dialogtext;
+
+  --panel-separator-color: hsla(210,4%,10%,.14);
+
+  --arrowpanel-field-background: rgba(249,249,250,.3);
+
+  --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-field-background: rgba(12,12,13,.3);
+}
+
+#browser {
+  /* #browser and #navigator-toolbox must have relative positions so that the
+     latter can slide over the former in fullscreen mode. */
+  position: relative;
+}
+
+#navigator-toolbox {
+  appearance: none;
+  position: relative;
+}
+
+#navigator-toolbox:not(:-moz-lwtheme) {
+  background-color: window;
+}
+
+@media not (prefers-contrast) {
+  #navigator-toolbox:not(:-moz-lwtheme) {
+    background-color: #f0f0f4;
+  }
+}
+
+/*
+  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;
+}
+
+/** Begin titlebar **/
+
+#titlebar {
+  /* Centrally align content items vertically */
+  -moz-box-pack: center;
+}
+
+.titlebar-button {
+  display: none;
+}
+
+.titlebar-buttonbox-container {
+  -moz-box-align: center;
+}
+
+/* Hide window controls in fullscreen */
+:root[inFullscreen] .titlebar-buttonbox-container {
+  display: none;
+}
+
+.titlebar-buttonbox:-moz-locale-dir(ltr) {
+  margin-left: 12px;
+  margin-right: 0;
+}
+
+.titlebar-buttonbox:-moz-locale-dir(rtl) {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+@media (-moz-mac-rtl) {
+  .titlebar-buttonbox:-moz-locale-dir(ltr) {
+    margin-left: 12px;
+    margin-right: 12px;
+  }
+
+  .titlebar-buttonbox:-moz-locale-dir(rtl) {
+    margin-left: 0;
+    margin-right: 12px;
+  }
+}
+
+/** End titlebar **/
+
+:root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
+  border-top: 1px solid rgba(0,0,0,0.65);
+}
+
+.browser-toolbar {
+  appearance: none;
+}
+
+.browser-toolbar:not(.titlebar-color) {
+  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(--lwt-tabs-border-color, rgba(0,0,0,.3));
+}
+
+#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;
+}
+
+/* ----- 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");
+}
+
+/* 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;
+}
+
+/* Address bar */
+
+@media not (prefers-contrast) {
+  :root:not(:-moz-lwtheme) #urlbar {
+    --urlbar-box-bgcolor: white;
+  }
+  :root[lwt-default-theme-in-dark-mode] #urlbar {
+    --urlbar-box-bgcolor: var(--toolbar-field-focus-background-color);
+  }
+}
+
+@media (prefers-contrast) {
+  /* The "increase contrast" preference on macOS draws a 1px black line around
+     panels, including the separate search bar. Since the Urlbar is not
+     implemented as a panel, it does not get this outline. This outline rule
+     resembles the system outline, bringing the Urlbar in line with panels and
+     other Mac apps. */
+  #urlbar[open] > #urlbar-background {
+    outline: 1px solid var(--focus-outline-color)
+  }
+}
+
+#urlbar,
+#searchbar {
+  font-size: 1.25em;
+}
+
+@supports -moz-bool-pref("browser.urlbar.experimental.expandTextOnFocus") {
+  #urlbar[breakout-extend] {
+    font-size: 1.36em;
+  }
+}
+
+/* Move the margin to the parent element to properly position the ::after badge */
+moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left > .menu-iconic-icon {
+  margin-inline: 0;
+}
+moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
+  margin-inline: 0 5px;
+}
+
+/* ----- AUTOCOMPLETE ----- */
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
+  border-top: 1px solid #C7C7C7;
+}
+
+/* Bookmarking panel */
+
+/* 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: 1px solid var(--panel-separator-color);
+  border-radius: 0 0 2px 2px;
+  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;
+  border-radius: 0;
+  padding: 0 9px;
+  margin: 0;
+  min-height: 24px;
+  height: 24px;
+  color: inherit;
+  list-style-image: url("chrome://global/skin/icons/plus.svg");
+}
+
+#editBMPanel_newFolderButton:hover {
+  background-color: var(--arrowpanel-dimmed);
+}
+
+#editBMPanel_newFolderButton:hover:active {
+  background-color: var(--arrowpanel-dimmed-further);
+}
+
+#editBMPanel_newFolderButton .button-text {
+  -moz-box-flex: 1; /* push the button icon to the start side */
+  text-align: start;
+}
+
+/**** 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 > 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-end-start-radius: 0;
+  border-end-end-radius: 0;
+  /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
+  margin: 0 !important;
+  min-width: 27em;
+  position: relative;
+}
+
+/* ----- SIDEBAR ELEMENTS ----- */
+
+#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 sidebar
+ * rules are in use. Vibrant appearance values only work if there is no
+ * background-color rendered behind the element. If the active theme has sidebar
+ * rules, we want to show the theme's background-color in the sidebar. */
+#sidebar-box:not([lwt-sidebar]) {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-source-list;
+  -moz-font-smoothing-background-color: -moz-mac-source-list;
+}
+
+/* ----- CONTENT ----- */
+
+.openintabs-menuitem {
+  list-style-image: none;
+}
+
+/* ::::: tabbrowser ::::: */
+
+#tabbrowser-tabbox {
+  margin: 0;
+}
+
+.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;
+}
+
+#tabbrowser-tabs {
+  /* overriding tabbox.css */
+  -moz-box-align: stretch;
+  margin-bottom: 0;
+  position: static;
+  z-index: auto;
+}
+
+/* Bookmark drag and drop styles */
+
+.bookmark-item[dragover-into="true"] {
+  background: SelectedItem !important;
+  color: SelectedItemText !important;
+}
+
+/* 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 (-moz-content-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-label:-moz-locale-dir(ltr),
+#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(rtl) {
+  border-right-style: solid;
+  border-top-right-radius: .3em;
+  margin-right: 1em;
+}
+
+#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(rtl),
+#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(ltr) {
+  border-left-style: solid;
+  border-top-left-radius: .3em;
+  margin-left: 1em;
+}
+
+/* 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;
+}
+
+#UITourTooltipDescription {
+  font-size: 1.18rem;
+  line-height: 2rem;
+}
+
+#UITourTooltipClose {
+  margin-inline-end: -10px;
+  margin-top: -14px;
+}
+
+#historySwipeAnimationPreviousArrow {
+  background: url("chrome://browser/skin/history-swipe-arrow.svg")
+              center left / 64px 128px no-repeat transparent;
+  will-change: transform;
+}
+#historySwipeAnimationPreviousArrow:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+#historySwipeAnimationNextArrow {
+  background: url("chrome://browser/skin/history-swipe-arrow.svg")
+              center left / 64px 128px no-repeat transparent;
+  will-change: transform;
+}
+#historySwipeAnimationNextArrow:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}
diff --git a/browser/themes/osx/customizableui/panelUI.css b/browser/themes/osx/customizableui/panelUI.css
new file mode 100644
index 0000000000..9579a3797d
--- /dev/null
+++ b/browser/themes/osx/customizableui/panelUI.css
@@ -0,0 +1,67 @@
+/* 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://browser/skin/customizableui/panelUI-shared.css";
+
+#downloadsPanel,
+#widget-overflow,
+#appMenu-popup,
+#customizationui-widget-panel,
+#identity-popup,
+#permission-popup,
+#protections-popup,
+#appMenu-notification-popup,
+#BMB_bookmarksPopup,
+#editBookmarkPanel {
+  margin-top: -1px;
+}
+
+.panel-subview-body {
+  scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent;
+}
+
+#appMenu-mainView > .panel-subview-body > .panel-banner-item {
+  padding-inline-start: 18px;
+}
+
+.subviewbutton:not([image],[targetURI],.bookmark-item) > .menu-iconic-left {
+  display: none;
+}
+
+.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:not([disabled]):hover {
+  background-color: var(--panel-item-hover-bgcolor);
+}
+
+.panel-button:not([disabled]):hover:active {
+  background-color: var(--panel-item-active-bgcolor);
+}
+
+.panel-button:focus-visible {
+  outline: var(--focus-outline);
+}
diff --git a/browser/themes/osx/downloads/allDownloadsView.css b/browser/themes/osx/downloads/allDownloadsView.css
new file mode 100644
index 0000000000..3740280d80
--- /dev/null
+++ b/browser/themes/osx/downloads/allDownloadsView.css
@@ -0,0 +1,15 @@
+/* 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://browser/skin/downloads/allDownloadsView.inc.css";
+
+/*** List items ***/
+
+.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..62112bd7d7
--- /dev/null
+++ b/browser/themes/osx/downloads/downloads.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/. */
+
+@import "chrome://browser/skin/downloads/downloads.inc.css";
+
+:root {
+  --downloads-item-height: 6em;
+  --downloads-item-font-size-factor: 0.80;
+  --downloads-item-details-opacity: 0.7;
+  --downloads-item-disabled-opacity: 0.7;
+}
diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn
new file mode 100644
index 0000000000..dc3089dfa0
--- /dev/null
+++ b/browser/themes/osx/jar.mn
@@ -0,0 +1,25 @@
+# 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/browser.css
+  skin/classic/browser/browser-custom-colors.css     (../shared/browser-custom-colors.css)
+  skin/classic/browser/pageInfo.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/places/organizer.css                 (places/organizer.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/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)
+  skin/classic/browser/history-swipe-arrow.svg              (swipe-gesture-icons/history-swipe-arrow.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/pageInfo.css b/browser/themes/osx/pageInfo.css
new file mode 100644
index 0000000000..3a8c8fc9be
--- /dev/null
+++ b/browser/themes/osx/pageInfo.css
@@ -0,0 +1,137 @@
+/* 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;
+}
+
+@media (-moz-mac-big-sur-theme: 0) {
+  #viewGroup > radio[selected=true],
+  #viewGroup > toolbarbutton[checked=true] {
+    color: #FFF !important;
+    text-shadow: rgba(0, 0, 0, 0.4) 0 1px;
+  }
+}
+
+/* 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;
+}
+
+.help-button {
+  appearance: auto;
+  -moz-default-appearance: -moz-mac-help-button;
+}
+
+/* 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/organizer.css b/browser/themes/osx/places/organizer.css
new file mode 100644
index 0000000000..fe9c8df833
--- /dev/null
+++ b/browser/themes/osx/places/organizer.css
@@ -0,0 +1,230 @@
+/* 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 color-mix(in srgb, FieldText 70%, transparent);
+  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 color-mix(in srgb, FieldText 30%, transparent);
+  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-down-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:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
+}
+
+#forward-button,
+#back-button:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://global/skin/icons/arrow-right.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 > .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 */
+#infoBox:not([hidden="true"]) {
+  display: block;
+}
+
+#editBookmarkPanelContent {
+  grid-template-columns: auto 1fr;
+}
+
+#editBookmarkPanelContent .caption-label:not([hidden="true"]) {
+  display: block;
+  grid-column: 2;
+}
+
+#editBookmarkPanelContent label {
+  align-self: center;
+}
+
+#editBMPanel_itemsCountText {
+  grid-column: auto / span 2;
+  justify-self: center;
+}
+
+#editBMPanel_tagsSelectorRow {
+  grid-column: auto / span 2;
+}
+
+#detailsPane {
+  border-top: 1px solid color-mix(in srgb, FieldText 50%, transparent);
+  height: 16em;
+  padding: 10px;
+}
+
+#placeContent {
+  appearance: none;
+  border: none;
+}
+
+#placeContent > treechildren::-moz-tree-cell,
+#placeContent > treechildren::-moz-tree-column {
+  border-inline-end: 1px solid color-mix(in srgb, FieldText 30%, transparent);
+}
+
+#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;
+}
+
+/**** 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;
+}
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..7eb762cefd
--- /dev/null
+++ b/browser/themes/osx/preferences/applications.css
@@ -0,0 +1,61 @@
+/* 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/. */
+
+.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/icons/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/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/share.svg b/browser/themes/osx/share.svg
new file mode 100644
index 0000000000..9793379648
--- /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" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.25 10.375a.625.625 0 0 1-1.25 0l0-8.323-3.308 3.309a.626.626 0 0 1-.885-.885L7.285 0l.681 0 4.477 4.476a.626.626 0 0 1-.885.885L8.25 2.052l0 8.323z"/>
+  <path d="M12.25 15a2 2 0 0 0 2-2l0-1.375a.625.625 0 0 0-1.25 0l0 1.525-.6.6-9.55 0-.6-.6 0-1.525a.625.625 0 0 0-1.25 0L1 13a2 2 0 0 0 2 2l9.25 0z"/>
+</svg>
diff --git a/browser/themes/osx/swipe-gesture-icons/history-swipe-arrow.svg b/browser/themes/osx/swipe-gesture-icons/history-swipe-arrow.svg
new file mode 100644
index 0000000000..9c0c0a5672
--- /dev/null
+++ b/browser/themes/osx/swipe-gesture-icons/history-swipe-arrow.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 width="256" height="512" xmlns="http://www.w3.org/2000/svg">
+  <ellipse ry="256" rx="256" cy="256" cx="0" stroke-width="0" stroke="#000" fill="#38383d"/>
+  <path d="m181.335236,247.749695l-96.549957,0l35.774963,-35.774994a8.33333,8.33333 0 0 0 -11.783325,-11.783325l-49.999969,49.999954a8.33333,8.33333 0 0 0 0,11.782944l49.999969,50a8.33333,8.33333 0 0 0 11.783325,-11.783325l-35.774963,-35.774994l96.549957,0a8.33333,8.33333 0 0 0 0,-16.66626z" fill="rgba(249, 249, 250, .8)"/>
+</svg>
+\ No newline at end of file