blob: 9b9f519fdbe8df219c4da16f56b41f6c9d370945 [file] [log] [blame]
<html>
<head>
<script src="jstemplate_compiled.js" type="text/javascript"></script>
<script>
tabs = {};
tabIds = [];
focusedWindowId = undefined;
currentWindowId = undefined;
function bootStrap() {
chrome.windows.getCurrent(function(currentWindow) {
currentWindowId = currentWindow.id;
chrome.windows.getLastFocused(function(focusedWindow) {
focusedWindowId = focusedWindow.id;
loadWindowList();
});
});
}
function isInt(i) {
return (typeof i == "number") && !(i % 1) && !isNaN(i);
}
function loadWindowList() {
chrome.windows.getAll({ populate: true }, function(windowList) {
tabs = {};
tabIds = [];
for (var i = 0; i < windowList.length; i++) {
windowList[i].current = (windowList[i].id == currentWindowId);
windowList[i].focused = (windowList[i].id == focusedWindowId);
for (var j = 0; j < windowList[i].tabs.length; j++) {
tabIds[tabIds.length] = windowList[i].tabs[j].id;
tabs[windowList[i].tabs[j].id] = windowList[i].tabs[j];
}
}
var input = new JsExprContext(windowList);
var output = document.getElementById('windowList');
jstProcess(input, output);
});
}
function updateTabData(id) {
var retval = {
url: document.getElementById('url_' + id).value,
selected: document.getElementById('selected_' + id).value ? true : false
}
return retval;
}
function updateTab(id){
try {
chrome.tabs.update(id, updateTabData(id));
} catch (e) {
alert(e);
}
}
function moveTabData(id) {
return {
'index': parseInt(document.getElementById('index_' + id).value),
'windowId': parseInt(document.getElementById('windowId_' + id).value)
}
}
function moveTab(id) {
try {
chrome.tabs.move(id, moveTabData(id));
} catch (e) {
alert(e);
}
}
function createTabData(id) {
return {
'index': parseInt(document.getElementById('index_' + id).value),
'windowId': parseInt(document.getElementById('windowId_' + id).value),
'index': parseInt(document.getElementById('index_' + id).value),
'url': document.getElementById('url_' + id).value,
'selected': document.getElementById('selected_' + id).value ? true : false
}
}
function createTab() {
var args = createTabData('new')
if (!isInt(args.windowId))
delete args.windowId;
if (!isInt(args.index))
delete args.index;
try {
chrome.tabs.create(args);
} catch (e) {
alert(e);
}
}
function updateAll() {
try {
for (var i = 0; i < tabIds.length; i++) {
chrome.tabs.update(tabIds[i], updateTabData(tabIds[i]));
}
} catch(e) {
alert(e);
}
}
function moveAll() {
appendToLog('moving all');
try {
for (var i = 0; i < tabIds.length; i++) {
chrome.tabs.move(tabIds[i], moveTabData(tabIds[i]));
}
} catch(e) {
alert(e);
}
}
function removeTab(tabId) {
try {
chrome.tabs.remove(tabId, function() {
appendToLog('tab: ' + tabId + ' removed.');
});
} catch (e) {
alert(e);
}
}
function appendToLog(logLine) {
var log = document.getElementById('log');
log.innerHTML = '<div> &gt;&nbsp;' + logLine + '</div>' + log.innerHTML;
}
function clearLog() {
document.getElementById('log').innerHTML = '';
}
chrome.windows.onCreated.addListener(function(createInfo) {
appendToLog('windows.onCreated -- window: ' + createInfo.id);
loadWindowList();
});
chrome.windows.onFocusChanged.addListener(function(windowId) {
focusedWindowId = windowId;
appendToLog('windows.onFocusChanged -- window: ' + windowId);
loadWindowList();
});
chrome.windows.onRemoved.addListener(function(windowId) {
appendToLog('windows.onRemoved -- window: ' + windowId);
loadWindowList();
});
chrome.tabs.onCreated.addListener(function(tab) {
appendToLog('tabs.onCreated -- window: ' + tab.windowId + ' tab: ' + tab.id + ' index ' + tab.index + ' url ' + tab.url);
loadWindowList();
});
chrome.tabs.onAttached.addListener(function(tabId, props) {
appendToLog('tabs.onAttached -- window: ' + props.newWindowId + ' tab: ' + tabId + ' index ' + props.newPosition);
loadWindowList();
});
chrome.tabs.onMoved.addListener(function(tabId, props) {
appendToLog('tabs.onMoved -- window: ' + props.windowId + ' tab: ' + tabId + ' from ' + props.fromIndex + ' to ' + props.toIndex);
loadWindowList();
});
function refreshTab(tabId) {
chrome.tabs.get(tabId, function(tab) {
var input = new JsExprContext(tab);
var output = document.getElementById('tab_' + tab.id);
jstProcess(input, output);
appendToLog('tab refreshed -- tabId: ' + tab.id + ' url: ' + tab.url);
});
}
chrome.tabs.onUpdated.addListener(function(tabId, props) {
appendToLog('tabs.onUpdated -- tab: ' + tabId + ' status ' + props.status + ' url ' + props.url);
refreshTab(tabId);
});
chrome.tabs.onDetached.addListener(function(tabId, props) {
appendToLog('tabs.onDetached -- window: ' + props.oldWindowId + ' tab: ' + tabId + ' index ' + props.oldPosition);
loadWindowList();
});
chrome.tabs.onSelectionChanged.addListener(function(tabId, props) {
appendToLog('tabs.onSelectionChanged -- window: ' + props.windowId + ' tab: ' + tabId);
loadWindowList();
});
chrome.tabs.onRemoved.addListener(function(tabId) {
appendToLog('tabs.onRemoved -- tab: ' + tabId);
loadWindowList();
});
function createWindow() {
var args = {
'left': parseInt(document.getElementById('new_window_left').value),
'top': parseInt(document.getElementById('new_window_top').value),
'width': parseInt(document.getElementById('new_window_width').value),
'height': parseInt(document.getElementById('new_window_height').value),
'url': document.getElementById('new_window_url').value
}
if (!isInt(args.left))
delete args.left;
if (!isInt(args.top))
delete args.top;
if (!isInt(args.width))
delete args.width;
if (!isInt(args.height))
delete args.height;
if (!args.url)
delete args.url;
try {
chrome.windows.create(args);
} catch(e) {
alert(e);
}
}
function refreshWindow(windowId) {
chrome.windows.get(windowId, function(window) {
chrome.tabs.getAllInWindow(window.id, function(tabList) {
window.tabs = tabList;
var input = new JsExprContext(window);
var output = document.getElementById('window_' + window.id);
jstProcess(input, output);
appendToLog('window refreshed -- windowId: ' + window.id + ' tab count:' + window.tabs.length);
});
});
}
function updateWindowData(id) {
var retval = {
left: parseInt(document.getElementById('left_' + id).value),
top: parseInt(document.getElementById('top_' + id).value),
width: parseInt(document.getElementById('width_' + id).value),
height: parseInt(document.getElementById('height_' + id).value)
}
if (!isInt(retval.left))
delete retval.left;
if (!isInt(retval.top))
delete retval.top;
if (!isInt(retval.width))
delete retval.width;
if (!isInt(retval.height))
delete retval.height;
return retval;
}
function updateWindow(id){
try {
chrome.windows.update(id, updateWindowData(id));
} catch (e) {
alert(e);
}
}
function removeWindow(windowId) {
try {
chrome.windows.remove(windowId, function() {
appendToLog('window: ' + windowId + ' removed.');
});
} catch (e) {
alert(e);
}
}
function refreshSelectedTab(windowId) {
chrome.tabs.getSelected(windowId, function(tab) {
var input = new JsExprContext(tab);
var output = document.getElementById('tab_' + tab.id);
jstProcess(input, output);
appendToLog('selected tab refreshed -- tabId: ' + tab.id + ' url:' + tab.url);
});
}
</script>
</head>
<body onload="bootStrap();">
<div id="windowList">
<div style="background-color: #AAEEEE; margin: 4px; padding: 8px; margin: 20px" jsselect="$this"
jsvalues="id:'window_' + id">
<div style="font-style: italic; width: 80px; display: inline-block">
Window: <span jscontent="id"></span>
</div>
<div style="display: inline-block">
left: <input style="width: 60px" type="text" jsvalues="value:$this.left;id:'left_' + id" />
top: <input style="width: 60px" type="text" jsvalues="value:$this.top;id:'top_' + id" />
width: <input style="width: 60px" type="text" jsvalues="value:$this.width;id:'width_' + id" />
height: <input style="width: 60px" type="text" jsvalues="value:$this.height;id:'height_' + id" />
<input type="checkbox" jsvalues="checked:focused; id:'focused_' + id" /> Focused
<input type="checkbox" jsvalues="checked:current; id:'current_' + id" /> Current
<button onclick="refreshWindow(this.jstdata);" jsvalues=".jstdata:id">Refresh</button>
</div>
<div id="tabList">
<div jsselect="tabs">
<div style="background-color: #EEEEEE; margin: 8px; padding: 4px" jsvalues="id:'tab_' + id">
<div style="margin: 8px">
<div style="font-style: italic; width: 80px; display: inline-block" jscontent="'TabId: ' + id"></div>
<div style="width: 300px; display: inline-block">
index: <input style="width: 20px" type="text" jsvalues="value:$this.index;id:'index_' + id" />
windowId: <input style="width: 20px" type="text" jsvalues="value:windowId;id:'windowId_' + id" />
<button onclick="moveTab(this.jstdata);" jsvalues=".jstdata:id">Move</button>
<button onclick="refreshTab(this.jstdata);" jsvalues=".jstdata:id">Refresh</button>
</div>
</div>
<div style="margin: 8px">
<div>
<div style="width: 40px; display:inline-block">title:</div>
<input style="width: 90%" type="text" jsvalues="value:title;id:'title_' + id" />
</div>
<div>
<div style="width: 40px; display:inline-block">url:</div>
<input style="width: 90%" type="text" jsvalues="value:url;id:'url_' + id" />
</div>
<div><input type="checkbox" jsvalues="checked:selected; id:'selected_' + id" /> Selected</div>
</div>
<button onclick="updateTab(this.jstdata)" jsvalues=".jstdata:id">Update Tab</button>
<button onclick="removeTab(this.jstdata);" jsvalues=".jstdata:id">Close Tab</button>
</div>
</div>
</div>
<button onclick="updateWindow(this.jstdata);" jsvalues=".jstdata:id">Update Window</button>
<button onclick="removeWindow(this.jstdata);" jsvalues=".jstdata:id">Close Window</button>
<button onclick="refreshSelectedTab(this.jstdata);" jsvalues=".jstdata:id">Refresh Selected Tab</button>
</div>
</div>
<div style="background-color: #EEEEBB; margin: 20px; padding: 8px">
<h3 style="text-align: center; margin: 8px"> Create Window</h3>
<div style="margin: 8px">
<div style="width: 300px; display: inline-block">
left: <input style="width: 20px" type="text" id="new_window_left" />
top: <input style="width: 20px" type="text" id="new_window_top" />
width: <input style="width: 20px" type="text" id="new_window_width" />
height: <input style="width: 20px" type="text" id="new_window_height" />
</div>
</div>
<div style="margin: 8px">
<div>
<div style="width: 40px; display:inline-block">url:</div>
<input style="width: 90%" type="text" id="new_window_url" />
</div>
</div>
<button onclick="createWindow();">Create</button>
</div>
<div style="background-color: #EEEEAA; margin: 20px; padding: 8px">
<h3 style="text-align: center; margin: 8px"> Create Tab</h3>
<div style="margin: 8px">
<div style="width: 300px; display: inline-block">
index: <input style="width: 20px" type="text" id="index_new" />
windowId: <input style="width: 20px" type="text" id="windowId_new" />
<button onclick="moveTab(this.jstdata);" jsvalues=".jstdata:id">Move</button>
</div>
</div>
<div style="margin: 8px">
<div>
<div style="width: 40px; display:inline-block">title:</div>
<input style="width: 90%" type="text" id="title_new" />
</div>
<div>
<div style="width: 40px; display:inline-block">url:</div>
<input style="width: 90%" type="text" id="url_new" />
</div>
<div><input type="checkbox" id="selected_new" /> Selected</div>
</div>
<button onclick="createTab();">Create</button>
</div>
<div style="margin: 20px;">
<button onclick="loadWindowList();">Refresh</button>
<button onclick="updateAll();">Update All</button>
<button onclick="moveAll();">Move All</button>
<button onclick="clearLog();">-->Clear Log</button>
<button onclick="chrome.windows.create();">New Window</button>
</div>
<div id="log" style="background-color: #EEAAEE; margin: 20px; padding: 8px">
</div>
</body>
</html>