Add styling to the side bar and library window #83

chrome/global/tree.css

@@ -0,0 +1,87 @@
+/* Edge-Frfox - tree.css */
+
+/* Change height of tree items and add rounded corners */
+treechildren::-moz-tree-row,
+treecol:not([hideheader="true"]),
+.tree-columnpicker-button {
+  min-height: max(28px, 1.3em) !important;
+  border-radius: 2px !important;
+}
+
+/* Change the background colour on hover */
+@media not (prefers-contrast) {
+  treechildren::-moz-tree-row(hover) {
+    background-color: var(--toolbarbutton-hover-background) !important;
+  }
+}
+
+/* Change the background colour when pressed */
+treechildren::-moz-tree-row(selected) {
+  background-color: var(--toolbarbutton-active-background) !important;
+}
+
+/* Change the background colour when focused */
+treechildren::-moz-tree-row(selected, focus) {
+  background-color: var(--button-primary-bgcolor) !important;
+}
+
+treechildren::-moz-tree-row(current, focus) {
+  outline: var(--default-focusring);
+  outline-color: var(--button-primary-bgcolor) !important;
+  outline-offset: calc(-1 * var(--default-focusring-width));
+}
+
+treechildren::-moz-tree-image(selected),
+treechildren::-moz-tree-twisty(selected),
+treechildren::-moz-tree-cell-text(selected) {
+  color: inherit !important;
+}
+
+treechildren::-moz-tree-image(selected, focus),
+treechildren::-moz-tree-twisty(selected, focus),
+treechildren::-moz-tree-cell-text(selected, focus) {
+  color: var(--button-primary-color) !important;
+}
+
+/* Spacing between icon and label */
+treechildren::-moz-tree-image {
+  margin-inline-end: 8px !important;
+}
+
+/* Separator appearance */
+treechildren::-moz-tree-separator {
+  border-top: 1px solid var(--toolbarseparator-color) !important;
+  border-bottom: none !important;
+}
+
+/* Change the colour of the drop feedback elements */
+treechildren::-moz-tree-cell-text(primary, dropOn) {
+  background-color: var(--button-primary-bgcolor) !important;
+  color: var(--button-primary-color) !important;
+}
+
+treechildren::-moz-tree-drop-feedback {
+  background-color: var(--toolbarbutton-icon-fill-attention) !important;
+  border-radius: 2px !important;
+}
+
+/* Change the appearance for the expandable items */
+treechildren::-moz-tree-twisty {
+  padding-top: 0 !important;
+  padding-inline: 4px !important;
+  width: 16px !important;
+  list-style-image: url("../icons/arrow-filled-right.svg") !important;
+}
+
+treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) {
+  list-style-image: url("../icons/arrow-filled-left.svg") !important;
+}
+
+treechildren::-moz-tree-twisty(open) {
+  list-style-image: url("../icons/arrow-filled-down.svg") !important;
+}
+
+/* Change the identation of child items */
+treechildren::-moz-tree-indentation {
+  width: 16px !important;
+}

chrome/icons/arrow-filled-down.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path transform="rotate(90)" transform-origin="center" d="M6.479 2.729 11.1 7.35a.92.92 0 0 1 0 1.3l-4.621 4.621a.72.72 0 0 1-1.229-.509V3.237a.72.72 0 0 1 1.229-.508z"/>
+</svg>

chrome/icons/arrow-filled-left.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path transform="rotate(180)" transform-origin="center" d="M6.479 2.729 11.1 7.35a.92.92 0 0 1 0 1.3l-4.621 4.621a.72.72 0 0 1-1.229-.509V3.237a.72.72 0 0 1 1.229-.508z"/>
+</svg>

chrome/icons/icons.css

@@ -944,3 +944,67 @@ and 11 so applied to both) */
   --header-image: url("extension.svg");
   --uc-enabled: 1;
 }
+
+/* Tree items used for side bar and library windows */
+treechildren::-moz-tree-image {
+  fill-opacity: 1 !important;
+}
+
+treechildren::-moz-tree-image(title) {
+  list-style-image: url("page-portrait.svg") !important;
+}
+
+/* default folder icon */
+treechildren::-moz-tree-image(title, container),
+treechildren::-moz-tree-image(title, open) {
+  list-style-image: url("folder.svg") !important;
+}
+
+/* bookmarks bar icon */
+treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
+  list-style-image: url("bookmark-hollow.svg") !important;
+}
+
+/* bookmarks menu icon */
+treechildren::-moz-tree-image(container, queryFolder_menu________) {
+  list-style-image: url("folder.svg") !important;
+}
+
+/* smart folder icon */
+treechildren::-moz-tree-image(query) {
+  list-style-image: url("settings.svg") !important;
+}
+
+/* bookmarks category icon */
+treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
+  list-style-image: url("bookmark-hollow.svg") !important;
+}
+
+/* downloads category icon */
+treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
+  list-style-image: url("downloads.svg") !important;
+}
+
+/* tags category icon */
+treechildren::-moz-tree-image(title, query, tagContainer),
+treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v) {
+  list-style-image: url("tag.svg") !important;
+}
+
+/* calendar icon for folders grouping items by date */
+treechildren::-moz-tree-image(title, query, dayContainer) {
+  list-style-image: url("history.svg") !important;
+}
+
+treechildren::-moz-tree-image(title, query, hostContainer) {
+  list-style-image: url("folder.svg") !important;
+}
+
+/* history category icon */
+treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
+  list-style-image: url("history.svg") !important;
+}
+
+treechildren::-moz-tree-image(title, query, folder) {
+  list-style-image: url("folder.svg") !important;
+}

chrome/icons/tag.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M12 5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM9.129 0a2.003 2.003 0 0 0-1.426.584L1.021 7.249a2 2 0 0 0-.002 2.83l4.948 4.948a2 2 0 0 0 2.828 0l6.631-6.631a2 2 0 0 0 .586-1.417l-.007-4.95A2 2 0 0 0 14.018.032zm-.72 1.292A1 1 0 0 1 9.123 1l4.89.032a1 1 0 0 1 .994.999l.007 4.95a1 1 0 0 1-.293.708L8.09 14.32a1 1 0 0 1-1.415 0L1.727 9.372a1 1 0 0 1 .001-1.415z"/>
+</svg>

chrome/userChrome.css

@@ -9,6 +9,7 @@
 @import url("global/popup.css");
 @import url("global/tweaks.css");
 @import url("global/browser.css");
+@import url("global/tree.css");
 
 /* import custom stylesheet instead of modifying Edge-Frfox theme files */
 @import url("custom.css");