Skip to main content

script/dom/html/
htmlbuttonelement.rs

1/* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
4
5use std::cell::Cell;
6use std::default::Default;
7
8use dom_struct::dom_struct;
9use html5ever::{LocalName, Prefix, local_name};
10use js::context::JSContext;
11use js::rust::HandleObject;
12use script_bindings::codegen::GenericBindings::DocumentBinding::DocumentMethods;
13use script_bindings::codegen::GenericBindings::DocumentFragmentBinding::DocumentFragmentMethods;
14use script_bindings::codegen::GenericBindings::NodeBinding::NodeMethods;
15use style::selector_parser::PseudoElement;
16use stylo_dom::ElementState;
17
18use crate::dom::activation::Activatable;
19use crate::dom::bindings::codegen::Bindings::HTMLButtonElementBinding::HTMLButtonElementMethods;
20use crate::dom::bindings::codegen::Bindings::NodeBinding::GetRootNodeOptions;
21use crate::dom::bindings::inheritance::Castable;
22use crate::dom::bindings::root::{DomRoot, MutNullableDom};
23use crate::dom::bindings::str::DOMString;
24use crate::dom::commandevent::CommandEvent;
25use crate::dom::document::Document;
26use crate::dom::documentfragment::DocumentFragment;
27use crate::dom::element::attributes::storage::AttrRef;
28use crate::dom::element::{AttributeMutation, Element};
29use crate::dom::event::{Event, EventBubbles, EventCancelable};
30use crate::dom::eventtarget::EventTarget;
31use crate::dom::html::htmlelement::HTMLElement;
32use crate::dom::html::htmlfieldsetelement::HTMLFieldSetElement;
33use crate::dom::html::htmlformelement::{
34    FormControl, FormDatum, FormDatumValue, FormSubmitterElement, HTMLFormElement, ResetFrom,
35    SubmittedFrom,
36};
37use crate::dom::node::{BindContext, Node, NodeTraits, UnbindContext};
38use crate::dom::nodelist::NodeList;
39use crate::dom::types::HTMLInputElement;
40use crate::dom::validation::{Validatable, is_barred_by_datalist_ancestor};
41use crate::dom::validitystate::{ValidationFlags, ValidityState};
42use crate::dom::virtualmethods::{VirtualMethods, vtable_for};
43use crate::script_runtime::CanGc;
44
45#[derive(Clone, Copy, JSTraceable, MallocSizeOf, PartialEq)]
46enum ButtonType {
47    Submit,
48    Reset,
49    Button,
50}
51
52#[dom_struct]
53pub(crate) struct HTMLButtonElement {
54    htmlelement: HTMLElement,
55    button_type: Cell<ButtonType>,
56    form_owner: MutNullableDom<HTMLFormElement>,
57    labels_node_list: MutNullableDom<NodeList>,
58    validity_state: MutNullableDom<ValidityState>,
59}
60
61impl HTMLButtonElement {
62    fn new_inherited(
63        local_name: LocalName,
64        prefix: Option<Prefix>,
65        document: &Document,
66    ) -> HTMLButtonElement {
67        HTMLButtonElement {
68            htmlelement: HTMLElement::new_inherited_with_state(
69                ElementState::ENABLED,
70                local_name,
71                prefix,
72                document,
73            ),
74            button_type: Cell::new(ButtonType::Submit),
75            form_owner: Default::default(),
76            labels_node_list: Default::default(),
77            validity_state: Default::default(),
78        }
79    }
80
81    pub(crate) fn new(
82        cx: &mut js::context::JSContext,
83        local_name: LocalName,
84        prefix: Option<Prefix>,
85        document: &Document,
86        proto: Option<HandleObject>,
87    ) -> DomRoot<HTMLButtonElement> {
88        Node::reflect_node_with_proto(
89            cx,
90            Box::new(HTMLButtonElement::new_inherited(
91                local_name, prefix, document,
92            )),
93            document,
94            proto,
95        )
96    }
97
98    #[inline]
99    pub(crate) fn is_submit_button(&self) -> bool {
100        self.button_type.get() == ButtonType::Submit
101    }
102}
103
104impl HTMLButtonElementMethods<crate::DomTypeHolder> for HTMLButtonElement {
105    /// <https://html.spec.whatwg.org/multipage/#dom-button-command>
106    fn Command(&self) -> DOMString {
107        // Step 1. Let command be this's command attribute.
108        match self.command_state() {
109            // Step 2. If command is in the Custom state, then return command's value.
110            CommandState::Custom => self
111                .upcast::<Element>()
112                .get_string_attribute(&local_name!("command")),
113            // Step 3. If command is in the Unknown state, then return the empty string.
114            CommandState::Unknown => DOMString::default(),
115            // Step 4. Return the keyword corresponding to the value of command.
116            CommandState::Close => DOMString::from("close"),
117            CommandState::ShowModal => DOMString::from("show-modal"),
118        }
119    }
120
121    // https://html.spec.whatwg.org/multipage/#dom-button-command
122    make_setter!(cx, SetCommand, "command");
123
124    // https://html.spec.whatwg.org/multipage/#dom-fe-disabled
125    make_bool_getter!(Disabled, "disabled");
126
127    // https://html.spec.whatwg.org/multipage/#dom-fe-disabled
128    make_bool_setter!(cx, SetDisabled, "disabled");
129
130    /// <https://html.spec.whatwg.org/multipage/#dom-fae-form>
131    fn GetForm(&self) -> Option<DomRoot<HTMLFormElement>> {
132        self.form_owner()
133    }
134
135    /// <https://html.spec.whatwg.org/multipage/#dom-button-type>
136    fn Type(&self) -> DOMString {
137        match self.button_type.get() {
138            ButtonType::Submit => DOMString::from("submit"),
139            ButtonType::Button => DOMString::from("button"),
140            ButtonType::Reset => DOMString::from("reset"),
141        }
142    }
143
144    // https://html.spec.whatwg.org/multipage/#dom-button-type
145    make_setter!(cx, SetType, "type");
146
147    // https://html.spec.whatwg.org/multipage/#dom-fs-formaction
148    make_form_action_getter!(FormAction, "formaction");
149
150    // https://html.spec.whatwg.org/multipage/#dom-fs-formaction
151    make_setter!(cx, SetFormAction, "formaction");
152
153    // https://html.spec.whatwg.org/multipage/#dom-fs-formenctype
154    make_enumerated_getter!(
155        FormEnctype,
156        "formenctype",
157        "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain",
158        invalid => "application/x-www-form-urlencoded"
159    );
160
161    // https://html.spec.whatwg.org/multipage/#dom-fs-formenctype
162    make_setter!(cx, SetFormEnctype, "formenctype");
163
164    // https://html.spec.whatwg.org/multipage/#dom-fs-formmethod
165    make_enumerated_getter!(
166        FormMethod,
167        "formmethod",
168        "get" | "post" | "dialog",
169        invalid => "get"
170    );
171
172    // https://html.spec.whatwg.org/multipage/#dom-fs-formmethod
173    make_setter!(cx, SetFormMethod, "formmethod");
174
175    // https://html.spec.whatwg.org/multipage/#dom-fs-formtarget
176    make_getter!(FormTarget, "formtarget");
177
178    // https://html.spec.whatwg.org/multipage/#dom-fs-formtarget
179    make_setter!(cx, SetFormTarget, "formtarget");
180
181    // https://html.spec.whatwg.org/multipage/#attr-fs-formnovalidate
182    make_bool_getter!(FormNoValidate, "formnovalidate");
183
184    // https://html.spec.whatwg.org/multipage/#attr-fs-formnovalidate
185    make_bool_setter!(cx, SetFormNoValidate, "formnovalidate");
186
187    // https://html.spec.whatwg.org/multipage/#dom-fe-name
188    make_getter!(Name, "name");
189
190    // https://html.spec.whatwg.org/multipage/#dom-fe-name
191    make_atomic_setter!(cx, SetName, "name");
192
193    // https://html.spec.whatwg.org/multipage/#dom-button-value
194    make_getter!(Value, "value");
195
196    // https://html.spec.whatwg.org/multipage/#dom-button-value
197    make_setter!(cx, SetValue, "value");
198
199    // https://html.spec.whatwg.org/multipage/#dom-lfe-labels
200    make_labels_getter!(Labels, labels_node_list);
201
202    /// <https://html.spec.whatwg.org/multipage/#dom-cva-willvalidate>
203    fn WillValidate(&self) -> bool {
204        self.is_instance_validatable()
205    }
206
207    /// <https://html.spec.whatwg.org/multipage/#dom-cva-validity>
208    fn Validity(&self, cx: &mut JSContext) -> DomRoot<ValidityState> {
209        self.validity_state(cx)
210    }
211
212    /// <https://html.spec.whatwg.org/multipage/#dom-cva-checkvalidity>
213    fn CheckValidity(&self, cx: &mut JSContext) -> bool {
214        self.check_validity(cx)
215    }
216
217    /// <https://html.spec.whatwg.org/multipage/#dom-cva-reportvalidity>
218    fn ReportValidity(&self, cx: &mut JSContext) -> bool {
219        self.report_validity(cx)
220    }
221
222    /// <https://html.spec.whatwg.org/multipage/#dom-cva-validationmessage>
223    fn ValidationMessage(&self, cx: &mut JSContext) -> DOMString {
224        self.validation_message(cx)
225    }
226
227    /// <https://html.spec.whatwg.org/multipage/#dom-cva-setcustomvalidity>
228    fn SetCustomValidity(&self, cx: &mut JSContext, error: DOMString) {
229        self.validity_state(cx).set_custom_error_message(cx, error);
230    }
231}
232
233impl HTMLButtonElement {
234    /// <https://html.spec.whatwg.org/multipage/#constructing-the-form-data-set>
235    /// Steps range from 3.1 to 3.7 (specific to HTMLButtonElement)
236    pub(crate) fn form_datum(&self, submitter: Option<FormSubmitterElement>) -> Option<FormDatum> {
237        // Step 3.1: disabled state check is in get_unclean_dataset
238
239        // Step 3.1: only run steps if this is the submitter
240        if let Some(FormSubmitterElement::Button(submitter)) = submitter {
241            if submitter != self {
242                return None;
243            }
244        } else {
245            return None;
246        }
247        // Step 3.2
248        let ty = self.Type();
249        // Step 3.4
250        let name = self.Name();
251
252        if name.is_empty() {
253            // Step 3.1: Must have a name
254            return None;
255        }
256
257        // Step 3.9
258        Some(FormDatum {
259            ty,
260            name,
261            value: FormDatumValue::String(self.Value()),
262        })
263    }
264
265    fn set_type(&self, cx: &mut JSContext, value: DOMString) {
266        let value = match value.to_ascii_lowercase().as_str() {
267            "reset" => ButtonType::Reset,
268            "button" => ButtonType::Button,
269            "submit" => ButtonType::Submit,
270            _ => {
271                let element = self.upcast::<Element>();
272                if element.has_attribute(&local_name!("command")) ||
273                    element.has_attribute(&local_name!("commandfor"))
274                {
275                    ButtonType::Button
276                } else {
277                    ButtonType::Submit
278                }
279            },
280        };
281        self.button_type.set(value);
282        self.validity_state(cx)
283            .perform_validation_and_update(cx, ValidationFlags::all());
284    }
285
286    fn command_for_element(&self, cx: &mut JSContext) -> Option<DomRoot<Element>> {
287        let command_for_value = self
288            .upcast::<Element>()
289            .get_attribute_string_value(&local_name!("commandfor"))?
290            .into();
291
292        let root_node = self
293            .upcast::<Node>()
294            .GetRootNode(&GetRootNodeOptions::empty());
295
296        if let Some(document) = root_node.downcast::<Document>() {
297            return document.GetElementById(cx, command_for_value);
298        } else if let Some(document_fragment) = root_node.downcast::<DocumentFragment>() {
299            return document_fragment.GetElementById(cx, command_for_value);
300        }
301        unreachable!("Button element must be in a document or document fragment");
302    }
303
304    fn command_state(&self) -> CommandState {
305        let command = self
306            .upcast::<Element>()
307            .get_string_attribute(&local_name!("command"));
308        if command.starts_with_str("--") {
309            return CommandState::Custom;
310        }
311        let value = command.to_ascii_lowercase();
312        if value == "close" {
313            return CommandState::Close;
314        }
315        if value == "show-modal" {
316            return CommandState::ShowModal;
317        }
318
319        CommandState::Unknown
320    }
321
322    /// <https://html.spec.whatwg.org/multipage/#determine-if-command-is-valid>
323    fn determine_if_command_is_valid_for_target(
324        command: CommandState,
325        target: DomRoot<Element>,
326    ) -> bool {
327        // Step 1. If command is in the Unknown state, then return false.
328        if command == CommandState::Unknown {
329            return false;
330        }
331        // Step 2. If command is in the Custom state, then return true.
332        if command == CommandState::Custom {
333            return true;
334        }
335        // Step 3. If target is not an HTML element, then return false.
336        if !target.is_html_element() {
337            return false;
338        }
339        // TODO Step 4. If command is in any of the following states:
340        // - Toggle Popover
341        // - Show Popover
342        // - Hide Popover
343        // then return true.
344        // Step 5. If this standard does not define is valid command steps for target's local name, then return false.
345        // Step 6. Otherwise, return the result of running target's corresponding is valid command steps given command.
346        vtable_for(target.upcast::<Node>()).is_valid_command_steps(command)
347    }
348
349    /// <https://html.spec.whatwg.org/multipage/#the-button-element:concept-fe-optional-value>
350    pub(crate) fn optional_value(&self) -> Option<DOMString> {
351        // The element's optional value is the value of the element's value attribute,
352        // if there is one; otherwise null.
353        self.upcast::<Element>()
354            .get_attribute_string_value(&local_name!("value"))
355            .map(|value| value.into())
356    }
357}
358
359impl VirtualMethods for HTMLButtonElement {
360    fn super_type(&self) -> Option<&dyn VirtualMethods> {
361        Some(self.upcast::<HTMLElement>() as &dyn VirtualMethods)
362    }
363
364    fn attribute_mutated(
365        &self,
366        cx: &mut js::context::JSContext,
367        attr: AttrRef<'_>,
368        mutation: AttributeMutation,
369    ) {
370        self.super_type()
371            .unwrap()
372            .attribute_mutated(cx, attr, mutation);
373        match *attr.local_name() {
374            local_name!("disabled") => {
375                let el = self.upcast::<Element>();
376                match mutation {
377                    AttributeMutation::Set(Some(_), _) => {},
378                    AttributeMutation::Set(None, _) => {
379                        el.set_disabled_state(true);
380                        el.set_enabled_state(false);
381                    },
382                    AttributeMutation::Removed => {
383                        el.set_disabled_state(false);
384                        el.set_enabled_state(true);
385                        el.check_ancestors_disabled_state_for_form_control();
386                    },
387                }
388                self.validity_state(cx)
389                    .perform_validation_and_update(cx, ValidationFlags::all());
390            },
391            local_name!("type") => self.set_type(cx, attr.to_dom_string()),
392            local_name!("command") => self.set_type(
393                cx,
394                self.upcast::<Element>()
395                    .get_string_attribute(&local_name!("type")),
396            ),
397            local_name!("commandfor") => self.set_type(
398                cx,
399                self.upcast::<Element>()
400                    .get_string_attribute(&local_name!("type")),
401            ),
402            local_name!("form") => {
403                self.form_attribute_mutated(cx, mutation);
404                self.validity_state(cx)
405                    .perform_validation_and_update(cx, ValidationFlags::empty());
406            },
407            _ => {},
408        }
409    }
410
411    fn bind_to_tree(&self, cx: &mut JSContext, context: &BindContext) {
412        if let Some(s) = self.super_type() {
413            s.bind_to_tree(cx, context);
414        }
415
416        self.upcast::<Element>()
417            .check_ancestors_disabled_state_for_form_control();
418    }
419
420    fn unbind_from_tree(&self, cx: &mut JSContext, context: &UnbindContext) {
421        self.super_type().unwrap().unbind_from_tree(cx, context);
422
423        let node = self.upcast::<Node>();
424        let el = self.upcast::<Element>();
425        if node
426            .ancestors()
427            .any(|ancestor| ancestor.is::<HTMLFieldSetElement>())
428        {
429            el.check_ancestors_disabled_state_for_form_control();
430        } else {
431            el.check_disabled_attribute();
432        }
433    }
434}
435
436impl FormControl for HTMLButtonElement {
437    fn form_owner(&self) -> Option<DomRoot<HTMLFormElement>> {
438        self.form_owner.get()
439    }
440
441    fn set_form_owner(&self, form: Option<&HTMLFormElement>) {
442        self.form_owner.set(form);
443    }
444
445    fn to_element(&self) -> &Element {
446        self.upcast::<Element>()
447    }
448}
449
450impl Validatable for HTMLButtonElement {
451    fn as_element(&self) -> &Element {
452        self.upcast()
453    }
454
455    fn validity_state(&self, cx: &mut JSContext) -> DomRoot<ValidityState> {
456        self.validity_state
457            .or_init(|| ValidityState::new(cx, &self.owner_window(), self.upcast()))
458    }
459
460    fn is_instance_validatable(&self) -> bool {
461        // https://html.spec.whatwg.org/multipage/#the-button-element%3Abarred-from-constraint-validation
462        // https://html.spec.whatwg.org/multipage/#enabling-and-disabling-form-controls%3A-the-disabled-attribute%3Abarred-from-constraint-validation
463        // https://html.spec.whatwg.org/multipage/#the-datalist-element%3Abarred-from-constraint-validation
464        self.button_type.get() == ButtonType::Submit &&
465            !self.upcast::<Element>().disabled_state() &&
466            !is_barred_by_datalist_ancestor(self.upcast())
467    }
468}
469
470impl Activatable for HTMLButtonElement {
471    fn as_element(&self) -> &Element {
472        self.upcast()
473    }
474
475    fn is_instance_activatable(&self) -> bool {
476        // https://html.spec.whatwg.org/multipage/#the-button-element
477        !self.upcast::<Element>().disabled_state()
478    }
479
480    /// <https://html.spec.whatwg.org/multipage/#the-button-element:activation-behaviour>
481    fn activation_behavior(
482        &self,
483        cx: &mut js::context::JSContext,
484        event: &Event,
485        target: &EventTarget,
486    ) {
487        // Step 2. If element's node document is not fully active, then return.
488        if !target
489            .downcast::<Node>()
490            .is_none_or(|node| node.owner_document().is_fully_active())
491        {
492            return;
493        }
494
495        let button_type = self.button_type.get();
496        // Step 3. If element has a form owner:
497        if let Some(owner) = self.form_owner() {
498            // Step 3.1 If element is a submit button, then submit element's form owner from element
499            // ..., and return.
500            if button_type == ButtonType::Submit {
501                owner.submit(
502                    cx,
503                    SubmittedFrom::NotFromForm,
504                    FormSubmitterElement::Button(self),
505                );
506                return;
507            }
508            // Step 3.2 If element's type attribute is in the Reset Button state, then reset
509            // element's form owner and return.
510            if button_type == ButtonType::Reset {
511                owner.reset(cx, ResetFrom::NotFromForm);
512                return;
513            }
514            // Step 3.3 If element's type attribute is in the Auto state, then return.
515            if button_type == ButtonType::Button &&
516                self.upcast::<Element>()
517                    .get_string_attribute(&local_name!("type"))
518                    .to_ascii_lowercase() !=
519                    "button"
520            {
521                return;
522            }
523        }
524        // Adhoc, this step is needed so that file inputs button activates the input.
525        if let Some(pseudo_element) = self.upcast::<Node>().implemented_pseudo_element() {
526            if pseudo_element == PseudoElement::FileSelectorButton {
527                let Some(parent) = self.upcast::<Node>().parent_in_flat_tree() else {
528                    return;
529                };
530
531                parent
532                    .downcast::<HTMLInputElement>()
533                    .expect("File select button should always be a child of an input element")
534                    .activation_behavior(cx, event, target);
535            }
536
537            return;
538        }
539
540        // Step 4. Let target be the result of running element's get the commandfor-associated
541        // element.
542        // Step 5. If target is not null:
543        if let Some(target) = self.command_for_element(cx) {
544            // Steps 5.1 Let command be element's command attribute.
545            let command = self.command_state();
546            // Step 5.2 If the result of determining if a command is valid for a target given command and target is false, then return.
547            if !Self::determine_if_command_is_valid_for_target(command, target.clone()) {
548                return;
549            }
550            // Step 5.3 Let continue be the result of firing an event named command at target, using
551            // CommandEvent, with its command attribute initialized to command, its source attribute
552            // initialized to element, and its cancelable attribute initialized to true.
553            // TODO source attribute
554            // Step 5.4 If continue is false, then return.
555            let event = CommandEvent::new(
556                &self.owner_window(),
557                atom!("command"),
558                EventBubbles::DoesNotBubble,
559                EventCancelable::Cancelable,
560                Some(DomRoot::from_ref(self.upcast())),
561                self.upcast::<Element>()
562                    .get_string_attribute(&local_name!("command")),
563                CanGc::from_cx(cx),
564            );
565            let event = event.upcast::<Event>();
566            if !event.fire(cx, target.upcast::<EventTarget>()) {
567                return;
568            }
569            // Step 5.5 If target is not connected, then return.
570            let target_node = target.upcast::<Node>();
571            if !target_node.is_connected() {
572                return;
573            }
574            // Step 5.6 If command is in the Custom state, then return.
575            if command == CommandState::Custom {
576                return;
577            }
578            // TODO Steps 5.7, 5.8, 5.9
579            // Step 5.10 Otherwise, if this standard defines command steps for target's local name,
580            // then run the corresponding command steps given target, element, and command.
581            let _ = vtable_for(target_node).command_steps(cx, DomRoot::from_ref(self), command);
582        }
583        // TODO Step 6 Otherwise, run the popover target attribute activation behavior given element
584        // and event's target.
585    }
586}
587
588#[derive(Copy, Clone, Eq, PartialEq, Debug)]
589pub(crate) enum CommandState {
590    Unknown,
591    Custom,
592    ShowModal,
593    Close,
594}