| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>R8 Blast Radius Visualizer</title> |
| <link rel="stylesheet" href="style.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> |
| <script src="https://cdn.jsdelivr.net/npm/protobufjs@7.2.4/dist/protobuf.min.js"></script> |
| </head> |
| <body> |
| <header> |
| <h1>R8 Blast Radius Visualizer</h1> |
| <div id="tabs"> |
| <button class="tab-button active" onclick="switchView('rules')">Keep Rules</button> |
| <button class="tab-button" onclick="switchView('files')">Keep Rule Files</button> |
| <button class="tab-button" onclick="switchView('unused')">Unused Rules <span id="unused-count" class="badge hidden">0</span></button> |
| <button class="tab-button" onclick="switchView('redundant')">Redundant Rules <span id="redundant-count" class="badge hidden">0</span></button> |
| </div> |
| <div id="file-info"></div> |
| </header> |
| |
| <div id="container"> |
| <div id="sidebar"> |
| <div id="drop-zone"> |
| <p>Drop a .pb file here<br>or click to upload</p> |
| <input type="file" id="file-input" class="hidden" accept=".pb"> |
| </div> |
| |
| <div class="search-box hidden"> |
| <input type="text" id="search-input" placeholder="Search keep rules..."> |
| </div> |
| |
| <div id="rule-list"> |
| <!-- Rules will be populated here --> |
| </div> |
| </div> |
| |
| <div id="main-content"> |
| <div id="stats-overview" class="hidden"> |
| <div class="stat-card" style="margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;"> |
| <div class="stat-label" style="font-size: 1rem;">Keep Rules</div> |
| <div class="stat-value" id="stat-rules" style="font-size: 2rem;">0</div> |
| </div> |
| <div class="card" style="padding: 0; overflow: hidden;"> |
| <table class="stats-table"> |
| <thead> |
| <tr> |
| <th>Item Type</th> |
| <th style="text-align: right;">No obfuscation</th> |
| <th style="text-align: right;">No optimization</th> |
| <th style="text-align: right;">No shrinking</th> |
| <th style="text-align: right;">Reachable</th> |
| <th style="text-align: right;">Total</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td>Classes</td> |
| <td id="stat-no-obfuscation-classes" style="text-align: right;">0</td> |
| <td id="stat-no-optimization-classes" style="text-align: right;">0</td> |
| <td id="stat-no-shrinking-classes" style="text-align: right;">0</td> |
| <td id="stat-reachable-classes" style="text-align: right;">0</td> |
| <td id="stat-total-classes" style="text-align: right;">0</td> |
| </tr> |
| <tr> |
| <td>Methods</td> |
| <td id="stat-no-obfuscation-methods" style="text-align: right;">0</td> |
| <td id="stat-no-optimization-methods" style="text-align: right;">0</td> |
| <td id="stat-no-shrinking-methods" style="text-align: right;">0</td> |
| <td id="stat-reachable-methods" style="text-align: right;">0</td> |
| <td id="stat-total-methods" style="text-align: right;">0</td> |
| </tr> |
| <tr> |
| <td>Fields</td> |
| <td id="stat-no-obfuscation-fields" style="text-align: right;">0</td> |
| <td id="stat-no-optimization-fields" style="text-align: right;">0</td> |
| <td id="stat-no-shrinking-fields" style="text-align: right;">0</td> |
| <td id="stat-reachable-fields" style="text-align: right;">0</td> |
| <td id="stat-total-fields" style="text-align: right;">0</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| |
| <div id="welcome-message"> |
| <h2>Welcome to the Blast Radius Visualizer</h2> |
| <p>Upload a <code>.pb</code> file generated by R8 with the <code>-printblastradius</code> flag to see how your keep rules affect your build.</p> |
| <p>This tool helps you identify:</p> |
| <ul> |
| <li>Keep rules with the largest impact on your app size.</li> |
| <li>Dependencies that introduce broad keep rules.</li> |
| <li>Redundant keep rules that are subsumed by others.</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <script src="main.js"></script> |
| </body> |
| </html> |
