| OLD | NEW |
| (Empty) |
| 1 // Copyright 2017 The Chromium Authors. All rights reserved. | |
| 2 // Use of this source code is governed by a BSD-style license that can be | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 /** | |
| 6 * @implements {UI.ListWidget.Delegate} | |
| 7 * @unrestricted | |
| 8 */ | |
| 9 MobileThrottling.NetworkConditionsSettingsTab = class extends UI.VBox { | |
| 10 constructor() { | |
| 11 super(true); | |
| 12 this.registerRequiredCSS('mobile_throttling/networkConditionsSettingsTab.css
'); | |
| 13 | |
| 14 this.contentElement.createChild('div', 'header').textContent = Common.UIStri
ng('Network Throttling Profiles'); | |
| 15 | |
| 16 var addButton = UI.createTextButton( | |
| 17 Common.UIString('Add custom profile...'), this._addButtonClicked.bind(th
is), 'add-conditions-button'); | |
| 18 this.contentElement.appendChild(addButton); | |
| 19 | |
| 20 this._list = new UI.ListWidget(this); | |
| 21 this._list.element.classList.add('conditions-list'); | |
| 22 this._list.registerRequiredCSS('mobile_throttling/networkConditionsSettingsT
ab.css'); | |
| 23 this._list.show(this.contentElement); | |
| 24 | |
| 25 this._customSetting = Common.moduleSetting('customNetworkConditions'); | |
| 26 this._customSetting.addChangeListener(this._conditionsUpdated, this); | |
| 27 | |
| 28 this.setDefaultFocusedElement(addButton); | |
| 29 this.contentElement.tabIndex = 0; | |
| 30 } | |
| 31 | |
| 32 /** | |
| 33 * @override | |
| 34 */ | |
| 35 wasShown() { | |
| 36 super.wasShown(); | |
| 37 this._conditionsUpdated(); | |
| 38 } | |
| 39 | |
| 40 _conditionsUpdated() { | |
| 41 this._list.clear(); | |
| 42 | |
| 43 var conditions = this._customSetting.get(); | |
| 44 for (var i = 0; i < conditions.length; ++i) | |
| 45 this._list.appendItem(conditions[i], true); | |
| 46 | |
| 47 this._list.appendSeparator(); | |
| 48 } | |
| 49 | |
| 50 _addButtonClicked() { | |
| 51 this._list.addNewItem(this._customSetting.get().length, {title: '', download
: -1, upload: -1, latency: 0}); | |
| 52 } | |
| 53 | |
| 54 /** | |
| 55 * @override | |
| 56 * @param {*} item | |
| 57 * @param {boolean} editable | |
| 58 * @return {!Element} | |
| 59 */ | |
| 60 renderItem(item, editable) { | |
| 61 var conditions = /** @type {!SDK.NetworkManager.Conditions} */ (item); | |
| 62 var element = createElementWithClass('div', 'conditions-list-item'); | |
| 63 var title = element.createChild('div', 'conditions-list-text conditions-list
-title'); | |
| 64 var titleText = title.createChild('div', 'conditions-list-title-text'); | |
| 65 titleText.textContent = conditions.title; | |
| 66 titleText.title = conditions.title; | |
| 67 element.createChild('div', 'conditions-list-separator'); | |
| 68 element.createChild('div', 'conditions-list-text').textContent = | |
| 69 MobileThrottling.NetworkConditionsSelector.throughputText(conditions.dow
nload); | |
| 70 element.createChild('div', 'conditions-list-separator'); | |
| 71 element.createChild('div', 'conditions-list-text').textContent = | |
| 72 MobileThrottling.NetworkConditionsSelector.throughputText(conditions.upl
oad); | |
| 73 element.createChild('div', 'conditions-list-separator'); | |
| 74 element.createChild('div', 'conditions-list-text').textContent = Common.UISt
ring('%dms', conditions.latency); | |
| 75 return element; | |
| 76 } | |
| 77 | |
| 78 /** | |
| 79 * @override | |
| 80 * @param {*} item | |
| 81 * @param {number} index | |
| 82 */ | |
| 83 removeItemRequested(item, index) { | |
| 84 var list = this._customSetting.get(); | |
| 85 list.splice(index, 1); | |
| 86 this._customSetting.set(list); | |
| 87 } | |
| 88 | |
| 89 /** | |
| 90 * @override | |
| 91 * @param {*} item | |
| 92 * @param {!UI.ListWidget.Editor} editor | |
| 93 * @param {boolean} isNew | |
| 94 */ | |
| 95 commitEdit(item, editor, isNew) { | |
| 96 var conditions = /** @type {?SDK.NetworkManager.Conditions} */ (item); | |
| 97 conditions.title = editor.control('title').value.trim(); | |
| 98 var download = editor.control('download').value.trim(); | |
| 99 conditions.download = download ? parseInt(download, 10) * (1024 / 8) : -1; | |
| 100 var upload = editor.control('upload').value.trim(); | |
| 101 conditions.upload = upload ? parseInt(upload, 10) * (1024 / 8) : -1; | |
| 102 var latency = editor.control('latency').value.trim(); | |
| 103 conditions.latency = latency ? parseInt(latency, 10) : 0; | |
| 104 | |
| 105 var list = this._customSetting.get(); | |
| 106 if (isNew) | |
| 107 list.push(conditions); | |
| 108 this._customSetting.set(list); | |
| 109 } | |
| 110 | |
| 111 /** | |
| 112 * @override | |
| 113 * @param {*} item | |
| 114 * @return {!UI.ListWidget.Editor} | |
| 115 */ | |
| 116 beginEdit(item) { | |
| 117 var conditions = /** @type {?SDK.NetworkManager.Conditions} */ (item); | |
| 118 var editor = this._createEditor(); | |
| 119 editor.control('title').value = conditions.title; | |
| 120 editor.control('download').value = conditions.download <= 0 ? '' : String(co
nditions.download / (1024 / 8)); | |
| 121 editor.control('upload').value = conditions.upload <= 0 ? '' : String(condit
ions.upload / (1024 / 8)); | |
| 122 editor.control('latency').value = conditions.latency ? String(conditions.lat
ency) : ''; | |
| 123 return editor; | |
| 124 } | |
| 125 | |
| 126 /** | |
| 127 * @return {!UI.ListWidget.Editor} | |
| 128 */ | |
| 129 _createEditor() { | |
| 130 if (this._editor) | |
| 131 return this._editor; | |
| 132 | |
| 133 var editor = new UI.ListWidget.Editor(); | |
| 134 this._editor = editor; | |
| 135 var content = editor.contentElement(); | |
| 136 | |
| 137 var titles = content.createChild('div', 'conditions-edit-row'); | |
| 138 titles.createChild('div', 'conditions-list-text conditions-list-title').text
Content = | |
| 139 Common.UIString('Profile Name'); | |
| 140 titles.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); | |
| 141 titles.createChild('div', 'conditions-list-text').textContent = Common.UIStr
ing('Download'); | |
| 142 titles.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); | |
| 143 titles.createChild('div', 'conditions-list-text').textContent = Common.UIStr
ing('Upload'); | |
| 144 titles.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); | |
| 145 titles.createChild('div', 'conditions-list-text').textContent = Common.UIStr
ing('Latency'); | |
| 146 | |
| 147 var fields = content.createChild('div', 'conditions-edit-row'); | |
| 148 fields.createChild('div', 'conditions-list-text conditions-list-title') | |
| 149 .appendChild(editor.createInput('title', 'text', '', titleValidator)); | |
| 150 fields.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); | |
| 151 | |
| 152 var cell = fields.createChild('div', 'conditions-list-text'); | |
| 153 cell.appendChild(editor.createInput('download', 'text', Common.UIString('kb/
s'), throughputValidator)); | |
| 154 cell.createChild('div', 'conditions-edit-optional').textContent = Common.UIS
tring('optional'); | |
| 155 fields.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); | |
| 156 | |
| 157 cell = fields.createChild('div', 'conditions-list-text'); | |
| 158 cell.appendChild(editor.createInput('upload', 'text', Common.UIString('kb/s'
), throughputValidator)); | |
| 159 cell.createChild('div', 'conditions-edit-optional').textContent = Common.UIS
tring('optional'); | |
| 160 fields.createChild('div', 'conditions-list-separator conditions-list-separat
or-invisible'); | |
| 161 | |
| 162 cell = fields.createChild('div', 'conditions-list-text'); | |
| 163 cell.appendChild(editor.createInput('latency', 'text', Common.UIString('ms')
, latencyValidator)); | |
| 164 cell.createChild('div', 'conditions-edit-optional').textContent = Common.UIS
tring('optional'); | |
| 165 | |
| 166 return editor; | |
| 167 | |
| 168 /** | |
| 169 * @param {*} item | |
| 170 * @param {number} index | |
| 171 * @param {!HTMLInputElement|!HTMLSelectElement} input | |
| 172 * @return {boolean} | |
| 173 */ | |
| 174 function titleValidator(item, index, input) { | |
| 175 var value = input.value.trim(); | |
| 176 return value.length > 0 && value.length < 50; | |
| 177 } | |
| 178 | |
| 179 /** | |
| 180 * @param {*} item | |
| 181 * @param {number} index | |
| 182 * @param {!HTMLInputElement|!HTMLSelectElement} input | |
| 183 * @return {boolean} | |
| 184 */ | |
| 185 function throughputValidator(item, index, input) { | |
| 186 var value = input.value.trim(); | |
| 187 return !value || (/^[\d]+(\.\d+)?|\.\d+$/.test(value) && value >= 0 && val
ue <= 10000000); | |
| 188 } | |
| 189 | |
| 190 /** | |
| 191 * @param {*} item | |
| 192 * @param {number} index | |
| 193 * @param {!HTMLInputElement|!HTMLSelectElement} input | |
| 194 * @return {boolean} | |
| 195 */ | |
| 196 function latencyValidator(item, index, input) { | |
| 197 var value = input.value.trim(); | |
| 198 return !value || (/^[\d]+$/.test(value) && value >= 0 && value <= 1000000)
; | |
| 199 } | |
| 200 } | |
| 201 }; | |
| OLD | NEW |