blob: 01365f4db0ba59aa37c411ac7adc55e4b07cd873 [file]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>R8 Configuration Analyzer</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/protobufjs@7.2.4/dist/protobuf.min.js"></script>
</head>
<body>
<header>
<div class="header-top-row">
<div class="flex items-center" style="display: flex; align-items: center">
<div class="header-branding">
<h1 class="header-title" id="report-name">R8 Configuration Analyzer</h1>
</div>
</div>
<div class="header-stats">
<div class="stat-item">
<span class="stat-label">Obfuscation Score</span><span class="stat-value" id="total-obfuscation"></span>
</div>
<div class="stat-item">
<span class="stat-label">Optimization Score</span><span class="stat-value" id="total-optimization"></span>
</div>
<div class="stat-item">
<span class="stat-label">Shrinking Score</span><span class="stat-value" id="total-shrinking"></span>
</div>
</div>
</div>
<div class="header-toolbar">
<div id="report-view-controls" class="header-toolbar-inner">
<div class="flex-1" style="display: flex; align-items: center; gap: 1rem; justify-content: flex-start">
<div class="filter-icon" title="Filter Options">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M7 12h10M10 18h4"/>
</svg>
</div>
<div id="filter-chips-container" style="display: flex; align-items: center; gap: 0.5rem">
<div class="relative hidden" id="mod-chip-container">
<button id="mod-filter-btn" class="filter-chip">
<span id="mod-filter-text">Keep Rules: All</span>
</button>
<div id="mod-dropdown" class="dropdown-menu hidden"></div>
</div>
<div class="relative hidden" id="cls-chip-container">
<button id="cls-filter-btn" class="filter-chip">
<span id="cls-filter-text">Classes: All</span>
</button>
<div id="cls-dropdown" class="dropdown-menu hidden"></div>
</div>
<div class="relative hidden" id="field-chip-container">
<button id="field-filter-btn" class="filter-chip">
<span id="field-filter-text">Fields: All</span>
</button>
<div id="field-dropdown" class="dropdown-menu hidden"></div>
</div>
<div class="relative hidden" id="method-chip-container">
<button id="method-filter-btn" class="filter-chip">
<span id="method-filter-text">Methods: All</span>
</button>
<div id="method-dropdown" class="dropdown-menu hidden"></div>
</div>
<div class="relative" id="add-filter-container">
<button id="add-filter-btn" class="add-filter-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
</svg>
Add filter
</button>
<div id="add-filter-dropdown" class="dropdown-menu hidden" style="min-width: 10rem">
<div id="add-filter-list"></div>
</div>
</div>
<div class="relative" id="lens-filter-container">
<button id="lens-filter-btn" class="add-filter-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
</svg>
Select keep rule lens
</button>
<div id="lens-filter-dropdown" class="dropdown-menu hidden" style="min-width: 550px">
<div id="lens-filter-list"></div>
</div>
</div>
</div>
</div>
<div class="flex-1" style="display: flex; align-items: center; gap: 0.75rem; justify-content: flex-end">
<div class="relative"></div>
</div>
</div>
</div>
</header>
<div id="report-view" class="container-custom">
<main>
<div class="breadcrumb-row" style="margin-bottom: 1rem;">
<div id="flat-breadcrumbs"></div>
</div>
<div id="stats-container" class="table-container" style="margin-bottom: 2rem; flex: none;">
<table id="stats-table" style="width: 100%; border-collapse: collapse;">
<thead id="stats-table-headers"></thead>
<tbody id="stats-table-data"></tbody>
</table>
</div>
<div class="breadcrumb-row" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
<span class="breadcrumb-text">Project</span>
<div class="relative" id="group-by-container">
<button id="group-by-btn" class="dropdown-btn" style="border: none; background: transparent; padding: 0.25rem 0.5rem; display: flex; align-items: center; border-radius: 4px;">
<span style="font-weight: 500; color: var(--text-gray-400)">Group by:</span>
<span id="group-by-text" style="font-weight: 600; color: var(--text-gray-500); margin-left: 0.25rem">Keep Rules</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="margin-left: 0.25rem; color: var(--text-gray-500)">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div id="group-by-dropdown" class="dropdown-menu right-0 hidden" style="min-width: 150px">
<div class="dropdown-item" data-value="modules">Keep Rules</div>
<div class="dropdown-item" data-value="packages">Keep Rule Files</div>
</div>
</div>
</div>
<div class="table-container">
<table id="main-table">
<thead id="table-headers"></thead>
<tbody id="table-data"></tbody>
</table>
</div>
</main>
</div>
<div id="details-view" class="container-custom" style="display: none">
<main>
<div class="breadcrumb-row" style="margin-bottom: 1rem;">
<div id="details-breadcrumbs"></div>
</div>
<div style="flex: 1; display: flex; flex-direction: column; gap: 1.5rem; min-height: 0; overflow-y: auto; padding-right: 0.5rem;">
<div class="table-container" style="flex: none;">
<div style="padding: 1rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-gray-50);">
<h2 style="font-size: 1rem; font-weight: 700;">
Keep Rule
</h2>
</div>
<table style="width: 100%; border-collapse: collapse;">
<tbody id="details-rule-body"></tbody>
</table>
</div>
<div class="table-container" style="flex: none;">
<div style="padding: 1rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-gray-50); display: flex; justify-content: space-between; align-items: center;">
<h2 style="font-size: 1rem; font-weight: 700;">Impact</h2>
</div>
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr>
<th class="text-center text-xs font-medium text-gray-500 border-b border-gray-200" style="padding: 0.75rem 0.5rem; text-transform: uppercase;">
Kept Classes
</th>
<th class="text-center text-xs font-medium text-gray-500 border-l border-b border-gray-200" style="padding: 0.75rem 0.5rem; text-transform: uppercase;">
Kept fields
</th>
<th class="text-center text-xs font-medium text-gray-500 border-l border-b border-gray-200" style="padding: 0.75rem 0.5rem; text-transform: uppercase;">
Kept methods
</th>
<th class="text-left text-xs font-medium text-gray-500 border-l border-b border-gray-200" style="padding: 0.75rem 1rem; text-transform: uppercase;">
Steps blocked by rule
</th>
</tr>
</thead>
<tbody id="details-impact-body"></tbody>
</table>
</div>
<div class="table-container" style="flex: none;">
<div style="padding: 1rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-gray-50);">
<h2 id="details-identical-rules-title" style="font-size: 1rem; font-weight: 700;">
Identical Rules
</h2>
</div>
<table style="width: 100%; border-collapse: collapse;">
<thead id="details-identical-rules-header">
<tr>
<th rowspan="2" class="text-left bg-gray-50 z-30" style="padding: 1rem; width: 600px; min-width: 600px; border-bottom: 1px solid var(--border-color);">
Rule
</th>
<th colspan="4" class="text-center border-l border-gray-200 bg-gray-50" style="padding: 0.5rem; border-bottom: 1px solid var(--border-color);">
Kept Items (higher is worse)
</th>
<th rowspan="2" colspan="3" class="text-center border-l border-gray-200 bg-gray-50" style="padding: 0.5rem; width: 150px; min-width: 150px; border-bottom: 1px solid var(--border-color);">
Steps blocked by rule
</th>
</tr>
<tr>
<th class="text-center text-xs font-medium text-gray-500 border-l border-gray-200" style="padding: 0.5rem; width: 100px; min-width: 100px; border-bottom: 1px solid var(--border-color);">
Total
</th>
<th class="text-center text-xs font-medium text-gray-500 border-l border-gray-200" style="padding: 0.5rem; width: 100px; min-width: 100px; border-bottom: 1px solid var(--border-color);">
Classes
</th>
<th class="text-center text-xs font-medium text-gray-500 border-l border-gray-200" style="padding: 0.5rem; width: 100px; min-width: 100px; border-bottom: 1px solid var(--border-color);">
Fields
</th>
<th class="text-center text-xs font-medium text-gray-500 border-l border-gray-200" style="padding: 0.5rem; width: 100px; min-width: 100px; border-bottom: 1px solid var(--border-color);">
Methods
</th>
</tr>
</thead>
<tbody id="details-identical-rules-body"></tbody>
</table>
</div>
<div class="table-container" style="flex: none;">
<div style="padding: 1rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-gray-50);">
<h2 id="details-subsumed-by-title" style="font-size: 1rem; font-weight: 700;">
Subsumed By
</h2>
</div>
<table style="width: 100%; border-collapse: collapse;">
<thead id="details-subsumed-by-header">
<tr>
<th rowspan="2" class="text-left bg-gray-50 z-30" style="padding: 1rem; width: 600px; min-width: 600px; border-bottom: 1px solid var(--border-color);">
Rule
</th>
<th colspan="4" class="text-center border-l border-gray-200 bg-gray-50" style="padding: 0.5rem; border-bottom: 1px solid var(--border-color);">
Kept Items (higher is worse)
</th>
<th rowspan="2" colspan="3" class="text-center border-l border-gray-200 bg-gray-50" style="padding: 0.5rem; width: 150px; min-width: 150px; border-bottom: 1px solid var(--border-color);">
Steps blocked by rule
</th>
</tr>
<tr>
<th class="text-center text-xs font-medium text-gray-500 border-l border-gray-200" style="padding: 0.5rem; width: 100px; min-width: 100px; border-bottom: 1px solid var(--border-color);">
Total
</th>
<th class="text-center text-xs font-medium text-gray-500 border-l border-gray-200" style="padding: 0.5rem; width: 100px; min-width: 100px; border-bottom: 1px solid var(--border-color);">
Classes
</th>
<th class="text-center text-xs font-medium text-gray-500 border-l border-gray-200" style="padding: 0.5rem; width: 100px; min-width: 100px; border-bottom: 1px solid var(--border-color);">
Fields
</th>
<th class="text-center text-xs font-medium text-gray-500 border-l border-gray-200" style="padding: 0.5rem; width: 100px; min-width: 100px; border-bottom: 1px solid var(--border-color);">
Methods
</th>
</tr>
</thead>
<tbody id="details-subsumed-by-body"></tbody>
</table>
</div>
<div style="flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; min-height: 400px; overflow: hidden;">
<div class="table-container" style="display: flex; flex-direction: column;">
<div style="padding: 1rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-gray-50);">
<h3 style="font-size: 0.875rem; font-weight: 700;">
Kept Classes
</h3>
</div>
<div id="details-classes-content" style="flex: 1; overflow-y: auto; padding: 0.5rem;"></div>
</div>
<div class="table-container" style="display: flex; flex-direction: column;">
<div style="padding: 1rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-gray-50);">
<h3 style="font-size: 0.875rem; font-weight: 700;">
Kept Fields
</h3>
</div>
<div id="details-fields-content" style="flex: 1; overflow-y: auto; padding: 0.5rem;"></div>
</div>
<div class="table-container" style="display: flex; flex-direction: column;">
<div style="padding: 1rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-gray-50);">
<h3 style="font-size: 0.875rem; font-weight: 700;">
Kept Methods
</h3>
</div>
<div id="details-methods-content" style="flex: 1; overflow-y: auto; padding: 0.5rem;"></div>
</div>
</div>
</div>
</main>
</div>
<div id="file-details-view" class="container-custom" style="display: none">
<main>
<div class="breadcrumb-row" style="margin-bottom: 1rem;">
<div id="file-details-breadcrumbs"></div>
</div>
<div style="flex: 1; display: flex; flex-direction: column; gap: 1.5rem; min-height: 0; overflow-y: auto; padding-right: 0.5rem;">
<div class="table-container" style="flex: none;">
<div style="padding: 1rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-gray-50);">
<h2 style="font-size: 1rem; font-weight: 700;">Impact</h2>
</div>
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr>
<th class="text-center text-xs font-medium text-gray-500 border-b border-gray-200" style="padding: 0.75rem 0.5rem; text-transform: uppercase;">
Kept Classes
</th>
<th class="text-center text-xs font-medium text-gray-500 border-l border-b border-gray-200" style="padding: 0.75rem 0.5rem; text-transform: uppercase;">
Kept fields
</th>
<th class="text-center text-xs font-medium text-gray-500 border-l border-b border-gray-200" style="padding: 0.75rem 0.5rem; text-transform: uppercase;">
Kept methods
</th>
</tr>
</thead>
<tbody id="file-details-impact-body"></tbody>
</table>
</div>
<div class="table-container" style="flex: 1; display: flex; flex-direction: column;">
<div style="padding: 1rem; border-bottom: 1px solid var(--border-color); background-color: var(--bg-gray-50);">
<h2 style="font-size: 1rem; font-weight: 700;">Keep Rules</h2>
</div>
<div style="flex: 1; overflow-y: auto;">
<table style="width: 100%; border-collapse: collapse;">
<thead id="file-details-rules-header">
<tr>
<th rowspan="2" class="text-left bg-gray-50 z-30" style="padding: 1rem; width: 600px; min-width: 600px; border-bottom: 1px solid var(--border-color);">
Rule
</th>
<th colspan="4" class="text-center border-l border-gray-200 bg-gray-50" style="padding: 0.5rem; border-bottom: 1px solid var(--border-color);">
Kept Items (higher is worse)
</th>
<th rowspan="2" colspan="3" class="text-center border-l border-gray-200 bg-gray-50" style="padding: 0.5rem; width: 150px; min-width: 150px; border-bottom: 1px solid var(--border-color);">
Steps blocked by rule
</th>
</tr>
<tr>
<th class="text-center text-xs font-medium text-gray-500 border-l border-gray-200" style="padding: 0.5rem; width: 100px; min-width: 100px; border-bottom: 1px solid var(--border-color);">
Total
</th>
<th class="text-center text-xs font-medium text-gray-500 border-l border-gray-200" style="padding: 0.5rem; width: 100px; min-width: 100px; border-bottom: 1px solid var(--border-color);">
Classes
</th>
<th class="text-center text-xs font-medium text-gray-500 border-l border-gray-200" style="padding: 0.5rem; width: 100px; min-width: 100px; border-bottom: 1px solid var(--border-color);">
Fields
</th>
<th class="text-center text-xs font-medium text-gray-500 border-l border-gray-200" style="padding: 0.5rem; width: 100px; min-width: 100px; border-bottom: 1px solid var(--border-color);">
Methods
</th>
</tr>
</thead>
<tbody id="file-details-rules-body"></tbody>
</table>
</div>
</div>
</div>
</main>
</div>
<script id="blastradius-proto" type="text/plain"></script>
<script id="blastradius-data" type="application/octet-stream"></script>
<script src="main.js"></script>
<script src="utils.js"></script>
</body>
</html>