Support border-radius and other CSS3 properties (without -moz-prefix)

content/treestyletab/treestyletab-tmp.css

@@ -21,6 +21,7 @@
 
 :root[treestyletab-enable-compatibility-tmp="true"]
   tabbrowser[treestyletab-mode="vertical"] tabs[flowing] > * .tabs-frame {
+	box-flex: 1 !important;
 	-moz-box-flex: 1 !important;
 }
 

content/treestyletab/treestyletab.css

@@ -60,6 +60,7 @@
 	max-width: 20px;
 	min-width: 20px;
 	width: 20px;
+	box-flex: 0;
 	-moz-box-flex: 0;
 	mask: url("res/tabEffects.svg#fadein-mask");
 }
@@ -136,6 +137,8 @@ tabbrowser[treestyletab-tabbar-autohide-mode="1"][treestyletab-tabbar-autohide="
 
 
 #treestyletab-autohide-content-area-screen {
+	appearance: none;
+	-moz-appearance: none;
 	/**
 	 * Don't make this panel completely transparent, because
 	 * mousemove event never fire on 100% transparent panel.
@@ -144,7 +147,6 @@ tabbrowser[treestyletab-tabbar-autohide-mode="1"][treestyletab-tabbar-autohide="
 	line-height: 0;
 	margin: 0;
 	padding: 0;
-	-moz-appearance: none;
 	-moz-border-bottom-colors: none;
 	-moz-border-left-colors: none;
 	-moz-border-right-colors: none;
@@ -163,7 +165,9 @@ tabbrowser[treestyletab-tabbar-autohide-mode="1"][treestyletab-tabbar-autohide="
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .tabbrowser-arrowscrollbox
   .scrollbox-innerbox {
+	box-flex: 1 !important;
 	-moz-box-flex: 1 !important;
+	box-pack: start !important;
 	-moz-box-pack: start !important;
 }
 
@@ -177,6 +181,7 @@ toolbar.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
   > toolbaritem,
 toolbar.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
   > .treestyletab-toolbar-inner-box > toolbaritem {
+	box-flex: 0 !important;
 	-moz-box-flex: 0 !important;
 }
 
@@ -187,6 +192,7 @@ toolbar.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
 
 /* workaround for https://github.com/piroor/treestyletab/issues/100 */
 .treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] .textbox-input-box {
+	box-align: stretch;
 	-moz-box-align: stretch;
 }
 
@@ -344,9 +350,10 @@ toolbar.treestyletab-tabbar-toolbar-ready:not([nowindowdrag="true"]),
 
 .treestyletab-tabbar-toolbar:not([treestyletab-tabbar-position="top"]),
 .treestyletab-tabbar-toolbar[treestyletab-tabbar-position="top"]:not([treestyletab-tabbar-fixed="true"]) {
+	appearance: none !important;
+	-moz-appearance: none !important;
 	line-height: 0 !important; /* to avoid an useless space above the tab bar */
 	position: fixed !important;
-	-moz-appearance: none !important;
 }
 .treestyletab-tabbar-toolbar:not([treestyletab-tabbar-position="top"])
   .tabbrowser-tabs,

modules/utils.js

