OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 function inspect(data) { | 5 function inspect(data) { |
6 chrome.send('inspect', [data]); | 6 chrome.send('inspect', [data]); |
7 } | 7 } |
8 | 8 |
9 function terminate(data) { | 9 function terminate(data) { |
10 chrome.send('terminate', [data]); | 10 chrome.send('terminate', [data]); |
11 } | 11 } |
12 | 12 |
| 13 function reload(data) { |
| 14 chrome.send('reload', [data]); |
| 15 } |
| 16 |
| 17 function open(browserId, url) { |
| 18 chrome.send('open', [browserId, url]); |
| 19 } |
| 20 |
13 function removeChildren(element_id) { | 21 function removeChildren(element_id) { |
14 var element = $(element_id); | 22 var element = $(element_id); |
15 element.textContent = ''; | 23 element.textContent = ''; |
16 } | 24 } |
17 | 25 |
18 function onload() { | 26 function onload() { |
19 var tabContents = document.querySelectorAll('#content > div'); | 27 var tabContents = document.querySelectorAll('#content > div'); |
20 for (var i = 0; i != tabContents.length; i++) { | 28 for (var i = 0; i != tabContents.length; i++) { |
21 var tabContent = tabContents[i]; | 29 var tabContent = tabContents[i]; |
22 var tabName = tabContent.querySelector('.content-header').textContent; | 30 var tabName = tabContent.querySelector('.content-header').textContent; |
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
76 addToWorkersList(data[i]); | 84 addToWorkersList(data[i]); |
77 } | 85 } |
78 | 86 |
79 function populateDeviceLists(devices) { | 87 function populateDeviceLists(devices) { |
80 var devicesDigest = JSON.stringify(devices); | 88 var devicesDigest = JSON.stringify(devices); |
81 if (!devices || devicesDigest == window.devicesDigest) | 89 if (!devices || devicesDigest == window.devicesDigest) |
82 return; | 90 return; |
83 | 91 |
84 window.devicesDigest = devicesDigest; | 92 window.devicesDigest = devicesDigest; |
85 | 93 |
86 var containerElement = $('devices'); | 94 function removeObsolete(validIds, section) { |
87 containerElement.textContent = ''; | 95 if (validIds.indexOf(section.id) < 0) |
| 96 section.remove(); |
| 97 } |
88 | 98 |
89 // Populate with new entries | 99 var deviceList = $('devices'); |
| 100 |
| 101 var newDeviceIds = devices.map(function(d) { return d.adbGlobalId }); |
| 102 Array.prototype.forEach.call( |
| 103 deviceList.querySelectorAll('.device'), |
| 104 removeObsolete.bind(null, newDeviceIds)); |
| 105 |
90 for (var d = 0; d < devices.length; d++) { | 106 for (var d = 0; d < devices.length; d++) { |
91 var device = devices[d]; | 107 var device = devices[d]; |
92 | 108 |
93 var deviceHeader = document.createElement('div'); | 109 var browserList; |
94 deviceHeader.className = 'section'; | 110 var deviceSection = $(device.adbGlobalId); |
95 deviceHeader.textContent = device.adbModel; | 111 if (deviceSection) { |
96 containerElement.appendChild(deviceHeader); | 112 browserList = deviceSection.querySelector('.browsers'); |
| 113 } else { |
| 114 deviceSection = document.createElement('div'); |
| 115 deviceSection.id = device.adbGlobalId; |
| 116 deviceSection.className = 'device list'; |
| 117 deviceList.appendChild(deviceSection); |
97 | 118 |
98 var deviceContent = document.createElement('div'); | 119 var deviceHeader = document.createElement('div'); |
99 deviceContent.className = 'list'; | 120 deviceHeader.className = 'section'; |
100 containerElement.appendChild(deviceContent); | 121 deviceHeader.textContent = device.adbModel; |
| 122 deviceSection.appendChild(deviceHeader); |
| 123 |
| 124 browserList = document.createElement('div'); |
| 125 browserList.className = 'browsers'; |
| 126 deviceSection.appendChild(browserList); |
| 127 } |
| 128 |
| 129 var newBrowserIds = |
| 130 device.browsers.map(function(b) { return b.adbGlobalId }); |
| 131 Array.prototype.forEach.call( |
| 132 browserList.querySelectorAll('.browser'), |
| 133 removeObsolete.bind(null, newBrowserIds)); |
101 | 134 |
102 for (var b = 0; b < device.browsers.length; b++) { | 135 for (var b = 0; b < device.browsers.length; b++) { |
103 var browser = device.browsers[b]; | 136 var browser = device.browsers[b]; |
104 | 137 |
105 var browserHeader = document.createElement('div'); | 138 var pageList; |
106 browserHeader.className = 'small-section'; | 139 var browserSection = $(browser.adbGlobalId); |
107 browserHeader.textContent = browser.adbBrowserName; | 140 if (browserSection) { |
108 deviceContent.appendChild(browserHeader); | 141 pageList = browserSection.querySelector('.pages'); |
| 142 pageList.textContent = ''; |
| 143 } else { |
| 144 browserSection = document.createElement('div'); |
| 145 browserSection.id = browser.adbGlobalId; |
| 146 browserSection.className = 'browser'; |
| 147 browserList.appendChild(browserSection); |
109 | 148 |
110 var browserPages = document.createElement('div'); | 149 var browserHeader = document.createElement('div'); |
111 browserPages.className = 'list package'; | 150 browserHeader.className = 'small-section'; |
112 deviceContent.appendChild(browserPages); | 151 browserHeader.textContent = browser.adbBrowserName; |
| 152 browserSection.appendChild(browserHeader); |
| 153 |
| 154 var newPage = document.createElement('div'); |
| 155 newPage.className = 'open'; |
| 156 |
| 157 var newPageUrl = document.createElement('input'); |
| 158 newPageUrl.type = 'text'; |
| 159 newPageUrl.placeholder = 'Open tab with url'; |
| 160 newPage.appendChild(newPageUrl); |
| 161 |
| 162 var openHandler = function(browserId, input) { |
| 163 open(browserId, input.value || 'about:blank'); |
| 164 input.value = ''; |
| 165 }.bind(null, browser.adbGlobalId, newPageUrl); |
| 166 newPageUrl.addEventListener('keyup', function(handler, event) { |
| 167 if (event.keyIdentifier == 'Enter' && event.target.value) |
| 168 handler(); |
| 169 }.bind(null, openHandler), true); |
| 170 |
| 171 var newPageButton = document.createElement('button'); |
| 172 newPageButton.textContent = 'Open'; |
| 173 newPage.appendChild(newPageButton); |
| 174 newPageButton.addEventListener('click', openHandler, true); |
| 175 |
| 176 browserSection.appendChild(newPage); |
| 177 |
| 178 pageList = document.createElement('div'); |
| 179 pageList.className = 'list pages'; |
| 180 browserSection.appendChild(pageList); |
| 181 } |
113 | 182 |
114 for (var p = 0; p < browser.pages.length; p++) { | 183 for (var p = 0; p < browser.pages.length; p++) { |
115 addTargetToList( | 184 var page = browser.pages[p]; |
116 browser.pages[p], browserPages, ['faviconUrl', 'name', 'url']); | 185 var row = addTargetToList( |
| 186 page, pageList, ['faviconUrl', 'name', 'url']); |
| 187 row.appendChild(createActionLink( |
| 188 'reload', reload.bind(null, page), page.attached)); |
| 189 row.appendChild(createActionLink( |
| 190 'close', terminate.bind(null, page), page.attached)); |
117 } | 191 } |
118 } | 192 } |
119 } | 193 } |
120 } | 194 } |
121 | 195 |
122 function addToPagesList(data) { | 196 function addToPagesList(data) { |
123 addTargetToList(data, $('pages'), ['faviconUrl', 'name', 'url']); | 197 addTargetToList(data, $('pages'), ['faviconUrl', 'name', 'url']); |
124 } | 198 } |
125 | 199 |
126 function addToExtensionsList(data) { | 200 function addToExtensionsList(data) { |
127 addTargetToList(data, $('extensions'), ['name', 'url']); | 201 addTargetToList(data, $('extensions'), ['name', 'url']); |
128 } | 202 } |
129 | 203 |
130 function addToAppsList(data) { | 204 function addToAppsList(data) { |
131 addTargetToList(data, $('apps'), ['name', 'url']); | 205 addTargetToList(data, $('apps'), ['name', 'url']); |
132 } | 206 } |
133 | 207 |
134 function addToWorkersList(data) { | 208 function addToWorkersList(data) { |
135 addTargetToList(data, | 209 var row = addTargetToList(data, $('workers'), ['name', 'url', 'pid']); |
136 $('workers'), | 210 row.appendChild(createActionLink( |
137 ['name', 'url', 'pid'], | 211 'terminate', terminate.bind(null, data), data.attached)); |
138 true); | |
139 } | 212 } |
140 | 213 |
141 function addToOthersList(data) { | 214 function addToOthersList(data) { |
142 addTargetToList(data, $('others'), ['url']); | 215 addTargetToList(data, $('others'), ['url']); |
143 } | 216 } |
144 | 217 |
145 function formatValue(data, property) { | 218 function formatValue(data, property) { |
146 var value = data[property]; | 219 var value = data[property]; |
147 | 220 |
148 if (property == 'faviconUrl') { | 221 if (property == 'faviconUrl') { |
149 var faviconElement = document.createElement('img'); | 222 var faviconElement = document.createElement('img'); |
150 if (value) | 223 if (value) |
151 faviconElement.src = value; | 224 faviconElement.src = value; |
152 return faviconElement; | 225 return faviconElement; |
153 } | 226 } |
154 | 227 |
155 var text = value ? String(value) : ''; | 228 var text = value ? String(value) : ''; |
156 if (text.length > 100) | 229 if (text.length > 100) |
157 text = text.substring(0, 100) + '\u2026'; | 230 text = text.substring(0, 100) + '\u2026'; |
158 | 231 |
159 if (property == 'pid') | 232 if (property == 'pid') |
160 text = 'Pid:' + text; | 233 text = 'Pid:' + text; |
161 | 234 |
162 var span = document.createElement('span'); | 235 var span = document.createElement('span'); |
163 span.textContent = ' ' + text + ' '; | 236 span.textContent = ' ' + text + ' '; |
164 span.className = property; | 237 span.className = property; |
165 return span; | 238 return span; |
166 } | 239 } |
167 | 240 |
168 function addTargetToList(data, list, properties, canTerminate) { | 241 function addTargetToList(data, list, properties) { |
169 var row = document.createElement('div'); | 242 var row = document.createElement('div'); |
170 row.className = 'row'; | 243 row.className = 'row'; |
171 for (var j = 0; j < properties.length; j++) | 244 for (var j = 0; j < properties.length; j++) |
172 row.appendChild(formatValue(data, properties[j])); | 245 row.appendChild(formatValue(data, properties[j])); |
173 | 246 |
174 row.appendChild(createInspectElement(data)); | 247 row.appendChild(createActionLink('inspect', inspect.bind(null, data))); |
175 | |
176 if (canTerminate) | |
177 row.appendChild(createTerminateElement(data)); | |
178 | 248 |
179 row.processId = data.processId; | 249 row.processId = data.processId; |
180 row.routeId = data.routeId; | 250 row.routeId = data.routeId; |
181 | 251 |
182 list.appendChild(row); | 252 list.appendChild(row); |
| 253 return row; |
183 } | 254 } |
184 | 255 |
185 function createInspectElement(data) { | 256 function createActionLink(text, handler, opt_disabled) { |
186 var link = document.createElement('a'); | 257 var link = document.createElement('a'); |
| 258 if (opt_disabled) |
| 259 link.classList.add('disabled'); |
| 260 else |
| 261 link.classList.remove('disabled'); |
| 262 |
187 link.setAttribute('href', '#'); | 263 link.setAttribute('href', '#'); |
188 link.textContent = ' inspect '; | 264 link.textContent = text; |
189 link.addEventListener( | 265 link.addEventListener('click', handler, true); |
190 'click', | |
191 inspect.bind(this, data), | |
192 true); | |
193 return link; | 266 return link; |
194 } | 267 } |
195 | 268 |
196 function createTerminateElement(data) { | |
197 var link = document.createElement('a'); | |
198 if (data.attached) | |
199 link.disabled = true; | |
200 | |
201 link.setAttribute('href', '#'); | |
202 link.textContent = ' terminate '; | |
203 link.addEventListener( | |
204 'click', | |
205 terminate.bind(this, data), | |
206 true); | |
207 return link; | |
208 } | |
209 | |
210 | 269 |
211 function initPortForwarding() { | 270 function initPortForwarding() { |
212 $('port-forwarding-enable').addEventListener('change', enablePortForwarding); | 271 $('port-forwarding-enable').addEventListener('change', enablePortForwarding); |
213 | 272 |
214 $('port-forwarding-config-open').addEventListener( | 273 $('port-forwarding-config-open').addEventListener( |
215 'click', openPortForwardingConfig); | 274 'click', openPortForwardingConfig); |
216 $('port-forwarding-config-close').addEventListener( | 275 $('port-forwarding-config-close').addEventListener( |
217 'click', closePortForwardingConfig); | 276 'click', closePortForwardingConfig); |
218 $('port-forwarding-config-done').addEventListener( | 277 $('port-forwarding-config-done').addEventListener( |
219 'click', commitPortForwardingConfig); | 278 'click', commitPortForwardingConfig); |
(...skipping 212 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
432 if (line.querySelector('.invalid')) | 491 if (line.querySelector('.invalid')) |
433 return; | 492 return; |
434 line.classList.remove('fresh'); | 493 line.classList.remove('fresh'); |
435 var freshLine = createEmptyConfigLine(); | 494 var freshLine = createEmptyConfigLine(); |
436 line.parentNode.appendChild(freshLine); | 495 line.parentNode.appendChild(freshLine); |
437 if (opt_selectNew) | 496 if (opt_selectNew) |
438 freshLine.querySelector('.port').focus(); | 497 freshLine.querySelector('.port').focus(); |
439 } | 498 } |
440 | 499 |
441 document.addEventListener('DOMContentLoaded', onload); | 500 document.addEventListener('DOMContentLoaded', onload); |
OLD | NEW |