Tools/CodeCoverage/results-template.html

   1 <!doctype html>
   2 <html>
   3     <head>
   4         <style type='text/css'>
   5             table, tr, td
   6             {
   7                 border-spacing: 1px;
   8                 padding: 0px;
   9             }
  10             td.textColumn
  11             {
  12                 white-space: nowrap;
  13                 font-family: Courier, monospace;
  14             }
  15
  16             #directories, #codeviewer
  17             {
  18                 overflow: scroll;
  19                 background-color: white;
  20                 position: absolute;
  21                 width: 50%;
  22                 height: 100%;
  23             }
  24
  25             #directories
  26             {
  27                 left: 0%;
  28             }
  29
  30             #codeviewer
  31             {
  32                 left: 50%;
  33             }
  34
  35             ul
  36             {
  37                 padding: 1px 0px 1px 8px;
  38                 margin: 0px;
  39                 list-style-type: none;
  40             }
  41
  42             li.file
  43             {
  44                 /* 8px is to match the width of downArrow and rightArrow because files don't have an image before them. */
  45                 padding: 0px 0px 0px 8px;
  46             }
  47
  48             div.graphsContainer
  49             {
  50                 right: 0px;
  51                 width: 300px;
  52                 position: absolute;
  53                 display: inline-block;
  54             }
  55             div.codeCoverage
  56             {
  57                 right: 0px;
  58                 width: 150px;
  59                 position: absolute;
  60                 display: inline-block;
  61             }
  62             div.branchCoverage
  63             {
  64                 right: 150px;
  65                 width: 150px;
  66                 position: absolute;
  67                 display: inline-block;
  68             }
  69
  70         </style>
  71         <script type='text/javascript'>
  72
  73             // This is the contents of the images left of directories.
  74             var downArrow = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYHFioBcCRLNAAAAJhJREFUGNOFzrEKwjAURuHTJHUspekDZGmhdlawCEqoUDK19O1cnX0dFxcnQXyIOAhKSsUzXr4Lf3Q8nf3leuNXy8IgBmeRYh5IAYOziDxLsdv1LNo3K/IsRQAcdhu0TgKgdUJnG4A3ipVk7NoAjV2LkvKLAKrSUBcGgLowVKX5PASTe2eJF4re2XCcn3R/PKcnH3nvPX96AbbuOGLOrLT1AAAAAElFTkSuQmCC';
  75             var rightArrow = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYHFiojpUQK0AAAAKZJREFUGNNjmL1k/f+379//xweYlXXMGo6dvcDw/x8jg7y0OAMzMzMDOmBiYGBg+PP7P8OO/ccYOqctZLh2+x52RTDw9t0nhtlLNjDMWbqB4d2HD9gVwcDVW/cYumcsZXj56i0DAwMDAws2RdqqCgwBHo4MIiKCmIqEBPgYgrycGbTVFVE0sTAwMDCwMjMyONqYMbjYWjCwsmL6jmH24rX/37zBH04AHAxpneY+98AAAAAASUVORK5CYII=';
  76
  77             function getHeatBackgroundColor(hits, maxHits)
  78             {
  79                 if (hits === -1)
  80                     return 'white'; // Non-code lines are white.
  81                 else if (hits === 0)
  82                     return 'orange'; // Unexecuted lines are orange.
  83                 else {
  84                     // Executed lines are between red and green.
  85                     var relativeHeat = Math.floor(hits / maxHits * 255);
  86                     return 'rgb(' + relativeHeat + ',' + (255 - relativeHeat) + ', 0)';
  87                 }
  88             }
  89
  90             function getCoverageBackgroundColor(coverage)
  91             {
  92                 var value = Math.floor(coverage * 255);
  93                 return 'rgb(' + (255 - value) + ',' + value + ', 0)';
  94             }
  95
  96             function expandClicked(event)
  97             {
  98                 var children = this.parentNode.lastChild;
  99                 if (children.style.display === '') {
 100                     children.style.display = 'none';
 101                     this.src = rightArrow;
 102                 } else {
 103                     children.style.display = '';
 104                     this.src = downArrow;
 105                 }
 106             }
 107
 108             function processFile(fileData, contents)
 109             {
 110                 var lines = contents.split('\n');
 111                 var hits = new Array();
 112                 var branchesNumerator = new Array();
 113                 var branchesDenominator = new Array();
 114
 115                 for (var i = 0; i < lines.length; i++) {
 116                     hits[i] = -1;
 117                     branchesNumerator[i] = -1;
 118                     branchesDenominator[i] = -1;
 119                 }
 120
 121                 for (var i = 0; i < fileData.hitLines.length; i++)
 122                     hits[fileData.hitLines[i] - 1] = fileData.hits[i];
 123
 124                 for (var i = 0; i < fileData.branchLines.length; i++) {
 125                     branchesNumerator[fileData.branchLines[i] - 1] = fileData.branchesTaken[i];
 126                     branchesDenominator[fileData.branchLines[i] - 1] = fileData.branchesPossible[i];
 127                 }
 128
 129                 var table = document.createElement('table');
 130
 131                 for (var i = 0; i < lines.length; i++) {
 132                     var row = document.createElement('tr');
 133
 134                     var branchesColumn = document.createElement('td');
 135                     if (branchesNumerator[i] != -1)
 136                         branchesColumn.appendChild(document.createTextNode('(' + branchesNumerator[i] + '/' + branchesDenominator[i] + ')'));
 137
 138                     var hitsColumn = document.createElement('td');
 139                     if (hits[i] != -1)
 140                         hitsColumn.appendChild(document.createTextNode(hits[i]));
 141
 142                     var textColumn = document.createElement('td');
 143                     textColumn.style.background = getHeatBackgroundColor(hits[i], fileData.maxHeat);
 144                     textColumn.style.className = 'textColumn';
 145                     textColumn.appendChild(document.createTextNode(lines[i]));
 146
 147                     row.appendChild(branchesColumn);
 148                     row.appendChild(hitsColumn);
 149                     row.appendChild(textColumn);
 150                     table.appendChild(row);
 151                 }
 152
 153                 return table;
 154             }
 155
 156             function fileClicked(event)
 157             {
 158                 var xhr = new XMLHttpRequest();
 159                 xhr.onreadystatechange = function()
 160                 {
 161                     if (xhr.readyState === XMLHttpRequest.DONE) {
 162                         var codeviewer = document.getElementById('codeviewer');
 163                         codeviewer.replaceChild(processFile(xhr.fileData, xhr.responseText), codeviewer.firstChild);
 164                     }
 165                 }
 166                 xhr.fileData = event.target.fileData;
 167                 xhr.open('GET', '../../' + event.target.fileData.filename.substring(1), true);
 168                 xhr.send();
 169                 event.stopPropagation();
 170             }
 171
 172             function makeGraphs(dirOrFile)
 173             {
 174                 var codeCoverage = document.createElement('div');
 175                 codeCoverage.className = 'codeCoverage';
 176                 var codeCoveragePercent = dirOrFile.totalLines ? Math.floor(dirOrFile.totalHitLines / dirOrFile.totalLines * 100) + '%' : '-';
 177                 var codeCoverageText = codeCoveragePercent + ' (' + dirOrFile.totalHitLines + '/' + dirOrFile.totalLines + ')';
 178                 codeCoverage.appendChild(document.createTextNode(codeCoverageText));
 179                 codeCoverage.style.backgroundColor = getCoverageBackgroundColor(dirOrFile.coverage);
 180
 181                 var branchCoverage = document.createElement('div');
 182                 branchCoverage.className = 'branchCoverage';
 183                 var branchCoveragePercent = dirOrFile.totalBranchesPossible ? Math.floor(dirOrFile.totalBranchesTaken / dirOrFile.totalBranchesPossible * 100) + '%' : '-';
 184                 branchCoverage.appendChild(document.createTextNode(branchCoveragePercent + ' (' + dirOrFile.totalBranchesTaken + '/' + dirOrFile.totalBranchesPossible + ')'));
 185                 branchCoverage.style.backgroundColor = getCoverageBackgroundColor(dirOrFile.branchCoverage);
 186
 187                 var graphsContainer = document.createElement('div');
 188                 graphsContainer.className = 'graphsContainer';
 189                 graphsContainer.appendChild(codeCoverage);
 190                 graphsContainer.appendChild(branchCoverage);
 191                 return graphsContainer;
 192             }
 193
 194             function makeFileListItem(fileData, filename)
 195             {
 196                 var li = document.createElement('li');
 197                 li.className = 'file';
 198                 var a = document.createElement('a');
 199                 a.appendChild(document.createTextNode(filename));
 200                 a.href = '#';
 201                 a.addEventListener('click', fileClicked.bind(a));
 202                 a.fileData = fileData;
 203                 li.appendChild(a);
 204                 li.appendChild(makeGraphs(fileData));
 205                 return li;
 206             }
 207
 208             function makeDirectoryListItem(dir, dirName)
 209             {
 210                 var li = document.createElement('li');
 211                 var children = document.createElement('ul');
 212
 213                 // Recursively add all sorted subdirectories and files.
 214                 var fileNames = dir.files ? Object.keys(dir.files).sort() : [];
 215                 var subdirNames = dir.subdirs ? Object.keys(dir.subdirs).sort() : [];
 216                 for (var i = 0; i < subdirNames.length; i++) {
 217                     var subdir = subdirNames[i];
 218                     children.appendChild(makeDirectoryListItem(dir.subdirs[subdir], subdir));
 219                 }
 220                 for (var i = 0; i < fileNames.length; i++) {
 221                     var file = fileNames[i];
 222                     children.appendChild(makeFileListItem(dir.files[file], file, dir.maxHeat, dir.totalHeat));
 223                 }
 224
 225                 var img = document.createElement('img');
 226                 img.addEventListener('click', expandClicked.bind(img));
 227
 228                 // These four directories are expanded by default.
 229                 if (dirName === '' || dirName === 'Source' || dirName === 'Tools' || dirName === 'WebKitBuild') {
 230                     img.src = downArrow;
 231                     children.style.display = '';
 232                 } else {
 233                     img.src = rightArrow;
 234                     children.style.display = 'none';
 235                 }
 236
 237                 li.appendChild(img);
 238                 li.appendChild(document.createTextNode(dirName));
 239                 li.appendChild(makeGraphs(dir));
 240                 li.appendChild(children);
 241                 return li;
 242             }
 243
 244             // Collect total coverage for a directory and its subdirectories.
 245             function collectDirectoryTotals(directory)
 246             {
 247                 directory.totalBranchesPossible = 0;
 248                 directory.totalBranchesTaken = 0;
 249                 directory.totalHitLines = 0;
 250                 directory.totalLines = 0;
 251                 directory.totalHeat = 0;
 252                 directory.maxHeat = 0;
 253                 if (directory.subdirs) {
 254                     for (var subdirName in directory.subdirs) {
 255                         var subdir = directory.subdirs[subdirName];
 256
 257                         collectDirectoryTotals(subdir);
 258
 259                         directory.totalBranchesPossible += subdir.totalBranchesPossible;
 260                         directory.totalBranchesTaken += subdir.totalBranchesTaken;
 261                         directory.totalHitLines += subdir.totalHitLines;
 262                         directory.totalLines += subdir.totalLines;
 263                         directory.totalHeat += subdir.totalHeat;
 264                         directory.maxHeat = Math.max(directory.maxHeat, subdir.maxHeat);
 265                     }
 266                 }
 267                 if (directory.files) {
 268                     for (var fileName in directory.files) {
 269                         var file = directory.files[fileName];
 270
 271                         file.totalBranchesPossible = 0;
 272                         file.totalBranchesTaken = 0;
 273                         file.totalHitLines = 0;
 274                         file.totalLines = file.hitLines.length;
 275                         file.totalHeat = 0;
 276
 277                         for (var i = 0; i < file.branchesPossible.length; i++) {
 278                             file.totalBranchesPossible += file.branchesPossible[i];
 279                             file.totalBranchesTaken += file.branchesTaken[i];
 280                         }
 281                         for (var i = 0; i < file.hits.length; i++) {
 282                             file.totalHeat += file.hits[i];
 283                             if (file.hits[i])
 284                                 file.totalHitLines++;
 285                         }
 286
 287                         directory.totalBranchesPossible += file.totalBranchesPossible;
 288                         directory.totalBranchesTaken += file.totalBranchesTaken;
 289                         directory.totalHitLines += file.totalHitLines;
 290                         directory.totalLines += file.totalLines;
 291                         directory.totalHeat += file.totalHeat;
 292                         directory.maxHeat = Math.max(directory.maxHeat, file.maxHeat);
 293                     }
 294                 }
 295                 directory.coverage = directory.totalHitLines / directory.totalLines;
 296                 directory.branchCoverage = directory.totalBranchesPossible ? directory.totalBranchesTaken / directory.totalBranchesPossible : 1;
 297             }
 298
 299             function addFileToDirectory(filename, filedata, directory)
 300             {
 301                 var slashIndex = filename.indexOf('/', 1);
 302                 if (slashIndex === -1) {
 303                     if (!directory.files)
 304                         directory.files = {};
 305                     directory.files[filename.substring(1)] = filedata;
 306                 } else {
 307                     if (!directory.subdirs)
 308                         directory.subdirs = {};
 309                     var subdirName = filename.substring(1, slashIndex);
 310                     if (!directory.subdirs[subdirName])
 311                         directory.subdirs[subdirName] = {};
 312                     addFileToDirectory(filename.substring(slashIndex), filedata, directory.subdirs[subdirName]);
 313                 }
 314             }
 315
 316             function updateReport(data)
 317             {
 318                 var rootDirectory = {};
 319                 for (var i = 0; i < data.length; i++)
 320                     addFileToDirectory(data[i].filename, data[i], rootDirectory);
 321
 322                 collectDirectoryTotals(rootDirectory);
 323
 324                 var report = document.createElement('div');
 325                 var codeCoverageHeader = document.createElement('div');
 326                 codeCoverageHeader.className = 'codeCoverage';
 327                 codeCoverageHeader.appendChild(document.createTextNode('Code Coverage'));
 328                 var branchCoverageHeader = document.createElement('div');
 329                 branchCoverageHeader.className = 'branchCoverage';
 330                 branchCoverageHeader.appendChild(document.createTextNode('Branch Coverage'));
 331                 var ul = document.createElement('ul');
 332                 ul.appendChild(makeDirectoryListItem(rootDirectory, ''));
 333
 334                 report.appendChild(codeCoverageHeader);
 335                 report.appendChild(branchCoverageHeader);
 336                 report.appendChild(document.createTextNode('Directories'));
 337                 report.appendChild(ul);
 338
 339                 var directories = document.getElementById('directories');
 340                 directories.replaceChild(report, directories.firstChild);
 341             }
 342
 343             function bodyLoaded()
 344             {
 345                 updateReport(JSON.parse(document.getElementById('json').textContent));
 346             }
 347
 348         </script>
 349     </head>
 350     <body onload='bodyLoaded();'>
 351         <div id='directories'>
 352             loading data...
 353         </div>
 354         <div id='codeviewer'>
 355         </div>
 356         <script id='json' type='application/json'>%CoverageDataJSON%</script>
 357     </body>
 358 </html>