| OLD | NEW |
| 1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 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 /** | 4 /** |
| 5 * @unrestricted | 5 * @unrestricted |
| 6 */ | 6 */ |
| 7 WebInspector.NetworkConditionsSelector = class { | 7 Components.NetworkConditionsSelector = class { |
| 8 /** | 8 /** |
| 9 * @param {function(!Array<!WebInspector.NetworkConditionsGroup>):!Array<?WebI
nspector.NetworkManager.Conditions>} populateCallback | 9 * @param {function(!Array<!Components.NetworkConditionsGroup>):!Array<?SDK.Ne
tworkManager.Conditions>} populateCallback |
| 10 * @param {function(number)} selectCallback | 10 * @param {function(number)} selectCallback |
| 11 */ | 11 */ |
| 12 constructor(populateCallback, selectCallback) { | 12 constructor(populateCallback, selectCallback) { |
| 13 this._populateCallback = populateCallback; | 13 this._populateCallback = populateCallback; |
| 14 this._selectCallback = selectCallback; | 14 this._selectCallback = selectCallback; |
| 15 this._customSetting = WebInspector.moduleSetting('customNetworkConditions'); | 15 this._customSetting = Common.moduleSetting('customNetworkConditions'); |
| 16 this._customSetting.addChangeListener(this._populateOptions, this); | 16 this._customSetting.addChangeListener(this._populateOptions, this); |
| 17 this._manager = WebInspector.multitargetNetworkManager; | 17 this._manager = SDK.multitargetNetworkManager; |
| 18 this._manager.addEventListener( | 18 this._manager.addEventListener( |
| 19 WebInspector.MultitargetNetworkManager.Events.ConditionsChanged, this._c
onditionsChanged, this); | 19 SDK.MultitargetNetworkManager.Events.ConditionsChanged, this._conditions
Changed, this); |
| 20 this._populateOptions(); | 20 this._populateOptions(); |
| 21 } | 21 } |
| 22 | 22 |
| 23 /** | 23 /** |
| 24 * @param {number} throughput | 24 * @param {number} throughput |
| 25 * @param {boolean=} plainText | 25 * @param {boolean=} plainText |
| 26 * @return {string} | 26 * @return {string} |
| 27 */ | 27 */ |
| 28 static _throughputText(throughput, plainText) { | 28 static _throughputText(throughput, plainText) { |
| 29 if (throughput < 0) | 29 if (throughput < 0) |
| 30 return ''; | 30 return ''; |
| 31 var throughputInKbps = throughput / (1024 / 8); | 31 var throughputInKbps = throughput / (1024 / 8); |
| 32 var delimiter = plainText ? '' : ' '; | 32 var delimiter = plainText ? '' : ' '; |
| 33 if (throughputInKbps < 1024) | 33 if (throughputInKbps < 1024) |
| 34 return WebInspector.UIString('%d%skb/s', throughputInKbps, delimiter); | 34 return Common.UIString('%d%skb/s', throughputInKbps, delimiter); |
| 35 if (throughputInKbps < 1024 * 10) | 35 if (throughputInKbps < 1024 * 10) |
| 36 return WebInspector.UIString('%.1f%sMb/s', throughputInKbps / 1024, delimi
ter); | 36 return Common.UIString('%.1f%sMb/s', throughputInKbps / 1024, delimiter); |
| 37 return WebInspector.UIString('%d%sMb/s', (throughputInKbps / 1024) | 0, deli
miter); | 37 return Common.UIString('%d%sMb/s', (throughputInKbps / 1024) | 0, delimiter)
; |
| 38 } | 38 } |
| 39 | 39 |
| 40 /** | 40 /** |
| 41 * @param {!WebInspector.NetworkManager.Conditions} conditions | 41 * @param {!SDK.NetworkManager.Conditions} conditions |
| 42 * @param {boolean=} plainText | 42 * @param {boolean=} plainText |
| 43 * @return {!{text: string, title: string}} | 43 * @return {!{text: string, title: string}} |
| 44 */ | 44 */ |
| 45 static _conditionsTitle(conditions, plainText) { | 45 static _conditionsTitle(conditions, plainText) { |
| 46 var downloadInKbps = conditions.download / (1024 / 8); | 46 var downloadInKbps = conditions.download / (1024 / 8); |
| 47 var uploadInKbps = conditions.upload / (1024 / 8); | 47 var uploadInKbps = conditions.upload / (1024 / 8); |
| 48 var isThrottling = (downloadInKbps >= 0) || (uploadInKbps >= 0) || (conditio
ns.latency > 0); | 48 var isThrottling = (downloadInKbps >= 0) || (uploadInKbps >= 0) || (conditio
ns.latency > 0); |
| 49 var conditionTitle = WebInspector.UIString(conditions.title); | 49 var conditionTitle = Common.UIString(conditions.title); |
| 50 if (!isThrottling) | 50 if (!isThrottling) |
| 51 return {text: conditionTitle, title: conditionTitle}; | 51 return {text: conditionTitle, title: conditionTitle}; |
| 52 | 52 |
| 53 var downloadText = WebInspector.NetworkConditionsSelector._throughputText(co
nditions.download, plainText); | 53 var downloadText = Components.NetworkConditionsSelector._throughputText(cond
itions.download, plainText); |
| 54 var uploadText = WebInspector.NetworkConditionsSelector._throughputText(cond
itions.upload, plainText); | 54 var uploadText = Components.NetworkConditionsSelector._throughputText(condit
ions.upload, plainText); |
| 55 var pattern = plainText ? '%s (%dms, %s, %s)' : '%s (%dms RTT, %s\u2b07, %s\
u2b06)'; | 55 var pattern = plainText ? '%s (%dms, %s, %s)' : '%s (%dms RTT, %s\u2b07, %s\
u2b06)'; |
| 56 var title = WebInspector.UIString(pattern, conditionTitle, conditions.latenc
y, downloadText, uploadText); | 56 var title = Common.UIString(pattern, conditionTitle, conditions.latency, dow
nloadText, uploadText); |
| 57 return { | 57 return { |
| 58 text: title, | 58 text: title, |
| 59 title: WebInspector.UIString( | 59 title: Common.UIString( |
| 60 'Maximum download throughput: %s.\r\nMaximum upload throughput: %s.\r\
nMinimum round-trip time: %dms.', | 60 'Maximum download throughput: %s.\r\nMaximum upload throughput: %s.\r\
nMinimum round-trip time: %dms.', |
| 61 downloadText, uploadText, conditions.latency) | 61 downloadText, uploadText, conditions.latency) |
| 62 }; | 62 }; |
| 63 } | 63 } |
| 64 | 64 |
| 65 /** | 65 /** |
| 66 * @param {!HTMLSelectElement} selectElement | 66 * @param {!HTMLSelectElement} selectElement |
| 67 */ | 67 */ |
| 68 static decorateSelect(selectElement) { | 68 static decorateSelect(selectElement) { |
| 69 var options = []; | 69 var options = []; |
| 70 var selector = new WebInspector.NetworkConditionsSelector(populate, select); | 70 var selector = new Components.NetworkConditionsSelector(populate, select); |
| 71 selectElement.addEventListener('change', optionSelected, false); | 71 selectElement.addEventListener('change', optionSelected, false); |
| 72 | 72 |
| 73 /** | 73 /** |
| 74 * @param {!Array.<!WebInspector.NetworkConditionsGroup>} groups | 74 * @param {!Array.<!Components.NetworkConditionsGroup>} groups |
| 75 * @return {!Array<?WebInspector.NetworkManager.Conditions>} | 75 * @return {!Array<?SDK.NetworkManager.Conditions>} |
| 76 */ | 76 */ |
| 77 function populate(groups) { | 77 function populate(groups) { |
| 78 selectElement.removeChildren(); | 78 selectElement.removeChildren(); |
| 79 options = []; | 79 options = []; |
| 80 for (var i = 0; i < groups.length; ++i) { | 80 for (var i = 0; i < groups.length; ++i) { |
| 81 var group = groups[i]; | 81 var group = groups[i]; |
| 82 var groupElement = selectElement.createChild('optgroup'); | 82 var groupElement = selectElement.createChild('optgroup'); |
| 83 groupElement.label = group.title; | 83 groupElement.label = group.title; |
| 84 if (!i) { | 84 if (!i) { |
| 85 groupElement.appendChild(new Option(WebInspector.UIString('Add\u2026')
, WebInspector.UIString('Add\u2026'))); | 85 groupElement.appendChild(new Option(Common.UIString('Add\u2026'), Comm
on.UIString('Add\u2026'))); |
| 86 options.push(null); | 86 options.push(null); |
| 87 } | 87 } |
| 88 for (var conditions of group.items) { | 88 for (var conditions of group.items) { |
| 89 var title = WebInspector.NetworkConditionsSelector._conditionsTitle(co
nditions, true); | 89 var title = Components.NetworkConditionsSelector._conditionsTitle(cond
itions, true); |
| 90 var option = new Option(title.text, title.text); | 90 var option = new Option(title.text, title.text); |
| 91 option.title = title.title; | 91 option.title = title.title; |
| 92 groupElement.appendChild(option); | 92 groupElement.appendChild(option); |
| 93 options.push(conditions); | 93 options.push(conditions); |
| 94 } | 94 } |
| 95 } | 95 } |
| 96 return options; | 96 return options; |
| 97 } | 97 } |
| 98 | 98 |
| 99 function optionSelected() { | 99 function optionSelected() { |
| 100 if (selectElement.selectedIndex === 0) | 100 if (selectElement.selectedIndex === 0) |
| 101 selector.revealAndUpdate(); | 101 selector.revealAndUpdate(); |
| 102 else | 102 else |
| 103 selector.optionSelected(options[selectElement.selectedIndex]); | 103 selector.optionSelected(options[selectElement.selectedIndex]); |
| 104 } | 104 } |
| 105 | 105 |
| 106 /** | 106 /** |
| 107 * @param {number} index | 107 * @param {number} index |
| 108 */ | 108 */ |
| 109 function select(index) { | 109 function select(index) { |
| 110 if (selectElement.selectedIndex !== index) | 110 if (selectElement.selectedIndex !== index) |
| 111 selectElement.selectedIndex = index; | 111 selectElement.selectedIndex = index; |
| 112 } | 112 } |
| 113 } | 113 } |
| 114 | 114 |
| 115 /** | 115 /** |
| 116 * @return {!WebInspector.ToolbarMenuButton} | 116 * @return {!UI.ToolbarMenuButton} |
| 117 */ | 117 */ |
| 118 static createToolbarMenuButton() { | 118 static createToolbarMenuButton() { |
| 119 var button = new WebInspector.ToolbarMenuButton(appendItems); | 119 var button = new UI.ToolbarMenuButton(appendItems); |
| 120 button.setGlyph(''); | 120 button.setGlyph(''); |
| 121 button.turnIntoSelect(); | 121 button.turnIntoSelect(); |
| 122 | 122 |
| 123 /** @type {!Array<?WebInspector.NetworkManager.Conditions>} */ | 123 /** @type {!Array<?SDK.NetworkManager.Conditions>} */ |
| 124 var options = []; | 124 var options = []; |
| 125 var selectedIndex = -1; | 125 var selectedIndex = -1; |
| 126 var selector = new WebInspector.NetworkConditionsSelector(populate, select); | 126 var selector = new Components.NetworkConditionsSelector(populate, select); |
| 127 return button; | 127 return button; |
| 128 | 128 |
| 129 /** | 129 /** |
| 130 * @param {!WebInspector.ContextMenu} contextMenu | 130 * @param {!UI.ContextMenu} contextMenu |
| 131 */ | 131 */ |
| 132 function appendItems(contextMenu) { | 132 function appendItems(contextMenu) { |
| 133 for (var index = 0; index < options.length; ++index) { | 133 for (var index = 0; index < options.length; ++index) { |
| 134 var conditions = options[index]; | 134 var conditions = options[index]; |
| 135 if (!conditions) | 135 if (!conditions) |
| 136 contextMenu.appendSeparator(); | 136 contextMenu.appendSeparator(); |
| 137 else | 137 else |
| 138 contextMenu.appendCheckboxItem( | 138 contextMenu.appendCheckboxItem( |
| 139 WebInspector.NetworkConditionsSelector._conditionsTitle(conditions
, true).text, | 139 Components.NetworkConditionsSelector._conditionsTitle(conditions,
true).text, |
| 140 selector.optionSelected.bind(selector, conditions), selectedIndex
=== index); | 140 selector.optionSelected.bind(selector, conditions), selectedIndex
=== index); |
| 141 } | 141 } |
| 142 contextMenu.appendItem(WebInspector.UIString('Edit\u2026'), selector.revea
lAndUpdate.bind(selector)); | 142 contextMenu.appendItem(Common.UIString('Edit\u2026'), selector.revealAndUp
date.bind(selector)); |
| 143 } | 143 } |
| 144 | 144 |
| 145 /** | 145 /** |
| 146 * @param {!Array.<!WebInspector.NetworkConditionsGroup>} groups | 146 * @param {!Array.<!Components.NetworkConditionsGroup>} groups |
| 147 * @return {!Array<?WebInspector.NetworkManager.Conditions>} | 147 * @return {!Array<?SDK.NetworkManager.Conditions>} |
| 148 */ | 148 */ |
| 149 function populate(groups) { | 149 function populate(groups) { |
| 150 options = []; | 150 options = []; |
| 151 for (var group of groups) { | 151 for (var group of groups) { |
| 152 for (var conditions of group.items) | 152 for (var conditions of group.items) |
| 153 options.push(conditions); | 153 options.push(conditions); |
| 154 options.push(null); | 154 options.push(null); |
| 155 } | 155 } |
| 156 return options; | 156 return options; |
| 157 } | 157 } |
| 158 | 158 |
| 159 /** | 159 /** |
| 160 * @param {number} index | 160 * @param {number} index |
| 161 */ | 161 */ |
| 162 function select(index) { | 162 function select(index) { |
| 163 selectedIndex = index; | 163 selectedIndex = index; |
| 164 button.setText(options[index].title); | 164 button.setText(options[index].title); |
| 165 } | 165 } |
| 166 } | 166 } |
| 167 | 167 |
| 168 /** | 168 /** |
| 169 * @return {!WebInspector.ToolbarCheckbox} | 169 * @return {!UI.ToolbarCheckbox} |
| 170 */ | 170 */ |
| 171 static createOfflineToolbarCheckbox() { | 171 static createOfflineToolbarCheckbox() { |
| 172 var checkbox = new WebInspector.ToolbarCheckbox( | 172 var checkbox = new UI.ToolbarCheckbox( |
| 173 WebInspector.UIString('Offline'), WebInspector.UIString('Force disconnec
ted from network'), undefined, | 173 Common.UIString('Offline'), Common.UIString('Force disconnected from net
work'), undefined, |
| 174 forceOffline); | 174 forceOffline); |
| 175 WebInspector.multitargetNetworkManager.addEventListener( | 175 SDK.multitargetNetworkManager.addEventListener( |
| 176 WebInspector.MultitargetNetworkManager.Events.ConditionsChanged, network
ConditionsChanged); | 176 SDK.MultitargetNetworkManager.Events.ConditionsChanged, networkCondition
sChanged); |
| 177 checkbox.setChecked( | 177 checkbox.setChecked( |
| 178 WebInspector.multitargetNetworkManager.networkConditions() === WebInspec
tor.NetworkManager.OfflineConditions); | 178 SDK.multitargetNetworkManager.networkConditions() === SDK.NetworkManager
.OfflineConditions); |
| 179 | 179 |
| 180 var lastNetworkConditions; | 180 var lastNetworkConditions; |
| 181 | 181 |
| 182 function forceOffline() { | 182 function forceOffline() { |
| 183 if (checkbox.checked()) { | 183 if (checkbox.checked()) { |
| 184 lastNetworkConditions = WebInspector.multitargetNetworkManager.networkCo
nditions(); | 184 lastNetworkConditions = SDK.multitargetNetworkManager.networkConditions(
); |
| 185 WebInspector.multitargetNetworkManager.setNetworkConditions(WebInspector
.NetworkManager.OfflineConditions); | 185 SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.Of
flineConditions); |
| 186 } else { | 186 } else { |
| 187 WebInspector.multitargetNetworkManager.setNetworkConditions(lastNetworkC
onditions); | 187 SDK.multitargetNetworkManager.setNetworkConditions(lastNetworkConditions
); |
| 188 } | 188 } |
| 189 } | 189 } |
| 190 | 190 |
| 191 function networkConditionsChanged() { | 191 function networkConditionsChanged() { |
| 192 var conditions = WebInspector.multitargetNetworkManager.networkConditions(
); | 192 var conditions = SDK.multitargetNetworkManager.networkConditions(); |
| 193 if (conditions !== WebInspector.NetworkManager.OfflineConditions) | 193 if (conditions !== SDK.NetworkManager.OfflineConditions) |
| 194 lastNetworkConditions = conditions; | 194 lastNetworkConditions = conditions; |
| 195 checkbox.setChecked(conditions === WebInspector.NetworkManager.OfflineCond
itions); | 195 checkbox.setChecked(conditions === SDK.NetworkManager.OfflineConditions); |
| 196 } | 196 } |
| 197 return checkbox; | 197 return checkbox; |
| 198 } | 198 } |
| 199 | 199 |
| 200 _populateOptions() { | 200 _populateOptions() { |
| 201 var customGroup = {title: WebInspector.UIString('Custom'), items: this._cust
omSetting.get()}; | 201 var customGroup = {title: Common.UIString('Custom'), items: this._customSett
ing.get()}; |
| 202 var presetsGroup = { | 202 var presetsGroup = { |
| 203 title: WebInspector.UIString('Presets'), | 203 title: Common.UIString('Presets'), |
| 204 items: WebInspector.NetworkConditionsSelector._presets | 204 items: Components.NetworkConditionsSelector._presets |
| 205 }; | 205 }; |
| 206 var disabledGroup = { | 206 var disabledGroup = { |
| 207 title: WebInspector.UIString('Disabled'), | 207 title: Common.UIString('Disabled'), |
| 208 items: [WebInspector.NetworkManager.NoThrottlingConditions] | 208 items: [SDK.NetworkManager.NoThrottlingConditions] |
| 209 }; | 209 }; |
| 210 this._options = this._populateCallback([customGroup, presetsGroup, disabledG
roup]); | 210 this._options = this._populateCallback([customGroup, presetsGroup, disabledG
roup]); |
| 211 if (!this._conditionsChanged()) { | 211 if (!this._conditionsChanged()) { |
| 212 for (var i = this._options.length - 1; i >= 0; i--) { | 212 for (var i = this._options.length - 1; i >= 0; i--) { |
| 213 if (this._options[i]) { | 213 if (this._options[i]) { |
| 214 this.optionSelected(/** @type {!WebInspector.NetworkManager.Conditions
} */ (this._options[i])); | 214 this.optionSelected(/** @type {!SDK.NetworkManager.Conditions} */ (thi
s._options[i])); |
| 215 break; | 215 break; |
| 216 } | 216 } |
| 217 } | 217 } |
| 218 } | 218 } |
| 219 } | 219 } |
| 220 | 220 |
| 221 revealAndUpdate() { | 221 revealAndUpdate() { |
| 222 WebInspector.Revealer.reveal(this._customSetting); | 222 Common.Revealer.reveal(this._customSetting); |
| 223 this._conditionsChanged(); | 223 this._conditionsChanged(); |
| 224 } | 224 } |
| 225 | 225 |
| 226 /** | 226 /** |
| 227 * @param {!WebInspector.NetworkManager.Conditions} conditions | 227 * @param {!SDK.NetworkManager.Conditions} conditions |
| 228 */ | 228 */ |
| 229 optionSelected(conditions) { | 229 optionSelected(conditions) { |
| 230 this._manager.setNetworkConditions(conditions); | 230 this._manager.setNetworkConditions(conditions); |
| 231 } | 231 } |
| 232 | 232 |
| 233 /** | 233 /** |
| 234 * @return {boolean} | 234 * @return {boolean} |
| 235 */ | 235 */ |
| 236 _conditionsChanged() { | 236 _conditionsChanged() { |
| 237 var value = this._manager.networkConditions(); | 237 var value = this._manager.networkConditions(); |
| 238 for (var index = 0; index < this._options.length; ++index) { | 238 for (var index = 0; index < this._options.length; ++index) { |
| 239 var option = this._options[index]; | 239 var option = this._options[index]; |
| 240 if (option && option.download === value.download && option.upload === valu
e.upload && | 240 if (option && option.download === value.download && option.upload === valu
e.upload && |
| 241 option.latency === value.latency && option.title === value.title) { | 241 option.latency === value.latency && option.title === value.title) { |
| 242 this._selectCallback(index); | 242 this._selectCallback(index); |
| 243 return true; | 243 return true; |
| 244 } | 244 } |
| 245 } | 245 } |
| 246 return false; | 246 return false; |
| 247 } | 247 } |
| 248 }; | 248 }; |
| 249 | 249 |
| 250 /** @typedef {!{title: string, items: !Array<!WebInspector.NetworkManager.Condit
ions>}} */ | 250 /** @typedef {!{title: string, items: !Array<!SDK.NetworkManager.Conditions>}} *
/ |
| 251 WebInspector.NetworkConditionsGroup; | 251 Components.NetworkConditionsGroup; |
| 252 | 252 |
| 253 | 253 |
| 254 /** @type {!Array.<!WebInspector.NetworkManager.Conditions>} */ | 254 /** @type {!Array.<!SDK.NetworkManager.Conditions>} */ |
| 255 WebInspector.NetworkConditionsSelector._presets = [ | 255 Components.NetworkConditionsSelector._presets = [ |
| 256 WebInspector.NetworkManager.OfflineConditions, | 256 SDK.NetworkManager.OfflineConditions, |
| 257 {title: 'GPRS', download: 50 * 1024 / 8, upload: 20 * 1024 / 8, latency: 500}, | 257 {title: 'GPRS', download: 50 * 1024 / 8, upload: 20 * 1024 / 8, latency: 500}, |
| 258 {title: 'Regular 2G', download: 250 * 1024 / 8, upload: 50 * 1024 / 8, latency
: 300}, | 258 {title: 'Regular 2G', download: 250 * 1024 / 8, upload: 50 * 1024 / 8, latency
: 300}, |
| 259 {title: 'Good 2G', download: 450 * 1024 / 8, upload: 150 * 1024 / 8, latency:
150}, | 259 {title: 'Good 2G', download: 450 * 1024 / 8, upload: 150 * 1024 / 8, latency:
150}, |
| 260 {title: 'Regular 3G', download: 750 * 1024 / 8, upload: 250 * 1024 / 8, latenc
y: 100}, | 260 {title: 'Regular 3G', download: 750 * 1024 / 8, upload: 250 * 1024 / 8, latenc
y: 100}, |
| 261 {title: 'Good 3G', download: 1.5 * 1024 * 1024 / 8, upload: 750 * 1024 / 8, la
tency: 40}, | 261 {title: 'Good 3G', download: 1.5 * 1024 * 1024 / 8, upload: 750 * 1024 / 8, la
tency: 40}, |
| 262 {title: 'Regular 4G', download: 4 * 1024 * 1024 / 8, upload: 3 * 1024 * 1024 /
8, latency: 20}, | 262 {title: 'Regular 4G', download: 4 * 1024 * 1024 / 8, upload: 3 * 1024 * 1024 /
8, latency: 20}, |
| 263 {title: 'DSL', download: 2 * 1024 * 1024 / 8, upload: 1 * 1024 * 1024 / 8, lat
ency: 5}, | 263 {title: 'DSL', download: 2 * 1024 * 1024 / 8, upload: 1 * 1024 * 1024 / 8, lat
ency: 5}, |
| 264 {title: 'WiFi', download: 30 * 1024 * 1024 / 8, upload: 15 * 1024 * 1024 / 8,
latency: 2} | 264 {title: 'WiFi', download: 30 * 1024 * 1024 / 8, upload: 15 * 1024 * 1024 / 8,
latency: 2} |
| 265 ]; | 265 ]; |
| 266 | 266 |
| 267 | 267 |
| 268 /** | 268 /** |
| 269 * @implements {WebInspector.ListWidget.Delegate} | 269 * @implements {UI.ListWidget.Delegate} |
| 270 * @unrestricted | 270 * @unrestricted |
| 271 */ | 271 */ |
| 272 WebInspector.NetworkConditionsSettingsTab = class extends WebInspector.VBox { | 272 Components.NetworkConditionsSettingsTab = class extends UI.VBox { |
| 273 constructor() { | 273 constructor() { |
| 274 super(true); | 274 super(true); |
| 275 this.registerRequiredCSS('components/networkConditionsSettingsTab.css'); | 275 this.registerRequiredCSS('components/networkConditionsSettingsTab.css'); |
| 276 | 276 |
| 277 this.contentElement.createChild('div', 'header').textContent = WebInspector.
UIString('Network Throttling Profiles'); | 277 this.contentElement.createChild('div', 'header').textContent = Common.UIStri
ng('Network Throttling Profiles'); |
| 278 | 278 |
| 279 var addButton = createTextButton( | 279 var addButton = createTextButton( |
| 280 WebInspector.UIString('Add custom profile...'), this._addButtonClicked.b
ind(this), 'add-conditions-button'); | 280 Common.UIString('Add custom profile...'), this._addButtonClicked.bind(th
is), 'add-conditions-button'); |
| 281 this.contentElement.appendChild(addButton); | 281 this.contentElement.appendChild(addButton); |
| 282 | 282 |
| 283 this._list = new WebInspector.ListWidget(this); | 283 this._list = new UI.ListWidget(this); |
| 284 this._list.element.classList.add('conditions-list'); | 284 this._list.element.classList.add('conditions-list'); |
| 285 this._list.registerRequiredCSS('components/networkConditionsSettingsTab.css'
); | 285 this._list.registerRequiredCSS('components/networkConditionsSettingsTab.css'
); |
| 286 this._list.show(this.contentElement); | 286 this._list.show(this.contentElement); |
| 287 | 287 |
| 288 this._customSetting = WebInspector.moduleSetting('customNetworkConditions'); | 288 this._customSetting = Common.moduleSetting('customNetworkConditions'); |
| 289 this._customSetting.addChangeListener(this._conditionsUpdated, this); | 289 this._customSetting.addChangeListener(this._conditionsUpdated, this); |
| 290 | 290 |
| 291 this.setDefaultFocusedElement(addButton); | 291 this.setDefaultFocusedElement(addButton); |
| 292 this.contentElement.tabIndex = 0; | 292 this.contentElement.tabIndex = 0; |
| 293 } | 293 } |
| 294 | 294 |
| 295 /** | 295 /** |
| 296 * @override | 296 * @override |
| 297 */ | 297 */ |
| 298 wasShown() { | 298 wasShown() { |
| 299 super.wasShown(); | 299 super.wasShown(); |
| 300 this._conditionsUpdated(); | 300 this._conditionsUpdated(); |
| 301 } | 301 } |
| 302 | 302 |
| 303 _conditionsUpdated() { | 303 _conditionsUpdated() { |
| 304 this._list.clear(); | 304 this._list.clear(); |
| 305 | 305 |
| 306 var conditions = this._customSetting.get(); | 306 var conditions = this._customSetting.get(); |
| 307 for (var i = 0; i < conditions.length; ++i) | 307 for (var i = 0; i < conditions.length; ++i) |
| 308 this._list.appendItem(conditions[i], true); | 308 this._list.appendItem(conditions[i], true); |
| 309 | 309 |
| 310 this._list.appendSeparator(); | 310 this._list.appendSeparator(); |
| 311 | 311 |
| 312 conditions = WebInspector.NetworkConditionsSelector._presets; | 312 conditions = Components.NetworkConditionsSelector._presets; |
| 313 for (var i = 0; i < conditions.length; ++i) | 313 for (var i = 0; i < conditions.length; ++i) |
| 314 this._list.appendItem(conditions[i], false); | 314 this._list.appendItem(conditions[i], false); |
| 315 } | 315 } |
| 316 | 316 |
| 317 _addButtonClicked() { | 317 _addButtonClicked() { |
| 318 this._list.addNewItem(this._customSetting.get().length, {title: '', download
: -1, upload: -1, latency: 0}); | 318 this._list.addNewItem(this._customSetting.get().length, {title: '', download
: -1, upload: -1, latency: 0}); |
| 319 } | 319 } |
| 320 | 320 |
| 321 /** | 321 /** |
| 322 * @override | 322 * @override |
| 323 * @param {*} item | 323 * @param {*} item |
| 324 * @param {boolean} editable | 324 * @param {boolean} editable |
| 325 * @return {!Element} | 325 * @return {!Element} |
| 326 */ | 326 */ |
| 327 renderItem(item, editable) { | 327 renderItem(item, editable) { |
| 328 var conditions = /** @type {!WebInspector.NetworkManager.Conditions} */ (ite
m); | 328 var conditions = /** @type {!SDK.NetworkManager.Conditions} */ (item); |
| 329 var element = createElementWithClass('div', 'conditions-list-item'); | 329 var element = createElementWithClass('div', 'conditions-list-item'); |
| 330 var title = element.createChild('div', 'conditions-list-text conditions-list
-title'); | 330 var title = element.createChild('div', 'conditions-list-text conditions-list
-title'); |
| 331 var titleText = title.createChild('div', 'conditions-list-title-text'); | 331 var titleText = title.createChild('div', 'conditions-list-title-text'); |
| 332 titleText.textContent = conditions.title; | 332 titleText.textContent = conditions.title; |
| 333 titleText.title = conditions.title; | 333 titleText.title = conditions.title; |
| 334 element.createChild('div', 'conditions-list-separator'); | 334 element.createChild('div', 'conditions-list-separator'); |
| 335 element.createChild('div', 'conditions-list-text').textContent = | 335 element.createChild('div', 'conditions-list-text').textContent = |
| 336 WebInspector.NetworkConditionsSelector._throughputText(conditions.downlo
ad); | 336 Components.NetworkConditionsSelector._throughputText(conditions.download
); |
| 337 element.createChild('div', 'conditions-list-separator'); | 337 element.createChild('div', 'conditions-list-separator'); |
| 338 element.createChild('div', 'conditions-list-text').textContent = | 338 element.createChild('div', 'conditions-list-text').textContent = |
| 339 WebInspector.NetworkConditionsSelector._throughputText(conditions.upload
); | 339 Components.NetworkConditionsSelector._throughputText(conditions.upload); |
| 340 element.createChild('div', 'conditions-list-separator'); | 340 element.createChild('div', 'conditions-list-separator'); |
| 341 element.createChild('div', 'conditions-list-text').textContent = WebInspecto
r.UIString('%dms', conditions.latency); | 341 element.createChild('div', 'conditions-list-text').textContent = Common.UISt
ring('%dms', conditions.latency); |
| 342 return element; | 342 return element; |
| 343 } | 343 } |
| 344 | 344 |
| 345 /** | 345 /** |
| 346 * @override | 346 * @override |
| 347 * @param {*} item | 347 * @param {*} item |
| 348 * @param {number} index | 348 * @param {number} index |
| 349 */ | 349 */ |
| 350 removeItemRequested(item, index) { | 350 removeItemRequested(item, index) { |
| 351 var list = this._customSetting.get(); | 351 var list = this._customSetting.get(); |
| 352 list.splice(index, 1); | 352 list.splice(index, 1); |
| 353 this._customSetting.set(list); | 353 this._customSetting.set(list); |
| 354 } | 354 } |
| 355 | 355 |
| 356 /** | 356 /** |
| 357 * @override | 357 * @override |
| 358 * @param {*} item | 358 * @param {*} item |
| 359 * @param {!WebInspector.ListWidget.Editor} editor | 359 * @param {!UI.ListWidget.Editor} editor |
| 360 * @param {boolean} isNew | 360 * @param {boolean} isNew |
| 361 */ | 361 */ |
| 362 commitEdit(item, editor, isNew) { | 362 commitEdit(item, editor, isNew) { |
| 363 var conditions = /** @type {?WebInspector.NetworkManager.Conditions} */ (ite
m); | 363 var conditions = /** @type {?SDK.NetworkManager.Conditions} */ (item); |
| 364 conditions.title = editor.control('title').value.trim(); | 364 conditions.title = editor.control('title').value.trim(); |
| 365 var download = editor.control('download').value.trim(); | 365 var download = editor.control('download').value.trim(); |
| 366 conditions.download = download ? parseInt(download, 10) * (1024 / 8) : -1; | 366 conditions.download = download ? parseInt(download, 10) * (1024 / 8) : -1; |
| 367 var upload = editor.control('upload').value.trim(); | 367 var upload = editor.control('upload').value.trim(); |
| 368 conditions.upload = upload ? parseInt(upload, 10) * (1024 / 8) : -1; | 368 conditions.upload = upload ? parseInt(upload, 10) * (1024 / 8) : -1; |
| 369 var latency = editor.control('latency').value.trim(); | 369 var latency = editor.control('latency').value.trim(); |
| 370 conditions.latency = latency ? parseInt(latency, 10) : 0; | 370 conditions.latency = latency ? parseInt(latency, 10) : 0; |
| 371 | 371 |
| 372 var list = this._customSetting.get(); | 372 var list = this._customSetting.get(); |
| 373 if (isNew) | 373 if (isNew) |
| 374 list.push(conditions); | 374 list.push(conditions); |
| 375 this._customSetting.set(list); | 375 this._customSetting.set(list); |
| 376 } | 376 } |
| 377 | 377 |
| 378 /** | 378 /** |
| 379 * @override | 379 * @override |
| 380 * @param {*} item | 380 * @param {*} item |
| 381 * @return {!WebInspector.ListWidget.Editor} | 381 * @return {!UI.ListWidget.Editor} |
| 382 */ | 382 */ |
| 383 beginEdit(item) { | 383 beginEdit(item) { |
| 384 var conditions = /** @type {?WebInspector.NetworkManager.Conditions} */ (ite
m); | 384 var conditions = /** @type {?SDK.NetworkManager.Conditions} */ (item); |
| 385 var editor = this._createEditor(); | 385 var editor = this._createEditor(); |
| 386 editor.control('title').value = conditions.title; | 386 editor.control('title').value = conditions.title; |
| 387 editor.control('download').value = conditions.download <= 0 ? '' : String(co
nditions.download / (1024 / 8)); | 387 editor.control('download').value = conditions.download <= 0 ? '' : String(co
nditions.download / (1024 / 8)); |
| 388 editor.control('upload').value = conditions.upload <= 0 ? '' : String(condit
ions.upload / (1024 / 8)); | 388 editor.control('upload').value = conditions.upload <= 0 ? '' : String(condit
ions.upload / (1024 / 8)); |
| 389 editor.control('latency').value = conditions.latency ? String(conditions.lat
ency) : ''; | 389 editor.control('latency').value = conditions.latency ? String(conditions.lat
ency) : ''; |
| 390 return editor; | 390 return editor; |
| 391 } | 391 } |
| 392 | 392 |
| 393 /** | 393 /** |
| 394 * @return {!WebInspector.ListWidget.Editor} | 394 * @return {!UI.ListWidget.Editor} |
| 395 */ | 395 */ |
| 396 _createEditor() { | 396 _createEditor() { |
| 397 if (this._editor) | 397 if (this._editor) |
| 398 return this._editor; | 398 return this._editor; |
| 399 | 399 |
| 400 var editor = new WebInspector.ListWidget.Editor(); | 400 var editor = new UI.ListWidget.Editor(); |
| 401 this._editor = editor; | 401 this._editor = editor; |
| 402 var content = editor.contentElement(); | 402 var content = editor.contentElement(); |
| 403 | 403 |
| 404 var titles = content.createChild('div', 'conditions-edit-row'); | 404 var titles = content.createChild('div', 'conditions-edit-row'); |
| 405 titles.createChild('div', 'conditions-list-text conditions-list-title').text
Content = | 405 titles.createChild('div', 'conditions-list-text conditions-list-title').text
Content = |
| 406 WebInspector.UIString('Profile Name'); | 406 Common.UIString('Profile Name'); |
| 407 titles.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); | 407 titles.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); |
| 408 titles.createChild('div', 'conditions-list-text').textContent = WebInspector
.UIString('Download'); | 408 titles.createChild('div', 'conditions-list-text').textContent = Common.UIStr
ing('Download'); |
| 409 titles.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); | 409 titles.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); |
| 410 titles.createChild('div', 'conditions-list-text').textContent = WebInspector
.UIString('Upload'); | 410 titles.createChild('div', 'conditions-list-text').textContent = Common.UIStr
ing('Upload'); |
| 411 titles.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); | 411 titles.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); |
| 412 titles.createChild('div', 'conditions-list-text').textContent = WebInspector
.UIString('Latency'); | 412 titles.createChild('div', 'conditions-list-text').textContent = Common.UIStr
ing('Latency'); |
| 413 | 413 |
| 414 var fields = content.createChild('div', 'conditions-edit-row'); | 414 var fields = content.createChild('div', 'conditions-edit-row'); |
| 415 fields.createChild('div', 'conditions-list-text conditions-list-title') | 415 fields.createChild('div', 'conditions-list-text conditions-list-title') |
| 416 .appendChild(editor.createInput('title', 'text', '', titleValidator)); | 416 .appendChild(editor.createInput('title', 'text', '', titleValidator)); |
| 417 fields.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); | 417 fields.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); |
| 418 | 418 |
| 419 var cell = fields.createChild('div', 'conditions-list-text'); | 419 var cell = fields.createChild('div', 'conditions-list-text'); |
| 420 cell.appendChild(editor.createInput('download', 'text', WebInspector.UIStrin
g('kb/s'), throughputValidator)); | 420 cell.appendChild(editor.createInput('download', 'text', Common.UIString('kb/
s'), throughputValidator)); |
| 421 cell.createChild('div', 'conditions-edit-optional').textContent = WebInspect
or.UIString('optional'); | 421 cell.createChild('div', 'conditions-edit-optional').textContent = Common.UIS
tring('optional'); |
| 422 fields.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); | 422 fields.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); |
| 423 | 423 |
| 424 cell = fields.createChild('div', 'conditions-list-text'); | 424 cell = fields.createChild('div', 'conditions-list-text'); |
| 425 cell.appendChild(editor.createInput('upload', 'text', WebInspector.UIString(
'kb/s'), throughputValidator)); | 425 cell.appendChild(editor.createInput('upload', 'text', Common.UIString('kb/s'
), throughputValidator)); |
| 426 cell.createChild('div', 'conditions-edit-optional').textContent = WebInspect
or.UIString('optional'); | 426 cell.createChild('div', 'conditions-edit-optional').textContent = Common.UIS
tring('optional'); |
| 427 fields.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); | 427 fields.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); |
| 428 | 428 |
| 429 cell = fields.createChild('div', 'conditions-list-text'); | 429 cell = fields.createChild('div', 'conditions-list-text'); |
| 430 cell.appendChild(editor.createInput('latency', 'text', WebInspector.UIString
('ms'), latencyValidator)); | 430 cell.appendChild(editor.createInput('latency', 'text', Common.UIString('ms')
, latencyValidator)); |
| 431 cell.createChild('div', 'conditions-edit-optional').textContent = WebInspect
or.UIString('optional'); | 431 cell.createChild('div', 'conditions-edit-optional').textContent = Common.UIS
tring('optional'); |
| 432 | 432 |
| 433 return editor; | 433 return editor; |
| 434 | 434 |
| 435 /** | 435 /** |
| 436 * @param {*} item | 436 * @param {*} item |
| 437 * @param {number} index | 437 * @param {number} index |
| 438 * @param {!HTMLInputElement|!HTMLSelectElement} input | 438 * @param {!HTMLInputElement|!HTMLSelectElement} input |
| 439 * @return {boolean} | 439 * @return {boolean} |
| 440 */ | 440 */ |
| 441 function titleValidator(item, index, input) { | 441 function titleValidator(item, index, input) { |
| (...skipping 19 matching lines...) Expand all Loading... |
| 461 * @return {boolean} | 461 * @return {boolean} |
| 462 */ | 462 */ |
| 463 function latencyValidator(item, index, input) { | 463 function latencyValidator(item, index, input) { |
| 464 var value = input.value.trim(); | 464 var value = input.value.trim(); |
| 465 return !value || (/^[\d]+$/.test(value) && value >= 0 && value <= 1000000)
; | 465 return !value || (/^[\d]+$/.test(value) && value >= 0 && value <= 1000000)
; |
| 466 } | 466 } |
| 467 } | 467 } |
| 468 }; | 468 }; |
| 469 | 469 |
| 470 /** | 470 /** |
| 471 * @implements {WebInspector.ActionDelegate} | 471 * @implements {UI.ActionDelegate} |
| 472 * @unrestricted | 472 * @unrestricted |
| 473 */ | 473 */ |
| 474 WebInspector.NetworkConditionsActionDelegate = class { | 474 Components.NetworkConditionsActionDelegate = class { |
| 475 /** | 475 /** |
| 476 * @override | 476 * @override |
| 477 * @param {!WebInspector.Context} context | 477 * @param {!UI.Context} context |
| 478 * @param {string} actionId | 478 * @param {string} actionId |
| 479 * @return {boolean} | 479 * @return {boolean} |
| 480 */ | 480 */ |
| 481 handleAction(context, actionId) { | 481 handleAction(context, actionId) { |
| 482 if (actionId === 'components.network-online') { | 482 if (actionId === 'components.network-online') { |
| 483 WebInspector.multitargetNetworkManager.setNetworkConditions(WebInspector.N
etworkManager.NoThrottlingConditions); | 483 SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.NoTh
rottlingConditions); |
| 484 return true; | 484 return true; |
| 485 } | 485 } |
| 486 if (actionId === 'components.network-offline') { | 486 if (actionId === 'components.network-offline') { |
| 487 WebInspector.multitargetNetworkManager.setNetworkConditions(WebInspector.N
etworkManager.OfflineConditions); | 487 SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.Offl
ineConditions); |
| 488 return true; | 488 return true; |
| 489 } | 489 } |
| 490 return false; | 490 return false; |
| 491 } | 491 } |
| 492 }; | 492 }; |
| 493 | 493 |
| 494 /** | 494 /** |
| 495 * @param {?Protocol.Network.ResourcePriority} priority | 495 * @param {?Protocol.Network.ResourcePriority} priority |
| 496 * @return {string} | 496 * @return {string} |
| 497 */ | 497 */ |
| 498 WebInspector.uiLabelForPriority = function(priority) { | 498 Components.uiLabelForPriority = function(priority) { |
| 499 var labelMap = WebInspector.uiLabelForPriority._priorityToUILabel; | 499 var labelMap = Components.uiLabelForPriority._priorityToUILabel; |
| 500 if (!labelMap) { | 500 if (!labelMap) { |
| 501 labelMap = new Map([ | 501 labelMap = new Map([ |
| 502 [Protocol.Network.ResourcePriority.VeryLow, WebInspector.UIString('Lowest'
)], | 502 [Protocol.Network.ResourcePriority.VeryLow, Common.UIString('Lowest')], |
| 503 [Protocol.Network.ResourcePriority.Low, WebInspector.UIString('Low')], | 503 [Protocol.Network.ResourcePriority.Low, Common.UIString('Low')], |
| 504 [Protocol.Network.ResourcePriority.Medium, WebInspector.UIString('Medium')
], | 504 [Protocol.Network.ResourcePriority.Medium, Common.UIString('Medium')], |
| 505 [Protocol.Network.ResourcePriority.High, WebInspector.UIString('High')], | 505 [Protocol.Network.ResourcePriority.High, Common.UIString('High')], |
| 506 [Protocol.Network.ResourcePriority.VeryHigh, WebInspector.UIString('Highes
t')] | 506 [Protocol.Network.ResourcePriority.VeryHigh, Common.UIString('Highest')] |
| 507 ]); | 507 ]); |
| 508 WebInspector.uiLabelForPriority._priorityToUILabel = labelMap; | 508 Components.uiLabelForPriority._priorityToUILabel = labelMap; |
| 509 } | 509 } |
| 510 return labelMap.get(priority) || WebInspector.UIString('Unknown'); | 510 return labelMap.get(priority) || Common.UIString('Unknown'); |
| 511 }; | 511 }; |
| OLD | NEW |