HTMLDetailsElement.cpp 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. /*
  2. * Copyright (c) 2020, the SerenityOS developers.
  3. * Copyright (c) 2023, Tim Flynn <trflynn89@serenityos.org>
  4. *
  5. * SPDX-License-Identifier: BSD-2-Clause
  6. */
  7. #include <LibWeb/Bindings/HTMLDetailsElementPrototype.h>
  8. #include <LibWeb/Bindings/Intrinsics.h>
  9. #include <LibWeb/DOM/ElementFactory.h>
  10. #include <LibWeb/DOM/Event.h>
  11. #include <LibWeb/DOM/ShadowRoot.h>
  12. #include <LibWeb/DOM/Text.h>
  13. #include <LibWeb/HTML/EventLoop/TaskQueue.h>
  14. #include <LibWeb/HTML/HTMLDetailsElement.h>
  15. #include <LibWeb/HTML/HTMLSlotElement.h>
  16. #include <LibWeb/HTML/HTMLSummaryElement.h>
  17. #include <LibWeb/HTML/ToggleEvent.h>
  18. #include <LibWeb/Namespace.h>
  19. namespace Web::HTML {
  20. GC_DEFINE_ALLOCATOR(HTMLDetailsElement);
  21. HTMLDetailsElement::HTMLDetailsElement(DOM::Document& document, DOM::QualifiedName qualified_name)
  22. : HTMLElement(document, move(qualified_name))
  23. {
  24. }
  25. HTMLDetailsElement::~HTMLDetailsElement() = default;
  26. void HTMLDetailsElement::visit_edges(Cell::Visitor& visitor)
  27. {
  28. Base::visit_edges(visitor);
  29. visitor.visit(m_summary_slot);
  30. visitor.visit(m_descendants_slot);
  31. }
  32. void HTMLDetailsElement::initialize(JS::Realm& realm)
  33. {
  34. Base::initialize(realm);
  35. WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLDetailsElement);
  36. }
  37. void HTMLDetailsElement::inserted()
  38. {
  39. create_shadow_tree_if_needed().release_value_but_fixme_should_propagate_errors();
  40. update_shadow_tree_slots();
  41. }
  42. void HTMLDetailsElement::removed_from(DOM::Node*)
  43. {
  44. set_shadow_root(nullptr);
  45. }
  46. void HTMLDetailsElement::attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value, Optional<FlyString> const& namespace_)
  47. {
  48. Base::attribute_changed(name, old_value, value, namespace_);
  49. // https://html.spec.whatwg.org/multipage/interactive-elements.html#details-notification-task-steps
  50. if (name == HTML::AttributeNames::open) {
  51. // 1. If the open attribute is added, queue a details toggle event task given the details element, "closed", and "open".
  52. if (value.has_value()) {
  53. queue_a_details_toggle_event_task("closed"_string, "open"_string);
  54. }
  55. // 2. Otherwise, queue a details toggle event task given the details element, "open", and "closed".
  56. else {
  57. queue_a_details_toggle_event_task("open"_string, "closed"_string);
  58. }
  59. update_shadow_tree_style();
  60. }
  61. }
  62. void HTMLDetailsElement::children_changed()
  63. {
  64. Base::children_changed();
  65. update_shadow_tree_slots();
  66. }
  67. // https://html.spec.whatwg.org/multipage/interactive-elements.html#queue-a-details-toggle-event-task
  68. void HTMLDetailsElement::queue_a_details_toggle_event_task(String old_state, String new_state)
  69. {
  70. // 1. If element's details toggle task tracker is not null, then:
  71. if (m_details_toggle_task_tracker.has_value()) {
  72. // 1. Set oldState to element's details toggle task tracker's old state.
  73. old_state = move(m_details_toggle_task_tracker->old_state);
  74. // 2. Remove element's details toggle task tracker's task from its task queue.
  75. HTML::main_thread_event_loop().task_queue().remove_tasks_matching([&](auto const& task) {
  76. return task.id() == m_details_toggle_task_tracker->task_id;
  77. });
  78. // 3. Set element's details toggle task tracker to null.
  79. m_details_toggle_task_tracker->task_id = {};
  80. }
  81. // 2. Queue an element task given the DOM manipulation task source and element to run the following steps:
  82. auto task_id = queue_an_element_task(HTML::Task::Source::DOMManipulation, [this, old_state, new_state = move(new_state)]() mutable {
  83. // 1. Fire an event named toggle at element, using ToggleEvent, with the oldState attribute initialized to
  84. // oldState and the newState attribute initialized to newState.
  85. ToggleEventInit event_init {};
  86. event_init.old_state = move(old_state);
  87. event_init.new_state = move(new_state);
  88. dispatch_event(ToggleEvent::create(realm(), HTML::EventNames::toggle, move(event_init)));
  89. // 2. Set element's details toggle task tracker to null.
  90. m_details_toggle_task_tracker = {};
  91. });
  92. // 3. Set element's details toggle task tracker to a struct with task set to the just-queued task and old state set to oldState.
  93. m_details_toggle_task_tracker = ToggleTaskTracker {
  94. .task_id = task_id,
  95. .old_state = move(old_state),
  96. };
  97. }
  98. // https://html.spec.whatwg.org/#the-details-and-summary-elements
  99. WebIDL::ExceptionOr<void> HTMLDetailsElement::create_shadow_tree_if_needed()
  100. {
  101. if (shadow_root())
  102. return {};
  103. auto& realm = this->realm();
  104. // The element is also expected to have an internal shadow tree with two slots.
  105. auto shadow_root = realm.create<DOM::ShadowRoot>(document(), *this, Bindings::ShadowRootMode::Closed);
  106. shadow_root->set_slot_assignment(Bindings::SlotAssignmentMode::Manual);
  107. // The first slot is expected to take the details element's first summary element child, if any.
  108. auto summary_slot = TRY(DOM::create_element(document(), HTML::TagNames::slot, Namespace::HTML));
  109. MUST(shadow_root->append_child(summary_slot));
  110. // The second slot is expected to take the details element's remaining descendants, if any.
  111. auto descendants_slot = TRY(DOM::create_element(document(), HTML::TagNames::slot, Namespace::HTML));
  112. MUST(shadow_root->append_child(descendants_slot));
  113. m_summary_slot = static_cast<HTML::HTMLSlotElement&>(*summary_slot);
  114. m_descendants_slot = static_cast<HTML::HTMLSlotElement&>(*descendants_slot);
  115. set_shadow_root(shadow_root);
  116. return {};
  117. }
  118. void HTMLDetailsElement::update_shadow_tree_slots()
  119. {
  120. if (!shadow_root())
  121. return;
  122. Vector<HTMLSlotElement::SlottableHandle> summary_assignment;
  123. Vector<HTMLSlotElement::SlottableHandle> descendants_assignment;
  124. auto* summary = first_child_of_type<HTMLSummaryElement>();
  125. if (summary != nullptr)
  126. summary_assignment.append(GC::make_root(static_cast<DOM::Element&>(*summary)));
  127. for_each_in_subtree([&](auto& child) {
  128. if (&child == summary)
  129. return TraversalDecision::Continue;
  130. if (!child.is_slottable())
  131. return TraversalDecision::Continue;
  132. child.as_slottable().visit([&](auto& node) {
  133. descendants_assignment.append(GC::make_root(node));
  134. });
  135. return TraversalDecision::Continue;
  136. });
  137. m_summary_slot->assign(move(summary_assignment));
  138. m_descendants_slot->assign(move(descendants_assignment));
  139. update_shadow_tree_style();
  140. }
  141. // https://html.spec.whatwg.org/#the-details-and-summary-elements:the-details-element-6
  142. void HTMLDetailsElement::update_shadow_tree_style()
  143. {
  144. if (!shadow_root())
  145. return;
  146. if (has_attribute(HTML::AttributeNames::open)) {
  147. MUST(m_descendants_slot->set_attribute(HTML::AttributeNames::style, R"~~~(
  148. display: block;
  149. )~~~"_string));
  150. } else {
  151. MUST(m_descendants_slot->set_attribute(HTML::AttributeNames::style, R"~~~(
  152. display: block;
  153. content-visibility: hidden;
  154. )~~~"_string));
  155. }
  156. }
  157. }