@@ -601,6 +601,7 @@ var TreeStyleTabUtils = {
 		  .tabbrowser-arrowscrollbox
 		  > scrollbox
 		  > scrollbar[orient="vertical"] {
+			appearance: none;
 			-moz-appearance: none;
 			background: ThreeDFace;
 			border: 1px solid ThreeDShadow;

skin/classic/treestyletab/Linux-base.css

@@ -2,8 +2,9 @@
 
 /* splitter for floating & autohide tab bar */
 .treestyletab-tabbar-toolbar .treestyletab-splitter {
-	width: 6px;
+	appearance: none;
 	-moz-appearance: none;
+	width: 6px;
 }
 
 #treestyletab-autohide-content-area-screen {

skin/classic/treestyletab/Linux-styled.css

@@ -7,9 +7,10 @@
   .tabbrowser-tab:not([selected="true"]),
 .tabbrowser-tabs[treestyletab-tabbar-position="top"][treestyletab-tabs-indented="true"]
   .tabbrowser-tab[selected="true"] {
-	padding-top: 0;
+	border-radius: 0 0 0 0;
-	padding-bottom: 0;
-	margin-bottom: 0;
-	height: 1.5em;
 	-moz-border-radius: 0 0 0 0;
+	height: 1.5em;
+	margin-bottom: 0;
+	padding-bottom: 0;
+	padding-top: 0;
 }

skin/classic/treestyletab/WINNT-styled.css

@@ -8,11 +8,12 @@
   .tabbrowser-tab:hover:not([selected="true"]),
 .tabbrowser-tabs[treestyletab-tabbar-position="top"][treestyletab-tabs-indented="true"]
   .tabbrowser-tab:hover[selected="true"] {
-	padding-top: 0;
+	border-radius: 0 0 0 0;
-	padding-bottom: 0;
-	margin-bottom: 3px;
-	height: auto;
 	-moz-border-radius: 0 0 0 0;
 	border-top-width: 1px;
+	height: auto;
+	margin-bottom: 3px;
+	padding-bottom: 0;
+	padding-top: 0;
 }
 

skin/classic/treestyletab/base.css

@@ -6,12 +6,14 @@
 .tabbrowser-tabs[treestyletab-mode="vertical"] .tabs-newtab-button,
 .treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] > toolbarbutton,
 .treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] > toolbarpaletteitem > toolbarbutton {
+	appearance: none !important;
 	-moz-appearance: none !important;
 	border: 0 none !important;
 	-moz-border-top-colors: none !important;
 	-moz-border-right-colors: none !important;
 	-moz-border-bottom-colors: none !important;
 	-moz-border-left-colors: none !important;
+	border-radius: 0;
 	-moz-border-radius: 0;
 	border-top: 1px solid ThreeDShadow !important;
 	background: ThreeDFace !important;
@@ -37,6 +39,7 @@
 
 /* Support customizable tab bar */
 .treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] > toolbarpaletteitem > toolbarbutton {
+	box-flex: 1;
 	-moz-box-flex: 1;
 }
 .treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] > *:not(toolbarpaletteitem) {
@@ -69,6 +72,7 @@
   .tabbrowser-arrowscrollbox .tabs-newtab-button {
 	border: 0 none !important;
 	border-bottom: 1px solid ThreeDShadow !important;
+	border-radius: 0 0 3px 3px;
 	-moz-border-radius: 0 0 3px 3px;
 }
 .tabbrowser-tabs[treestyletab-style~="vertigo"][treestyletab-mode="vertical"]

skin/classic/treestyletab/config.css

@@ -2,6 +2,7 @@
 
 radio.image .radio-label-box,
 radio.image label.radio-label {
+	box-align: center;
 	-moz-box-align: center;
 }
 

skin/classic/treestyletab/group/group.css

@@ -1,6 +1,7 @@
 :root {
-	background: -moz-dialog;
+	appearance: window;
 	-moz-appearance: window;
+	background: -moz-dialog;
 	margin: 0;
 	padding: 0;
 }
@@ -64,6 +65,7 @@
 	margin-top: 1em;
 	max-height: 80%;
 	overflow: auto;
+	box-flex: 1;
 	-moz-box-flex: 1;
 }
 

skin/classic/treestyletab/metal/aero.css

@@ -5,6 +5,7 @@
 tabbrowser[treestyletab-style~="aero"]:not([treestyletab-tabbar-position="top"]),
 :root[treestyletab-style~="aero"]:not([treestyletab-tabbar-position="top"]) #appcontent,
 :root[treestyletab-style~="aero"]:not([treestyletab-tabbar-position="top"]) #browser {
-	background: transparent !important;
+	appearance: none !important;
 	-moz-appearance: none !important;
+	background: transparent !important;
 }

skin/classic/treestyletab/metal/base.css

@@ -4,13 +4,14 @@
 
 .treestyletab-tabbar-toolbar:not([treestyletab-tabbar-position="top"]),
 .treestyletab-tabbar-toolbar[treestyletab-tabbar-position="top"]:not([treestyletab-tabbar-fixed="true"]) {
+	appearance: none !important;
+	-moz-appearance: none !important;
 	background: transparent !important;
 	border: 0 none !important;
+	box-shadow: none !important;
+	-moz-box-shadow: none !important;
 	margin: 0 !important;
 	padding: 0 !important;
-	-moz-appearance: none !important;
-	-moz-box-shadow: none !important;
-	box-shadow: none !important;
 }
 
 .tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
