1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-15 13:37:35 +00:00
serenity/Userland/Applications/Browser/InspectorWidget.cpp
Sam Atkins 37f060b873 Browser: Add "Inspect Element" to context menu :^)
This opens the DOM Inspector window, with the target element already
selected. (If the window is already open, it just selects the element.)

Note that this only applies to single-process mode for now. In OOP mode,
the "inspect element" action is disabled.
2021-08-23 15:59:29 +02:00

107 lines
3.4 KiB
C++

/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include "InspectorWidget.h"
#include <LibGUI/BoxLayout.h>
#include <LibGUI/Splitter.h>
#include <LibGUI/TabWidget.h>
#include <LibGUI/TableView.h>
#include <LibGUI/TreeView.h>
#include <LibWeb/DOM/Document.h>
#include <LibWeb/DOM/Element.h>
#include <LibWeb/DOMTreeJSONModel.h>
#include <LibWeb/DOMTreeModel.h>
#include <LibWeb/LayoutTreeModel.h>
#include <LibWeb/StylePropertiesModel.h>
namespace Browser {
void InspectorWidget::set_inspected_node(GUI::ModelIndex const index)
{
if (!m_document) {
// FIXME: Handle this for OutOfProcessWebView
return;
}
auto* node = static_cast<Web::DOM::Node*>(index.internal_data());
m_inspected_node = node;
m_document->set_inspected_node(node);
m_dom_tree_view->set_cursor(index, GUI::AbstractView::SelectionUpdate::Set);
m_dom_tree_view->expand_all_parents_of(index);
if (node && node->is_element()) {
auto& element = verify_cast<Web::DOM::Element>(*node);
if (element.specified_css_values()) {
m_style_table_view->set_model(Web::StylePropertiesModel::create(*element.specified_css_values()));
m_computed_style_table_view->set_model(Web::StylePropertiesModel::create(*element.computed_style()));
}
} else {
m_style_table_view->set_model(nullptr);
m_computed_style_table_view->set_model(nullptr);
}
}
void InspectorWidget::set_inspected_node(Web::DOM::Node* requested_node)
{
dbgln("Inspected node: {:p}", requested_node);
if (requested_node == nullptr) {
set_inspected_node(GUI::ModelIndex {});
return;
}
set_inspected_node(static_cast<Web::DOMTreeModel*>(m_dom_tree_view->model())->index_for_node(requested_node));
}
InspectorWidget::InspectorWidget()
{
set_layout<GUI::VerticalBoxLayout>();
auto& splitter = add<GUI::VerticalSplitter>();
auto& top_tab_widget = splitter.add<GUI::TabWidget>();
m_dom_tree_view = top_tab_widget.add_tab<GUI::TreeView>("DOM");
m_dom_tree_view->on_selection_change = [this] {
const auto& index = m_dom_tree_view->selection().first();
set_inspected_node(index);
};
m_layout_tree_view = top_tab_widget.add_tab<GUI::TreeView>("Layout");
m_layout_tree_view->on_selection_change = [this] {
const auto& index = m_layout_tree_view->selection().first();
set_inspected_node(index);
};
auto& bottom_tab_widget = splitter.add<GUI::TabWidget>();
m_style_table_view = bottom_tab_widget.add_tab<GUI::TableView>("Styles");
m_computed_style_table_view = bottom_tab_widget.add_tab<GUI::TableView>("Computed");
}
InspectorWidget::~InspectorWidget()
{
}
void InspectorWidget::set_document(Web::DOM::Document* document)
{
document->set_inspected_node(m_inspected_node);
if (m_document == document)
return;
m_document = document;
m_dom_tree_view->set_model(Web::DOMTreeModel::create(*document));
m_layout_tree_view->set_model(Web::LayoutTreeModel::create(*document));
}
void InspectorWidget::set_dom_json(String json)
{
if (m_dom_json.has_value() && m_dom_json.value() == json)
return;
m_dom_json = json;
m_dom_tree_view->set_model(Web::DOMTreeJSONModel::create(m_dom_json->view()));
// FIXME: Support the LayoutTreeModel
// m_layout_tree_view->set_model(Web::LayoutTreeModel::create(*document));
}
}