Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(87)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/network_conditions/NetworkConditionsSelector.js

Issue 2915883002: DevTools: prepare to unify Network and CPU throttling UI (Closed)
Patch Set: gs Created 3 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
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
3 // found in the LICENSE file.
4 /**
5 * @unrestricted
6 */
7 NetworkConditions.NetworkConditionsSelector = class {
8 /**
9 * @param {function(!Array<!NetworkConditions.NetworkConditionsGroup>):!Array< ?SDK.NetworkManager.Conditions>} populateCallback
10 * @param {function(number)} selectCallback
11 */
12 constructor(populateCallback, selectCallback) {
13 this._populateCallback = populateCallback;
14 this._selectCallback = selectCallback;
15 this._customSetting = Common.moduleSetting('customNetworkConditions');
16 this._customSetting.addChangeListener(this._populateOptions, this);
17 this._manager = SDK.multitargetNetworkManager;
18 this._manager.addEventListener(
19 SDK.MultitargetNetworkManager.Events.ConditionsChanged, this._conditions Changed, this);
20 this._populateOptions();
21 }
22
23 /**
24 * @param {number} throughput
25 * @param {boolean=} plainText
26 * @return {string}
27 */
28 static throughputText(throughput, plainText) {
29 if (throughput < 0)
30 return '';
31 var throughputInKbps = throughput / (1024 / 8);
32 var delimiter = plainText ? '' : ' ';
33 if (throughputInKbps < 1024)
34 return Common.UIString('%d%skb/s', throughputInKbps, delimiter);
35 if (throughputInKbps < 1024 * 10)
36 return Common.UIString('%.1f%sMb/s', throughputInKbps / 1024, delimiter);
37 return Common.UIString('%d%sMb/s', (throughputInKbps / 1024) | 0, delimiter) ;
38 }
39
40 /**
41 * @param {!HTMLSelectElement} selectElement
42 */
43 static decorateSelect(selectElement) {
44 var options = [];
45 var selector = new NetworkConditions.NetworkConditionsSelector(populate, sel ect);
46 selectElement.addEventListener('change', optionSelected, false);
47
48 /**
49 * @param {!Array.<!NetworkConditions.NetworkConditionsGroup>} groups
50 * @return {!Array<?SDK.NetworkManager.Conditions>}
51 */
52 function populate(groups) {
53 selectElement.removeChildren();
54 options = [];
55 for (var i = 0; i < groups.length; ++i) {
56 var group = groups[i];
57 var groupElement = selectElement.createChild('optgroup');
58 groupElement.label = group.title;
59 for (var conditions of group.items) {
60 var title = Common.UIString(conditions.title);
61 var option = new Option(title, title);
62 groupElement.appendChild(option);
63 options.push(conditions);
64 }
65 if (i === groups.length - 1) {
66 groupElement.appendChild(new Option(Common.UIString('Add\u2026'), Comm on.UIString('Add\u2026')));
67 options.push(null);
68 }
69 }
70 return options;
71 }
72
73 function optionSelected() {
74 if (selectElement.selectedIndex === selectElement.options.length - 1)
75 selector.revealAndUpdate();
76 else
77 selector.optionSelected(options[selectElement.selectedIndex]);
78 }
79
80 /**
81 * @param {number} index
82 */
83 function select(index) {
84 if (selectElement.selectedIndex !== index)
85 selectElement.selectedIndex = index;
86 }
87 }
88
89 /**
90 * @return {!UI.ToolbarMenuButton}
91 */
92 static createToolbarMenuButton() {
93 var button = new UI.ToolbarMenuButton(appendItems);
94 button.setGlyph('');
95 button.turnIntoSelect();
96
97 /** @type {!Array<?SDK.NetworkManager.Conditions>} */
98 var options = [];
99 var selectedIndex = -1;
100 var selector = new NetworkConditions.NetworkConditionsSelector(populate, sel ect);
101 return button;
102
103 /**
104 * @param {!UI.ContextMenu} contextMenu
105 */
106 function appendItems(contextMenu) {
107 for (var index = 0; index < options.length; ++index) {
108 var conditions = options[index];
109 if (!conditions) {
110 contextMenu.appendSeparator();
111 } else {
112 contextMenu.appendCheckboxItem(
113 Common.UIString(conditions.title), selector.optionSelected.bind(se lector, conditions),
114 selectedIndex === index);
115 }
116 }
117 contextMenu.appendItem(Common.UIString('Edit\u2026'), selector.revealAndUp date.bind(selector));
118 }
119
120 /**
121 * @param {!Array.<!NetworkConditions.NetworkConditionsGroup>} groups
122 * @return {!Array<?SDK.NetworkManager.Conditions>}
123 */
124 function populate(groups) {
125 options = [];
126 for (var group of groups) {
127 for (var conditions of group.items)
128 options.push(conditions);
129 options.push(null);
130 }
131 return options;
132 }
133
134 /**
135 * @param {number} index
136 */
137 function select(index) {
138 selectedIndex = index;
139 button.setText(options[index].title);
140 }
141 }
142
143 /**
144 * @return {!UI.ToolbarCheckbox}
145 */
146 static createOfflineToolbarCheckbox() {
147 var checkbox = new UI.ToolbarCheckbox(
148 Common.UIString('Offline'), Common.UIString('Force disconnected from net work'), forceOffline);
149 SDK.multitargetNetworkManager.addEventListener(
150 SDK.MultitargetNetworkManager.Events.ConditionsChanged, networkCondition sChanged);
151 checkbox.setChecked(SDK.multitargetNetworkManager.networkConditions() === SD K.NetworkManager.OfflineConditions);
152
153 function forceOffline() {
154 if (checkbox.checked()) {
155 NetworkConditions.NetworkConditionsSelector._lastNetworkConditions =
156 SDK.multitargetNetworkManager.networkConditions();
157 SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.Of flineConditions);
158 } else {
159 SDK.multitargetNetworkManager.setNetworkConditions(
160 NetworkConditions.NetworkConditionsSelector._lastNetworkConditions);
161 }
162 }
163
164 function networkConditionsChanged() {
165 var conditions = SDK.multitargetNetworkManager.networkConditions();
166 checkbox.setChecked(conditions === SDK.NetworkManager.OfflineConditions);
167 }
168 return checkbox;
169 }
170
171 _populateOptions() {
172 var customGroup = {title: Common.UIString('Custom'), items: this._customSett ing.get()};
173 var presetsGroup = {title: Common.UIString('Presets'), items: NetworkConditi ons.NetworkConditionsSelector.presets};
174 var disabledGroup = {title: Common.UIString('Disabled'), items: [SDK.Network Manager.NoThrottlingConditions]};
175 this._options = this._populateCallback([disabledGroup, presetsGroup, customG roup]);
176 if (!this._conditionsChanged()) {
177 for (var i = this._options.length - 1; i >= 0; i--) {
178 if (this._options[i]) {
179 this.optionSelected(/** @type {!SDK.NetworkManager.Conditions} */ (thi s._options[i]));
180 break;
181 }
182 }
183 }
184 }
185
186 revealAndUpdate() {
187 Common.Revealer.reveal(this._customSetting);
188 this._conditionsChanged();
189 }
190
191 /**
192 * @param {!SDK.NetworkManager.Conditions} conditions
193 */
194 optionSelected(conditions) {
195 this._manager.setNetworkConditions(conditions);
196 }
197
198 /**
199 * @return {boolean}
200 */
201 _conditionsChanged() {
202 var value = this._manager.networkConditions();
203 for (var index = 0; index < this._options.length; ++index) {
204 var option = this._options[index];
205 if (option && option.download === value.download && option.upload === valu e.upload &&
206 option.latency === value.latency && option.title === value.title) {
207 this._selectCallback(index);
208 return true;
209 }
210 }
211 return false;
212 }
213 };
214
215 /** @typedef {!{title: string, items: !Array<!SDK.NetworkManager.Conditions>}} * /
216 NetworkConditions.NetworkConditionsGroup;
217
218
219 /** @type {!Array.<!SDK.NetworkManager.Conditions>} */
220 NetworkConditions.NetworkConditionsSelector.presets = [
221 SDK.NetworkManager.OfflineConditions,
222 {title: 'Slow 3G', download: 500 * 1024 / 8 * .8, upload: 500 * 1024 / 8 * .8, latency: 400 * 5},
223 {title: 'Fast 3G', download: 1.6 * 1024 * 1024 / 8 * .9, upload: 750 * 1024 / 8 * .9, latency: 150 * 3.75}
224 ];
225
226 /**
227 * @implements {UI.ActionDelegate}
228 * @unrestricted
229 */
230 NetworkConditions.NetworkConditionsActionDelegate = class {
231 /**
232 * @override
233 * @param {!UI.Context} context
234 * @param {string} actionId
235 * @return {boolean}
236 */
237 handleAction(context, actionId) {
238 if (actionId === 'network-conditions.network-online') {
239 SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.NoTh rottlingConditions);
240 return true;
241 }
242 if (actionId === 'network-conditions.network-offline') {
243 SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.Offl ineConditions);
244 return true;
245 }
246 return false;
247 }
248 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698