| <html> |
| |
| <!-- |
| Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <!-- |
| Display all graphs for machines specified in chrome_config.js. |
| --> |
| |
| <head> |
| <title>Chrome Perf Overview</title> |
| <style type="text/css"> |
| a { |
| color: #004277; |
| text-decoration: none; |
| } |
| |
| /* Containers */ |
| #top { |
| text-align: center; |
| padding: 10px; |
| } |
| #top-left { |
| float:left; |
| } |
| #top-right { |
| float:right; |
| } |
| .clear { |
| clear: both; |
| } |
| .header { |
| font-family:Tahoma; |
| text-align:left; |
| font-size:12px; |
| font-weight:bold; |
| text-decoration:none; |
| } |
| .section-title { |
| text-align: center; |
| border-bottom: 1px solid #EFEFEF; |
| margin: 0px 15px 0px 15px; |
| font-size: 11px; |
| align: center; |
| } |
| |
| /* Graph */ |
| div.plot { |
| cursor: pointer; |
| } |
| div.switcher * { |
| border: 1px solid black; |
| border-radius: 4px 4px 0 0; |
| padding-left: 0.5em; |
| padding-right: 0.5em; |
| } |
| div.switcher .select { |
| background: #ddd; |
| cursor: pointer; |
| } |
| canvas.plot { |
| border: 1px solid black; |
| cursor: pointer; |
| } |
| div.plot-coordinates { |
| font-family: monospace; |
| } |
| iframe.detail { |
| display: none; |
| width: 100%; |
| height: 100%; |
| border: none; |
| } |
| div.selector { |
| border: solid 1px black; |
| cursor: pointer; |
| padding-left: 0.3em; |
| background-color: white; |
| } |
| div.selector:hover { |
| background-color: rgb(200,200,250); |
| } |
| div.selected { |
| border-left: none; |
| } |
| div.selectors { |
| width: 80px; |
| display: none; |
| } |
| #explain { |
| font-size: 0.75em; |
| font-style: italic; |
| color: rgb(100,100,100); |
| } |
| |
| /* Header Tab. */ |
| .header-tab .empty { |
| clear: left; |
| } |
| .header-tab { |
| border-bottom: 1px solid #6B90DA; |
| padding-left: 5px; |
| } |
| .header-tab ul { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| } |
| .header-tab li { |
| float: left; |
| border: 1px solid #bbb; |
| border-bottom-width: 0; |
| margin: 0; |
| } |
| .header-tab a { |
| text-decoration: none; |
| display: block; |
| background: #eee; |
| padding: 0.24em 1em; |
| color: #004277; |
| text-align: center; |
| } |
| .header-tab a:hover { |
| background: #ddf; |
| } |
| .header-tab .active { |
| border-color: #6B90DA; |
| } |
| .header-tab .active a { |
| position: relative; |
| top: 1px; |
| background: white; |
| font-weight: bold; |
| color: black; |
| } |
| </style> |
| |
| <script src="chrome_config.js"></script> |
| <script src="ui/js/common.js"></script> |
| <script src="ui/js/plotter.js"></script> |
| <script src="ui/js/coordinates.js"></script> |
| <script src="ui/js/graph.js"></script> |
| |
| <script language="javascript"> |
| var params = ParseParams(); |
| var view = (params['view']) ? params['view'] : 'important'; |
| |
| var CHANNELS = ['canary', 'dev', 'beta', 'stable']; |
| |
| function init() { |
| // Fetch graphs.dat from all machines and tests. |
| var graphFiles = []; |
| var graphPaths = []; |
| for (var system in ChromeConfig.systemTitles) { |
| for (var testName in ChromeConfig.testTitles) { |
| var path = '../' + system + '/' + testName; |
| graphFiles.push(path + '/' + 'graphs.dat'); |
| var p = { |
| path: path, |
| testName: testName, |
| machine: ChromeConfig.systemTitles[system], |
| } |
| graphPaths.push(p); |
| } |
| } |
| new FetchList(graphFiles, onGraphListReceived, graphPaths); |
| } |
| |
| function onGraphListReceived(data, graphPaths) { |
| // Order graphList by machine and test name. |
| var graphMap = {}; |
| var testNames = []; |
| for (var i = 0; i < data.length; i++) { |
| var graphList = JsonToJs(data[i]); |
| if (graphList) { |
| if (!(graphPaths[i].machine in graphMap)) |
| graphMap[graphPaths[i].machine] = {}; |
| graphMap[graphPaths[i].machine][graphPaths[i].testName] = |
| [graphList, graphPaths[i].path]; |
| if (testNames.indexOf(graphPaths[i].testName) < 0) |
| testNames.push(graphPaths[i].testName); |
| } |
| } |
| |
| // Get all important graphs. |
| var selectedGraphNames = {}; |
| for (var machine in graphMap) { |
| var graphByTestName = graphMap[machine]; |
| for (var test in graphByTestName) { |
| var gList = graphByTestName[test][0]; |
| for (var k = 0; k < gList.length; k++) { |
| var g = gList[k]; |
| if (!(g.name in selectedGraphNames)) { |
| if (g.important) { |
| selectedGraphNames[g.name] = 1; |
| } |
| } |
| } |
| } |
| } |
| |
| if (view == 'channel-comparison') { |
| addGraphTable(graphMap, testNames, selectedGraphNames, CHANNELS); |
| } else if (view == 'platform-comparison') { |
| displayPlatformComparison(graphMap, testNames, selectedGraphNames); |
| } else { |
| displayImportantGraphs(graphMap, testNames, selectedGraphNames); |
| } |
| |
| } |
| |
| function displayImportantGraphs(graphMap, testNames, selectedGraphNames) { |
| // Add graph for each channels. For total graph only. |
| var output = document.getElementById('output'); |
| |
| // Add section labels. |
| var sectionBelow = document.createElement('p'); |
| sectionBelow.setAttribute('style', 'text-align: center;'); |
| output.appendChild(sectionBelow); |
| sectionBelow.appendChild(document.createTextNode('[ ')); |
| for (var i = 0; i < CHANNELS.length; i++) { |
| var a = document.createElement('a'); |
| a.innerHTML = CHANNELS[i]; |
| a.setAttribute('href', '#' + CHANNELS[i]); |
| sectionBelow.appendChild(a); |
| if (i < CHANNELS.length - 1) |
| sectionBelow.appendChild(document.createTextNode(' | ')); |
| } |
| sectionBelow.appendChild(document.createTextNode(' ]')); |
| |
| for (var i = 0; i < CHANNELS.length; i++) { |
| var channel = CHANNELS[i]; |
| // Channel title. |
| var channelTitle = document.createElement('div'); |
| output.appendChild(channelTitle); |
| channelTitle.setAttribute('id', channel); |
| channelTitle.setAttribute('class', 'section-title'); |
| channelTitle.innerHTML = '<h2>' + channel + '</h2>'; |
| addGraphTable(graphMap, testNames, selectedGraphNames, [channel]); |
| } |
| } |
| |
| function addGraphTable(graphMap, testNames, selectedGraphNames, channels) { |
| var output = document.getElementById('output'); |
| var table = document.createElement('table'); |
| output.appendChild(table); |
| |
| // Add machine titles. |
| var trMachineTitle = document.createElement('tr'); |
| table.appendChild(trMachineTitle); |
| trMachineTitle.appendChild(document.createElement('th')); |
| for (var system in ChromeConfig.systemTitles) { |
| var th = document.createElement('th'); |
| trMachineTitle.appendChild(th); |
| th.innerHTML = '<a href="#" >' + ChromeConfig.systemTitles[system] + |
| '</a>'; |
| } |
| |
| // For each tests. |
| for (var j = 0; j < testNames.length; j++) { |
| var testName = testNames[j]; |
| var tr = document.createElement('tr'); |
| table.appendChild(tr); |
| |
| // Add graph title. |
| var tdGraphTitle = document.createElement('td'); |
| tdGraphTitle.setAttribute( |
| 'style', 'width: 50px; vertical-align:top; padding-top: 80px'); |
| tr.appendChild(tdGraphTitle); |
| tdGraphTitle.innerHTML = ChromeConfig.testTitles[testName]; |
| |
| // For each machine, add graph. |
| for (var machine in graphMap) { |
| var toBeGraphedList = []; |
| if (testName in graphMap[machine]) { |
| var gMap = graphMap[machine][testName]; |
| var graphList = gMap[0]; |
| var graphPath = gMap[1]; |
| for (var m = 0; m < graphList.length; m++) { |
| if (graphList[m].name in selectedGraphNames) { |
| graphList[m].loc = graphPath + '/' + graphList[m].name + |
| '-summary.dat'; |
| toBeGraphedList.push(graphList[m]); |
| break; |
| } |
| } |
| } |
| |
| var td = document.createElement('td'); |
| td.setAttribute('style', 'vertical-align:top;'); |
| var div = document.createElement('div'); |
| td.appendChild(div); |
| tr.appendChild(td); |
| |
| if (toBeGraphedList.length > 0) { |
| var options = { |
| channels: channels, |
| width: 250, |
| height: 250, |
| showDetail: false, |
| showTabs: false, |
| history: 50, |
| enableMouseScroll: false, |
| }; |
| var graph = new Graph(div, toBeGraphedList, options) |
| var reportURL = graphPath + '/' + 'report.html?channel=' + |
| channels.join(',') + '&graph=' + |
| toBeGraphedList[0].name; |
| graph.onPlotClicked = function(url) { |
| return function () {window.open(url)}; |
| }(reportURL); |
| graph.graph(); |
| } else { |
| div.setAttribute( |
| 'style', 'display: inline-block; width: 250px; height: 250px') |
| } |
| } |
| } |
| } |
| |
| function displayPlatformComparison(graphMap, testNames, selectedGraphNames) { |
| var output = document.getElementById('output'); |
| |
| var table = document.createElement('table'); |
| output.appendChild(table); |
| |
| // Add channel titles. |
| var trChannelTitle = document.createElement('tr'); |
| table.appendChild(trChannelTitle); |
| trChannelTitle.appendChild(document.createElement('th')); |
| for (var i = 0; i < CHANNELS.length; i++) { |
| var th = document.createElement('th'); |
| trChannelTitle.appendChild(th); |
| th.innerHTML = '<a href="#" >' + CHANNELS[i] + '</a>'; |
| } |
| |
| var machines = []; |
| for (var machine in graphMap) |
| machines.push(machine); |
| |
| // For each tests. |
| for (var j = 0; j < testNames.length; j++) { |
| var testName = testNames[j]; |
| var tr = document.createElement('tr'); |
| table.appendChild(tr); |
| |
| // Add test title. |
| var tdGraphTitle = document.createElement('td'); |
| tdGraphTitle.setAttribute( |
| 'style', 'width: 50px; vertical-align:top; padding-top: 80px'); |
| tr.appendChild(tdGraphTitle); |
| tdGraphTitle.innerHTML = ChromeConfig.testTitles[testName]; |
| |
| // For each channel, add graph. |
| for (var i = 0; i < CHANNELS.length; i++) { |
| var channel = CHANNELS[i]; |
| var toBeGraphedList = []; |
| for (var machine in graphMap) { |
| if (testName in graphMap[machine]) { |
| var gMap = graphMap[machine][testName]; |
| var graphList = gMap[0]; |
| var graphPath = gMap[1]; |
| for (var m = 0; m < graphList.length; m++) { |
| if (graphList[m].name in selectedGraphNames) { |
| graphList[m].loc = graphPath + '/' + graphList[m].name + |
| '-summary.dat'; |
| graphList[m].machine = cleanId(machine); |
| toBeGraphedList.push(graphList[m]); |
| break; |
| } |
| } |
| } |
| } |
| |
| var td = document.createElement('td'); |
| td.setAttribute('style', 'vertical-align:top;'); |
| var div = document.createElement('div'); |
| td.appendChild(div); |
| tr.appendChild(td); |
| |
| if (toBeGraphedList.length > 0) { |
| var options = { |
| channels: [channel], |
| width: 250, |
| height: 250, |
| showDetail: false, |
| showTabs: false, |
| history: 50, |
| enableMouseScroll: false, |
| orderDataByVersion: true, |
| }; |
| var graph = new Graph(div, toBeGraphedList, options) |
| var reportURL = 'platform-comparison.html?channel=' + |
| channel + '&graph=' + toBeGraphedList[0].name + |
| '&test=' + testNames[j] + |
| '&platforms=' + machines.join(','); |
| graph.onPlotClicked = function(url) { |
| return function () {window.open(url)}; |
| }(reportURL); |
| graph.graph(); |
| } else { |
| div.setAttribute( |
| 'style', 'display: inline-block; width: 250px; height: 250px') |
| } |
| } |
| } |
| } |
| |
| function cleanId(str) { |
| return str.replace(/\s/g, '_').toLowerCase(); |
| } |
| |
| window.addEventListener('load', init, false); |
| </script> |
| </head> |
| <body> |
| <div id="top"> |
| <h2 class="title"> |
| Chrome Perf: |
| <script> |
| document.write('<a href="overview-chrome.html' |
| + window.location.search |
| + '">overview</a>'); |
| </script> |
| </h2> |
| <div class="clear"></div> |
| </div> |
| <div class="header-tab" style="margin:0 auto;"> |
| <ul> |
| <script language="javascript"> |
| var tabs = { |
| 'important': 'Important Graphs', |
| 'channel-comparison': 'Channel Comparison', |
| 'platform-comparison': 'Platform Comparison', |
| } |
| for (var key in tabs) { |
| var selected = (view == key) ? 'class="active"' : ''; |
| document.write('<li ' + selected + |
| '><a href="overview-chrome.html?view=' + key + |
| '">' + tabs[key] + '</a></li>'); |
| } |
| </script> |
| </ul> |
| <div class="empty"></div> |
| </div> |
| <br /> |
| <div id="output" style="margin:0 auto;"></div> |
| </body> |
| </html> |