| <!DOCTYPE html> | |
| <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"> | |
| <title>V8 Runtime Stats Komparator</title> | |
| <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 src="https://www.gstatic.com/charts/loader.js"></script> | |
| <script> | |
| "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; | |
| // Marker to programatically replace the defaultData. | |
| var defaultData = /*default-data-start*/undefined/*default-data-end*/; | |
| function initialize() { | |
| // Initialize the stats table and toggle lists. | |
| 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')); | |
| initializeToggleList(Group.groups.values(), $('groupSelector')); | |
| 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', handleToggleVersionOrPageEnable); | |
| 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]); | |
| }); | |
| } | |
| window.addEventListener('popstate', (event) => { | |
| popHistoryState(event.state); | |
| }); | |
| function popHistoryState(state) { | |
| if (!state.version) return false; | |
| if (!versions) return false; | |
| var version = versions.getByName(state.version); | |
| if (!version) return false; | |
| var page = version.get(state.page); | |
| if (!page) return false; | |
| if (!state.entry) { | |
| showEntry(page.total); | |
| } else { | |
| var entry = page.get(state.entry); | |
| if (!entry) { | |
| showEntry(page.total); | |
| } else { | |
| showEntry(entry); | |
| } | |
| } | |
| return true; | |
| } | |
| function pushHistoryState() { | |
| var selection = selectedEntry ? selectedEntry : selectedPage; | |
| if (!selection) return; | |
| var state = selection.urlParams(); | |
| // Don't push a history state if it didn't change. | |
| if (JSON.stringify(window.history.state) === JSON.stringify(state)) return; | |
| var params = "?"; | |
| for (var pairs of Object.entries(state)) { | |
| params += encodeURIComponent(pairs[0]) + "=" | |
| + encodeURIComponent(pairs[1]) + "&"; | |
| } | |
| window.history.pushState(state, selection.toString(), params); | |
| } | |
| function showSelectedEntryInPage(page) { | |
| if (!selectedEntry) return showPage(page); | |
| var entry = page.get(selectedEntry.name); | |
| if (!entry) return showPage(page); | |
| selectEntry(entry); | |
| } | |
| 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)); | |
| } | |
| showImpactList(selectedPage); | |
| pushHistoryState(); | |
| } | |
| 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) => { | |
| 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, referenceEntry.name, '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 showEntry(entry) { | |
| selectEntry(entry, true); | |
| } | |
| function selectEntry(entry, updateSelectedPage) { | |
| var needsPageSwitch = true; | |
| if (updateSelectedPage && selectedPage) { | |
| entry = selectedPage.version.getEntry(entry); | |
| needsPageSwitch = updateSelectedPage && entry.page != selectedPage; | |
| } | |
| var rowIndex = 0; | |
| // 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 !== undefined && | |
| 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 && selectedEntry) { | |
| entry = selectedEntry.page.version.getEntry(entry); | |
| } | |
| if (entry !== selectedEntry) { | |
| selectedEntry = entry; | |
| showEntryDetail(entry); | |
| } | |
| } | |
| function showEntryDetail(entry) { | |
| showVersionDetails(entry); | |
| showPageDetails(entry); | |
| showImpactList(entry.page); | |
| showGraphs(entry.page); | |
| pushHistoryState(); | |
| } | |
| function showVersionDetails(entry) { | |
| var table, tbody, entries; | |
| table = $('detailView').querySelector('.versionDetailTable'); | |
| tbody = document.createElement('tbody'); | |
| if (entry !== undefined) { | |
| $('detailView').querySelector('.versionDetail h3 span').textContent = | |
| 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').textContent = | |
| 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].textContent = ms(entry.getTimeImpact(), showDiff); | |
| // Only show the percentage total if we are in diff mode: | |
| tds[2].textContent = percent(entry.getTimePercentImpact(), showDiff); | |
| tds[3].textContent = ''; | |
| tds[4].textContent = count(entry.getCountImpact(), showDiff); | |
| table.replaceChild(tbody, table.querySelector('tbody')); | |
| } | |
| function showImpactList(page) { | |
| var impactView = $('detailView').querySelector('.impactView'); | |
| impactView.querySelector('h3 span').textContent = 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').textContent += " " + 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.01; | |
| }); | |
| entries = entries.slice(0, 50); | |
| 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.filter(each => each.enabled); | |
| // 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, | |
| textStyle: { fontSize: 14 } | |
| }, | |
| animation:{ | |
| duration: dataTable.getNumberOfRows() > 50 ? 0 : 500 , | |
| easing: 'out', | |
| }, | |
| vAxis: { | |
| textStyle: { fontSize: 14 } | |
| }, | |
| tooltip: { textStyle: { fontSize: 14 }}, | |
| explorer: { | |
| actions: ['dragToZoom', 'rightClickToReset'], | |
| maxZoomIn: 0.01 | |
| }, | |
| legend: {position:'top', maxLines: 1, textStyle: { fontSize: 14 }}, | |
| chartArea: {left:200, top:50, width:'98%', height:'80%'}, | |
| colors: groups.map(each => each.color) | |
| }; | |
| var parentNode = $(id); | |
| parentNode.querySelector('h2>span, h3>span').textContent = 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').textContent = entry.name; | |
| popover.querySelector('td.page').textContent = 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').textContent = baselineVersion.name; | |
| node('.time').textContent = '-'; | |
| node('.timeVariance').textContent = '-'; | |
| node('.percent').textContent = '-'; | |
| node('.percentPerEntry').textContent = '-'; | |
| node('.percentVariance').textContent = '-'; | |
| node('.count').textContent = '-'; | |
| node('.countVariance').textContent = '-'; | |
| node('.timeImpact').textContent = '-'; | |
| node('.timePercentImpact').textContent = '-'; | |
| } else { | |
| node('.version').textContent = entry.page.version.name; | |
| node('.time').textContent = ms(entry._time, false); | |
| node('.timeVariance').textContent | |
| = percent(entry.timeVariancePercent, false); | |
| node('.percent').textContent = percent(entry.timePercent, false); | |
| node('.percentPerEntry').textContent | |
| = percent(entry.timePercentPerEntry, false); | |
| node('.percentVariance').textContent | |
| = percent(entry.timePercentVariancePercent, false); | |
| node('.count').textContent = count(entry._count, false); | |
| node('.countVariance').textContent | |
| = percent(entry.timeVariancePercent, false); | |
| node('.timeImpact').textContent | |
| = ms(entry.getTimeImpact(false), false); | |
| node('.timePercentImpact').textContent | |
| = percent(entry.getTimeImpactVariancePercent(false), false); | |
| } | |
| } | |
| </script> | |
| <script> | |
| "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.textContent = '?' | |
| button.className = "codeSearch" | |
| button.addEventListener('click', handleCodeSearch); | |
| node.appendChild(button); | |
| return node; | |
| } | |
| function td(tr, content, className) { | |
| var td = document.createElement("td"); | |
| if (content[0] == '<') { | |
| td.innerHTML = content; | |
| } else { | |
| td.textContent = 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> | |
| "use strict" | |
| // ========================================================================= | |
| // EventHandlers | |
| function handleBodyLoad() { | |
| $('uploadInput').focus(); | |
| if (defaultData) { | |
| handleLoadJSON(defaultData); | |
| } else if (window.location.protocol !== 'file:') { | |
| tryLoadDefaultResults(); | |
| } | |
| } | |
| function tryLoadDefaultResults() { | |
| // Try to load a results.json file adjacent to this day. | |
| var xhr = new XMLHttpRequest(); | |
| // The markers on the following line can be used to replace the url easily | |
| // with scripts. | |
| xhr.open('GET', /*results-url-start*/'results.json'/*results-url-end*/, true); | |
| xhr.onreadystatechange = function(e) { | |
| if(this.readyState !== XMLHttpRequest.DONE || this.status !== 200) return; | |
| handleLoadText(this.responseText); | |
| }; | |
| xhr.send(); | |
| } | |
| function handleAppendFile() { | |
| var files = document.getElementById("appendInput").files; | |
| loadFiles(files, true); | |
| } | |
| function handleLoadFile() { | |
| var files = document.getElementById("uploadInput").files; | |
| loadFiles(files, false) | |
| } | |
| function loadFiles(files, append) { | |
| var file = files[0]; | |
| var reader = new FileReader(); | |
| reader.onload = function(evt) { | |
| handleLoadText(this.result, append); | |
| } | |
| reader.readAsText(file); | |
| } | |
| function handleLoadText(text, append) { | |
| handleLoadJSON(JSON.parse(text), append); | |
| } | |
| function getStateFromParams() { | |
| var query = window.location.search.substr(1); | |
| var result = {}; | |
| query.split("&").forEach((part) => { | |
| var item = part.split("="); | |
| var key = decodeURIComponent(item[0]) | |
| result[key] = decodeURIComponent(item[1]); | |
| }); | |
| return result; | |
| } | |
| function handleLoadJSON(json, append) { | |
| let isFirstLoad = pages === undefined; | |
| json = fixClusterTelemetryResults(json); | |
| json = fixSinglePageJSON(json); | |
| if (append && !isFirstLoad) { | |
| json = createUniqueVersions(json) | |
| } | |
| var state = getStateFromParams(); | |
| if (!append || isFirstLoad) { | |
| pages = new Pages(); | |
| versions = Versions.fromJSON(json); | |
| } else { | |
| Versions.fromJSON(json).forEach(e => versions.add(e)) | |
| } | |
| initialize() | |
| if (isFirstLoad && !popHistoryState(state)) { | |
| showEntry(selectedPage.total); | |
| } | |
| } | |
| function fixClusterTelemetryResults(json) { | |
| // Convert CT results to callstats compatible JSON | |
| // Input: | |
| // { PATH: { "pairs": { METRIC: { "count": XX, "time": XX }.. }}.. } | |
| let firstEntry; | |
| for (let key in json) { | |
| firstEntry = json[key]; | |
| break; | |
| } | |
| // Return the original JSON if it is not a CT result. | |
| if (firstEntry.pairs === undefined) return json; | |
| // The results include already the group totals, remove them by filtering. | |
| let groupNames = new Set(Array.from(Group.groups.values()).map(e => e.name)); | |
| let result = Object.create(null); | |
| for (let file_name in json) { | |
| let entries = []; | |
| let file_data = json[file_name].pairs; | |
| for (let name in file_data) { | |
| if(name != "Total" && groupNames.has(name)) continue; | |
| let entry = file_data[name]; | |
| let count = entry.count; | |
| let time = entry.time; | |
| entries.push([name, time, 0, 0, count, 0, 0]); | |
| } | |
| let domain = file_name.split("/").slice(-1)[0]; | |
| result[domain] = entries; | |
| } | |
| return {__proto__:null, ClusterTelemetry: result}; | |
| } | |
| function fixSinglePageJSON(json) { | |
| // Try to detect the single-version case, where we're missing the toplevel | |
| // version object. The incoming JSON is of the form: | |
| // {"Page 1": [... data points ... ], "Page 2": [...], ...} | |
| // Instead of the default multi-page JSON: | |
| // {"Version 1": { "Page 1": ..., ...}, "Version 2": {...}, ...} | |
| // In this case insert a single "Default" version as top-level entry. | |
| var firstProperty = (object) => { | |
| for (var key in object) return key; | |
| }; | |
| var maybePage = json[firstProperty(json)]; | |
| if (!Array.isArray(maybePage)) return json; | |
| return {"Default": json} | |
| } | |
| var appendIndex = 0; | |
| function createUniqueVersions(json) { | |
| // Make sure all toplevel entries are unique namaes and added properly | |
| appendIndex++; | |
| let result = {__proto__:null} | |
| for (let key in json) { | |
| result[key+"_"+appendIndex] = json[key]; | |
| } | |
| return result | |
| } | |
| 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") { | |
| showSelectedEntryInPage(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); | |
| showSelectedEntryInPage(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 handleToggleVersionOrPageEnable(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); | |
| } | |
| if (!page.enabled) { | |
| page = page.getNextPage(); | |
| } | |
| 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> | |
| "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] | |
| } | |
| getByName(name) { | |
| return this.versions.find((each) => each.name == name); | |
| } | |
| 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; | |
| } | |
| getNextPage(page) { | |
| if (this.length == 0) return undefined; | |
| return this.pages[(this.indexOf(page.name) + 1) % this.length]; | |
| } | |
| get(name) { | |
| var index = this.indexOf(name); | |
| if (0 <= index) return this.pages[index]; | |
| return undefined | |
| } | |
| get length() { | |
| return this.pages.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 = Group.groups.get('total').entry(); | |
| this.total.isTotal = true; | |
| this.unclassified = new UnclassifiedEntry(this) | |
| this.groups = [ | |
| this.total, | |
| Group.groups.get('ic').entry(), | |
| Group.groups.get('optimize-background').entry(), | |
| Group.groups.get('optimize').entry(), | |
| Group.groups.get('compile-background').entry(), | |
| Group.groups.get('compile').entry(), | |
| Group.groups.get('parse-background').entry(), | |
| Group.groups.get('parse').entry(), | |
| Group.groups.get('callback').entry(), | |
| Group.groups.get('api').entry(), | |
| Group.groups.get('gc').entry(), | |
| Group.groups.get('javascript').entry(), | |
| Group.groups.get('runtime').entry(), | |
| this.unclassified | |
| ]; | |
| this.entryDict = new Map(); | |
| this.groups.forEach((entry) => { | |
| entry.page = this; | |
| this.entryDict.set(entry.name, entry); | |
| }); | |
| this.version = version; | |
| } | |
| toString() { | |
| return this.version.name + ": " + this.name; | |
| } | |
| urlParams() { | |
| return { version: this.version.name, page: this.name}; | |
| } | |
| add(entry) { | |
| // Ignore accidentally added Group entries. | |
| if (entry.name.startsWith(GroupedEntry.prefix)) return; | |
| 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; | |
| } | |
| getNextPage() { | |
| return this.version.getNextPage(this); | |
| } | |
| } | |
| 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; | |
| } | |
| urlParams() { | |
| var params = this.page.urlParams(); | |
| params.entry = this.name; | |
| return params; | |
| } | |
| 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 Group { | |
| constructor(name, regexp, color) { | |
| this.name = name; | |
| this.regexp = regexp; | |
| this.color = color; | |
| this.enabled = true; | |
| } | |
| entry() { return new GroupedEntry(this) }; | |
| } | |
| Group.groups = new Map(); | |
| Group.add = function(name, group) { | |
| this.groups.set(name, group); | |
| return group; | |
| } | |
| Group.add('total', new Group('Total', /.*Total.*/, '#BBB')); | |
| Group.add('ic', new Group('IC', /.*IC_.*/, "#3366CC")); | |
| Group.add('optimize-background', new Group('Optimize-Background', | |
| /(.*OptimizeConcurrent.*)|RecompileConcurrent.*/, "#702000")); | |
| Group.add('optimize', new Group('Optimize', | |
| /StackGuard|.*Optimize.*|.*Deoptimize.*|Recompile.*/, "#DC3912")); | |
| Group.add('compile-background', new Group('Compile-Background', | |
| /(.*CompileBackground.*)/, "#b08000")); | |
| Group.add('compile', new Group('Compile', | |
| /(^Compile.*)|(.*_Compile.*)/, "#FFAA00")); | |
| Group.add('parse-background', | |
| new Group('Parse-Background', /.*ParseBackground.*/, "#c05000")); | |
| Group.add('parse', new Group('Parse', /.*Parse.*/, "#FF6600")); | |
| Group.add('callback', new Group('Blink C++', /.*Callback.*/, "#109618")); | |
| Group.add('api', new Group('API', /.*API.*/, "#990099")); | |
| Group.add('gc-custom', new Group('GC-Custom', /GC_Custom_.*/, "#0099C6")); | |
| Group.add('gc-background', | |
| new Group('GC-Background', /.*GC.*BACKGROUND.*/, "#00597c")); | |
| Group.add('gc', new Group('GC', /GC_.*|AllocateInTargetSpace/, "#00799c")); | |
| Group.add('javascript', new Group('JavaScript', /JS_Execution/, "#DD4477")); | |
| Group.add('runtime', new Group('V8 C++', /.*/, "#88BB00")); | |
| var group = | |
| Group.add('unclassified', new Group('Unclassified', /.*/, "#000")); | |
| group.enabled = false; | |
| class GroupedEntry extends Entry { | |
| constructor(group) { | |
| super(0, GroupedEntry.prefix + group.name, 0, 0, 0, 0, 0, 0); | |
| this.group = group; | |
| this.entries = []; | |
| this.missingEntries = null; | |
| } | |
| get regexp() { return this.group.regexp } | |
| get color() { return this.group.color } | |
| get enabled() { return this.group.enabled } | |
| add(entry) { | |
| if (!this.regexp.test(entry.name)) return false; | |
| this._time += entry.time; | |
| this._count += entry.count; | |
| // TODO: sum up variance | |
| this.entries.push(entry); | |
| entry.parent = this; | |
| return true; | |
| } | |
| _initializeMissingEntries() { | |
| var dummyEntryNames = new Set(); | |
| versions.forEach((version) => { | |
| var groupEntry = version.getEntry(this); | |
| if (groupEntry != this) { | |
| for (var entry of groupEntry.entries) { | |
| if (this.page.get(entry.name) == undefined) { | |
| dummyEntryNames.add(entry.name); | |
| } | |
| } | |
| } | |
| }); | |
| this.missingEntries = []; | |
| for (var name of dummyEntryNames) { | |
| var tmpEntry = new Entry(0, name, 0, 0, 0, 0, 0, 0); | |
| tmpEntry.page = this.page; | |
| this.missingEntries.push(tmpEntry); | |
| }; | |
| } | |
| forEach(fun) { | |
| // Show also all entries which are in at least one version. | |
| // Concatenate our real entries. | |
| if (this.missingEntries == null) { | |
| this._initializeMissingEntries(); | |
| } | |
| var tmpEntries = this.missingEntries.concat(this.entries); | |
| // The compared entries are sorted by absolute impact. | |
| tmpEntries.sort((a, b) => { | |
| return b.time - a.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') | |
| } | |
| } | |
| GroupedEntry.prefix = 'Group-'; | |
| class UnclassifiedEntry extends GroupedEntry { | |
| constructor(page) { | |
| super(Group.groups.get('unclassified')); | |
| 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> | |
| <label for="uploadInput">Load File:</label> | |
| <input id="uploadInput" type="file" name="files" onchange="handleLoadFile();" accept=".json"> | |
| </p> | |
| <p> | |
| <label for="appendInput">Append File:</label> | |
| <input id="appendInput" type="file" name="files" onchange="handleAppendFile();" 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>Versions</h2> | |
| <div class="content hidden"> | |
| <ul></ul> | |
| </div> | |
| </div> | |
| <div id="pageSelector" class="inline toggleContentVisibility"> | |
| <h2>Pages</h2> | |
| <div class="content hidden"> | |
| <ul></ul> | |
| </div> | |
| </div> | |
| <div id="groupSelector" class="inline toggleContentVisibility"> | |
| <h2>Groups</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> |