mirror of
https://github.com/NohamR/LLDBMemView.git
synced 2026-02-21 18:15:42 +00:00
Initial commit: LLDB Memory Region Parser web app
This commit is contained in:
√(noham)²
26
README.md
Normal file
26
README.md
Normal file
@@ -0,0 +1,26 @@
|
||||
# LLDB Memory Region Parser
|
||||
|
||||
A web-based visualization tool for analyzing and parsing LLDB memory region output.
|
||||
|
||||
> **Note:** This project was vibecoded and built in a rush to support another debugging task.
|
||||
|
||||
## Purpose
|
||||
|
||||
When debugging with LLDB, the `memory region --all` command outputs detailed information about process memory regions. This tool parses that raw output and presents it in a clean, interactive table with filtering, sorting, and statistics.
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
# In LLDB
|
||||
(lldb) process attach --pid <pid>
|
||||
(lldb) memory region --all
|
||||
```
|
||||
Copy the output that looks like:
|
||||
```
|
||||
[0x0000000100000000-0x0000000100004000) r-x __TEXT
|
||||
[0x0000000100004000-0x0000000100008000) rw- __DATA
|
||||
Dirty pages: 0x100004000, 0x100005000
|
||||
...
|
||||
```
|
||||
|
||||
Then paste it into the input area of this tool to visualize the memory regions.
|
||||
200
index.html
Normal file
200
index.html
Normal file
@@ -0,0 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="light">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LLDB Memory Region Parser</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
slate: { 850: '#1e293b' } // Custom dark shade
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="bg-slate-100 dark:bg-slate-900 min-h-screen p-4 md:p-8 text-slate-800 dark:text-slate-200 transition-colors">
|
||||
|
||||
<div class="max-w-7xl mx-auto space-y-6">
|
||||
|
||||
<!-- Header -->
|
||||
<div
|
||||
class="bg-gradient-to-r from-slate-800 to-indigo-900 dark:from-slate-950 dark:to-indigo-950 rounded-xl shadow-lg p-8 text-white text-center relative">
|
||||
<!-- Dark Mode Toggle -->
|
||||
<button onclick="toggleDarkMode()"
|
||||
class="absolute top-4 right-4 p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-colors"
|
||||
title="Toggle dark mode">
|
||||
<svg id="theme-icon-sun" class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
<svg id="theme-icon-moon" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
|
||||
</svg>
|
||||
</button>
|
||||
<h1 class="text-3xl font-bold mb-2 flex items-center justify-center gap-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-indigo-300" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||
</svg>
|
||||
LLDB Memory Region Parser
|
||||
</h1>
|
||||
<p class="text-indigo-200 opacity-90">Analyze memory layout, permissions, and dirty pages from LLDB output
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Input Section -->
|
||||
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-md overflow-hidden transition-colors">
|
||||
<div class="p-6 border-b border-slate-100 dark:border-slate-700">
|
||||
<label for="input" class="block text-sm font-semibold text-slate-600 dark:text-slate-300 mb-2">Paste
|
||||
'memory region --all'
|
||||
output:</label>
|
||||
<textarea id="input"
|
||||
class="w-full h-48 p-4 font-mono text-xs bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all resize-y text-slate-800 dark:text-slate-200"
|
||||
placeholder="[0x0000000100000000-0x0000000100004000) r-x __TEXT..."></textarea>
|
||||
|
||||
<div class="mt-4 flex gap-3">
|
||||
<button onclick="parseMemory()"
|
||||
class="flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2.5 rounded-lg font-medium transition shadow-sm active:transform active:scale-95">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Parse Memory
|
||||
</button>
|
||||
<button onclick="clearAll()"
|
||||
class="flex items-center gap-2 bg-white dark:bg-slate-700 border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 px-6 py-2.5 rounded-lg font-medium transition shadow-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Dashboard -->
|
||||
<div id="stats"
|
||||
class="hidden grid-cols-2 md:grid-cols-5 gap-4 p-6 bg-slate-50 dark:bg-slate-800/50 border-b border-slate-100 dark:border-slate-700">
|
||||
<!-- Stat Cards injected by JS -->
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div id="filter-section"
|
||||
class="hidden p-6 bg-white dark:bg-slate-800 border-b border-slate-100 dark:border-slate-700 flex flex-wrap gap-4 items-center">
|
||||
<div class="flex items-center gap-2 text-slate-600 dark:text-slate-300 font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
Filters:
|
||||
</div>
|
||||
<input type="text" id="addressFilter" placeholder="Search Address or Name..."
|
||||
class="px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-md text-sm focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 w-48 md:w-64 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-200"
|
||||
onkeyup="applyFilters()">
|
||||
|
||||
<select id="permsFilter" onchange="applyFilters()"
|
||||
class="px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-md text-sm focus:ring-1 focus:ring-indigo-500 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-200">
|
||||
<option value="">Any Permission</option>
|
||||
<option value="r">Readable (R)</option>
|
||||
<option value="w">Writable (W)</option>
|
||||
<option value="x">Executable (X)</option>
|
||||
<option value="rw">Read & Write</option>
|
||||
<option value="rx">Read & Exec</option>
|
||||
</select>
|
||||
|
||||
<select id="dirtyFilter" onchange="applyFilters()"
|
||||
class="px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-md text-sm focus:ring-1 focus:ring-indigo-500 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-200">
|
||||
<option value="">All Pages</option>
|
||||
<option value="dirty">Dirty Only</option>
|
||||
<option value="clean">Clean Only</option>
|
||||
</select>
|
||||
|
||||
<label
|
||||
class="flex items-center gap-2 cursor-pointer select-none text-sm text-slate-700 dark:text-slate-200 bg-slate-100 dark:bg-slate-700 px-3 py-2 rounded-md hover:bg-slate-200 dark:hover:bg-slate-600 transition">
|
||||
<input type="checkbox" id="hideEmptyRegions" onchange="applyFilters()" checked
|
||||
class="rounded text-indigo-600 focus:ring-indigo-500">
|
||||
<span>Hide "---" Regions</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="overflow-x-auto custom-scrollbar">
|
||||
<table class="min-w-full divide-y divide-slate-200 dark:divide-slate-700">
|
||||
<thead class="bg-slate-50 dark:bg-slate-800 sticky top-0 z-10">
|
||||
<tr>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-700 group"
|
||||
onclick="sortBy('start')">
|
||||
Start Address
|
||||
<span class="sort-icon invisible group-hover:visible ml-1 inline-block">⇅</span>
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-700 group"
|
||||
onclick="sortBy('end')">
|
||||
End Address
|
||||
<span class="sort-icon invisible group-hover:visible ml-1 inline-block">⇅</span>
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-700 group"
|
||||
onclick="sortBy('size')">
|
||||
Size
|
||||
<span class="sort-icon invisible group-hover:visible ml-1 inline-block">⇅</span>
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-700 group"
|
||||
onclick="sortBy('perms')">
|
||||
Perms
|
||||
<span class="sort-icon invisible group-hover:visible ml-1 inline-block">⇅</span>
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-700 group"
|
||||
onclick="sortBy('name')">
|
||||
Name / Details
|
||||
<span class="sort-icon invisible group-hover:visible ml-1 inline-block">⇅</span>
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-wider cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-700 group"
|
||||
onclick="sortBy('dirty')">
|
||||
Dirty
|
||||
<span class="sort-icon invisible group-hover:visible ml-1 inline-block">⇅</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body"
|
||||
class="bg-white dark:bg-slate-800 divide-y divide-slate-200 dark:divide-slate-700">
|
||||
<!-- Content injected by JS -->
|
||||
<tr class="text-center text-slate-400">
|
||||
<td colspan="6" class="py-12">Waiting for input...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="footer-count"
|
||||
class="bg-slate-50 dark:bg-slate-800/50 p-3 text-xs text-right text-slate-400 dark:text-slate-500 border-t border-slate-200 dark:border-slate-700">
|
||||
0 rows
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="src.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
360
src.js
Normal file
360
src.js
Normal file
@@ -0,0 +1,360 @@
|
||||
let allRegions = [];
|
||||
let currentSort = { column: null, direction: "asc" };
|
||||
|
||||
// Dark Mode Toggle
|
||||
function toggleDarkMode() {
|
||||
const html = document.documentElement;
|
||||
const sunIcon = document.getElementById("theme-icon-sun");
|
||||
const moonIcon = document.getElementById("theme-icon-moon");
|
||||
|
||||
if (html.classList.contains("dark")) {
|
||||
html.classList.remove("dark");
|
||||
html.classList.add("light");
|
||||
sunIcon.classList.add("hidden");
|
||||
moonIcon.classList.remove("hidden");
|
||||
localStorage.setItem("theme", "light");
|
||||
} else {
|
||||
html.classList.remove("light");
|
||||
html.classList.add("dark");
|
||||
sunIcon.classList.remove("hidden");
|
||||
moonIcon.classList.add("hidden");
|
||||
localStorage.setItem("theme", "dark");
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize theme from localStorage
|
||||
(function initTheme() {
|
||||
const savedTheme = localStorage.getItem("theme") || "light";
|
||||
const html = document.documentElement;
|
||||
const sunIcon = document.getElementById("theme-icon-sun");
|
||||
const moonIcon = document.getElementById("theme-icon-moon");
|
||||
|
||||
if (savedTheme === "dark") {
|
||||
html.classList.remove("light");
|
||||
html.classList.add("dark");
|
||||
if (sunIcon) sunIcon.classList.remove("hidden");
|
||||
if (moonIcon) moonIcon.classList.add("hidden");
|
||||
} else {
|
||||
html.classList.remove("dark");
|
||||
html.classList.add("light");
|
||||
if (sunIcon) sunIcon.classList.add("hidden");
|
||||
if (moonIcon) moonIcon.classList.remove("hidden");
|
||||
}
|
||||
})();
|
||||
|
||||
// Parse Logic
|
||||
function parseMemory() {
|
||||
const input = document.getElementById("input").value;
|
||||
if (!input.trim()) return;
|
||||
|
||||
const lines = input.split("\n");
|
||||
const regions = [];
|
||||
let currentRegion = null;
|
||||
|
||||
// Updated Regex to be more robust
|
||||
// Captures: 1: Start, 2: End, 3: Perms, 4: Name (optional)
|
||||
const regionRegex =
|
||||
/\[(0x[0-9a-fA-F]+)-(0x[0-9a-fA-F]+)\)\s+([r\-][w\-][x\-][s\-]?)(?:\s+(.*))?/i;
|
||||
const dirtyRegex = /Dirty pages:\s+(.+)/i;
|
||||
|
||||
for (let line of lines) {
|
||||
line = line.trim();
|
||||
if (!line) continue;
|
||||
|
||||
const regionMatch = line.match(regionRegex);
|
||||
if (regionMatch) {
|
||||
const start = regionMatch[1];
|
||||
const end = regionMatch[2];
|
||||
const perms = regionMatch[3];
|
||||
const name = regionMatch[4] || "";
|
||||
|
||||
currentRegion = {
|
||||
startStr: start, // Keep string for display
|
||||
endStr: end, // Keep string for display
|
||||
startBig: BigInt(start), // Use BigInt for calculation
|
||||
endBig: BigInt(end), // Use BigInt for calculation
|
||||
perms,
|
||||
name,
|
||||
dirtyPages: [],
|
||||
dirtyCount: 0,
|
||||
};
|
||||
|
||||
// Calculate size safely using BigInt
|
||||
currentRegion.size = currentRegion.endBig - currentRegion.startBig;
|
||||
|
||||
regions.push(currentRegion);
|
||||
} else if (currentRegion) {
|
||||
// Check for metadata lines associated with the previous region
|
||||
const dirtyMatch = line.match(dirtyRegex);
|
||||
if (dirtyMatch) {
|
||||
const pages = dirtyMatch[1].split(",").map((p) => p.trim());
|
||||
currentRegion.dirtyPages = pages;
|
||||
currentRegion.dirtyCount = pages.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
allRegions = regions;
|
||||
updateStats(regions);
|
||||
document.getElementById("stats").classList.remove("hidden");
|
||||
document.getElementById("stats").classList.add("grid");
|
||||
document.getElementById("filter-section").classList.remove("hidden");
|
||||
document.getElementById("filter-section").classList.add("flex");
|
||||
|
||||
// Set default sort to Start Address Ascending
|
||||
sortBy("start");
|
||||
}
|
||||
|
||||
function updateStats(regions) {
|
||||
const container = document.getElementById("stats");
|
||||
|
||||
const totalRegions = regions.length;
|
||||
const totalDirty = regions.reduce((acc, r) => acc + r.dirtyCount, 0);
|
||||
|
||||
// BigInt total size summation
|
||||
let totalSizeBytes = 0n;
|
||||
regions.forEach((r) => (totalSizeBytes += r.size));
|
||||
|
||||
const execCount = regions.filter((r) => r.perms.includes("x")).length;
|
||||
const writeCount = regions.filter((r) => r.perms.includes("w")).length;
|
||||
|
||||
const createCard = (label, value, colorClass) => `
|
||||
<div class="bg-white dark:bg-slate-700 p-4 rounded-lg border border-slate-200 dark:border-slate-600 shadow-sm hover:shadow-md transition-shadow">
|
||||
<div class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-1">${label}</div>
|
||||
<div class="text-xl md:text-2xl font-bold ${colorClass}">${value}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.innerHTML =
|
||||
createCard(
|
||||
"Total Regions",
|
||||
totalRegions,
|
||||
"text-slate-800 dark:text-slate-200",
|
||||
) +
|
||||
createCard(
|
||||
"Total Size",
|
||||
formatBytes(totalSizeBytes),
|
||||
"text-indigo-600 dark:text-indigo-400",
|
||||
) +
|
||||
createCard("Executable", execCount, "text-red-500 dark:text-red-400") +
|
||||
createCard("Writable", writeCount, "text-amber-500 dark:text-amber-400") +
|
||||
createCard(
|
||||
"Dirty Pages",
|
||||
totalDirty,
|
||||
"text-emerald-600 dark:text-emerald-400",
|
||||
);
|
||||
}
|
||||
|
||||
function renderTable(regions) {
|
||||
const tbody = document.getElementById("table-body");
|
||||
const footer = document.getElementById("footer-count");
|
||||
|
||||
if (regions.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="6" class="py-8 text-center text-slate-400">No matching regions found.</td></tr>`;
|
||||
footer.textContent = "0 rows";
|
||||
return;
|
||||
}
|
||||
|
||||
// Limit rendering for performance if massive (simple virtualization cap)
|
||||
const renderLimit = 2000;
|
||||
const dataset = regions.slice(0, renderLimit);
|
||||
|
||||
const html = dataset
|
||||
.map((r) => {
|
||||
const isExecutable = r.perms.includes("x");
|
||||
const isWritable = r.perms.includes("w");
|
||||
const isReadable = r.perms.includes("r");
|
||||
|
||||
// Badges for perms
|
||||
let permBadges = "";
|
||||
if (isReadable)
|
||||
permBadges += `<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 mr-1">R</span>`;
|
||||
else
|
||||
permBadges += `<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-slate-100 dark:bg-slate-700 text-slate-400 dark:text-slate-500 mr-1">-</span>`;
|
||||
|
||||
if (isWritable)
|
||||
permBadges += `<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-amber-100 dark:bg-amber-900 text-amber-800 dark:text-amber-200 mr-1">W</span>`;
|
||||
else
|
||||
permBadges += `<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-slate-100 dark:bg-slate-700 text-slate-400 dark:text-slate-500 mr-1">-</span>`;
|
||||
|
||||
if (isExecutable)
|
||||
permBadges += `<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">X</span>`;
|
||||
else
|
||||
permBadges += `<span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-slate-100 dark:bg-slate-700 text-slate-400 dark:text-slate-500">-</span>`;
|
||||
|
||||
// Row highlighting
|
||||
const rowClass =
|
||||
r.dirtyCount > 0
|
||||
? "bg-orange-50 dark:bg-orange-900/20 hover:bg-orange-100 dark:hover:bg-orange-900/30"
|
||||
: "hover:bg-slate-50 dark:hover:bg-slate-700";
|
||||
|
||||
return `
|
||||
<tr class="${rowClass} transition-colors border-b border-slate-100 dark:border-slate-700 last:border-0">
|
||||
<td class="px-6 py-3 whitespace-nowrap font-mono text-xs text-slate-600 dark:text-slate-400 select-all">${r.startStr}</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap font-mono text-xs text-slate-600 dark:text-slate-400 select-all">${r.endStr}</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap text-sm text-slate-700 dark:text-slate-300 font-medium" title="${r.size.toString()} bytes">${formatBytes(r.size)}</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap text-sm">${permBadges}</td>
|
||||
<td class="px-6 py-3 text-sm text-slate-700 dark:text-slate-300 break-all max-w-xs">${r.name || '<span class="text-slate-300 dark:text-slate-600 italic">unnamed</span>'}</td>
|
||||
<td class="px-6 py-3 whitespace-nowrap text-sm">
|
||||
${
|
||||
r.dirtyCount > 0
|
||||
? `<span class="px-2 py-1 text-xs font-bold leading-none text-orange-800 dark:text-orange-200 bg-orange-200 dark:bg-orange-900/50 rounded-full">${r.dirtyCount}</span>`
|
||||
: '<span class="text-slate-300 dark:text-slate-600 text-xs">-</span>'
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
tbody.innerHTML = html;
|
||||
|
||||
const remaining = regions.length - renderLimit;
|
||||
footer.innerHTML =
|
||||
remaining > 0
|
||||
? `${dataset.length} rows shown (${remaining} hidden for performance)`
|
||||
: `${dataset.length} rows`;
|
||||
}
|
||||
|
||||
// --- Helpers & Utilities ---
|
||||
|
||||
function formatBytes(bigIntBytes) {
|
||||
if (bigIntBytes === 0n) return "0 B";
|
||||
|
||||
// Convert to Number for display formatting (precision loss at PB scale is acceptable for UI)
|
||||
const bytes = Number(bigIntBytes);
|
||||
const k = 1024;
|
||||
const sizes = ["B", "KB", "MB", "GB", "TB", "PB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
||||
}
|
||||
|
||||
function sortBy(column) {
|
||||
if (currentSort.column === column) {
|
||||
currentSort.direction = currentSort.direction === "asc" ? "desc" : "asc";
|
||||
} else {
|
||||
currentSort.column = column;
|
||||
currentSort.direction = "asc";
|
||||
}
|
||||
|
||||
// Visual indicator helper
|
||||
document
|
||||
.querySelectorAll(".sort-icon")
|
||||
.forEach((el) => (el.textContent = "⇅"));
|
||||
document
|
||||
.querySelectorAll(".sort-icon")
|
||||
.forEach((el) => el.classList.remove("text-indigo-600"));
|
||||
|
||||
// Update active header
|
||||
const headers = document.querySelectorAll("th");
|
||||
headers.forEach((th) => {
|
||||
if (th.onclick.toString().includes(column)) {
|
||||
const icon = th.querySelector(".sort-icon");
|
||||
icon.textContent = currentSort.direction === "asc" ? "▲" : "▼";
|
||||
icon.classList.add("text-indigo-600");
|
||||
icon.classList.remove("invisible");
|
||||
}
|
||||
});
|
||||
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
function applyFilters() {
|
||||
const addrFilter = document
|
||||
.getElementById("addressFilter")
|
||||
.value.toLowerCase();
|
||||
const permsFilter = document.getElementById("permsFilter").value;
|
||||
const dirtyFilter = document.getElementById("dirtyFilter").value;
|
||||
const hideEmpty = document.getElementById("hideEmptyRegions").checked;
|
||||
|
||||
let filtered = allRegions.filter((r) => {
|
||||
// 1. Empty/Permissions check
|
||||
if (hideEmpty && r.perms.startsWith("---")) return false;
|
||||
|
||||
// 2. Address/Name Search
|
||||
if (addrFilter) {
|
||||
const searchStr = (r.startStr + r.endStr + r.name).toLowerCase();
|
||||
if (!searchStr.includes(addrFilter)) return false;
|
||||
}
|
||||
|
||||
// 3. Permissions Dropdown
|
||||
if (permsFilter) {
|
||||
if (
|
||||
permsFilter === "rw" &&
|
||||
(!r.perms.includes("r") || !r.perms.includes("w"))
|
||||
)
|
||||
return false;
|
||||
else if (
|
||||
permsFilter === "rx" &&
|
||||
(!r.perms.includes("r") || !r.perms.includes("x"))
|
||||
)
|
||||
return false;
|
||||
else if (permsFilter.length === 1 && !r.perms.includes(permsFilter))
|
||||
return false;
|
||||
}
|
||||
|
||||
// 4. Dirty Pages
|
||||
if (dirtyFilter === "dirty" && r.dirtyCount === 0) return false;
|
||||
if (dirtyFilter === "clean" && r.dirtyCount > 0) return false;
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
// Apply Sort
|
||||
filtered.sort((a, b) => {
|
||||
let valA, valB;
|
||||
|
||||
switch (currentSort.column) {
|
||||
case "start":
|
||||
valA = a.startBig;
|
||||
valB = b.startBig;
|
||||
break;
|
||||
case "end":
|
||||
valA = a.endBig;
|
||||
valB = b.endBig;
|
||||
break;
|
||||
case "size":
|
||||
valA = a.size;
|
||||
valB = b.size;
|
||||
break;
|
||||
case "perms":
|
||||
valA = a.perms;
|
||||
valB = b.perms;
|
||||
break; // string comparison
|
||||
case "name":
|
||||
valA = a.name.toLowerCase();
|
||||
valB = b.name.toLowerCase();
|
||||
break;
|
||||
case "dirty":
|
||||
valA = a.dirtyCount;
|
||||
valB = b.dirtyCount;
|
||||
break;
|
||||
}
|
||||
|
||||
if (valA < valB) return currentSort.direction === "asc" ? -1 : 1;
|
||||
if (valA > valB) return currentSort.direction === "asc" ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
renderTable(filtered);
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
document.getElementById("input").value = "";
|
||||
document.getElementById("table-body").innerHTML =
|
||||
`<tr><td colspan="6" class="py-12 text-center text-slate-400">Waiting for input...</td></tr>`;
|
||||
document.getElementById("stats").classList.add("hidden");
|
||||
document.getElementById("stats").classList.remove("grid");
|
||||
document.getElementById("filter-section").classList.add("hidden");
|
||||
document.getElementById("filter-section").classList.remove("flex");
|
||||
document.getElementById("footer-count").innerText = "0 rows";
|
||||
|
||||
// Reset filters
|
||||
document.getElementById("addressFilter").value = "";
|
||||
document.getElementById("permsFilter").value = "";
|
||||
document.getElementById("dirtyFilter").value = "";
|
||||
|
||||
allRegions = [];
|
||||
currentSort = { column: null, direction: "asc" };
|
||||
}
|
||||
41
style.css
Normal file
41
style.css
Normal file
@@ -0,0 +1,41 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.font-mono {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
/* Custom scrollbar for table container */
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
.dark .custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #475569;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
|
||||
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: #64748b;
|
||||
}
|
||||
Reference in New Issue
Block a user