Bug 1189759 - Part 1: Implement <xul:menuitem endimage> as a way to display an image at the end of a menu item; r=jaws

This commit is contained in:
Ehsan Akhgari 2015-08-05 00:23:27 -04:00
parent c7bbd80bd6
commit 5fe8bc4dcd
7 changed files with 57 additions and 11 deletions

View File

@ -325,7 +325,7 @@ menuitem.bookmark-item {
}
/* Stock icons for the menu bar items */
menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip):not([endimage]) {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic");
}

View File

@ -223,6 +223,19 @@
</content>
</binding>
<binding id="menuitem-iconic-both" extends="chrome://global/content/bindings/menu.xml#menuitem">
<content>
<xul:hbox class="menu-iconic-left" align="center" pack="center"
xbl:inherits="selected,_moz-menuactive,disabled,checked">
<xul:image class="menu-iconic-icon" xbl:inherits="src=image,validate,src"/>
</xul:hbox>
<xul:label class="menu-iconic-text" flex="1" xbl:inherits="value=label,accesskey,crop" crop="right"/>
<xul:hbox class="menu-iconic-right" align="center" pack="center">
<xul:image class="menu-iconic-icon" xbl:inherits="src=endimage"/>
</xul:hbox>
</content>
</binding>
<binding id="menuitem-iconic-noaccel" extends="chrome://global/content/bindings/menu.xml#menuitem">
<content>
<xul:hbox class="menu-iconic-left" align="center" pack="center"

View File

@ -388,6 +388,10 @@ menuitem.menuitem-non-iconic {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menubutton-item");
}
menuitem.menuitem-iconic[endimage] {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic-both");
}
menucaption {
-moz-binding: url("chrome://global/content/bindings/menu.xml#menucaption");
}

View File

@ -70,7 +70,8 @@ menuitem.spell-suggestion {
-moz-margin-end: 1.35em !important;
}
.menu-iconic-left {
.menu-iconic-left,
.menu-iconic-right {
min-width: 1.45em;
}
@ -80,7 +81,9 @@ menuitem.spell-suggestion {
}
menu.menu-iconic > .menu-iconic-left,
menuitem.menuitem-iconic > .menu-iconic-left {
menuitem.menuitem-iconic > .menu-iconic-left,
menu.menu-iconic > .menu-iconic-right,
menuitem.menuitem-iconic > .menu-iconic-right {
-moz-appearance: menuimage;
padding-top: 2px;
}
@ -153,7 +156,9 @@ menulist > menupopup > menu {
}
menulist > menupopup > menuitem > .menu-iconic-left,
menulist > menupopup > menu > .menu-iconic-left {
menulist > menupopup > menu > .menu-iconic-left,
menulist > menupopup > menuitem > .menu-iconic-right,
menulist > menupopup > menu > .menu-iconic-right {
display: none;
padding-top: 0px;
}

View File

@ -80,6 +80,7 @@ menulist > menupopup > menu {
.menu-text,
.menu-iconic-left,
.menu-iconic-right,
.menu-iconic-text {
margin-top: 0px !important;
margin-bottom: 0px !important;
@ -118,7 +119,8 @@ menucaption > .menu-iconic-text {
-moz-box-pack: end;
}
.menu-iconic-left {
.menu-iconic-left,
.menu-iconic-right {
width: 16px;
/* We can only hardcode this, to make the default GTK icon<->label spacing */
-moz-padding-end: 3px !important;
@ -158,7 +160,10 @@ menucaption > .menu-iconic-text {
menulist > menupopup > menuitem > .menu-iconic-left,
menulist > menupopup > menucaption > .menu-iconic-left,
menulist > menupopup > menu > .menu-iconic-left {
menulist > menupopup > menu > .menu-iconic-left,
menulist > menupopup > menuitem > .menu-iconic-right,
menulist > menupopup > menucaption > .menu-iconic-right,
menulist > menupopup > menu > .menu-iconic-right {
display: none;
}

View File

@ -63,6 +63,7 @@ menucaption > .menu-iconic-text {
.menuitem-iconic,
.menu-iconic,
menuitem[image],
menuitem[endimage],
menuitem[src] {
/* 2px higher than those without icons */
padding-top: 1px;
@ -77,6 +78,12 @@ menuitem[src] > .menu-iconic-left > .menu-iconic-icon {
width: 16px;
}
menuitem[endimage] > .menu-iconic-right > .menu-iconic-icon {
-moz-margin-start: 2px;
-moz-margin-end: 0;
width: 16px;
}
/* ..... menu arrow box ..... */
.menu-right,
@ -161,7 +168,8 @@ menulist[editable="true"] > menupopup > menucaption {
-moz-appearance: none;
}
menulist[editable="true"] > menupopup > :-moz-any(menuitem, menucaption) > .menu-iconic-left {
menulist[editable="true"] > menupopup > :-moz-any(menuitem, menucaption) > .menu-iconic-left,
menulist[editable="true"] > menupopup > :-moz-any(menuitem, menucaption) > .menu-iconic-right {
display: none;
}

View File

@ -92,7 +92,8 @@ menucaption > .menu-iconic-text {
-moz-margin-end: 1.35em !important;
}
.menu-iconic-left {
.menu-iconic-left,
.menu-iconic-right {
min-width: 1.45em;
}
@ -103,11 +104,18 @@ menucaption > .menu-iconic-text {
menu.menu-iconic > .menu-iconic-left,
menuitem.menuitem-iconic > .menu-iconic-left,
.splitmenu-menuitem[iconic="true"] > .menu-iconic-left {
.splitmenu-menuitem[iconic="true"] > .menu-iconic-left,
menuitem[endimage] > .menu-iconic-right {
-moz-appearance: menuimage;
padding-top: 2px;
}
menuitem[endimage] > .menu-iconic-right > .menu-iconic-icon {
-moz-margin-start: 2px;
-moz-margin-end: 5px;
width: 16px;
}
/* ..... menu arrow box ..... */
.menu-right {
@ -214,7 +222,10 @@ menulist > menupopup > menu[_moz-menuactive="true"] {
menulist > menupopup > menuitem > .menu-iconic-left,
menulist > menupopup > menucaption > .menu-iconic-left,
menulist > menupopup > menu > .menu-iconic-left {
menulist > menupopup > menu > .menu-iconic-left,
menulist > menupopup > menuitem > .menu-iconic-right,
menulist > menupopup > menucaption > .menu-iconic-right,
menulist > menupopup > menu > .menu-iconic-right {
display: none;
padding-top: 0px;
}
@ -239,7 +250,7 @@ menulist > menupopup > menuitem[disabled="true"]:not([_moz-menuactive="true"]):-
text-shadow: none;
}
menulist > menupopup > :-moz-any(menuitem, menucaption):not(.menuitem-iconic) > .menu-iconic-text {
menulist > menupopup > :-moz-any(menuitem, menucaption):not(.menuitem-iconic):not([endimage]) > .menu-iconic-text {
margin: 0 !important;
}