Bug 1189759 - Part 1: Implement <xul:menuitem endimage> as a way to display an image at the end of a menu item; r=jaws
authorEhsan Akhgari <ehsan@mozilla.com>
Wed, 05 Aug 2015 00:23:27 -0400
changeset 288330 dfe28c09bed995c469bb2c561cdd25645033b7f3
parent 288329 709ecb70dc990ee107c5ad9bbb9027ca7df32aca
child 288331 de03e403128ca2d5bde49740b7d0b3fbfb92ffce
push id5067
push userraliiev@mozilla.com
push dateMon, 21 Sep 2015 14:04:52 +0000
treeherdermozilla-beta@14221ffe5b2f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1189759
milestone42.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1189759 - Part 1: Implement <xul:menuitem endimage> as a way to display an image at the end of a menu item; r=jaws
browser/themes/linux/browser.css
toolkit/content/widgets/menu.xml
toolkit/content/xul.css
toolkit/themes/faststripe/global/menu.css
toolkit/themes/linux/global/menu.css
toolkit/themes/osx/global/menu.css
toolkit/themes/windows/global/menu.css
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -320,17 +320,17 @@ menuitem.bookmark-item {
 }
 
 .bookmark-item[cutting] > .toolbarbutton-text,
 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
   opacity: 0.7;
 }
 
 /* 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");
 }
 
 #placesContext_open\:newwindow,
 #menu_newNavigator,
 #context-openlink,
 #context-openframe {
   list-style-image: url("chrome://browser/skin/Toolbar-small.png");
--- a/toolkit/content/widgets/menu.xml
+++ b/toolkit/content/widgets/menu.xml
@@ -218,16 +218,29 @@
       </xul:hbox>
       <xul:label class="menu-iconic-text" flex="1" xbl:inherits="value=label,accesskey,crop" crop="right"/>
       <xul:hbox class="menu-accel-container" anonid="accel">
         <xul:label class="menu-iconic-accel" xbl:inherits="value=acceltext"/>
       </xul:hbox>
     </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"
                 xbl:inherits="selected,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"/>
     </content>
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -383,16 +383,20 @@ menuitem[type="checkbox"],
 menuitem[type="radio"] {
   -moz-binding: url("chrome://global/content/bindings/menu.xml#menuitem-iconic");
 }
 
 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");
 }
 
 .menu-text {
   -moz-box-flex: 1;
 }
 
--- a/toolkit/themes/faststripe/global/menu.css
+++ b/toolkit/themes/faststripe/global/menu.css
@@ -65,27 +65,30 @@ menuitem.spell-suggestion {
 
 .menu-accel,
 .menu-iconic-accel {
   color: inherit;
   -moz-margin-start: 0.74em !important;
   -moz-margin-end: 1.35em !important;
 }
 
-.menu-iconic-left {
+.menu-iconic-left,
+.menu-iconic-right {
   min-width: 1.45em;
 }
 
 .menu-iconic-icon {
   width: 16px;
   height: 16px;
 }
 
 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;
 }
 
 /* ..... menu arrow box ..... */
 
 .menu-right {
   -moz-margin-end: -2px;
@@ -148,17 +151,19 @@ menulist > menupopup > menu {
   border: 1px solid transparent;
   padding: 1px 5px;
   max-width: none;
   font: message-box;
   color: -moz-FieldText;
 }
 
 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;
 }
 
 menulist > menupopup > menuitem > label,
 menulist > menupopup > menu > label {
   padding-top: 0px;
   padding-bottom: 0px;
--- a/toolkit/themes/linux/global/menu.css
+++ b/toolkit/themes/linux/global/menu.css
@@ -75,16 +75,17 @@ menulist > menupopup > menu {
   max-width: none;
   font: message-box;
 }
 
 /* ..... internal content .... */
 
 .menu-text,
 .menu-iconic-left,
+.menu-iconic-right,
 .menu-iconic-text {
   margin-top: 0px !important;
   margin-bottom: 0px !important;
   -moz-margin-start: 0px !important;
   -moz-margin-end: 2px !important;
   color: inherit;
 }
 
@@ -113,17 +114,18 @@ menucaption > .menu-iconic-text {
   -moz-margin-start: 7px !important;
   color: inherit;
 }
 
 .menu-accel-container {
   -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;
 }
 
 .menu-iconic-icon {
   width: 16px;
   height: 16px;
@@ -153,17 +155,20 @@ menucaption > .menu-iconic-text {
 .menubar-text {
   margin: 0 1px !important;
   color: inherit;
 }
 
 
 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;
 }
 
 /* ::::: checkbox menuitem ::::: */
 
 menuitem[checked="true"] {
   -moz-appearance: checkmenuitem !important;
 }
--- a/toolkit/themes/osx/global/menu.css
+++ b/toolkit/themes/osx/global/menu.css
@@ -58,30 +58,37 @@ menucaption > .menu-iconic-text {
    */
   -moz-margin-start: -5px;
 }
 
 /* menuitems with icons */
 .menuitem-iconic,
 .menu-iconic,
 menuitem[image],
+menuitem[endimage],
 menuitem[src] {
   /* 2px higher than those without icons */
   padding-top: 1px;
   padding-bottom: 3px;
 }
 
 .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon,
 .menu-iconic > .menu-iconic-left > .menu-iconic-icon,
 menuitem[image] > .menu-iconic-left > .menu-iconic-icon,
 menuitem[src] > .menu-iconic-left > .menu-iconic-icon {
   -moz-margin-start: 0;
   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,
 .menu-accel-container {
   -moz-margin-start: 21px;
   -moz-margin-end: -9px;
   -moz-box-pack: end;
 }
@@ -156,17 +163,18 @@ menulist > menupopup > menu {
 
 /* ::::: menuitems in editable menulist popups ::::: */
 
 menulist[editable="true"] > menupopup > menuitem,
 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;
 }
 
 /* ::::: checked menuitems ::::: */
 
 :not(menulist) > menupopup > menuitem[checked="true"],
 :not(menulist) > menupopup > menuitem[selected="true"] {
   -moz-appearance: checkmenuitem;
--- a/toolkit/themes/windows/global/menu.css
+++ b/toolkit/themes/windows/global/menu.css
@@ -87,32 +87,40 @@ menucaption > .menu-iconic-text {
 
 .menu-accel,
 .menu-iconic-accel {
   color: inherit;
   -moz-margin-start: 0.74em !important;
   -moz-margin-end: 1.35em !important;
 }
 
-.menu-iconic-left {
+.menu-iconic-left,
+.menu-iconic-right {
   min-width: 1.45em;
 }
 
 .menu-iconic-icon {
   width: 16px;
   height: 16px;
 }
 
 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 {
   -moz-appearance: menuarrow;
   -moz-margin-end: -2px;
   list-style-image: none;
   min-width: 1.28em;
   padding-top: 1px;
@@ -209,17 +217,20 @@ menulist > menupopup > menu {
 menulist > menupopup > menuitem[_moz-menuactive="true"],
 menulist > menupopup > menu[_moz-menuactive="true"] {
   background-color: highlight;
   color: highlighttext;
 }
 
 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;
 }
 
 menulist > menupopup > menuitem > label,
 menulist > menupopup > menucaption > label,
 menulist > menupopup > menu > label {
   padding-top: 0px;
@@ -234,17 +245,17 @@ menulist > menupopup > menuitem[_moz-men
   color: GrayText;
 }
 
 menulist > menupopup > menuitem[disabled="true"]:not([_moz-menuactive="true"]):-moz-system-metric(windows-classic) {
   color: GrayText;
   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;
 }
 
 /* ::::: checkbox and radio menuitems ::::: */
 
 menuitem[type="checkbox"],
 menuitem[checked="true"] {
   -moz-appearance: checkmenuitem;