Bug 1790700 - Show <input type='number'> spin buttons only on hover/f…

…ocus, also hide them on Android r=emilio r=reland CLOSED TREE Differential Revision: https://phabricator.services.mozilla.com/D202312
Brli · Feb 25, 2024 · 55dba58 · 55dba58
1 parent dbf0220
commit 55dba58
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 11 deletions.
diff --git a/layout/forms/nsNumberControlFrame.cpp b/layout/forms/nsNumberControlFrame.cpp
@@ -64,22 +64,29 @@ nsresult nsNumberControlFrame::CreateAnonymousContent(
 
   nsTextControlFrame::CreateAnonymousContent(aElements);
 
+#if defined(MOZ_WIDGET_ANDROID)
+  // We don't want spin buttons on Android
+  return NS_OK;
+#else
   // The author has elected to hide the spinner by setting this
   // -moz-appearance. We will reframe if it changes.
-  if (StyleDisplay()->EffectiveAppearance() != StyleAppearance::Textfield) {
-    // Create the ::-moz-number-spin-box pseudo-element:
-    mSpinBox = MakeAnonElement(PseudoStyleType::mozNumberSpinBox);
+  if (StyleDisplay()->EffectiveAppearance() == StyleAppearance::Textfield) {
+    return NS_OK;
+  }
 
-    // Create the ::-moz-number-spin-up pseudo-element:
-    mSpinUp = MakeAnonElement(PseudoStyleType::mozNumberSpinUp, mSpinBox);
+  // Create the ::-moz-number-spin-box pseudo-element:
+  mSpinBox = MakeAnonElement(PseudoStyleType::mozNumberSpinBox);
 
-    // Create the ::-moz-number-spin-down pseudo-element:
-    mSpinDown = MakeAnonElement(PseudoStyleType::mozNumberSpinDown, mSpinBox);
+  // Create the ::-moz-number-spin-up pseudo-element:
+  mSpinUp = MakeAnonElement(PseudoStyleType::mozNumberSpinUp, mSpinBox);
 
-    aElements.AppendElement(mSpinBox);
-  }
+  // Create the ::-moz-number-spin-down pseudo-element:
+  mSpinDown = MakeAnonElement(PseudoStyleType::mozNumberSpinDown, mSpinBox);
+
+  aElements.AppendElement(mSpinBox);
 
   return NS_OK;
+#endif
 }
 
 /* static */

diff --git a/layout/reftests/forms/input/number/number.html b/layout/reftests/forms/input/number/number.html
@@ -0,0 +1,2 @@
+<!doctype html>
+<input type=number>
diff --git a/layout/reftests/forms/input/number/reftest.list b/layout/reftests/forms/input/number/reftest.list
@@ -1,5 +1,5 @@
 # sanity checks:
-!= not-other-type-unthemed-1.html not-other-type-unthemed-1a-notref.html
+fails-if(Android) pref(dom.forms.number.hide_spin_buttons_when_no_hover_or_focus,false) != not-other-type-unthemed-1.html not-other-type-unthemed-1a-notref.html
 != not-other-type-unthemed-1.html not-other-type-unthemed-1b-notref.html
 
 # should look the same as type=text, except for the spin box
@@ -17,7 +17,7 @@ fuzzy(0-2,0-13) == show-value.html show-value-ref.html
 
 # disabled
 == number-disabled.html number-disabled-ref.html
-!= number-spinbox-disabled.html number-spinbox-disabled-notref.html
+fails-if(Android) pref(dom.forms.number.hide_spin_buttons_when_no_hover_or_focus,false) != number-spinbox-disabled.html number-spinbox-disabled-notref.html
 
 # auto width:
 == number-auto-width-1.html number-auto-width-1-ref.html
@@ -72,3 +72,5 @@ fuzzy(0-14,0-4) == clipped-text.html clipped-text-ref.html
 fails-if(useDrawSnapshot) needs-focus != caret-right.html caret-right-notref.html
 fails-if(useDrawSnapshot) needs-focus != caret-left-rtl.html caret-left-rtl-notref.html
 fails-if(useDrawSnapshot) needs-focus != caret-right-vertical.html caret-right-vertical-notref.html
+
+fails-if(Android) test-pref(dom.forms.number.hide_spin_buttons_when_no_hover_or_focus,true) ref-pref(dom.forms.number.hide_spin_buttons_when_no_hover_or_focus,false) != number.html number.html
diff --git a/layout/style/res/forms.css b/layout/style/res/forms.css
@@ -868,6 +868,13 @@ input[type=number]::-moz-number-spin-box {
   overflow: clip;
 }
 
+/* stylelint-disable-next-line media-query-no-invalid */
+@media (-moz-bool-pref: "dom.forms.number.hide_spin_buttons_when_no_hover_or_focus") {
+  input[type=number]:not(:hover, :focus)::-moz-number-spin-box {
+    opacity: 0;
+  }
+}
+
 input[type=number]::-moz-number-spin-up,
 input[type=number]::-moz-number-spin-down {
   writing-mode: horizontal-tb;

diff --git a/modules/libpref/init/StaticPrefList.yaml b/modules/libpref/init/StaticPrefList.yaml
@@ -2635,6 +2635,13 @@
   value: false
   mirror: always
 
+# Whether the spin buttons will always appear, or if they
+# will only appear when the input is focused or hovered.
+- name: dom.forms.number.hide_spin_buttons_when_no_hover_or_focus
+  type: bool
+  value: @IS_NIGHTLY_BUILD@
+  mirror: always
+
 # Whether the Gamepad API is enabled
 - name: dom.gamepad.enabled
   type: bool

diff --git a/xpcom/ds/StaticAtoms.py b/xpcom/ds/StaticAtoms.py
@@ -2411,6 +2411,7 @@
     Atom("mathml_legacy_mathvariant_attribute_disabled", "mathml.legacy_mathvariant_attribute.disabled"),
     Atom("layout_css_always_underline_links", "layout.css.always_underline_links"),
     Atom("layout_css_cached_scrollbar_styles_enabled", "layout.css.cached-scrollbar-styles.enabled"),
+    Atom("dom_forms_number_hide_spin_buttons_when_no_hover_or_focus", "dom.forms.number.hide_spin_buttons_when_no_hover_or_focus"),
     # Contextual Identity / Containers
     Atom("usercontextid", "usercontextid"),
     Atom("geckoViewSessionContextId", "geckoViewSessionContextId"),