Bug 1352238 Part 2 - Remove default styling of checkbox/radio in UA sheets. r=mats
authorLouis Chang <lochang@mozilla.com>
Tue, 05 Sep 2017 22:44:29 +0800
changeset 378940 c60cee53a36321b62fc6c915719ba3806ab15e00
parent 378939 c6e7fb7bfc1f09f4e3c3898e1674560400aeed3d
child 378941 d0e60b3b1b582811fa9b2c1a2baff0090e5d7c62
push id50440
push userryanvm@gmail.com
push dateTue, 05 Sep 2017 16:32:55 +0000
treeherderautoland@bd7c2148cc80 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmats
bugs1352238
milestone57.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 1352238 Part 2 - Remove default styling of checkbox/radio in UA sheets. r=mats MozReview-Commit-ID: 6sd18LI3yw2
layout/style/res/forms.css
mobile/android/themes/geckoview/content.css
--- a/layout/style/res/forms.css
+++ b/layout/style/res/forms.css
@@ -593,65 +593,16 @@ input[type="radio"]:disabled:hover,
 input[type="radio"]:disabled:hover:active,
 input[type="checkbox"]:disabled,
 input[type="checkbox"]:disabled:active,
 input[type="checkbox"]:disabled:hover,
 input[type="checkbox"]:disabled:hover:active {
   cursor: inherit;
 }
 
