| <!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"> |
| <a |
| href="#" |
| id="header-link" |
| style="color: inherit; text-decoration: none" |
| >R8 Configuration Analyzer</a |
| > |
| </h1> |
| </div> |
| </div> |
| <div class="header-stats"> |
| <div class="stat-item"> |
| <span class="stat-label">Shrinking</span |
| ><span class="stat-value" id="total-shrinking"></span> |
| </div> |
| <div class="stat-item"> |
| <span class="stat-label">Optimization</span |
| ><span class="stat-value" id="total-optimization"></span> |
| </div> |
| <div class="stat-item"> |
| <span class="stat-label">Obfuscation</span |
| ><span class="stat-value" id="total-obfuscation"></span> |
| </div> |
| <button |
| type="button" |
| class="tooltip-icon" |
| id="lenses-tooltip-icon" |
| style="cursor: pointer" |
| data-tooltip="These numbers represent optimization ratios for code before optimization passes have occurred. For final optimization ratios, build your app bundle, and see r8.json." |
| aria-label="These numbers represent optimization ratios for code before optimization passes have occurred. For final optimization ratios, build your app bundle, and see r8.json." |
| > |
| ? |
| </button> |
| </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="segmented-control" id="lens-tabs"> |
| <button class="segment-btn active" data-lens="All"> |
| All Rules |
| </button> |
| <button class="segment-btn" data-lens="Identical"> |
| Identical |
| </button> |
| <button class="segment-btn" data-lens="Subsumed"> |
| Subsumed |
| </button> |
| <button class="segment-btn" data-lens="Unused">Unused</button> |
| </div> |
| <button |
| type="button" |
| class="tooltip-icon" |
| id="lenses-tooltip-icon" |
| style="cursor: pointer; margin-right: 0.5rem" |
| data-tooltip="Filter rules to a specific opportunity." |
| aria-label="Filter rules to a specific opportunity." |
| > |
| ? |
| </button> |
| <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 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> |
| </div> |
| <div |
| class="flex-1" |
| style=" |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| justify-content: flex-end; |
| " |
| > |
| <div id="search-container" class="search-bar-container relative"> |
| <div class="search-bar-icon" id="search-icon-btn"> |
| <svg |
| xmlns="http://www.w3.org/2000/svg" |
| width="18" |
| height="18" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| stroke-width="2" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" |
| ></path> |
| </svg> |
| </div> |
| <input |
| type="text" |
| id="search-input" |
| class="search-bar-input" |
| placeholder="Search report..." |
| /> |
| <button |
| id="clear-search-btn" |
| class="hidden" |
| style=" |
| color: var(--text-gray-500); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| " |
| > |
| <svg |
| xmlns="http://www.w3.org/2000/svg" |
| width="18" |
| height="18" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| stroke-width="2" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" |
| ></path> |
| </svg> |
| </button> |
| </div> |
| <div class="relative" id="columns-toggle-container"> |
| <button |
| id="toggle-columns-btn" |
| class="icon-btn" |
| title="Toggle Columns" |
| > |
| <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="M9 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H9m0-18v18" |
| ></path> |
| </svg> |
| </button> |
| <div |
| id="columns-dropdown" |
| class="dropdown-menu right-0 hidden" |
| style="min-width: 150px" |
| > |
| <label |
| class="popover-item" |
| style=" |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.5rem 0.75rem; |
| cursor: pointer; |
| " |
| > |
| <input |
| type="checkbox" |
| class="popover-checkbox" |
| id="toggle-blocked-by-rule-cb" |
| checked |
| /> |
| <span |
| style=" |
| font-size: 0.75rem; |
| font-weight: 500; |
| color: var(--text-main); |
| " |
| >Blocked by Rule</span |
| > |
| </label> |
| </div> |
| </div> |
| <div class="relative" id="group-by-container"> |
| <button |
| id="group-by-btn" |
| class="dropdown-btn" |
| style=" |
| border: none; |
| background: #f8f8f8; |
| padding: 0.5rem 0.75rem; |
| 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); |
| width: 16px; |
| height: 16px; |
| " |
| > |
| <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> |
| </div> |
| </header> |
| <div id="report-view" class="container-custom"> |
| <main> |
| <div class="breadcrumb-row" style="margin-bottom: 2rem; height: auto"> |
| <div id="flat-breadcrumbs"></div> |
| </div> |
| <div |
| id="stats-container" |
| style="display: flex; gap: 1rem; padding: 0rem; margin-bottom: 1rem" |
| > |
| <!-- Shrinking Card --> |
| <div |
| class="stat-card" |
| style=" |
| background: #ffffff; |
| padding: 1rem; |
| border-radius: 0.5rem; |
| border: 1px solid var(--border-color); |
| flex: 1; |
| " |
| > |
| <div |
| style=" |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 0.5rem; |
| " |
| > |
| <div |
| style=" |
| color: var(--text-muted); |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| font-weight: 600; |
| display: flex; |
| align-items: center; |
| gap: 0.25rem; |
| " |
| > |
| Shrinking |
| <button |
| type="button" |
| class="tooltip-icon" |
| data-tooltip="Percentage of the app's code base that is subject to removal if unused. The reported score is from before optimization passes have occurred. When R8 performs shrinking, it reduces the overall size of your application by identifying and eliminating code and resources that are not actually being used, ensuring your final build is as lean as possible." |
| aria-label="Percentage of the app's code base that is subject to removal if unused. The reported score is from before optimization passes have occurred. When R8 performs shrinking, it reduces the overall size of your application by identifying and eliminating code and resources that are not actually being used, ensuring your final build is as lean as possible." |
| > |
| ? |
| </button> |
| </div> |
| <div |
| id="card-total-shrinking" |
| style=" |
| font-size: 1rem; |
| font-weight: 700; |
| color: var(--text-yellow-600); |
| " |
| > |
| -- |
| </div> |
| </div> |
| <div style="display: flex; flex-direction: column; gap: 0.5rem"> |
| <!-- Classes --> |
| <div |
| style=" |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| font-size: 0.75rem; |
| " |
| > |
| <span style="color: var(--text-gray-500); width: 60px" |
| >Classes</span |
| > |
| <div |
| style=" |
| flex: 1; |
| height: 4px; |
| background: var(--bg-hover); |
| border-radius: 2px; |
| margin: 0 1rem; |
| " |
| > |
| <div |
| id="card-shrinking-classes-bar" |
| style=" |
| height: 100%; |
| background: var(--text-yellow-600); |
| border-radius: 2px; |
| width: 0%; |
| " |
| ></div> |
| </div> |
| <span |
| id="card-shrinking-classes-val" |
| style="color: var(--text-gray-900); font-weight: 500" |
| >--</span |
| > |
| </div> |
| <!-- Fields --> |
| <div |
| style=" |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| font-size: 0.75rem; |
| " |
| > |
| <span style="color: var(--text-gray-500); width: 60px" |
| >Fields</span |
| > |
| <div |
| style=" |
| flex: 1; |
| height: 4px; |
| background: var(--bg-hover); |
| border-radius: 2px; |
| margin: 0 1rem; |
| " |
| > |
| <div |
| id="card-shrinking-fields-bar" |
| style=" |
| height: 100%; |
| background: var(--text-yellow-600); |
| border-radius: 2px; |
| width: 0%; |
| " |
| ></div> |
| </div> |
| <span |
| id="card-shrinking-fields-val" |
| style="color: var(--text-gray-900); font-weight: 500" |
| >--</span |
| > |
| </div> |
| <!-- Methods --> |
| <div |
| style=" |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| font-size: 0.75rem; |
| " |
| > |
| <span style="color: var(--text-gray-500); width: 60px" |
| >Methods</span |
| > |
| <div |
| style=" |
| flex: 1; |
| height: 4px; |
| background: var(--bg-hover); |
| border-radius: 2px; |
| margin: 0 1rem; |
| " |
| > |
| <div |
| id="card-shrinking-methods-bar" |
| style=" |
| height: 100%; |
| background: var(--text-yellow-600); |
| border-radius: 2px; |
| width: 0%; |
| " |
| ></div> |
| </div> |
| <span |
| id="card-shrinking-methods-val" |
| style="color: var(--text-gray-900); font-weight: 500" |
| >--</span |
| > |
| </div> |
| </div> |
| </div> |
| <!-- Optimization Card --> |
| <div |
| class="stat-card" |
| style=" |
| background: #ffffff; |
| padding: 1rem; |
| border-radius: 0.5rem; |
| border: 1px solid var(--border-color); |
| flex: 1; |
| " |
| > |
| <div |
| style=" |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 0.5rem; |
| " |
| > |
| <div |
| style=" |
| color: var(--text-muted); |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| font-weight: 600; |
| display: flex; |
| align-items: center; |
| gap: 0.25rem; |
| " |
| > |
| Optimization |
| <button |
| type="button" |
| class="tooltip-icon" |
| data-tooltip="Percentage of the app's code base that is subject to optimization, such as method inlining and class merging. The reported score is from before optimization passes have occurred. Optimizations improve the performance and size of the app." |
| aria-label="Percentage of the app's code base that is subject to optimization, such as method inlining and class merging. The reported score is from before optimization passes have occurred. Optimizations improve the performance and size of the app." |
| > |
| ? |
| </button> |
| </div> |
| <div |
| id="card-total-optimization" |
| style=" |
| font-size: 1rem; |
| font-weight: 700; |
| color: var(--text-yellow-600); |
| " |
| > |
| -- |
| </div> |
| </div> |
| <div style="display: flex; flex-direction: column; gap: 0.5rem"> |
| <!-- Classes --> |
| <div |
| style=" |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| font-size: 0.75rem; |
| " |
| > |
| <span style="color: var(--text-gray-500); width: 60px" |
| >Classes</span |
| > |
| <div |
| style=" |
| flex: 1; |
| height: 4px; |
| background: var(--bg-hover); |
| border-radius: 2px; |
| margin: 0 1rem; |
| " |
| > |
| <div |
| id="card-optimization-classes-bar" |
| style=" |
| height: 100%; |
| background: var(--text-yellow-600); |
| border-radius: 2px; |
| width: 0%; |
| " |
| ></div> |
| </div> |
| <span |
| id="card-optimization-classes-val" |
| style="color: var(--text-gray-900); font-weight: 500" |
| >--</span |
| > |
| </div> |
| <!-- Fields --> |
| <div |
| style=" |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| font-size: 0.75rem; |
| " |
| > |
| <span style="color: var(--text-gray-500); width: 60px" |
| >Fields</span |
| > |
| <div |
| style=" |
| flex: 1; |
| height: 4px; |
| background: var(--bg-hover); |
| border-radius: 2px; |
| margin: 0 1rem; |
| " |
| > |
| <div |
| id="card-optimization-fields-bar" |
| style=" |
| height: 100%; |
| background: var(--text-yellow-600); |
| border-radius: 2px; |
| width: 0%; |
| " |
| ></div> |
| </div> |
| <span |
| id="card-optimization-fields-val" |
| style="color: var(--text-gray-900); font-weight: 500" |
| >--</span |
| > |
| </div> |
| <!-- Methods --> |
| <div |
| style=" |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| font-size: 0.75rem; |
| " |
| > |
| <span style="color: var(--text-gray-500); width: 60px" |
| >Methods</span |
| > |
| <div |
| style=" |
| flex: 1; |
| height: 4px; |
| background: var(--bg-hover); |
| border-radius: 2px; |
| margin: 0 1rem; |
| " |
| > |
| <div |
| id="card-optimization-methods-bar" |
| style=" |
| height: 100%; |
| background: var(--text-yellow-600); |
| border-radius: 2px; |
| width: 0%; |
| " |
| ></div> |
| </div> |
| <span |
| id="card-optimization-methods-val" |
| style="color: var(--text-gray-900); font-weight: 500" |
| >--</span |
| > |
| </div> |
| </div> |
| </div> |
| <!-- Obfuscation Card --> |
| <div |
| class="stat-card" |
| style=" |
| background: #ffffff; |
| padding: 1rem; |
| border-radius: 0.5rem; |
| border: 1px solid var(--border-color); |
| flex: 1; |
| " |
| > |
| <div |
| style=" |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 0.5rem; |
| " |
| > |
| <div |
| style=" |
| color: var(--text-muted); |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| font-weight: 600; |
| display: flex; |
| align-items: center; |
| gap: 0.25rem; |
| " |
| > |
| Obfuscation |
| <button |
| type="button" |
| class="tooltip-icon" |
| data-tooltip="Percentage of the app's code base that is subject to symbol renaming. The reported score is from before optimization passes have occurred. By tracking this score, you can gauge the effectiveness of R8's obfuscation, which reduces your application's metadata footprint to save memory." |
| aria-label="Percentage of the app's code base that is subject to symbol renaming. The reported score is from before optimization passes have occurred. By tracking this score, you can gauge the effectiveness of R8's obfuscation, which reduces your application's metadata footprint to save memory." |
| > |
| ? |
| </button> |
| </div> |
| <div |
| id="card-total-obfuscation" |
| style=" |
| font-size: 1rem; |
| font-weight: 700; |
| color: var(--text-yellow-600); |
| " |
| > |
| -- |
| </div> |
| </div> |
| <div style="display: flex; flex-direction: column; gap: 0.5rem"> |
| <!-- Classes --> |
| <div |
| style=" |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| font-size: 0.75rem; |
| " |
| > |
| <span style="color: var(--text-gray-500); width: 60px" |
| >Classes</span |
| > |
| <div |
| style=" |
| flex: 1; |
| height: 4px; |
| background: var(--bg-hover); |
| border-radius: 2px; |
| margin: 0 1rem; |
| " |
| > |
| <div |
| id="card-obfuscation-classes-bar" |
| style=" |
| height: 100%; |
| background: var(--text-yellow-600); |
| border-radius: 2px; |
| width: 0%; |
| " |
| ></div> |
| </div> |
| <span |
| id="card-obfuscation-classes-val" |
| style="color: var(--text-gray-900); font-weight: 500" |
| >--</span |
| > |
| </div> |
| <!-- Fields --> |
| <div |
| style=" |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| font-size: 0.75rem; |
| " |
| > |
| <span style="color: var(--text-gray-500); width: 60px" |
| >Fields</span |
| > |
| <div |
| style=" |
| flex: 1; |
| height: 4px; |
| background: var(--bg-hover); |
| border-radius: 2px; |
| margin: 0 1rem; |
| " |
| > |
| <div |
| id="card-obfuscation-fields-bar" |
| style=" |
| height: 100%; |
| background: var(--text-yellow-600); |
| border-radius: 2px; |
| width: 0%; |
| " |
| ></div> |
| </div> |
| <span |
| id="card-obfuscation-fields-val" |
| style="color: var(--text-gray-900); font-weight: 500" |
| >--</span |
| > |
| </div> |
| <!-- Methods --> |
| <div |
| style=" |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| font-size: 0.75rem; |
| " |
| > |
| <span style="color: var(--text-gray-500); width: 60px" |
| >Methods</span |
| > |
| <div |
| style=" |
| flex: 1; |
| height: 4px; |
| background: var(--bg-hover); |
| border-radius: 2px; |
| margin: 0 1rem; |
| " |
| > |
| <div |
| id="card-obfuscation-methods-bar" |
| style=" |
| height: 100%; |
| background: var(--text-yellow-600); |
| border-radius: 2px; |
| width: 0%; |
| " |
| ></div> |
| </div> |
| <span |
| id="card-obfuscation-methods-val" |
| style="color: var(--text-gray-900); font-weight: 500" |
| >--</span |
| > |
| </div> |
| </div> |
| </div> |
| </div> |
| <div |
| class="breadcrumb-row" |
| style=" |
| display: flex; |
| flex-direction: column; |
| align-items: start; |
| margin-bottom: 1.5rem; |
| gap: 0.25rem; |
| height: auto; |
| " |
| > |
| <span |
| class="breadcrumb-text" |
| style=" |
| font-size: 0.875rem; |
| font-weight: 600; |
| color: var(--text-gray-900); |
| " |
| >Keep Rule Analysis</span |
| > |
| <div |
| style=" |
| font-size: 0.75rem; |
| color: var(--text-gray-500); |
| font-weight: 400; |
| text-transform: none; |
| letter-spacing: normal; |
| line-height: 1.4; |
| padding: 0rem 0.5rem; |
| " |
| > |
| Keep rules prevent R8 from optimizing designated code segments. |
| Review the list below to identify and refine overly broad rules, |
| which will directly improve overall application performance. |
| </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: 2rem; height: auto"> |
| <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: 0.75rem 1rem; |
| border-bottom: 1px solid var(--border-color); |
| background-color: var(--bg-subtle); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| " |
| > |
| <h2 |
| style=" |
| font-size: 0.875rem; |
| font-weight: 500; |
| color: var(--text-gray-900); |
| " |
| > |
| Keep Rule |
| </h2> |
| </div> |
| <div id="details-rule-container" style="padding: 1rem"> |
| <!-- Content rendered by JS --> |
| </div> |
| </div> |
| <div class="table-container" style="flex: none"> |
| <div |
| style=" |
| padding: 0.75rem 1rem; |
| border-bottom: 1px solid var(--border-color); |
| background-color: var(--bg-subtle); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| " |
| > |
| <h2 |
| style=" |
| font-size: 0.875rem; |
| font-weight: 500; |
| color: var(--text-gray-900); |
| " |
| > |
| Impact |
| </h2> |
| </div> |
| <div id="details-impact-container" style="padding: 1rem"> |
| <!-- Content rendered by JS --> |
| </div> |
| </div> |
| <div id="related-rules-container" style="flex: none"> |
| <!-- Content rendered by JS --> |
| </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: 0.75rem 1rem; |
| border-bottom: 1px solid var(--border-color); |
| background-color: var(--bg-subtle); |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| " |
| > |
| <div |
| style=" |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| width: 100%; |
| " |
| > |
| <div> |
| <span |
| style=" |
| font-size: 0.875rem; |
| font-weight: 600; |
| color: var(--text-gray-900); |
| " |
| >Kept Classes</span |
| > |
| <span |
| style=" |
| color: var(--text-gray-500); |
| font-size: 0.75rem; |
| margin-left: 0.25rem; |
| " |
| id="details-classes-count" |
| >· 0</span |
| > |
| </div> |
| <button |
| class="icon-btn search-toggle-btn" |
| data-target="classes" |
| style="color: var(--text-muted); padding: 2px" |
| > |
| <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" |
| /> |
| </svg> |
| </button> |
| </div> |
| <div |
| id="classes-search-container" |
| style="display: none; width: 100%" |
| > |
| <input |
| type="text" |
| id="classes-search-input" |
| placeholder="Search kept classes..." |
| style=" |
| width: 100%; |
| padding: 0.25rem 0.5rem; |
| border: 1px solid var(--border-color); |
| border-radius: 4px; |
| font-size: 0.75rem; |
| outline: none; |
| background-color: var(--bg-body); |
| color: var(--text-main); |
| " |
| /> |
| </div> |
| </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: 0.75rem 1rem; |
| border-bottom: 1px solid var(--border-color); |
| background-color: var(--bg-subtle); |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| " |
| > |
| <div |
| style=" |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| width: 100%; |
| " |
| > |
| <div> |
| <span |
| style=" |
| font-size: 0.875rem; |
| font-weight: 600; |
| color: var(--text-gray-900); |
| " |
| >Kept Fields</span |
| > |
| <span |
| style=" |
| color: var(--text-gray-500); |
| font-size: 0.75rem; |
| margin-left: 0.25rem; |
| " |
| id="details-fields-count" |
| >· 0</span |
| > |
| </div> |
| <button |
| class="icon-btn search-toggle-btn" |
| data-target="fields" |
| style="color: var(--text-muted); padding: 2px" |
| > |
| <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" |
| /> |
| </svg> |
| </button> |
| </div> |
| <div |
| id="fields-search-container" |
| style="display: none; width: 100%" |
| > |
| <input |
| type="text" |
| id="fields-search-input" |
| placeholder="Search kept fields..." |
| style=" |
| width: 100%; |
| padding: 0.25rem 0.5rem; |
| border: 1px solid var(--border-color); |
| border-radius: 4px; |
| font-size: 0.75rem; |
| outline: none; |
| background-color: var(--bg-body); |
| color: var(--text-main); |
| " |
| /> |
| </div> |
| </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: 0.75rem 1rem; |
| border-bottom: 1px solid var(--border-color); |
| background-color: var(--bg-subtle); |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| " |
| > |
| <div |
| style=" |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| width: 100%; |
| " |
| > |
| <div> |
| <span |
| style=" |
| font-size: 0.875rem; |
| font-weight: 600; |
| color: var(--text-gray-900); |
| " |
| >Kept Methods</span |
| > |
| <span |
| style=" |
| color: var(--text-gray-500); |
| font-size: 0.75rem; |
| margin-left: 0.25rem; |
| " |
| id="details-methods-count" |
| >· 0</span |
| > |
| </div> |
| <button |
| class="icon-btn search-toggle-btn" |
| data-target="methods" |
| style="color: var(--text-muted); padding: 2px" |
| > |
| <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" |
| /> |
| </svg> |
| </button> |
| </div> |
| <div |
| id="methods-search-container" |
| style="display: none; width: 100%" |
| > |
| <input |
| type="text" |
| id="methods-search-input" |
| placeholder="Search kept methods..." |
| style=" |
| width: 100%; |
| padding: 0.25rem 0.5rem; |
| border: 1px solid var(--border-color); |
| border-radius: 4px; |
| font-size: 0.75rem; |
| outline: none; |
| background-color: var(--bg-body); |
| color: var(--text-main); |
| " |
| /> |
| </div> |
| </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: 2rem; height: auto"> |
| <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 |
| <span |
| style=" |
| color: var(--text-muted); |
| text-transform: none; |
| font-weight: 500; |
| " |
| >Higher is worse</span |
| > |
| </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="keepradius-proto" type="text/plain"></script> |
| <script id="keepradius-data" type="application/octet-stream"></script> |
| <script src="main.js"></script> |
| <script src="utils.js"></script> |
| <!-- Help Hub FAB --> |
| <button id="help-hub-fab" class="fab"> |
| <svg |
| xmlns="http://www.w3.org/2000/svg" |
| width="20" |
| height="20" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" |
| /> |
| </svg> |
| <span>Help</span> |
| </button> |
| <!-- Help Hub Side Panel --> |
| <div id="help-hub-panel" class="side-panel"> |
| <div class="side-panel-header"> |
| <div class="header-left"> |
| <svg |
| xmlns="http://www.w3.org/2000/svg" |
| width="24" |
| height="24" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" |
| /> |
| </svg> |
| <h2>Help</h2> |
| </div> |
| <button id="close-help-hub" class="icon-btn"> |
| <svg |
| xmlns="http://www.w3.org/2000/svg" |
| width="20" |
| height="20" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M6 18L18 6M6 6l12 12" |
| /> |
| </svg> |
| </button> |
| </div> |
| <div class="side-panel-content"> |
| <!-- Introduction --> |
| <div class="help-section"> |
| <div class="help-section-title">Introduction to Table Data</div> |
| <p> |
| R8 is Android's code shrinker, optimizer, and obfuscator. This |
| report shows how your keep rules constrain R8 — every kept item is |
| one R8 couldn't shrink, optimize, or obfuscate. Higher percentages |
| mean more of your app is locked in place. |
| </p> |
| </div> |
| <div class="divider"></div> |
| <!-- Legend --> |
| <div class="help-section"> |
| <div class="help-section-title">Legend</div> |
| <div class="legend-list"> |
| <!-- Obfuscation Score --> |
| <div class="legend-item" data-topic="obfuscation-score"> |
| <div class="legend-item-header"> |
| <span class="legend-item-title">Obfuscation Score</span> |
| <svg |
| class="legend-item-arrow" |
| xmlns="http://www.w3.org/2000/svg" |
| width="16" |
| height="16" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M9 5l7 7-7 7" |
| /> |
| </svg> |
| </div> |
| <div class="legend-item-content"> |
| % of classes/fields/methods R8 was free to rename. Higher = |
| better. |
| </div> |
| </div> |
| <!-- Optimization Score --> |
| <div class="legend-item" data-topic="optimization-score"> |
| <div class="legend-item-header"> |
| <span class="legend-item-title">Optimization Score</span> |
| <svg |
| class="legend-item-arrow" |
| xmlns="http://www.w3.org/2000/svg" |
| width="16" |
| height="16" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M9 5l7 7-7 7" |
| /> |
| </svg> |
| </div> |
| <div class="legend-item-content"> |
| % of classes/fields/methods R8 was free to optimize. Higher = |
| better. |
| </div> |
| </div> |
| <!-- Shrinking Score --> |
| <div class="legend-item" data-topic="shrinking-score"> |
| <div class="legend-item-header"> |
| <span class="legend-item-title">Shrinking Score</span> |
| <svg |
| class="legend-item-arrow" |
| xmlns="http://www.w3.org/2000/svg" |
| width="16" |
| height="16" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M9 5l7 7-7 7" |
| /> |
| </svg> |
| </div> |
| <div class="legend-item-content"> |
| % of classes/fields/methods R8 was free to remove. Higher = |
| better. |
| </div> |
| </div> |
| <!-- Kept Items --> |
| <div class="legend-item" data-topic="kept-items"> |
| <div class="legend-item-header"> |
| <span class="legend-item-title" |
| >Kept Items (higher is worse)</span |
| > |
| <svg |
| class="legend-item-arrow" |
| xmlns="http://www.w3.org/2000/svg" |
| width="16" |
| height="16" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M9 5l7 7-7 7" |
| /> |
| </svg> |
| </div> |
| <div class="legend-item-content"> |
| Total number of items kept by this rule. Higher numbers indicate |
| a larger impact on APK size. |
| </div> |
| </div> |
| <!-- Blocked By Rule --> |
| <div class="legend-item" data-topic="blocked-by-rule"> |
| <div class="legend-item-header"> |
| <span class="legend-item-title">Blocked By Rule</span> |
| <svg |
| class="legend-item-arrow" |
| xmlns="http://www.w3.org/2000/svg" |
| width="16" |
| height="16" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M9 5l7 7-7 7" |
| /> |
| </svg> |
| </div> |
| <div class="legend-item-content"> |
| Specific actions blocked by this rule (e.g., Optimization, |
| Shrinking). |
| </div> |
| </div> |
| <!-- Identical Rules --> |
| <div class="legend-item" data-topic="identical-rules"> |
| <div class="legend-item-header"> |
| <span class="legend-item-title">Identical Rules</span> |
| <svg |
| class="legend-item-arrow" |
| xmlns="http://www.w3.org/2000/svg" |
| width="16" |
| height="16" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M9 5l7 7-7 7" |
| /> |
| </svg> |
| </div> |
| <div class="legend-item-content"> |
| Rules that match the exact same set of items. |
| </div> |
| </div> |
| <!-- Subsumed By --> |
| <div class="legend-item" data-topic="subsumed-by"> |
| <div class="legend-item-header"> |
| <span class="legend-item-title">Subsumed By</span> |
| <svg |
| class="legend-item-arrow" |
| xmlns="http://www.w3.org/2000/svg" |
| width="16" |
| height="16" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M9 5l7 7-7 7" |
| /> |
| </svg> |
| </div> |
| <div class="legend-item-content"> |
| Rules that are covered by a broader rule. |
| </div> |
| </div> |
| <!-- Unused Rules --> |
| <div class="legend-item" data-topic="unused-rules"> |
| <div class="legend-item-header"> |
| <span class="legend-item-title">Unused Rules</span> |
| <svg |
| class="legend-item-arrow" |
| xmlns="http://www.w3.org/2000/svg" |
| width="16" |
| height="16" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M9 5l7 7-7 7" |
| /> |
| </svg> |
| </div> |
| <div class="legend-item-content"> |
| Rules that do not match any items in the application. |
| </div> |
| </div> |
| <!-- Lenses --> |
| <div class="legend-item" data-topic="lenses"> |
| <div class="legend-item-header"> |
| <span class="legend-item-title" |
| >Lenses (All / Identical / Subsumed / Unused)</span |
| > |
| <svg |
| class="legend-item-arrow" |
| xmlns="http://www.w3.org/2000/svg" |
| width="16" |
| height="16" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M9 5l7 7-7 7" |
| /> |
| </svg> |
| </div> |
| <div class="legend-item-content"> |
| Different perspectives to view the rules. |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="divider"></div> |
| <!-- Documentation --> |
| <div class="help-section"> |
| <div class="help-section-title">Documentation</div> |
| <div class="doc-list"> |
| <a |
| href="https://r8.googlesource.com/r8/" |
| target="_blank" |
| class="doc-card" |
| > |
| <div class="doc-card-info"> |
| <span class="doc-card-title">R8 keep rule reference</span> |
| <span class="doc-card-domain">developer.android.com</span> |
| <span class="doc-card-desc" |
| >Official guide to shrinking, obfuscation, and optimization |
| with R8.</span |
| > |
| </div> |
| <svg |
| class="doc-card-icon" |
| xmlns="http://www.w3.org/2000/svg" |
| width="16" |
| height="16" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" |
| /> |
| </svg> |
| </a> |
| <a |
| href="https://developer.android.com/studio/build/shrink-code" |
| target="_blank" |
| class="doc-card" |
| > |
| <div class="doc-card-info"> |
| <span class="doc-card-title">Reduce APK size</span> |
| <span class="doc-card-domain">developer.android.com</span> |
| <span class="doc-card-desc" |
| >Patterns and tools for minimizing the footprint of your |
| release build.</span |
| > |
| </div> |
| <svg |
| class="doc-card-icon" |
| xmlns="http://www.w3.org/2000/svg" |
| width="16" |
| height="16" |
| fill="none" |
| viewBox="0 0 24 24" |
| stroke="currentColor" |
| > |
| <path |
| stroke-linecap="round" |
| stroke-linejoin="round" |
| stroke-width="2" |
| d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" |
| /> |
| </svg> |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </body> |
| </html> |
