Merge pull request #351 from synapsos/tree-style-tab

Fixes for Tree Style Tab (#313)

theme/shared/browser/extensions/tree-style-tab.inc.css

@@ -92,14 +92,15 @@
 .treestyletab-splitter[orient="horizontal"] {
   -moz-appearance: none !important;
   background: #fafafa;
-  border-right: 1px solid #a7aba7;
   min-width: 4px;
   width: 4px;
+  border-right: 1px solid;
+  border-color: #a7aba7 !important;
 }
 
 tabbrowser[treestyletab-tabbar-position="right"] .treestyletab-splitter[orient="horizontal"] {
   border-right: none;
-  border-left: 1px solid #a7aba7
+  border-left: 1px solid;
 }
 
 .treestyletab-splitter[orient="horizontal"]:hover {
@@ -111,6 +112,7 @@ tabbrowser[treestyletab-tabbar-position="right"] .treestyletab-splitter[orient="
 
 #main-window@darkTheme@ .treestyletab-splitter {
   background: #454c4c;
+  border-color: #1e2222 !important;
 }
 
 /* ====== Tab ====== */
@@ -136,7 +138,7 @@ tabbrowser[treestyletab-tabbar-position="right"] .treestyletab-splitter[orient="
   outline-offset: -3px;
 }
 
-@treeDefault@ .tabbrowser-tab[selected]:hover,
+@treeDefault@ .tabbrowser-tab[visuallyselected]:hover,
 @treeDefault@[darkvariant] .tabbrowser-tab:hover,
 @treeDefault@[darkvariant] .tabs-newtab-button:hover, 
 @treeDefault@[darkvariant] #new-tab-button:hover {
@@ -160,38 +162,31 @@ tabbrowser[treestyletab-tabbar-position="right"] .treestyletab-splitter[orient="
 
 /* Invert indentation (right aligned) */
 @treeDefault@[treestyletab-tab-inverted] .tab-content .tab-text {
-  margin-right: 4px !important;
   text-align: right;
 }
 
 /* Invert content (icon on the right) */
-@treeDefault@[treestyletab-tab-contents-inverted] .tab-content .tab-icon-image {
-  margin-left: 2px;
-}
-,
-@treeDefault@[treestyletab-tab-contents-inverted] .tab-content .tab-text {
-  margin: 0 20px !important;
-}
+@treeDefault@[treestyletab-tab-contents-inverted] .tab-content .tab-icon-image,
 @treeDefault@[treestyletab-tab-contents-inverted] .tab-close-button {
-  margin: 0 4px;
+  margin: 0 2px;
 }
 
 /* ====== Close Button ====== */
 
-@treeDefault@ .tab-close-button {
+@treeDefault@[treestyletab-narrow-scrollbar] .tab-close-button {
   display: none;
 }
 
 @treeDefault@ .tabbrowser-tab:hover .tab-close-button,
-@treeDefault@ .tabbrowser-tab[selected] .tab-close-button {
+@treeDefault@ .tabbrowser-tab[visuallyselected] .tab-close-button {
   display: block;
 }
 
 @treeDefault@ .tabbrowser-tab[pinned] .tab-close-button {
   display: none;
 }
 
-@treeDefault@ .tabbrowser-tab[selected] .tab-close-button {
+@treeDefault@ .tabbrowser-tab[visuallyselected] .tab-close-button {
   list-style-image: url(chrome://symbolic-icons/skin/close_white.svg) !important;
 }
 
@@ -200,41 +195,45 @@ tabbrowser[treestyletab-tabbar-position="right"] .treestyletab-splitter[orient="
 @tree@ .tabbrowser-tab:hover .tab-background-start,
 @tree@ .tabbrowser-tab:hover .tab-background-middle,
 @tree@ .tabbrowser-tab:hover .tab-background-end,
-@tree@ .tabbrowser-tab[selected] .tab-background-start,
-@tree@ .tabbrowser-tab[selected] .tab-background-middle,
-@tree@ .tabbrowser-tab[selected] .tab-background-end {
+@tree@ .tabbrowser-tab[visuallyselected] .tab-background-start,
+@tree@ .tabbrowser-tab[visuallyselected] .tab-background-middle,
+@tree@ .tabbrowser-tab[visuallyselected] .tab-background-end {
   display: none;
 }
 
-@treeDefault@ .tabbrowser-tab[selected] {
+@treeDefault@ .tabbrowser-tab[visuallyselected] {
   border-radius: 0;
   background: Highlight;
 }
 
-@treeDefault@[darkvariant] .tabbrowser-tab[selected] {
+@treeDefault@[darkvariant] .tabbrowser-tab[visuallyselected] {
   background: #215d9c;
 }
 
-@treeDefault@ .tabbrowser-tab[selected] > .tab-stack {
+@treeDefault@ .tabbrowser-tab[visuallyselected] > .tab-stack {
   color: HighlightText;
 }
 
 /* ====== Pinned Tabs ====== */
 
-@treeDefault@ .tabbrowser-tab[pinned] .tab-icon-image {
-  width: 18px;
-  height: 18px;
-  margin-left: -3px;
-}
-
 @treeDefault@ .tabbrowser-tab[pinned] {
   padding-bottom: 30px;
   padding-right: 30px;
+  min-width: 34px;
+}
+
+@treeDefault@ .tabbrowser-tab[pinned] .tab-stack {
+  margin: 0 4px;
 }
 
 @treeDefault@ .tabbrowser-tab[pinned] .tab-content {
-  padding-left: 0;
-  margin-left: 11px;
+  margin: 0 4px !important;
+}
+
+@treeDefault@ .tabbrowser-tab[pinned] .tab-icon-image {
+  width: 18px;
+  height: 18px;
+  margin: 0 4px !important;
 }
 
 /* ====== Expander Icon ====== */
@@ -248,20 +247,24 @@ tabbrowser[treestyletab-tabbar-position="right"] .treestyletab-splitter[orient="
 }
 
 /* Selected or Dark theme*/
-@treeDefault@@modernBlack@ .tabbrowser-tab[selected] .treestyletab-twisty,
+@treeDefault@@modernBlack@ .tabbrowser-tab[visuallyselected] .treestyletab-twisty,
 @treeDefault@@modernBlack@[darkvariant] .treestyletab-twisty {
   list-style-image: url("chrome://symbolic-icons/skin/extensions/twisty-adwaita-white-l.png") !important;
 }
-@treeDefault@@modernBlack@[treestyletab-tab-contents-inverted] .tabbrowser-tab[selected] .treestyletab-twisty,
+@treeDefault@@modernBlack@[treestyletab-tab-contents-inverted] .tabbrowser-tab[visuallyselected] .treestyletab-twisty,
 @treeDefault@@modernBlack@[darkvariant][treestyletab-tab-contents-inverted] .treestyletab-twisty {
   list-style-image: url("chrome://symbolic-icons/skin/extensions/twisty-adwaita-white-r.png") !important;
 }
 
 /* ====== Tab Notification Bubble ====== */
 
-.tab-icon-overlay {
+@treeDefault@ .tab-icon-overlay {
   margin-top: -10px !important;
-  -moz-margin-start: -12px !important;
-  -moz-margin-end: -4px !important;
+  -moz-margin-start: -16px !important;
+  -moz-margin-end: 0 !important;
+}
+@treeDefault@[treestyletab-tab-contents-inverted] .tab-icon-overlay {
+  -moz-margin-start: -8px !important;
+  -moz-margin-end: -8px !important;
 }