github.com/google/syzkaller@v0.0.0-20251211124644-a066d2bc4b02/pkg/cover/templates/cover.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3  <head>
     4    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5    <style>
     6      .file {
     7        display: none;
     8        margin: 0;
     9        padding: 0;
    10      }
    11      .count {
    12        font-weight: bold;
    13        border-right: 1px solid #ddd;
    14        padding-right: 4px;
    15        cursor: zoom-in;
    16      }
    17      .split {
    18        height: 100%;
    19        position: fixed;
    20        z-index: 1;
    21        top: 0;
    22        overflow-x: hidden;
    23      }
    24      .tree {
    25        left: 0;
    26        width: 24%;
    27      }
    28      .function {
    29        height: 100%;
    30        position: fixed;
    31        z-index: 1;
    32        top: 0;
    33        overflow-x: hidden;
    34        display: none;
    35      }
    36      .list {
    37        left: 24%;
    38        width: 30%;
    39      }
    40      .right {
    41        border-left: 2px solid #444;
    42        right: 0;
    43        width: 76%;
    44        font-family: 'Courier New', Courier, monospace;
    45        color: rgb(80, 80, 80);
    46      }
    47      .cover {
    48        float: right;
    49        width: 150px;
    50        padding-right: 4px;
    51      }
    52      .cover-right {
    53        float: right;
    54      }
    55      .covered {
    56        color: rgb(0, 0, 0);
    57        font-weight: bold;
    58      }
    59      .uncovered {
    60        color: rgb(255, 0, 0);
    61        font-weight: bold;
    62      }
    63      .both {
    64        color: rgb(200, 100, 0);
    65        font-weight: bold;
    66      }
    67      ul, #dir_list {
    68        list-style-type: none;
    69        padding-left: 16px;
    70      }
    71      #dir_list {
    72        margin: 0;
    73        padding: 0;
    74      }
    75      .hover:hover {
    76        background: #ffff99;
    77      }
    78      .caret {
    79        cursor: pointer;
    80        user-select: none;
    81      }
    82      .caret::before {
    83        color: black;
    84        content: "\25B6";
    85        display: inline-block;
    86        margin-right: 3px;
    87      }
    88      .caret-down::before {
    89        transform: rotate(90deg);
    90      }
    91      .nested {
    92        display: none;
    93      }
    94      .active {
    95        display: block;
    96      }
    97      .total-left {
    98        padding-left: 16px;
    99      }
   100      .total {
   101        float: right;
   102        width: 250px;
   103        padding-right: 4px;
   104      }
   105      .total-right {
   106        float: right;
   107      }
   108      .flex-column {
   109        display: flex;
   110        flex-direction: column;
   111      }
   112    </style>
   113  </head>
   114  <body>
   115  <div class="split tree">
   116    <ul id="dir_list">
   117      {{template "dir" .Root}}
   118    </ul>
   119    <br />
   120    <hr />
   121    <div id="total_coverage">
   122      <span class="total-left">Total coverage:</span>
   123      <span class="total"> {{.Root.Covered}} ({{.Root.Percent}}%)<span class="total-right">of {{.Root.Total}}</span></span>
   124    </div>
   125  </div>
   126  <div id="right_pane" class="split right">
   127    <button class="nested" id="close-btn" onclick="onCloseClick()">X</button>
   128    {{range $i, $f := .Contents}}
   129      <pre class="file" id="contents_{{$i}}">{{$f}}</pre>
   130    {{end}}
   131    {{$base := .}}
   132    {{range $i, $p := .Progs}}
   133      <pre class="file" id="prog_{{$i}}">
   134        {{if $base.RawCover}}<a href="/debuginput?sig={{$p.Sig}}">[raw coverage]</a><br />{{end}}
   135        {{$p.Content}}
   136      </pre>
   137    {{end}}
   138    {{range $i, $p := .Functions}}
   139      <div class="function list" id="function_{{$i}}">{{$p}}</div>
   140    {{end}}
   141  </div>
   142  </body>
   143  <script>
   144    (function() {
   145      var toggler = document.getElementsByClassName("caret");
   146      for (var i = 0; i < toggler.length; i++) {
   147        toggler[i].addEventListener("click", function() {
   148          this.parentElement.querySelector(".nested").classList.toggle("active");
   149          this.classList.toggle("caret-down");
   150        });
   151      }
   152      if (window.location.hash) {
   153        var hash = decodeURIComponent(window.location.hash.substring(1)).split("/");
   154        var path = "path";
   155        for (var i = 0; i < hash.length; i++) {
   156          path += "/" + hash[i];
   157          var elem = document.getElementById(path);
   158          if (elem)
   159            elem.click();
   160        }
   161      }
   162    })();
   163    var visible;
   164    var contentIdx;
   165    var currentPC;
   166          function onPercentClick(index) {
   167      if (visible)
   168        visible.style.display = 'none';
   169      visible = document.getElementById("function_" + index);
   170      visible.style.display = 'block';
   171      document.getElementById("right_pane").scrollTo(0, 0);
   172      toggleCloseBtn();
   173    }
   174    function onFileClick(index) {
   175      if (visible)
   176        visible.style.display = 'none';
   177      visible = document.getElementById("contents_" + index);
   178      visible.style.display = 'block';
   179      contentIdx = index;
   180      document.getElementById("right_pane").scrollTo(0, 0);
   181      toggleCloseBtn();
   182    }
   183    function toggleCloseBtn(showBtn) {
   184      let display = 'none';
   185      if (showBtn)
   186        display  = 'block';
   187      document.getElementById("close-btn").style.display = display;
   188    }
   189    function onProgClick(index, span) {
   190      if (visible)
   191        visible.style.display = 'none';
   192      visible = document.getElementById("prog_" + index);
   193      visible.style.display = 'block';
   194      document.getElementById("right_pane").scrollTo(0, 0);
   195      currentPC = span;
   196      toggleCloseBtn(true);
   197    }
   198    function onCloseClick() {
   199      if (visible)
   200        visible.style.display = 'none';
   201      visible = document.getElementById("contents_" + contentIdx);
   202      visible.style.display = 'block';
   203      toggleCloseBtn();
   204      currentPC.scrollIntoView();
   205    }
   206    </script>
   207  </html>
   208  
   209  {{define "dir"}}
   210    {{range $dir := .Dirs}}
   211      <li class="flex-column">
   212        <span id="path/{{$dir.Path}}" class="caret hover">
   213          {{$dir.Name}}
   214          <span class="cover hover">
   215            {{if $dir.Covered}}{{$dir.Percent}}%{{else}}---{{end}}
   216            <span class="cover-right">of {{$dir.Total}}</span>
   217          </span>
   218        </span>
   219        <ul class="nested">
   220          {{template "dir" $dir}}
   221        </ul>
   222      </li>
   223    {{end}}
   224    {{range $file := .Files}}
   225      <li class="flex-column">
   226        <span class="hover">
   227          {{if $file.Covered}}
   228            <a href="#{{$file.Path}}" id="path/{{$file.Path}}" onclick="onFileClick({{$file.Index}})">
   229              {{$file.Name}}
   230            </a>
   231            <span class="cover hover">
   232              <a href="#{{$file.Path}}" id="path/{{$file.Path}}"
   233                 onclick="{{if .HasFunctions}}onPercentClick{{else}}onFileClick{{end}}({{$file.Index}})">
   234                {{$file.Percent}}%
   235              </a>
   236              <span class="cover-right">of {{$file.Total}}</span>
   237            </span>
   238          {{else}}
   239            {{$file.Name}}
   240              <span class="cover hover">
   241                ---
   242                <span class="cover-right">of {{$file.Total}}</span>
   243              </span>
   244          {{end}}
   245        </span>
   246      </li>
   247    {{end}}
   248  {{end}}