@@ -41,9 +42,10 @@
 }
 
 .tabbrowser-tabs[treestyletab-mode="vertical"] {
+	appearance: none !important;
+	-moz-appearance: none !important;
 	background: transparent !important;
 	margin: 0;
-	-moz-appearance: none !important;
 }
 
 .tabbrowser-tabs[treestyletab-mode="vertical"]:not([overflow="true"])
@@ -70,10 +72,11 @@ tabbrowser[treestyletab-mode="vertical"]
   .treestyletab-splitter,
 .treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
   .treestyletab-splitter {
+	appearance: none !important;
+	-moz-appearance: none !important;
 	background: #b3b2b3 !important;
 	border: 0 solid #666666 !important;
 	min-width: 5px;
-	-moz-appearance: none !important;
 }
 tabbrowser[treestyletab-tabbar-position="left"]
   .treestyletab-splitter,
@@ -268,6 +271,7 @@ tabbrowser[treestyletab-tabbar-position="right"]
   .tabs-newtab-button {
 	background: #9a9a9a url("shadow-active-l.png") repeat-y top right !important;
 	margin-left: 6px !important;
+	border-radius: 6px 0 0 6px;
 	-moz-border-radius: 6px 0 0 6px;
 }
 .tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-tab-inverted="true"]

skin/classic/treestyletab/metal/tab-base.css

@@ -8,7 +8,11 @@
   .tabbrowser-tab[selected="true"],
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .tabbrowser-tab[selected="true"]:hover {
+	appearance: none !important;
+	-moz-appearance: none !important;
 	border: 2px solid transparent !important;
+	border-radius: 0 !important;
+	-moz-border-radius: 0 !important;
 	color: black !important;
 	height: auto !important;
 	max-height: none !important;
@@ -18,12 +22,10 @@
 	margin-bottom: -2px !important;
 	margin-left: 0;
 	padding: 0 !important;
-	-moz-appearance: none !important;
 	-moz-border-top-colors: transparent transparent !important;
 	-moz-border-right-colors: transparent transparent !important;
 	-moz-border-bottom-colors: transparent transparent !important;
 	-moz-border-left-colors: transparent transparent !important;
-	-moz-border-radius: 0 !important;
 }
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   :-moz-any(.tabbrowser-tab:not([pinned]),
@@ -74,10 +76,11 @@
 }
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .tab-content {
+	appearance: none !important;
+	-moz-appearance: none !important;
 	border: 10px solid transparent;
 	margin: 0 !important;
 	padding: 2px 5px 2px 10px;
-	-moz-appearance: none !important;
 }
 .tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-tab-inverted="true"]
   .tab-content {
@@ -175,8 +178,9 @@
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .tabbrowser-tab[pinned][selected="true"]:hover {
 	border: none !important;
-	padding: 0 !important;
+	border-radius: 0 !important;
 	-moz-border-radius: 0 !important;
+	padding: 0 !important;
 }
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .tabbrowser-tab[pinned]:not([titlechanged]):not(:hover),
@@ -211,9 +215,10 @@
   .tab-content[pinned][selected="true"] {
 	line-height: 1 !important;
 	border: 1px solid #666666 !important;
+	border-radius: 4px !important;
+	-moz-border-radius: 4px !important;
 	margin: 1px 0 0 1px !important;
 	padding: 2px 4px 2px 3px !important;
-	-moz-border-radius: 4px !important;
 }
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .tabbrowser-tab:not(:hover)

skin/classic/treestyletab/pseudo-tree.css

@@ -8,15 +8,18 @@
 }
 
 .treestyletab-pseudo-tree-row {
+	box-align: center;
 	-moz-box-align: center;
 }
 
 .treestyletab-pseudo-tree-row label.text-link {
+	box-crop: end;
 	-moz-box-crop: end;
 }
 
 .treestyletab-pseudo-tree-children {
 	margin-left: 1.5em;
+	box-align: stretch;
 	-moz-box-align: stretch;
 }
 

skin/classic/treestyletab/sidebar/aero.css

@@ -5,8 +5,9 @@
 tabbrowser[treestyletab-style~="aero"]:not([treestyletab-tabbar-position="top"]),
 :root[treestyletab-style~="aero"]:not([treestyletab-tabbar-position="top"]) #appcontent,
 :root[treestyletab-style~="aero"]:not([treestyletab-tabbar-position="top"]) #browser {
