0ct0pu5
/
ladybird


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535
							/*
 * Copyright (c) 2023, Tim Flynn <trflynn89@serenityos.org>
 *
 * SPDX-License-Identifier: BSD-2-Clause
 */

#include <AK/JsonArray.h>
#include <AK/JsonObject.h>
#include <AK/StringBuilder.h>
#include <LibWeb/Infra/Strings.h>
#include <LibWebView/InspectorClient.h>
#include <LibWebView/SourceHighlighter.h>

namespace WebView {

static ErrorOr<JsonValue> parse_json_tree(StringView json)
{
    auto parsed_tree = TRY(JsonValue::from_string(json));
    if (!parsed_tree.is_object())
        return Error::from_string_literal("Expected tree to be a JSON object");

    return parsed_tree;
}

InspectorClient::InspectorClient(ViewImplementation& content_web_view, ViewImplementation& inspector_web_view)
    : m_content_web_view(content_web_view)
    , m_inspector_web_view(inspector_web_view)
{
    m_content_web_view.on_received_dom_tree = [this](auto const& dom_tree) {
        if (auto result = parse_json_tree(dom_tree); result.is_error())
            dbgln("Failed to load DOM tree: {}", result.error());
        else
            m_dom_tree = result.release_value();

        maybe_load_inspector();
    };

    m_content_web_view.on_received_accessibility_tree = [this](auto const& dom_tree) {
        if (auto result = parse_json_tree(dom_tree); result.is_error())
            dbgln("Failed to load accessibility tree: {}", result.error());
        else
            m_accessibility_tree = result.release_value();

        maybe_load_inspector();
    };

    m_inspector_web_view.enable_inspector_prototype();
    m_inspector_web_view.use_native_user_style_sheet();

    m_inspector_web_view.on_inspector_loaded = [this]() {
        m_inspector_loaded = true;

        if (m_pending_selection.has_value())
            select_node(m_pending_selection.release_value());
        else
            select_default_node();
    };

    m_inspector_web_view.on_inspector_selected_dom_node = [this](auto node_id, auto const& pseudo_element) {
        auto inspected_node_properties = m_content_web_view.inspect_dom_node(node_id, pseudo_element);

        if (on_dom_node_properties_received)
            on_dom_node_properties_received(move(inspected_node_properties));
    };

    inspect();
}

InspectorClient::~InspectorClient()
{
    m_content_web_view.on_received_dom_tree = nullptr;
    m_content_web_view.on_received_accessibility_tree = nullptr;
}

void InspectorClient::inspect()
{
    m_content_web_view.inspect_dom_tree();
    m_content_web_view.inspect_accessibility_tree();
}

void InspectorClient::reset()
{
    m_dom_tree.clear();
    m_accessibility_tree.clear();

    m_body_node_id.clear();
    m_pending_selection.clear();

    m_inspector_loaded = false;
}

void InspectorClient::select_hovered_node()
{
    auto hovered_node_id = m_content_web_view.get_hovered_node_id();
    select_node(hovered_node_id);
}

void InspectorClient::select_default_node()
{
    if (m_body_node_id.has_value())
        select_node(*m_body_node_id);
}

void InspectorClient::clear_selection()
{
    m_content_web_view.clear_inspected_dom_node();

    static constexpr auto script = "inspector.clearInspectedDOMNode();"sv;
    m_inspector_web_view.run_javascript(script);
}

void InspectorClient::select_node(i32 node_id)
{
    if (!m_inspector_loaded) {
        m_pending_selection = node_id;
        return;
    }

    auto script = MUST(String::formatted("inspector.inspectDOMNodeID({});", node_id));
    m_inspector_web_view.run_javascript(script);
}

void InspectorClient::maybe_load_inspector()
{
    if (!m_dom_tree.has_value() || !m_accessibility_tree.has_value())
        return;

    StringBuilder builder;

    builder.append(R"~~~(
<!DOCTYPE html>
<html>
<head>
    <meta name="color-scheme" content="dark light">
    <style type="text/css">
)~~~"sv);

    builder.append(HTML_HIGHLIGHTER_STYLE);

    builder.append(R"~~~(
        body {
            font-family: system-ui, sans-serif;
            font-size: 10pt;

            margin: 0;
        }

        .tab-controls-container {
            position: absolute;
            width: 100%;
            top: 0;

            padding: 4px;

            display: flex;
            align-items: center;
            justify-content: center;

            z-index: 100;
        }

        .tab-controls {
            overflow: hidden;
            flex-shrink: 0;
        }

        .tab-controls button {
            font-size: 12px;
            font-weight: 600;

            float: left;
            border: none;
            outline: none;
            cursor: pointer;

            padding: 4px 8px;
        }

        .tab-controls :first-child {
            border-radius: 0.5rem 0 0 0.5rem;
        }

        .tab-controls :last-child {
            border-radius: 0 0.5rem 0.5rem 0;
        }

        .tab-content {
            height: 100%;

            display: none;
            border-radius: 0.5rem;

            margin-top: 30px;
            padding: 8px;
        }

        @media (prefers-color-scheme: dark) {
            html {
                background-color: rgb(23, 23, 23);
            }

            .tab-controls-container {
                background-color: rgb(57, 57, 57);
            }

            .tab-controls button {
                color: white;
                background-color: rgb(43, 42, 50);
            }

            .tab-controls button.active {
                background-color: rgb(22 100 219);
            }

            .tab-controls button + button {
                border-left: 1px solid rgb(96, 96, 96);
            }
        }

        @media (prefers-color-scheme: light) {
            .tab-controls-container {
                background-color: rgb(229, 229, 229);
            }

            .tab-controls button {
                color: black;
                background-color: white;
            }

            .tab-controls button.active {
                color: white;
                background-color: rgb(28, 138, 255);
            }

            .tab-controls button + button {
                border-left: 1px solid rgb(242, 242, 242);
            }
        }

        details > :not(:first-child) {
            display: list-item;
            list-style: none inside;
            margin-left: 1em;
        }

        .hoverable {
            display: block;
            padding: 1px;
        }

        @media (prefers-color-scheme: dark) {
            .hoverable:hover {
                background-color: #31383e;
            }

            .selected {
                border: 1px dashed cyan;
                padding: 0;
            }
        }

        @media (prefers-color-scheme: light) {
            .hoverable:hover {
                background-color: rgb(236, 236, 236);
            }

            .selected {
                border: 1px dashed blue;
                padding: 0;
            }
        }
    </style>
</head>
<body>
    <div class="tab-controls-container">
        <div class="tab-controls">
            <button id="dom-tree-button" onclick="selectTopTab(this, 'dom-tree')">DOM Tree</button>
            <button id="accessibility-tree-button" onclick="selectTopTab(this, 'accessibility-tree')">Accessibility Tree</button>
        </div>
    </div>

    <div id="dom-tree" class="tab-content html">
)~~~"sv);

    generate_dom_tree(builder);

    builder.append(R"~~~(
    </div>
    <div id="accessibility-tree" class="tab-content">
)~~~"sv);

    generate_accessibility_tree(builder);

    builder.append(R"~~~(
    </div>

    <script type="text/javascript">
        let selectedTopTab = null;
        let selectedTopTabButton = null;
        let selectedDOMNode = null;

        const selectTab = (tabButton, tabID, selectedTab, selectedTabButton) => {
            let tab = document.getElementById(tabID);

            if (selectedTab === tab) {
                return selectedTab;
            }
            if (selectedTab !== null) {
                selectedTab.style.display = "none";
                selectedTabButton.classList.remove("active");
            }

            tab.style.display = "block";
            tabButton.classList.add("active");

            return tab;
        };

        const selectTopTab = (tabButton, tabID) => {
            selectedTopTab = selectTab(tabButton, tabID, selectedTopTab, selectedTopTabButton);
            selectedTopTabButton = tabButton;
        };

        let initialTopTabButton = document.getElementById("dom-tree-button");
        selectTopTab(initialTopTabButton, "dom-tree");

        const scrollToElement = (element) => {
            // Include an offset to prevent the element being placed behind the fixed `tab-controls` header.
            const offset = 45;

            let position = element.getBoundingClientRect().top;
            position += window.pageYOffset - offset;

            window.scrollTo(0, position);
        }

        inspector.inspectDOMNodeID = nodeID => {
            let domNodes = document.querySelectorAll(`[data-id="${nodeID}"]`);
            if (domNodes.length !== 1) {
                return;
            }

            for (let domNode = domNodes[0]; domNode; domNode = domNode.parentNode) {
                if (domNode.tagName === "DETAILS") {
                    domNode.setAttribute("open", "");
                }
            }

            inspectDOMNode(domNodes[0]);
            scrollToElement(selectedDOMNode);
        };

        inspector.clearInspectedDOMNode = () => {
            if (selectedDOMNode !== null) {
                selectedDOMNode.classList.remove("selected");
                selectedDOMNode = null;
            }
        };


        const inspectDOMNode = domNode => {
            if (selectedDOMNode === domNode) {
                return;
            }

            inspector.clearInspectedDOMNode();

            domNode.classList.add("selected");
            selectedDOMNode = domNode;

            inspector.inspectDOMNode(domNode.dataset.id, domNode.dataset.pseudoElement);
        };

        document.addEventListener("DOMContentLoaded", () => {
            let domTree = document.getElementById("dom-tree");
            let domNodes = domTree.getElementsByClassName("hoverable");

            for (let domNode of domNodes) {
                domNode.addEventListener("click", event => {
                    inspectDOMNode(domNode);
                    event.preventDefault();
                });
            }

            inspector.inspectorLoaded();
        });
    </script>
</body>
</html>
)~~~"sv);

    m_inspector_web_view.load_html(builder.string_view());
}

template<typename Generator>
static void generate_tree(StringBuilder& builder, JsonObject const& node, Generator&& generator)
{
    if (auto children = node.get_array("children"sv); children.has_value() && !children->is_empty()) {
        auto name = node.get_deprecated_string("name"sv).value_or({});
        builder.append("<details>"sv);

        builder.append("<summary>"sv);
        generator(node);
        builder.append("</summary>"sv);

        children->for_each([&](auto const& child) {
            builder.append("<div>"sv);
            generate_tree(builder, child.as_object(), generator);
            builder.append("</div>"sv);
        });

        builder.append("</details>"sv);
    } else {
        generator(node);
    }
}

void InspectorClient::generate_dom_tree(StringBuilder& builder)
{
    generate_tree(builder, m_dom_tree->as_object(), [&](JsonObject const& node) {
        auto type = node.get_deprecated_string("type"sv).value_or("unknown"sv);
        auto name = node.get_deprecated_string("name"sv).value_or({});

        StringBuilder data_attributes;
        auto append_data_attribute = [&](auto name, auto value) {
            if (!data_attributes.is_empty())
                data_attributes.append(' ');
            data_attributes.appendff("data-{}=\"{}\"", name, value);
        };

        if (auto pseudo_element = node.get_integer<i32>("pseudo-element"sv); pseudo_element.has_value()) {
            append_data_attribute("id"sv, node.get_integer<i32>("parent-id"sv).value());
            append_data_attribute("pseudo-element"sv, *pseudo_element);
        } else {
            append_data_attribute("id"sv, node.get_integer<i32>("id"sv).value());
        }

        if (type == "text"sv) {
            auto deprecated_text = node.get_deprecated_string("text"sv).release_value();
            deprecated_text = escape_html_entities(deprecated_text);

            if (auto text = MUST(Web::Infra::strip_and_collapse_whitespace(deprecated_text)); text.is_empty()) {
                builder.appendff("<span class=\"hoverable internal\" {}>", data_attributes.string_view());
                builder.append(name);
                builder.append("</span>"sv);
            } else {
                builder.appendff("<span class=\"hoverable\" {}>", data_attributes.string_view());
                builder.append(text);
                builder.append("</span>"sv);
            }

            return;
        }

        if (type == "comment"sv) {
            auto comment = node.get_deprecated_string("data"sv).release_value();
            comment = escape_html_entities(comment);

            builder.appendff("<span class=\"hoverable comment\" {}>", data_attributes.string_view());
            builder.appendff("&lt;!--{}--&gt;", comment);
            builder.append("</span>"sv);
            return;
        }

        if (type == "shadow-root"sv) {
            auto mode = node.get_deprecated_string("mode"sv).release_value();

            builder.appendff("<span class=\"hoverable internal\" {}>", data_attributes.string_view());
            builder.appendff("{} ({})", name, mode);
            builder.append("</span>"sv);
            return;
        }

        if (type != "element"sv) {
            builder.appendff("<span class=\"hoverable internal\" {}>", data_attributes.string_view());
            builder.appendff(name);
            builder.append("</span>"sv);
            return;
        }

        if (name.equals_ignoring_ascii_case("BODY"sv))
            m_body_node_id = node.get_integer<i32>("id"sv).value();

        builder.appendff("<span class=\"hoverable\" {}>", data_attributes.string_view());
        builder.append("<span>&lt;</span>"sv);
        builder.appendff("<span class=\"tag\">{}</span>", name.to_lowercase());

        if (auto attributes = node.get_object("attributes"sv); attributes.has_value()) {
            attributes->for_each_member([&builder](auto const& name, auto const& value) {
                builder.append("&nbsp;"sv);
                builder.appendff("<span class=\"attribute-name\">{}</span>", name);
                builder.append('=');
                builder.appendff("<span class=\"attribute-value\">\"{}\"</span>", value);
            });
        }

        builder.append("<span>&gt;</span>"sv);
        builder.append("</span>"sv);
    });
}

void InspectorClient::generate_accessibility_tree(StringBuilder& builder)
{
    generate_tree(builder, m_accessibility_tree->as_object(), [&](JsonObject const& node) {
        auto type = node.get_deprecated_string("type"sv).value_or("unknown"sv);
        auto role = node.get_deprecated_string("role"sv).value_or({});

        if (type == "text"sv) {
            auto text = node.get_deprecated_string("text"sv).release_value();
            text = escape_html_entities(text);

            builder.appendff("<span class=\"hoverable\">");
            builder.append(MUST(Web::Infra::strip_and_collapse_whitespace(text)));
            builder.append("</span>"sv);
            return;
        }

        if (type != "element"sv) {
            builder.appendff("<span class=\"hoverable internal\">");
            builder.appendff(role.to_lowercase());
            builder.append("</span>"sv);
            return;
        }

        auto name = node.get_deprecated_string("name"sv).value_or({});
        auto description = node.get_deprecated_string("description"sv).value_or({});

        builder.appendff("<span class=\"hoverable\">");
        builder.append(role.to_lowercase());
        builder.appendff(" name: \"{}\", description: \"{}\"", name, description);
        builder.append("</span>"sv);
    });
}

}