<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; } .codeSearch { display: block-inline; float: right; border-radius: 5px; background-color: #EEE; width: 1em; text-align: center; } .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; } .graph, .graph .content { width: 100%; } .diff .hideDiff { display: none; } .noDiff .hideNoDiff { display: none; } </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 pages; 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.forEachPage((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); }); initializeToggleList(versions.versions, $('versionSelector')); initializeToggleList(pages.values(), $('pageSelector')); initializeToggleContentVisibility(); } function initializeToggleList(items, node) { var list = node.querySelector('ul'); removeAllChildren(list); items = Array.from(items); items.sort(NameComparator); items.forEach((item) => { var li = document.createElement('li'); var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.checked = item.enabled; checkbox.item = item; checkbox.addEventListener('click', handleToggleVersionEnable); li.appendChild(checkbox); li.appendChild(document.createTextNode(item.name)); list.appendChild(li); }); $('results').querySelectorAll('#results > .hidden').forEach((node) => { toggleCssClass(node, 'hidden', false); }) } function initializeToggleContentVisibility() { var nodes = document.querySelectorAll('.toggleContentVisibility'); nodes.forEach((node) => { var content = node.querySelector('.content'); var header = node.querySelector('h1,h2,h3'); if (content === undefined || header === undefined) return; if (header.querySelector('input') != undefined) return; var checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.checked = content.className.indexOf('hidden') == -1; checkbox.contentNode = content; checkbox.addEventListener('click', handleToggleContentVisibility); header.insertBefore(checkbox, header.childNodes[0]); }); } 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.getPageVersions(firstPage); 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'); } addCodeSearchButton(entry, 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 = new Entry(0, referenceEntry.name); tr.entry.page = page; 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 = 0; 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) { showVersionDetails(entry); showPageDetails(entry); showImpactList(entry.page); showGraphs(entry.page); } function showVersionDetails(entry) { var table, tbody, entries; table = $('detailView').querySelector('.versionDetailTable'); tbody = document.createElement('tbody'); if (entry !== undefined) { $('detailView').querySelector('.versionDetail h3 span').innerHTML = entry.name + ' in ' + entry.page.name; entries = versions.getPageVersions(entry.page).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; var isBaselineEntry = pageEntry.page.version == baselineVersion; td(tr, pageEntry.page.version.name, 'version'); td(tr, ms(pageEntry.time, !isBaselineEntry), 'value time'); td(tr, percent(pageEntry.timePercent, !isBaselineEntry), 'value time'); td(tr, count(pageEntry.count, !isBaselineEntry), 'value count'); tbody.appendChild(tr); }); } table.replaceChild(tbody, table.querySelector('tbody')); } function showPageDetails(entry) { var table, tbody, entries; table = $('detailView').querySelector('.pageDetailTable'); tbody = document.createElement('tbody'); if (entry === undefined) { table.replaceChild(tbody, table.querySelector('tbody')); return; } var version = entry.page.version; var showDiff = version !== baselineVersion; $('detailView').querySelector('.pageDetail h3 span').innerHTML = version.name; entries = version.pages.map((page) => { if (!page.enabled) return; 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, ms(pageEntry.time, showDiff), 'value time'); td(tr, percent(pageEntry.timePercent, showDiff), 'value time'); td(tr, percent(pageEntry.timePercentPerEntry, showDiff), 'value time hideNoDiff'); td(tr, count(pageEntry.count, showDiff), 'value count'); tbody.appendChild(tr); }); // show the total for all pages var tds = table.querySelectorAll('tfoot td'); tds[1].innerHTML = ms(entry.getTimeImpact(), showDiff); // Only show the percentage total if we are in diff mode: tds[2].innerHTML = percent(entry.getTimePercentImpact(), showDiff); tds[3].innerHTML = ''; tds[4].innerHTML = count(entry.getCountImpact(), showDiff); table.replaceChild(tbody, table.querySelector('tbody')); } 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')); } function showGraphs(page) { var groups = page.groups.slice(); // Sort groups by the biggest impact groups.sort((a, b) => { return b.getTimeImpact() - a.getTimeImpact(); }); if (selectedGroup == undefined) { selectedGroup = groups[0]; } else { groups = groups.filter(each => each.name != selectedGroup.name); groups.unshift(selectedGroup); } showPageGraph(groups, page); showVersionGraph(groups, page); showPageVersionGraph(groups, page); } function getGraphDataTable(groups) { var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string', 'Name'); groups.forEach(group => { var column = dataTable.addColumn('number', group.name.substring(6)); dataTable.setColumnProperty(column, 'group', group); }); return dataTable; } var selectedGroup; function showPageGraph(groups, page) { var isDiffView = baselineVersion !== undefined; var dataTable = getGraphDataTable(groups); // Calculate the average row var row = ['Average']; groups.forEach((group) => { if (isDiffView) { row.push(group.isTotal ? 0 : group.getAverageTimeImpact()); } else { row.push(group.isTotal ? 0 : group.getTimeImpact()); } }); dataTable.addRow(row); // Sort the pages by the selected group. var pages = page.version.pages.filter(page => page.enabled); function sumDiff(page) { var sum = 0; groups.forEach(group => { var value = group.getTimePercentImpact() - page.getEntry(group).timePercent; sum += value * value; }); return sum; } if (isDiffView) { pages.sort((a, b) => { return b.getEntry(selectedGroup).time- a.getEntry(selectedGroup).time; }); } else { pages.sort((a, b) => { return b.getEntry(selectedGroup).timePercent - a.getEntry(selectedGroup).timePercent; }); } // Sort by sum of squared distance to the average. // pages.sort((a, b) => { // return a.distanceFromTotalPercent() - b.distanceFromTotalPercent(); // }); // Calculate the entries for the pages pages.forEach((page) => { row = [page.name]; groups.forEach((group) => { row.push(group.isTotal ? 0 : page.getEntry(group).time); }); var rowIndex = dataTable.addRow(row); dataTable.setRowProperty(rowIndex, 'page', page); }); renderGraph('Pages for ' + page.version.name, groups, dataTable, 'pageGraph', isDiffView ? true : 'percent'); } function showVersionGraph(groups, page) { var dataTable = getGraphDataTable(groups); var row; var vs = versions.versions.filter(version => version.enabled); vs.sort((a, b) => { return b.getEntry(selectedGroup).getTimeImpact() - a.getEntry(selectedGroup).getTimeImpact(); }); // Calculate the entries for the versions vs.forEach((version) => { row = [version.name]; groups.forEach((group) => { row.push(group.isTotal ? 0 : version.getEntry(group).getTimeImpact()); }); var rowIndex = dataTable.addRow(row); dataTable.setRowProperty(rowIndex, 'page', page); }); renderGraph('Versions Total Time over all Pages', groups, dataTable, 'versionGraph', true); } function showPageVersionGraph(groups, page) { var dataTable = getGraphDataTable(groups); var row; var vs = versions.getPageVersions(page); vs.sort((a, b) => { return b.getEntry(selectedGroup).time - a.getEntry(selectedGroup).time; }); // Calculate the entries for the versions vs.forEach((page) => { row = [page.version.name]; groups.forEach((group) => { row.push(group.isTotal ? 0 : page.getEntry(group).time); }); var rowIndex = dataTable.addRow(row); dataTable.setRowProperty(rowIndex, 'page', page); }); renderGraph('Versions for ' + page.name, groups, dataTable, 'pageVersionGraph', true); } function renderGraph(title, groups, dataTable, id, isStacked) { var isDiffView = baselineVersion !== undefined; var formatter = new google.visualization.NumberFormat({ suffix: (isDiffView ? 'msΔ' : 'ms'), negativeColor: 'red', groupingSymbol: "'" }); for (var i = 1; i < dataTable.getNumberOfColumns(); i++) { formatter.format(dataTable, i); } var height = 85 + 28 * dataTable.getNumberOfRows(); var options = { isStacked: isStacked, height: height, hAxis: { minValue: 0, }, animation:{ duration: 500, easing: 'out', }, vAxis: { }, explorer: { actions: ['dragToZoom', 'rightClickToReset'], maxZoomIn: 0.01 }, legend: {position:'top', textStyle:{fontSize: '16px'}}, chartArea: {left:200, top:50, width:'98%', height:'80%'}, colors: groups.map(each => each.color) }; var parentNode = $(id); parentNode.querySelector('h2>span, h3>span').innerHTML = title; var graphNode = parentNode.querySelector('.content'); var chart = graphNode.chart; if (chart === undefined) { chart = graphNode.chart = new google.visualization.BarChart(graphNode); } else { google.visualization.events.removeAllListeners(chart); } google.visualization.events.addListener(chart, 'select', selectHandler); function getChartEntry(selection) { if (!selection) return undefined; var column = selection.column; if (column == undefined) return undefined; var selectedGroup = dataTable.getColumnProperty(column, 'group'); var row = selection.row; if (row == null) return selectedGroup; var page = dataTable.getRowProperty(row, 'page'); if (!page) return selectedGroup; return page.getEntry(selectedGroup); } function selectHandler() { selectedGroup = getChartEntry(chart.getSelection()[0]) if (!selectedGroup) return; selectEntry(selectedGroup, true); } // Make our global tooltips work google.visualization.events.addListener(chart, 'onmouseover', mouseOverHandler); function mouseOverHandler(selection) { graphNode.entry = getChartEntry(selection); } chart.draw(dataTable, options); } 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('.percentPerEntry').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('.percentPerEntry').innerHTML = percent(entry.timePercentPerEntry, 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); } } </script> <script type="text/javascript"> "use strict" // ========================================================================= // 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 addCodeSearchButton(entry, node) { if (entry.isGroup) return; var button = document.createElement("div"); button.innerHTML = '?' button.className = "codeSearch" button.addEventListener('click', handleCodeSearch); node.appendChild(button); return node; } 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 NameComparator(a, b) { if (a.name > b.name) return 1; if (a.name < b.name) return -1; return 0 } function diffSign(value, digits, unit, showDiff) { if (showDiff === false || baselineVersion == undefined) { if (value === undefined) return ''; 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); } </script> <script type="text/javascript"> "use strict" // ========================================================================= // 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) { pages = new Pages(); 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[pageSelect.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; var showingDiff = baselineVersion !== undefined; var body = $('body'); toggleCssClass(body, 'diff', showingDiff); toggleCssClass(body, 'noDiff', !showingDiff); showPage(selectedPage); if (selectedEntry === undefined) return; selectEntry(selectedEntry, true); } function findEntry(event) { var target = event.target; while (target.entry === undefined) { target = target.parentNode; if (!target) return undefined; } return target.entry; } function handleUpdatePopover(event) { var popover = $('popover'); popover.style.left = event.pageX + 'px'; popover.style.top = event.pageY + 'px'; popover.style.display = 'none'; popover.style.display = event.shiftKey ? 'block' : 'none'; var entry = findEntry(event); if (entry === undefined) return; showPopover(entry); } function handleToggleVersionEnable(event) { var item = this.item ; if (item === undefined) return; item .enabled = this.checked; initialize(); var page = selectedPage; if (page === undefined || !page.version.enabled) { page = versions.getEnabledPage(page.name); } showPage(page); } function handleToggleContentVisibility(event) { var content = event.target.contentNode; toggleCssClass(content, 'hidden'); } function handleCodeSearch(event) { var entry = findEntry(event); if (entry === undefined) return; var url = "https://cs.chromium.org/search/?sq=package:chromium&type=cs&q="; name = entry.name; if (name.startsWith("API_")) { name = name.substring(4); } url += encodeURIComponent(name) + "+file:src/v8/src"; window.open(url,'_blank'); } </script> <script type="text/javascript"> "use strict" // ========================================================================= class Versions { constructor() { this.versions = []; } add(version) { this.versions.push(version) } getPageVersions(page) { var result = []; this.versions.forEach((version) => { if (!version.enabled) return; var versionPage = version.get(page.name); if (versionPage !== undefined) result.push(versionPage); }); return result; } get length() { return this.versions.length } get(index) { return this.versions[index] }; forEach(f) { this.versions.forEach(f); } sort() { this.versions.sort(NameComparator); } 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.forEachPage((page) => { page.forEach(fun); }); } forEachPage(fun) { this.pages.forEach((page) => { if (!page.enabled) return; fun(page); }) } 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.forEachPage((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 || showDiff === false) { // 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); var total = this.getTotalValue(name, '_time'); return (total / baselineValue - 1) * 100; } getTotalTimeVariance(name, showDiff) { // Calculate the overall error for a given entry name var sum = 0; this.forEachPage((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'); } getAverageTimeImpact(name, showDiff) { return this.getTotalTime(name, showDiff) / this.pages.length; } 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(NameComparator) } } Version.fromJSON = function(name, data) { var version = new Version(name); for (var pageName in data) { version.add(PageVersion.fromJSON(version, pageName, data[pageName])); } version.sort(); return version; } class Pages extends Map { get(name) { if (name.indexOf('www.') == 0) { name = name.substring(4); } if (!this.has(name)) { this.set(name, new Page(name)); } return super.get(name); } } class Page { constructor(name) { this.name = name; this.enabled = true; this.versions = []; } add(page) { this.versions.push(page); } } class PageVersion { constructor(version, page) { this.page = page; this.page.add(this); this.total = new GroupedEntry('Total', /.*Total.*/, '#BBB'); this.total.isTotal = true; this.unclassified = new UnclassifiedEntry(this, "#000") this.groups = [ this.total, new GroupedEntry('IC', /.*IC.*/, "#3366CC"), new GroupedEntry('Optimize', /StackGuard|.*Optimize.*|.*Deoptimize.*|Recompile.*/, "#DC3912"), new GroupedEntry('Compile', /.*Compile.*/, "#FFAA00"), new GroupedEntry('Parse', /.*Parse.*/, "#FF6600"), new GroupedEntry('Callback', /.*Callback$/, "#109618"), new GroupedEntry('API', /.*API.*/, "#990099"), new GroupedEntry('GC', /GC|AllocateInTargetSpace/, "#0099C6"), new GroupedEntry('JavaScript', /JS_Execution/, "#DD4477"), new GroupedEntry('Runtime', /.*/, "#88BB00"), 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 } get name() { return this.page.name } get enabled() { return this.page.enabled } 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() }); } distanceFromTotalPercent() { var sum = 0; this.groups.forEach(group => { if (group == this.total) return; var value = group.getTimePercentImpact() - this.getEntry(group).timePercent; sum += value * value; }); return sum; } } PageVersion.fromJSON = function(version, name, data) { var page = new PageVersion(version, pages.get(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; this.isTotal = false; } 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 timePercentPerEntry() { 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 - 1) * 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); } getAverageTimeImpact(showDiff) { return this.page.version.getAverageTimeImpact(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, color) { super(0, 'Group-' + name, 0, 0, 0, 0, 0, 0); this.regexp = regexp; this.color = color; 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, color) { super('Unclassified', undefined, color); 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 id="body" onmousemove="handleUpdatePopover(event)" onload="handleBodyLoad()" class="noDiff"> <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> <div id="versionSelector" class="inline toggleContentVisibility"> <h2>Version Selector</h2> <div class="content hidden"> <ul></ul> </div> </div> <div id="pageSelector" class="inline toggleContentVisibility"> <h2>Page Selector</h2> <div class="content hidden"> <ul></ul> </div> </div> <div id="view"> </div> <div id="detailView" class="hidden"> <div class="versionDetail inline toggleContentVisibility"> <h3><span></span></h3> <div class="content"> <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> <div class="pageDetail inline toggleContentVisibility"> <h3>Page Comparison for <span></span></h3> <div class="content"> <table class="pageDetailTable" onclick="handleSelectDetailRow(this, event);"> <thead> <tr> <th class="page">Page </th> <th class="value time">Time </th> <th class="value time">Percent▾ </th> <th class="value time hideNoDiff">%/Entry </th> <th class="value count">Count </th> </tr> </thead> <tfoot> <tr> <td class="page">Total:</td> <td class="value time"></td> <td class="value time"></td> <td class="value time hideNoDiff"></td> <td class="value count"></td> </tr> </tfoot> <tbody></tbody> </table> </div> </div> <div class="impactView inline toggleContentVisibility"> <h3>Impact list for <span></span></h3> <div class="content"> <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> <div id="pageVersionGraph" class="graph hidden toggleContentVisibility"> <h3><span></span></h3> <div class="content"></div> </div> <div id="pageGraph" class="graph hidden toggleContentVisibility"> <h3><span></span></h3> <div class="content"></div> </div> <div id="versionGraph" class="graph hidden toggleContentVisibility"> <h3><span></span></h3> <div class="content"></div> </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.</li> <li>Check out a known working version of webpagereply: <pre>git -C $CHROME_DIR/third_party/webpagereplay checkout 7dbd94752d1cde5536ffc623a9e10a51721eff1d</pre> </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>Percent per Entry:</td> <td class="percentPerEntry"></td><td colspan=2></td> <td class="compare percentPerEntry"></td><td colspan=2></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>