-	background: transparent !important;
+	appearance: none !important;
 	-moz-appearance: none !important;
+	background: transparent !important;
 }
 .tabbrowser-strip[treestyletab-style~="aero"][treestyletab-mode="vertical"],
 .treestyletab-tabbar-toolbar[treestyletab-style~="aero"][treestyletab-mode="vertical"] {

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

@@ -86,22 +86,22 @@ tabbrowser[treestyletab-mode="vertical"]
 /* Style tabs themselves.  Get rid of most of the initial XUL styling */
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .tabbrowser-tab {
+	appearance: none !important;
 	-moz-appearance: none !important;
+	border: none;
+	border-radius: 0 !important;
+	-moz-border-radius: 0 !important;
+	border-top: 1px solid transparent !important;
+	box-align: stretch !important;
+	-moz-box-align: stretch !important;
+	height: 21px !important;     /* height including border! */
+	margin: 0 !important;
+	padding: 1px 3px 2px 10px !important;
+	text-align: left !important;
 	-moz-border-top-colors: none !important;
 	-moz-border-bottom-colors: none !important;
 	-moz-border-right-colors: none !important;
 	-moz-border-left-colors: none !important;
-	-moz-border-radius-topleft : 0 !important;
-	-moz-border-radius-topright : 0 !important;
-	-moz-border-radius-bottomleft : 0 !important;
-	-moz-border-radius-bottomright : 0 !important;
-	-moz-box-align: stretch !important;
-	margin: 0 !important;
-	padding: 1px 3px 2px 10px !important;
-	height: 21px !important;     /* height including border! */
-	text-align: left !important;
-	border: none;
-	border-top: 1px solid transparent !important;
 }
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .tabbrowser-tab:not([pinned]),
@@ -203,9 +203,10 @@ tabbrowser[treestyletab-mode="vertical"]
 /* Make the tab counter look like the bubbles in Mail.app et.al. */
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .treestyletab-counter-container {
-	padding: 0 6px !important;
 	background-color: #91a0c0 !important;
+	border-radius: 8px !important;
 	-moz-border-radius: 8px !important;
+	padding: 0 6px !important;
 }
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .treestyletab-counter {
@@ -265,8 +266,9 @@ tabbrowser[treestyletab-mode="vertical"]
 /* Round blue rectangle around tabs that are dropping targets. */
 .tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
   .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;
+	border: 2px solid #577bf3 !important; /* not OSX's colour but Firefox's */
+	border-radius: 8px !important;
 	-moz-border-radius: 8px !important;
 	padding: 0 1px 0 8px !important;
 }
@@ -302,13 +304,14 @@ tabbrowser[treestyletab-mode="vertical"]
 
 .treestyletab-tabbar-toolbar:not([treestyletab-tabbar-position="top"]),
 .treestyletab-tabbar-toolbar[treestyletab-tabbar-position="top"]:not([treestyletab-tabbar-fixed="true"]) {
+	appearance: none !important;
+	-moz-appearance: none !important;
 	background: transparent !important;
 	border: 0 none !important;
+	box-shadow: none !important;
+	-moz-box-shadow: none !important;
 	margin: 0 !important;
 	padding: 0 !important;
-	-moz-appearance: none !important;
-	-moz-box-shadow: none !important;
-	box-shadow: none !important;
 }
 
 .tabbrowser-tabs[treestyletab-mode="vertical"]
@@ -330,6 +333,7 @@ tabbrowser[treestyletab-mode="vertical"]
 .treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
   > toolbarpaletteitem
   > toolbarbutton:hover {
+	appearance: none !important;
 	-moz-appearance: none !important;
 	background: transparent !important;
 	border: 0 none !important;
@@ -365,14 +369,16 @@ tabbrowser[treestyletab-mode="vertical"]
 	-moz-image-region: auto !important;
 }
 .tabbrowser-tabs[treestyletab-mode="vertical"] {
+	appearance: none !important;
+	-moz-appearance: none !important;
 	background: transparent !important;
 	margin: 0;
-	-moz-appearance: none !important;
 }
 
 /* for Linux (Gnomestrip) */
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .tab-close-button {
+	appearance: none !important;
 	-moz-appearance: none !important;
 }
 

skin/classic/treestyletab/square/base.css

@@ -4,14 +4,16 @@
 
 .tabbrowser-tabs:not([treestyletab-tabbar-position="top"]),
 .treestyletab-tabbar-toolbar:not([treestyletab-tabbar-position="top"]) {
+	appearance: none;
+	-moz-appearance: none;
 	background: transparent !important;
 	margin: 0 !important;
 	padding: 0 !important;
-	-moz-appearance: none;
 }
 .tabbrowser-strip[treestyletab-style~="border"]:not([treestyletab-tabbar-position="top"]) {
-	background: darkgray !important;
+	appearance: none;
 	-moz-appearance: none;
+	background: darkgray !important;
 }
 
 .tabbrowser-strip[treestyletab-mode="vertical"],
@@ -32,8 +34,8 @@
 	border: 0 none !important;
 	margin: 0 !important;
 	padding: 0 !important;
-	-moz-box-shadow: none !important;
 	box-shadow: none !important;
+	-moz-box-shadow: none !important;
 }
 
 .tabbrowser-strip[treestyletab-tabbar-position="left"][treestyletab-tabbar-fixed="true"],