-%if defined(MOZ_WIDGET_ANDROID)
-/*
- * These platforms doesn't have any theming support and thus -moz-appearance:none
- * is the same as any other appearance value.
- * XXX This is not web-compatible and should be fixed.
- */
-input[type="radio"] {
-  border-radius: 100%;
-}
-
-input[type="checkbox"] {
-  border-radius: 0;
-}
-
-/* NOTE: The width, height, border-width, and padding here must all
-   add up the way nsFormControlFrame::GetIntrinsic(Width|Height)
-   expects them to, or they will not come out with total width equal
-   to total height on sites that set their 'width' or 'height' to 'auto'.
-   (Should we maybe set !important on width and height, then?)  */
-input[type="radio"],
-input[type="checkbox"] {
-  inline-size: 13px;
-  block-size: 13px;
-  color: -moz-FieldText;
-  border: 2px inset ThreeDLightShadow;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
-input[type="radio"]:disabled,
-input[type="radio"]:disabled:active,
-input[type="radio"]:disabled:hover,
-input[type="radio"]:disabled:hover:active,
-input[type="checkbox"]:disabled,
-input[type="checkbox"]:disabled:active,
-input[type="checkbox"]:disabled:hover,
-input[type="checkbox"]:disabled:hover:active {
-  padding: 1px;
-  border: 1px inset ThreeDShadow;
-}
-
-input[type="checkbox"]:hover:active,
-input[type="radio"]:hover:active {
-  background-color: ThreeDFace ! important;
-  border-style: inset !important;
-}
-
-%endif /* defined(MOZ_WIDGET_ANDROID) */
-
 % On Mac, the native theme takes care of this.
 % See nsNativeThemeCocoa::ThemeDrawsFocusForWidget.
 %ifndef XP_MACOSX
 input[type="checkbox"]:-moz-focusring,
 input[type="radio"]:-moz-focusring {
   /* Don't specify the outline-color, we should always use initial value. */
   outline: 1px dotted;
 }
--- a/mobile/android/themes/geckoview/content.css
+++ b/mobile/android/themes/geckoview/content.css
@@ -93,17 +93,17 @@ select[size="1"] xul|scrollbarbutton {
   margin-left: 0;
   min-width: 16px;
 }
 
 /* Override inverse OS themes */
 textarea,
 button,
 xul|button,
-* > input:not([type="image"]) {
+* > input:not(:-moz-any([type="image"], [type="checkbox"], [type="radio"])) {
   -moz-appearance: none !important;  /* See bug 598421 for fixing the platform */
 }
 
 textarea,
 button,
 xul|button,
 * > input:not(:-moz-any([type="image"], [type="checkbox"], [type="radio"])) {
   border-radius: var(--form_border_radius);
@@ -133,37 +133,29 @@ select[size="1"],
 * > input[type="reset"],
 button {
   border-style: solid;
   border-color: var(--form_border);
   color: var(--form_text);
   background-color: var(--form_background);
 }
 
-input[type="checkbox"] {
-  background-color: var(--form_background);
-}
-
-input[type="radio"] {
-  background-color: var(--form_background)
-}
-
 select {
   border-width: 1px;
   padding: 1px;
   border-radius: var(--form_border_radius);
 }
 
 select:not([size]):not([multiple]),
 select[size="0"],
 select[size="1"] {
   padding: 0 1px 0 1px;
 }
 
-* > input:not([type="image"]) {
+* > input:not(:-moz-any([type="image"], [type="checkbox"], [type="radio"])) {
   border-width: 1px;
   padding: 1px;
 }
 
 textarea {
   resize: none;
   border-width: 1px;
   padding-inline-start: 1px;
@@ -178,25 +170,16 @@ input[type="reset"],
 button {
   border-width: 1px;
   padding-inline-start: 7px;
   padding-inline-end: 7px;
   padding-block-start: 0;
   padding-block-end: 0;
 }
 
-input[type="radio"],
-input[type="checkbox"] {
-  border: 1px solid var(--form_border) !important;
-  padding-inline-start: 1px;
-  padding-inline-end: 1px;
-  padding-block-start: 2px;
-  padding-block-end: 2px;
-}
-
 select > button {
   border-width: 0px !important;
   margin: 0px !important;
   padding: 0px !important;
   border-radius: 0;
   color: #414141;
 
   background-size: auto auto;
@@ -208,17 +191,17 @@ select > button {
   font-size: inherit;
 }
 
 select[size]:focus,
 select[multiple]:focus,
 select[size][multiple]:focus,
 textarea:focus,
 input[type="file"]:focus > input[type="text"],
-* > input:not([type="image"]):focus {
+* > input:not(:-moz-any([type="image"], [type="checkbox"], [type="radio"])):focus {
   outline: 0px !important;
   border-style: solid;
   border-color: var(--form_border);
   background-color: var(--form_background);
 }
 
 select:not([size]):not([multiple]):focus,
 select[size="0"]:focus,
@@ -228,41 +211,28 @@ input[type="submit"]:focus,
 input[type="reset"]:focus,
 button:focus {
   outline: 0px !important;
   border-style: solid;
   border-color: var(--form_border);
   background-color: var(--form_background);
 }
 
-input[type="checkbox"]:focus,
-input[type="radio"]:focus {
-  border-color: var(--form_border) !important;
-}
-
-input[type="checkbox"]:focus {
-  background-color: var(--form_background);
-}
-
-input[type="radio"]:focus {
-  background-color: var(--form_background);
-}
-
 /* we need to be specific for selects because the above rules are specific too */
 textarea:disabled,
 select[size]:disabled,
 select[multiple]:disabled,
 select[size][multiple]:disabled,
 select:not([size]):not([multiple]):disabled,
 select[size="0"]:disabled,
 select[size="1"]:disabled,
 button:disabled,
 button:disabled:active,
-* > input:not([type="image"]):disabled,
-* > input:not([type="image"]):disabled:active {
+* > input:not(:-moz-any([type="image"], [type="checkbox"], [type="radio"])):disabled,
+* > input:not(:-moz-any([type="image"], [type="checkbox"], [type="radio"])):disabled:active {
   color: var(--form_text_disabled);
   border-color: var(--form_border);
   border-style: solid;
   border-width: 1px;
   background-color: var(--form_background_disabled);
 }
 
 select:not([size]):not([multiple]):disabled,
@@ -281,27 +251,16 @@ button:disabled,
 button:disabled:active {
   padding-inline-start: 7px;
   padding-inline-end: 7px;
   padding-block-start: 0;
   padding-block-end: 0;
   background-color: var(--form_background_disabled);
 }
 
-input[type="radio"]:disabled,
-input[type="radio"]:disabled:active,
-input[type="radio"]:disabled:hover,
-input[type="radio"]:disabled:hover:active,
-input[type="checkbox"]:disabled,
-input[type="checkbox"]:disabled:active,
-input[type="checkbox"]:disabled:hover,
-input[type="checkbox"]:disabled:hover:active {
-  border:1px solid var(--form_border) !important;
-}
-
 select:disabled > button {
   opacity: 0.6;
   padding-inline-start: 7px;
   padding-inline-end: 7px;
   padding-block-start: 1px;
   padding-block-end: 1px;
 }
 
@@ -314,17 +273,17 @@ select:disabled > button {
 video:not([controls]) > xul|videocontrols {
   visibility: visible;
   -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#noControls");
 }
 
 *:any-link:active,
 *[role=button]:active,
 button:not(:disabled):active,
-input:not(:focus):not(:disabled):active,
+input:not(:-moz-any([type="checkbox"], [type="radio"])):not(:focus):not(:disabled):active,
 select:not(:disabled):active,
 textarea:not(:focus):not(:disabled):active,
 option:active,
 label:active,
 xul|menulist:active {
   background-color: var(--color_background_highlight_overlay);
 }