| OLD | NEW |
|---|
| 1 <html> | 1 <html> |
| 2 <!-- | 2 <!-- |
| 3 Copyright 2016 the V8 project authors. All rights reserved. Use of this source | 3 Copyright 2016 the V8 project authors. All rights reserved. Use of this source |
| 4 code is governed by a BSD-style license that can be found in the LICENSE file. | 4 code is governed by a BSD-style license that can be found in the LICENSE file. |
| 5 --> | 5 --> |
| 6 | 6 |
| 7 <head> | 7 <head> |
| 8 <meta charset="UTF-8"> | 8 <meta charset="UTF-8"> |
| 9 <style> | 9 <style> |
| 10 body { | 10 body { |
| (...skipping 518 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 529 showPageDetails(entry); | 529 showPageDetails(entry); |
| 530 showImpactList(entry.page); | 530 showImpactList(entry.page); |
| 531 showGraphs(entry.page); | 531 showGraphs(entry.page); |
| 532 } | 532 } |
| 533 | 533 |
| 534 function showVersionDetails(entry) { | 534 function showVersionDetails(entry) { |
| 535 var table, tbody, entries; | 535 var table, tbody, entries; |
| 536 table = $('detailView').querySelector('.versionDetailTable'); | 536 table = $('detailView').querySelector('.versionDetailTable'); |
| 537 tbody = document.createElement('tbody'); | 537 tbody = document.createElement('tbody'); |
| 538 if (entry !== undefined) { | 538 if (entry !== undefined) { |
| 539 $('detailView').querySelector('.versionDetail h3 span').innerHTML = | 539 $('detailView').querySelector('.versionDetail h3 span').textContent = |
| 540 entry.name + ' in ' + entry.page.name; | 540 entry.name + ' in ' + entry.page.name; |
| 541 entries = versions.getPageVersions(entry.page).map( | 541 entries = versions.getPageVersions(entry.page).map( |
| 542 (page) => { | 542 (page) => { |
| 543 return page.get(entry.name) | 543 return page.get(entry.name) |
| 544 }); | 544 }); |
| 545 entries.sort((a, b) => { | 545 entries.sort((a, b) => { |
| 546 return a.time - b.time | 546 return a.time - b.time |
| 547 }); | 547 }); |
| 548 entries.forEach((pageEntry) => { | 548 entries.forEach((pageEntry) => { |
| 549 if (pageEntry === undefined) return; | 549 if (pageEntry === undefined) return; |
| (...skipping 14 matching lines...) Expand all Loading... |
| 564 function showPageDetails(entry) { | 564 function showPageDetails(entry) { |
| 565 var table, tbody, entries; | 565 var table, tbody, entries; |
| 566 table = $('detailView').querySelector('.pageDetailTable'); | 566 table = $('detailView').querySelector('.pageDetailTable'); |
| 567 tbody = document.createElement('tbody'); | 567 tbody = document.createElement('tbody'); |
| 568 if (entry === undefined) { | 568 if (entry === undefined) { |
| 569 table.replaceChild(tbody, table.querySelector('tbody')); | 569 table.replaceChild(tbody, table.querySelector('tbody')); |
| 570 return; | 570 return; |
| 571 } | 571 } |
| 572 var version = entry.page.version; | 572 var version = entry.page.version; |
| 573 var showDiff = version !== baselineVersion; | 573 var showDiff = version !== baselineVersion; |
| 574 $('detailView').querySelector('.pageDetail h3 span').innerHTML = | 574 $('detailView').querySelector('.pageDetail h3 span').textContent = |
| 575 version.name; | 575 version.name; |
| 576 entries = version.pages.map((page) => { | 576 entries = version.pages.map((page) => { |
| 577 if (!page.enabled) return; | 577 if (!page.enabled) return; |
| 578 return page.get(entry.name) | 578 return page.get(entry.name) |
| 579 }); | 579 }); |
| 580 entries.sort((a, b) => { | 580 entries.sort((a, b) => { |
| 581 var cmp = b.timePercent - a.timePercent; | 581 var cmp = b.timePercent - a.timePercent; |
| 582 if (cmp.toFixed(1) == 0) return b.time - a.time; | 582 if (cmp.toFixed(1) == 0) return b.time - a.time; |
| 583 return cmp | 583 return cmp |
| 584 }); | 584 }); |
| 585 entries.forEach((pageEntry) => { | 585 entries.forEach((pageEntry) => { |
| 586 if (pageEntry === undefined) return; | 586 if (pageEntry === undefined) return; |
| 587 var tr = document.createElement('tr'); | 587 var tr = document.createElement('tr'); |
| 588 if (pageEntry === entry) tr.className += 'selected'; | 588 if (pageEntry === entry) tr.className += 'selected'; |
| 589 tr.entry = pageEntry; | 589 tr.entry = pageEntry; |
| 590 td(tr, pageEntry.page.name, 'name'); | 590 td(tr, pageEntry.page.name, 'name'); |
| 591 td(tr, ms(pageEntry.time, showDiff), 'value time'); | 591 td(tr, ms(pageEntry.time, showDiff), 'value time'); |
| 592 td(tr, percent(pageEntry.timePercent, showDiff), 'value time'); | 592 td(tr, percent(pageEntry.timePercent, showDiff), 'value time'); |
| 593 td(tr, percent(pageEntry.timePercentPerEntry, showDiff), | 593 td(tr, percent(pageEntry.timePercentPerEntry, showDiff), |
| 594 'value time hideNoDiff'); | 594 'value time hideNoDiff'); |
| 595 td(tr, count(pageEntry.count, showDiff), 'value count'); | 595 td(tr, count(pageEntry.count, showDiff), 'value count'); |
| 596 tbody.appendChild(tr); | 596 tbody.appendChild(tr); |
| 597 }); | 597 }); |
| 598 // show the total for all pages | 598 // show the total for all pages |
| 599 var tds = table.querySelectorAll('tfoot td'); | 599 var tds = table.querySelectorAll('tfoot td'); |
| 600 tds[1].innerHTML = ms(entry.getTimeImpact(), showDiff); | 600 tds[1].textContent = ms(entry.getTimeImpact(), showDiff); |
| 601 // Only show the percentage total if we are in diff mode: | 601 // Only show the percentage total if we are in diff mode: |
| 602 tds[2].innerHTML = percent(entry.getTimePercentImpact(), showDiff); | 602 tds[2].textContent = percent(entry.getTimePercentImpact(), showDiff); |
| 603 tds[3].innerHTML = ''; | 603 tds[3].textContent = ''; |
| 604 tds[4].innerHTML = count(entry.getCountImpact(), showDiff); | 604 tds[4].textContent = count(entry.getCountImpact(), showDiff); |
| 605 table.replaceChild(tbody, table.querySelector('tbody')); | 605 table.replaceChild(tbody, table.querySelector('tbody')); |
| 606 } | 606 } |
| 607 | 607 |
| 608 function showImpactList(page) { | 608 function showImpactList(page) { |
| 609 var impactView = $('detailView').querySelector('.impactView'); | 609 var impactView = $('detailView').querySelector('.impactView'); |
| 610 impactView.querySelector('h3 span').innerHTML = page.version.name; | 610 impactView.querySelector('h3 span').textContent = page.version.name; |
| 611 | 611 |
| 612 var table = impactView.querySelector('table'); | 612 var table = impactView.querySelector('table'); |
| 613 var tbody = document.createElement('tbody'); | 613 var tbody = document.createElement('tbody'); |
| 614 var version = page.version; | 614 var version = page.version; |
| 615 var entries = version.allEntries(); | 615 var entries = version.allEntries(); |
| 616 if (selectedEntry !== undefined && selectedEntry.isGroup) { | 616 if (selectedEntry !== undefined && selectedEntry.isGroup) { |
| 617 impactView.querySelector('h3 span').innerHTML += " " + selectedEntry.nam
e; | 617 impactView.querySelector('h3 span').textContent += " " + selectedEntry.n
ame; |
| 618 entries = entries.filter((entry) => { | 618 entries = entries.filter((entry) => { |
| 619 return entry.name == selectedEntry.name || | 619 return entry.name == selectedEntry.name || |
| 620 (entry.parent && entry.parent.name == selectedEntry.name) | 620 (entry.parent && entry.parent.name == selectedEntry.name) |
| 621 }); | 621 }); |
| 622 } | 622 } |
| 623 var isCompareView = baselineVersion !== undefined; | 623 var isCompareView = baselineVersion !== undefined; |
| 624 entries = entries.filter((entry) => { | 624 entries = entries.filter((entry) => { |
| 625 if (isCompareView) { | 625 if (isCompareView) { |
| 626 var impact = entry.getTimeImpact(); | 626 var impact = entry.getTimeImpact(); |
| 627 return impact < -1 || 1 < impact | 627 return impact < -1 || 1 < impact |
| (...skipping 171 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 799 }, | 799 }, |
| 800 explorer: { | 800 explorer: { |
| 801 actions: ['dragToZoom', 'rightClickToReset'], | 801 actions: ['dragToZoom', 'rightClickToReset'], |
| 802 maxZoomIn: 0.01 | 802 maxZoomIn: 0.01 |
| 803 }, | 803 }, |
| 804 legend: {position:'top', textStyle:{fontSize: '16px'}}, | 804 legend: {position:'top', textStyle:{fontSize: '16px'}}, |
| 805 chartArea: {left:200, top:50, width:'98%', height:'80%'}, | 805 chartArea: {left:200, top:50, width:'98%', height:'80%'}, |
| 806 colors: groups.map(each => each.color) | 806 colors: groups.map(each => each.color) |
| 807 }; | 807 }; |
| 808 var parentNode = $(id); | 808 var parentNode = $(id); |
| 809 parentNode.querySelector('h2>span, h3>span').innerHTML = title; | 809 parentNode.querySelector('h2>span, h3>span').textContent = title; |
| 810 var graphNode = parentNode.querySelector('.content'); | 810 var graphNode = parentNode.querySelector('.content'); |
| 811 | 811 |
| 812 var chart = graphNode.chart; | 812 var chart = graphNode.chart; |
| 813 if (chart === undefined) { | 813 if (chart === undefined) { |
| 814 chart = graphNode.chart = new google.visualization.BarChart(graphNode); | 814 chart = graphNode.chart = new google.visualization.BarChart(graphNode); |
| 815 } else { | 815 } else { |
| 816 google.visualization.events.removeAllListeners(chart); | 816 google.visualization.events.removeAllListeners(chart); |
| 817 } | 817 } |
| 818 google.visualization.events.addListener(chart, 'select', selectHandler); | 818 google.visualization.events.addListener(chart, 'select', selectHandler); |
| 819 function getChartEntry(selection) { | 819 function getChartEntry(selection) { |
| (...skipping 29 matching lines...) Expand all Loading... |
| 849 $('view').querySelectorAll(".child").forEach((tr) => { | 849 $('view').querySelectorAll(".child").forEach((tr) => { |
| 850 var entry = tr.parentEntry; | 850 var entry = tr.parentEntry; |
| 851 if (!entry) return; | 851 if (!entry) return; |
| 852 if (entry.name !== group.name) return; | 852 if (entry.name !== group.name) return; |
| 853 toggleCssClass(tr, 'visible', show); | 853 toggleCssClass(tr, 'visible', show); |
| 854 }); | 854 }); |
| 855 } | 855 } |
| 856 | 856 |
| 857 function showPopover(entry) { | 857 function showPopover(entry) { |
| 858 var popover = $('popover'); | 858 var popover = $('popover'); |
| 859 popover.querySelector('td.name').innerHTML = entry.name; | 859 popover.querySelector('td.name').textContent = entry.name; |
| 860 popover.querySelector('td.page').innerHTML = entry.page.name; | 860 popover.querySelector('td.page').textContent = entry.page.name; |
| 861 setPopoverDetail(popover, entry, ''); | 861 setPopoverDetail(popover, entry, ''); |
| 862 popover.querySelector('table').className = ""; | 862 popover.querySelector('table').className = ""; |
| 863 if (baselineVersion !== undefined) { | 863 if (baselineVersion !== undefined) { |
| 864 entry = baselineVersion.getEntry(entry); | 864 entry = baselineVersion.getEntry(entry); |
| 865 setPopoverDetail(popover, entry, '.compare'); | 865 setPopoverDetail(popover, entry, '.compare'); |
| 866 popover.querySelector('table').className = "compare"; | 866 popover.querySelector('table').className = "compare"; |
| 867 } | 867 } |
| 868 } | 868 } |
| 869 | 869 |
| 870 function setPopoverDetail(popover, entry, prefix) { | 870 function setPopoverDetail(popover, entry, prefix) { |
| 871 var node = (name) => popover.querySelector(prefix + name); | 871 var node = (name) => popover.querySelector(prefix + name); |
| 872 if (entry == undefined) { | 872 if (entry == undefined) { |
| 873 node('.version').innerHTML = baselineVersion.name; | 873 node('.version').textContent = baselineVersion.name; |
| 874 node('.time').innerHTML = '-'; | 874 node('.time').textContent = '-'; |
| 875 node('.timeVariance').innerHTML = '-'; | 875 node('.timeVariance').textContent = '-'; |
| 876 node('.percent').innerHTML = '-'; | 876 node('.percent').textContent = '-'; |
| 877 node('.percentPerEntry').innerHTML = '-'; | 877 node('.percentPerEntry').textContent = '-'; |
| 878 node('.percentVariance').innerHTML = '-'; | 878 node('.percentVariance').textContent = '-'; |
| 879 node('.count').innerHTML = '-'; | 879 node('.count').textContent = '-'; |
| 880 node('.countVariance').innerHTML = '-'; | 880 node('.countVariance').textContent = '-'; |
| 881 node('.timeImpact').innerHTML = '-'; | 881 node('.timeImpact').textContent = '-'; |
| 882 node('.timePercentImpact').innerHTML = '-'; | 882 node('.timePercentImpact').textContent = '-'; |
| 883 } else { | 883 } else { |
| 884 node('.version').innerHTML = entry.page.version.name; | 884 node('.version').textContent = entry.page.version.name; |
| 885 node('.time').innerHTML = ms(entry._time, false); | 885 node('.time').textContent = ms(entry._time, false); |
| 886 node('.timeVariance').innerHTML | 886 node('.timeVariance').textContent |
| 887 = percent(entry.timeVariancePercent, false); | 887 = percent(entry.timeVariancePercent, false); |
| 888 node('.percent').innerHTML = percent(entry.timePercent, false); | 888 node('.percent').textContent = percent(entry.timePercent, false); |
| 889 node('.percentPerEntry').innerHTML | 889 node('.percentPerEntry').textContent |
| 890 = percent(entry.timePercentPerEntry, false); | 890 = percent(entry.timePercentPerEntry, false); |
| 891 node('.percentVariance').innerHTML | 891 node('.percentVariance').textContent |
| 892 = percent(entry.timePercentVariancePercent, false); | 892 = percent(entry.timePercentVariancePercent, false); |
| 893 node('.count').innerHTML = count(entry._count, false); | 893 node('.count').textContent = count(entry._count, false); |
| 894 node('.countVariance').innerHTML | 894 node('.countVariance').textContent |
| 895 = percent(entry.timeVariancePercent, false); | 895 = percent(entry.timeVariancePercent, false); |
| 896 node('.timeImpact').innerHTML | 896 node('.timeImpact').textContent |
| 897 = ms(entry.getTimeImpact(false), false); | 897 = ms(entry.getTimeImpact(false), false); |
| 898 node('.timePercentImpact').innerHTML | 898 node('.timePercentImpact').textContent |
| 899 = percent(entry.getTimeImpactVariancePercent(false), false); | 899 = percent(entry.getTimeImpactVariancePercent(false), false); |
| 900 } | 900 } |
| 901 } | 901 } |
| 902 </script> | 902 </script> |
| 903 <script type="text/javascript"> | 903 <script type="text/javascript"> |
| 904 "use strict" | 904 "use strict" |
| 905 // ========================================================================= | 905 // ========================================================================= |
| 906 // Helpers | 906 // Helpers |
| 907 function $(id) { | 907 function $(id) { |
| 908 return document.getElementById(id) | 908 return document.getElementById(id) |
| (...skipping 11 matching lines...) Expand all Loading... |
| 920 if (match(i, options[i])) { | 920 if (match(i, options[i])) { |
| 921 select.selectedIndex = i; | 921 select.selectedIndex = i; |
| 922 return; | 922 return; |
| 923 } | 923 } |
| 924 } | 924 } |
| 925 } | 925 } |
| 926 | 926 |
| 927 function addCodeSearchButton(entry, node) { | 927 function addCodeSearchButton(entry, node) { |
| 928 if (entry.isGroup) return; | 928 if (entry.isGroup) return; |
| 929 var button = document.createElement("div"); | 929 var button = document.createElement("div"); |
| 930 button.innerHTML = '?' | 930 button.textContent = '?' |
| 931 button.className = "codeSearch" | 931 button.className = "codeSearch" |
| 932 button.addEventListener('click', handleCodeSearch); | 932 button.addEventListener('click', handleCodeSearch); |
| 933 node.appendChild(button); | 933 node.appendChild(button); |
| 934 return node; | 934 return node; |
| 935 } | 935 } |
| 936 | 936 |
| 937 function td(tr, content, className) { | 937 function td(tr, content, className) { |
| 938 var td = document.createElement("td"); | 938 var td = document.createElement("td"); |
| 939 td.innerHTML = content; | 939 if (content[0] == '<') { |
| 940 td.innerHTML = content; |
| 941 } else { |
| 942 td.textContent = content; |
| 943 } |
| 940 td.className = className | 944 td.className = className |
| 941 tr.appendChild(td); | 945 tr.appendChild(td); |
| 942 return td | 946 return td |
| 943 } | 947 } |
| 944 | 948 |
| 945 function nodeIndex(node) { | 949 function nodeIndex(node) { |
| 946 var children = node.parentNode.childNodes, | 950 var children = node.parentNode.childNodes, |
| 947 i = 0; | 951 i = 0; |
| 948 for (; i < children.length; i++) { | 952 for (; i < children.length; i++) { |
| 949 if (children[i] == node) { | 953 if (children[i] == node) { |
| (...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 995 function percent(value, showDiff) { | 999 function percent(value, showDiff) { |
| 996 return diffSign(value, 1, '%', showDiff); | 1000 return diffSign(value, 1, '%', showDiff); |
| 997 } | 1001 } |
| 998 | 1002 |
| 999 </script> | 1003 </script> |
| 1000 <script type="text/javascript"> | 1004 <script type="text/javascript"> |
| 1001 "use strict" | 1005 "use strict" |
| 1002 // ========================================================================= | 1006 // ========================================================================= |
| 1003 // EventHandlers | 1007 // EventHandlers |
| 1004 function handleBodyLoad() { | 1008 function handleBodyLoad() { |
| 1005 $('uploadInput').focus(); | 1009 $('uploadInput').focus(); |
| 1010 if (window.location.protocol !== 'file:') tryLoadDefaultResults(); |
| 1011 } |
| 1012 |
| 1013 function tryLoadDefaultResults() { |
| 1014 // Try to load a results.json file adjacent to this day. |
| 1015 var xhr = new XMLHttpRequest(); |
| 1016 xhr.open('GET', 'results.json', true); |
| 1017 xhr.onreadystatechange = function(e) { |
| 1018 if (this.readyState != 4 || this.status != 200) return; |
| 1019 handleLoadText(this.responseText); |
| 1020 }; |
| 1021 xhr.send(); |
| 1006 } | 1022 } |
| 1007 | 1023 |
| 1008 function handleLoadFile() { | 1024 function handleLoadFile() { |
| 1009 var files = document.getElementById("uploadInput").files; | 1025 var files = document.getElementById("uploadInput").files; |
| 1010 var file = files[0]; | 1026 var file = files[0]; |
| 1011 var reader = new FileReader(); | 1027 var reader = new FileReader(); |
| 1012 | 1028 |
| 1013 reader.onload = function(evt) { | 1029 reader.onload = function(evt) { |
| 1014 pages = new Pages(); | 1030 handleLoadText(this.result); |
| 1015 versions = Versions.fromJSON(JSON.parse(this.result)); | |
| 1016 initialize() | |
| 1017 showPage(versions.versions[0].pages[0]); | |
| 1018 } | 1031 } |
| 1019 reader.readAsText(file); | 1032 reader.readAsText(file); |
| 1020 } | 1033 } |
| 1021 | 1034 |
| 1035 function handleLoadText(text) { |
| 1036 pages = new Pages(); |
| 1037 versions = Versions.fromJSON(JSON.parse(text)); |
| 1038 initialize() |
| 1039 showPage(versions.versions[0].pages[0]); |
| 1040 } |
| 1041 |
| 1022 function handleToggleGroup(event) { | 1042 function handleToggleGroup(event) { |
| 1023 var group = event.target.parentNode.parentNode.entry; | 1043 var group = event.target.parentNode.parentNode.entry; |
| 1024 toggleGroup(selectedPage.get(group.name)); | 1044 toggleGroup(selectedPage.get(group.name)); |
| 1025 } | 1045 } |
| 1026 | 1046 |
| 1027 function handleSelectPage(select, event) { | 1047 function handleSelectPage(select, event) { |
| 1028 var option = select.options[select.selectedIndex]; | 1048 var option = select.options[select.selectedIndex]; |
| 1029 if (select.id == "select_0") { | 1049 if (select.id == "select_0") { |
| 1030 showPage(option.page); | 1050 showPage(option.page); |
| 1031 } else { | 1051 } else { |
| (...skipping 466 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1498 | 1518 |
| 1499 | 1519 |
| 1500 class GroupedEntry extends Entry { | 1520 class GroupedEntry extends Entry { |
| 1501 constructor(name, regexp, color) { | 1521 constructor(name, regexp, color) { |
| 1502 super(0, 'Group-' + name, 0, 0, 0, 0, 0, 0); | 1522 super(0, 'Group-' + name, 0, 0, 0, 0, 0, 0); |
| 1503 this.regexp = regexp; | 1523 this.regexp = regexp; |
| 1504 this.color = color; | 1524 this.color = color; |
| 1505 this.entries = []; | 1525 this.entries = []; |
| 1506 } | 1526 } |
| 1507 add(entry) { | 1527 add(entry) { |
| 1508 if (!entry.name.match(this.regexp)) return false; | 1528 if (!this.regexp.test(entry.name)) return false; |
| 1509 this._time += entry.time; | 1529 this._time += entry.time; |
| 1510 this._count += entry.count; | 1530 this._count += entry.count; |
| 1511 // TODO: sum up variance | 1531 // TODO: sum up variance |
| 1512 this.entries.push(entry); | 1532 this.entries.push(entry); |
| 1513 entry.parent = this; | 1533 entry.parent = this; |
| 1514 return true; | 1534 return true; |
| 1515 } | 1535 } |
| 1516 forEach(fun) { | 1536 forEach(fun) { |
| 1517 if (baselineVersion === undefined) { | 1537 if (baselineVersion === undefined) { |
| 1518 this.entries.forEach(fun); | 1538 this.entries.forEach(fun); |
| (...skipping 281 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1800 </tr> | 1820 </tr> |
| 1801 <tr> | 1821 <tr> |
| 1802 <td>Overall Impact:</td> | 1822 <td>Overall Impact:</td> |
| 1803 <td class="timeImpact"></td><td>±</td><td class="timePercentImpact"></td
> | 1823 <td class="timeImpact"></td><td>±</td><td class="timePercentImpact"></td
> |
| 1804 <td class="compare timeImpact"></td><td class="compare"> ± </td><td clas
s="compare timePercentImpact"></td> | 1824 <td class="compare timeImpact"></td><td class="compare"> ± </td><td clas
s="compare timePercentImpact"></td> |
| 1805 </tr> | 1825 </tr> |
| 1806 </table> | 1826 </table> |
| 1807 </div> | 1827 </div> |
| 1808 </body> | 1828 </body> |
| 1809 </html> | 1829 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2361953002:
[tools] Improve callstats.html (Closed)
