mirror of
https://github.com/klzgrad/naiveproxy.git
synced 2024-12-01 09:46:09 +03:00
518 lines
22 KiB
HTML
518 lines
22 KiB
HTML
<!--
|
|
Copyright 2014 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.
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>Binary Size Analysis</title>
|
|
<script src="d3/d3.js" charset="utf-8"></script>
|
|
<script src="D3SymbolTreeMap.js" charset="utf-8"></script>
|
|
<script src="data.js" charset="utf-8"></script>
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
padding: 5px;
|
|
}
|
|
.swatch {
|
|
border: 1px solid rgb(100,100,100);
|
|
-webkit-user-select: none;
|
|
cursor: default;
|
|
}
|
|
</style>
|
|
<script>
|
|
var treemap;
|
|
var filterChanging = false;
|
|
var savedSettings = {};
|
|
var NUM_SYMBOL_TYPES = 11;
|
|
|
|
function init() {
|
|
if (window.metadata !== undefined && window.metadata.subtitle) {
|
|
document.getElementById('subtitle').innerHTML = ': ' + escape(metadata.subtitle);
|
|
}
|
|
initFilterOptions();
|
|
treemap = new D3SymbolTreeMap(
|
|
savedSettings.width,
|
|
savedSettings.height,
|
|
savedSettings.maxLevels);
|
|
treemap.init();
|
|
applyFilter(); // Required to make .other hidden by default.
|
|
}
|
|
|
|
function getIdealSizes() {
|
|
var width = window.innerWidth - 20;
|
|
var height = window.innerHeight - 70;
|
|
return {'width': width, 'height': height};
|
|
}
|
|
|
|
function showReport(title, data, headers, dataFunction, styleFunction) {
|
|
var div = d3.select('body').append('div')
|
|
.style('margin', '0')
|
|
.style('padding', '5px')
|
|
.style('position', 'absolute')
|
|
.style('top', '10%')
|
|
.style('left', '10%')
|
|
.style('background-color', 'rgba(255,255,255,0.9)')
|
|
.style('width', '80%')
|
|
.style('height', '80%')
|
|
.style('z-index', '2147483647')
|
|
.style('border', '3px ridge grey')
|
|
.style('box-shadow', '10px 10px 5px rgba(80,80,80,0.7)')
|
|
.style('text-align', 'center')
|
|
.style('border-radius', '10px');
|
|
var titlebar = div.append('div')
|
|
.style('margin', '0')
|
|
.style('padding', '5px')
|
|
.style('position', 'absolute')
|
|
.style('top', '0%')
|
|
.style('left', '0%')
|
|
.style('width', '100%')
|
|
.style('height', '10%')
|
|
.style('font-size', 'x-large');
|
|
titlebar.text(title);
|
|
var controls = div.append('div')
|
|
.style('margin', '0')
|
|
.style('padding', '5px')
|
|
.style('position', 'absolute')
|
|
.style('top', '90%')
|
|
.style('left', '0%')
|
|
.style('width', '100%')
|
|
.style('height', '10%');
|
|
controls.append('input').attr('type', 'button')
|
|
.attr('value', 'Dismiss')
|
|
.on('click', function(){div.remove();});
|
|
|
|
var tableDiv = div.append('div')
|
|
.style('overflow', 'auto')
|
|
.style('position', 'absolute')
|
|
.style('top', '10%')
|
|
.style('left', '0%')
|
|
.style('width', '100%')
|
|
.style('height', '80%')
|
|
.style('border-top', '1px solid rgb(230,230,230)')
|
|
.style('border-bottom', '1px solid rgb(230,230,230)');
|
|
var table = tableDiv.append('table')
|
|
.attr('border', '1')
|
|
.attr('cellspacing', '0')
|
|
.attr('cellpadding', '2')
|
|
.style('margin-left', 'auto')
|
|
.style('margin-right', 'auto');
|
|
var header = table.append('tr');
|
|
for (var i = 0; i < headers.length; i++) {
|
|
header.append('th').text(headers[i]);
|
|
}
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
var row = table.append('tr');
|
|
for (j = 0; j < headers.length; j++) {
|
|
var td = row.append('td');
|
|
if (styleFunction) {
|
|
styleFunction.call(this, td, j);
|
|
}
|
|
dataFunction.call(this, data[i], j, td);
|
|
}
|
|
}
|
|
}
|
|
|
|
function bigSymbolsReport() {
|
|
var list = treemap.biggestSymbols(100);
|
|
var headers = ['Rank', 'Size (Bytes)', 'Type', 'Location'];
|
|
var styleFunction = function(selection, index) {
|
|
if (index === 3) {
|
|
selection.style('font-family', 'monospace');
|
|
}
|
|
};
|
|
var recordIndex = 1;
|
|
var dataFunction = function(record, index, cell) {
|
|
if (index === 0) {
|
|
cell.text(recordIndex++);
|
|
} else if (index === 1) {
|
|
cell.text(D3SymbolTreeMap._pretty(record.value));
|
|
} else if (index === 2) {
|
|
cell.text(record.t);
|
|
} else {
|
|
if (treemap.pathFor(record).indexOf('/out') == 0) {
|
|
cell.append('span').text(treemap.pathFor(record));
|
|
cell.append('br');
|
|
cell.append('span').text('Symbol: ');
|
|
cell.append('span').text(record.n);
|
|
} else {
|
|
var href = 'https://code.google.com/p/chromium/codesearch#chromium/src'
|
|
+ treemap.pathFor(record)
|
|
+ '&q='
|
|
+ record.n;
|
|
cell.append('a')
|
|
.attr('href', href)
|
|
.attr('target', '_blank')
|
|
.text(treemap.pathFor(record));
|
|
cell.append('br');
|
|
cell.append('span').text('Symbol: ');
|
|
cell.append('span').text(record.n);
|
|
}
|
|
}
|
|
};
|
|
showReport('100 Largest Symbols', list, headers, dataFunction, styleFunction);
|
|
}
|
|
|
|
function bigPathsReport() {
|
|
var list = treemap.biggestPaths(100);
|
|
var headers = ['Rank', 'Size (Bytes)', 'Location'];
|
|
var styleFunction = function(selection, index) {
|
|
if (index === 2) {
|
|
selection.style('font-family', 'monospace');
|
|
}
|
|
};
|
|
var recordIndex = 1;
|
|
var dataFunction = function(record, index, cell) {
|
|
if (index === 0) {
|
|
cell.text(recordIndex++);
|
|
} else if (index === 1) {
|
|
cell.text(D3SymbolTreeMap._pretty(record.value));
|
|
} else if (index === 2) {
|
|
if (treemap.pathFor(record).indexOf('/out') == 0) {
|
|
cell.text(treemap.pathFor(record));
|
|
} else {
|
|
var href = 'https://code.google.com/p/chromium/codesearch#chromium/src' + treemap.pathFor(record);
|
|
cell.append('a')
|
|
.attr('href', href)
|
|
.attr('target', '_blank')
|
|
.text(treemap.pathFor(record));
|
|
}
|
|
|
|
}
|
|
};
|
|
showReport('100 Largest Paths', list, headers, dataFunction, styleFunction);
|
|
}
|
|
|
|
function symbolFilterTextChanged() {
|
|
if (filterChanging) return true;
|
|
filterChanging = true;
|
|
var enabled = document.getElementById('symbol_types_filter').value;
|
|
for (var x=0; x<NUM_SYMBOL_TYPES; x++) {
|
|
var checkBox = document.getElementById('check_' + x);
|
|
checkBox.checked = (enabled.indexOf(checkBox.value) != -1);
|
|
}
|
|
filterChanging = false;
|
|
}
|
|
|
|
function updateFilterText() {
|
|
if (filterChanging) return true;
|
|
filterChanging = true;
|
|
var text = '';
|
|
for (var x=0; x<NUM_SYMBOL_TYPES; x++) {
|
|
var checkBox = document.getElementById('check_' + x);
|
|
if (checkBox.checked) {
|
|
text += checkBox.value;
|
|
}
|
|
}
|
|
document.getElementById('symbol_types_filter').value=text;
|
|
filterChanging = false;
|
|
}
|
|
|
|
function initFilterOptions() {
|
|
var filterFromUrl = new URL(window.location).searchParams.get('sections');
|
|
if (filterFromUrl) {
|
|
document.getElementById('symbol_types_filter').value = filterFromUrl;
|
|
} else {
|
|
updateFilterText();
|
|
}
|
|
for (var x=0; x<NUM_SYMBOL_TYPES; x++) {
|
|
var checkBox = document.getElementById('check_' + x);
|
|
checkBox.onchange=updateFilterText;
|
|
var swatch = document.getElementById('swatch_' + x);
|
|
swatch.style.backgroundColor = D3SymbolTreeMap.getColorForType(checkBox.value).toString();
|
|
}
|
|
var gteCheckbox = document.getElementById('check_gte');
|
|
gteCheckbox.onchange = function() {
|
|
document.getElementById('symbol_filter_gte').disabled = !gteCheckbox.checked;
|
|
}
|
|
var regexCheckbox = document.getElementById('check_regex');
|
|
regexCheckbox.onchange = function() {
|
|
document.getElementById('symbol_filter_regex').disabled = !regexCheckbox.checked;
|
|
}
|
|
var excludeRegexCheckbox = document.getElementById('check_exclude_regex');
|
|
excludeRegexCheckbox.onchange = function() {
|
|
document.getElementById('symbol_filter_exclude_regex').disabled = !excludeRegexCheckbox.checked;
|
|
}
|
|
var idealSizes = getIdealSizes();
|
|
document.getElementById('width').value = idealSizes.width;
|
|
document.getElementById('height').value = idealSizes.height;
|
|
saveFilterSettings();
|
|
}
|
|
|
|
function filterSetAll(enabled) {
|
|
for (var x=0; x<NUM_SYMBOL_TYPES; x++) {
|
|
var checkBox = document.getElementById('check_' + x);
|
|
checkBox.checked = enabled;
|
|
}
|
|
updateFilterText();
|
|
}
|
|
|
|
function showOptions() {
|
|
loadFilterSettings();
|
|
var container = document.getElementById('options_container');
|
|
var w = container.offsetWidth;
|
|
var h = container.offsetHeight;
|
|
container.style.margin = '-' + (h/2) + 'px 0 0 -' + (w/2) + 'px';
|
|
container.style.visibility = 'visible';
|
|
}
|
|
|
|
function hideOptions() {
|
|
var container = document.getElementById('options_container');
|
|
container.style.visibility = 'hidden';
|
|
}
|
|
|
|
function applyFilter() {
|
|
// Type filters
|
|
var typeFilter = function(datum) {
|
|
if (datum.depth === 0) return true; // root node
|
|
if (datum.t === undefined) return true;
|
|
return savedSettings.symbolTypes !== undefined &&
|
|
savedSettings.symbolTypes.indexOf(datum.t) !== -1;
|
|
}
|
|
|
|
// Regex filter
|
|
var regexFilter;
|
|
if (savedSettings.regex !== undefined && savedSettings.regex.length > 0) {
|
|
console.log('filter: regex is "' + savedSettings.regex + '"');
|
|
var regex = new RegExp(savedSettings.regex);
|
|
regexFilter = function(datum) {
|
|
if (datum.depth === 0) return true; // root node
|
|
var fullName = this.pathFor(datum);
|
|
if (datum.children === undefined) { // it is a leaf node (symbol)
|
|
fullName += ':' + datum.n;
|
|
}
|
|
return regex.test(fullName);
|
|
}
|
|
}
|
|
|
|
// Exclude regex filter
|
|
var excludeRegexFilter = undefined;
|
|
if (savedSettings.excludeRegex !== undefined && savedSettings.excludeRegex.length > 0) {
|
|
console.log('filter: exclude-regex is "' + savedSettings.excludeRegex + '"');
|
|
var excludeRegex = new RegExp(savedSettings.excludeRegex);
|
|
excludeRegexFilter = function(datum) {
|
|
if (datum.depth === 0) return true; // root node
|
|
var fullName = this.pathFor(datum);
|
|
if (datum.children === undefined) { // it is a leaf node (symbol)
|
|
fullName += ':' + datum.n;
|
|
}
|
|
return !excludeRegex.test(fullName);
|
|
}
|
|
}
|
|
|
|
// Size filter
|
|
var sizeFilter = undefined;
|
|
if (savedSettings.gte !== undefined) {
|
|
console.log('filter: minimum size is ' + savedSettings.gte + ' bytes');
|
|
sizeFilter = function(datum) {
|
|
if (datum.children !== undefined) return true; // non-leaf
|
|
if (datum.value === undefined) console.log('whoops');
|
|
return datum.value >= savedSettings.gte;
|
|
}
|
|
}
|
|
|
|
// Make a filter to apply to the tree
|
|
var filter = function(datum) {
|
|
if (!typeFilter.call(this, datum)) return false;
|
|
if (regexFilter && !regexFilter.call(this, datum)) return false;
|
|
if (excludeRegexFilter && !excludeRegexFilter.call(this, datum)) return false;
|
|
if (sizeFilter && !sizeFilter.call(this, datum)) return false;
|
|
return true;
|
|
};
|
|
treemap.filter(filter);
|
|
}
|
|
|
|
function applySettings() {
|
|
hideOptions();
|
|
var oldWidth = savedSettings.width;
|
|
var oldHeight = savedSettings.height;
|
|
var oldSymbols = savedSettings.symbolTypes;
|
|
var oldRegex = savedSettings.regex;
|
|
var oldExcludeRegex = savedSettings.excludeRegex;
|
|
var oldGte = savedSettings.gte;
|
|
var oldMaxLevels = savedSettings.maxLevels;
|
|
saveFilterSettings();
|
|
var resizeNeeded = oldWidth !== savedSettings.width || oldHeight !== savedSettings.height;
|
|
var regexChanged = oldRegex !== savedSettings.regex;
|
|
var excludeRegexChanged = oldExcludeRegex !== savedSettings.excludeRegex;
|
|
var symbolsChanged = oldSymbols !== savedSettings.symbolTypes;
|
|
var gteChanged = oldGte !== savedSettings.gte;
|
|
var filterChanged = regexChanged || excludeRegexChanged || symbolsChanged || gteChanged;
|
|
var maxLevelsChanged = oldMaxLevels !== savedSettings.maxLevels;
|
|
|
|
if (filterChanged) {
|
|
applyFilter();
|
|
}
|
|
|
|
// Adjust levels if needed.
|
|
if (maxLevelsChanged) {
|
|
treemap.setMaxLevels(savedSettings.maxLevels);
|
|
}
|
|
|
|
// Resize map if necessary.
|
|
if (resizeNeeded) {
|
|
console.log('desired treemap dimensions have changed, requesting resize');
|
|
treemap.resize(savedSettings.width, savedSettings.height);
|
|
}
|
|
}
|
|
|
|
function cancelSettings() {
|
|
hideOptions();
|
|
loadFilterSettings();
|
|
}
|
|
|
|
function saveFilterSettings() {
|
|
savedSettings.symbolTypes = document.getElementById('symbol_types_filter').value;
|
|
if (document.getElementById('check_regex').checked) {
|
|
savedSettings.regex = document.getElementById('symbol_filter_regex').value;
|
|
} else {
|
|
savedSettings.regex = undefined;
|
|
}
|
|
if (document.getElementById('check_exclude_regex').checked) {
|
|
savedSettings.excludeRegex = document.getElementById('symbol_filter_exclude_regex').value;
|
|
} else {
|
|
savedSettings.excludeRegex = undefined;
|
|
}
|
|
if (document.getElementById('check_gte').checked) {
|
|
savedSettings.gte = parseInt(document.getElementById('symbol_filter_gte').value);
|
|
} else {
|
|
savedSettings.gte = undefined;
|
|
}
|
|
savedSettings.width = parseInt(document.getElementById('width').value);
|
|
savedSettings.height = parseInt(document.getElementById('height').value);
|
|
savedSettings.maxLevels = parseInt(document.getElementById('max_levels').value);
|
|
}
|
|
|
|
function loadFilterSettings() {
|
|
document.getElementById('symbol_types_filter').value = savedSettings.symbolTypes;
|
|
symbolFilterTextChanged();
|
|
if (savedSettings.regex !== undefined) {
|
|
document.getElementById('check_regex').checked = true;
|
|
document.getElementById('symbol_filter_regex').value = savedSettings.regex;
|
|
} else {
|
|
document.getElementById('check_regex').checked = false;
|
|
}
|
|
if (savedSettings.excludeRegex !== undefined) {
|
|
document.getElementById('check_exclude_regex').checked = true;
|
|
document.getElementById('symbol_filter_exclude_regex').value = savedSettings.excludeRegex;
|
|
} else {
|
|
document.getElementById('check_exclude_regex').checked = false;
|
|
}
|
|
if (savedSettings.gte !== undefined) {
|
|
document.getElementById('check_gte').checked = true;
|
|
document.getElementById('symbol_filter_gte').value = savedSettings.gte;
|
|
} else {
|
|
document.getElementById('check_gte').checked = false;
|
|
}
|
|
document.getElementById('width').value = savedSettings.width;
|
|
document.getElementById('height').value = savedSettings.height;
|
|
document.getElementById('max_levels').value = savedSettings.maxLevels;
|
|
}
|
|
|
|
function escape(str) {
|
|
return str.replace(/&/g, '&')
|
|
.replace(/"/g, '"')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>');
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload='init()'>
|
|
<div style='position: absolute; top: 5px; left: 5px;'>
|
|
<input type='button' onclick='showOptions()' value='Options & Legend...'>
|
|
<span style='-webkit-user-select: none; cursor: help;' title='Click to view the symbol legend or to configure filters and options for the treemap'>[?]</span>
|
|
</div>
|
|
<div style='position: absolute; right: 5px; top: 5px; white-space: nowrap;'>
|
|
Reports:
|
|
<input type='button' onclick='bigSymbolsReport()' value='Large Symbols' title='Click to view a report of the largest 100 symbols that are with the bounds of the treemap that is currently displayed.'>
|
|
<input type='button' onclick='bigPathsReport()' value='Large Files' title='Click to view a report of the largest 100 source files that are with the bounds of the treemap that is currently displayed.'>
|
|
</div>
|
|
<div style='text-align: center; margin-bottom: 5px;'>
|
|
<span style='font-size: x-large; font-weight: bold; font-variant: small-caps'>Binary Size Analysis<span id='subtitle'></span></span>
|
|
<br><span style='font-size: small; font-style: italic;'>Double-click a box to zoom in, double-click outermost title to zoom out.</span>
|
|
</div>
|
|
<table id='options_container' style='visibility: hidden; border: 3px ridge grey; padding: 0px; top: 50%; left: 50%; position: fixed; z-index: 2147483646; overflow: auto; background-color: rgba(255,255,255,0.9); border-radius: 10px; box-shadow: 10px 10px 5px rgba(80,80,80,0.7);'><tr><td style='vertical-align: top'>
|
|
<table cellspacing=0 cellborder=0 style='width:100%'>
|
|
<tr><th style='padding-bottom: .25em; text-decoration: underline;'>Symbol Types To Show</th></tr>
|
|
<tr>
|
|
<td style='white-space: nowrap; vertical-align: top;'>
|
|
<br><span class='swatch' id='swatch_0'> </span><input checked type='checkbox' id='check_0' value='b'>Uninitialized data (.bss)
|
|
<br><span class='swatch' id='swatch_1'> </span><input checked type='checkbox' id='check_1' value='d'>Initialized data (.data)
|
|
<br><span class='swatch' id='swatch_2'> </span><input checked type='checkbox' id='check_2' value='r'>Read-only data (.rodata)
|
|
<br><span class='swatch' id='swatch_3'> </span><input checked type='checkbox' id='check_3' value='t'>Code (.text)
|
|
<br><span class='swatch' id='swatch_4'> </span><input checked type='checkbox' id='check_4' value='v'>Vtable entries
|
|
<br><span class='swatch' id='swatch_5'> </span><input checked type='checkbox' id='check_5' value='!'>Generated Symbols (typeinfo, thunks, etc)
|
|
<br><span class='swatch' id='swatch_6'> </span><input checked type='checkbox' id='check_6' value='x'>Dex non-method entries
|
|
<br><span class='swatch' id='swatch_7'> </span><input checked type='checkbox' id='check_7' value='m'>Dex methods
|
|
<br><span class='swatch' id='swatch_8'> </span><input checked type='checkbox' id='check_8' value='p'>Locale Pak Entries
|
|
<br><span class='swatch' id='swatch_9'> </span><input checked type='checkbox' id='check_9' value='P'>Non-Locale Pak Entries
|
|
<br><span class='swatch' id='swatch_10'> </span><input checked type='checkbox' id='check_10' value='o'>Other Entries
|
|
</td>
|
|
</tr>
|
|
<tr><td style='text-align: center; white-space: nowrap; padding-top: 1em;'>
|
|
Select <input type='button' onclick='filterSetAll(true)' value='All'>,
|
|
<input type='button' onclick='filterSetAll(false)' value='None'>,
|
|
or type a string: <input id='symbol_types_filter' size=30 value='' onkeyup='symbolFilterTextChanged()' onblur='updateFilterText()'>
|
|
<span style='-webkit-user-select: none; cursor: help;' title='Enter codes from the list above for the symbols you want to see. The checkboxes will update automatically to match the string that you enter.'>[?]</span>
|
|
</td></tr>
|
|
</table>
|
|
</td></tr><tr><td style='vertical-align: top; padding-top: 10px; border-top: 1px solid grey;'>
|
|
<table cellspacing=0 cellborder=0 style='width: 100%'>
|
|
<tr><th colspan=2 style='padding-bottom: .25em; text-decoration: underline;'>Advanced Options</th></tr>
|
|
<tr>
|
|
<td style='white-space: nowrap; vertical-align: top;'>
|
|
<input type='checkbox' id='check_regex'>
|
|
Only include symbols matching this regex:
|
|
</td>
|
|
<td style='text-align: right; vertical-align: top;'>
|
|
<input disabled id='symbol_filter_regex' size=30 value='' style='text-align: right;'>
|
|
<span style='-webkit-user-select: none; cursor: help;' title='Enter a javascript regex. Only symbols that match this regex will be shown. This filter applies before any exclusion regex specified below. The format of each symbol is [path]:[symbol_name]'>[?]</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style='white-space: nowrap; vertical-align: top;'>
|
|
<input type='checkbox' id='check_exclude_regex'>
|
|
Exclude all symbols matching this regex:
|
|
</td>
|
|
<td style='text-align: right; vertical-align: top;'>
|
|
<input disabled id='symbol_filter_exclude_regex' size=30 value='' style='text-align: right;'>
|
|
<span style='-webkit-user-select: none; cursor: help;' title='Enter a javascript regex. Symbols that match this tegex will not be shown. This filter applies after any inclusion filter specified above. The format of each symbol is [path]:[symbol_name]'>[?]</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style='white-space: nowrap; vertical-align: top;'>
|
|
<input type='checkbox' id='check_gte'>
|
|
Only include symbols that are at least <span style='font-style: italic;'>n</span> bytes:
|
|
</td>
|
|
<td style='text-align: right; vertical-align: top;'>
|
|
<input disabled id='symbol_filter_gte' size=8 value='' style='text-align: right;'>
|
|
<span style='-webkit-user-select: none; cursor: help;' title='Symbols whose size is less than this value will be hidden.'>[?]</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style='white-space: nowrap vertical-align: top;;'>
|
|
Show at most <span style='font-style: italic;'>n</span> levels of detail at a time:
|
|
</td>
|
|
<td style='text-align: right; vertical-align: top;'>
|
|
<input id='max_levels' size=4 value='2' style='text-align: right;'><span style='-webkit-user-select: none; cursor: help;' title='Increasing this value shows more detail without the need to zoom, but uses more computing power.'>[?]</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style='white-space: nowrap vertical-align: top;;'>
|
|
Set the size of the treemap to <span style='font-style: italic;'>W x H</span> pixels:
|
|
</td>
|
|
<td style='text-align: right; vertical-align: top;'>
|
|
<input id='width' size=4 value='' style='text-align: right;'>
|
|
x <input id='height' size=4 value='' style='text-align: right;'>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td></tr>
|
|
<tr><td style='padding-top: 10px; text-align: right; border-top: 1px solid grey'>
|
|
<input type='button' value='Apply' onclick='applySettings()'>
|
|
<input type='button' value='Cancel' onclick='cancelSettings()'>
|
|
</td></tr></table>
|
|
</body>
|
|
</html>
|