diff --git a/embedding/config/embed-jar.mn b/embedding/config/embed-jar.mn index acfa6a099f4..78161e3a181 100644 --- a/embedding/config/embed-jar.mn +++ b/embedding/config/embed-jar.mn @@ -51,7 +51,7 @@ embed.jar: content/global/bindings/scrollbox.xml (toolkit/content/global/bindings/scrollbox.xml) content/global/bindings/splitter.xml (toolkit/content/global/bindings/splitter.xml) content/global/bindings/stringbundle.xml (toolkit/content/global/bindings/stringbundle.xml) - content/global/bindings/tabcontrol.xml (toolkit/content/global/bindings/tabcontrol.xml) + content/global/bindings/tabbox.xml (toolkit/content/global/bindings/tabbox.xml) content/global/bindings/text.xml (toolkit/content/global/bindings/text.xml) content/global/bindings/textbox.xml (toolkit/content/global/bindings/textbox.xml) content/global/bindings/titledbox.xml (toolkit/content/global/bindings/titledbox.xml) diff --git a/themes/classic/communicator/mac/brand.css b/themes/classic/communicator/mac/brand.css index cdf376cfd0f..7c83d82100b 100644 --- a/themes/classic/communicator/mac/brand.css +++ b/themes/classic/communicator/mac/brand.css @@ -1,7 +1,7 @@ #navigator-throbber { - -moz-binding : url("chrome://global/content/xulBindings.xml#buttontop"); + -moz-binding : url("chrome://global/content/bindings/button.xml#buttontop"); border : 1px solid #000000; list-style-image : url("chrome://global/skin/animthrob_single.gif"); margin : 0px 2px 0px 10px; diff --git a/themes/classic/communicator/mac/button.css b/themes/classic/communicator/mac/button.css index a96931bff43..947f408c92b 100644 --- a/themes/classic/communicator/mac/button.css +++ b/themes/classic/communicator/mac/button.css @@ -5,7 +5,7 @@ /* outer frame */ .button-toolbar-1, .button-toolbar-2 { - -moz-binding : url("chrome://global/content/xulBindings.xml#buttontop"); + -moz-binding : url("chrome://global/content/bindings/button.xml#buttontop"); min-width : 0px; margin : 0px 1px; border : 1px solid transparent; @@ -14,7 +14,7 @@ .button-toolbar, .button-toolbar-4 { - -moz-binding : url("chrome://global/content/xulBindings.xml#buttonleft"); + -moz-binding : url("chrome://global/content/bindings/button.xml#buttonleft"); min-width : 0px; border : 1px solid transparent; background-color : transparent; diff --git a/themes/classic/communicator/mac/menubutton.css b/themes/classic/communicator/mac/menubutton.css index d844a82a939..423bc387d51 100644 --- a/themes/classic/communicator/mac/menubutton.css +++ b/themes/classic/communicator/mac/menubutton.css @@ -4,14 +4,14 @@ .menubutton-dual.top { - -moz-binding : url("chrome://global/content/menulistBindings.xml#menubutton-dual-ex"); + -moz-binding : url("chrome://global/content/bindings/menubutton.xml#menubutton-dual-ex"); border : 1px solid transparent; -moz-user-focus : ignore !important; } .menubutton-dual.left { - -moz-binding : url("chrome://global/content/menulistBindings.xml#menubutton-dual-ex-left"); + -moz-binding : url("chrome://global/content/bindings/menubutton.xml#menubutton-dual-ex-left"); border : 1px solid transparent; -moz-user-focus : none !important; } @@ -260,11 +260,11 @@ /* menubutton button-toolbar-2 */ menubutton.button-toolbar-2.top { - -moz-binding: url("chrome://global/content/menulistBindings.xml#menubutton-single-top"); + -moz-binding: url("chrome://global/content/bindings/menubutton.xml#menubutton-single-top"); } menubutton.button-toolbar-2.bottom { - -moz-binding: url("chrome://global/content/menulistBindings.xml#menubutton-single-bottom"); + -moz-binding: url("chrome://global/content/bindings/menubutton.xml#menubutton-single-bottom"); } diff --git a/themes/classic/global/mac/global.css b/themes/classic/global/mac/global.css index e0842138154..f3df1f4fe0e 100644 --- a/themes/classic/global/mac/global.css +++ b/themes/classic/global/mac/global.css @@ -44,7 +44,7 @@ button.plain { - -moz-binding : url(chrome://global/content/xulBindings.xml#buttonleft); + -moz-binding : url(chrome://global/content/bindings/button.xml#buttonleft); } button.plain-extended diff --git a/themes/classic/global/mac/jar.mn b/themes/classic/global/mac/jar.mn index 1ca6a3229d5..2c118ff03de 100644 --- a/themes/classic/global/mac/jar.mn +++ b/themes/classic/global/mac/jar.mn @@ -18,7 +18,8 @@ classic.jar: skin/classic/global/scrollbars.css skin/classic/global/scrollbox.css skin/classic/global/splitter.css - skin/classic/global/tabcontrol.css + skin/classic/global/tabbox.css + skin/classic/global/titledbox.css skin/classic/global/textbox.css skin/classic/global/toolbar.css skin/classic/global/tree.css diff --git a/themes/classic/global/mac/tabbox.css b/themes/classic/global/mac/tabbox.css new file mode 100644 index 00000000000..1eb9d6f9878 --- /dev/null +++ b/themes/classic/global/mac/tabbox.css @@ -0,0 +1,228 @@ +/********** Tab widget *********/ +/*******************************/ +/* This Mac-specific CSS styles tabs that are located on the top of their content, + * as Macintosh tabs generally are. An example of using bottom tab images can be + * found in EditorToolbar.css in classic/editor/. + *******************************/ + +/*** TAB: TOP ***/ + +tab { + color : #000000; + padding : 0px; +} + +.tab-image-left { + background : url(chrome://global/skin/tab-unselect-left.gif) no-repeat; + width : 11px; + height : 24px; +} + +.tab-image-middle { + background : url(chrome://global/skin/tab-unselect-middle.gif) repeat-x; +} + +.tab-image-right { + background : url(chrome://global/skin/tab-unselect-right.gif) no-repeat; + width : 12px; + height : 24px; +} + +.tab-text { + padding : 3px 0px 6px 0px; + font : menu; +} + +tab:hover:active { + color : #FFFFFF; +} + +tab:hover:active > .tab-image-left { + background : url(chrome://global/skin/tab-unselect-active-left.gif) no-repeat; +} + +tab:hover:active > .tab-image-middle { + background : url(chrome://global/skin/tab-unselect-active-middle.gif) repeat-x; +} + +tab:hover:active > .tab-image-right { + background : url(chrome://global/skin/tab-unselect-active-right.gif) no-repeat; +} + + +/* when a tab is selected this is how it should look */ +tab:hover:active[selected="true"], tab:hover:active[selected="1"]{ + color : #000000; +} + +tab[selected="true"] > .tab-image-left, +tab:hover:active[selected="true"] > .tab-image-left { + background : url(chrome://global/skin/tab-select-left.gif) no-repeat; +} + +tab[selected="true"] > .tab-image-middle, +tab:hover:active[selected="true"] > .tab-image-middle { + background : url(chrome://global/skin/tab-select-middle.gif) repeat-x; +} + +tab[selected="true"] > .tab-image-right, +tab:hover:active[selected="true"] > .tab-image-right { + background : url(chrome://global/skin/tab-select-right.gif) no-repeat; +} + +.tab-border-top-left { + background : url(chrome://global/skin/tab-border-top.gif) repeat-x bottom; + width : 2px; +} + +.tab-border-top-left-cap { + background : url(chrome://global/skin/tab-border-top-left-cap.gif) no-repeat bottom; + width : 2px; +} + +.tab-border-top-right { + background : url(chrome://global/skin/tab-border-top.gif) repeat-x bottom; +} + +.tab-border-top-right-cap { + background : url(chrome://global/skin/tab-border-top-right-cap.gif) no-repeat bottom; + width : 2px; +} + +tabs { + padding : 0px; +} + +/*** TAB: BOTTOM ***/ +/* Found in editor.xul & editorOverlay.xul + * SMALL TABS FOR NOW */ + +.tab-bottom > .tab-image-middle > .tab-text { + font : message-box; + font-weight : bold; +} + +.tab-bottom > .tab-image-left { + background : url(chrome://global/skin/tab-sm-bot-unsel-left.gif) no-repeat; + width : 11px; + height : 19px; +} + +.tab-bottom > .tab-image-middle { + background : url(chrome://global/skin/tab-sm-bot-unsel-mid.gif) repeat-x; +} + +.tab-bottom > .tab-image-right { + background : url(chrome://global/skin/tab-sm-bot-unsel-right.gif) no-repeat; + width : 11px; + height : 19px; +} + +.tab-bottom > .tab-image-middle > .tab-text { + padding : 4px 0px 1px 0px; +} + +.tab-bottom:hover:active > .tab-image-left { + background : url(chrome://global/skin/tab-sm-bot-unsel-acti-left.gif) no-repeat; +} + +.tab-bottom:hover:active > .tab-image-middle { + background : url(chrome://global/skin/tab-sm-bot-unsel-acti-mid.gif) repeat-x; +} + +.tab-bottom:hover:active > .tab-image-right { + background : url(chrome://global/skin/tab-sm-bot-unsel-acti-right.gif) no-repeat; +} + +/* when a tab is selected this is how it should look */ + +.tab-bottom[selected="true"] > .tab-image-left, +.tab-bottom:hover:active[selected="true"] > .tab-image-left { + background : url(chrome://global/skin/tab-sm-bot-sel-left.gif) no-repeat; +} + +.tab-bottom[selected="true"] > .tab-image-middle, +.tab-bottom:hover:active[selected="true"] > .tab-image-middle { + background : url(chrome://global/skin/tab-sm-bot-sel-mid.gif) repeat-x; +} + +.tab-bottom[selected="true"] > .tab-image-right, +.tab-bottom:hover:active[selected="true"] > .tab-image-right { + background : url(chrome://global/skin/tab-sm-bot-sel-right.gif) no-repeat; +} + +.tabs-bottom > .tab-border-top-left { + background : url(chrome://global/skin/tab-border-bot.gif) repeat-x top; + width : 2px; +} + +.tabs-bottom > .tab-border-top-left-cap { + background : url(chrome://global/skin/tab-border-bot-left-cap.gif) no-repeat top; + width : 2px; +} + +.tabs-bottom > .tab-border-top-right { + background : url(chrome://global/skin/tab-border-bot.gif) repeat-x top; +} + +.tabs-bottom > .tab-border-top-right-cap { + background : url(chrome://global/skin/tab-border-bot-right-cap.gif) no-repeat top; + width : 2px; +} + + /* top tabs */ +tabbox[orient="vertical"] tabs[orient="horizontal"] tab { + padding: 0px; + margin: 0px; +} + + /* bottom tabs */ +tabbox[orient="vertical"] tabpanels + tabs[orient="horizontal"] tab { + border-top: none; + border-bottom: 1px solid #666666; + border-left: 1px solid white; + border-right: 1px solid #666666; + -moz-border-radius: 0px 0px 8px 8px; + padding: 1px 5px 3px 5px; + margin: 1px 2px 1px 2px; +} + + /* left tabs */ +tabbox[orient="horizontal"] tabs[orient="vertical"] tab { + border-right: none; + -moz-border-radius: 8px 0px 0px 8px; + padding-right: 1px; + margin: 2px 1px 2px 1px; +} + + /* right tabs */ +tabbox[orient="horizontal"] tabpanels + tabs[orient="vertical"] tab { + border-top: 1px solid white; + border-bottom: 1px solid #666666; + border-left: none; + border-right: 1px solid #666666; + -moz-border-radius: 0px 8px 8px 0px; + padding: 3px 5px 1px 5px; + margin: 2px 1px 2px 1px; +} + +tabbox { + border: none; +} + +/* border on bottom only, no padding (used in search) */ +tabpanels.light { + border: none; + border-bottom: 1px outset #CCCCCC; + padding: 0px; +} + +tabpanels { + border-top: 0px; + border-bottom: 2px ridge #000000; + border-left: 2px groove #000000; + border-right: 2px ridge #000000; + padding: 5px; + background-color : #EEEEEE; +} + diff --git a/themes/classic/global/mac/tabcontrol.css b/themes/classic/global/mac/tabcontrol.css deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/themes/classic/global/menubuttonBindings.xml b/themes/classic/global/menubuttonBindings.xml index 7b687c46620..7f71c18614a 100644 --- a/themes/classic/global/menubuttonBindings.xml +++ b/themes/classic/global/menubuttonBindings.xml @@ -21,7 +21,7 @@ - + @@ -30,7 +30,7 @@ - + diff --git a/themes/classic/global/win/jar.mn b/themes/classic/global/win/jar.mn index 1c91759941d..226dd133b83 100644 --- a/themes/classic/global/win/jar.mn +++ b/themes/classic/global/win/jar.mn @@ -19,7 +19,7 @@ classic.jar: skin/classic/global/scrollbars.css skin/classic/global/scrollbox.css skin/classic/global/splitter.css - skin/classic/global/tabcontrol.css + skin/classic/global/tabbox.css skin/classic/global/textbox.css skin/classic/global/titledbox.css skin/classic/global/toolbar.css diff --git a/themes/classic/global/win/tabbox.css b/themes/classic/global/win/tabbox.css new file mode 100644 index 00000000000..2288f17f527 --- /dev/null +++ b/themes/classic/global/win/tabbox.css @@ -0,0 +1,276 @@ +@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); + +/*============ tabpanels widget =============*/ + +tabpanels { + padding: 5px; +} + +/* top tabs */ +tabbox[orient="vertical"] > tabs + tabpanels { + border-top: none !important; + border-bottom: 1px solid ThreeDShadow !important; +} + +/* bottom tabs */ +tabbox[orient="vertical"] > tabpanels { + border-top: 1px solid ThreeDHighlight; + border-bottom: none; + border-left: 1px solid ThreeDHighlight; + border-right: 1px solid ThreeDShadow; +} + +/* left tabs */ +tabbox[orient="horizontal"] > tabs + tabpanels { + border-left: none !important; + border-right: 1px solid ThreeDShadow !important; +} + +/* right tabs */ +tabbox[orient="horizontal"] > tabpanels { + border-top: 1px solid ThreeDHighlight; + border-bottom: 1px solid ThreeDShadow; + border-right: none; + border-left: 1px solid ThreeDHighlight; +} + +/* border on bottom only, no padding (used in search) */ +tabpanels.light { + border: none; + border-bottom: 1px outset #CCCCCC; + padding: 0px; +} + +.tabpanels-inner-box { + border-right: 1px solid ThreeDShadow; + border-bottom: 1px solid ThreeDShadow; +} + +/* tabs-spring ========================== */ + +/* top tabs */ +tabbox[orient="vertical"] > tabs > .tabs-spring { + border-bottom: 1px solid ThreeDHighlight; +} + +/* bottom tabs */ +tabbox[orient="vertical"] > tabpanels + tabs > .tabs-spring { + border-top: 1px solid ThreeDShadow !important; + border-bottom: none; +} + +/* left tabs */ +tabbox[orient="horizontal"] > tabs > .tabs-spring { + border-right: 1px solid ThreeDHighlight; +} + +/* right tabs */ +tabbox[orient="horizontal"] > tabpanels + tabs > .tabs-spring { + border-left: 1px solid ThreeDShadow !important; + border-right: none; +} + +/*============ tab widget ============*/ +/* NOTE: there should be code in here for indenting the first tab + by two pixels, however, this needs to be done with a spring to + fill in the border, but current attempts to use said spring + result in said spring not rendering. Will revisit. - JRH */ + +tab { + border: none; + color: -moz-DialogText; + -moz-user-focus: normal; +} + +tab > .tab-box > .tab-text { + border: 1px solid transparent; + padding: 0px 1px 0px 1px; +} + +tab:focus > .tab-box > .tab-text { + border: 1px dotted -moz-DialogText; +} + +.tab-box { + margin: 0px; + padding: 1px 3px 1px 3px !important; +} + +/* top tabs */ +tabbox[orient="vertical"] > tabs[orient="horizontal"] tab[first-tab="true"] { + margin-left: 2px; +} + +tabbox[orient="vertical"] > tabs[orient="horizontal"] tab { + margin-top: 2px; + border-right: 1px solid ThreeDDarkShadow; + -moz-border-radius: 4px 4px 0px 0px; +} + +tabbox[orient="vertical"] > tabs[orient="horizontal"] tab > .tab-box { + border-left: 1px solid ThreeDHighlight; + border-top: 1px solid ThreeDHighlight; + border-right: 1px solid ThreeDShadow; + border-bottom: 1px solid ThreeDHighlight; + -moz-border-radius: 4px 4px 0px 0px; +} + +/* bottom tabs */ +tabbox[orient="vertical"] > tabpanels + tabs[orient="horizontal"] > tab { + margin-top: 0px; + margin-bottom: 2px; + border-right: 1px solid ThreeDDarkShadow; + border-bottom: 1px solid ThreeDDarkShadow; + -moz-border-radius: 0px 0px 4px 4px; +} + +tabbox[orient="vertical"] > tabpanels + tabs[orient="horizontal"] > tab > .tab-box { + border-top: 1px solid ThreeDShadow; + border-right: 1px solid ThreeDShadow; + border-bottom: 1px solid ThreeDShadow; + -moz-border-radius: 0px 0px 4px 4px; +} + +/* left tabs */ +tabbox[orient="horizontal"] > tabs[orient="vertical"] tab[first-tab="true"] { + margin-top: 2px; +} + +tabbox[orient="horizontal"] > tabs[orient="vertical"] tab { + margin-left: 2px; + border-bottom: 1px solid ThreeDDarkShadow; + -moz-border-radius: 4px 0px 0px 4px; +} + +tabbox[orient="horizontal"] > tabs[orient="vertical"] tab > .tab-box { + border-left: 1px solid ThreeDHighlight; + border-top: 1px solid ThreeDHighlight; + border-right: 1px solid ThreeDHighlight; + border-bottom: 1px solid ThreeDShadow; + -moz-border-radius: 4px 0px 0px 4px; +} + +/* right tabs */ +tabbox[orient="horizontal"] > tabpanels + tabs[orient="vertical"] > tab { + margin-right: 2px; + margin-left: 0px; + border-bottom: 1px solid ThreeDDarkShadow; + border-right: 1px solid ThreeDDarkShadow; + -moz-border-radius: 0px 4px 4px 0px !important; +} + +tabbox[orient="horizontal"] > tabpanels + tabs[orient="vertical"] > tab > .tab-box { + border-left: 1px solid ThreeDShadow !important; + border-right: 1px solid ThreeDShadow; + border-bottom: 1px solid ThreeDShadow !important; + -moz-border-radius: 0px 4px 4px 0px !important; +} + +/* selected tabs ============================= */ +/* EXPLANATION (using top tabs as scenario): + When a tab is selected, it must appear to raise up and overlap the tabs to the left and right of it. + To do this, the adjacent borders of the before and after tabs are removed, and the selected tab + adds some padding to expand into the area once occupied by the adjacent borders. It must do this + without shifting tabs or text around. The leftmost tab grows into the margin to it's left since + there is no tab there to overlap. +*/ + +/* top tabs */ +tabbox[orient="vertical"] > tabs[orient="horizontal"] > tab[selected="true"] { + margin-left: 0px; + margin-top: 0px; +} + +tabbox[orient="vertical"] > tabs[orient="horizontal"] > tab[selected="true"] > .tab-box { + border-bottom: 1px solid ThreeDFace; + padding-left: 5px !important; + padding-right: 4px !important; +} + +tabbox[orient="vertical"] > tabs[orient="horizontal"] > tab[selected="true"][first-tab="true"] > .tab-box { + border-bottom: 1px solid ThreeDFace; + padding-left: 5px !important; + padding-right: 4px !important; +} + +/* bottom tabs */ +tabbox[orient="vertical"] > tabpanels + tabs[orient="horizontal"] > tab[selected="true"] { + margin-bottom: 0px; + border-bottom: 1px solid ThreeDDarkShadow !important; +} + +tabbox[orient="vertical"] > tabpanels + tabs[orient="horizontal"] > tab[selected="true"] > .tab-box { + border-top: 1px solid ThreeDFace; + border-bottom: 1px solid ThreeDShadow !important; +} + +/* left tabs */ +tabbox[orient="horizontal"] > tabs[orient="vertical"] > tab[selected="true"] { + margin-left: 0px; + margin-top: 0px; +} + +tabbox[orient="horizontal"] > tabs[orient="vertical"] > tab[selected="true"] > .tab-box { + border-right: 1px solid ThreeDFace; + padding-top: 3px !important; + padding-bottom: 2px !important; +} + +tabbox[orient="horizontal"] > tabs[orient="vertical"] > tab[selected="true"][first-tab="true"] > .tab-box { + border-right: 1px solid ThreeDFace; + padding-top: 3px !important; + padding-bottom: 2px !important; +} + +/* right tabs */ +tabbox[orient="horizontal"] > tabpanels + tabs[orient="vertical"] > tab[selected="true"] { + margin-right: 0px; +} + +tabbox[orient="horizontal"] > tabpanels + tabs[orient="vertical"] > tab[selected="true"] > .tab-box { + border-left: 1px solid ThreeDFace !important; + border-right: 1px solid ThreeDShadow !important; +} + +/* before selected tabs ====================== */ + +/* top & bottom tabs */ +tabbox[orient="vertical"] > tabs[orient="horizontal"] > tab[beforeselected="true"] { + border-right: none !important; +} + +tabbox[orient="vertical"] > tabs[orient="horizontal"] > tab[beforeselected="true"] > .tab-box { + border-right: none !important; +} + +/* left & right tabs */ +tabbox[orient="horizontal"] > tabs[orient="vertical"] > tab[beforeselected="true"] { + border-bottom: none !important; +} + +tabbox[orient="horizontal"] > tabs[orient="vertical"] > tab[beforeselected="true"] > .tab-box { + border-bottom: none !important; +} + +/* after selected tabs ====================== */ + +/* top & bottom tabs */ +tabbox[orient="vertical"] > tabs[orient="horizontal"] > tab[afterselected="true"] { + border-left: none !important; +} + +tabbox[orient="vertical"] > tabs[orient="horizontal"] > tab[afterselected="true"] > .tab-box { + border-left: none !important; +} + +/* left & right tabs */ +tabbox[orient="horizontal"] > tabs[orient="vertical"] > tab[afterselected="true"] { + border-top: none !important; +} + +tabbox[orient="horizontal"] > tabs[orient="vertical"] > tab[afterselected="true"] > .tab-box { + border-top: none !important; +} + + + diff --git a/themes/classic/global/win/tabcontrol.css b/themes/classic/global/win/tabcontrol.css deleted file mode 100644 index e69de29bb2d..00000000000