<!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;
}

/* Hover on only the rows that are clickable. */
.row-package:hover > * {
  --bs-table-color-state: var(--bs-table-hover-color);
  --bs-table-bg-state: var(--bs-table-hover-bg);
}

    </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>

      <p>You can click on the rows below to see which files contribute to the binary size.</p>

      <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 $i, $pkg := .sizes}}
            <tr class="row-package" data-collapse=".collapse-row-{{$i}}">
              <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>
            {{range $filename, $sizes := .Size.Sub}}
            <tr class="table-secondary collapse collapse-row-{{$i}}">
              <td class="ps-4">
                {{if eq $filename ""}}
                  (unknown file)
                {{else}}
                  {{$filename}}
                {{end}}
              </td>
              <td class="table-vertical-border">{{$sizes.Code}}</td>
              <td>{{$sizes.ROData}}</td>
              <td>{{$sizes.Data}}</td>
              <td>{{$sizes.BSS}}</td>
              <td class="table-vertical-border" style="background: linear-gradient(to right, var(--bs-info-bg-subtle) {{$sizes.FlashPercent}}%, var(--bs-table-bg) {{$sizes.FlashPercent}}%)">
                {{$sizes.Flash}}
              </td>
            </tr>
            {{end}}
            {{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>
    <script>
// Make table rows toggleable to show filenames.
for (let clickable of document.querySelectorAll('.row-package')) {
  clickable.addEventListener('click', e => {
    for (let row of document.querySelectorAll(clickable.dataset.collapse)) {
      row.classList.toggle('show');
    }
  });
}
    </script>
  </body>
</html>
