fix drop marker in sidebar style

jar-chrome.manifest

@@ -49,6 +49,9 @@ override chrome://treestyletab/skin/metal/platform.css	chrome://treestyletab/ski
 override chrome://treestyletab/skin/metal/tab.css	chrome://treestyletab/skin/metal/tab-legacy.css
 override chrome://treestyletab/skin/metal/tab.css	chrome://treestyletab/skin/metal/tab-base.css	appversion>=12.0a1
 
+override chrome://treestyletab/skin/sidebar/sidebar.css	chrome://treestyletab/skin/sidebar/sidebar-legacy.css
+override chrome://treestyletab/skin/sidebar/sidebar.css	chrome://treestyletab/skin/sidebar/sidebar-base.css	appversion>=12.0a1
+
 override chrome://treestyletab/skin/platform-config.css	chrome://treestyletab/skin/dummy.css	os=Darwin
 override chrome://treestyletab/skin/platform-config.css	chrome://treestyletab/skin/Linux-config.css	os=Linux
 override chrome://treestyletab/skin/platform-config.css	chrome://treestyletab/skin/dummy.css	os=WINNT

modules/themeManager.js

@@ -95,7 +95,7 @@ TreeStyleTabThemeManager.prototype = {
 				break;
 
 			case 'sidebar':
-				styles.push(BASE+'sidebar/base.css');
+				styles.push(BASE+'sidebar/sidebar.css');
 				styles.push(BASE+'sidebar/aero.css');
 				styles.push(BASE+'platform-styled.css');
 				break;

omnixpi-chrome.manifest

@@ -49,6 +49,9 @@ override chrome://treestyletab/skin/metal/platform.css	chrome://treestyletab/ski
 override chrome://treestyletab/skin/metal/tab.css	chrome://treestyletab/skin/metal/tab-legacy.css
 override chrome://treestyletab/skin/metal/tab.css	chrome://treestyletab/skin/metal/tab-base.css	appversion>=12.0a1
 
+override chrome://treestyletab/skin/sidebar/sidebar.css	chrome://treestyletab/skin/sidebar/sidebar-legacy.css
+override chrome://treestyletab/skin/sidebar/sidebar.css	chrome://treestyletab/skin/sidebar/sidebar-base.css	appversion>=12.0a1
+
 override chrome://treestyletab/skin/platform-config.css	chrome://treestyletab/skin/dummy.css	os=Darwin
 override chrome://treestyletab/skin/platform-config.css	chrome://treestyletab/skin/Linux-config.css	os=Linux
 override chrome://treestyletab/skin/platform-config.css	chrome://treestyletab/skin/dummy.css	os=WINNT

skin/classic/treestyletab/sidebar/sidebar-base.css

@@ -97,7 +97,7 @@ tabbrowser[treestyletab-mode="vertical"]
 	-moz-border-radius-bottomright : 0 !important;
 	-moz-box-align: stretch !important;
 	margin: 0 !important;
-	padding: 0 3px 2px 10px !important;
+	padding: 1px 3px 2px 10px !important;
 	height: 21px !important;     /* height including border! */
 	text-align: left !important;
 	border: none;
@@ -263,65 +263,37 @@ tabbrowser[treestyletab-mode="vertical"]
 }
 
 /* Round blue rectangle around tabs that are dropping targets. */
-.tabbrowser-tabs[treestyletab-mode="vertical"]
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
-  .tabbrowser-tab[treestyletab-drop-position="self"]:not([selected="true"]) {
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="self"]:not([selected="true"]) {
 	border: 2px solid #577bf3 !important; /* not OSX's colour but Firefox's */
 	background: #d0def5 !important;
 	-moz-border-radius: 8px !important;
+	padding: 0 1px 0 8px !important;
 }
 
 /* White-blue-white separator for drop indicator. */
-.tabbrowser-tabs[treestyletab-mode="vertical"]
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
-  .tabbrowser-tab[treestyletab-drop-position="before"][selected="true"],
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"][selected="true"],
-.tabbrowser-tabs[treestyletab-mode="vertical"]
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
-  .tabbrowser-tab[treestyletab-drop-position="before"][selected="true"]:hover,
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"][selected="true"]:hover,
-.tabbrowser-tabs[treestyletab-mode="vertical"]
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
-  .tabbrowser-tab[treestyletab-drop-position="before"]:not([selected="true"]),
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"]:not([selected="true"]),
-.tabbrowser-tabs[treestyletab-mode="vertical"]
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
-  .tabbrowser-tab[treestyletab-drop-position="before"]:not([selected="true"]):hover {
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"]:not([selected="true"]):hover {
-	border-top: 4px solid red !important;
+	-moz-border-image: url("dropmarker.png") 12 0 0 11 fill / 12px 0 0 11px !important;
-	-moz-border-top-colors: #ffffff #577bf3 #577bf3 #ffffff !important;
+	-moz-border-image-outset: 6px 0 0 0 !important;
 }
 
