Bug 347412 - 'Back' and 'forward' toolbarbutton layout gets broken when using Icons and Text for the navigation toolbar. r+a=mconnor.
git-svn-id: svn://10.0.0.236/branches/MOZILLA_1_8_BRANCH@207682 18797224-902f-48f8-a5cc-f745e15eee43
This commit is contained in:
@@ -291,6 +291,20 @@ toolbar[mode="full"] .toolbarbutton-menubutton-button {
|
||||
display: -moz-box;
|
||||
}
|
||||
|
||||
/* set up extended binding for the back & forward buttons */
|
||||
toolbar:not([mode="text"]) #back-button,
|
||||
toolbar:not([mode="text"]) #forward-button {
|
||||
-moz-binding: url(chrome://browser/skin/browser.xml#toolbar-menubutton);
|
||||
}
|
||||
|
||||
toolbar:not([mode="text"]) #back-button .toolbarbutton-menubutton-button,
|
||||
toolbar:not([mode="text"]) #forward-button .toolbarbutton-menubutton-button {
|
||||
-moz-binding: url('chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton-image');
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ::::: 24px primary toolbar buttons ::::: */
|
||||
|
||||
@@ -299,8 +313,9 @@ toolbar[mode="full"] .toolbarbutton-menubutton-button {
|
||||
#back-button {
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
-moz-image-region: rect(0px 24px 24px 0px);
|
||||
-moz-image-region: rect(0px 24px 24px 0px);
|
||||
}
|
||||
|
||||
#back-button:hover,
|
||||
#back-button[buttonover="true"] {
|
||||
-moz-image-region: rect(24px 24px 48px 0px);
|
||||
@@ -329,22 +344,22 @@ toolbar[mode="full"] .toolbarbutton-menubutton-button {
|
||||
list-style-image: url("chrome://browser/skin/dropmark-nav-rtl.png");
|
||||
-moz-image-region: rect(0px 14px 24px 0px);
|
||||
}
|
||||
#back-button:hover > .toolbarbutton-menubutton-dropmarker,
|
||||
#back-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker,
|
||||
#forward-button:hover[chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker,
|
||||
#forward-button[buttonover="true"][chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker {
|
||||
#back-button:hover .toolbarbutton-menubutton-dropmarker,
|
||||
#back-button[buttonover="true"] .toolbarbutton-menubutton-dropmarker,
|
||||
#forward-button:hover[chromedir="rtl"] .toolbarbutton-menubutton-dropmarker,
|
||||
#forward-button[buttonover="true"][chromedir="rtl"] .toolbarbutton-menubutton-dropmarker {
|
||||
-moz-image-region: rect(24px 14px 48px 0px);
|
||||
}
|
||||
#back-button > .toolbarbutton-menubutton-dropmarker[disabled="true"] {
|
||||
#back-button .toolbarbutton-menubutton-dropmarker[disabled="true"] {
|
||||
list-style-image: url("chrome://browser/skin/dropmark-nav.png") !important;
|
||||
-moz-image-region: rect(48px 14px 72px 0px);
|
||||
}
|
||||
#forward-button[chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker[disabled="true"]{
|
||||
#forward-button[chromedir="rtl"] .toolbarbutton-menubutton-dropmarker[disabled="true"] {
|
||||
list-style-image: url("chrome://browser/skin/dropmark-nav-rtl.png") !important;
|
||||
-moz-image-region: rect(48px 14px 72px 0px);
|
||||
}
|
||||
#back-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker,
|
||||
#back-button:hover:active > .toolbarbutton-menubutton-dropmarker {
|
||||
#back-button[buttondown="true"] .toolbarbutton-menubutton-dropmarker,
|
||||
#back-button:hover:active .toolbarbutton-menubutton-dropmarker {
|
||||
-moz-image-region: rect(72px 14px 96px 0px);
|
||||
}
|
||||
|
||||
@@ -380,24 +395,24 @@ toolbar[mode="full"] .toolbarbutton-menubutton-button {
|
||||
list-style-image: url("chrome://browser/skin/dropmark-nav-rtl.png");
|
||||
-moz-image-region: rect(0px 14px 24px 0px);
|
||||
}
|
||||
#forward-button:hover > .toolbarbutton-menubutton-dropmarker,
|
||||
#forward-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker,
|
||||
#back-button:hover[chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker,
|
||||
#forward-button:hover .toolbarbutton-menubutton-dropmarker,
|
||||
#forward-button[buttonover="true"] .toolbarbutton-menubutton-dropmarker,
|
||||
#back-button:hover[chromedir="rtl"] .toolbarbutton-menubutton-dropmarker,
|
||||
#back-button[buttonover="true"][chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker {
|
||||
-moz-image-region: rect(24px 14px 48px 0px);
|
||||
}
|
||||
#forward-button > .toolbarbutton-menubutton-dropmarker[disabled="true"] {
|
||||
#forward-button .toolbarbutton-menubutton-dropmarker[disabled="true"] {
|
||||
list-style-image: url("chrome://browser/skin/dropmark-nav.png") !important;
|
||||
-moz-image-region: rect(48px 14px 72px 0px);
|
||||
}
|
||||
#back-button[chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker[disabled="true"] {
|
||||
#back-button[chromedir="rtl"] .toolbarbutton-menubutton-dropmarker[disabled="true"] {
|
||||
list-style-image: url("chrome://browser/skin/dropmark-nav-rtl.png") !important;
|
||||
-moz-image-region: rect(48px 14px 72px 0px);
|
||||
}
|
||||
#forward-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker,
|
||||
#forward-button:hover:active > .toolbarbutton-menubutton-dropmarker,
|
||||
#back-button[buttondown="true"][chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker,
|
||||
#back-button:hover:active[chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker {
|
||||
#forward-button[buttondown="true"] .toolbarbutton-menubutton-dropmarker,
|
||||
#forward-button:hover:active .toolbarbutton-menubutton-dropmarker,
|
||||
#back-button[buttondown="true"][chromedir="rtl"] .toolbarbutton-menubutton-dropmarker,
|
||||
#back-button:hover:active[chromedir="rtl"] .toolbarbutton-menubutton-dropmarker {
|
||||
-moz-image-region: rect(72px 14px 96px 0px);
|
||||
}
|
||||
|
||||
@@ -670,13 +685,13 @@ toolbar[iconsize="small"] #forward-button[chromedir="rtl"] .toolbarbutton-menubu
|
||||
list-style-image: url("chrome://browser/skin/dropmark-nav-rtl-small.png");
|
||||
-moz-image-region: rect(0px 16px 16px 0px);
|
||||
}
|
||||
toolbar[iconsize="small"] #back-button:hover > .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #back-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #back-button:hover .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #back-button[buttonover="true"] .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #forward-button:hover[chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #forward-button[buttonover="true"][chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker {
|
||||
-moz-image-region: rect(16px 16px 32px 0px);
|
||||
}
|
||||
toolbar[iconsize="small"] #back-button > .toolbarbutton-menubutton-dropmarker[disabled="true"] {
|
||||
toolbar[iconsize="small"] #back-button .toolbarbutton-menubutton-dropmarker[disabled="true"] {
|
||||
list-style-image: url("chrome://browser/skin/dropmark-nav-small.png") !important;
|
||||
-moz-image-region: rect(32px 16px 48px 0px);
|
||||
}
|
||||
@@ -684,8 +699,8 @@ toolbar[iconsize="small"] #forward-button[chromedir="rtl"] > .toolbarbutton-menu
|
||||
list-style-image: url("chrome://browser/skin/dropmark-nav-rtl-small.png") !important;
|
||||
-moz-image-region: rect(32px 16px 48px 0px);
|
||||
}
|
||||
toolbar[iconsize="small"] #back-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #back-button:hover:active > .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #back-button[buttondown="true"] .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #back-button:hover:active .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #forward-button[buttondown="true"][chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #forward-button:hover:active[chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker {
|
||||
-moz-image-region: rect(64px 16px 80px 0px);
|
||||
@@ -708,7 +723,7 @@ toolbar[iconsize="small"] #forward-button:hover:active {
|
||||
-moz-image-region: rect(64px 32px 80px 16px);
|
||||
}
|
||||
|
||||
/* small front button dropmarker */
|
||||
/* small forward button dropmarker */
|
||||
|
||||
toolbar[iconsize="small"] #forward-button .toolbarbutton-menubutton-dropmarker {
|
||||
border: 0 !important;
|
||||
@@ -724,24 +739,24 @@ toolbar[iconsize="small"] #back-button[chromedir="rtl"] .toolbarbutton-menubutto
|
||||
list-style-image: url("chrome://browser/skin/dropmark-nav-rtl-small.png");
|
||||
-moz-image-region: rect(0px 16px 16px 0px);
|
||||
}
|
||||
toolbar[iconsize="small"] #forward-button:hover > .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #forward-button[buttonover="true"] > .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #back-button:hover[chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #back-button[buttonover="true"][chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker {
|
||||
toolbar[iconsize="small"] #forward-button:hover .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #forward-button[buttonover="true"] .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #back-button:hover[chromedir="rtl"] .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #back-button[buttonover="true"][chromedir="rtl"] .toolbarbutton-menubutton-dropmarker {
|
||||
-moz-image-region: rect(16px 16px 32px 0px);
|
||||
}
|
||||
toolbar[iconsize="small"] #forward-button > .toolbarbutton-menubutton-dropmarker[disabled="true"] {
|
||||
toolbar[iconsize="small"] #forward-button .toolbarbutton-menubutton-dropmarker[disabled="true"] {
|
||||
list-style-image: url("chrome://browser/skin/dropmark-nav-small.png") !important;
|
||||
-moz-image-region: rect(32px 16px 48px 0px);
|
||||
}
|
||||
toolbar[iconsize="small"] #back-button[chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker[disabled="true"] {
|
||||
toolbar[iconsize="small"] #back-button[chromedir="rtl"] .toolbarbutton-menubutton-dropmarker[disabled="true"] {
|
||||
list-style-image: url("chrome://browser/skin/dropmark-nav-rtl-small.png") !important;
|
||||
-moz-image-region: rect(32px 16px 48px 0px);
|
||||
}
|
||||
toolbar[iconsize="small"] #forward-button[buttondown="true"] > .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #forward-button:hover:active > .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #back-button[buttondown="true"][chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #back-button:hover:active[chromedir="rtl"] > .toolbarbutton-menubutton-dropmarker{
|
||||
toolbar[iconsize="small"] #forward-button[buttondown="true"] .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #forward-button:hover:active .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #back-button[buttondown="true"][chromedir="rtl"] .toolbarbutton-menubutton-dropmarker,
|
||||
toolbar[iconsize="small"] #back-button:hover:active[chromedir="rtl"] .toolbarbutton-menubutton-dropmarker{
|
||||
-moz-image-region: rect(64px 16px 80px 0px);
|
||||
}
|
||||
|
||||
|
||||
@@ -16,4 +16,30 @@
|
||||
</content>
|
||||
</binding>
|
||||
|
||||
<binding id="toolbar-menubutton" extends="chrome://global/content/bindings/toolbarbutton.xml#menu-button">
|
||||
<content>
|
||||
<children includes="observes|template|menupopup|tooltip"/>
|
||||
<xul:hbox align="center" flex="1">
|
||||
<xul:vbox flex="1" align="center">
|
||||
<xul:hbox align="center">
|
||||
<xul:toolbarbutton class="box-inherit toolbarbutton-menubutton-button"
|
||||
anonid="button"
|
||||
allowevents="true"
|
||||
xbl:inherits="disabled,crop,image,label,accesskey,command,
|
||||
align,dir,pack,orient,toolbarmode,buttonstyle"/>
|
||||
<xul:dropmarker type="menu-button"
|
||||
class="toolbarbutton-menubutton-dropmarker"
|
||||
xbl:inherits="align,dir,pack,orient,disabled,toolbarmode,buttonstyle,label"/>
|
||||
</xul:hbox>
|
||||
<xul:hbox align="center">
|
||||
<xul:label class="toolbarbutton-text"
|
||||
crop="right"
|
||||
xbl:inherits="value=label,accesskey,crop,toolbarmode,buttonstyle"
|
||||
flex="1"/>
|
||||
</xul:hbox>
|
||||
</xul:vbox>
|
||||
<xul:hbox flex="100"/>
|
||||
</xul:hbox>
|
||||
</content>
|
||||
</binding>
|
||||
</bindings>
|
||||
|
||||
Reference in New Issue
Block a user