mirror of
https://github.com/fergalmoran/ladybird.git
synced 2025-12-22 09:19:03 +00:00
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:
committed by
Andreas Kling
parent
693af180dd
commit
3c5650f846
@@ -276,6 +276,9 @@ details > :not(:first-child) {
|
||||
.property-table td {
|
||||
padding: 4px;
|
||||
text-align: left;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#fonts {
|
||||
|
||||
@@ -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()">
|
||||
|
||||
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user