summaryrefslogtreecommitdiffstats
path: root/browser/themes/shared/places
diff options
context:
space:
mode:
Diffstat (limited to 'browser/themes/shared/places')
-rw-r--r--browser/themes/shared/places/bookmarksMenu.svg9
-rw-r--r--browser/themes/shared/places/bookmarksToolbar.svg8
-rw-r--r--browser/themes/shared/places/editBookmark.css160
-rw-r--r--browser/themes/shared/places/editBookmarkPanel.css156
-rw-r--r--browser/themes/shared/places/folder-smart.svg6
-rw-r--r--browser/themes/shared/places/organizer-shared.css19
-rw-r--r--browser/themes/shared/places/sidebar.css210
-rw-r--r--browser/themes/shared/places/tag.svg8
-rw-r--r--browser/themes/shared/places/tree-icons.css95
9 files changed, 671 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..4c00982e62
--- /dev/null
+++ b/browser/themes/shared/places/editBookmark.css
@@ -0,0 +1,160 @@
+/* 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 {
+ margin: 0;
+ height: 12.5em;
+ flex: 1 auto;
+ border: 1px solid ThreeDShadow;
+ border-radius: 4px;
+}
+
+#editBMPanel_folderTree {
+ appearance: none;
+ overflow: hidden;
+}
+
+#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: flex;
+}
+
+.folder-icon {
+ list-style-image: url("chrome://global/skin/icons/folder.svg") !important;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#editBMPanel_tagsSelector > richlistitem > image {
+ appearance: auto;
+ -moz-default-appearance: checkbox;
+ align-items: 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(--text-color-deemphasized);
+}
+
+.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..64840f1cf1
--- /dev/null
+++ b/browser/themes/shared/places/editBookmarkPanel.css
@@ -0,0 +1,156 @@
+/* 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");
+
+#editBookmarkPanel > .panel-subview-body {
+ padding-bottom: 0;
+}
+
+#editBMPanel_newFolderButton {
+ appearance: none;
+ margin: 0;
+ 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%;
+}
+
+#editBMPanel_newFolderButton:hover {
+ background-color: var(--button-hover-bgcolor);
+}
+
+#editBMPanel_newFolderButton:hover:active {
+ background-color: var(--button-active-bgcolor);
+}
+
+#editBookmarkPanel > #editBookmarkHeaderSeparator {
+ margin-bottom: 0;
+ margin-inline: 16px;
+}
+
+#editBookmarkPanel {
+ font: caption;
+}
+
+#editBookmarkPanelContent > label:not(.editBMPanel_nameRow) {
+ padding-top: var(--arrowpanel-padding);
+}
+
+#editBookmarkPanelContent > #editBMPanel_folderTreeRow,
+#editBookmarkPanelContent > #editBMPanel_folderTreeRow > #editBMPanel_newFolderBox,
+#editBookmarkPanelContent > #editBMPanel_tagsSelectorRow {
+ padding-top: 4px;
+}
+
+#editBookmarkPanelContent label[control] {
+ margin: 0;
+ margin-bottom: 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;
+}
+
+#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/organizer-shared.css b/browser/themes/shared/places/organizer-shared.css
new file mode 100644
index 0000000000..f0563e695c
--- /dev/null
+++ b/browser/themes/shared/places/organizer-shared.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/. */
+
+#contentView {
+ flex: 4 4;
+}
+
+#contentView,
+#placesView,
+#placesViewsBox {
+ min-width: 0;
+ min-height: 0;
+}
+
+#placesViewsBox {
+ min-height: 5em;
+ overflow: clip;
+}
diff --git a/browser/themes/shared/places/sidebar.css b/browser/themes/shared/places/sidebar.css
new file mode 100644
index 0000000000..d8bb12e241
--- /dev/null
+++ b/browser/themes/shared/places/sidebar.css
@@ -0,0 +1,210 @@
+/* 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);
+ color-scheme: light;
+
+ scrollbar-color:
+ light-dark(
+ rgba(204,204,204,.5),
+ rgba(249,249,250,.4)
+ )
+ light-dark(
+ rgba(230,230,235,.5),
+ rgba(20,20,25,.3)
+ );
+}
+
+.sidebar-panel[lwt-sidebar="dark"] {
+ color-scheme: dark;
+}
+
+.sidebar-panel[lwt-sidebar] .sidebar-placesTreechildren::-moz-tree-row(selected) {
+ background-color: light-dark(hsla(0,0%,80%,.3), rgba(249,249,250,.1));
+}
+
+.sidebar-panel[lwt-sidebar="dark"] .sidebar-placesTreechildren {
+ &::-moz-tree-image(selected),
+ &::-moz-tree-twisty(selected),
+ &::-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);
+ }
+
+ &::-moz-tree-image(selected, focus),
+ &::-moz-tree-twisty(selected, focus),
+ &::-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;
+ display: flex;
+ content: url("chrome://global/skin/icons/arrow-down-12.svg");
+ -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 not (prefers-contrast) {
+ .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-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;
+}