Bug 605985 part 1 - Remove most default styling for checkbox and radio buttons and make the instrinsic size be zero for -moz-appearance:none checkbox/radios. r=dholbert

layout/forms/nsFormControlFrame.cpp

@@ -49,7 +49,7 @@ nsFormControlFrame::GetMinISize(nsRenderingContext *aRenderingContext)
 {
   nscoord result;
   DISPLAY_MIN_WIDTH(this, result);
-  result = GetIntrinsicISize();
+  result = StyleDisplay()->mAppearance == NS_THEME_NONE ? 0 : DefaultSize();
   return result;
 }
 
@@ -58,13 +58,13 @@ nsFormControlFrame::GetPrefISize(nsRenderingContext *aRenderingContext)
 {
   nscoord result;
   DISPLAY_PREF_WIDTH(this, result);
-  result = GetIntrinsicISize();
+  result = StyleDisplay()->mAppearance == NS_THEME_NONE ? 0 : DefaultSize();
   return result;
 }
 
 /* virtual */
 LogicalSize
-nsFormControlFrame::ComputeAutoSize(nsRenderingContext* aRenderingContext,
+nsFormControlFrame::ComputeAutoSize(nsRenderingContext* aRC,
                                     WritingMode         aWM,
                                     const LogicalSize&  aCBSize,
                                     nscoord             aAvailableISize,
@@ -73,27 +73,16 @@ nsFormControlFrame::ComputeAutoSize(nsRenderingContext* aRenderingContext,
                                     const LogicalSize&  aPadding,
                                     ComputeSizeFlags    aFlags)
 {
-  const WritingMode wm = GetWritingMode();
-  LogicalSize result(wm, GetIntrinsicISize(), GetIntrinsicBSize());
-  return result.ConvertTo(aWM, wm);
-}
-
-nscoord
-nsFormControlFrame::GetIntrinsicISize()
-{
-  // Provide a reasonable default for sites that use an "auto" height.
-  // Note that if you change this, you should change the values in forms.css
-  // as well.  This is the 13px default width minus the 2px default border.
-  return nsPresContext::CSSPixelsToAppUnits(13 - 2 * 2);
-}
-
-nscoord
-nsFormControlFrame::GetIntrinsicBSize()
-{
-  // Provide a reasonable default for sites that use an "auto" height.
-  // Note that if you change this, you should change the values in forms.css
-  // as well. This is the 13px default width minus the 2px default border.
-  return nsPresContext::CSSPixelsToAppUnits(13 - 2 * 2);
+  LogicalSize size(aWM, 0, 0);
+  if (StyleDisplay()->mAppearance == NS_THEME_NONE) {
+    return size;
+  }
+  // Note: this call always set the BSize to NS_UNCONSTRAINEDSIZE.
+  size = nsAtomicContainerFrame::ComputeAutoSize(aRC, aWM, aCBSize,
+                                                 aAvailableISize, aMargin,
+                                                 aBorder, aPadding, aFlags);
+  size.BSize(aWM) = DefaultSize();
+  return size;
 }
 
 nscoord

layout/forms/nsFormControlFrame.h

@@ -108,20 +108,19 @@ protected:
 
   virtual ~nsFormControlFrame();
 
-  nscoord GetIntrinsicISize();
-  nscoord GetIntrinsicBSize();
-
-//
-//-------------------------------------------------------------------------------------
-//  Utility methods for managing checkboxes and radiobuttons
-//-------------------------------------------------------------------------------------
-//
-   /**
-    * Get the state of the checked attribute.
-    * @param aState set to true if the checked attribute is set,
-    * false if the checked attribute has been removed
-    */
+  static nscoord DefaultSize()
+  {
+    // XXXmats We have traditionally always returned 9px for GetMin/PrefISize
+    // but we might want to factor in what the theme says, something like:
+    // GetMinimumWidgetSize - GetWidgetPadding - GetWidgetBorder.
+    return nsPresContext::CSSPixelsToAppUnits(9);
+  }
 
+  /**
+   * Get the state of the checked attribute.
+   * @param aState set to true if the checked attribute is set,
+   * false if the checked attribute has been removed
+   */
   void GetCurrentCheckState(bool* aState);
 };
 

layout/style/res/forms.css

@@ -551,7 +551,6 @@ input[type="radio"] {
   margin-block-end: 0px;
   margin-inline-start: 5px;
   margin-inline-end: 3px;
-  border-radius: 100%;
 }
 
 /* check boxes */
@@ -561,11 +560,46 @@ input[type="checkbox"] {
   margin-block-end: 3px;
   margin-inline-start: 4px;
   margin-inline-end: 3px;
-  border-radius: 0;
 }
 
 /* common features of radio buttons and check boxes */
 
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  cursor: default;
+  /* unset some values from the general 'input' rule above: */
+  padding: unset;
+  -moz-binding: unset;
+  border: unset;
+  background-color: unset;
+}
+
+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 {
+  cursor: inherit;
+}
+
+%if defined(MOZ_WIDGET_ANDROID) || defined(MOZ_WIDGET_GONK)
+/*
+ * These platforms doesn't have any theming support and thus 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
@@ -573,12 +607,8 @@ input[type="checkbox"] {
    (Should we maybe set !important on width and height, then?)  */
 input[type="radio"],
 input[type="checkbox"] {
-  box-sizing: border-box;
   inline-size: 13px;
   block-size: 13px;
-  cursor: default;
-  padding: 0;
-  -moz-binding: none;
   border: 2px inset ThreeDLightShadow;
   background-repeat: no-repeat;
   background-position: center;
@@ -594,19 +624,8 @@ input[type="checkbox"]:disabled:hover,
 input[type="checkbox"]:disabled:hover:active {
   padding: 1px;
   border: 1px inset ThreeDShadow;
-  cursor: inherit;
 }
 
-% 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;
-}
-%endif
-
 input[type="checkbox"]:hover:active,
 input[type="radio"]:hover:active {
   background-color: ThreeDFace;
@@ -645,6 +664,18 @@ input[type="checkbox"]:indeterminate:disabled {
   background-image: url(indeterminate-checkmark.svg#disabled);
 }
 
+%endif /* defined(MOZ_WIDGET_ANDROID) || defined(MOZ_WIDGET_GONK) */
+
+% 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;
+}
+%endif
+
 input[type="search"] {
   box-sizing: border-box;
 }