Bug 301105. [Mac] Classic: Use native-styled menus/menupopups. Patch by stefanh, r=Mano/Mnyromyr, sr=neil.

themes/classic/global/mac/autocomplete.css

@@ -80,11 +80,8 @@ textbox {
 
 .autocomplete-result-popup,
 .autocomplete-history-popup {
-  border-width: 1px;
-  -moz-border-top-colors: ThreeDDarkShadow;
-  -moz-border-right-colors: ThreeDDarkShadow;
-  -moz-border-bottom-colors: ThreeDDarkShadow;
-  -moz-border-left-colors: ThreeDDarkShadow;
+  -moz-appearance: none !important;
+  border-top: 1px solid ThreeDDarkShadow !important;
   padding: 0;
   background-color: -moz-Field !important;
 }
@@ -93,6 +90,11 @@ textbox {
   max-height: 25em;
 }
 
+.autocomplete-result-popup > .popup-internal-box,
+.autocomplete-history-popup > .popup-internal-box {
+  padding: 0 !important;
+}
+
 /* ::::: tree ::::: */
 
 .autocomplete-tree {

themes/classic/global/mac/menu.css

@@ -46,7 +46,7 @@
 
 menu, 
 menuitem {
-  -moz-appearance: menu !important;
+  -moz-appearance: menuitem !important;
   -moz-box-align: center;
   color: MenuText;
   font: menu;
@@ -62,15 +62,18 @@ menu[disabled="true"],
 menuitem[disabled="true"],
 menu[_moz-menuactive="true"][disabled="true"],
 menuitem[_moz-menuactive="true"][disabled="true"] {
-  background-color: transparent !important;
   color: GrayText !important;
 }
 
+.menu-iconic,
+.menuitem-iconic {
+  margin-top: 0 !important;
+}
+
 /* ..... internal content .... */
 
 .menu-text, 
 .menu-accel,
-.menu-iconic-left,
 .menu-iconic-text,
 .menu-iconic-accel {
   margin: 0px 2px 0px 0px !important;
@@ -82,6 +85,18 @@ menuitem[_moz-menuactive="true"][disabled="true"] {
   font-weight: inherit;
 }
 
+.menu-iconic-left {
+  margin: 1px 2px 1px 18px !important;
+  color: inherit;
+}
+
+menulist > menupopup > menuitem > .menu-iconic-left,
+.menulist-menupopup > menuitem > .menu-iconic-left,
+menuitem[type="checkbox"] > .menu-iconic-left,
+menuitem[type="radio"] > .menu-iconic-left {
+  margin: 0 2px 0 0 !important;
+}
+
 .menu-description {
   font-style: italic;
   color: GrayText;
@@ -107,7 +122,7 @@ menuitem[_moz-menuactive="true"][disabled="true"] {
 /* ..... menu arrow box ..... */
 
 .menu-right {
-  margin: 0px 0px 0px 6px;
+  margin: 0px 8px 0px 6px;
   width: 8px;
   list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
   -moz-image-region: auto;
@@ -127,23 +142,14 @@ menuitem[_moz-menuactive="true"][disabled="true"] {
 /* ::::: menu/menuitems in menubar ::::: */
 
 menubar > menu {
-  border: 1px solid transparent;
+  -moz-appearance: none !important;
   padding: 2px 5px 2px 7px;
   margin: 1px 0px 1px 0px;
 }
 
-menubar > menu[_moz-menuactive="true"] {
-  border-top: 1px solid ThreeDHighlight;
-  border-right: 1px solid ThreeDShadow;
-  border-bottom: 1px solid ThreeDShadow;
-  border-left: 1px solid ThreeDHighlight;
-}
-
 menubar > menu[_moz-menuactive="true"][open="true"] {
-  border-top: 1px solid ThreeDShadow;
-  border-right: 1px solid ThreeDHighlight;
-  border-bottom: 1px solid ThreeDHighlight;
-  border-left: 1px solid ThreeDShadow;
+  -moz-appearance: menuitem !important;
+  color: -moz-mac-menutextselect !important
 }
 
 /* ..... internal content .... */
@@ -164,7 +170,7 @@ menupopup > menu,
 popup > menu,
 menupopup > menuitem,
 popup > menuitem {
-  padding: 1px;
+  padding: 1px 3px 1px 3px;
   max-width: 42em;
 }
 
@@ -172,41 +178,23 @@ menupopup > menu[_moz-menuactive="true"],
 menupopup > menuitem[_moz-menuactive="true"],
 popup > menu[_moz-menuactive="true"],
 popup > menuitem[_moz-menuactive="true"] {
-  background-color: -moz-mac-menuselect;
   color: -moz-mac-menutextselect;
 }
 
-/* ::::: checkbox menuitem ::::: */
+/* ::::: Checked menuitems ::::: */
 
 menuitem[checked="true"] {
-  list-style-image: url("chrome://global/skin/menu/menu-check.gif");
+  list-style-image: url("chrome://global/skin/menu/menu-check.png");
   -moz-image-region: auto;
 }
 
 menuitem[checked="true"][disabled="true"] {
-  list-style-image: url("chrome://global/skin/menu/menu-check-dis.gif");
+  list-style-image: url("chrome://global/skin/menu/menu-check-dis.png");
   -moz-image-region: auto;
 }
 
 menuitem[checked="true"][_moz-menuactive="true"] {
-  list-style-image: url("chrome://global/skin/menu/menu-check-hov.gif");
-  -moz-image-region: auto;
-}
-
-/* ::::: radio menuitem ::::: */
-
-menuitem[checked="true"][type="radio"] {
-  list-style-image: url("chrome://global/skin/menu/menu-radio.gif");
-  -moz-image-region: auto;
-}
-
-menuitem[checked="true"][type="radio"][_moz-menuactive="true"] {
-  list-style-image: url("chrome://global/skin/menu/menu-radio-hov.gif");
-  -moz-image-region: auto;
-}
-
-menuitem[checked="true"][type="radio"][disabled="true"] {
-  list-style-image: url("chrome://global/skin/menu/menu-radio-dis.gif");
+  list-style-image: url("chrome://global/skin/menu/menu-check-hov.png");
   -moz-image-region: auto;
 }
 
@@ -215,43 +203,50 @@ menuitem[checked="true"][type="radio"][disabled="true"] {
 menulist > menupopup > menuitem,
 .menulist-menupopup > menuitem {
   max-width: none;
-  padding: 0px 20px 0px 0px;
+  padding-right: 20px;
   font: message-box;
 }
 
 menulist > menupopup > menuitem[selected="true"],
 .menulist-menupopup > menuitem[selected="true"] {
-  list-style-image: url("chrome://global/skin/menu/menu-radio.gif");
+  list-style-image: url("chrome://global/skin/menu/menu-check.png");
   -moz-image-region: auto;
 }
 
 menulist > menupopup > menuitem[_moz-menuactive="true"][selected="true"],
 .menulist-menupopup > menuitem[_moz-menuactive="true"][selected="true"] {
-  list-style-image: url("chrome://global/skin/menu/menu-radio-hov.gif");
+  list-style-image: url("chrome://global/skin/menu/menu-check-hov.png");
   -moz-image-region: auto;
 }
 
 /* ::::: menuseparator ::::: */
 
 menuseparator {
-  -moz-appearance: separator;
-  margin: 2px 3px;
-  border-top: 1px solid ThreeDShadow;
-  border-bottom: 1px solid ThreeDHighlight;
+  margin: 5px 0 4px 0;
+  padding: 1px 0;
+  border-top: 1px solid #d9d9d9;
 }
 
 menulist > menupopup > menuseparator,
 .menulist-menupopup > menuseparator {
-  margin: 2px 0;
-  border-top: 1px solid #000000;
-  border-bottom: none;
+  margin: 4px 0 3px 0;
 }
 
 /* ::::: autocomplete ::::: */
 
 .autocomplete-history-popup > menuitem {
+  -moz-appearance: none !important;
   max-width: none !important;
   font: message-box;
+  height: 1.3em;
+  min-height: 18px;
+  padding: 0px 2px 0px 2px;
+  margin: 0;
+}
+
+.autocomplete-history-popup > menuitem[_moz-menuactive="true"] {
+  color: inherit !important;
+  background-color: Highlight !important;
 }
 
 /* ::::: tree column picker ::::: */

themes/classic/global/mac/popup.css

@@ -46,17 +46,14 @@
 
 menupopup,
 popup {
-  -moz-appearance: menu;
-  border-top: 2px solid;
-  border-right: 3px solid;
-  border-bottom: 3px solid;
-  border-left: 2px solid;
-  -moz-border-top-colors: #000000 #FFFFFF;
-  -moz-border-right-colors: #000000 #000000 #777777;
-  -moz-border-bottom-colors: #000000 #000000 #777777;
-  -moz-border-left-colors: #000000 #FFFFFF;
-  background-color: Menu;
-  min-width: 1px;
+  -moz-appearance: menupopup;
+}
+
+/* ::::: popup internal box ::::: */
+
+.popup-internal-box {
+  -moz-appearance: none;
+  padding: 4px 0px 4px 0px !important;
 }
 
 /* ::::: tooltip ::::: */

themes/classic/global/mac/scrollbox.css

@@ -3,28 +3,19 @@
 /*
  * Autorepeatbutton
  */
-.autorepeatbutton-up 
-  {
-    list-style-image      : url("chrome://global/skin/arrow/arrow-up.gif")
-  }
+.autorepeatbutton-up {
+  list-style-image: url("chrome://global/skin/scrollbox/autorepeat-arrow-up.gif");
+  padding-bottom: 6px;
+}
 
-.autorepeatbutton-down 
-  {
-    list-style-image      : url("chrome://global/skin/arrow/arrow-dn.gif")
-  }
+.autorepeatbutton-down {
+  list-style-image: url("chrome://global/skin/scrollbox/autorepeat-arrow-dn.gif");
+  padding-top: 6px;
+}
 
-autorepeatbutton 
-  {
-    -moz-box-align        : center;
-    -moz-box-pack         : center;
-    margin                : 1px 2px 2px 1px;
-    border                : 1px solid transparent;
-    padding               : 1px;
-  }
-
-autorepeatbutton:hover 
-  {
-    margin                : 1px;
-    border                : 1px inset ThreeDFace;
-    padding               : 2px 1px 1px 2px;
-  }
+autorepeatbutton {
+  -moz-box-align: center;
+  -moz-box-pack: center;
+  padding: 1px;
+  margin: 1px;
+}

themes/classic/jar.mn

@@ -188,11 +188,9 @@ classic.jar:
   skin/classic/global/menu/menu-arrow-hov.gif                   (global/mac/menu/menu-arrow-hov.gif)
   skin/classic/global/menu/menu-arrow-dis.gif                   (global/mac/menu/menu-arrow-dis.gif)
   skin/classic/global/menu/menu-arrow.gif                       (global/mac/menu/menu-arrow.gif)
-  skin/classic/global/menu/menu-check.gif                       (global/mac/menu/menu-check.gif)
-  skin/classic/global/menu/menu-check-dis.gif                   (global/mac/menu/menu-check-dis.gif)
-  skin/classic/global/menu/menu-check-hov.gif                   (global/mac/menu/menu-check-hov.gif)
-  skin/classic/global/menu/menu-radio.gif                       (global/mac/menu/menu-radio.gif)
-  skin/classic/global/menu/menu-radio-hov.gif                   (global/mac/menu/menu-radio-hov.gif)
+  skin/classic/global/menu/menu-check.png                       (/toolkit/themes/pinstripe/global/menu/menu-check.png)
+  skin/classic/global/menu/menu-check-dis.png                   (/toolkit/themes/pinstripe/global/menu/menu-check-dis.png)
+  skin/classic/global/menu/menu-check-hov.png                   (/toolkit/themes/pinstripe/global/menu/menu-check-hov.png)
   skin/classic/global/menulist/menulist-arrow-act.gif           (global/mac/menulist/menulist-arrow-act.gif)
   skin/classic/global/menulist/menulist-arrow.gif               (global/mac/menulist/menulist-arrow.gif)
   skin/classic/global/menulist/menulist-arrow-dis.gif           (global/mac/menulist/menulist-arrow-dis.gif)
@@ -208,6 +206,8 @@ classic.jar:
   skin/classic/global/scrollbar/thumb-hrz.png                   (global/mac/scrollbar/thumb-hrz.png)
   skin/classic/global/scrollbar/thumb-vrt.png                   (global/mac/scrollbar/thumb-vrt.png)
   skin/classic/global/scrollbar/btn-dn.gif                      (global/mac/scrollbar/btn-dn.gif)
+  skin/classic/global/scrollbox/autorepeat-arrow-dn.gif         (global/mac/scrollbox/autorepeat-arrow-dn.gif)
+  skin/classic/global/scrollbox/autorepeat-arrow-up.gif         (global/mac/scrollbox/autorepeat-arrow-up.gif)
   skin/classic/global/tabbox/tab-unselect-active-left.gif       (global/mac/tabbox/tab-unselect-active-left.gif)
   skin/classic/global/tabbox/tab-border-bot-left-cap.gif        (global/mac/tabbox/tab-border-bot-left-cap.gif)
   skin/classic/global/tabbox/tab-border-bot-right-cap.gif       (global/mac/tabbox/tab-border-bot-right-cap.gif)