Bug 1479708 - Hide required date time input reset button. r=emilio

Differential Revision: https://phabricator.services.mozilla.com/D39315

--HG--
extra : moz-landing-system : lando
This commit is contained in:
François Freitag 2019-07-25 10:28:52 +00:00
parent 2062812e83
commit b81795066d
4 changed files with 91 additions and 2 deletions

View File

@ -40,6 +40,7 @@ skip-if = android_version == '18' # Android, bug 1147974
[test_input_datetime_focus_blur_events.html]
[test_input_datetime_focus_state.html]
[test_input_datetime_hidden.html]
[test_input_datetime_reset_button.html]
[test_input_datetime_reset_default_value_input_change_event.html]
[test_input_datetime_tabindex.html]
[test_input_defaultValue.html]

View File

@ -0,0 +1,82 @@
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1479708
-->
<head>
<title>Test required date/time input can't be reset</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css" />
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1479708">Mozilla Bug 1479708</a>
<p id="display"></p>
<div id="content">
<input type="date" id="id_date" value="2017-06-08">
<input type="time" id="id_time" value="10:30">
<input type="date" id="id_date_required" value="2017-06-08" required>
<input type="time" id="id_time_required" value="10:30" required>
</div>
<pre id="test">
<script class="testbody">
const isDesktop = !/Mobile|Tablet/.test(navigator.userAgent);
SimpleTest.waitForExplicitFinish();
SimpleTest.waitForFocus(function() {
if (isDesktop) {
// Initial load.
assert_reset_visible("id_date");
assert_reset_visible("id_time");
assert_reset_hidden("id_date_required");
assert_reset_hidden("id_time_required");
// Dynamic toggling.
test_make_required("id_date");
test_make_required("id_time");
test_make_optional("id_date_required");
test_make_optional("id_time_required");
} else {
ok(true, "Mobile and tablet dont show reset button");
}
SimpleTest.finish();
});
function test_make_required(id) {
const input = document.getElementById(id);
is(input.required, false, `Precondition: input #${id} is optional`);
input.required = true;
assert_reset_hidden(id);
}
function test_make_optional(id) {
const input = document.getElementById(id);
is(input.required, true, `Precondition: input #${id} is required`);
input.required = false;
assert_reset_visible(id);
}
function assert_reset_visible(id) {
const resetButton = get_reset_button(id);
is(resetButton.style.visibility, "", `Reset button is visible on #${id}`);
}
function assert_reset_hidden(id) {
const resetButton = get_reset_button(id);
is(resetButton.style.visibility, "hidden", `Reset button is hidden on #${id}`);
}
function get_reset_button(id) {
const input = document.getElementById(id);
const shadowRoot = SpecialPowers.wrap(input).openOrClosedShadowRoot;
return shadowRoot.getElementById("reset-button");
}
</script>
</pre>
</body>
</html>

View File

@ -233,7 +233,8 @@ nsresult nsDateTimeControlFrame::AttributeChanged(int32_t aNameSpaceID,
// nsGkAtoms::disabled is handled by SyncDisabledState
if (aNameSpaceID == kNameSpaceID_None) {
if (aAttribute == nsGkAtoms::value || aAttribute == nsGkAtoms::readonly ||
aAttribute == nsGkAtoms::tabindex) {
aAttribute == nsGkAtoms::tabindex ||
aAttribute == nsGkAtoms::required) {
MOZ_ASSERT(mContent->IsHTMLElement(nsGkAtoms::input), "bad cast");
auto contentAsInputElem =
static_cast<dom::HTMLInputElement*>(GetContent());

View File

@ -337,7 +337,7 @@ this.DateTimeInputBaseImplWidget = class {
}
updateResetButtonVisibility() {
if (this.isAnyFieldAvailable(false)) {
if (this.isAnyFieldAvailable(false) && !this.isRequired()) {
this.mResetButton.style.visibility = "";
} else {
this.mResetButton.style.visibility = "hidden";
@ -438,6 +438,7 @@ this.DateTimeInputBaseImplWidget = class {
}
this.mResetButton.disabled = this.mInputElement.disabled;
this.updateResetButtonVisibility();
}
isEmpty(aValue) {
@ -513,6 +514,10 @@ this.DateTimeInputBaseImplWidget = class {
return this.mInputElement.hasAttribute("readonly");
}
isRequired() {
return this.mInputElement.hasAttribute("required");
}
handleEvent(aEvent) {
this.log("handleEvent: " + aEvent.type);