RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-14 09:24:57 +00:00
Code Issues Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

45
Userland/Applications/Browser/InspectorWidget.cpp
View file

@ -7,6 +7,7 @@
*/
#include "InspectorWidget.h"
#include "ElementSizePreviewWidget.h"
#include <LibGUI/BoxLayout.h>
#include <LibGUI/Splitter.h>
#include <LibGUI/TabWidget.h>
@ -52,6 +53,7 @@ void InspectorWidget::set_inspected_node(GUI::ModelIndex const index)
if (maybe_inspected_node_properties.has_value()) {
auto inspected_node_properties = maybe_inspected_node_properties.value();
load_style_json(inspected_node_properties.specified_values_json, inspected_node_properties.computed_values_json, inspected_node_properties.custom_properties_json);
update_node_box_model(inspected_node_properties.node_box_sizing_json);
} else {
clear_style_json();
}
@ -93,6 +95,12 @@ InspectorWidget::InspectorWidget()
custom_properties_table_container.layout()->set_margins({ 4, 4, 4, 4 });
m_custom_properties_table_view = custom_properties_table_container.add<GUI::TableView>();
auto& element_size = bottom_tab_widget.add_tab<GUI::Widget>("Element");
element_size.set_layout<GUI::VerticalBoxLayout>();
element_size.layout()->set_margins({ 4, 4, 4, 4 });
m_element_size_view = element_size.add<ElementSizePreviewWidget>();
m_element_size_view->set_should_hide_unnecessary_scrollbars(true);
m_dom_tree_view->set_focus(true);
}
@ -129,7 +137,7 @@ void InspectorWidget::clear_dom_json()
clear_style_json();
}
void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json, String custom_properties_json)
void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json, String custom_properties_json, String node_box_sizing_json)
{
if (node_id != m_inspected_node_id) {
dbgln("Got data for the wrong node id! Wanted {}, got {}", m_inspected_node_id, node_id);
@ -137,6 +145,7 @@ void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified
}
load_style_json(specified_values_json, computed_values_json, custom_properties_json);
update_node_box_model(node_box_sizing_json);
}
void InspectorWidget::load_style_json(String specified_values_json, String computed_values_json, String custom_properties_json)
@ -151,6 +160,36 @@ void InspectorWidget::load_style_json(String specified_values_json, String compu
m_custom_properties_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_custom_properties_json.value().view()));
}
void InspectorWidget::update_node_box_model(Optional<String> node_box_sizing_json)
{
if (!node_box_sizing_json.has_value()) {
return;
}
auto json_or_error = JsonValue::from_string(node_box_sizing_json.value());
if (json_or_error.is_error() || !json_or_error.value().is_object()) {
return;
}
auto json_value = json_or_error.release_value();
const auto& json_object = json_value.as_object();
m_node_box_sizing.margin.top = json_object.get("margin_top").to_float();
m_node_box_sizing.margin.right = json_object.get("margin_right").to_float();
m_node_box_sizing.margin.bottom = json_object.get("margin_bottom").to_float();
m_node_box_sizing.margin.left = json_object.get("margin_left").to_float();
m_node_box_sizing.padding.top = json_object.get("padding_top").to_float();
m_node_box_sizing.padding.right = json_object.get("padding_right").to_float();
m_node_box_sizing.padding.bottom = json_object.get("padding_bottom").to_float();
m_node_box_sizing.padding.left = json_object.get("padding_left").to_float();
m_node_box_sizing.border.top = json_object.get("border_top").to_float();
m_node_box_sizing.border.right = json_object.get("border_right").to_float();
m_node_box_sizing.border.bottom = json_object.get("border_bottom").to_float();
m_node_box_sizing.border.left = json_object.get("border_left").to_float();
m_element_size_view->set_node_content_width(json_object.get("content_width").to_float());
m_element_size_view->set_node_content_height(json_object.get("content_height").to_float());
m_element_size_view->set_box_model(m_node_box_sizing);
}
void InspectorWidget::clear_style_json()
{
m_inspected_node_specified_values_json.clear();
@ -161,6 +200,10 @@ void InspectorWidget::clear_style_json()
m_inspected_node_custom_properties_json.clear();
m_custom_properties_table_view->set_model(nullptr);
m_element_size_view->set_box_model({});
m_element_size_view->set_node_content_width(0);
m_element_size_view->set_node_content_height(0);
}
}