mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 14:27:35 +00:00
Browser+LibHTML: Add resolved element style to the DOM inspector
When selecting an element in the browser's DOM inspector, we now also show the resolved CSS properties (and their values) for that element. Since the inspector was growing a bit more complex, I moved it out of the "show inspector" action callback and into its own class. In the future, we will probably want to migrate the inspector down to LibHTML to make it accessible to other clients of the library, but for now we can keep working on it inside Browser. :^)
This commit is contained in:
parent
0ff07980ae
commit
7cdfb9c6b4
7 changed files with 150 additions and 13 deletions
39
Applications/Browser/InspectorWidget.cpp
Normal file
39
Applications/Browser/InspectorWidget.cpp
Normal file
|
@ -0,0 +1,39 @@
|
|||
#include "InspectorWidget.h"
|
||||
#include <LibGUI/GBoxLayout.h>
|
||||
#include <LibGUI/GSplitter.h>
|
||||
#include <LibGUI/GTableView.h>
|
||||
#include <LibGUI/GTreeView.h>
|
||||
#include <LibHTML/DOM/Document.h>
|
||||
#include <LibHTML/DOM/Element.h>
|
||||
#include <LibHTML/DOMElementStyleModel.h>
|
||||
#include <LibHTML/DOMTreeModel.h>
|
||||
|
||||
InspectorWidget::InspectorWidget(GWidget* parent)
|
||||
: GWidget(parent)
|
||||
{
|
||||
set_layout(make<GBoxLayout>(Orientation::Vertical));
|
||||
auto splitter = GSplitter::construct(Orientation::Vertical, this);
|
||||
m_dom_tree_view = GTreeView::construct(splitter);
|
||||
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
|
||||
m_style_table_view->set_model(nullptr);
|
||||
};
|
||||
m_style_table_view = GTableView::construct(splitter);
|
||||
m_style_table_view->set_size_columns_to_fit_content(true);
|
||||
}
|
||||
|
||||
InspectorWidget::~InspectorWidget()
|
||||
{
|
||||
}
|
||||
|
||||
void InspectorWidget::set_document(Document* document)
|
||||
{
|
||||
if (m_document == document)
|
||||
return;
|
||||
m_document = document;
|
||||
m_dom_tree_view->set_model(DOMTreeModel::create(*document));
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue