fergalmoran/ladybird
1
0
Fork 0
mirror of https://github.com/fergalmoran/ladybird.git synced 2025-12-22 09:19:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibJS+WebContent: Implement console.table

Browse Source 
- Expose table from console object
- Add new Table log level
- Create a JS object that represents table rows and columns
- Print table as HTML using WebContentConsoleClient
This commit is contained in:
Gasim Gasimzada
2024-08-09 23:24:26 +02:00
committed by Sam Atkins
parent a2a9a11466
commit 785180dd45
7 changed files with 337 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
Base/res/ladybird/inspector.css
View File

@@ -16,6 +16,9 @@
--console-warning-color: orange;
--console-input-color: rgb(57, 57, 57);
--console-input-focus-color: cyan;
--console-table-row-odd: rgb(57, 57, 57);
--console-table-row-hover: rgb(80, 79, 79);
--console-table-border: gray;
--property-table-head: rgb(57, 57, 57);
}
}
@@ -37,6 +40,9 @@
--console-warning-color: darkorange;
--console-input-color: rgb(229, 229, 229);
--console-input-focus-color: blue;
--console-table-row-odd: rgb(229, 229, 229);
--console-table-row-hover: rgb(199, 198, 198);
--console-table-border: gray;
--property-table-head: rgb(229, 229, 229);
}
}
@@ -283,3 +289,45 @@ details > :not(:first-child) {
padding-left: 10px;
padding-right: 10px;
}
.console-log-table {
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.console-log-table table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border: 1px solid var(--console-table-border);
}
.console-log-table thead {
border-bottom: 1px solid var(--console-table-border);
}
.console-log-table th {
position: sticky;
top: 0px;
border: 1px solid var(--console-table-border);
}
.console-log-table td {
border-left: 1px solid var(--console-table-border);
border-right: 1px solid var(--console-table-border);
}
.console-log-table tbody tr:nth-of-type(2n + 1) {
background-color: var(--console-table-row-odd);
}
.console-log-table tbody tr:hover {
background-color: var(--console-table-row-hover);
}
.console-log-table th,
.console-log-table td {
padding: 4px;
text-align: left;
}