Bug 1466715 - Remove unimplemented -moz-appearance:window from XUL document elements on Windows and align on 'dialog' elsewhere. r=dao,emilio
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Sun, 10 Jun 2018 14:54:06 -0700
changeset 806723 2091c74ecd29d90d96e4302ae0467eb3bed7973c
parent 806530 8ab6afabc78cd909ff90ba74c1eab098985f83ef
child 806724 aaa10924c04bc24dd9df9ef858086b6b5692811d
push id112919
push userjdescottes@mozilla.com
push dateMon, 11 Jun 2018 10:52:00 +0000
reviewersdao, emilio
bugs1466715, 119737
milestone62.0a1
Bug 1466715 - Remove unimplemented -moz-appearance:window from XUL document elements on Windows and align on 'dialog' elsewhere. r=dao,emilio Before this commit, we use `-moz-appearance: dialog;`[1] (mapping to NS_THEME_DIALOG) in global.css on macOS for XUL root elements while on Windows[2] and Linux[3] we use `-moz-appearance: window;` (mapping to NS_THEME_WINDOW). From what I can tell NS_THEME_WINDOW behaves the same as NS_THEME_DIALOG on Linux[4], NS_THEME_WINDOW doesn't do anything useful on macOS[5], and neither are implemented on Windows (bug 119737). [1] https://dxr.mozilla.org/mozilla-central/rev/0ee6b755ab2ee6d2ab79b17cc97bd4e83424cbfc/toolkit/themes/osx/global/global.css#35 [2] https://dxr.mozilla.org/mozilla-central/rev/0ee6b755ab2ee6d2ab79b17cc97bd4e83424cbfc/toolkit/themes/windows/global/global.css#41 [3] https://dxr.mozilla.org/mozilla-central/rev/0ee6b755ab2ee6d2ab79b17cc97bd4e83424cbfc/toolkit/themes/linux/global/global.css#45 [4] All references to NS_THEME_WINDOW and NS_THEME_DIALOG seem to handle the other in the same way. [5] https://dxr.mozilla.org/mozilla-central/search?q=regexp%3ANS_THEME_WINDOW%5Cb+path%3Acocoa&redirect=false MozReview-Commit-ID: 6TGzDnMEY2y
layout/style/nsCSSProps.cpp
toolkit/themes/linux/global/global.css
toolkit/themes/windows/global/global.css
--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -370,16 +370,20 @@ const KTableEntry nsCSSProps::kAppearanc
   { eCSSKeyword_scalethumbend,          NS_THEME_SCALETHUMBEND },
   { eCSSKeyword_scalethumbtick,         NS_THEME_SCALETHUMBTICK },
   { eCSSKeyword_groupbox,               NS_THEME_GROUPBOX },
   { eCSSKeyword_checkbox_container,     NS_THEME_CHECKBOX_CONTAINER },
   { eCSSKeyword_radio_container,        NS_THEME_RADIO_CONTAINER },
   { eCSSKeyword_checkbox_label,         NS_THEME_CHECKBOX_LABEL },
   { eCSSKeyword_radio_label,            NS_THEME_RADIO_LABEL },
   { eCSSKeyword_button_focus,           NS_THEME_BUTTON_FOCUS },
+  // Even though window is meant for OS window styling, web developers use
+  // `window` on <select> to remove the dropmarker. Care should be taken when
+  // changing -moz-appearance:window to avoid web compatibility regressions.
+  // See https://bugzilla.mozilla.org/show_bug.cgi?id=1466715#c10
   { eCSSKeyword_window,                 NS_THEME_WINDOW },
   { eCSSKeyword_dialog,                 NS_THEME_DIALOG },
   { eCSSKeyword_menubar,                NS_THEME_MENUBAR },
   { eCSSKeyword_menupopup,              NS_THEME_MENUPOPUP },
   { eCSSKeyword_menuitem,               NS_THEME_MENUITEM },
   { eCSSKeyword_checkmenuitem,          NS_THEME_CHECKMENUITEM },
   { eCSSKeyword_radiomenuitem,          NS_THEME_RADIOMENUITEM },
   { eCSSKeyword_menucheckbox,           NS_THEME_MENUCHECKBOX },
--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -37,17 +37,17 @@ progressmeter[mode="undetermined"] {
 }
 
 /* ::::: root elements ::::: */
 
 window,
 page,
 dialog,
 wizard {
-  -moz-appearance: window;
+  -moz-appearance: dialog;
   background-color: -moz-Dialog;
   color: -moz-DialogText;
   font: message-box;
 }
 
 /* deprecated */
 window.dialog {
   padding-top: 8px;
--- a/toolkit/themes/windows/global/global.css
+++ b/toolkit/themes/windows/global/global.css
@@ -33,17 +33,16 @@ menulist > menupopup {
 }
 
 /* ::::: root elements ::::: */
 
 window,
 page,
 dialog,
 wizard {
-  -moz-appearance: window;
   background-color: -moz-Dialog;
   color: -moz-DialogText;
   font: message-box;
 }
 
 /* deprecated */
 window.dialog {
   padding-top: 8px;