mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-06-09 09:34:57 +09:00
LibWebView: Migrate the Inspector's HTML to its own HTML file
It's getting a bit unwieldy to maintain as an inlined string. Move it to its own file so it can be edited with syntax highlighting and other IDE features.
This commit is contained in:
Timothy Flynn
Andreas Kling
parent
440f40fde6
commit
2c35e272ba
Notes:
github-actions[bot]
2024-09-07 09:11:56 +00:00
Author: https://github.com/trflynn89
Commit: 2c35e272ba
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1302
3 changed files with 103 additions and 97 deletions
87
Base/res/ladybird/inspector.html
Normal file
87
Base/res/ladybird/inspector.html
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta name="color-scheme" content="dark light">
|
||||||
|
<title>Inspector</title>
|
||||||
|
|
||||||
|
<style type="text/css">@INSPECTOR_STYLE@</style>
|
||||||
|
<link href="@INSPECTOR_CSS@" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="split-view">
|
||||||
|
<div id="inspector-top" class="split-view-container" style="height: 60%">
|
||||||
|
<div class="tab-controls-container">
|
||||||
|
<div class="global-controls"></div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<button id="style-sheets-button" onclick="selectTopTab(this, 'style-sheets')">Style Sheets</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="global-controls">
|
||||||
|
<button id="export-inspector-button" title="Export the Inspector to an HTML file" onclick="inspector.exportInspector()"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="dom-tree" class="tab-content html"></div>
|
||||||
|
<div id="accessibility-tree" class="tab-content"></div>
|
||||||
|
|
||||||
|
<div id="style-sheets" class="tab-content" style="padding: 0">
|
||||||
|
<div class="tab-header">
|
||||||
|
<select id="style-sheet-picker" disabled onchange="loadStyleSheet()">
|
||||||
|
<option value="." selected>No style sheets found</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="style-sheet-source"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="inspector-separator" class="split-view-separator">
|
||||||
|
<svg viewBox="0 0 16 5" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="2" cy="2.5" r="2" />
|
||||||
|
<circle cx="8" cy="2.5" r="2" />
|
||||||
|
<circle cx="14" cy="2.5" r="2" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="inspector-bottom" class="split-view-container" style="height: calc(40% - 5px)">
|
||||||
|
<div class="tab-controls-container">
|
||||||
|
<div class="global-controls"></div>
|
||||||
|
|
||||||
|
<div class="tab-controls">
|
||||||
|
<button id="console-button" onclick="selectBottomTab(this, 'console')">Console</button>
|
||||||
|
<button id="computed-style-button" onclick="selectBottomTab(this, 'computed-style')">Computed Style</button>
|
||||||
|
<button id="resolved-style-button" onclick="selectBottomTab(this, 'resolved-style')">Resolved Style</button>
|
||||||
|
<button id="custom-properties-button" onclick="selectBottomTab(this, 'custom-properties')">Custom Properties</button>
|
||||||
|
<button id="font-button" onclick="selectBottomTab(this, 'fonts')">Fonts</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="global-controls"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="console" class="tab-content">
|
||||||
|
<div class="console">
|
||||||
|
<div id="console-output" class="console-output"></div>
|
||||||
|
<div class="console-input">
|
||||||
|
<label for="console-input" class="console-prompt">>></label>
|
||||||
|
<input id="console-input" type="text" placeholder="Enter statement to execute">
|
||||||
|
<button id="console-clear" title="Clear the console output" onclick="inspector.clearConsoleOutput()">X</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@COMPUTED_STYLE@
|
||||||
|
@RESOVLED_STYLE@
|
||||||
|
@CUSTOM_PROPERTIES@
|
||||||
|
|
||||||
|
<div id="fonts" class="tab-content">
|
||||||
|
<div id="fonts-list"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="@INSPECTOR_JS@"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -63,6 +63,7 @@ list(TRANSFORM BROWSER_ICONS PREPEND "${LADYBIRD_SOURCE_DIR}/Base/res/icons/brow
|
||||||
set(WEB_RESOURCES
|
set(WEB_RESOURCES
|
||||||
about.html
|
about.html
|
||||||
inspector.css
|
inspector.css
|
||||||
|
inspector.html
|
||||||
inspector.js
|
inspector.js
|
||||||
newtab.html
|
newtab.html
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
#include <AK/JsonArray.h>
|
#include <AK/JsonArray.h>
|
||||||
#include <AK/JsonObject.h>
|
#include <AK/JsonObject.h>
|
||||||
#include <AK/LexicalPath.h>
|
#include <AK/LexicalPath.h>
|
||||||
|
#include <AK/SourceGenerator.h>
|
||||||
#include <AK/StringBuilder.h>
|
#include <AK/StringBuilder.h>
|
||||||
#include <LibCore/Directory.h>
|
#include <LibCore/Directory.h>
|
||||||
#include <LibCore/File.h>
|
#include <LibCore/File.h>
|
||||||
|
|
@ -20,6 +21,7 @@
|
||||||
|
|
||||||
namespace WebView {
|
namespace WebView {
|
||||||
|
|
||||||
|
static constexpr auto INSPECTOR_HTML = "resource://ladybird/inspector.html"sv;
|
||||||
static constexpr auto INSPECTOR_CSS = "resource://ladybird/inspector.css"sv;
|
static constexpr auto INSPECTOR_CSS = "resource://ladybird/inspector.css"sv;
|
||||||
static constexpr auto INSPECTOR_JS = "resource://ladybird/inspector.js"sv;
|
static constexpr auto INSPECTOR_JS = "resource://ladybird/inspector.js"sv;
|
||||||
|
|
||||||
|
|
@ -437,82 +439,10 @@ void InspectorClient::context_menu_copy_dom_node_attribute_value()
|
||||||
|
|
||||||
void InspectorClient::load_inspector()
|
void InspectorClient::load_inspector()
|
||||||
{
|
{
|
||||||
StringBuilder builder;
|
auto inspector_html = MUST(Core::Resource::load_from_uri(INSPECTOR_HTML));
|
||||||
|
|
||||||
builder.append(R"~~~(
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta name="color-scheme" content="dark light">
|
|
||||||
<title>Inspector</title>
|
|
||||||
<style type="text/css">
|
|
||||||
)~~~"sv);
|
|
||||||
|
|
||||||
builder.append(HTML_HIGHLIGHTER_STYLE);
|
|
||||||
|
|
||||||
builder.appendff(R"~~~(
|
|
||||||
</style>
|
|
||||||
<link href="{}" rel="stylesheet" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="split-view">
|
|
||||||
<div id="inspector-top" class="split-view-container" style="height: 60%">
|
|
||||||
<div class="tab-controls-container">
|
|
||||||
<div class="global-controls"></div>
|
|
||||||
<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>
|
|
||||||
<button id="style-sheets-button" onclick="selectTopTab(this, 'style-sheets')">Style Sheets</button>
|
|
||||||
</div>
|
|
||||||
<div class="global-controls">
|
|
||||||
<button id="export-inspector-button" title="Export the Inspector to an HTML file" onclick="inspector.exportInspector()"></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="dom-tree" class="tab-content html"></div>
|
|
||||||
<div id="accessibility-tree" class="tab-content"></div>
|
|
||||||
<div id="style-sheets" class="tab-content" style="padding: 0">
|
|
||||||
<div class="tab-header">
|
|
||||||
<select id="style-sheet-picker" disabled onchange="loadStyleSheet()">
|
|
||||||
<option value="." selected>No style sheets found</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div id="style-sheet-source"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="inspector-separator" class="split-view-separator">
|
|
||||||
<svg viewBox="0 0 16 5" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<circle cx="2" cy="2.5" r="2" />
|
|
||||||
<circle cx="8" cy="2.5" r="2" />
|
|
||||||
<circle cx="14" cy="2.5" r="2" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div id="inspector-bottom" class="split-view-container" style="height: calc(40% - 5px)">
|
|
||||||
<div class="tab-controls-container">
|
|
||||||
<div class="global-controls"></div>
|
|
||||||
<div class="tab-controls">
|
|
||||||
<button id="console-button" onclick="selectBottomTab(this, 'console')">Console</button>
|
|
||||||
<button id="computed-style-button" onclick="selectBottomTab(this, 'computed-style')">Computed Style</button>
|
|
||||||
<button id="resolved-style-button" onclick="selectBottomTab(this, 'resolved-style')">Resolved Style</button>
|
|
||||||
<button id="custom-properties-button" onclick="selectBottomTab(this, 'custom-properties')">Custom Properties</button>
|
|
||||||
<button id="font-button" onclick="selectBottomTab(this, 'fonts')">Fonts</button>
|
|
||||||
</div>
|
|
||||||
<div class="global-controls"></div>
|
|
||||||
</div>
|
|
||||||
<div id="console" class="tab-content">
|
|
||||||
<div class="console">
|
|
||||||
<div id="console-output" class="console-output"></div>
|
|
||||||
<div class="console-input">
|
|
||||||
<label for="console-input" class="console-prompt">>></label>
|
|
||||||
<input id="console-input" type="text" placeholder="Enter statement to execute">
|
|
||||||
<button id="console-clear" title="Clear the console output" onclick="inspector.clearConsoleOutput()">X</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)~~~",
|
|
||||||
INSPECTOR_CSS);
|
|
||||||
|
|
||||||
auto generate_property_table = [&](auto name) {
|
auto generate_property_table = [&](auto name) {
|
||||||
builder.appendff(R"~~~(
|
return MUST(String::formatted(R"~~~(
|
||||||
<div id="{0}" class="tab-content">
|
<div id="{0}" class="tab-content">
|
||||||
<table class="property-table">
|
<table class="property-table">
|
||||||
<thead>
|
<thead>
|
||||||
|
|
@ -526,33 +456,21 @@ void InspectorClient::load_inspector()
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
)~~~",
|
)~~~",
|
||||||
name);
|
name));
|
||||||
};
|
};
|
||||||
|
|
||||||
generate_property_table("computed-style"sv);
|
StringBuilder builder;
|
||||||
generate_property_table("resolved-style"sv);
|
|
||||||
generate_property_table("custom-properties"sv);
|
|
||||||
|
|
||||||
builder.append(R"~~~(
|
SourceGenerator generator { builder };
|
||||||
<div id="fonts" class="tab-content">
|
generator.set("INSPECTOR_CSS"sv, INSPECTOR_CSS);
|
||||||
<div id="fonts-list">
|
generator.set("INSPECTOR_JS"sv, INSPECTOR_JS);
|
||||||
</div>
|
generator.set("INSPECTOR_STYLE"sv, HTML_HIGHLIGHTER_STYLE);
|
||||||
<div id="fonts-details">
|
generator.set("COMPUTED_STYLE"sv, generate_property_table("computed-style"sv));
|
||||||
</div>
|
generator.set("RESOVLED_STYLE"sv, generate_property_table("resolved-style"sv));
|
||||||
</div>
|
generator.set("CUSTOM_PROPERTIES"sv, generate_property_table("custom-properties"sv));
|
||||||
)~~~"sv);
|
generator.append(inspector_html->data());
|
||||||
|
|
||||||
builder.appendff(R"~~~(
|
m_inspector_web_view.load_html(generator.as_string_view());
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="{}"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
)~~~",
|
|
||||||
INSPECTOR_JS);
|
|
||||||
|
|
||||||
m_inspector_web_view.load_html(builder.string_view());
|
|
||||||
}
|
}
|
||||||
|
|
||||||
template<typename Generator>
|
template<typename Generator>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue