1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 07:37:46 +00:00

Browser+LibWeb: Add an Element size preview widget to inspector

This Adds an element size preview widget to the inspector widget
in a new tab. This functions similar to chrome and firefox and
shows the margin, border, padding, and content size of the selected
element in the inspector.

The colors for the size preview widget are taken from the chrome
browser.
This commit is contained in:
Vrins 2022-02-27 01:38:12 +01:00 committed by Andreas Kling
parent 3b22fd9a9f
commit 39a5076f40
14 changed files with 234 additions and 18 deletions

View file

@ -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, String const& custom_properties)
void OutOfProcessWebView::notify_server_did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing)
{
if (on_get_dom_node_properties)
on_get_dom_node_properties(node_id, specified_style, computed_style, custom_properties);
on_get_dom_node_properties(node_id, specified_style, computed_style, custom_properties, node_box_sizing);
}
void OutOfProcessWebView::notify_server_did_output_js_console_message(i32 message_index)
@ -441,7 +441,8 @@ Optional<OutOfProcessWebView::DOMNodeProperties> OutOfProcessWebView::inspect_do
return DOMNodeProperties {
.specified_values_json = response.specified_style(),
.computed_values_json = response.computed_style(),
.custom_properties_json = response.custom_properties()
.custom_properties_json = response.custom_properties(),
.node_box_sizing_json = response.node_box_sizing()
};
}

View file

@ -38,6 +38,7 @@ public:
String specified_values_json;
String computed_values_json;
String custom_properties_json;
String node_box_sizing_json;
};
Optional<DOMNodeProperties> inspect_dom_node(i32 node_id);
void clear_inspected_dom_node();
@ -81,7 +82,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, String const& custom_properties);
void notify_server_did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing);
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);

View file

@ -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, String const& custom_properties)
void WebContentClient::did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing)
{
m_view.notify_server_did_get_dom_node_properties(node_id, specified_style, computed_style, custom_properties);
m_view.notify_server_did_get_dom_node_properties(node_id, specified_style, computed_style, custom_properties, node_box_sizing);
}
void WebContentClient::did_output_js_console_message(i32 message_index)

View file

@ -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, String const& custom_properties) override;
virtual void did_get_dom_node_properties(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing) 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;

View file

@ -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, String const& custom_properties)> on_get_dom_node_properties;
Function<void(i32 node_id, String const& specified_style, String const& computed_style, String const& custom_properties, String const& node_box_sizing)> 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;