Index: chrome/browser/resources/inspect/inspect.js |
diff --git a/chrome/browser/resources/inspect/inspect.js b/chrome/browser/resources/inspect/inspect.js |
index 856744ba21b450a75ed58c1d79ef93950ac32f35..5354e49b28aeff166ac171838f22acc2fc67a6d2 100644 |
--- a/chrome/browser/resources/inspect/inspect.js |
+++ b/chrome/browser/resources/inspect/inspect.js |
@@ -10,6 +10,14 @@ function terminate(data) { |
chrome.send('terminate', [data]); |
} |
+function reload(data) { |
+ chrome.send('reload', [data]); |
+} |
+ |
+function open(browserId, url) { |
+ chrome.send('open', [browserId, url]); |
+} |
+ |
function removeChildren(element_id) { |
var element = $(element_id); |
element.textContent = ''; |
@@ -83,37 +91,103 @@ function populateDeviceLists(devices) { |
window.devicesDigest = devicesDigest; |
- var containerElement = $('devices'); |
- containerElement.textContent = ''; |
+ function removeObsolete(validIds, section) { |
+ if (validIds.indexOf(section.id) < 0) |
+ section.remove(); |
+ } |
+ |
+ var deviceList = $('devices'); |
+ |
+ var newDeviceIds = devices.map(function(d) { return d.adbGlobalId }); |
+ Array.prototype.forEach.call( |
+ deviceList.querySelectorAll('.device'), |
+ removeObsolete.bind(null, newDeviceIds)); |
- // Populate with new entries |
for (var d = 0; d < devices.length; d++) { |
var device = devices[d]; |
- var deviceHeader = document.createElement('div'); |
- deviceHeader.className = 'section'; |
- deviceHeader.textContent = device.adbModel; |
- containerElement.appendChild(deviceHeader); |
+ var browserList; |
+ var deviceSection = $(device.adbGlobalId); |
+ if (deviceSection) { |
+ browserList = deviceSection.querySelector('.browsers'); |
+ } else { |
+ deviceSection = document.createElement('div'); |
+ deviceSection.id = device.adbGlobalId; |
+ deviceSection.className = 'device list'; |
+ deviceList.appendChild(deviceSection); |
+ |
+ var deviceHeader = document.createElement('div'); |
+ deviceHeader.className = 'section'; |
+ deviceHeader.textContent = device.adbModel; |
+ deviceSection.appendChild(deviceHeader); |
+ |
+ browserList = document.createElement('div'); |
+ browserList.className = 'browsers'; |
+ deviceSection.appendChild(browserList); |
+ } |
- var deviceContent = document.createElement('div'); |
- deviceContent.className = 'list'; |
- containerElement.appendChild(deviceContent); |
+ var newBrowserIds = |
+ device.browsers.map(function(b) { return b.adbGlobalId }); |
+ Array.prototype.forEach.call( |
+ browserList.querySelectorAll('.browser'), |
+ removeObsolete.bind(null, newBrowserIds)); |
for (var b = 0; b < device.browsers.length; b++) { |
var browser = device.browsers[b]; |
- var browserHeader = document.createElement('div'); |
- browserHeader.className = 'small-section'; |
- browserHeader.textContent = browser.adbBrowserName; |
- deviceContent.appendChild(browserHeader); |
- |
- var browserPages = document.createElement('div'); |
- browserPages.className = 'list package'; |
- deviceContent.appendChild(browserPages); |
+ var pageList; |
+ var browserSection = $(browser.adbGlobalId); |
+ if (browserSection) { |
+ pageList = browserSection.querySelector('.pages'); |
+ pageList.textContent = ''; |
+ } else { |
+ browserSection = document.createElement('div'); |
+ browserSection.id = browser.adbGlobalId; |
+ browserSection.className = 'browser'; |
+ browserList.appendChild(browserSection); |
+ |
+ var browserHeader = document.createElement('div'); |
+ browserHeader.className = 'small-section'; |
+ browserHeader.textContent = browser.adbBrowserName; |
+ browserSection.appendChild(browserHeader); |
+ |
+ var newPage = document.createElement('div'); |
+ newPage.className = 'open'; |
+ |
+ var newPageUrl = document.createElement('input'); |
+ newPageUrl.type = 'text'; |
+ newPageUrl.placeholder = 'Open tab with url'; |
+ newPage.appendChild(newPageUrl); |
+ |
+ var openHandler = function(browserId, input) { |
+ open(browserId, input.value || 'about:blank'); |
+ input.value = ''; |
+ }.bind(null, browser.adbGlobalId, newPageUrl); |
+ newPageUrl.addEventListener('keyup', function(handler, event) { |
+ if (event.keyIdentifier == 'Enter' && event.target.value) |
+ handler(); |
+ }.bind(null, openHandler), true); |
+ |
+ var newPageButton = document.createElement('button'); |
+ newPageButton.textContent = 'Open'; |
+ newPage.appendChild(newPageButton); |
+ newPageButton.addEventListener('click', openHandler, true); |
+ |
+ browserSection.appendChild(newPage); |
+ |
+ pageList = document.createElement('div'); |
+ pageList.className = 'list pages'; |
+ browserSection.appendChild(pageList); |
+ } |
for (var p = 0; p < browser.pages.length; p++) { |
- addTargetToList( |
- browser.pages[p], browserPages, ['faviconUrl', 'name', 'url']); |
+ var page = browser.pages[p]; |
+ var row = addTargetToList( |
+ page, pageList, ['faviconUrl', 'name', 'url']); |
+ row.appendChild(createActionLink( |
+ 'reload', reload.bind(null, page), page.attached)); |
+ row.appendChild(createActionLink( |
+ 'close', terminate.bind(null, page), page.attached)); |
} |
} |
} |
@@ -132,10 +206,9 @@ function addToAppsList(data) { |
} |
function addToWorkersList(data) { |
- addTargetToList(data, |
- $('workers'), |
- ['name', 'url', 'pid'], |
- true); |
+ var row = addTargetToList(data, $('workers'), ['name', 'url', 'pid']); |
+ row.appendChild(createActionLink( |
+ 'terminate', terminate.bind(null, data), data.attached)); |
} |
function addToOthersList(data) { |
@@ -165,45 +238,31 @@ function formatValue(data, property) { |
return span; |
} |
-function addTargetToList(data, list, properties, canTerminate) { |
+function addTargetToList(data, list, properties) { |
var row = document.createElement('div'); |
row.className = 'row'; |
for (var j = 0; j < properties.length; j++) |
row.appendChild(formatValue(data, properties[j])); |
- row.appendChild(createInspectElement(data)); |
- |
- if (canTerminate) |
- row.appendChild(createTerminateElement(data)); |
+ row.appendChild(createActionLink('inspect', inspect.bind(null, data))); |
row.processId = data.processId; |
row.routeId = data.routeId; |
list.appendChild(row); |
+ return row; |
} |
-function createInspectElement(data) { |
+function createActionLink(text, handler, opt_disabled) { |
var link = document.createElement('a'); |
- link.setAttribute('href', '#'); |
- link.textContent = ' inspect '; |
- link.addEventListener( |
- 'click', |
- inspect.bind(this, data), |
- true); |
- return link; |
-} |
- |
-function createTerminateElement(data) { |
- var link = document.createElement('a'); |
- if (data.attached) |
- link.disabled = true; |
+ if (opt_disabled) |
+ link.classList.add('disabled'); |
+ else |
+ link.classList.remove('disabled'); |
link.setAttribute('href', '#'); |
- link.textContent = ' terminate '; |
- link.addEventListener( |
- 'click', |
- terminate.bind(this, data), |
- true); |
+ link.textContent = text; |
+ link.addEventListener('click', handler, true); |
return link; |
} |