Bug 542192 - Restyle Mac menus. r=dao

browser/themes/pinstripe/browser/browser.css

@@ -1757,10 +1757,6 @@ tabbrowser > tabbox {
   list-style-image: url("chrome://global/skin/tree/item.png");
 }
 
-.alltabs-item[selected="true"] {
-  font-weight: bold;
-}
-
 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
   list-style-image: url("chrome://global/skin/icons/loading_16.png") !important;
 }

browser/themes/pinstripe/browser/preferences/applications.css

@@ -46,14 +46,8 @@
   margin-bottom: -1px;
 }
 
-.typeIcon,
-.actionIcon {
-  -moz-margin-start: 3px;
-  -moz-margin-end: 3px;
-}
-
 richlistitem label {
-  -moz-margin-start: 1px;
+  -moz-margin-start: 3px;
   margin-top: 2px;
 }
 
@@ -61,6 +55,24 @@ richlistitem {
   min-height: 22px;
 }
 
+.typeIcon,
+.actionIcon {
+  -moz-margin-start: 3px;
+}
+
+.typeIcon,
+.actionIcon,
+.actionsMenu .menulist-icon {
+  -moz-margin-end: 2px;
+}
+
+.actionsMenu > menupopup > menuitem > .menu-iconic-left {
+  /* Undo content/browser/preferences/handlers.css - we don't
+   * want icon-less labels to line up with the other labels.
+   */
+  min-width: 0;
+}
+
 richlistitem[appHandlerIcon="ask"],
 menuitem[appHandlerIcon="ask"] {
   list-style-image: url("chrome://browser/skin/preferences/alwaysAsk.png");
@@ -81,11 +93,13 @@ menuitem[appHandlerIcon="plugin"] {
   list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric-16.png");
 }
 
-.actionsMenu .menulist-icon {
-  -moz-margin-end: 1px;
+/* Repeat what menu.css does for .menuitem-iconic */
+menuitem[appHandlerIcon] {
+  padding-top: 1px;
+  padding-bottom: 3px;
 }
 
-.actionsMenu > menupopup > menuitem > .menu-iconic-left {
-  -moz-padding-start: 3px;
-  -moz-padding-end: 1px;
+menuitem[appHandlerIcon] > .menu-iconic-left > .menu-iconic-icon {
+  -moz-margin-start: 0;
+  width: 16px;
 }

browser/themes/pinstripe/browser/searchbar.css

@@ -145,7 +145,3 @@
   padding: 0;
   -moz-padding-end: 6px;
 }
-
-.searchbar-engine-menuitem[selected="true"] > .menu-iconic-text {
-  font-weight: bold;
-}

toolkit/themes/pinstripe/global/jar.mn

@@ -131,18 +131,10 @@ toolkit.jar:
 +  skin/classic/global/media/error.png                                (media/error.png)
 +  skin/classic/global/media/throbber.png                             (media/throbber.png)
 +  skin/classic/global/media/volumeThumb.png                          (media/volumeThumb.png)
-+  skin/classic/global/menu/menu-arrow-dis.gif                        (menu/menu-arrow-dis.gif)
-+  skin/classic/global/menu/menu-arrow-hov.gif                        (menu/menu-arrow-hov.gif)
-+  skin/classic/global/menu/menu-arrow.gif                            (menu/menu-arrow.gif)
-+  skin/classic/global/menu/menu-check-dis.png                        (menu/menu-check-dis.png)
-+  skin/classic/global/menu/menu-check-hov.png                        (menu/menu-check-hov.png)
++  skin/classic/global/menu/menu-arrow.png                            (menu/menu-arrow.png)
 +  skin/classic/global/menu/menu-check.png                            (menu/menu-check.png)
 +  skin/classic/global/scale/scale-tray-horiz.gif                     (scale/scale-tray-horiz.gif)
 +  skin/classic/global/scale/scale-tray-vert.gif                      (scale/scale-tray-vert.gif)
-+  skin/classic/global/scrollbox/autorepeat-arrow-dn.gif              (scrollbox/autorepeat-arrow-dn.gif)
-+  skin/classic/global/scrollbox/autorepeat-arrow-dn-dis.gif          (scrollbox/autorepeat-arrow-dn-dis.gif)
-+  skin/classic/global/scrollbox/autorepeat-arrow-up.gif              (scrollbox/autorepeat-arrow-up.gif)
-+  skin/classic/global/scrollbox/autorepeat-arrow-up-dis.gif          (scrollbox/autorepeat-arrow-up-dis.gif)
 +  skin/classic/global/splitter/dimple.png                            (splitter/dimple.png)
 +  skin/classic/global/splitter/grip-hrz-after.gif                    (splitter/grip-hrz-after.gif)
 +  skin/classic/global/splitter/grip-hrz-before.gif                   (splitter/grip-hrz-before.gif)

toolkit/themes/pinstripe/global/menu.css

@@ -47,6 +47,7 @@ menuitem {
   font: -moz-pull-down-menu;
   list-style-image: none;
   -moz-image-region: auto;
+  padding: 0 21px 2px;
 }
 
 menu[disabled="true"], menuitem[disabled="true"],
@@ -58,14 +59,16 @@ menuitem[_moz-menuactive="true"][disabled="true"] {
 /* ..... internal content .... */
 
 .menu-text,
-.menu-iconic-text {
-  margin: 0px 4px 0px 0px !important;
-  color: inherit;
+.menu-iconic-text,
+.menu-accel,
+.menu-iconic-accel {
+  margin: 0 !important;
 }
 
-.menu-text {
-  margin-left: 18px !important;
+.menu-text,
+.menu-iconic-text {
   font-weight: inherit;
+  color: inherit;
 }
 
 .menu-description {
@@ -74,46 +77,60 @@ menuitem[_moz-menuactive="true"][disabled="true"] {
   -moz-margin-start: 1ex !important;
 }
 
-.menu-accel,
-.menu-iconic-accel {
-  margin: 0px 2px 0px 2px !important;
-  padding-right: 10px;
-  color: inherit;
-}
-
-.menu-iconic-left {
-  margin: 2px 4px 1px 18px !important;
-  color: inherit;
-}
-
 .menu-iconic-icon {
-  width: 16px;
   height: 16px;
-  list-style-image: inherit;
+  margin-top: -2px;
+  margin-bottom: -2px;
+  -moz-margin-end: 5px;
+  /* Empty icons shouldn't take up room, so we need to compensate
+   * the 5px margin-end with a negative margin-start.
+   */
+  -moz-margin-start: -5px;
 }
 
-menuitem[type="checkbox"] > .menu-iconic-left,
-menuitem[type="radio"] > .menu-iconic-left {
-  margin: 0 2px 0 0 !important;
- }
+/* menuitems with icons */
+.menuitem-iconic,
+.menu-iconic,
+menuitem[image],
+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;
+}
 
 /* ..... menu arrow box ..... */
 
-.menu-right {
-  margin: 0px 8px 0px 6px;
-  width: 8px;
-  list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
-  -moz-image-region: auto;
+.menu-right,
+.menu-accel-container {
+  -moz-margin-end: -9px;
+  -moz-margin-start: 21px;
+  -moz-box-pack: end;
 }
 
-.menu-right[_moz-menuactive="true"] {
-  list-style-image: url("chrome://global/skin/menu/menu-arrow-hov.gif");
-  -moz-image-region: auto;
+.menu-right {
+  width: 8px;
+  list-style-image: url("chrome://global/skin/menu/menu-arrow.png");
+  -moz-image-region: rect(0, 8px, 10px, 0);
+}
+
+.menu-right[_moz-menuactive="true"]:not([disabled="true"]) {
+  -moz-image-region: rect(0, 16px, 10px, 8px);
 }
 
 .menu-right[disabled="true"] {
-  list-style-image: url("chrome://global/skin/menu/menu-arrow-dis.gif") !important;
-  -moz-image-region: auto;
+  -moz-image-region: rect(0, 24px, 10px, 16px);
+}
+
+.menu-right:-moz-locale-dir(rtl) {
+  -moz-transform: scaleX(-1);
 }
 
 /* ::::: menu/menuitems in menubar ::::: */
@@ -121,7 +138,7 @@ menuitem[type="radio"] > .menu-iconic-left {
 menubar > menu {
   -moz-appearance: none !important;
   padding: 2px 5px 2px 7px;
-  margin: 1px 0px 1px 0px;
+  margin: 1px 0;
 }
 
 menubar > menu[_moz-menuactive="true"][open="true"] {
@@ -132,12 +149,12 @@ menubar > menu[_moz-menuactive="true"][open="true"] {
 /* ..... internal content .... */
 
 .menubar-left {
-  margin: 0px 2px 0px 0px;
+  margin: 0 2px;
   color: inherit;
 }
 
 .menubar-text {
-  margin: 0px 2px 0px 0px !important;
+  margin: 0 1px !important;
   color: inherit;
 }
 
@@ -147,9 +164,7 @@ menupopup > menu,
 popup > menu,
 menupopup > menuitem,
 popup > menuitem {
-  padding: 0px 3px 2px 3px !important;
   max-width: 42em;
-  min-height: 19px;
 }
 
 menupopup > menu[_moz-menuactive="true"],
@@ -166,19 +181,11 @@ popup > menuitem[_moz-menuactive="true"] {
 menulist > menupopup > menuitem,
 .menulist-menupopup > menu,
 menulist > menupopup > menu {
-  padding-right: 25px !important;
   max-width: none;
   font: inherit;
   color: -moz-FieldText;
 }
 
-.menulist-menupopup > menuitem > .menu-iconic-left,
-menulist > menupopup > menuitem > .menu-iconic-left,
-.menulist-menupopup > menu > .menu-iconic-left,
-menulist > menupopup > menu > .menu-iconic-left {
-  margin: 0 2px 0 0 !important;
-}
-
 /* ::::: menuitems in editable menulist popups ::::: */
 
 menulist[editable="true"] > menupopup > menuitem {
@@ -191,23 +198,28 @@ menulist[editable="true"] > menupopup > menuitem > .menu-iconic-left {
 
 /* ::::: checked menuitems ::::: */
 
-menuitem[checked="true"], 
-menulist > menupopup > menuitem[selected="true"],
-.menulist-menupopup > menuitem[selected="true"] {
-  list-style-image: url("chrome://global/skin/menu/menu-check.png");
-  -moz-image-region: auto;
+menuitem[checked="true"] > .menu-iconic-left,
+:not(menulist) > menupopup > menuitem[selected="true"] > .menu-iconic-left {
+  -moz-margin-start: -15px;
+  -moz-padding-start: 15px;
+  background: -moz-image-rect("chrome://global/skin/menu/menu-check.png", 0, 10, 11, 0) bottom left no-repeat transparent;
 }
 
-menuitem[checked="true"][disabled="true"] {
-  list-style-image: url("chrome://global/skin/menu/menu-check-dis.png");
-  -moz-image-region: auto;
+menuitem[checked="true"] > .menu-iconic-left:-moz-locale-dir(rtl),
+:not(menulist) > menupopup > menuitem[selected="true"] > .menu-iconic-left:-moz-locale-dir(rtl) {
+  background-position: bottom right;
 }
 
-menuitem[checked="true"][_moz-menuactive="true"]:not([disabled="true"]), 
-menulist > menupopup > menuitem[_moz-menuactive="true"][selected="true"]:not([disabled="true"]),
-.menulist-menupopup > menuitem[_moz-menuactive="true"][selected="true"]:not([disabled="true"]) {
-  list-style-image: url("chrome://global/skin/menu/menu-check-hov.png") !important;
-  -moz-image-region: auto;
+menuitem[checked="true"][_moz-menuactive="true"] > .menu-iconic-left,
+:not(menulist) > menupopup > menuitem[selected="true"][_moz-menuactive="true"] > .menu-iconic-left {
+  background-image: -moz-image-rect("chrome://global/skin/menu/menu-check.png", 0, 20, 11, 10);
+}
+
+menulist:not([editable="true"]) > menupopup > menuitem[selected="true"]::before {
+  content: '\2713'; /* a checkmark */
+  display: block;
+  width: 15px;
+  -moz-margin-start: -15px;
 }
 
 /* ::::: menuseparator ::::: */
@@ -218,11 +230,6 @@ menuseparator {
   padding: 1px 0 !important;
 }
 
-/* ::::: menulist popup ::::: */
-menulist > menupopup {
-  margin: 4px 0px 4px 0px;
-}
-
 /* ::::: autocomplete ::::: */
 
 .autocomplete-history-popup > menuitem {

toolkit/themes/pinstripe/global/scrollbox.css

@@ -28,17 +28,21 @@
 
 /* Vertical enabled */
 .autorepeatbutton-up:not([orient="horizontal"]) {
-  list-style-image: url("chrome://global/skin/scrollbox/autorepeat-arrow-up.gif");
-  -moz-image-region: auto; /* cut off inheritance */
   padding-bottom: 5px;
 }
 
 .autorepeatbutton-down:not([orient="horizontal"]) {
-  list-style-image: url("chrome://global/skin/scrollbox/autorepeat-arrow-dn.gif");
-  -moz-image-region: auto; /* cut off inheritance */
   padding-top: 5px;
 }
 
+.autorepeatbutton-up:not([orient="horizontal"]) > .autorepeatbutton-icon {
+  -moz-transform: rotate(-90deg);
+}
+
+.autorepeatbutton-down:not([orient="horizontal"]) > .autorepeatbutton-icon {
+  -moz-transform: rotate(90deg);
+}
+
 .scrollbutton-up {
   list-style-image: url("chrome://global/skin/arrow/arrow-up-sharp.gif");
   -moz-image-region: auto; /* cut off inheritance */
@@ -50,14 +54,9 @@
 }
 
 /* Vertical disabled */
-.autorepeatbutton-up[disabled="true"] {
-  list-style-image: url("chrome://global/skin/scrollbox/autorepeat-arrow-up-dis.gif");
-  -moz-image-region: auto; /* cut off inheritance */
-}
-
-.autorepeatbutton-down[disabled="true"] {
-  list-style-image: url("chrome://global/skin/scrollbox/autorepeat-arrow-dn-dis.gif");
-  -moz-image-region: auto; /* cut off inheritance */
+.autorepeatbutton-up[disabled="true"]:not([orient="horizontal"]),
+.autorepeatbutton-down[disabled="true"]:not([orient="horizontal"]) {
+  -moz-image-region: rect(0, 24px, 10px, 16px);
 }
 
 .scrollbutton-up[disabled="true"] {
@@ -76,6 +75,8 @@
 }
 
 autorepeatbutton {
+  list-style-image: url("chrome://global/skin/menu/menu-arrow.png");
+  -moz-image-region: rect(0, 8px, 10px, 0);
   -moz-box-align: center;
   -moz-box-pack: center;
   padding: 1px;