8 files changed, 721 insertions, 0 deletions
diff --git a/browser/themes/shared/places/bookmarksMenu.svg b/browser/themes/shared/places/bookmarksMenu.svg
new file mode 100644
index 0000000000..97154aadb6
--- /dev/null
+++ b/browser/themes/shared/places/bookmarksMenu.svg
@@ -0,0 +1,9 @@
+<!-- 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="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+  <path fill-opacity=".05" d="M15,2H1v12c0,0.6,0.5,1,1,1h12c0.6,0,1-0.4,1-1V2L15,2z"/>
+  <path d="M3,5v1h2V5H3z M3,9h2V8H3V9z M3,12h2v-1H3V12z"/>
+  <path fill-opacity=".9" d="M6,5v1h7V5H6z M12,8H6v1h6V8z M6,12h7v-1H6V12z"/>
+  <path d="M7,2V1H1v1v1v11c0,0.5,0.5,1,1,1h12c0.5,0,1-0.5,1-1V2H7z M13.5,14h-11C2.2,14,2,13.8,2,13.5V3h12v10.5 C14,13.8,13.8,14,13.5,14z"/>
+</svg>
diff --git a/browser/themes/shared/places/bookmarksToolbar.svg b/browser/themes/shared/places/bookmarksToolbar.svg
new file mode 100644
index 0000000000..2b031295be
--- /dev/null
+++ b/browser/themes/shared/places/bookmarksToolbar.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 width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+  <path fill-opacity=".15" d="M15,14H1c-0.6,0-1-0.4-1-1V3c0-0.5,0.4-1,1-1h14c0.6,0,1,0.5,1,1v10C16,13.6,15.6,14,15,14z"/>
+  <path d="M8.4,4.2l1,2.1l2.3,0.3c0.3,0,0.5,0.4,0.2,0.7l-1.7,1.7l0.4,2.4c0.1,0.3-0.3,0.6-0.6,0.4L8,10.8L6,12 c-0.3,0.1-0.6-0.1-0.6-0.4l0.4-2.4L4.1,7.4C3.9,7.2,4,6.8,4.3,6.7l2.3-0.3l1-2.1C7.8,3.9,8.2,3.9,8.4,4.2z"/>
+  <path d="M15,2H1C0.5,2,0,2.5,0,3v10c0,0.5,0.5,1,1,1h14c0.5,0,1-0.5,1-1V3C16,2.5,15.5,2,15,2z M15,12.5 c0,0.3-0.2,0.5-0.5,0.5h-13C1.2,13,1,12.8,1,12.5v-9C1,3.2,1.2,3,1.5,3h13C14.8,3,15,3.2,15,3.5V12.5z"/>
+</svg>
diff --git a/browser/themes/shared/places/editBookmark.css b/browser/themes/shared/places/editBookmark.css
new file mode 100644
index 0000000000..54cd75548a
--- /dev/null
+++ b/browser/themes/shared/places/editBookmark.css
@@ -0,0 +1,161 @@
+/* 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/. */
+
+#editBookmarkPanelContent {
+  display: grid;
+  grid-template-columns: auto;
+}
+
+#editBMPanel_folderTree,
+#editBMPanel_tagsSelector {
+  height: 12.5em;
+}
+
+#editBMPanel_folderMenuList::part(icon) {
+  width: 16px;
+  height: 16px;
+}
+
+@media (-moz-platform: macos) {
+  /* FIXME(emilio): Is this rule needed at all? */
+  .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://global/skin/icons/folder.svg") !important;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#editBMPanel_folderTree {
+  margin-block: 2px;
+}
+
+@media (-moz-platform: macos) {
+  #editBMPanel_folderTree {
+    margin: 6px 4px 0;
+  }
+}
+
+#editBMPanel_tagsSelector > richlistitem > image {
+  appearance: auto;
+  -moz-default-appearance: checkbox;
+  -moz-box-align: center;
+  margin: 0 2px;
+  min-width: 13px;
+  min-height: 13px;
+}
+
+@media (-moz-platform: windows) {
+  #editBMPanel_tagsSelector > richlistitem > image {
+    border: 1px solid -moz-DialogText;
+    background: Field no-repeat 50% 50%;
+  }
+}
+
+#bookmarkpropertiesdialog #editBMPanel_tagsSelector {
+  border-color: var(--in-content-border-color);
+  padding: 12px;
+}
+
+/* Reset default margins for tags so we can apply custom ones */
+#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > image,
+#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > label {
+  margin: 0;
+}
+
+/* Set spacing between tags */
+#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem:not(:last-child) {
+  margin-bottom: 8px;
+}
+
+#bookmarkpropertiesdialog #editBMPanel_tagsSelector > richlistitem > image {
+  margin-inline-end: 8px;
+}
+
+/* Bookmark panel dropdown icons */
+
+#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;
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelContent > label:not(.editBMPanel_nameRow),
+#bookmarkpropertiesdialog #editBookmarkPanelContent > #editBMPanel_folderTreeRow,
+#bookmarkpropertiesdialog #editBookmarkPanelContent > #editBMPanel_tagsSelectorRow {
+  padding-block: var(--editbookmarkdialog-padding) 0;
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelContent label[control] {
+  margin-inline-start: 0;
+  margin-block: 0 4px;
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelContent {
+  padding: calc(var(--editbookmarkdialog-padding) / 2) var(--editbookmarkdialog-padding) var(--editbookmarkdialog-padding);
+}
+
+#bookmarkpropertiesdialog .expander-up,
+#bookmarkpropertiesdialog .expander-down {
+  appearance: none;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin: 0;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 0;
+}
+
+#bookmarkpropertiesdialog .expander-up {
+  list-style-image: url("chrome://global/skin/icons/arrow-up.svg");
+}
+
+#bookmarkpropertiesdialog .expander-down {
+  list-style-image: url("chrome://global/skin/icons/arrow-down.svg");
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelContent > input,
+#bookmarkpropertiesdialog #editBookmarkPanelContent > hbox > input,
+#bookmarkpropertiesdialog #editBMPanel_folderMenuList {
+  margin: 0;
+}
+
+/* dialog-specific #editBookmarkPanel styles */
+
+#bookmarkpropertiesdialog #editBookmarkPanelContent {
+  padding-inline: 0;
+  margin-inline: 4px;
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelContent,
+#bookmarkpropertiesdialog vbox#editBMPanel_nameRow {
+  padding-top: 0;
+}
+
+#bookmarkpropertiesdialog #editBookmarkPanelContent #editBMPanel_tagsField,
+#bookmarkpropertiesdialog #editBookmarkPanelContent #editBMPanel_folderMenuList {
+  margin-inline-end: 16px;
+}
+
+#bookmarkpropertiesdialog .caption-label {
+  margin: 4px;
+  color: var(--in-content-deemphasized-text);
+}
+
+.caption-label {
+  font-size: 0.9em;
+  margin: 2px 4px;
+}
diff --git a/browser/themes/shared/places/editBookmarkPanel.css b/browser/themes/shared/places/editBookmarkPanel.css
new file mode 100644
index 0000000000..1250f1e1c1
--- /dev/null
+++ b/browser/themes/shared/places/editBookmarkPanel.css
@@ -0,0 +1,218 @@
+/* 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");
+
+/**
+ * Our OS integration code toggles whether system colors should return light or
+ * dark values based on the luminosity of the toolbar background. Because themes
+ * can style panels to have a different background color than the toolbar, we
+ * need specific overrides for system colors used in light or dark themes.
+ */
+#editBookmarkPanel:-moz-lwtheme {
+  color-scheme: light;
+}
+
+:root[lwt-popup-brighttext] #editBookmarkPanel {
+  color-scheme: dark;
+}
+
+#editBookmarkPanel > .panel-subview-body {
+  padding-bottom: 0;
+}
+
+html|div#editBookmarkPanelFaviconContainer {
+  display: flex;
+}
+
+#editBookmarkPanelInfoArea {
+  overflow: hidden;
+  padding: 4px var(--arrowpanel-padding) 0;
+}
+
+html|img#editBookmarkPanelFavicon[src] {
+  box-sizing: content-box;
+  width: 32px;
+  height: 32px;
+  padding: 5px;
+  background-color: #F9F9FA;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
+  border-radius: 6px;
+  margin-top: 10px;
+  margin-inline-start: 10px;
+  margin-bottom: -52px; /* margin-top + paddings + height */
+}
+
+#editBookmarkPanelImage {
+  border-radius: 4px;
+  height: 150px;
+  background-image: -moz-element(#editBookmarkPanelImageCanvas);
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin: 0;
+}
+
+#editBookmarkPanelContent,
+#editBookmarkPanelBottomContent {
+  padding: var(--arrowpanel-padding);
+}
+
+#editBookmarkPanelContent {
+  padding-bottom: 0;
+}
+
+/* Implements editBookmarkPanel resizing on folderTree un-collapse. */
+#editBMPanel_folderTree {
+  min-width: 27em;
+}
+
+#editBMPanel_newFolderButton {
+  appearance: none;
+  border: 0;
+  border-radius: 4px;
+  background-color: var(--button-bgcolor);
+  color: var(--button-color, inherit);
+  font-weight: 600;
+  min-width: 0;
+  padding: 8px 16px;
+
+  /* This button is deeper in the visual hierarchy than others (notably the
+     buttons at the bottom of the panel), so it should be slightly smaller. */
+  font-size: 90%;
+
+  /* This button needs to align with the tree above it. */
+  margin-inline-start: 4px;
+}
+
+#editBMPanel_newFolderButton:hover {
+  background-color: var(--button-hover-bgcolor);
+}
+
+#editBMPanel_newFolderButton:hover:active {
+  background-color: var(--button-active-bgcolor);
+}
+
+#editBookmarkPanel > #editBookmarkHeaderSeparator,
+#editBookmarkPanel > .panel-subview-body > #editBookmarkSeparator {
+  margin-bottom: 0;
+  margin-inline: 16px;
+}
+
+#editBookmarkPanel {
+  font: caption;
+}
+
+#editBookmarkPanelContent > label:not(.editBMPanel_nameRow),
+#editBookmarkPanelContent > #editBMPanel_folderTreeRow,
+#editBookmarkPanelContent > #editBMPanel_tagsSelectorRow {
+  padding-block: var(--arrowpanel-padding) 0;
+}
+
+#editBookmarkPanelContent label[control] {
+  margin-inline-start: 0;
+  margin-block: 0 4px;
+}
+
+#editBookmarkPanel .caption-label {
+  display: none;
+}
+
+#editBookmarkPanelContent {
+  padding: 0.8em var(--arrowpanel-padding) var(--arrowpanel-padding);
+}
+
+#editBMPanel_selectionCount {
+  padding-top: 0.8em;
+}
+
+#editBookmarkPanelBottomContent {
+  padding: 0 var(--arrowpanel-padding) calc(var(--arrowpanel-padding) / 2);
+}
+
+#editBookmarkPanelBottomContent > checkbox {
+  margin-inline-start: 0;
+}
+
+#editBookmarkPanel_showForNewBookmarks > .checkbox-label-box > .checkbox-label {
+  opacity: 0.7;
+}
+
+#editBookmarkPanelBottomButtons > button {
+  margin-top: 0;
+}
+
+#editBookmarkPanel .expander-up > .button-box > .button-text,
+#editBookmarkPanel .expander-down > .button-box > .button-text {
+  display: none;
+}
+
+#editBookmarkPanel .expander-up,
+#editBookmarkPanel .expander-down {
+  appearance: none; /* override button.css */
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin: 0;
+  margin-inline-start: 4px;
+  min-width: 32px;
+  min-height: 32px;
+  color: var(--button-color);
+  background-color: var(--button-bgcolor);
+  border-radius: 4px;
+}
+
+#editBookmarkPanel .expander-up:hover,
+#editBookmarkPanel .expander-down:hover {
+  background-color: var(--button-hover-bgcolor);
+}
+
+#editBookmarkPanel .expander-up:hover:active,
+#editBookmarkPanel .expander-down:hover:active {
+  /**
+   * We override the colour here because on macOS, buttons default to
+   * having :hover:active buttons have color -moz-buttonactivetext
+   */
+  color: var(--button-color);
+  background-color: var(--button-active-bgcolor);
+}
+
+#editBookmarkPanel .expander-up {
+  list-style-image: url("chrome://global/skin/icons/arrow-up.svg");
+}
+
+#editBookmarkPanel .expander-down {
+  list-style-image: url("chrome://global/skin/icons/arrow-down.svg");
+}
+
+#editBMPanel_folderMenuList {
+  margin: 0;
+}
+
+#editBookmarkPanelContent > html|input,
+#editBookmarkPanelContent > hbox > html|input {
+  appearance: none;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid var(--input-border-color, ThreeDShadow);
+  background-color: var(--input-bgcolor, Field);
+  color: var(--input-color, FieldText);
+  margin: 0;
+}
+
+/* Focus outlines */
+
+#editBookmarkPanel .expander-up:focus-visible,
+#editBookmarkPanel .expander-down:focus-visible,
+#editBMPanel_newFolderButton:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+#editBMPanel_folderTree:focus-visible,
+#editBMPanel_tagsSelector:focus-visible,
+#editBookmarkPanelContent > html|input:focus-visible,
+#editBookmarkPanelContent > hbox > html|input:focus-visible {
+  border-color: transparent;
+  outline: var(--focus-outline);
+  outline-offset: -1px;
+}
diff --git a/browser/themes/shared/places/folder-smart.svg b/browser/themes/shared/places/folder-smart.svg
new file mode 100644
index 0000000000..c38c606efc
--- /dev/null
+++ b/browser/themes/shared/places/folder-smart.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 width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+  <path  d="M14,7H12.9a4.967,4.967,0,0,0-.732-1.753l.782-.783A1,1,0,1,0,11.535,3.05l-.782.783A4.968,4.968,0,0,0,9,3.1V2A1,1,0,0,0,7,2V3.1a4.968,4.968,0,0,0-1.753.732L4.464,3.05A1,1,0,0,0,3.05,4.464l.783.783A4.968,4.968,0,0,0,3.1,7H2A1,1,0,0,0,2,9H3.1a4.968,4.968,0,0,0,.732,1.753l-.783.782a1,1,0,1,0,1.414,1.414l.783-.782A4.967,4.967,0,0,0,7,12.9V14a1,1,0,0,0,2,0V12.9a4.968,4.968,0,0,0,1.753-.732l.782.782a1,1,0,0,0,1.414-1.414l-.782-.782A4.968,4.968,0,0,0,12.9,9H14a1,1,0,0,0,0-2ZM8,11a3,3,0,1,1,3-3A3,3,0,0,1,8,11Z"/>
+</svg>
diff --git a/browser/themes/shared/places/sidebar.css b/browser/themes/shared/places/sidebar.css
new file mode 100644
index 0000000000..c4c7db5701
--- /dev/null
+++ b/browser/themes/shared/places/sidebar.css
@@ -0,0 +1,216 @@
+/* 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/. */
+
+.sidebar-panel {
+  appearance: none;
+  background-color: transparent;
+}
+
+/* Themed sidebars */
+
+.sidebar-panel[lwt-sidebar] {
+  background-color: var(--lwt-sidebar-background-color);
+  color: var(--lwt-sidebar-text-color);
+  scrollbar-color: rgba(204,204,204,.5) rgba(230,230,235,.5);
+  color-scheme: light;
+}
+
+.sidebar-panel[lwt-sidebar-brighttext] {
+  scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3);
+  color-scheme: dark;
+}
+
+.sidebar-panel[lwt-sidebar] .sidebar-placesTreechildren::-moz-tree-row(selected) {
+  background-color: hsla(0,0%,80%,.3);
+}
+
+.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-row(selected) {
+  background-color: rgba(249,249,250,.1);
+}
+
+.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-image(selected),
+.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-twisty(selected),
+.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-cell-text(selected) {
+  color: var(--lwt-sidebar-text-color);
+}
+
+.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-row(selected,focus) {
+  background-color: var(--lwt-sidebar-highlight-background-color);
+}
+
+.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-image(selected, focus),
+.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-twisty(selected, focus),
+.sidebar-panel[lwt-sidebar-highlight] .sidebar-placesTreechildren::-moz-tree-cell-text(selected, focus) {
+  color: var(--lwt-sidebar-highlight-text-color, var(--lwt-sidebar-text-color, var(--sidebar-text-color)));
+}
+
+/* Sidebar tree */
+
+.sidebar-placesTree {
+  appearance: none;
+  background-color: transparent;
+  color: inherit;
+  border: 0;
+  margin: 0;
+}
+
+/* View button */
+
+#viewButton {
+  appearance: none;
+  border-radius: 4px;
+  padding: 2px 4px;
+  color: inherit;
+}
+
+#viewButton:hover {
+  /* Matches --toolbarbutton-hover-background: */
+  background-color: color-mix(in srgb, currentColor 17%, transparent);
+}
+
+#viewButton[open] {
+  /* Matches --toolbarbutton-active-background: */
+  background-color: color-mix(in srgb, currentColor 30%, transparent);
+}
+
+#viewButton:focus-visible {
+  outline: var(--focus-outline);
+}
+
+#viewButton > .button-box > .button-menu-dropmarker {
+  appearance: none !important;
+  display: -moz-box;
+  list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
+  width: 12px;
+  height: 12px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+@media (-moz-platform: windows) {
+  :root[uidensity=touch] #search-box,
+  :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+    min-height: 32px;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell,
+  .sidebar-placesTreechildren::-moz-tree-twisty {
+    padding: 0 4px;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell(leaf) ,
+  .sidebar-placesTreechildren::-moz-tree-image(leaf) {
+    cursor: pointer;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell(separator) {
+    cursor: default;
+  }
+
+  @media (-moz-windows-default-theme) {
+    .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
+      text-decoration: none;
+    }
+  }
+
+  /* Default button vert. margins are 1px/2px, and this can cause misalignment */
+  #viewButton {
+    margin: 0;
+    margin-inline-start: 4px;
+    border-radius: 2px;
+  }
+
+  #sidebar-search-container {
+    padding: 8px;
+  }
+
+  #search-box {
+    margin: 0;
+  }
+}
+
+@media (-moz-platform: linux) {
+  #sidebar-search-container {
+    padding: 8px;
+  }
+
+  #search-box {
+    margin: 0;
+  }
+
+  #viewButton {
+    margin: 1px 0;
+    margin-inline-start: 4px;
+  }
+
+  :root[uidensity=touch] #search-box,
+  :root[uidensity=touch] .sidebar-placesTreechildren::-moz-tree-row {
+    min-height: 32px;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell(leaf) ,
+  .sidebar-placesTreechildren::-moz-tree-image(leaf) {
+    cursor: pointer;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell(separator) {
+    cursor: default;
+  }
+}
+
+@media (-moz-platform: macos) {
+  .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;
+  }
+}
diff --git a/browser/themes/shared/places/tag.svg b/browser/themes/shared/places/tag.svg
new file mode 100644
index 0000000000..3be1d0e1be
--- /dev/null
+++ b/browser/themes/shared/places/tag.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" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path fill-opacity=".1" d="M1 1h6l8 8-6 6-8-8V1zm3 5a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
+  <path d="M1 1v6l8 8 6-6-8-8H1zm0-1h6a1 1 0 0 1 .707.293l8 8a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414 0l-8-8A1 1 0 0 1 0 7V1a1 1 0 0 1 1-1zm3 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
+  <path fill-opacity=".4" d="M8.146 6.854a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1-.708.708l-3-3zm-2 2a.5.5 0 1 1 .708-.708l2 2a.5.5 0 0 1-.708.708l-2-2z"/>
+</svg>
diff --git a/browser/themes/shared/places/tree-icons.css b/browser/themes/shared/places/tree-icons.css
new file mode 100644
index 0000000000..38df3ea4d1
--- /dev/null
+++ b/browser/themes/shared/places/tree-icons.css
@@ -0,0 +1,95 @@
+/* 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/. */
+
+treechildren::-moz-tree-image {
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: 0.7;
+}
+
+treechildren::-moz-tree-image(title) {
+  list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
+  padding-inline-end: 2px;
+  margin: 0 2px;
+  width: 16px;
+  height: 16px;
+}
+
+treechildren::-moz-tree-image(title, container),
+treechildren::-moz-tree-image(title, open) {
+  list-style-image: url("chrome://global/skin/icons/folder.svg");
+}
+
+treechildren::-moz-tree-image(title, separator) {
+  list-style-image: none;
+  width: 0 !important;
+  height: 0 !important;
+  margin: 0;
+}
+
+treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
+  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg");
+}
+
+treechildren::-moz-tree-image(container, queryFolder_menu________) {
+  list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg");
+}
+
+/* query-nodes should be styled even if they're not expandable */
+treechildren::-moz-tree-image(query) {
+  list-style-image: url("chrome://browser/skin/places/folder-smart.svg");
+}
+
+treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
+  list-style-image: url("chrome://browser/skin/bookmark.svg");
+}
+
+treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
+  list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
+}
+
+treechildren::-moz-tree-image(title, query, tagContainer),
+treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {
+  list-style-image: url("chrome://browser/skin/places/tag.svg");
+}
+
+/* calendar icon for folders grouping items by date */
+treechildren::-moz-tree-image(title, query, dayContainer) {
+  list-style-image: url("chrome://browser/skin/history.svg");
+}
+
+treechildren::-moz-tree-image(title, query, hostContainer) {
+  list-style-image: url("chrome://global/skin/icons/folder.svg");
+}
+
+treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
+  list-style-image: url("chrome://browser/skin/history.svg");
+}
+
+/* We want some queries to look like ordinary folders. This must come
+   after the (title, query) selector, or it would get overridden. */
+treechildren::-moz-tree-image(title, query, folder) {
+  list-style-image: url("chrome://global/skin/icons/folder.svg");
+}
+
+treechildren::-moz-tree-cell-text(title, separator) {
+  color: ThreeDShadow;
+  margin: 0 5px;
+}
+
+treechildren::-moz-tree-cell-text(title, separator, selected, focus) {
+  color: SelectedItemText;
+}
+
+/* Remove tiny spacing in separators appearing after the twisty column */
+treechildren::-moz-tree-twisty(title, separator) {
+  padding: 0;
+}
+
+treechildren::-moz-tree-image(cutting) {
+  opacity: 0.5;
+}
+
+treechildren::-moz-tree-cell-text(cutting) {
+  opacity: 0.7;
+}