@@ -60,6 +62,7 @@
   .tabbrowser-tab,
 .tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
   .tabbrowser-tab:not([selected="true"]) {
+	appearance: none !important;
 	-moz-appearance: none !important;
 	min-height: 2em;
 	margin: 0 !important;
@@ -72,11 +75,10 @@
 	-moz-border-top-colors: transparent transparent !important;
 	border-bottom: 2px solid !important;
 	-moz-border-bottom-colors: ThreeDShadow transparent !important;
-	-moz-border-radius-topleft : 0 !important;
+	border-radius: 0 !important;
-	-moz-border-radius-topright : 0 !important;
+	-moz-border-radius: 0 !important;
-	-moz-border-radius-bottomleft : 0 !important;
-	-moz-border-radius-bottomright : 0 !important;
 	-moz-border-image: none !important;
+	box-align: stretch !important;
 	-moz-box-align: stretch !important;
 }
 .tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
@@ -210,8 +212,9 @@
 /* Mac OS X */
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .tabbrowser-tab {
-	text-align: start !important; 
+	box-pack: start !important;
 	-moz-box-pack: start !important;
+	text-align: start !important; 
 }
 
 
@@ -241,6 +244,7 @@
 tabbrowser[treestyletab-style~="aero"]:not([treestyletab-tabbar-position="top"]),
 :root[treestyletab-style~="aero"]:not([treestyletab-tabbar-position="top"]) #appcontent,
 :root[treestyletab-style~="aero"]:not([treestyletab-tabbar-position="top"]) #browser {
-	background: transparent !important;
+	appearance: none !important;
 	-moz-appearance: none !important;
+	background: transparent !important;
 }

skin/classic/treestyletab/square/dropshadow.css

@@ -5,14 +5,14 @@
 
 .tabbrowser-tabs[treestyletab-mode="vertical"]
   .tabbrowser-tab:not([pinned="true"]) {
-	-moz-box-shadow: -0.3em 0.3em 0.2em rgba(0, 0, 0, 0.15);
 	box-shadow: -0.3em 0.3em 0.2em rgba(0, 0, 0, 0.15);
+	-moz-box-shadow: -0.3em 0.3em 0.2em rgba(0, 0, 0, 0.15);
 }
 
 .tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-tab-inverted="true"]
   .tabbrowser-tab:not([pinned="true"]) {
-	-moz-box-shadow: 0.3em 0.3em 0.2em rgba(0, 0, 0, 0.15);
 	box-shadow: 0.3em 0.3em 0.2em rgba(0, 0, 0, 0.15);
+	-moz-box-shadow: 0.3em 0.3em 0.2em rgba(0, 0, 0, 0.15);
 }
 
 .tabbrowser-tabs[treestyletab-mode="vertical"]
@@ -23,8 +23,8 @@
   .tabbrowser-tabs[treestyletab-mode="vertical"]:not([overflow="true"])
   .tabbrowser-arrowscrollbox
   .tabs-newtab-button {
-	-moz-box-shadow: 0 0.3em 0.2em rgba(0, 0, 0, 0.15);
 	box-shadow: 0 0.3em 0.2em rgba(0, 0, 0, 0.15);
+	-moz-box-shadow: 0 0.3em 0.2em rgba(0, 0, 0, 0.15);
 }
 
 
