| <html> |
| <!-- |
| Copyright 2016 the V8 project authors. All rights reserved. Use of this source |
| code is governed by a BSD-style license that can be found in the LICENSE file. |
| --> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <style> |
| body { |
| font-family: arial; |
| } |
| |
| table { |
| display: table; |
| border-spacing: 0px; |
| } |
| |
| tr { |
| border-spacing: 0px; |
| padding: 10px; |
| } |
| |
| td, |
| th { |
| padding: 3px 10px 3px 5px; |
| } |
| |
| .inline { |
| display: inline-block; |
| vertical-align: top; |
| } |
| |
| h2, |
| h3 { |
| margin-bottom: 0px; |
| } |
| |
| .hidden { |
| display: none; |
| } |
| |
| .view { |
| display: table; |
| } |
| |
| .column { |
| display: table-cell; |
| border-right: 1px black dotted; |
| min-width: 200px; |
| } |
| |
| .column .header { |
| padding: 0 10px 0 10px |
| } |
| |
| #column { |
| display: none; |
| } |
| |
| .list { |
| width: 100%; |
| } |
| |
| select { |
| width: 100% |
| } |
| |
| .list tbody { |
| cursor: pointer; |
| } |
| |
| .list tr:nth-child(even) { |
| background-color: #EFEFEF; |
| } |
| |
| .list tr:nth-child(even).selected { |
| background-color: #DDD; |
| } |
| |
| .list tr.child { |
| display: none; |
| } |
| |
| .list tr.child.visible { |
| display: table-row; |
| } |
| |
| .list .child .name { |
| padding-left: 20px; |
| } |
| |
| .list .parent td { |
| border-top: 1px solid #AAA; |
| } |
| |
| .list .total { |
| font-weight: bold |
| } |
| |
| .list tr.parent { |
| background-color: #FFF; |
| } |
| |
| .list tr.parent.selected { |
| background-color: #DDD; |
| } |
| |
| tr.selected { |
| background-color: #DDD; |
| } |
| |
| .list .position { |
| text-align: right; |
| display: none; |
| } |
| |
| .list div.toggle { |
| cursor: pointer; |
| } |
| |
| #column_0 .position { |
| display: table-cell; |
| } |
| |
| #column_0 .name { |
| display: table-cell; |
| } |
| |
| .list .name { |
| display: none; |
| white-space: nowrap; |
| } |
| |
| .value { |
| text-align: right; |
| } |
| |
| .selectedVersion { |
| font-weight: bold; |
| } |
| |
| #baseline { |
| width: auto; |
| } |
| |
| .compareSelector { |
| padding-bottom: 20px; |
| } |
| |
| .pageDetailTable tbody { |
| cursor: pointer |
| } |
| |
| .pageDetailTable tfoot td { |
| border-top: 1px grey solid; |
| } |
| |
| #popover { |
| position: absolute; |
| transform: translateY(-50%) translateX(40px); |
| box-shadow: -2px 10px 44px -10px #000; |
| border-radius: 5px; |
| z-index: 1; |
| background-color: #FFF; |
| display: none; |
| white-space: nowrap; |
| } |
| |
| #popover table { |
| position: relative; |
| z-index: 1; |
| text-align: right; |
| margin: 10px; |
| } |
| #popover td { |
| padding: 3px 0px 3px 5px; |
| white-space: nowrap; |
| } |
| |
| .popoverArrow { |
| background-color: #FFF; |
| position: absolute; |
| width: 30px; |
| height: 30px; |
| transform: translateY(-50%)rotate(45deg); |
| top: 50%; |
| left: -10px; |
| z-index: 0; |
| } |
| |
| #popover .name { |
| padding: 5px; |
| font-weight: bold; |
| text-align: center; |
| } |
| |
| #popover table .compare { |
| display: none |
| } |
| |
| #popover table.compare .compare { |
| display: table-cell; |
| } |
| |
| #popover .compare .time, |
| #popover .compare .version { |
| padding-left: 10px; |
| } |
| </style> |
| <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> |
| <script type="text/javascript"> |
| "use strict" |
| google.charts.load('current', {packages: ['corechart']}); |
| |
| // Did anybody say monkeypatching? |
| if (!NodeList.prototype.forEach) { |
| NodeList.prototype.forEach = function(func) { |
| for (var i = 0; i < this.length; i++) { |
| func(this[i]); |
| } |
| } |
| } |
| |
| var versions; |
| var selectedPage; |
| var baselineVersion; |
| var selectedEntry; |
| |
| function initialize() { |
| var original = $("column"); |
| var view = document.createElement('div'); |
| view.id = 'view'; |
| var i = 0; |
| versions.forEach((version) => { |
| if (!version.enabled) return; |
| // add column |
| var column = original.cloneNode(true); |
| column.id = "column_" + i; |
| // Fill in all versions |
| var select = column.querySelector(".version"); |
| select.id = "selectVersion_" + i; |
| // add all select options |
| versions.forEach((version) => { |
| if (!version.enabled) return; |
| var option = document.createElement("option"); |
| option.textContent = version.name; |
| option.version = version; |
| select.appendChild(option); |
| }); |
| // Fill in all page versions |
| select = column.querySelector(".pageVersion"); |
| select.id = "select_" + i; |
| // add all pages |
| versions.forEach((version) => { |
| if (!version.enabled) return; |
| var optgroup = document.createElement("optgroup"); |
| optgroup.label = version.name; |
| optgroup.version = version; |
| version.pages.forEach((page) => { |
| var option = document.createElement("option"); |
| option.textContent = page.name; |
| option.page = page; |
| optgroup.appendChild(option); |
| }); |
| select.appendChild(optgroup); |
| }); |
| view.appendChild(column); |
| i++; |
| }); |
| var oldView = $('view'); |
| oldView.parentNode.replaceChild(view, oldView); |
| |
| var select = $('baseline'); |
| removeAllChildren(select); |
| select.appendChild(document.createElement('option')); |
| versions.forEach((version) => { |
| var option = document.createElement("option"); |
| option.textContent = version.name; |
| option.version = version; |
| select.appendChild(option); |
| }); |
| |
| var versionSelectorList = $('results').querySelector('.versionSelector ul'); |
| removeAllChildren(versionSelectorList); |
| versions.forEach((version) => { |
| var li = document.createElement('li'); |
| var checkbox = document.createElement('input'); |
| checkbox.type = 'checkbox'; |
| checkbox.checked = version.enabled; |
| checkbox.version = version; |
| checkbox.addEventListener('click', handleToggleVersionEnable); |
| li.appendChild(checkbox); |
| li.appendChild(document.createTextNode(version.name)); |
| versionSelectorList.appendChild(li); |
| }); |
| $('results').querySelectorAll('#results > .hidden').forEach((node) => { |
| toggleCssClass(node, 'hidden', false); |
| }); |
| } |
| |
| function showPage(firstPage) { |
| var changeSelectedEntry = selectedEntry !== undefined |
| && selectedEntry.page === selectedPage; |
| selectedPage = firstPage; |
| selectedPage.sort(); |
| showPageInColumn(firstPage, 0); |
| // Show the other versions of this page in the following columns. |
| var pageVersions = versions.pageVersions(firstPage.name); |
| var index = 1; |
| pageVersions.forEach((page) => { |
| if (page !== firstPage) { |
| showPageInColumn(page, index); |
| index++; |
| } |
| }); |
| if (changeSelectedEntry) { |
| showEntryDetail(selectedPage.getEntry(selectedEntry)); |
| } else { |
| showImpactList(selectedPage); |
| } |
| } |
| |
| function showPageInColumn(page, columnIndex) { |
| page.sort(); |
| var showDiff = (baselineVersion === undefined && columnIndex !== 0) || |
| (baselineVersion !== undefined && page.version !== baselineVersion); |
| var diffStatus = (td, a, b) => {}; |
| if (showDiff) { |
| if (baselineVersion !== undefined) { |
| diffStatus = (td, a, b) => { |
| if (a == 0) return; |
| td.style.color = a < 0 ? '#FF0000' : '#00BB00'; |
| }; |
| } else { |
| diffStatus = (td, a, b) => { |
| if (a == b) return; |
| var color; |
| var ratio = a / b; |
| if (ratio > 1) { |
| ratio = Math.min(Math.round((ratio - 1) * 255 * 10), 200); |
| color = '#' + ratio.toString(16) + "0000"; |
| } else { |
| ratio = Math.min(Math.round((1 - ratio) * 255 * 10), 200); |
| color = '#00' + ratio.toString(16) + "00"; |
| } |
| td.style.color = color; |
| } |
| } |
| } |
| |
| var column = $('column_' + columnIndex); |
| var select = $('select_' + columnIndex); |
| // Find the matching option |
| selectOption(select, (i, option) => { |
| return option.page == page |
| }); |
| var table = column.querySelector("table"); |
| var oldTbody = table.querySelector('tbody'); |
| var tbody = document.createElement('tbody'); |
| var referencePage = selectedPage; |
| page.forEachSorted(selectedPage, (parentEntry, entry, referenceEntry) => { |
| // Filter out entries that do not exist in the first column for the default |
| // view. |
| if (baselineVersion === undefined && referenceEntry && |
| referenceEntry.time == 0) { |
| return; |
| } |
| var tr = document.createElement('tr'); |
| tbody.appendChild(tr); |
| tr.entry = entry; |
| tr.parentEntry = parentEntry; |
| tr.className = parentEntry === undefined ? 'parent' : 'child'; |
| // Don't show entries that do not exist on the current page or if we |
| // compare against the current page |
| if (entry !== undefined && page.version !== baselineVersion) { |
| // If we show a diff, use the baselineVersion as the referenceEntry |
| if (baselineVersion !== undefined) { |
| var baselineEntry = baselineVersion.getEntry(entry); |
| if (baselineEntry !== undefined) referenceEntry = baselineEntry |
| } |
| if (!parentEntry) { |
| var node = td(tr, '<div class="toggle">►</div>', 'position'); |
| node.firstChild.addEventListener('click', handleToggleGroup); |
| } else { |
| td(tr, entry.position == 0 ? '' : entry.position, 'position'); |
| } |
| td(tr, entry.name, 'name ' + entry.cssClass()); |
| diffStatus( |
| td(tr, ms(entry.time), 'value time'), |
| entry.time, referenceEntry.time); |
| diffStatus( |
| td(tr, percent(entry.timePercent), 'value time'), |
| entry.time, referenceEntry.time); |
| diffStatus( |
| td(tr, count(entry.count), 'value count'), |
| entry.count, referenceEntry.count); |
| } else if (baselineVersion !== undefined && referenceEntry |
| && page.version !== baselineVersion) { |
| // Show comparison of entry that does not exist on the current page. |
| tr.entry = referenceEntry; |
| td(tr, '-', 'position'); |
| td(tr, referenceEntry.name, 'name'); |
| diffStatus( |
| td(tr, ms(referenceEntry.time), 'value time'), |
| referenceEntry.time, 0); |
| diffStatus( |
| td(tr, percent(referenceEntry.timePercent), 'value time'), |
| referenceEntry.timePercent, 0); |
| diffStatus( |
| td(tr, count(referenceEntry.count), 'value count'), |
| referenceEntry.count, 0); |
| } else { |
| // Display empty entry / baseline entry |
| var showBaselineEntry = entry !== undefined; |
| if (showBaselineEntry) { |
| if (!parentEntry) { |
| var node = td(tr, '<div class="toggle">►</div>', 'position'); |
| node.firstChild.addEventListener('click', handleToggleGroup); |
| } else { |
| td(tr, entry.position == 0 ? '' : entry.position, 'position'); |
| } |
| td(tr, entry.name, 'name'); |
| td(tr, ms(entry.time, false), 'value time'); |
| td(tr, percent(entry.timePercent, false), 'value time'); |
| td(tr, count(entry.count, false), 'value count'); |
| } else { |
| td(tr, '-', 'position'); |
| td(tr, '-', 'name'); |
| td(tr, '-', 'value time'); |
| td(tr, '-', 'value time'); |
| td(tr, '-', 'value count'); |
| } |
| } |
| }); |
| table.replaceChild(tbody, oldTbody); |
| var versionSelect = column.querySelector('select.version'); |
| selectOption(versionSelect, (index, option) => { |
| return option.version == page.version |
| }); |
| } |
| |
| function selectEntry(entry, updateSelectedPage) { |
| if (updateSelectedPage) { |
| entry = selectedPage.version.getEntry(entry); |
| } |
| var rowIndex; |
| var needsPageSwitch = updateSelectedPage && entry.page != selectedPage; |
| // If clicked in the detail row change the first column to that page. |
| if (needsPageSwitch) showPage(entry.page); |
| var childNodes = $('column_0').querySelector('.list tbody').childNodes; |
| for (var i = 0; i < childNodes.length; i++) { |
| if (childNodes[i].entry.name == entry.name) { |
| rowIndex = i; |
| break; |
| } |
| } |
| var firstEntry = childNodes[rowIndex].entry; |
| if (rowIndex) { |
| if (firstEntry.parent) showGroup(firstEntry.parent); |
| } |
| // Deselect all |
| $('view').querySelectorAll('.list tbody tr').forEach((tr) => { |
| toggleCssClass(tr, 'selected', false); |
| }); |
| // Select the entry row |
| $('view').querySelectorAll("tbody").forEach((body) => { |
| var row = body.childNodes[rowIndex]; |
| if (!row) return; |
| toggleCssClass(row, 'selected', row.entry && row.entry.name == |
| firstEntry.name); |
| }); |
| if (updateSelectedPage) { |
| entry = selectedEntry.page.version.getEntry(entry); |
| } |
| selectedEntry = entry; |
| showEntryDetail(entry); |
| } |
| |
| function showEntryDetail(entry) { |
| var table, tbody, entries; |
| table = $('detailView').querySelector('.versionDetailTable'); |
| tbody = document.createElement('tbody'); |
| if (entry !== undefined) { |
| $('detailView').querySelector('.versionDetail h3 span').innerHTML = |
| entry.name; |
| entries = versions.pageVersions(entry.page.name).map( |
| (page) => { |
| return page.get(entry.name) |
| }); |
| entries.sort((a, b) => { |
| return a.time - b.time |
| }); |
| entries.forEach((pageEntry) => { |
| if (pageEntry === undefined) return; |
| var tr = document.createElement('tr'); |
| if (pageEntry == entry) tr.className += 'selected'; |
| tr.entry = pageEntry; |
| td(tr, pageEntry.page.version.name, 'version'); |
| td(tr, pageEntry.position, 'value position'); |
| td(tr, ms(pageEntry.time), 'value time'); |
| td(tr, percent(pageEntry.timePercent), 'value time'); |
| td(tr, count(pageEntry.count), 'value count'); |
| tbody.appendChild(tr); |
| }); |
| } |
| table.replaceChild(tbody, table.querySelector('tbody')); |
| |
| table = $('detailView').querySelector('.pageDetailTable'); |
| tbody = document.createElement('tbody'); |
| if (entry !== undefined) { |
| var version = entry.page.version; |
| $('detailView').querySelector('.pageDetail h3 span').innerHTML = |
| version.name; |
| entries = version.pages.map( |
| (page) => { |
| return page.get(entry.name) |
| }); |
| entries.sort((a, b) => { |
| var cmp = b.timePercent - a.timePercent; |
| if (cmp.toFixed(1) == 0) return b.time - a.time; |
| return cmp |
| }); |
| entries.forEach((pageEntry) => { |
| if (pageEntry === undefined) return; |
| var tr = document.createElement('tr'); |
| if (pageEntry === entry) tr.className += 'selected'; |
| tr.entry = pageEntry; |
| td(tr, pageEntry.page.name, 'name'); |
| td(tr, pageEntry.position, 'value position'); |
| td(tr, ms(pageEntry.time), 'value time'); |
| td(tr, percent(pageEntry.timePercent), 'value time'); |
| td(tr, count(pageEntry.count), 'value count'); |
| tbody.appendChild(tr); |
| }); |
| // show the total for all pages |
| var tds = table.querySelectorAll('tfoot td'); |
| tds[2].innerHTML = ms(entry.getTimeImpact()); |
| // Only show the percentage total if we are in diff mode: |
| tds[3].innerHTML = percent(entry.getTimePercentImpact()); |
| tds[4].innerHTML = count(entry.getCountImpact()); |
| } |
| table.replaceChild(tbody, table.querySelector('tbody')); |
| showImpactList(entry.page); |
| showPageGraphs(entry.page); |
| } |
| |
| function showImpactList(page) { |
| var impactView = $('detailView').querySelector('.impactView'); |
| impactView.querySelector('h3 span').innerHTML = page.version.name; |
| |
| var table = impactView.querySelector('table'); |
| var tbody = document.createElement('tbody'); |
| var version = page.version; |
| var entries = version.allEntries(); |
| if (selectedEntry !== undefined && selectedEntry.isGroup) { |
| impactView.querySelector('h3 span').innerHTML += " " + selectedEntry.name; |
| entries = entries.filter((entry) => { |
| return entry.name == selectedEntry.name || |
| (entry.parent && entry.parent.name == selectedEntry.name) |
| }); |
| } |
| var isCompareView = baselineVersion !== undefined; |
| entries = entries.filter((entry) => { |
| if (isCompareView) { |
| var impact = entry.getTimeImpact(); |
| return impact < -1 || 1 < impact |
| } |
| return entry.getTimePercentImpact() > 0.1; |
| }); |
| entries.sort((a, b) => { |
| var cmp = b.getTimePercentImpact() - a.getTimePercentImpact(); |
| if (isCompareView || cmp.toFixed(1) == 0) { |
| return b.getTimeImpact() - a.getTimeImpact(); |
| } |
| return cmp |
| }); |
| entries.forEach((entry) => { |
| var tr = document.createElement('tr'); |
| tr.entry = entry; |
| td(tr, entry.name, 'name'); |
| td(tr, ms(entry.getTimeImpact()), 'value time'); |
| var percentImpact = entry.getTimePercentImpact(); |
| td(tr, percentImpact > 1000 ? '-' : percent(percentImpact), 'value time'); |
| var topPages = entry.getPagesByPercentImpact().slice(0, 3) |
| .map((each) => { |
| return each.name + ' (' + percent(each.getEntry(entry).timePercent) + |
| ')' |
| }); |
| td(tr, topPages.join(', '), 'name'); |
| tbody.appendChild(tr); |
| }); |
| table.replaceChild(tbody, table.querySelector('tbody')); |
| } |
| |
| var selectedGroup; |
| function showPageGraphs(page) { |
| var groups = page.groups.filter(each => each.name != page.total.name); |
| if (selectedGroup == undefined) { |
| selectedGroup = groups[0]; |
| } else { |
| groups = groups.filter(each => each.name != selectedGroup.name); |
| groups.unshift(selectedGroup); |
| } |
| var dataTable = new google.visualization.DataTable(); |
| dataTable.addColumn('string', 'Name'); |
| groups.forEach(group => { |
| var column = dataTable.addColumn('number', group.name); |
| dataTable.setColumnProperty(column, 'group', group); |
| }); |
| // Calculate the average row |
| var row = ['Average']; |
| groups.forEach((group) => { |
| row.push(group.getTimeImpact()); |
| }); |
| dataTable.addRow(row); |
| // Sort the pages by the selected group. |
| var pages = page.version.pages.slice(); |
| pages.sort((a, b) => { |
| return b.getEntry(selectedGroup).timePercent - a.getEntry(selectedGroup).timePercent; |
| }); |
| // Calculate the entries for the pages |
| pages.forEach((page) => { |
| row = [page.name]; |
| groups.forEach((group) => { |
| row.push(page.getEntry(group).time); |
| }); |
| dataTable.addRow(row); |
| }); |
| |
| var height = 1000/27*page.version.pages.length; |
| var options = { |
| title: 'Page Comparison for Version ' + page.version.name, |
| isStacked: 'percent', |
| height: height , |
| hAxis: { |
| title: '% Time', |
| minValue: 0, |
| }, |
| vAxis: { |
| } |
| }; |
| var chart = new google.visualization.BarChart($('pageGraphs')); |
| chart.draw(dataTable, options); |
| google.visualization.events.addListener(chart, 'select', selectHandler); |
| function selectHandler() { |
| var column = chart.getSelection()[0].column; |
| if (column === undefined) return; |
| selectedGroup = dataTable.getColumnProperty(column, 'group'); |
| showPageGraphs(selectedEntry.page); |
| } |
| } |
| |
| function showGroup(entry) { |
| toggleGroup(entry, true); |
| } |
| |
| function toggleGroup(group, show) { |
| $('view').querySelectorAll(".child").forEach((tr) => { |
| var entry = tr.parentEntry; |
| if (!entry) return; |
| if (entry.name !== group.name) return; |
| toggleCssClass(tr, 'visible', show); |
| }); |
| } |
| |
| function showPopover(entry) { |
| var popover = $('popover'); |
| popover.querySelector('td.name').innerHTML = entry.name; |
| popover.querySelector('td.page').innerHTML = entry.page.name; |
| setPopoverDetail(popover, entry, ''); |
| popover.querySelector('table').className = ""; |
| if (baselineVersion !== undefined) { |
| entry = baselineVersion.getEntry(entry); |
| setPopoverDetail(popover, entry, '.compare'); |
| popover.querySelector('table').className = "compare"; |
| } |
| } |
| |
| function setPopoverDetail(popover, entry, prefix) { |
| var node = (name) => popover.querySelector(prefix + name); |
| if (entry == undefined) { |
| node('.version').innerHTML = baselineVersion.name; |
| node('.time').innerHTML = '-'; |
| node('.timeVariance').innerHTML = '-'; |
| node('.percent').innerHTML = '-'; |
| node('.percentVariance').innerHTML = '-'; |
| node('.count').innerHTML = '-'; |
| node('.countVariance').innerHTML = '-'; |
| node('.timeImpact').innerHTML = '-'; |
| node('.timePercentImpact').innerHTML = '-'; |
| } else { |
| node('.version').innerHTML = entry.page.version.name; |
| node('.time').innerHTML = ms(entry._time, false); |
| node('.timeVariance').innerHTML |
| = percent(entry.timeVariancePercent, false); |
| node('.percent').innerHTML = percent(entry.timePercent, false); |
| node('.percentVariance').innerHTML |
| = percent(entry.timePercentVariancePercent, false); |
| node('.count').innerHTML = count(entry._count, false); |
| node('.countVariance').innerHTML |
| = percent(entry.timeVariancePercent, false); |
| node('.timeImpact').innerHTML |
| = ms(entry.getTimeImpact(false), false); |
| node('.timePercentImpact').innerHTML |
| = percent(entry.getTimeImpactVariancePercent(false), false); |
| } |
| } |
| |
| // =========================================================================== |
| // Helpers |
| function $(id) { |
| return document.getElementById(id) |
| } |
| |
| function removeAllChildren(node) { |
| while (node.firstChild) { |
| node.removeChild(node.firstChild); |
| } |
| } |
| |
| function selectOption(select, match) { |
| var options = select.options; |
| for (var i = 0; i < options.length; i++) { |
| if (match(i, options[i])) { |
| select.selectedIndex = i; |
| return; |
| } |
| } |
| } |
| |
| function td(tr, content, className) { |
| var td = document.createElement("td"); |
| td.innerHTML = content; |
| td.className = className |
| tr.appendChild(td); |
| return td |
| } |
| |
| function nodeIndex(node) { |
| var children = node.parentNode.childNodes, |
| i = 0; |
| for (; i < children.length; i++) { |
| if (children[i] == node) { |
| return i; |
| } |
| } |
| return -1; |
| } |
| |
| function toggleCssClass(node, cssClass, toggleState) { |
| var index = -1; |
| var classes; |
| if (node.className != undefined) { |
| classes = node.className.split(' '); |
| index = classes.indexOf(cssClass); |
| } |
| if (index == -1) { |
| if (toggleState === false) return; |
| node.className += ' ' + cssClass; |
| return; |
| } |
| if (toggleState === true) return; |
| classes.splice(index, 1); |
| node.className = classes.join(' '); |
| } |
| |
| function diffSign(value, digits, unit, showDiff) { |
| if (showDiff === false || baselineVersion == undefined) { |
| return value.toFixed(digits) + unit; |
| } |
| return (value >= 0 ? '+' : '') + value.toFixed(digits) + unit + 'Δ'; |
| } |
| |
| function ms(value, showDiff) { |
| return diffSign(value, 1, 'ms', showDiff); |
| } |
| |
| function count(value, showDiff) { |
| return diffSign(value, 0, '#', showDiff); |
| } |
| |
| function percent(value, showDiff) { |
| return diffSign(value, 1, '%', showDiff); |
| } |
| |
| // ========================================================================= |
| // EventHandlers |
| function handleBodyLoad() { |
| $('uploadInput').focus(); |
| } |
| |
| function handleLoadFile() { |
| var files = document.getElementById("uploadInput").files; |
| var file = files[0]; |
| var reader = new FileReader(); |
| |
| reader.onload = function(evt) { |
| versions = Versions.fromJSON(JSON.parse(this.result)); |
| initialize() |
| showPage(versions.versions[0].pages[0]); |
| } |
| reader.readAsText(file); |
| } |
| |
| function handleToggleGroup(event) { |
| var group = event.target.parentNode.parentNode.entry; |
| toggleGroup(selectedPage.get(group.name)); |
| } |
| |
| function handleSelectPage(select, event) { |
| var option = select.options[select.selectedIndex]; |
| if (select.id == "select_0") { |
| showPage(option.page); |
| } else { |
| var columnIndex = select.id.split('_')[1]; |
| showPageInColumn(option.page, columnIndex); |
| } |
| } |
| |
| function handleSelectVersion(select, event) { |
| var option = select.options[select.selectedIndex]; |
| var version = option.version; |
| if (select.id == "selectVersion_0") { |
| var page = version.get(selectedPage.name); |
| showPage(page); |
| } else { |
| var columnIndex = select.id.split('_')[1]; |
| var pageSelect = $('select_' + columnIndex); |
| var page = pageSelect.options[select.selectedIndex].page; |
| page = version.get(page.name); |
| showPageInColumn(page, columnIndex); |
| } |
| } |
| |
| function handleSelectDetailRow(table, event) { |
| if (event.target.tagName != 'TD') return; |
| var tr = event.target.parentNode; |
| if (tr.tagName != 'TR') return; |
| if (tr.entry === undefined) return; |
| selectEntry(tr.entry, true); |
| } |
| |
| function handleSelectRow(table, event, fromDetail) { |
| if (event.target.tagName != 'TD') return; |
| var tr = event.target.parentNode; |
| if (tr.tagName != 'TR') return; |
| if (tr.entry === undefined) return; |
| selectEntry(tr.entry, false); |
| } |
| |
| function handleSelectBaseline(select, event) { |
| var option = select.options[select.selectedIndex]; |
| baselineVersion = option.version |
| showPage(selectedPage); |
| if (selectedEntry === undefined) return; |
| selectEntry(selectedEntry, true); |
| } |
| |
| function handleUpdatePopover(event) { |
| var popover = $('popover'); |
| popover.style.left = event.pageX + 'px'; |
| popover.style.top = event.pageY + 'px'; |
| popover.style.display = event.shiftKey ? 'block' : 'none'; |
| var target = event.target; |
| while (target.entry === undefined) { |
| target = target.parentNode; |
| if (!target) return; |
| } |
| showPopover(target.entry); |
| } |
| |
| function handleToggleVersionEnable(event) { |
| var version = this.version; |
| if (version === undefined) return; |
| version.enabled = this.checked; |
| initialize(); |
| var page = selectedPage; |
| if (page === undefined || !page.version.enabled) { |
| page = versions.getEnabledPage(page.name); |
| } |
| showPage(page); |
| } |
| |
| // =========================================================================== |
| |
| class Versions { |
| constructor() { |
| this.versions = []; |
| } |
| add(version) { |
| this.versions.push(version) |
| } |
| pageVersions(name) { |
| var result = []; |
| this.versions.forEach((version) => { |
| if (!version.enabled) return; |
| var page = version.get(name); |
| if (page !== undefined) result.push(page); |
| }); |
| return result; |
| } |
| get length() { |
| return this.versions.length |
| } |
| get(index) { |
| return this.versions[index] |
| }; |
| forEach(f) { |
| this.versions.forEach(f); |
| } |
| sort() { |
| this.versions.sort((a, b) => { |
| if (a.name > b.name) return 1; |
| if (a.name < b.name) return -1; |
| return 0 |
| }) |
| } |
| getEnabledPage(name) { |
| for (var i = 0; i < this.versions.length; i++) { |
| var version = this.versions[i]; |
| if (!version.enabled) continue; |
| var page = version.get(name); |
| if (page !== undefined) return page; |
| } |
| } |
| } |
| Versions.fromJSON = function(json) { |
| var versions = new Versions(); |
| for (var version in json) { |
| versions.add(Version.fromJSON(version, json[version])); |
| } |
| versions.sort(); |
| return versions; |
| } |
| |
| class Version { |
| constructor(name) { |
| this.name = name; |
| this.enabled = true; |
| this.pages = []; |
| } |
| add(page) { |
| this.pages.push(page); |
| } |
| indexOf(name) { |
| for (var i = 0; i < this.pages.length; i++) { |
| if (this.pages[i].name == name) return i; |
| } |
| return -1; |
| } |
| get(name) { |
| var index = this.indexOf(name); |
| if (0 <= index) return this.pages[index]; |
| return undefined |
| } |
| get length() { |
| return this.versions.length |
| } |
| getEntry(entry) { |
| if (entry === undefined) return undefined; |
| var page = this.get(entry.page.name); |
| if (page === undefined) return undefined; |
| return page.get(entry.name); |
| } |
| forEachEntry(fun) { |
| this.pages.forEach((page) => { |
| page.forEach(fun); |
| }); |
| } |
| allEntries() { |
| var map = new Map(); |
| this.forEachEntry((group, entry) => { |
| if (!map.has(entry.name)) map.set(entry.name, entry); |
| }); |
| return Array.from(map.values()); |
| } |
| getTotalValue(name, property) { |
| if (name === undefined) name = this.pages[0].total.name; |
| var sum = 0; |
| this.pages.forEach((page) => { |
| var entry = page.get(name); |
| if (entry !== undefined) sum += entry[property]; |
| }); |
| return sum; |
| } |
| getTotalTime(name, showDiff) { |
| return this.getTotalValue(name, showDiff === false ? '_time' : 'time'); |
| } |
| getTotalTimePercent(name, showDiff) { |
| if (baselineVersion === undefined) { |
| // Return the overall average percent of the given entry name. |
| return this.getTotalValue(name, 'time') / |
| this.getTotalTime('Group-Total') * 100; |
| } |
| // Otherwise return the difference to the sum of the baseline version. |
| var baselineValue = baselineVersion.getTotalTime(name, false); |
| return this.getTotalValue(name, '_time') / baselineValue * 100; |
| } |
| getTotalTimeVariance(name, showDiff) { |
| // Calculate the overall error for a given entry name |
| var sum = 0; |
| this.pages.forEach((page) => { |
| var entry = page.get(name); |
| if (entry === undefined) return; |
| sum += entry.timeVariance * entry.timeVariance; |
| }); |
| return Math.sqrt(sum); |
| } |
| getTotalTimeVariancePercent(name, showDiff) { |
| return this.getTotalTimeVariance(name, showDiff) / |
| this.getTotalTime(name, showDiff) * 100; |
| } |
| getTotalCount(name, showDiff) { |
| return this.getTotalValue(name, showDiff === false ? '_count' : 'count'); |
| } |
| getPagesByPercentImpact(name) { |
| var sortedPages = |
| this.pages.filter((each) => { |
| return each.get(name) !== undefined |
| }); |
| sortedPages.sort((a, b) => { |
| return b.get(name).timePercent - a.get(name).timePercent; |
| }); |
| return sortedPages; |
| } |
| sort() { |
| this.pages.sort((a, b) => { |
| if (a.name > b.name) return 1; |
| if (a.name < b.name) return -1; |
| return 0 |
| }) |
| } |
| } |
| Version.fromJSON = function(name, data) { |
| var version = new Version(name); |
| for (var page in data) { |
| version.add(Page.fromJSON(version, page, data[page])); |
| } |
| version.sort(); |
| return version; |
| } |
| |
| |
| class Page { |
| constructor(version, name) { |
| this.name = name; |
| this.total = new GroupedEntry('Total', /.*Total.*/); |
| this.unclassified = new UnclassifiedEntry(this) |
| this.groups = [ |
| this.total, |
| new GroupedEntry('IC', /.*IC.*/), |
| new GroupedEntry('Optimize', |
| /StackGuard|.*Optimize.*|.*Deoptimize.*|Recompile.*/), |
| new GroupedEntry('Compile', /.*Compile.*|Parse.*/), |
| new GroupedEntry('Callback', /.*Callback$/), |
| new GroupedEntry('API', /.*API.*/), |
| new GroupedEntry('GC', /GC|AllocateInTargetSpace/), |
| new GroupedEntry('JavaScript', /JS_Execution/), |
| this.unclassified |
| ]; |
| this.entryDict = new Map(); |
| this.groups.forEach((entry) => { |
| entry.page = this; |
| this.entryDict.set(entry.name, entry); |
| }); |
| this.version = version; |
| } |
| add(entry) { |
| entry.page = this; |
| this.entryDict.set(entry.name, entry); |
| var added = false; |
| this.groups.forEach((group) => { |
| if (!added) added = group.add(entry); |
| }); |
| if (added) return; |
| this.unclassified.push(entry); |
| } |
| get(name) { |
| return this.entryDict.get(name) |
| } |
| getEntry(entry) { |
| if (entry === undefined) return undefined; |
| return this.get(entry.name); |
| } |
| get length() { |
| return this.versions.length |
| } |
| forEachSorted(referencePage, func) { |
| // Iterate over all the entries in the order they appear on the reference page. |
| referencePage.forEach((parent, referenceEntry) => { |
| var entry; |
| if (parent) parent = this.entryDict.get(parent.name); |
| if (referenceEntry) entry = this.entryDict.get(referenceEntry.name); |
| func(parent, entry, referenceEntry); |
| }); |
| } |
| forEach(fun) { |
| this.forEachGroup((group) => { |
| fun(undefined, group); |
| group.forEach((entry) => { |
| fun(group, entry) |
| }); |
| }); |
| } |
| forEachGroup(fun) { |
| this.groups.forEach(fun) |
| } |
| sort() { |
| this.groups.sort((a, b) => { |
| return b.time - a.time; |
| }); |
| this.groups.forEach((group) => { |
| group.sort() |
| }); |
| } |
| } |
| Page.fromJSON = function(version, name, data) { |
| if (name.indexOf('www.') == 0) { |
| name = name.substring(4); |
| } |
| var page = new Page(version, name); |
| for (var i = 0; i < data.length; i++) { |
| page.add(Entry.fromJSON(i, data[data.length - i - 1])); |
| } |
| page.sort(); |
| return page |
| } |
| |
| |
| class Entry { |
| constructor(position, name, time, timeVariance, timeVariancePercent, |
| count, |
| countVariance, countVariancePercent) { |
| this.position = position; |
| this.name = name; |
| this._time = time; |
| this._timeVariance = timeVariance; |
| this._timeVariancePercent = timeVariancePercent; |
| this._count = count; |
| this.countVariance = countVariance; |
| this.countVariancePercent = countVariancePercent; |
| this.page = undefined; |
| this.parent = undefined; |
| } |
| getCompareWithBaseline(value, property) { |
| if (baselineVersion == undefined) return value; |
| var baselineEntry = baselineVersion.getEntry(this); |
| if (!baselineEntry) return value; |
| if (baselineVersion === this.page.version) return value; |
| return value - baselineEntry[property]; |
| } |
| cssClass() { |
| return '' |
| } |
| get time() { |
| return this.getCompareWithBaseline(this._time, '_time'); |
| } |
| get count() { |
| return this.getCompareWithBaseline(this._count, '_count'); |
| } |
| get timePercent() { |
| var value = this._time / this.page.total._time * 100; |
| if (baselineVersion == undefined) return value; |
| var baselineEntry = baselineVersion.getEntry(this); |
| if (!baselineEntry) return value; |
| if (baselineVersion === this.page.version) return value; |
| return (this._time - baselineEntry._time) / this.page.total._time * |
| 100; |
| } |
| get timePercentVariancePercent() { |
| // Get the absolute values for the percentages |
| return this.timeVariance / this.page.total._time * 100; |
| } |
| getTimeImpact(showDiff) { |
| return this.page.version.getTotalTime(this.name, showDiff); |
| } |
| getTimeImpactVariancePercent(showDiff) { |
| return this.page.version.getTotalTimeVariancePercent(this.name, showDiff); |
| } |
| getTimePercentImpact(showDiff) { |
| return this.page.version.getTotalTimePercent(this.name, showDiff); |
| } |
| getCountImpact(showDiff) { |
| return this.page.version.getTotalCount(this.name, showDiff); |
| } |
| getPagesByPercentImpact() { |
| return this.page.version.getPagesByPercentImpact(this.name); |
| } |
| get isGroup() { |
| return false |
| } |
| get timeVariance() { |
| return this._timeVariance |
| } |
| get timeVariancePercent() { |
| return this._timeVariancePercent |
| } |
| } |
| Entry.fromJSON = function(position, data) { |
| return new Entry(position, ...data); |
| } |
| |
| |
| class GroupedEntry extends Entry { |
| constructor(name, regexp) { |
| super(0, 'Group-' + name, 0, 0, 0, 0, 0, 0); |
| this.regexp = regexp; |
| this.entries = []; |
| } |
| add(entry) { |
| if (!entry.name.match(this.regexp)) return false; |
| this._time += entry.time; |
| this._count += entry.count; |
| // TODO: sum up variance |
| this.entries.push(entry); |
| entry.parent = this; |
| return true; |
| } |
| forEach(fun) { |
| if (baselineVersion === undefined) { |
| this.entries.forEach(fun); |
| return; |
| } |
| // If we have a baslineVersion to compare against show also all entries from the |
| // other group. |
| var tmpEntries = baselineVersion.getEntry(this) |
| .entries.filter((entry) => { |
| return this.page.get(entry.name) == undefined |
| }); |
| |
| // The compared entries are sorted by absolute impact. |
| tmpEntries = tmpEntries.map((entry) => { |
| var tmpEntry = new Entry(0, entry.name, 0, 0, 0, 0, 0, 0); |
| tmpEntry.page = this.page; |
| return tmpEntry; |
| }); |
| tmpEntries = tmpEntries.concat(this.entries); |
| tmpEntries.sort((a, b) => { |
| return a.time - b.time |
| }); |
| tmpEntries.forEach(fun); |
| } |
| sort() { |
| this.entries.sort((a, b) => { |
| return b.time - a.time; |
| }); |
| } |
| cssClass() { |
| if (this.page.total == this) return 'total'; |
| return ''; |
| } |
| get isGroup() { |
| return true |
| } |
| getVarianceForProperty(property) { |
| var sum = 0; |
| this.entries.forEach((entry) => { |
| sum += entry[property + 'Variance'] * entry[property + |
| 'Variance']; |
| }); |
| return Math.sqrt(sum); |
| } |
| get timeVariancePercent() { |
| if (this._time == 0) return 0; |
| return this.getVarianceForProperty('time') / this._time * 100 |
| } |
| get timeVariance() { |
| return this.getVarianceForProperty('time') |
| } |
| } |
| |
| class UnclassifiedEntry extends GroupedEntry { |
| constructor(page) { |
| super('Runtime'); |
| this.page = page; |
| this._time = undefined; |
| this._count = undefined; |
| } |
| add(entry) { |
| this.entries.push(entry); |
| entry.parent = this; |
| return true; |
| } |
| forEachPageGroup(fun) { |
| this.page.forEachGroup((group) => { |
| if (group == this) return; |
| if (group == this.page.total) return; |
| fun(group); |
| }); |
| } |
| get time() { |
| if (this._time === undefined) { |
| this._time = this.page.total._time; |
| this.forEachPageGroup((group) => { |
| this._time -= group._time; |
| }); |
| } |
| return this.getCompareWithBaseline(this._time, '_time'); |
| } |
| get count() { |
| if (this._count === undefined) { |
| this._count = this.page.total._count; |
| this.forEachPageGroup((group) => { |
| this._count -= group._count; |
| }); |
| } |
| return this.getCompareWithBaseline(this._count, '_count'); |
| } |
| } |
| </script> |
| </head> |
| |
| <body onmousemove="handleUpdatePopover(event)" onload="handleBodyLoad()"> |
| <h1>Runtime Stats Komparator</h1> |
| |
| <div id="results"> |
| <div class="inline"> |
| <h2>Data</h2> |
| <form name="fileForm"> |
| <p> |
| <input id="uploadInput" type="file" name="files" onchange="handleLoadFile();" accept=".json"> |
| </p> |
| </form> |
| </div> |
| |
| <div class="inline hidden"> |
| <h2>Result</h2> |
| <div class="compareSelector inline"> |
| Compare against: <select id="baseline" onchange="handleSelectBaseline(this, event)"></select><br/> |
| <span style="color: #060">Green</span> the selected version above performs |
| better on this measurement. |
| </div> |
| <div class="versionSelector inline"> |
| Select Versions: |
| <ul></ul> |
| </div> |
| </div> |
| <div id="view"> |
| </div> |
| |
| <div id="detailView" class="hidden"> |
| <h2></h2> |
| <div class="versionDetail inline"> |
| <h3>Version Comparison for <span></span></h3> |
| <table class="versionDetailTable" onclick="handleSelectDetailRow(this, event);"> |
| <thead> |
| <tr> |
| <th class="version">Version </th> |
| <th class="position">Pos. </th> |
| <th class="value time">Time▴ </th> |
| <th class="value time">Percent </th> |
| <th class="value count">Count </th> |
| </tr> |
| </thead> |
| <tbody></tbody> |
| </table> |
| </div> |
| <div class="pageDetail inline"> |
| <h3>Page Comparison for <span></span></h3> |
| <table class="pageDetailTable" onclick="handleSelectDetailRow(this, event);"> |
| <thead> |
| <tr> |
| <th class="page">Page </th> |
| <th class="position">Pos. </th> |
| <th class="value time">Time </th> |
| <th class="value time">Percent▾ </th> |
| <th class="value count">Count </th> |
| </tr> |
| </thead> |
| <tfoot> |
| <tr> |
| <td class="page">Total:</td> |
| <td class="position"></td> |
| <td class="value time"></td> |
| <td class="value time"></td> |
| <td class="value count"></td> |
| </tr> |
| </tfoot> |
| <tbody></tbody> |
| </table> |
| </div> |
| <div class="impactView inline"> |
| <h3>Impact list for <span></span></h3> |
| <table class="pageDetailTable" onclick="handleSelectDetailRow(this, event);"> |
| <thead> |
| <tr> |
| <th class="page">Name </th> |
| <th class="value time">Time </th> |
| <th class="value time">Percent▾ </th> |
| <th class="">Top Pages</th> |
| </tr> |
| </thead> |
| <tbody></tbody> |
| </table> |
| </div> |
| </div> |
| <div id="pageGraphs" class="hidden"> |
| </div> |
| |
| <div id="column" class="column"> |
| <div class="header"> |
| <select class="version" onchange="handleSelectVersion(this, event);"></select> |
| <select class="pageVersion" onchange="handleSelectPage(this, event);"></select> |
| </div> |
| <table class="list" onclick="handleSelectRow(this, event);"> |
| <thead> |
| <tr> |
| <th class="position">Pos. </th> |
| <th class="name">Name </th> |
| <th class="value time">Time </th> |
| <th class="value time">Percent </th> |
| <th class="value count">Count </th> |
| </tr> |
| </thead> |
| <tbody></tbody> |
| </table> |
| </div> |
| </div> |
| |
| <div class="inline"> |
| <h2>Usage</h2> |
| <ol> |
| <li>Install scipy, e.g. <code>sudo aptitude install python-scipy</code> |
| <li>Build chrome with the <a href="https://codereview.chromium.org/1923893002">extended runtime callstats</a>.</li> |
| <li>Run <code>callstats.py</code> with a web-page-replay archive: |
| <pre>$V8_DIR/tools/callstats.py run \ |
| --replay-bin=$CHROME_SRC/third_party/webpagereplay/replay.py \ |
| --replay-wpr=$INPUT_DIR/top25.wpr \ |
| --js-flags="" \ |
| --with-chrome=$CHROME_SRC/out/Release/chrome \ |
| --sites-file=$INPUT_DIR/top25.json</pre> |
| </li> |
| <li>Move results file to a subdirectory: <code>mkdir $VERSION_DIR; mv *.txt $VERSION_DIR</code></li> |
| <li>Repeat from step 1 with a different configuration (e.g. <code>--js-flags="--nolazy"</code>).</li> |
| <li>Create the final results file: <code>./callstats.py json $VERSION_DIR1 $VERSION_DIR2 > result.json</code></li> |
| <li>Use <code>results.json</code> on this site.</code> |
| </ol> |
| </div> |
| |
| <div id="popover"> |
| <div class="popoverArrow"></div> |
| <table> |
| <tr> |
| <td class="name" colspan="6"></td> |
| </tr> |
| <tr> |
| <td>Page:</td> |
| <td class="page name" colspan="6"></td> |
| </tr> |
| <tr> |
| <td>Version:</td> |
| <td class="version name" colspan="3"></td> |
| <td class="compare version name" colspan="3"></td> |
| </tr> |
| <tr> |
| <td>Time:</td> |
| <td class="time"></td><td>±</td><td class="timeVariance"></td> |
| <td class="compare time"></td><td class="compare"> ± </td><td class="compare timeVariance"></td> |
| </tr> |
| <tr> |
| <td>Percent:</td> |
| <td class="percent"></td><td>±</td><td class="percentVariance"></td> |
| <td class="compare percent"></td><td class="compare"> ± </td><td class="compare percentVariance"></td> |
| </tr> |
| <tr> |
| <td>Count:</td> |
| <td class="count"></td><td>±</td><td class="countVariance"></td> |
| <td class="compare count"></td><td class="compare"> ± </td><td class="compare countVariance"></td> |
| </tr> |
| <tr> |
| <td>Overall Impact:</td> |
| <td class="timeImpact"></td><td>±</td><td class="timePercentImpact"></td> |
| <td class="compare timeImpact"></td><td class="compare"> ± </td><td class="compare timePercentImpact"></td> |
| </tr> |
| </table> |
| </div> |
| |
| </body> |
| |
| </html> |