LibWeb: Expose barebones CSSStyleDeclaration to JavaScript

You can now access an element's inline style via Element.style.
The interface is not very capable yet though. :^)

Userland/Libraries/LibWeb/CMakeLists.txt

@@ -283,6 +283,7 @@ function(libweb_js_wrapper class)
     add_custom_target(generate_${basename}Prototype.cpp DEPENDS Bindings/${class}Prototype.cpp)
 endfunction()
 
+libweb_js_wrapper(CSS/CSSStyleDeclaration)
 libweb_js_wrapper(CSS/CSSStyleSheet)
 libweb_js_wrapper(CSS/StyleSheet)
 libweb_js_wrapper(CSS/StyleSheetList)

Userland/Libraries/LibWeb/CSS/CSSStyleDeclaration.cpp

@@ -37,4 +37,11 @@ CSSStyleDeclaration::~CSSStyleDeclaration()
 {
 }
 
+String CSSStyleDeclaration::item(size_t index) const
+{
+    if (index >= m_properties.size())
+        return {};
+    return CSS::string_from_property_id(m_properties[index].property_id);
+}
+
 }

Userland/Libraries/LibWeb/CSS/CSSStyleDeclaration.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2018-2021, Andreas Kling <kling@serenityos.org>
  * All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -28,6 +28,7 @@
 
 #include <AK/String.h>
 #include <AK/Vector.h>
+#include <LibWeb/Bindings/Wrappable.h>
 #include <LibWeb/CSS/StyleValue.h>
 
 namespace Web::CSS {
@@ -38,8 +39,12 @@ struct StyleProperty {
     bool important { false };
 };
 
-class CSSStyleDeclaration : public RefCounted<CSSStyleDeclaration> {
+class CSSStyleDeclaration
+    : public RefCounted<CSSStyleDeclaration>
+    , public Bindings::Wrappable {
 public:
+    using WrapperType = Bindings::CSSStyleDeclarationWrapper;
+
     static NonnullRefPtr<CSSStyleDeclaration> create(Vector<StyleProperty>&& properties)
     {
         return adopt(*new CSSStyleDeclaration(move(properties)));
@@ -49,6 +54,9 @@ public:
 
     const Vector<StyleProperty>& properties() const { return m_properties; }
 
+    size_t length() const { return m_properties.size(); }
+    String item(size_t index) const;
+
 private:
     explicit CSSStyleDeclaration(Vector<StyleProperty>&&);
 
@@ -56,3 +64,9 @@ private:
 };
 
 }
+
+namespace Web::Bindings {
+
+CSSStyleDeclarationWrapper* wrap(JS::GlobalObject&, CSS::CSSStyleDeclaration&);
+
+}

Userland/Libraries/LibWeb/CSS/CSSStyleDeclaration.idl

@@ -0,0 +1,6 @@
+interface CSSStyleDeclaration {
+
+    readonly attribute unsigned long length;
+    CSSOMString item(unsigned long index);
+
+};

Userland/Libraries/LibWeb/CodeGenerators/WrapperGenerator.cpp

@@ -1086,6 +1086,7 @@ void generate_prototype_implementation(const IDL::Interface& interface)
 #include <LibJS/Runtime/Uint8ClampedArray.h>
 #include <LibWeb/Bindings/@prototype_class@.h>
 #include <LibWeb/Bindings/@wrapper_class@.h>
+#include <LibWeb/Bindings/CSSStyleDeclarationWrapper.h>
 #include <LibWeb/Bindings/CSSStyleSheetWrapper.h>
 #include <LibWeb/Bindings/CanvasRenderingContext2DWrapper.h>
 #include <LibWeb/Bindings/CommentWrapper.h>

Userland/Libraries/LibWeb/DOM/Element.cpp

@@ -380,4 +380,11 @@ void Element::set_shadow_root(RefPtr<ShadowRoot> shadow_root)
     invalidate_style();
 }
 
+NonnullRefPtr<CSS::CSSStyleDeclaration> Element::style_for_bindings()
+{
+    if (!m_inline_style)
+        m_inline_style = CSS::CSSStyleDeclaration::create({});
+    return *m_inline_style;
+}
+
 }

Userland/Libraries/LibWeb/DOM/Element.h

@@ -92,6 +92,8 @@ public:
 
     const CSS::CSSStyleDeclaration* inline_style() const { return m_inline_style; }
 
+    NonnullRefPtr<CSS::CSSStyleDeclaration> style_for_bindings();
+
     // FIXME: innerHTML also appears on shadow roots. https://w3c.github.io/DOM-Parsing/#dom-innerhtml
     String inner_html() const;
     void set_inner_html(StringView);

Userland/Libraries/LibWeb/DOM/Element.idl

@@ -23,4 +23,6 @@ interface Element : Node {
 
     readonly attribute Element? nextElementSibling;
     readonly attribute Element? previousElementSibling;
+
+    [ImplementedAs=style_for_bindings] readonly attribute CSSStyleDeclaration style;
 };

Userland/Libraries/LibWeb/Forward.h

@@ -203,6 +203,7 @@ class XMLHttpRequestEventTarget;
 }
 
 namespace Web::Bindings {
+class CSSStyleDeclarationWrapper;
 class CSSStyleSheetWrapper;
 class CanvasRenderingContext2DWrapper;
 class CharacterDataWrapper;