LibWeb: Factor out HTMLOrSVGElement

This is a mixin in the IDL, so let's treat it as a mixin in our code and
let both SVGElement and MathMLElement reuse the implementations that we
wrote for HTMLElement.

Meta/gn/secondary/Userland/Libraries/LibWeb/HTML/BUILD.gn

@@ -100,6 +100,7 @@ source_set("HTML") {
     "HTMLOptGroupElement.cpp",
     "HTMLOptionElement.cpp",
     "HTMLOptionsCollection.cpp",
+    "HTMLOrSVGElement.cpp",
     "HTMLOutputElement.cpp",
     "HTMLParagraphElement.cpp",
     "HTMLParamElement.cpp",

Meta/gn/secondary/Userland/Libraries/LibWeb/idl_files.gni

@@ -187,6 +187,7 @@ standard_idl_files = [
   "//Userland/Libraries/LibWeb/HTML/HTMLOptGroupElement.idl",
   "//Userland/Libraries/LibWeb/HTML/HTMLOptionElement.idl",
   "//Userland/Libraries/LibWeb/HTML/HTMLOptionsCollection.idl",
+  "//Userland/Libraries/LibWeb/HTML/HTMLOrSVGElement.idl",
   "//Userland/Libraries/LibWeb/HTML/HTMLOutputElement.idl",
   "//Userland/Libraries/LibWeb/HTML/HTMLParagraphElement.idl",
   "//Userland/Libraries/LibWeb/HTML/HTMLParamElement.idl",

Userland/Libraries/LibWeb/CMakeLists.txt

@@ -369,6 +369,7 @@ set(SOURCES
     HTML/HTMLOptGroupElement.cpp
     HTML/HTMLOptionElement.cpp
     HTML/HTMLOptionsCollection.cpp
+    HTML/HTMLOrSVGElement.cpp
     HTML/HTMLOutputElement.cpp
     HTML/HTMLParagraphElement.cpp
     HTML/HTMLParamElement.cpp

Userland/Libraries/LibWeb/HTML/HTMLElement.cpp

@@ -66,18 +66,11 @@ void HTMLElement::initialize(JS::Realm& realm)
 void HTMLElement::visit_edges(Cell::Visitor& visitor)
 {
     Base::visit_edges(visitor);
-    visitor.visit(m_dataset);
+    HTMLOrSVGElement::visit_edges(visitor);
     visitor.visit(m_labels);
     visitor.visit(m_attached_internals);
 }
 
-JS::NonnullGCPtr<DOMStringMap> HTMLElement::dataset()
-{
-    if (!m_dataset)
-        m_dataset = DOMStringMap::create(*this);
-    return *m_dataset;
-}
-
 // https://html.spec.whatwg.org/multipage/dom.html#dom-dir
 StringView HTMLElement::dir() const
 {
@@ -591,28 +584,6 @@ void HTMLElement::attribute_changed(FlyString const& name, Optional<String> cons
 #undef __ENUMERATE
 }
 
-// https://html.spec.whatwg.org/multipage/interaction.html#dom-focus
-void HTMLElement::focus()
-{
-    // 1. If the element is marked as locked for focus, then return.
-    if (m_locked_for_focus)
-        return;
-
-    // 2. Mark the element as locked for focus.
-    m_locked_for_focus = true;
-
-    // 3. Run the focusing steps for the element.
-    run_focusing_steps(this);
-
-    // FIXME: 4. If the value of the preventScroll dictionary member of options is false,
-    //           then scroll the element into view with scroll behavior "auto",
-    //           block flow direction position set to an implementation-defined value,
-    //           and inline base direction position set to an implementation-defined value.
-
-    // 5. Unmark the element as locked for focus.
-    m_locked_for_focus = false;
-}
-
 // https://html.spec.whatwg.org/multipage/webappapis.html#fire-a-synthetic-pointer-event
 bool HTMLElement::fire_a_synthetic_pointer_event(FlyString const& type, DOM::Element& target, bool not_trusted)
 {
@@ -685,15 +656,6 @@ void HTMLElement::click()
     m_click_in_progress = false;
 }
 
-// https://html.spec.whatwg.org/multipage/interaction.html#dom-blur
-void HTMLElement::blur()
-{
-    // The blur() method, when invoked, should run the unfocusing steps for the element on which the method was called.
-    run_unfocusing_steps(this);
-
-    // User agents may selectively or uniformly ignore calls to this method for usability reasons.
-}
-
 Optional<ARIA::Role> HTMLElement::default_role() const
 {
     // https://www.w3.org/TR/html-aria/#el-address

Userland/Libraries/LibWeb/HTML/HTMLElement.h

@@ -9,6 +9,7 @@
 #include <LibWeb/DOM/Element.h>
 #include <LibWeb/HTML/EventNames.h>
 #include <LibWeb/HTML/GlobalEventHandlers.h>
+#include <LibWeb/HTML/HTMLOrSVGElement.h>
 #include <LibWeb/HTML/TokenizedFeatures.h>
 
 namespace Web::HTML {
@@ -21,7 +22,8 @@ namespace Web::HTML {
 
 class HTMLElement
     : public DOM::Element
-    , public HTML::GlobalEventHandlers {
+    , public HTML::GlobalEventHandlers
+    , public HTML::HTMLOrSVGElement<HTMLElement> {
     WEB_PLATFORM_OBJECT(HTMLElement, DOM::Element);
     JS_DECLARE_ALLOCATOR(HTMLElement);
 
@@ -53,14 +55,8 @@ public:
 
     bool cannot_navigate() const;
 
-    [[nodiscard]] JS::NonnullGCPtr<DOMStringMap> dataset();
-
-    void focus();
-
     void click();
 
-    void blur();
-
     [[nodiscard]] String access_key_label() const;
 
     bool fire_a_synthetic_pointer_event(FlyString const& type, DOM::Element& target, bool not_trusted);
@@ -100,8 +96,6 @@ private:
     [[nodiscard]] String get_the_text_steps();
     void append_rendered_text_fragment(StringView input);
 
-    JS::GCPtr<DOMStringMap> m_dataset;
-
     JS::GCPtr<DOM::NodeList> m_labels;
 
     // https://html.spec.whatwg.org/multipage/custom-elements.html#attached-internals
@@ -114,9 +108,6 @@ private:
     };
     ContentEditableState m_content_editable_state { ContentEditableState::Inherit };
 
-    // https://html.spec.whatwg.org/multipage/interaction.html#locked-for-focus
-    bool m_locked_for_focus { false };
-
     // https://html.spec.whatwg.org/multipage/interaction.html#click-in-progress-flag
     bool m_click_in_progress { false };
 };

Userland/Libraries/LibWeb/HTML/HTMLElement.idl

@@ -1,6 +1,7 @@
 #import <CSS/ElementCSSInlineStyle.idl>
 #import <HTML/DOMStringMap.idl>
 #import <HTML/ElementInternals.idl>
+#import <HTML/HTMLOrSVGElement.idl>
 #import <DOM/Element.idl>
 #import <DOM/EventHandler.idl>
 
@@ -59,16 +60,4 @@ interface mixin ElementContentEditable {
     [FIXME, CEReactions] attribute DOMString inputMode;
 };
 
-// https://html.spec.whatwg.org/#htmlorsvgelement
-interface mixin HTMLOrSVGElement {
-    [SameObject] readonly attribute DOMStringMap dataset;
-    [FIXME] attribute DOMString nonce; // intentionally no [CEReactions]
-
-    [CEReactions, Reflect] attribute boolean autofocus;
-    [CEReactions] attribute long tabIndex;
-    // FIXME: Support the optional FocusOptions parameter.
-    undefined focus();
-    undefined blur();
-};
-
 HTMLElement includes ElementCSSInlineStyle;

Userland/Libraries/LibWeb/HTML/HTMLOrSVGElement.cpp

@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2024, Jelle Raaijmakers <jelle@ladybird.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include <LibWeb/HTML/Focus.h>
+#include <LibWeb/HTML/HTMLElement.h>
+#include <LibWeb/HTML/HTMLOrSVGElement.h>
+#include <LibWeb/MathML/MathMLElement.h>
+#include <LibWeb/SVG/SVGElement.h>
+
+namespace Web::HTML {
+
+// https://html.spec.whatwg.org/multipage/dom.html#dom-dataset-dev
+template<typename ElementBase>
+JS::NonnullGCPtr<DOMStringMap> HTMLOrSVGElement<ElementBase>::dataset()
+{
+    if (!m_dataset)
+        m_dataset = DOMStringMap::create(*static_cast<ElementBase*>(this));
+    return *m_dataset;
+}
+
+// https://html.spec.whatwg.org/multipage/interaction.html#dom-focus
+template<typename ElementBase>
+void HTMLOrSVGElement<ElementBase>::focus()
+{
+    // FIXME: below are the focus(options) steps, also implement focus()
+
+    // 1. If the element is marked as locked for focus, then return.
+    if (m_locked_for_focus)
+        return;
+
+    // 2. Mark the element as locked for focus.
+    m_locked_for_focus = true;
+
+    // 3. Run the focusing steps for the element.
+    run_focusing_steps(static_cast<ElementBase*>(this));
+
+    // FIXME: 4. If the value of the preventScroll dictionary member of options is false,
+    //           then scroll the element into view with scroll behavior "auto",
+    //           block flow direction position set to an implementation-defined value,
+    //           and inline base direction position set to an implementation-defined value.
+
+    // 5. Unmark the element as locked for focus.
+    m_locked_for_focus = false;
+}
+
+// https://html.spec.whatwg.org/multipage/interaction.html#dom-blur
+template<typename ElementBase>
+void HTMLOrSVGElement<ElementBase>::blur()
+{
+    // The blur() method, when invoked, should run the unfocusing steps for the element on which the method was called.
+    run_unfocusing_steps(static_cast<ElementBase*>(this));
+
+    // User agents may selectively or uniformly ignore calls to this method for usability reasons.
+}
+
+template<typename ElementBase>
+void HTMLOrSVGElement<ElementBase>::visit_edges(JS::Cell::Visitor& visitor)
+{
+    visitor.visit(m_dataset);
+}
+
+template class HTMLOrSVGElement<HTMLElement>;
+template class HTMLOrSVGElement<MathML::MathMLElement>;
+template class HTMLOrSVGElement<SVG::SVGElement>;
+
+}

Userland/Libraries/LibWeb/HTML/HTMLOrSVGElement.h

@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2024, Jelle Raaijmakers <jelle@ladybird.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibJS/Heap/Cell.h>
+#include <LibJS/Heap/GCPtr.h>
+#include <LibWeb/HTML/DOMStringMap.h>
+
+namespace Web::HTML {
+
+template<typename ElementBase>
+class HTMLOrSVGElement {
+public:
+    [[nodiscard]] JS::NonnullGCPtr<DOMStringMap> dataset();
+
+    void focus();
+    void blur();
+
+protected:
+    void visit_edges(JS::Cell::Visitor&);
+
+    // https://html.spec.whatwg.org/multipage/dom.html#dom-dataset-dev
+    JS::GCPtr<DOMStringMap> m_dataset;
+
+    // https://html.spec.whatwg.org/multipage/interaction.html#locked-for-focus
+    bool m_locked_for_focus { false };
+};
+
+}

Userland/Libraries/LibWeb/HTML/HTMLOrSVGElement.idl

@@ -0,0 +1,11 @@
+// https://html.spec.whatwg.org/#htmlorsvgelement
+interface mixin HTMLOrSVGElement {
+    [SameObject] readonly attribute DOMStringMap dataset;
+    [FIXME] attribute DOMString nonce; // intentionally no [CEReactions]
+
+    [CEReactions, Reflect] attribute boolean autofocus;
+    [CEReactions] attribute long tabIndex;
+    // FIXME: Support the optional FocusOptions parameter.
+    undefined focus();
+    undefined blur();
+};

Userland/Libraries/LibWeb/MathML/MathMLElement.cpp

@@ -26,13 +26,6 @@ void MathMLElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(MathMLElement);
 }
 
-JS::NonnullGCPtr<HTML::DOMStringMap> MathMLElement::dataset()
-{
-    if (!m_dataset)
-        m_dataset = HTML::DOMStringMap::create(*this);
-    return *m_dataset;
-}
-
 Optional<ARIA::Role> MathMLElement::default_role() const
 {
     // https://www.w3.org/TR/html-aria/#el-math
@@ -41,20 +34,10 @@ Optional<ARIA::Role> MathMLElement::default_role() const
     return {};
 }
 
-void MathMLElement::focus()
-{
-    dbgln("(STUBBED) MathMLElement::focus()");
-}
-
-void MathMLElement::blur()
-{
-    dbgln("(STUBBED) MathMLElement::blur()");
-}
-
 void MathMLElement::visit_edges(JS::Cell::Visitor& visitor)
 {
     Base::visit_edges(visitor);
-    visitor.visit(m_dataset);
+    HTMLOrSVGElement::visit_edges(visitor);
 }
 
 }

Userland/Libraries/LibWeb/MathML/MathMLElement.h

@@ -7,26 +7,22 @@
 #pragma once
 
 #include <LibWeb/DOM/Element.h>
-#include <LibWeb/HTML/DOMStringMap.h>
 #include <LibWeb/HTML/GlobalEventHandlers.h>
+#include <LibWeb/HTML/HTMLOrSVGElement.h>
 
 namespace Web::MathML {
 
 class MathMLElement : public DOM::Element
-    , public HTML::GlobalEventHandlers {
+    , public HTML::GlobalEventHandlers
+    , public HTML::HTMLOrSVGElement<MathMLElement> {
     WEB_PLATFORM_OBJECT(MathMLElement, DOM::Element);
     JS_DECLARE_ALLOCATOR(MathMLElement);
 
 public:
     virtual ~MathMLElement() override;
 
-    [[nodiscard]] JS::NonnullGCPtr<HTML::DOMStringMap> dataset();
-
     virtual Optional<ARIA::Role> default_role() const override;
 
-    void focus();
-    void blur();
-
 protected:
     virtual JS::GCPtr<DOM::EventTarget> global_event_handlers_to_event_target(FlyString const&) override { return *this; }
 
@@ -36,8 +32,6 @@ private:
     virtual void visit_edges(Visitor&) override;
 
     virtual void initialize(JS::Realm&) override;
-
-    JS::GCPtr<HTML::DOMStringMap> m_dataset;
 };
 
 }

Userland/Libraries/LibWeb/MathML/MathMLElement.idl

@@ -7,7 +7,7 @@
 [Exposed=Window]
 interface MathMLElement : Element { };
 MathMLElement includes GlobalEventHandlers;
-MathMLElement includes HTMLOrSVGElement; // FIXME: We technically use HTMLOrForeignElement which is a rename of HTMLOrSVGElement, when that change is upstreamed we should update here
+MathMLElement includes HTMLOrSVGElement; // FIXME: The spec calls for HTMLOrForeignElement which is a rename of HTMLOrSVGElement, when that change is upstreamed we should update here
 
 // https://drafts.csswg.org/cssom/#dom-elementcssinlinestyle-style
 MathMLElement includes ElementCSSInlineStyle;

Userland/Libraries/LibWeb/SVG/SVGElement.cpp

@@ -32,17 +32,10 @@ void SVGElement::initialize(JS::Realm& realm)
 void SVGElement::visit_edges(Cell::Visitor& visitor)
 {
     Base::visit_edges(visitor);
-    visitor.visit(m_dataset);
+    HTMLOrSVGElement::visit_edges(visitor);
     visitor.visit(m_class_name_animated_string);
 }
 
-JS::NonnullGCPtr<HTML::DOMStringMap> SVGElement::dataset()
-{
-    if (!m_dataset)
-        m_dataset = HTML::DOMStringMap::create(*this);
-    return *m_dataset;
-}
-
 void SVGElement::attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value)
 {
     Base::attribute_changed(name, old_value, value);
@@ -106,16 +99,6 @@ void SVGElement::remove_from_use_element_that_reference_this()
     });
 }
 
-void SVGElement::focus()
-{
-    dbgln("(STUBBED) SVGElement::focus()");
-}
-
-void SVGElement::blur()
-{
-    dbgln("(STUBBED) SVGElement::blur()");
-}
-
 // https://svgwg.org/svg2-draft/types.html#__svg__SVGElement__classNames
 JS::NonnullGCPtr<SVGAnimatedString> SVGElement::class_name()
 {

Userland/Libraries/LibWeb/SVG/SVGElement.h

@@ -8,13 +8,15 @@
 
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/Element.h>
+#include <LibWeb/HTML/HTMLOrSVGElement.h>
 #include <LibWeb/SVG/SVGAnimatedString.h>
 
 namespace Web::SVG {
 
 class SVGElement
     : public DOM::Element
-    , public HTML::GlobalEventHandlers {
+    , public HTML::GlobalEventHandlers
+    , public HTML::HTMLOrSVGElement<SVGElement> {
     WEB_PLATFORM_OBJECT(SVGElement, DOM::Element);
 
 public:
@@ -26,11 +28,6 @@ public:
     virtual void inserted() override;
     virtual void removed_from(Node*) override;
 
-    [[nodiscard]] JS::NonnullGCPtr<HTML::DOMStringMap> dataset();
-
-    void focus();
-    void blur();
-
     JS::NonnullGCPtr<SVGAnimatedString> class_name();
     JS::GCPtr<SVGSVGElement> owner_svg_element();
 
@@ -43,8 +40,6 @@ protected:
     void update_use_elements_that_reference_this();
     void remove_from_use_element_that_reference_this();
 
-    JS::GCPtr<HTML::DOMStringMap> m_dataset;
-
     JS::NonnullGCPtr<SVGAnimatedLength> svg_animated_length_for_property(CSS::PropertyID) const;
 
 private: