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 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
70 } | 78 } |
71 | 79 |
72 function populateWorkersList(data) { | 80 function populateWorkersList(data) { |
73 removeChildren('workers'); | 81 removeChildren('workers'); |
74 | 82 |
75 for (var i = 0; i < data.length; i++) | 83 for (var i = 0; i < data.length; i++) |
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 if (!devices) |
81 if (!devices || devicesDigest == window.devicesDigest) | |
82 return; | 89 return; |
83 | 90 |
84 window.devicesDigest = devicesDigest; | 91 function alreadyDisplayed(element, data) { |
| 92 var json = JSON.stringify(data); |
| 93 if (element.cachedJSON == json) |
| 94 return true; |
| 95 element.cachedJSON = json; |
| 96 return false; |
| 97 } |
85 | 98 |
86 var containerElement = $('devices'); | 99 var deviceList = $('devices'); |
87 containerElement.textContent = ''; | 100 if (alreadyDisplayed(deviceList, devices)) |
| 101 return; |
88 | 102 |
89 // Populate with new entries | 103 function removeObsolete(validIds, section) { |
| 104 if (validIds.indexOf(section.id) < 0) |
| 105 section.remove(); |
| 106 } |
| 107 |
| 108 var newDeviceIds = devices.map(function(d) { return d.adbGlobalId }); |
| 109 Array.prototype.forEach.call( |
| 110 deviceList.querySelectorAll('.device'), |
| 111 removeObsolete.bind(null, newDeviceIds)); |
| 112 |
90 for (var d = 0; d < devices.length; d++) { | 113 for (var d = 0; d < devices.length; d++) { |
91 var device = devices[d]; | 114 var device = devices[d]; |
92 | 115 |
93 var deviceHeader = document.createElement('div'); | 116 var browserList; |
94 deviceHeader.className = 'section'; | 117 var deviceSection = $(device.adbGlobalId); |
95 deviceHeader.textContent = device.adbModel; | 118 if (deviceSection) { |
96 containerElement.appendChild(deviceHeader); | 119 browserList = deviceSection.querySelector('.browsers'); |
| 120 } else { |
| 121 deviceSection = document.createElement('div'); |
| 122 deviceSection.id = device.adbGlobalId; |
| 123 deviceSection.className = 'device list'; |
| 124 deviceList.appendChild(deviceSection); |
97 | 125 |
98 var deviceContent = document.createElement('div'); | 126 var deviceHeader = document.createElement('div'); |
99 deviceContent.className = 'list'; | 127 deviceHeader.className = 'section'; |
100 containerElement.appendChild(deviceContent); | 128 deviceHeader.textContent = device.adbModel; |
| 129 deviceSection.appendChild(deviceHeader); |
| 130 |
| 131 browserList = document.createElement('div'); |
| 132 browserList.className = 'browsers'; |
| 133 deviceSection.appendChild(browserList); |
| 134 } |
| 135 |
| 136 if (alreadyDisplayed(deviceSection, device)) |
| 137 continue; |
| 138 |
| 139 var newBrowserIds = |
| 140 device.browsers.map(function(b) { return b.adbGlobalId }); |
| 141 Array.prototype.forEach.call( |
| 142 browserList.querySelectorAll('.browser'), |
| 143 removeObsolete.bind(null, newBrowserIds)); |
101 | 144 |
102 for (var b = 0; b < device.browsers.length; b++) { | 145 for (var b = 0; b < device.browsers.length; b++) { |
103 var browser = device.browsers[b]; | 146 var browser = device.browsers[b]; |
104 | 147 |
105 var browserHeader = document.createElement('div'); | 148 var pageList; |
106 browserHeader.className = 'small-section'; | 149 var browserSection = $(browser.adbGlobalId); |
107 browserHeader.textContent = browser.adbBrowserName; | 150 if (browserSection) { |
108 deviceContent.appendChild(browserHeader); | 151 pageList = browserSection.querySelector('.pages'); |
| 152 pageList.textContent = ''; |
| 153 } else { |
| 154 browserSection = document.createElement('div'); |
| 155 browserSection.id = browser.adbGlobalId; |
| 156 browserSection.className = 'browser'; |
| 157 browserList.appendChild(browserSection); |
109 | 158 |
110 var browserPages = document.createElement('div'); | 159 var browserHeader = document.createElement('div'); |
111 browserPages.className = 'list package'; | 160 browserHeader.className = 'small-section'; |
112 deviceContent.appendChild(browserPages); | 161 browserHeader.textContent = browser.adbBrowserName; |
| 162 browserSection.appendChild(browserHeader); |
| 163 |
| 164 var newPage = document.createElement('div'); |
| 165 newPage.className = 'open'; |
| 166 |
| 167 var newPageUrl = document.createElement('input'); |
| 168 newPageUrl.type = 'text'; |
| 169 newPageUrl.placeholder = 'Open tab with url'; |
| 170 newPage.appendChild(newPageUrl); |
| 171 |
| 172 var openHandler = function(browserId, input) { |
| 173 open(browserId, input.value || 'about:blank'); |
| 174 input.value = ''; |
| 175 }.bind(null, browser.adbGlobalId, newPageUrl); |
| 176 newPageUrl.addEventListener('keyup', function(handler, event) { |
| 177 if (event.keyIdentifier == 'Enter' && event.target.value) |
| 178 handler(); |
| 179 }.bind(null, openHandler), true); |
| 180 |
| 181 var newPageButton = document.createElement('button'); |
| 182 newPageButton.textContent = 'Open'; |
| 183 newPage.appendChild(newPageButton); |
| 184 newPageButton.addEventListener('click', openHandler, true); |
| 185 |
| 186 browserSection.appendChild(newPage); |
| 187 |
| 188 pageList = document.createElement('div'); |
| 189 pageList.className = 'list pages'; |
| 190 browserSection.appendChild(pageList); |
| 191 } |
| 192 |
| 193 if (alreadyDisplayed(browserSection, browser)) |
| 194 continue; |
113 | 195 |
114 for (var p = 0; p < browser.pages.length; p++) { | 196 for (var p = 0; p < browser.pages.length; p++) { |
115 addTargetToList( | 197 var page = browser.pages[p]; |
116 browser.pages[p], browserPages, ['faviconUrl', 'name', 'url']); | 198 var row = addTargetToList( |
| 199 page, pageList, ['faviconUrl', 'name', 'url']); |
| 200 row.appendChild(createActionLink( |
| 201 'reload', reload.bind(null, page), page.attached)); |
| 202 row.appendChild(createActionLink( |
| 203 'close', terminate.bind(null, page), page.attached)); |
117 } | 204 } |
118 } | 205 } |
119 } | 206 } |
120 } | 207 } |
121 | 208 |
122 function addToPagesList(data) { | 209 function addToPagesList(data) { |
123 addTargetToList(data, $('pages'), ['faviconUrl', 'name', 'url']); | 210 addTargetToList(data, $('pages'), ['faviconUrl', 'name', 'url']); |
124 } | 211 } |
125 | 212 |
126 function addToExtensionsList(data) { | 213 function addToExtensionsList(data) { |
127 addTargetToList(data, $('extensions'), ['name', 'url']); | 214 addTargetToList(data, $('extensions'), ['name', 'url']); |
128 } | 215 } |
129 | 216 |
130 function addToAppsList(data) { | 217 function addToAppsList(data) { |
131 addTargetToList(data, $('apps'), ['name', 'url']); | 218 addTargetToList(data, $('apps'), ['name', 'url']); |
132 } | 219 } |
133 | 220 |
134 function addToWorkersList(data) { | 221 function addToWorkersList(data) { |
135 addTargetToList(data, | 222 var row = addTargetToList(data, $('workers'), ['name', 'url', 'pid']); |
136 $('workers'), | 223 row.appendChild(createActionLink( |
137 ['name', 'url', 'pid'], | 224 'terminate', terminate.bind(null, data), data.attached)); |
138 true); | |
139 } | 225 } |
140 | 226 |
141 function addToOthersList(data) { | 227 function addToOthersList(data) { |
142 addTargetToList(data, $('others'), ['url']); | 228 addTargetToList(data, $('others'), ['url']); |
143 } | 229 } |
144 | 230 |
145 function formatValue(data, property) { | 231 function formatValue(data, property) { |
146 var value = data[property]; | 232 var value = data[property]; |
147 | 233 |
148 if (property == 'faviconUrl') { | 234 if (property == 'faviconUrl') { |
149 var faviconElement = document.createElement('img'); | 235 var faviconElement = document.createElement('img'); |
150 if (value) | 236 if (value) |
151 faviconElement.src = value; | 237 faviconElement.src = value; |
152 return faviconElement; | 238 return faviconElement; |
153 } | 239 } |
154 | 240 |
155 var text = value ? String(value) : ''; | 241 var text = value ? String(value) : ''; |
156 if (text.length > 100) | 242 if (text.length > 100) |
157 text = text.substring(0, 100) + '\u2026'; | 243 text = text.substring(0, 100) + '\u2026'; |
158 | 244 |
159 if (property == 'pid') | 245 if (property == 'pid') |
160 text = 'Pid:' + text; | 246 text = 'Pid:' + text; |
161 | 247 |
162 var span = document.createElement('span'); | 248 var span = document.createElement('span'); |
163 span.textContent = ' ' + text + ' '; | 249 span.textContent = ' ' + text + ' '; |
164 span.className = property; | 250 span.className = property; |
165 return span; | 251 return span; |
166 } | 252 } |
167 | 253 |
168 function addTargetToList(data, list, properties, canTerminate) { | 254 function addTargetToList(data, list, properties) { |
169 var row = document.createElement('div'); | 255 var row = document.createElement('div'); |
170 row.className = 'row'; | 256 row.className = 'row'; |
171 for (var j = 0; j < properties.length; j++) | 257 for (var j = 0; j < properties.length; j++) |
172 row.appendChild(formatValue(data, properties[j])); | 258 row.appendChild(formatValue(data, properties[j])); |
173 | 259 |
174 row.appendChild(createInspectElement(data)); | 260 row.appendChild(createActionLink('inspect', inspect.bind(null, data))); |
175 | |
176 if (canTerminate) | |
177 row.appendChild(createTerminateElement(data)); | |
178 | 261 |
179 row.processId = data.processId; | 262 row.processId = data.processId; |
180 row.routeId = data.routeId; | 263 row.routeId = data.routeId; |
181 | 264 |
182 list.appendChild(row); | 265 list.appendChild(row); |
| 266 return row; |
183 } | 267 } |
184 | 268 |
185 function createInspectElement(data) { | 269 function createActionLink(text, handler, opt_disabled) { |
186 var link = document.createElement('a'); | 270 var link = document.createElement('a'); |
| 271 if (opt_disabled) |
| 272 link.classList.add('disabled'); |
| 273 else |
| 274 link.classList.remove('disabled'); |
| 275 |
187 link.setAttribute('href', '#'); | 276 link.setAttribute('href', '#'); |
188 link.textContent = ' inspect '; | 277 link.textContent = text; |
189 link.addEventListener( | 278 link.addEventListener('click', handler, true); |
190 'click', | |
191 inspect.bind(this, data), | |
192 true); | |
193 return link; | 279 return link; |
194 } | 280 } |
195 | 281 |
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 | 282 |
211 function initPortForwarding() { | 283 function initPortForwarding() { |
212 $('port-forwarding-enable').addEventListener('change', enablePortForwarding); | 284 $('port-forwarding-enable').addEventListener('change', enablePortForwarding); |
213 | 285 |
214 $('port-forwarding-config-open').addEventListener( | 286 $('port-forwarding-config-open').addEventListener( |
215 'click', openPortForwardingConfig); | 287 'click', openPortForwardingConfig); |
216 $('port-forwarding-config-close').addEventListener( | 288 $('port-forwarding-config-close').addEventListener( |
217 'click', closePortForwardingConfig); | 289 'click', closePortForwardingConfig); |
218 $('port-forwarding-config-done').addEventListener( | 290 $('port-forwarding-config-done').addEventListener( |
219 'click', commitPortForwardingConfig); | 291 'click', commitPortForwardingConfig); |
(...skipping 212 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
432 if (line.querySelector('.invalid')) | 504 if (line.querySelector('.invalid')) |
433 return; | 505 return; |
434 line.classList.remove('fresh'); | 506 line.classList.remove('fresh'); |
435 var freshLine = createEmptyConfigLine(); | 507 var freshLine = createEmptyConfigLine(); |
436 line.parentNode.appendChild(freshLine); | 508 line.parentNode.appendChild(freshLine); |
437 if (opt_selectNew) | 509 if (opt_selectNew) |
438 freshLine.querySelector('.port').focus(); | 510 freshLine.querySelector('.port').focus(); |
439 } | 511 } |
440 | 512 |
441 document.addEventListener('DOMContentLoaded', onload); | 513 document.addEventListener('DOMContentLoaded', onload); |
OLD | NEW |