Browser+LibWeb+WebContent: Add variables display to Inspector

This allows us to see which custom properties apply to a given element,
which previously wasn't shown.

6 files changed, 11 insertions, 8 deletions

diff --git a/Userland/Libraries/LibWeb/DOM/Element.h b/Userland/Libraries/LibWeb/DOM/Element.h
index 7f2d3f4fb1..7e6f09b24d 100644
--- a/Userland/Libraries/LibWeb/DOM/Element.h
+++ b/Userland/Libraries/LibWeb/DOM/Element.h
@@ -118,6 +118,7 @@ public:
     {
         m_custom_properties.set(custom_property_name, style_property);
     }
+    HashMap<String, CSS::StyleComputer::CustomPropertyResolutionTuple> const& custom_properties() const { return m_custom_properties; }
 
     void queue_an_element_task(HTML::Task::Source, Function<void()>);
 
diff --git a/Userland/Libraries/LibWeb/OutOfProcessWebView.cpp b/Userland/Libraries/LibWeb/OutOfProcessWebView.cpp
index dbdbbc6249..3e418e5881 100644
--- a/Userland/Libraries/LibWeb/OutOfProcessWebView.cpp
+++ b/Userland/Libraries/LibWeb/OutOfProcessWebView.cpp
@@ -354,10 +354,10 @@ void OutOfProcessWebView::notify_server_did_get_dom_tree(const String& dom_tree)
         on_get_dom_tree(dom_tree);
 }
 
-void OutOfProcessWebView::notify_server_did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style)
+void OutOfProcessWebView::notify_server_did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties)
 {
     if (on_get_dom_node_properties)
-        on_get_dom_node_properties(node_id, specified_style, computed_style);
+        on_get_dom_node_properties(node_id, specified_style, computed_style, custom_properties);
 }
 
 void OutOfProcessWebView::notify_server_did_output_js_console_message(i32 message_index)
@@ -440,7 +440,8 @@ Optional<OutOfProcessWebView::DOMNodeProperties> OutOfProcessWebView::inspect_do
         return {};
     return DOMNodeProperties {
         .specified_values_json = response.specified_style(),
-        .computed_values_json = response.computed_style()
+        .computed_values_json = response.computed_style(),
+        .custom_properties_json = response.custom_properties()
     };
 }
 
diff --git a/Userland/Libraries/LibWeb/OutOfProcessWebView.h b/Userland/Libraries/LibWeb/OutOfProcessWebView.h
index e788f37d14..1242ca0dc3 100644
--- a/Userland/Libraries/LibWeb/OutOfProcessWebView.h
+++ b/Userland/Libraries/LibWeb/OutOfProcessWebView.h
@@ -37,6 +37,7 @@ public:
     struct DOMNodeProperties {
         String specified_values_json;
         String computed_values_json;
+        String custom_properties_json;
     };
     Optional<DOMNodeProperties> inspect_dom_node(i32 node_id);
     void clear_inspected_dom_node();
@@ -80,7 +81,7 @@ public:
     String notify_server_did_request_prompt(Badge<WebContentClient>, const String& message, const String& default_);
     void notify_server_did_get_source(const AK::URL& url, const String& source);
     void notify_server_did_get_dom_tree(const String& dom_tree);
-    void notify_server_did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style);
+    void notify_server_did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties);
     void notify_server_did_output_js_console_message(i32 message_index);
     void notify_server_did_get_js_console_messages(i32 start_index, Vector<String> const& message_types, Vector<String> const& messages);
     void notify_server_did_change_favicon(const Gfx::Bitmap& favicon);
diff --git a/Userland/Libraries/LibWeb/WebContentClient.cpp b/Userland/Libraries/LibWeb/WebContentClient.cpp
index 1d0cb93871..e952bfb2fb 100644
--- a/Userland/Libraries/LibWeb/WebContentClient.cpp
+++ b/Userland/Libraries/LibWeb/WebContentClient.cpp
@@ -146,9 +146,9 @@ void WebContentClient::did_get_dom_tree(String const& dom_tree)
     m_view.notify_server_did_get_dom_tree(dom_tree);
 }
 
-void WebContentClient::did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style)
+void WebContentClient::did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties)
 {
-    m_view.notify_server_did_get_dom_node_properties(node_id, specified_style, computed_style);
+    m_view.notify_server_did_get_dom_node_properties(node_id, specified_style, computed_style, custom_properties);
 }
 
 void WebContentClient::did_output_js_console_message(i32 message_index)
diff --git a/Userland/Libraries/LibWeb/WebContentClient.h b/Userland/Libraries/LibWeb/WebContentClient.h
index 4b975d87c5..27dba94eb3 100644
--- a/Userland/Libraries/LibWeb/WebContentClient.h
+++ b/Userland/Libraries/LibWeb/WebContentClient.h
@@ -51,7 +51,7 @@ private:
     virtual void did_request_image_context_menu(Gfx::IntPoint const&, AK::URL const&, String const&, unsigned, Gfx::ShareableBitmap const&) override;
     virtual void did_get_source(AK::URL const&, String const&) override;
     virtual void did_get_dom_tree(String const&) override;
-    virtual void did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style) override;
+    virtual void did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties) override;
     virtual void did_output_js_console_message(i32 message_index) override;
     virtual void did_get_js_console_messages(i32 start_index, Vector<String> const& message_types, Vector<String> const& messages) override;
     virtual void did_change_favicon(Gfx::ShareableBitmap const&) override;
diff --git a/Userland/Libraries/LibWeb/WebViewHooks.h b/Userland/Libraries/LibWeb/WebViewHooks.h
index e5e9ca9495..c83afd34af 100644
--- a/Userland/Libraries/LibWeb/WebViewHooks.h
+++ b/Userland/Libraries/LibWeb/WebViewHooks.h
@@ -29,7 +29,7 @@ public:
     Function<void(DOM::Document*)> on_set_document;
     Function<void(const AK::URL&, const String&)> on_get_source;
     Function<void(const String&)> on_get_dom_tree;
-    Function<void(i32 node_id, String const& specified_style, String const& computed_style)> on_get_dom_node_properties;
+    Function<void(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties)> on_get_dom_node_properties;
     Function<void(i32 message_id)> on_js_console_new_message;
     Function<void(i32 start_index, Vector<String> const& message_types, Vector<String> const& messages)> on_get_js_console_messages;
     Function<String(const AK::URL& url, Cookie::Source source)> on_get_cookie;