-.tabbrowser-tabs[treestyletab-mode="vertical"]
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
-  .tabbrowser-tab[treestyletab-drop-position="after"][selected="true"],
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"][selected="true"],
-.tabbrowser-tabs[treestyletab-mode="vertical"]
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
-  .tabbrowser-tab[treestyletab-drop-position="after"][selected="true"]:hover,
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"][selected="true"]:hover,
-.tabbrowser-tabs[treestyletab-mode="vertical"]
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
-  .tabbrowser-tab[treestyletab-drop-position="after"]:not([selected="true"]),
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"]:not([selected="true"]),
-.tabbrowser-tabs[treestyletab-mode="vertical"]
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
-  .tabbrowser-tab[treestyletab-drop-position="after"]:not([selected="true"]):hover {
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"]:not([selected="true"]):hover {
-	border-bottom: 4px solid #577bf3 !important;
+	-moz-border-image: url("dropmarker.png") 0 0 12 11 fill / 0 0 12px 11px !important;
-	-moz-border-bottom-colors: #ffffff #577bf3 #577bf3 #ffffff !important;
+	-moz-border-image-outset: 0 0 6px 0 !important;
-}
-
-/* Let's hack in the little round end of the drop indicator using the
-   drop marker image. */
-.tabbrowser-tabs[treestyletab-mode="vertical"]
-  .tabbrowser-tab[treestyletab-drop-position="before"]
-  .treestyletab-drop-marker,
-.tabbrowser-tabs[treestyletab-mode="vertical"]
-  .tabbrowser-tab[treestyletab-drop-position="after"]
-  .treestyletab-drop-marker {
-	list-style-image: url("dropmarker.png");
-}
-.tabbrowser-tabs[treestyletab-mode="vertical"]
-  .tabbrowser-tab[treestyletab-drop-position="before"]
-  .treestyletab-drop-marker-container {
-	margin: -11px 22px 11px -22px;
-}
-.tabbrowser-tabs[treestyletab-mode="vertical"]
-  .tabbrowser-tab[treestyletab-drop-position="after"]
-  .treestyletab-drop-marker-container {
-	margin: 12px 22px -12px -22px;
-}
-.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-allow-subtree-collapse="true"]
-  .tabbrowser-tab[treestyletab-drop-position="before"]
-  .treestyletab-drop-marker-container,
-.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-allow-subtree-collapse="true"]
-  .tabbrowser-tab[treestyletab-drop-position="after"]
-  .treestyletab-drop-marker-container {
-	margin-left: -30px;
 }
 
 

skin/classic/treestyletab/sidebar/sidebar-legacy.css

@@ -0,0 +1,90 @@
+@import url("sidebar-base.css");
+
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"][selected="true"],
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"][selected="true"]:hover,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"]:not([selected="true"]),
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"]:not([selected="true"]):hover,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"][selected="true"],
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"][selected="true"]:hover,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"]:not([selected="true"]),
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"]:not([selected="true"]):hover {
+	border: 0 none !important;
+}
+
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"][selected="true"]
+  .tab-stack,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"][selected="true"]:hover
+  .tab-stack,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"]:not([selected="true"])
+  .tab-stack,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"]:not([selected="true"]):hover
+  .tab-stack {
+	position: relative !important;
+	-moz-border-image: url("dropmarker.png") 12 0 0 11 / 12px 0 0 11px !important;
+	margin-top: -7px !important;
+	margin-left: -11px !important;
+}
+
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"][selected="true"]
+  .tab-content,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"][selected="true"]:hover
+  .tab-content,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"]:not([selected="true"])
+  .tab-content,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"]:not([selected="true"]):hover
+  .tab-content {
+	position: relative !important;
+	margin-top: -4px !important;
+}
+
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"][selected="true"]
+  .tab-stack,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"][selected="true"]:hover
+  .tab-stack,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"]:not([selected="true"])
+  .tab-stack,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"]:not([selected="true"]):hover
+  .tab-stack {
+	position: relative !important;
+	-moz-border-image: url("dropmarker.png") 0 0 12 11 / 0 0 12px 11px !important;
+	margin-bottom: -7px !important;
+	margin-left: -11px !important;
+}
+
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"][selected="true"]
+  .tab-content,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"][selected="true"]:hover
+  .tab-content,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"]:not([selected="true"])
+  .tab-content,
+.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
+  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"]:not([selected="true"]):hover
+  .tab-content {
+	position: relative !important;
+	margin-bottom: -4px !important;
+}