@@ -33,8 +33,8 @@
 .tabbrowser-tabs[treestyletab-mode="vertical"][overflow="true"]
   .tabbrowser-arrowscrollbox
   .scrollbox-innerbox {
-	-moz-box-shadow: inset -0.2em 0.2em 0.3em rgba(0, 0, 0, 0.15) !important;
 	box-shadow: inset -0.2em 0.2em 0.3em rgba(0, 0, 0, 0.15) !important;
+	-moz-box-shadow: inset -0.2em 0.2em 0.3em rgba(0, 0, 0, 0.15) !important;
 }
 
 .tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-tab-inverted="true"]:not([overflow="true"])
@@ -42,8 +42,8 @@
 .tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-tab-inverted="true"][overflow="true"]
   .tabbrowser-arrowscrollbox
   .scrollbox-innerbox {
-	-moz-box-shadow: inset 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.15) !important;
 	box-shadow: inset 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.15) !important;
+	-moz-box-shadow: inset 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.15) !important;
 }
 
 

skin/classic/treestyletab/tmp.css

@@ -2,6 +2,7 @@
 
 :root[treestyletab-enable-compatibility-tmp="true"]
   .tabbrowser-tabs[treestyletab-mode="vertical"] .tabs-closebutton-topbox > .tabs-closebutton {
+	appearance: none !important;
 	-moz-appearance: none !important;
 	border: 0 none !important;
 	-moz-border-top-colors: none !important;
@@ -29,9 +30,13 @@
 
 :root[treestyletab-enable-compatibility-tmp="true"]
   .tabbrowser-tabs[treestyletab-mode="vertical"] .tabs-newtab-topbox > .tabs-newtab-button {
+	box-flex: 1;
 	-moz-box-flex: 1;
+	box-align: center;
 	-moz-box-align: center;
+	box-pack: center;
 	-moz-box-pack: center;
+	box-orient: vertical;
 	-moz-box-orient: vertical;
 }
 

skin/classic/treestyletab/twisty/twisty.css

@@ -12,8 +12,11 @@
 	max-width: 16px;
 	min-height: 16px;
 	min-width: 16px;
+	box-pack: start;
 	-moz-box-pack: start;
+	box-align: center;
 	-moz-box-align: center;
+	box-flex: 1;
 	-moz-box-flex: 1;
 }
 

skin/classic/treestyletab/ui.css

@@ -3,7 +3,9 @@
 /* tree UI */
 
 .treestyletab-counter-container {
+	box-align: center;
 	-moz-box-align: center;
+	box-pack: end;
 	-moz-box-pack: end;
 }
 
@@ -163,6 +165,7 @@
 
 
 tabbrowser[treestyletab-drop-position] {
+	appearance: none !important;
 	-moz-appearance: none !important;
 	border: 2px solid transparent !important;
 	-moz-border-top-colors: none !important;
@@ -269,9 +272,10 @@ tabbrowser[treestyletab-tabbar-position="bottom"]
 /* toolbar customization */
 
 .treestyletab-tabbar-toolbar-ready-popup {
+	appearance: tooltip;
+	-moz-appearance: tooltip;
 	max-width: 15em;
 	opacity: 0.85;
-	-moz-appearance: tooltip;
 }
 
 .treestyletab-tabbar-toolbar-ready {
@@ -306,15 +310,16 @@ tabbrowser[treestyletab-tabbar-position="bottom"]
   > .scrollbutton-down[treestyletab-notifybgtab-phase] {
 	background: -moz-linear-gradient(-90deg, rgba(255,255,255,0), Highlight);
 	border: 0 none;
+	box-shadow: none;
+	-moz-box-shadow: none;
 	height: 2em;
 	margin-top: -2em;
 	visibility: visible;
 	opacity: 0;
 	pointer-events: none;
-	-moz-box-shadow: none;
+	transition: 1s opacity ease-out;
-	     box-shadow: none;
+	transition: 1s opacity ease-out;
-	-moz-transition: 1s opacity ease-out;
+	user-focus: ignore;
-	     transition: 1s opacity ease-out;
 	-moz-user-focus: ignore;
 }