LibWebView: Add a storage tab to the Inspector to manage cookies

This adds a storage tab which contains just a cookie viewer for now. In
the future, storage like Local Storage and Indexed DB can be added here
as well.

In this patch, the cookie table is read-only.
This commit is contained in:
Timothy Flynn
2024-09-06 12:08:50 -04:00
committed by Andreas Kling
parent 693af180dd
commit 3c5650f846
5 changed files with 97 additions and 0 deletions

View File

@@ -276,6 +276,9 @@ details > :not(:first-child) {
.property-table td {
padding: 4px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
#fonts {

View File

@@ -16,6 +16,7 @@
<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="storage-button" onclick="selectTopTab(this, 'storage')">Storage</button>
<button id="style-sheets-button" onclick="selectTopTab(this, 'style-sheets')">Style Sheets</button>
</div>
@@ -27,6 +28,32 @@
<div id="dom-tree" class="tab-content html"></div>
<div id="accessibility-tree" class="tab-content"></div>
<div id="storage" class="tab-content" style="padding: 0">
<div class="tab-header">
<select id="storage-picker">
<option value="cookies" selected>Cookies</option>
</select>
</div>
<div id="cookie-storage">
<table class="property-table">
<thead>
<tr>
<th style="width: 10%">Name</th>
<th style="width: 15%">Value</th>
<th style="width: 10%">Domain</th>
<th style="width: 5%">Path</th>
<th style="width: 20%">Created</th>
<th style="width: 20%">Last Accessed</th>
<th style="width: 20%">Expires</th>
</tr>
</thead>
<tbody id="cookie-table">
</tbody>
</table>
</div>
</div>
<div id="style-sheets" class="tab-content" style="padding: 0">
<div class="tab-header">
<select id="style-sheet-picker" disabled onchange="loadStyleSheet()">

View File

@@ -103,6 +103,9 @@ inspector.reset = () => {
let accessibilityTree = document.getElementById("accessibility-tree");
accessibilityTree.innerHTML = "";
let cookieTable = document.getElementById("cookie-table");
cookieTable.innerHTML = "";
let styleSheetPicker = document.getElementById("style-sheet-picker");
styleSheetPicker.replaceChildren();
@@ -208,6 +211,35 @@ inspector.addAttributeToDOMNodeID = nodeID => {
pendingEditDOMNode = null;
};
inspector.setCookies = cookies => {
let oldTable = document.getElementById("cookie-table");
let newTable = document.createElement("tbody");
newTable.setAttribute("id", oldTable.id);
const addColumn = (row, value) => {
let column = row.insertCell();
column.innerText = value;
column.title = value;
};
cookies
.sort((lhs, rhs) => lhs.name.localeCompare(rhs.name))
.forEach(cookie => {
let row = newTable.insertRow();
addColumn(row, cookie.name);
addColumn(row, cookie.value);
addColumn(row, cookie.domain);
addColumn(row, cookie.path);
addColumn(row, new Date(cookie.creationTime).toLocaleString());
addColumn(row, new Date(cookie.lastAccessTime).toLocaleString());
addColumn(row, new Date(cookie.expiryTime).toLocaleString());
});
oldTable.parentNode.replaceChild(newTable, oldTable);
};
inspector.setStyleSheets = styleSheets => {
const styleSheetPicker = document.getElementById("style-sheet-picker");
const styleSheetSource = document.getElementById("style-sheet-source");