builder: write HTML size report

This is not a big change over the existing size report with -size=full, but it is a bit more readable. More information will be added in subsequent commits.
2026-08-12 15:03:41 +00:00 · 2024-12-16 12:08:10 +01:00
parent eeba90fd5b
commit b18213805a
7 changed files with 171 additions and 29 deletions
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Size Report for {{.pkgName}}</title>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <style>
+
+.table-vertical-border {
+  border-left: calc(var(--bs-border-width) * 2) solid currentcolor;
+}
+
+    </style>
+  </head>
+  <body>
+    <div class="container-xxl">
+      <h1>Size Report for {{.pkgName}}</h1>
+
+      <p>How much space is used by Go packages, C libraries, and other bits to set up the program environment.</p>
+
+      <ul>
+        <li><strong>Code</strong> is the actual program code (machine code instructions).</li>
+        <li><strong>Read-only data</strong> are read-only global variables. On most microcontrollers, these are stored in flash and do not take up any RAM.</li>
+        <li><strong>Data</strong> are writable global variables with a non-zero initializer. On microcontrollers, they are copied from flash to RAM on reset.</li>
+        <li><strong>BSS</strong> are writable global variables that are zero initialized. They do not take up any space in the binary, but do take up RAM. On microcontrollers, this area is zeroed on reset.</li>
+      </ul>
+
+      <p>The binary size consists of code, read-only data, and data. On microcontrollers, this is exactly the size of the firmware image. On other systems, there is some extra overhead: binary metadata (headers of the ELF/MachO/COFF file), debug information, exception tables, symbol names, etc. Using <code>-no-debug</code> strips most of those.</p>
+
+      <h2>Program breakdown</h2>
+      <div class="table-responsive">
+        <table class="table w-auto">
+          <thead>
+            <tr>
+              <th>Package</th>
+              <th class="table-vertical-border">Code</th>
+              <th>Read-only data</th>
+              <th>Data</th>
+              <th title="zero-initialized data">BSS</th>
+              <th class="table-vertical-border" style="min-width: 16em">Binary size</th>
+            </tr>
+          </thead>
+          <tbody class="table-group-divider">
+            {{range .sizes}}
+            <tr>
+              <td>{{.Name}}</td>
+              <td class="table-vertical-border">{{.Size.Code}}</td>
+              <td>{{.Size.ROData}}</td>
+              <td>{{.Size.Data}}</td>
+              <td>{{.Size.BSS}}</td>
+              <td class="table-vertical-border" style="background: linear-gradient(to right, var(--bs-info-bg-subtle) {{.Size.FlashPercent}}%, var(--bs-table-bg) {{.Size.FlashPercent}}%)">
+                {{.Size.Flash}}
+              </td>
+            </tr>
+            {{end}}
+          </tbody>
+          <tfoot class="table-group-divider">
+            <tr>
+              <th>Total</th>
+              <td class="table-vertical-border">{{.sizeTotal.code}}</td>
+              <td>{{.sizeTotal.rodata}}</td>
+              <td>{{.sizeTotal.data}}</td>
+              <td>{{.sizeTotal.bss}}</td>
+              <td class="table-vertical-border">{{.sizeTotal.flash}}</td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+  </body>
+</html>