-moz-border-imageの実験

git-svn-id: http://www.cozmixng.org/repos/piro/treestyletab/trunk@3866 599a83e7-65a4-db11-8015-0010dcdd6dc2

chrome.manifest

@@ -18,3 +18,4 @@ locale	treestyletab	ru-RU	jar:chrome/treestyletab.jar!/locale/ru-RU/treestyletab
 skin	treestyletab	classic/1.0	jar:chrome/treestyletab.jar!/skin/classic/treestyletab/
 
 style chrome://browser/content/browser.xul chrome://treestyletab/skin/treestyletab-3.1.css appversion>=3.1b3pre
+#override chrome://treestyletab/skin/metal/tab.css	chrome://treestyletab/skin/metal/tab-3.5.css	appversion>=3.5b4pre

install.rdf

@@ -149,7 +149,7 @@
     <em:targetApplication>
       <RDF:Description em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"
                        em:minVersion="2.0"
-                       em:maxVersion="3.1b4pre" />
+                       em:maxVersion="3.5b4pre" />
     </em:targetApplication>
   </RDF:Description>
 </RDF:RDF>

skin/classic/treestyletab/metal.css

@@ -1,6 +1,22 @@
+@import url("chrome://treestyletab/skin/metal/tab.css");
+
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabs-bottom,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabs-left,
+tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="bottom"]
+  .tabs-bottom,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tab-text-shadow, /* Mac OS X */
+tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="bottom"]
+  .tab-text-shadow /* Mac OS X */ {
+	display: none !important;
+}
+
+
 tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
   .tabbrowser-tabs * {
 	width: 100% !important;
@@ -84,253 +100,3 @@ tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
 	text-align: center !important;
 }
 
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab:hover,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"],
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"]:hover {
-	background: transparent none !important;
-	border: 2px solid transparent !important;
-	color: black !important;
-	height: 30px !important;
-	margin-top: -2px !important;
-	margin-right: 0;
-	margin-bottom: -2px !important;
-	margin-left: 0;
-	padding: 0 !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[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
-  .tabbrowser-tab:not([treestyletab-drop-position]),
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
-  .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) {
-	border-right: 0 none !important;
-	-moz-border-right-colors: none !important;
-}
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab:not([treestyletab-drop-position]),
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) {
-	border-left: 0 none !important;
-	-moz-border-left-colors: none !important;
-}
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
-  .tabbrowser-tab:not([treestyletab-drop-position]) .tab-image-right,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
-  .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) .tab-image-right,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab:not([treestyletab-drop-position]) .tab-image-left,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) .tab-image-left {
-	width: 10px !important;
-}
-
-
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab:hover .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab .tab-close-button,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab:hover .tab-close-button {
-	background: url("metal/tab-active-middle.png") repeat-x top left !important;
-	margin: 0 !important;
-}
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab .tab-image-middle,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab:hover .tab-image-middle,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab .tab-close-button,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab:hover .tab-close-button {
-	background-image: url("metal/tab-inactive-middle.png") !important;
-}
-
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab .tab-image-left,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab:hover .tab-image-left {
-	background: url("metal/tab-active-left-l.png") no-repeat top left !important;
-	width: 10px !important;
-}
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab .tab-image-left,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab:hover .tab-image-left {
-	background-image: url("metal/tab-inactive-left-l.png") !important;
-}
-
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab .tab-image-right,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab:hover .tab-image-right {
-	background: url("metal/tab-active-right-l.png") no-repeat top right !important;
-	width: 8px !important;
-}
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab .tab-image-right,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab:hover .tab-image-right {
-	background-image: url("metal/tab-inactive-right-l.png")  !important;
-}
-
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"] .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"]:hover .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"] .tab-close-button,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"]:hover .tab-close-button,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"] .tab-image-right,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"]:hover .tab-image-right {
-	background: url("metal/tab-active-middle-selected.png") repeat-x top left !important;
-}
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"] .tab-image-middle,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"]:hover .tab-image-middle,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"] .tab-close-button,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"]:hover .tab-close-button,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"] .tab-image-right,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"]:hover .tab-image-right {
-	background-image: url("metal/tab-inactive-middle-selected.png") !important;
-}
-
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"] .tab-image-left,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"]:hover .tab-image-left {
-	background: url("metal/tab-active-left-selected-l.png") no-repeat top left !important;
-}
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"] .tab-image-left,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabbrowser-tab[selected="true"]:hover .tab-image-left {
-	background-image: url("metal/tab-inactive-left-selected-l.png") !important;
-}
-
-
-
-
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab:hover .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab .tab-close-button,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab:hover .tab-close-button {
-	background: url("metal/tab-active-middle.png") repeat-x top left !important;
-}
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab .tab-image-middle,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab:hover .tab-image-middle,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab .tab-close-button,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab:hover .tab-close-button {
-	background-image: url("metal/tab-inactive-middle.png") !important;
-}
-
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab .tab-image-left,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab:hover .tab-image-left {
-	background: url("metal/tab-active-left-r.png") no-repeat top left !important;
-	width: 8px !important;
-}
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab .tab-image-left,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab:hover .tab-image-left {
-	background-image: url("metal/tab-inactive-left-r.png")  !important;
-}
-
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab .tab-image-right,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab:hover .tab-image-right {
-	background: url("metal/tab-active-right-r.png") no-repeat top right !important;
-	width: 10px !important;
-}
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab .tab-image-right,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab:hover .tab-image-right {
-	background-image: url("metal/tab-inactive-right-r.png") !important;
-}
-
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"] .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"]:hover .tab-image-middle,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"] .tab-close-button,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"]:hover .tab-close-button,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"] .tab-image-left,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"]:hover .tab-image-left {
-	background: url("metal/tab-active-middle-selected.png") repeat-x top left !important;
-}
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"] .tab-image-middle,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"]:hover .tab-image-middle,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"] .tab-close-button,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"]:hover .tab-close-button,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"] .tab-image-left,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"]:hover .tab-image-left {
-	background-image: url("metal/tab-inactive-middle-selected.png") !important;
-}
-
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"] .tab-image-right,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"]:hover .tab-image-right {
-	background: url("metal/tab-active-right-selected-r.png") no-repeat top right !important;
-}
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"] .tab-image-right,
-:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
-  .tabbrowser-tab[selected="true"]:hover .tab-image-right {
-	background-image: url("metal/tab-inactive-right-selected-r.png") !important;
-}
-
-
-
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabs-bottom,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tabs-left,
-tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="bottom"]
-  .tabs-bottom,
-tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
-  .tab-text-shadow, /* Mac OS X */
-tabbrowser[treestyletab-style="metal"][treestyletab-tabbar-position="bottom"]
-  .tab-text-shadow /* Mac OS X */ {
-	display: none !important;
-}

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

