mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 05:07:35 +00:00
Browser+LibHTML: Add "Computed" styles to the DOM inspector
I though it would be nice to also show the style that the browser uses to display an element. In order to do that, in place of the styles table I've put a tab widget, with tabs for both element and computed element styles.
This commit is contained in:
parent
1da31ce8ae
commit
988d1deca8
5 changed files with 102 additions and 4 deletions
|
@ -3,9 +3,11 @@
|
|||
#include <LibGUI/GSplitter.h>
|
||||
#include <LibGUI/GTableView.h>
|
||||
#include <LibGUI/GTreeView.h>
|
||||
#include <LibGUI/GTabWidget.h>
|
||||
#include <LibHTML/DOM/Document.h>
|
||||
#include <LibHTML/DOM/Element.h>
|
||||
#include <LibHTML/DOMElementStyleModel.h>
|
||||
#include <LibHTML/DOMComputedElementStyleModel.h>
|
||||
#include <LibHTML/DOMTreeModel.h>
|
||||
|
||||
InspectorWidget::InspectorWidget(GWidget* parent)
|
||||
|
@ -17,13 +19,24 @@ InspectorWidget::InspectorWidget(GWidget* parent)
|
|||
m_dom_tree_view->on_selection = [this](auto& index) {
|
||||
auto* node = static_cast<Node*>(index.internal_data());
|
||||
node->document().set_inspected_node(node);
|
||||
if (node->is_element())
|
||||
m_style_table_view->set_model(DOMElementStyleModel::create(to<Element>(*node)));
|
||||
else
|
||||
if (node->is_element()) {
|
||||
auto element = to<Element>(*node);
|
||||
m_style_table_view->set_model(DOMElementStyleModel::create(element));
|
||||
m_computed_style_table_view->set_model(DOMComputedElementStyleModel::create(element));
|
||||
} else {
|
||||
m_style_table_view->set_model(nullptr);
|
||||
m_computed_style_table_view->set_model(nullptr);
|
||||
}
|
||||
};
|
||||
m_style_table_view = GTableView::construct(splitter);
|
||||
m_style_table_view = GTableView::construct(nullptr);
|
||||
m_style_table_view->set_size_columns_to_fit_content(true);
|
||||
|
||||
m_computed_style_table_view = GTableView::construct(nullptr);
|
||||
m_computed_style_table_view->set_size_columns_to_fit_content(true);
|
||||
|
||||
auto tabwidget = GTabWidget::construct(splitter);
|
||||
tabwidget->add_widget("Styles", m_style_table_view);
|
||||
tabwidget->add_widget("Computed", m_computed_style_table_view);
|
||||
}
|
||||
|
||||
InspectorWidget::~InspectorWidget()
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue