dashboard/overview-chrome.html - chromium/tools/perf - Git at Google

 <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>
	<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>