@@ -0,0 +1,96 @@
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"],
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover {
+	background: none transparent !important;
+	border: 2px solid transparent !important;
+	color: black !important;
+	height: auto !important;
+	min-height: 10px !important;
+	margin-top: 0 !important;
+	margin-right: 0;
+	margin-bottom: 0 !important;
+	margin-left: 0;
+	padding: 0 !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[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-left,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-right {
+	margin-top: -8px !important;
+	margin-bottom: -8px !important;
+}
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-close-button {
+	margin-top: -9px !important;
+	margin-bottom: -7px !important;
+}
+
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover {
+	-moz-border-image: url("fullsize-active-l.png") 10 10 10 10 / 10px !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover {
+	-moz-border-image: url("fullsize-inactive-l.png") 10 10 10 10 / 10px !important;
+}
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover {
+	-moz-border-image: url("fullsize-active-r.png") 10 10 10 10 / 10px !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover {
+	-moz-border-image: url("fullsize-inactive-r.png") 10 10 10 10 / 10px !important;
+}
+
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"],
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover {
+	-moz-border-image: url("fullsize-active-selected-l.png") 10 10 10 10 / 10px !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"],
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover {
+	-moz-border-image: url("fullsize-inactive-selected-l.png") 10 10 10 10 / 10px !important;
+}
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"],
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover {
+	-moz-border-image: url("fullsize-active-selected-r.png") 10 10 10 10 / 10px !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"],
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover {
+	-moz-border-image: url("fullsize-inactive-selected-r.png") 10 10 10 10 / 10px !important;
+}
+

skin/classic/treestyletab/metal/tab.css

@@ -0,0 +1,237 @@
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"],
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover {
+	background: transparent none !important;
+	border: 2px solid transparent !important;
+	color: black !important;
+	height: 30px !important;
+	margin-top: -2px !important;
+	margin-right: 0;
+	margin-bottom: -2px !important;
+	margin-left: 0;
+	padding: 0 !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[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
+  .tabbrowser-tab:not([treestyletab-drop-position]),
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
+  .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) {
+	border-right: 0 none !important;
+	-moz-border-right-colors: none !important;
+}
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:not([treestyletab-drop-position]),
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) {
+	border-left: 0 none !important;
+	-moz-border-left-colors: none !important;
+}
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
+  .tabbrowser-tab:not([treestyletab-drop-position]) .tab-image-right,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]:not([treestyletab-appearance-inverted="true"])
+  .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) .tab-image-right,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:not([treestyletab-drop-position]) .tab-image-left,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:not([treestyletab-drop-position]) .tab-image-left {
+	width: 10px !important;
+}
+
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-close-button,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-close-button {
+	background: url("tab-active-middle.png") repeat-x top left !important;
+	margin: 0 !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-close-button,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-close-button {
+	background-image: url("tab-inactive-middle.png") !important;
+}
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-left,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-image-left {
+	background: url("tab-active-left-l.png") no-repeat top left !important;
+	width: 10px !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-left,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-image-left {
+	background-image: url("tab-inactive-left-l.png") !important;
+}
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-right,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-image-right {
+	background: url("tab-active-right-l.png") no-repeat top right !important;
+	width: 8px !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab .tab-image-right,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab:hover .tab-image-right {
+	background-image: url("tab-inactive-right-l.png")  !important;
+}
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-close-button,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-close-button,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-image-right,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-right {
+	background: url("tab-active-middle-selected.png") repeat-x top left !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-close-button,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-close-button,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-image-right,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-right {
+	background-image: url("tab-inactive-middle-selected.png") !important;
+}
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-image-left,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-left {
+	background: url("tab-active-left-selected-l.png") no-repeat top left !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"] .tab-image-left,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-left {
+	background-image: url("tab-inactive-left-selected-l.png") !important;
+}
+
+
+
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-close-button,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-close-button {
+	background: url("tab-active-middle.png") repeat-x top left !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-close-button,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-close-button {
+	background-image: url("tab-inactive-middle.png") !important;
+}
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-image-left,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-image-left {
+	background: url("tab-active-left-r.png") no-repeat top left !important;
+	width: 8px !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-image-left,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-image-left {
+	background-image: url("tab-inactive-left-r.png")  !important;
+}
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-image-right,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-image-right {
+	background: url("tab-active-right-r.png") no-repeat top right !important;
+	width: 10px !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab .tab-image-right,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab:hover .tab-image-right {
+	background-image: url("tab-inactive-right-r.png") !important;
+}
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-middle,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-close-button,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-close-button,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-image-left,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-left {
+	background: url("tab-active-middle-selected.png") repeat-x top left !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-middle,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-close-button,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-close-button,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-image-left,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-left {
+	background-image: url("tab-inactive-middle-selected.png") !important;
+}
+
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-image-right,
+tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-right {
+	background: url("tab-active-right-selected-r.png") no-repeat top right !important;
+}
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"] .tab-image-right,
+:root:not([active="true"]) tabbrowser[treestyletab-style="metal"][treestyletab-mode="vertical"][treestyletab-appearance-inverted="true"]
+  .tabbrowser-tab[selected="true"]:hover .tab-image-right {
+	background-image: url("tab-inactive-right-selected-r.png") !important;
+}