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 NetworkConditions.NetworkConditionsSettingsTab = class extends UI.VBox { | |
10 constructor() { | |
11 super(true); | |
12 this.registerRequiredCSS('network_conditions/networkConditionsSettingsTab.cs
s'); | |
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('network_conditions/networkConditionsSettings
Tab.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 NetworkConditions.NetworkConditionsSelector.throughputText(conditions.do
wnload); | |
70 element.createChild('div', 'conditions-list-separator'); | |
71 element.createChild('div', 'conditions-list-text').textContent = | |
72 NetworkConditions.NetworkConditionsSelector.throughputText(conditions.up
load); | |
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 |