Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-23 04:41:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1790700 - Show <input type='number'> spin buttons only on hover/focus, also hide them on Android r=emilio

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D202312
This commit is contained in:
Gregory Pappas 2024-02-25 03:14:08 +00:00
parent b8eb9f7912
commit 9ca7fc04b2
6 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
layout/forms/nsNumberControlFrame.cpp
View File

@ -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);
// Create the ::-moz-number-spin-up pseudo-element:
mSpinUp = MakeAnonElement(PseudoStyleType::mozNumberSpinUp, mSpinBox);
// Create the ::-moz-number-spin-down pseudo-element:
mSpinDown = MakeAnonElement(PseudoStyleType::mozNumberSpinDown, mSpinBox);
aElements.AppendElement(mSpinBox);
if (StyleDisplay()->EffectiveAppearance() == StyleAppearance::Textfield) {
return NS_OK;
}
// Create the ::-moz-number-spin-box pseudo-element:
mSpinBox = MakeAnonElement(PseudoStyleType::mozNumberSpinBox);
// Create the ::-moz-number-spin-up pseudo-element:
mSpinUp = MakeAnonElement(PseudoStyleType::mozNumberSpinUp, mSpinBox);
// Create the ::-moz-number-spin-down pseudo-element:
mSpinDown = MakeAnonElement(PseudoStyleType::mozNumberSpinDown, mSpinBox);
aElements.AppendElement(mSpinBox);
return NS_OK;
#endif
}
/* static */

2
layout/reftests/forms/input/number/number.html Normal file
View File

@ -0,0 +1,2 @@
<!doctype html>
<input type=number>

6
layout/reftests/forms/input/number/reftest.list
View File

@ -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

7
layout/style/res/forms.css
View File

@ -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;

7
modules/libpref/init/StaticPrefList.yaml
View File

@ -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

1
xpcom/ds/StaticAtoms.py
View File

@ -2411,6 +2411,7 @@ STATIC_ATOMS = [
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"),