OLD | NEW |
1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2015 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 /** |
| 5 * @implements {WebInspector.TargetManager.Observer} |
| 6 * @unrestricted |
| 7 */ |
| 8 WebInspector.ServiceWorkersView = class extends WebInspector.VBox { |
| 9 constructor() { |
| 10 super(true); |
4 | 11 |
5 /** | 12 this._reportView = new WebInspector.ReportView(WebInspector.UIString('Servic
e Workers')); |
6 * @constructor | |
7 * @extends {WebInspector.VBox} | |
8 * @implements {WebInspector.TargetManager.Observer} | |
9 */ | |
10 WebInspector.ServiceWorkersView = function() | |
11 { | |
12 WebInspector.VBox.call(this, true); | |
13 | |
14 this._reportView = new WebInspector.ReportView(WebInspector.UIString("Servic
e Workers")); | |
15 this._reportView.show(this.contentElement); | 13 this._reportView.show(this.contentElement); |
16 | 14 |
17 this._toolbar = this._reportView.createToolbar(); | 15 this._toolbar = this._reportView.createToolbar(); |
18 | 16 |
19 /** @type {!Map<!WebInspector.ServiceWorkerRegistration, !WebInspector.Servi
ceWorkersView.Section>} */ | 17 /** @type {!Map<!WebInspector.ServiceWorkerRegistration, !WebInspector.Servi
ceWorkersView.Section>} */ |
20 this._sections = new Map(); | 18 this._sections = new Map(); |
21 | 19 |
22 this._toolbar.appendToolbarItem(WebInspector.NetworkConditionsSelector.creat
eOfflineToolbarCheckbox()); | 20 this._toolbar.appendToolbarItem(WebInspector.NetworkConditionsSelector.creat
eOfflineToolbarCheckbox()); |
23 var forceUpdate = new WebInspector.ToolbarCheckbox(WebInspector.UIString("Up
date on reload"), WebInspector.UIString("Force update Service Worker on page rel
oad"), WebInspector.settings.createSetting("serviceWorkerUpdateOnReload", false)
); | 21 var forceUpdate = new WebInspector.ToolbarCheckbox( |
| 22 WebInspector.UIString('Update on reload'), WebInspector.UIString('Force
update Service Worker on page reload'), |
| 23 WebInspector.settings.createSetting('serviceWorkerUpdateOnReload', false
)); |
24 this._toolbar.appendToolbarItem(forceUpdate); | 24 this._toolbar.appendToolbarItem(forceUpdate); |
25 var fallbackToNetwork = new WebInspector.ToolbarCheckbox(WebInspector.UIStri
ng("Bypass for network"), WebInspector.UIString("Bypass Service Worker and load
resources from the network"), WebInspector.settings.createSetting("bypassService
Worker", false)); | 25 var fallbackToNetwork = new WebInspector.ToolbarCheckbox( |
| 26 WebInspector.UIString('Bypass for network'), |
| 27 WebInspector.UIString('Bypass Service Worker and load resources from the
network'), |
| 28 WebInspector.settings.createSetting('bypassServiceWorker', false)); |
26 this._toolbar.appendToolbarItem(fallbackToNetwork); | 29 this._toolbar.appendToolbarItem(fallbackToNetwork); |
27 this._toolbar.appendSpacer(); | 30 this._toolbar.appendSpacer(); |
28 this._showAllCheckbox = new WebInspector.ToolbarCheckbox(WebInspector.UIStri
ng("Show all"), WebInspector.UIString("Show all Service Workers regardless of th
e origin")); | 31 this._showAllCheckbox = new WebInspector.ToolbarCheckbox( |
29 this._showAllCheckbox.inputElement.addEventListener("change", this._updateSe
ctionVisibility.bind(this), false); | 32 WebInspector.UIString('Show all'), WebInspector.UIString('Show all Servi
ce Workers regardless of the origin')); |
| 33 this._showAllCheckbox.inputElement.addEventListener('change', this._updateSe
ctionVisibility.bind(this), false); |
30 this._toolbar.appendToolbarItem(this._showAllCheckbox); | 34 this._toolbar.appendToolbarItem(this._showAllCheckbox); |
31 | 35 |
32 /** @type {!Map<!WebInspector.Target, !Array<!WebInspector.EventTarget.Event
Descriptor>>}*/ | 36 /** @type {!Map<!WebInspector.Target, !Array<!WebInspector.EventTarget.Event
Descriptor>>}*/ |
33 this._eventListeners = new Map(); | 37 this._eventListeners = new Map(); |
34 WebInspector.targetManager.observeTargets(this); | 38 WebInspector.targetManager.observeTargets(this); |
35 }; | 39 } |
36 | 40 |
37 WebInspector.ServiceWorkersView.prototype = { | 41 /** |
38 /** | 42 * @override |
39 * @override | 43 * @param {!WebInspector.Target} target |
40 * @param {!WebInspector.Target} target | 44 */ |
41 */ | 45 targetAdded(target) { |
42 targetAdded: function(target) | 46 if (this._manager || !target.serviceWorkerManager) |
43 { | 47 return; |
44 if (this._manager || !target.serviceWorkerManager) | 48 this._manager = target.serviceWorkerManager; |
45 return; | 49 this._subTargetsManager = target.subTargetsManager; |
46 this._manager = target.serviceWorkerManager; | 50 this._securityOriginManager = WebInspector.SecurityOriginManager.fromTarget(
target); |
47 this._subTargetsManager = target.subTargetsManager; | |
48 this._securityOriginManager = WebInspector.SecurityOriginManager.fromTar
get(target); | |
49 | 51 |
50 for (var registration of this._manager.registrations().values()) | 52 for (var registration of this._manager.registrations().values()) |
51 this._updateRegistration(registration); | 53 this._updateRegistration(registration); |
52 | 54 |
53 this._eventListeners.set(target, [ | 55 this._eventListeners.set(target, [ |
54 this._manager.addEventListener(WebInspector.ServiceWorkerManager.Eve
nts.RegistrationUpdated, this._registrationUpdated, this), | 56 this._manager.addEventListener( |
55 this._manager.addEventListener(WebInspector.ServiceWorkerManager.Eve
nts.RegistrationDeleted, this._registrationDeleted, this), | 57 WebInspector.ServiceWorkerManager.Events.RegistrationUpdated, this._re
gistrationUpdated, this), |
56 this._manager.addEventListener(WebInspector.ServiceWorkerManager.Eve
nts.RegistrationErrorAdded, this._registrationErrorAdded, this), | 58 this._manager.addEventListener( |
57 this._securityOriginManager.addEventListener(WebInspector.SecurityOr
iginManager.Events.SecurityOriginAdded, this._updateSectionVisibility, this), | 59 WebInspector.ServiceWorkerManager.Events.RegistrationDeleted, this._re
gistrationDeleted, this), |
58 this._securityOriginManager.addEventListener(WebInspector.SecurityOr
iginManager.Events.SecurityOriginRemoved, this._updateSectionVisibility, this), | 60 this._manager.addEventListener( |
59 ]); | 61 WebInspector.ServiceWorkerManager.Events.RegistrationErrorAdded, this.
_registrationErrorAdded, this), |
60 }, | 62 this._securityOriginManager.addEventListener( |
| 63 WebInspector.SecurityOriginManager.Events.SecurityOriginAdded, this._u
pdateSectionVisibility, this), |
| 64 this._securityOriginManager.addEventListener( |
| 65 WebInspector.SecurityOriginManager.Events.SecurityOriginRemoved, this.
_updateSectionVisibility, this), |
| 66 ]); |
| 67 } |
61 | 68 |
62 /** | 69 /** |
63 * @override | 70 * @override |
64 * @param {!WebInspector.Target} target | 71 * @param {!WebInspector.Target} target |
65 */ | 72 */ |
66 targetRemoved: function(target) | 73 targetRemoved(target) { |
67 { | 74 if (!this._manager || this._manager !== target.serviceWorkerManager) |
68 if (!this._manager || this._manager !== target.serviceWorkerManager) | 75 return; |
69 return; | |
70 | 76 |
71 WebInspector.EventTarget.removeEventListeners(this._eventListeners.get(t
arget)); | 77 WebInspector.EventTarget.removeEventListeners(this._eventListeners.get(targe
t)); |
72 this._eventListeners.delete(target); | 78 this._eventListeners.delete(target); |
73 this._manager = null; | 79 this._manager = null; |
74 this._subTargetsManager = null; | 80 this._subTargetsManager = null; |
75 this._securityOriginManager = null; | 81 this._securityOriginManager = null; |
76 }, | 82 } |
77 | 83 |
78 _updateSectionVisibility: function() | 84 _updateSectionVisibility() { |
79 { | 85 var securityOrigins = new Set(this._securityOriginManager.securityOrigins())
; |
80 var securityOrigins = new Set(this._securityOriginManager.securityOrigin
s()); | 86 for (var section of this._sections.values()) { |
81 for (var section of this._sections.values()) { | 87 var visible = this._showAllCheckbox.checked() || securityOrigins.has(secti
on._registration.securityOrigin); |
82 var visible = this._showAllCheckbox.checked() || securityOrigins.has
(section._registration.securityOrigin); | 88 section._section.element.classList.toggle('hidden', !visible); |
83 section._section.element.classList.toggle("hidden", !visible); | 89 } |
84 } | 90 } |
85 }, | |
86 | 91 |
87 /** | 92 /** |
88 * @param {!WebInspector.Event} event | 93 * @param {!WebInspector.Event} event |
89 */ | 94 */ |
90 _registrationUpdated: function(event) | 95 _registrationUpdated(event) { |
91 { | 96 var registration = /** @type {!WebInspector.ServiceWorkerRegistration} */ (e
vent.data); |
92 var registration = /** @type {!WebInspector.ServiceWorkerRegistration} *
/ (event.data); | 97 this._updateRegistration(registration); |
93 this._updateRegistration(registration); | 98 } |
94 }, | |
95 | 99 |
96 /** | 100 /** |
97 * @param {!WebInspector.Event} event | 101 * @param {!WebInspector.Event} event |
98 */ | 102 */ |
99 _registrationErrorAdded: function(event) | 103 _registrationErrorAdded(event) { |
100 { | 104 var registration = /** @type {!WebInspector.ServiceWorkerRegistration} */ (e
vent.data['registration']); |
101 var registration = /** @type {!WebInspector.ServiceWorkerRegistration} *
/ (event.data["registration"]); | 105 var error = /** @type {!ServiceWorkerAgent.ServiceWorkerErrorMessage} */ (ev
ent.data['error']); |
102 var error = /** @type {!ServiceWorkerAgent.ServiceWorkerErrorMessage} */
(event.data["error"]); | 106 var section = this._sections.get(registration); |
103 var section = this._sections.get(registration); | 107 if (!section) |
104 if (!section) | 108 return; |
105 return; | 109 section._addError(error); |
106 section._addError(error); | 110 } |
107 }, | |
108 | 111 |
109 /** | 112 /** |
110 * @param {!WebInspector.ServiceWorkerRegistration} registration | 113 * @param {!WebInspector.ServiceWorkerRegistration} registration |
111 */ | 114 */ |
112 _updateRegistration: function(registration) | 115 _updateRegistration(registration) { |
113 { | 116 var section = this._sections.get(registration); |
114 var section = this._sections.get(registration); | 117 if (!section) { |
115 if (!section) { | 118 section = new WebInspector.ServiceWorkersView.Section( |
116 section = new WebInspector.ServiceWorkersView.Section(this._manager,
this._subTargetsManager, this._reportView.appendSection(""), registration); | 119 this._manager, this._subTargetsManager, this._reportView.appendSection
(''), registration); |
117 this._sections.set(registration, section); | 120 this._sections.set(registration, section); |
118 } | 121 } |
119 this._updateSectionVisibility(); | 122 this._updateSectionVisibility(); |
120 section._scheduleUpdate(); | 123 section._scheduleUpdate(); |
121 }, | 124 } |
122 | 125 |
123 /** | 126 /** |
124 * @param {!WebInspector.Event} event | 127 * @param {!WebInspector.Event} event |
125 */ | 128 */ |
126 _registrationDeleted: function(event) | 129 _registrationDeleted(event) { |
127 { | 130 var registration = /** @type {!WebInspector.ServiceWorkerRegistration} */ (e
vent.data); |
128 var registration = /** @type {!WebInspector.ServiceWorkerRegistration} *
/ (event.data); | 131 var section = this._sections.get(registration); |
129 var section = this._sections.get(registration); | 132 if (section) |
130 if (section) | 133 section._section.remove(); |
131 section._section.remove(); | 134 this._sections.delete(registration); |
132 this._sections.delete(registration); | 135 } |
133 }, | |
134 | |
135 __proto__: WebInspector.VBox.prototype | |
136 }; | 136 }; |
137 | 137 |
138 /** | 138 /** |
139 * @constructor | 139 * @unrestricted |
140 * @param {!WebInspector.ServiceWorkerManager} manager | |
141 * @param {!WebInspector.SubTargetsManager} subTargetsManager | |
142 * @param {!WebInspector.ReportView.Section} section | |
143 * @param {!WebInspector.ServiceWorkerRegistration} registration | |
144 */ | 140 */ |
145 WebInspector.ServiceWorkersView.Section = function(manager, subTargetsManager, s
ection, registration) | 141 WebInspector.ServiceWorkersView.Section = class { |
146 { | 142 /** |
| 143 * @param {!WebInspector.ServiceWorkerManager} manager |
| 144 * @param {!WebInspector.SubTargetsManager} subTargetsManager |
| 145 * @param {!WebInspector.ReportView.Section} section |
| 146 * @param {!WebInspector.ServiceWorkerRegistration} registration |
| 147 */ |
| 148 constructor(manager, subTargetsManager, section, registration) { |
147 this._manager = manager; | 149 this._manager = manager; |
148 this._subTargetsManager = subTargetsManager; | 150 this._subTargetsManager = subTargetsManager; |
149 this._section = section; | 151 this._section = section; |
150 this._registration = registration; | 152 this._registration = registration; |
151 | 153 |
152 this._toolbar = section.createToolbar(); | 154 this._toolbar = section.createToolbar(); |
153 this._toolbar.renderAsLinks(); | 155 this._toolbar.renderAsLinks(); |
154 this._updateButton = new WebInspector.ToolbarButton(WebInspector.UIString("U
pdate"), undefined, WebInspector.UIString("Update")); | 156 this._updateButton = |
155 this._updateButton.addEventListener("click", this._updateButtonClicked.bind(
this)); | 157 new WebInspector.ToolbarButton(WebInspector.UIString('Update'), undefine
d, WebInspector.UIString('Update')); |
| 158 this._updateButton.addEventListener('click', this._updateButtonClicked.bind(
this)); |
156 this._toolbar.appendToolbarItem(this._updateButton); | 159 this._toolbar.appendToolbarItem(this._updateButton); |
157 this._pushButton = new WebInspector.ToolbarButton(WebInspector.UIString("Emu
late push event"), undefined, WebInspector.UIString("Push")); | 160 this._pushButton = new WebInspector.ToolbarButton( |
158 this._pushButton.addEventListener("click", this._pushButtonClicked.bind(this
)); | 161 WebInspector.UIString('Emulate push event'), undefined, WebInspector.UIS
tring('Push')); |
| 162 this._pushButton.addEventListener('click', this._pushButtonClicked.bind(this
)); |
159 this._toolbar.appendToolbarItem(this._pushButton); | 163 this._toolbar.appendToolbarItem(this._pushButton); |
160 this._syncButton = new WebInspector.ToolbarButton(WebInspector.UIString("Emu
late background sync event"), undefined, WebInspector.UIString("Sync")); | 164 this._syncButton = new WebInspector.ToolbarButton( |
161 this._syncButton.addEventListener("click", this._syncButtonClicked.bind(this
)); | 165 WebInspector.UIString('Emulate background sync event'), undefined, WebIn
spector.UIString('Sync')); |
| 166 this._syncButton.addEventListener('click', this._syncButtonClicked.bind(this
)); |
162 this._toolbar.appendToolbarItem(this._syncButton); | 167 this._toolbar.appendToolbarItem(this._syncButton); |
163 this._deleteButton = new WebInspector.ToolbarButton(WebInspector.UIString("U
nregister service worker"), undefined, WebInspector.UIString("Unregister")); | 168 this._deleteButton = new WebInspector.ToolbarButton( |
164 this._deleteButton.addEventListener("click", this._unregisterButtonClicked.b
ind(this)); | 169 WebInspector.UIString('Unregister service worker'), undefined, WebInspec
tor.UIString('Unregister')); |
| 170 this._deleteButton.addEventListener('click', this._unregisterButtonClicked.b
ind(this)); |
165 this._toolbar.appendToolbarItem(this._deleteButton); | 171 this._toolbar.appendToolbarItem(this._deleteButton); |
166 | 172 |
167 // Preserve the order. | 173 // Preserve the order. |
168 this._section.appendField(WebInspector.UIString("Source")); | 174 this._section.appendField(WebInspector.UIString('Source')); |
169 this._section.appendField(WebInspector.UIString("Status")); | 175 this._section.appendField(WebInspector.UIString('Status')); |
170 this._section.appendField(WebInspector.UIString("Clients")); | 176 this._section.appendField(WebInspector.UIString('Clients')); |
171 this._section.appendField(WebInspector.UIString("Errors")); | 177 this._section.appendField(WebInspector.UIString('Errors')); |
172 this._errorsList = this._wrapWidget(this._section.appendRow()); | 178 this._errorsList = this._wrapWidget(this._section.appendRow()); |
173 this._errorsList.classList.add("service-worker-error-stack", "monospace", "h
idden"); | 179 this._errorsList.classList.add('service-worker-error-stack', 'monospace', 'h
idden'); |
174 | 180 |
175 this._linkifier = new WebInspector.Linkifier(); | 181 this._linkifier = new WebInspector.Linkifier(); |
176 /** @type {!Map<string, !WebInspector.TargetInfo>} */ | 182 /** @type {!Map<string, !WebInspector.TargetInfo>} */ |
177 this._clientInfoCache = new Map(); | 183 this._clientInfoCache = new Map(); |
178 for (var error of registration.errors) | 184 for (var error of registration.errors) |
179 this._addError(error); | 185 this._addError(error); |
180 this._throttler = new WebInspector.Throttler(500); | 186 this._throttler = new WebInspector.Throttler(500); |
181 }; | 187 } |
182 | 188 |
183 WebInspector.ServiceWorkersView.Section.prototype = { | 189 _scheduleUpdate() { |
184 _scheduleUpdate: function() | 190 if (WebInspector.ServiceWorkersView._noThrottle) { |
185 { | 191 this._update(); |
186 if (WebInspector.ServiceWorkersView._noThrottle) { | 192 return; |
187 this._update(); | 193 } |
188 return; | 194 this._throttler.schedule(this._update.bind(this)); |
189 } | 195 } |
190 this._throttler.schedule(this._update.bind(this)); | 196 |
191 }, | 197 /** |
| 198 * @param {string} versionId |
| 199 * @return {?WebInspector.Target} |
| 200 */ |
| 201 _targetForVersionId(versionId) { |
| 202 var version = this._manager.findVersion(versionId); |
| 203 if (!version || !version.targetId) |
| 204 return null; |
| 205 return this._subTargetsManager.targetForId(version.targetId); |
| 206 } |
| 207 |
| 208 /** |
| 209 * @return {!Promise} |
| 210 */ |
| 211 _update() { |
| 212 var fingerprint = this._registration.fingerprint(); |
| 213 if (fingerprint === this._fingerprint) |
| 214 return Promise.resolve(); |
| 215 this._fingerprint = fingerprint; |
| 216 |
| 217 this._toolbar.setEnabled(!this._registration.isDeleted); |
| 218 |
| 219 var versions = this._registration.versionsByMode(); |
| 220 var title = this._registration.isDeleted ? WebInspector.UIString('%s - delet
ed', this._registration.scopeURL) : |
| 221 this._registration.scopeURL; |
| 222 this._section.setTitle(title); |
| 223 |
| 224 var active = versions.get(WebInspector.ServiceWorkerVersion.Modes.Active); |
| 225 var waiting = versions.get(WebInspector.ServiceWorkerVersion.Modes.Waiting); |
| 226 var installing = versions.get(WebInspector.ServiceWorkerVersion.Modes.Instal
ling); |
| 227 |
| 228 var statusValue = this._wrapWidget(this._section.appendField(WebInspector.UI
String('Status'))); |
| 229 statusValue.removeChildren(); |
| 230 var versionsStack = statusValue.createChild('div', 'service-worker-version-s
tack'); |
| 231 versionsStack.createChild('div', 'service-worker-version-stack-bar'); |
| 232 |
| 233 if (active) { |
| 234 var scriptElement = this._section.appendField(WebInspector.UIString('Sourc
e')); |
| 235 scriptElement.removeChildren(); |
| 236 var fileName = WebInspector.ParsedURL.extractName(active.scriptURL); |
| 237 scriptElement.appendChild(WebInspector.linkifyURLAsNode(active.scriptURL,
fileName)); |
| 238 scriptElement.createChild('div', 'report-field-value-subtitle').textConten
t = |
| 239 WebInspector.UIString('Received %s', new Date(active.scriptResponseTim
e * 1000).toLocaleString()); |
| 240 |
| 241 var activeEntry = versionsStack.createChild('div', 'service-worker-version
'); |
| 242 activeEntry.createChild('div', 'service-worker-active-circle'); |
| 243 activeEntry.createChild('span').textContent = |
| 244 WebInspector.UIString('#%s activated and is %s', active.id, active.run
ningStatus); |
| 245 |
| 246 if (active.isRunning() || active.isStarting()) { |
| 247 createLink(activeEntry, WebInspector.UIString('stop'), this._stopButtonC
licked.bind(this, active.id)); |
| 248 if (!this._targetForVersionId(active.id)) |
| 249 createLink(activeEntry, WebInspector.UIString('inspect'), this._inspec
tButtonClicked.bind(this, active.id)); |
| 250 } else if (active.isStartable()) { |
| 251 createLink(activeEntry, WebInspector.UIString('start'), this._startButto
nClicked.bind(this)); |
| 252 } |
| 253 |
| 254 var clientsList = this._wrapWidget(this._section.appendField(WebInspector.
UIString('Clients'))); |
| 255 clientsList.removeChildren(); |
| 256 this._section.setFieldVisible(WebInspector.UIString('Clients'), active.con
trolledClients.length); |
| 257 for (var client of active.controlledClients) { |
| 258 var clientLabelText = clientsList.createChild('div', 'service-worker-cli
ent'); |
| 259 if (this._clientInfoCache.has(client)) |
| 260 this._updateClientInfo( |
| 261 clientLabelText, /** @type {!WebInspector.TargetInfo} */ (this._cl
ientInfoCache.get(client))); |
| 262 this._subTargetsManager.getTargetInfo(client, this._onClientInfo.bind(th
is, clientLabelText)); |
| 263 } |
| 264 } |
| 265 |
| 266 if (waiting) { |
| 267 var waitingEntry = versionsStack.createChild('div', 'service-worker-versio
n'); |
| 268 waitingEntry.createChild('div', 'service-worker-waiting-circle'); |
| 269 waitingEntry.createChild('span').textContent = WebInspector.UIString('#%s
waiting to activate', waiting.id); |
| 270 createLink(waitingEntry, WebInspector.UIString('skipWaiting'), this._skipB
uttonClicked.bind(this)); |
| 271 waitingEntry.createChild('div', 'service-worker-subtitle').textContent = |
| 272 new Date(waiting.scriptResponseTime * 1000).toLocaleString(); |
| 273 if (!this._targetForVersionId(waiting.id) && (waiting.isRunning() || waiti
ng.isStarting())) |
| 274 createLink(waitingEntry, WebInspector.UIString('inspect'), this._inspect
ButtonClicked.bind(this, waiting.id)); |
| 275 } |
| 276 if (installing) { |
| 277 var installingEntry = versionsStack.createChild('div', 'service-worker-ver
sion'); |
| 278 installingEntry.createChild('div', 'service-worker-installing-circle'); |
| 279 installingEntry.createChild('span').textContent = WebInspector.UIString('#
%s installing', installing.id); |
| 280 installingEntry.createChild('div', 'service-worker-subtitle').textContent
= |
| 281 new Date(installing.scriptResponseTime * 1000).toLocaleString(); |
| 282 if (!this._targetForVersionId(installing.id) && (installing.isRunning() ||
installing.isStarting())) |
| 283 createLink( |
| 284 installingEntry, WebInspector.UIString('inspect'), this._inspectButt
onClicked.bind(this, installing.id)); |
| 285 } |
| 286 |
| 287 this._section.setFieldVisible(WebInspector.UIString('Errors'), !!this._regis
tration.errors.length); |
| 288 var errorsValue = this._wrapWidget(this._section.appendField(WebInspector.UI
String('Errors'))); |
| 289 var errorsLabel = createLabel(String(this._registration.errors.length), 'err
or-icon'); |
| 290 errorsLabel.classList.add('service-worker-errors-label'); |
| 291 errorsValue.appendChild(errorsLabel); |
| 292 this._moreButton = createLink( |
| 293 errorsValue, this._errorsList.classList.contains('hidden') ? WebInspecto
r.UIString('details') : |
| 294 WebInspecto
r.UIString('hide'), |
| 295 this._moreErrorsButtonClicked.bind(this)); |
| 296 createLink(errorsValue, WebInspector.UIString('clear'), this._clearErrorsBut
tonClicked.bind(this)); |
192 | 297 |
193 /** | 298 /** |
194 * @param {string} versionId | 299 * @param {!Element} parent |
195 * @return {?WebInspector.Target} | 300 * @param {string} title |
196 */ | 301 * @param {function()} listener |
197 _targetForVersionId: function(versionId) | |
198 { | |
199 var version = this._manager.findVersion(versionId); | |
200 if (!version || !version.targetId) | |
201 return null; | |
202 return this._subTargetsManager.targetForId(version.targetId); | |
203 }, | |
204 | |
205 /** | |
206 * @return {!Promise} | |
207 */ | |
208 _update: function() | |
209 { | |
210 var fingerprint = this._registration.fingerprint(); | |
211 if (fingerprint === this._fingerprint) | |
212 return Promise.resolve(); | |
213 this._fingerprint = fingerprint; | |
214 | |
215 this._toolbar.setEnabled(!this._registration.isDeleted); | |
216 | |
217 var versions = this._registration.versionsByMode(); | |
218 var title = this._registration.isDeleted ? WebInspector.UIString("%s - d
eleted", this._registration.scopeURL) : this._registration.scopeURL; | |
219 this._section.setTitle(title); | |
220 | |
221 var active = versions.get(WebInspector.ServiceWorkerVersion.Modes.Active
); | |
222 var waiting = versions.get(WebInspector.ServiceWorkerVersion.Modes.Waiti
ng); | |
223 var installing = versions.get(WebInspector.ServiceWorkerVersion.Modes.In
stalling); | |
224 | |
225 var statusValue = this._wrapWidget(this._section.appendField(WebInspecto
r.UIString("Status"))); | |
226 statusValue.removeChildren(); | |
227 var versionsStack = statusValue.createChild("div", "service-worker-versi
on-stack"); | |
228 versionsStack.createChild("div", "service-worker-version-stack-bar"); | |
229 | |
230 if (active) { | |
231 var scriptElement = this._section.appendField(WebInspector.UIString(
"Source")); | |
232 scriptElement.removeChildren(); | |
233 var fileName = WebInspector.ParsedURL.extractName(active.scriptURL); | |
234 scriptElement.appendChild(WebInspector.linkifyURLAsNode(active.scrip
tURL, fileName)); | |
235 scriptElement.createChild("div", "report-field-value-subtitle").text
Content = WebInspector.UIString("Received %s", new Date(active.scriptResponseTim
e * 1000).toLocaleString()); | |
236 | |
237 var activeEntry = versionsStack.createChild("div", "service-worker-v
ersion"); | |
238 activeEntry.createChild("div", "service-worker-active-circle"); | |
239 activeEntry.createChild("span").textContent = WebInspector.UIString(
"#%s activated and is %s", active.id, active.runningStatus); | |
240 | |
241 if (active.isRunning() || active.isStarting()) { | |
242 createLink(activeEntry, WebInspector.UIString("stop"), this._sto
pButtonClicked.bind(this, active.id)); | |
243 if (!this._targetForVersionId(active.id)) | |
244 createLink(activeEntry, WebInspector.UIString("inspect"), th
is._inspectButtonClicked.bind(this, active.id)); | |
245 } else if (active.isStartable()) { | |
246 createLink(activeEntry, WebInspector.UIString("start"), this._st
artButtonClicked.bind(this)); | |
247 } | |
248 | |
249 var clientsList = this._wrapWidget(this._section.appendField(WebInsp
ector.UIString("Clients"))); | |
250 clientsList.removeChildren(); | |
251 this._section.setFieldVisible(WebInspector.UIString("Clients"), acti
ve.controlledClients.length); | |
252 for (var client of active.controlledClients) { | |
253 var clientLabelText = clientsList.createChild("div", "service-wo
rker-client"); | |
254 if (this._clientInfoCache.has(client)) | |
255 this._updateClientInfo(clientLabelText, /** @type {!WebInspe
ctor.TargetInfo} */(this._clientInfoCache.get(client))); | |
256 this._subTargetsManager.getTargetInfo(client, this._onClientInfo
.bind(this, clientLabelText)); | |
257 } | |
258 } | |
259 | |
260 if (waiting) { | |
261 var waitingEntry = versionsStack.createChild("div", "service-worker-
version"); | |
262 waitingEntry.createChild("div", "service-worker-waiting-circle"); | |
263 waitingEntry.createChild("span").textContent = WebInspector.UIString
("#%s waiting to activate", waiting.id); | |
264 createLink(waitingEntry, WebInspector.UIString("skipWaiting"), this.
_skipButtonClicked.bind(this)); | |
265 waitingEntry.createChild("div", "service-worker-subtitle").textConte
nt = new Date(waiting.scriptResponseTime * 1000).toLocaleString(); | |
266 if (!this._targetForVersionId(waiting.id) && (waiting.isRunning() ||
waiting.isStarting())) | |
267 createLink(waitingEntry, WebInspector.UIString("inspect"), this.
_inspectButtonClicked.bind(this, waiting.id)); | |
268 } | |
269 if (installing) { | |
270 var installingEntry = versionsStack.createChild("div", "service-work
er-version"); | |
271 installingEntry.createChild("div", "service-worker-installing-circle
"); | |
272 installingEntry.createChild("span").textContent = WebInspector.UIStr
ing("#%s installing", installing.id); | |
273 installingEntry.createChild("div", "service-worker-subtitle").textCo
ntent = new Date(installing.scriptResponseTime * 1000).toLocaleString(); | |
274 if (!this._targetForVersionId(installing.id) && (installing.isRunnin
g() || installing.isStarting())) | |
275 createLink(installingEntry, WebInspector.UIString("inspect"), th
is._inspectButtonClicked.bind(this, installing.id)); | |
276 } | |
277 | |
278 this._section.setFieldVisible(WebInspector.UIString("Errors"), !!this._r
egistration.errors.length); | |
279 var errorsValue = this._wrapWidget(this._section.appendField(WebInspecto
r.UIString("Errors"))); | |
280 var errorsLabel = createLabel(String(this._registration.errors.length),
"error-icon"); | |
281 errorsLabel.classList.add("service-worker-errors-label"); | |
282 errorsValue.appendChild(errorsLabel); | |
283 this._moreButton = createLink(errorsValue, this._errorsList.classList.co
ntains("hidden") ? WebInspector.UIString("details") : WebInspector.UIString("hid
e"), this._moreErrorsButtonClicked.bind(this)); | |
284 createLink(errorsValue, WebInspector.UIString("clear"), this._clearError
sButtonClicked.bind(this)); | |
285 | |
286 /** | |
287 * @param {!Element} parent | |
288 * @param {string} title | |
289 * @param {function()} listener | |
290 * @return {!Element} | |
291 */ | |
292 function createLink(parent, title, listener) | |
293 { | |
294 var span = parent.createChild("span", "link"); | |
295 span.textContent = title; | |
296 span.addEventListener("click", listener, false); | |
297 return span; | |
298 } | |
299 return Promise.resolve(); | |
300 }, | |
301 | |
302 /** | |
303 * @param {!ServiceWorkerAgent.ServiceWorkerErrorMessage} error | |
304 */ | |
305 _addError: function(error) | |
306 { | |
307 var target = this._targetForVersionId(error.versionId); | |
308 var message = this._errorsList.createChild("div"); | |
309 if (this._errorsList.childElementCount > 100) | |
310 this._errorsList.firstElementChild.remove(); | |
311 message.appendChild(this._linkifier.linkifyScriptLocation(target, null,
error.sourceURL, error.lineNumber)); | |
312 message.appendChild(createLabel("#" + error.versionId + ": " + error.err
orMessage, "error-icon")); | |
313 }, | |
314 | |
315 _unregisterButtonClicked: function() | |
316 { | |
317 this._manager.deleteRegistration(this._registration.id); | |
318 }, | |
319 | |
320 _updateButtonClicked: function() | |
321 { | |
322 this._manager.updateRegistration(this._registration.id); | |
323 }, | |
324 | |
325 _pushButtonClicked: function() | |
326 { | |
327 var data = "Test push message from DevTools."; | |
328 this._manager.deliverPushMessage(this._registration.id, data); | |
329 }, | |
330 | |
331 _syncButtonClicked: function() | |
332 { | |
333 var tag = "test-tag-from-devtools"; | |
334 var lastChance = true; | |
335 this._manager.dispatchSyncEvent(this._registration.id, tag, lastChance); | |
336 }, | |
337 | |
338 /** | |
339 * @param {!Element} element | |
340 * @param {?WebInspector.TargetInfo} targetInfo | |
341 */ | |
342 _onClientInfo: function(element, targetInfo) | |
343 { | |
344 if (!targetInfo) | |
345 return; | |
346 this._clientInfoCache.set(targetInfo.id, targetInfo); | |
347 this._updateClientInfo(element, targetInfo); | |
348 }, | |
349 | |
350 /** | |
351 * @param {!Element} element | |
352 * @param {!WebInspector.TargetInfo} targetInfo | |
353 */ | |
354 _updateClientInfo: function(element, targetInfo) | |
355 { | |
356 if (!targetInfo.canActivate) { | |
357 element.createTextChild(targetInfo.title); | |
358 return; | |
359 } | |
360 element.removeChildren(); | |
361 element.createTextChild(targetInfo.url); | |
362 var focusLabel = element.createChild("label", "link"); | |
363 focusLabel.createTextChild("focus"); | |
364 focusLabel.addEventListener("click", this._activateTarget.bind(this, tar
getInfo.id), true); | |
365 }, | |
366 | |
367 /** | |
368 * @param {string} targetId | |
369 */ | |
370 _activateTarget: function(targetId) | |
371 { | |
372 this._subTargetsManager.activateTarget(targetId); | |
373 }, | |
374 | |
375 _startButtonClicked: function() | |
376 { | |
377 this._manager.startWorker(this._registration.scopeURL); | |
378 }, | |
379 | |
380 _skipButtonClicked: function() | |
381 { | |
382 this._manager.skipWaiting(this._registration.scopeURL); | |
383 }, | |
384 | |
385 /** | |
386 * @param {string} versionId | |
387 */ | |
388 _stopButtonClicked: function(versionId) | |
389 { | |
390 this._manager.stopWorker(versionId); | |
391 }, | |
392 | |
393 _moreErrorsButtonClicked: function() | |
394 { | |
395 var newVisible = this._errorsList.classList.contains("hidden"); | |
396 this._moreButton.textContent = newVisible ? WebInspector.UIString("hide"
) : WebInspector.UIString("details"); | |
397 this._errorsList.classList.toggle("hidden", !newVisible); | |
398 }, | |
399 | |
400 _clearErrorsButtonClicked: function() | |
401 { | |
402 this._errorsList.removeChildren(); | |
403 this._registration.clearErrors(); | |
404 this._scheduleUpdate(); | |
405 if (!this._errorsList.classList.contains("hidden")) | |
406 this._moreErrorsButtonClicked(); | |
407 }, | |
408 | |
409 /** | |
410 * @param {string} versionId | |
411 */ | |
412 _inspectButtonClicked: function(versionId) | |
413 { | |
414 this._manager.inspectWorker(versionId); | |
415 }, | |
416 | |
417 /** | |
418 * @param {!Element} container | |
419 * @return {!Element} | 302 * @return {!Element} |
420 */ | 303 */ |
421 _wrapWidget: function(container) | 304 function createLink(parent, title, listener) { |
422 { | 305 var span = parent.createChild('span', 'link'); |
423 var shadowRoot = WebInspector.createShadowRootWithCoreStyles(container); | 306 span.textContent = title; |
424 WebInspector.appendStyle(shadowRoot, "resources/serviceWorkersView.css")
; | 307 span.addEventListener('click', listener, false); |
425 var contentElement = createElement("div"); | 308 return span; |
426 shadowRoot.appendChild(contentElement); | 309 } |
427 return contentElement; | 310 return Promise.resolve(); |
428 }, | 311 } |
429 | 312 |
430 _dispose: function() | 313 /** |
431 { | 314 * @param {!ServiceWorkerAgent.ServiceWorkerErrorMessage} error |
432 this._linkifier.dispose(); | 315 */ |
433 if (this._pendingUpdate) | 316 _addError(error) { |
434 clearTimeout(this._pendingUpdate); | 317 var target = this._targetForVersionId(error.versionId); |
435 } | 318 var message = this._errorsList.createChild('div'); |
| 319 if (this._errorsList.childElementCount > 100) |
| 320 this._errorsList.firstElementChild.remove(); |
| 321 message.appendChild(this._linkifier.linkifyScriptLocation(target, null, erro
r.sourceURL, error.lineNumber)); |
| 322 message.appendChild(createLabel('#' + error.versionId + ': ' + error.errorMe
ssage, 'error-icon')); |
| 323 } |
| 324 |
| 325 _unregisterButtonClicked() { |
| 326 this._manager.deleteRegistration(this._registration.id); |
| 327 } |
| 328 |
| 329 _updateButtonClicked() { |
| 330 this._manager.updateRegistration(this._registration.id); |
| 331 } |
| 332 |
| 333 _pushButtonClicked() { |
| 334 var data = 'Test push message from DevTools.'; |
| 335 this._manager.deliverPushMessage(this._registration.id, data); |
| 336 } |
| 337 |
| 338 _syncButtonClicked() { |
| 339 var tag = 'test-tag-from-devtools'; |
| 340 var lastChance = true; |
| 341 this._manager.dispatchSyncEvent(this._registration.id, tag, lastChance); |
| 342 } |
| 343 |
| 344 /** |
| 345 * @param {!Element} element |
| 346 * @param {?WebInspector.TargetInfo} targetInfo |
| 347 */ |
| 348 _onClientInfo(element, targetInfo) { |
| 349 if (!targetInfo) |
| 350 return; |
| 351 this._clientInfoCache.set(targetInfo.id, targetInfo); |
| 352 this._updateClientInfo(element, targetInfo); |
| 353 } |
| 354 |
| 355 /** |
| 356 * @param {!Element} element |
| 357 * @param {!WebInspector.TargetInfo} targetInfo |
| 358 */ |
| 359 _updateClientInfo(element, targetInfo) { |
| 360 if (!targetInfo.canActivate) { |
| 361 element.createTextChild(targetInfo.title); |
| 362 return; |
| 363 } |
| 364 element.removeChildren(); |
| 365 element.createTextChild(targetInfo.url); |
| 366 var focusLabel = element.createChild('label', 'link'); |
| 367 focusLabel.createTextChild('focus'); |
| 368 focusLabel.addEventListener('click', this._activateTarget.bind(this, targetI
nfo.id), true); |
| 369 } |
| 370 |
| 371 /** |
| 372 * @param {string} targetId |
| 373 */ |
| 374 _activateTarget(targetId) { |
| 375 this._subTargetsManager.activateTarget(targetId); |
| 376 } |
| 377 |
| 378 _startButtonClicked() { |
| 379 this._manager.startWorker(this._registration.scopeURL); |
| 380 } |
| 381 |
| 382 _skipButtonClicked() { |
| 383 this._manager.skipWaiting(this._registration.scopeURL); |
| 384 } |
| 385 |
| 386 /** |
| 387 * @param {string} versionId |
| 388 */ |
| 389 _stopButtonClicked(versionId) { |
| 390 this._manager.stopWorker(versionId); |
| 391 } |
| 392 |
| 393 _moreErrorsButtonClicked() { |
| 394 var newVisible = this._errorsList.classList.contains('hidden'); |
| 395 this._moreButton.textContent = newVisible ? WebInspector.UIString('hide') :
WebInspector.UIString('details'); |
| 396 this._errorsList.classList.toggle('hidden', !newVisible); |
| 397 } |
| 398 |
| 399 _clearErrorsButtonClicked() { |
| 400 this._errorsList.removeChildren(); |
| 401 this._registration.clearErrors(); |
| 402 this._scheduleUpdate(); |
| 403 if (!this._errorsList.classList.contains('hidden')) |
| 404 this._moreErrorsButtonClicked(); |
| 405 } |
| 406 |
| 407 /** |
| 408 * @param {string} versionId |
| 409 */ |
| 410 _inspectButtonClicked(versionId) { |
| 411 this._manager.inspectWorker(versionId); |
| 412 } |
| 413 |
| 414 /** |
| 415 * @param {!Element} container |
| 416 * @return {!Element} |
| 417 */ |
| 418 _wrapWidget(container) { |
| 419 var shadowRoot = WebInspector.createShadowRootWithCoreStyles(container); |
| 420 WebInspector.appendStyle(shadowRoot, 'resources/serviceWorkersView.css'); |
| 421 var contentElement = createElement('div'); |
| 422 shadowRoot.appendChild(contentElement); |
| 423 return contentElement; |
| 424 } |
| 425 |
| 426 _dispose() { |
| 427 this._linkifier.dispose(); |
| 428 if (this._pendingUpdate) |
| 429 clearTimeout(this._pendingUpdate); |
| 430 } |
436 }; | 431 }; |
OLD | NEW |