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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/mobile_throttling/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
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 NetworkConditions.NetworkConditionsSelector = class { 7 MobileThrottling.NetworkConditionsSelector = class {
8 /** 8 /**
9 * @param {function(!Array<!NetworkConditions.NetworkConditionsGroup>):!Array< ?SDK.NetworkManager.Conditions>} populateCallback 9 * @param {function(!Array<!MobileThrottling.NetworkConditionsGroup>):!Array<? SDK.NetworkManager.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 = Common.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 = SDK.multitargetNetworkManager; 17 this._manager = SDK.multitargetNetworkManager;
18 this._manager.addEventListener( 18 this._manager.addEventListener(
19 SDK.MultitargetNetworkManager.Events.ConditionsChanged, this._conditions Changed, this); 19 SDK.MultitargetNetworkManager.Events.ConditionsChanged, this._conditions Changed, this);
(...skipping 15 matching lines...) Expand all
35 if (throughputInKbps < 1024 * 10) 35 if (throughputInKbps < 1024 * 10)
36 return Common.UIString('%.1f%sMb/s', throughputInKbps / 1024, delimiter); 36 return Common.UIString('%.1f%sMb/s', throughputInKbps / 1024, delimiter);
37 return Common.UIString('%d%sMb/s', (throughputInKbps / 1024) | 0, delimiter) ; 37 return Common.UIString('%d%sMb/s', (throughputInKbps / 1024) | 0, delimiter) ;
38 } 38 }
39 39
40 /** 40 /**
41 * @param {!HTMLSelectElement} selectElement 41 * @param {!HTMLSelectElement} selectElement
42 */ 42 */
43 static decorateSelect(selectElement) { 43 static decorateSelect(selectElement) {
44 var options = []; 44 var options = [];
45 var selector = new NetworkConditions.NetworkConditionsSelector(populate, sel ect); 45 var selector = new MobileThrottling.NetworkConditionsSelector(populate, sele ct);
46 selectElement.addEventListener('change', optionSelected, false); 46 selectElement.addEventListener('change', optionSelected, false);
47 47
48 /** 48 /**
49 * @param {!Array.<!NetworkConditions.NetworkConditionsGroup>} groups 49 * @param {!Array.<!MobileThrottling.NetworkConditionsGroup>} groups
50 * @return {!Array<?SDK.NetworkManager.Conditions>} 50 * @return {!Array<?SDK.NetworkManager.Conditions>}
51 */ 51 */
52 function populate(groups) { 52 function populate(groups) {
53 selectElement.removeChildren(); 53 selectElement.removeChildren();
54 options = []; 54 options = [];
55 for (var i = 0; i < groups.length; ++i) { 55 for (var i = 0; i < groups.length; ++i) {
56 var group = groups[i]; 56 var group = groups[i];
57 var groupElement = selectElement.createChild('optgroup'); 57 var groupElement = selectElement.createChild('optgroup');
58 groupElement.label = group.title; 58 groupElement.label = group.title;
59 for (var conditions of group.items) { 59 for (var conditions of group.items) {
(...skipping 30 matching lines...) Expand all
90 * @return {!UI.ToolbarMenuButton} 90 * @return {!UI.ToolbarMenuButton}
91 */ 91 */
92 static createToolbarMenuButton() { 92 static createToolbarMenuButton() {
93 var button = new UI.ToolbarMenuButton(appendItems); 93 var button = new UI.ToolbarMenuButton(appendItems);
94 button.setGlyph(''); 94 button.setGlyph('');
95 button.turnIntoSelect(); 95 button.turnIntoSelect();
96 96
97 /** @type {!Array<?SDK.NetworkManager.Conditions>} */ 97 /** @type {!Array<?SDK.NetworkManager.Conditions>} */
98 var options = []; 98 var options = [];
99 var selectedIndex = -1; 99 var selectedIndex = -1;
100 var selector = new NetworkConditions.NetworkConditionsSelector(populate, sel ect); 100 var selector = new MobileThrottling.NetworkConditionsSelector(populate, sele ct);
101 return button; 101 return button;
102 102
103 /** 103 /**
104 * @param {!UI.ContextMenu} contextMenu 104 * @param {!UI.ContextMenu} contextMenu
105 */ 105 */
106 function appendItems(contextMenu) { 106 function appendItems(contextMenu) {
107 for (var index = 0; index < options.length; ++index) { 107 for (var index = 0; index < options.length; ++index) {
108 var conditions = options[index]; 108 var conditions = options[index];
109 if (!conditions) { 109 if (!conditions) {
110 contextMenu.appendSeparator(); 110 contextMenu.appendSeparator();
111 } else { 111 } else {
112 contextMenu.appendCheckboxItem( 112 contextMenu.appendCheckboxItem(
113 Common.UIString(conditions.title), selector.optionSelected.bind(se lector, conditions), 113 Common.UIString(conditions.title), selector.optionSelected.bind(se lector, conditions),
114 selectedIndex === index); 114 selectedIndex === index);
115 } 115 }
116 } 116 }
117 contextMenu.appendItem(Common.UIString('Edit\u2026'), selector.revealAndUp date.bind(selector)); 117 contextMenu.appendItem(Common.UIString('Edit\u2026'), selector.revealAndUp date.bind(selector));
118 } 118 }
119 119
120 /** 120 /**
121 * @param {!Array.<!NetworkConditions.NetworkConditionsGroup>} groups 121 * @param {!Array.<!MobileThrottling.NetworkConditionsGroup>} groups
122 * @return {!Array<?SDK.NetworkManager.Conditions>} 122 * @return {!Array<?SDK.NetworkManager.Conditions>}
123 */ 123 */
124 function populate(groups) { 124 function populate(groups) {
125 options = []; 125 options = [];
126 for (var group of groups) { 126 for (var group of groups) {
127 for (var conditions of group.items) 127 for (var conditions of group.items)
128 options.push(conditions); 128 options.push(conditions);
129 options.push(null); 129 options.push(null);
130 } 130 }
131 return options; 131 return options;
(...skipping 13 matching lines...) Expand all
145 */ 145 */
146 static createOfflineToolbarCheckbox() { 146 static createOfflineToolbarCheckbox() {
147 var checkbox = new UI.ToolbarCheckbox( 147 var checkbox = new UI.ToolbarCheckbox(
148 Common.UIString('Offline'), Common.UIString('Force disconnected from net work'), forceOffline); 148 Common.UIString('Offline'), Common.UIString('Force disconnected from net work'), forceOffline);
149 SDK.multitargetNetworkManager.addEventListener( 149 SDK.multitargetNetworkManager.addEventListener(
150 SDK.MultitargetNetworkManager.Events.ConditionsChanged, networkCondition sChanged); 150 SDK.MultitargetNetworkManager.Events.ConditionsChanged, networkCondition sChanged);
151 checkbox.setChecked(SDK.multitargetNetworkManager.networkConditions() === SD K.NetworkManager.OfflineConditions); 151 checkbox.setChecked(SDK.multitargetNetworkManager.networkConditions() === SD K.NetworkManager.OfflineConditions);
152 152
153 function forceOffline() { 153 function forceOffline() {
154 if (checkbox.checked()) { 154 if (checkbox.checked()) {
155 NetworkConditions.NetworkConditionsSelector._lastNetworkConditions = 155 MobileThrottling.NetworkConditionsSelector._lastNetworkConditions =
156 SDK.multitargetNetworkManager.networkConditions(); 156 SDK.multitargetNetworkManager.networkConditions();
157 SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.Of flineConditions); 157 SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.Of flineConditions);
158 } else { 158 } else {
159 SDK.multitargetNetworkManager.setNetworkConditions( 159 SDK.multitargetNetworkManager.setNetworkConditions(
160 NetworkConditions.NetworkConditionsSelector._lastNetworkConditions); 160 MobileThrottling.NetworkConditionsSelector._lastNetworkConditions);
161 } 161 }
162 } 162 }
163 163
164 function networkConditionsChanged() { 164 function networkConditionsChanged() {
165 var conditions = SDK.multitargetNetworkManager.networkConditions(); 165 var conditions = SDK.multitargetNetworkManager.networkConditions();
166 checkbox.setChecked(conditions === SDK.NetworkManager.OfflineConditions); 166 checkbox.setChecked(conditions === SDK.NetworkManager.OfflineConditions);
167 } 167 }
168 return checkbox; 168 return checkbox;
169 } 169 }
170 170
171 _populateOptions() { 171 _populateOptions() {
172 var customGroup = {title: Common.UIString('Custom'), items: this._customSett ing.get()}; 172 var customGroup = {title: Common.UIString('Custom'), items: this._customSett ing.get()};
173 var presetsGroup = {title: Common.UIString('Presets'), items: NetworkConditi ons.NetworkConditionsSelector.presets}; 173 var presetsGroup = {title: Common.UIString('Presets'), items: MobileThrottli ng.NetworkConditionsSelector.presets};
174 var disabledGroup = {title: Common.UIString('Disabled'), items: [SDK.Network Manager.NoThrottlingConditions]}; 174 var disabledGroup = {title: Common.UIString('Disabled'), items: [SDK.Network Manager.NoThrottlingConditions]};
175 this._options = this._populateCallback([disabledGroup, presetsGroup, customG roup]); 175 this._options = this._populateCallback([disabledGroup, presetsGroup, customG roup]);
176 if (!this._conditionsChanged()) { 176 if (!this._conditionsChanged()) {
177 for (var i = this._options.length - 1; i >= 0; i--) { 177 for (var i = this._options.length - 1; i >= 0; i--) {
178 if (this._options[i]) { 178 if (this._options[i]) {
179 this.optionSelected(/** @type {!SDK.NetworkManager.Conditions} */ (thi s._options[i])); 179 this.optionSelected(/** @type {!SDK.NetworkManager.Conditions} */ (thi s._options[i]));
180 break; 180 break;
181 } 181 }
182 } 182 }
183 } 183 }
(...skipping 22 matching lines...) Expand all
206 option.latency === value.latency && option.title === value.title) { 206 option.latency === value.latency && option.title === value.title) {
207 this._selectCallback(index); 207 this._selectCallback(index);
208 return true; 208 return true;
209 } 209 }
210 } 210 }
211 return false; 211 return false;
212 } 212 }
213 }; 213 };
214 214
215 /** @typedef {!{title: string, items: !Array<!SDK.NetworkManager.Conditions>}} * / 215 /** @typedef {!{title: string, items: !Array<!SDK.NetworkManager.Conditions>}} * /
216 NetworkConditions.NetworkConditionsGroup; 216 MobileThrottling.NetworkConditionsGroup;
217 217
218 218
219 /** @type {!Array.<!SDK.NetworkManager.Conditions>} */ 219 /** @type {!Array.<!SDK.NetworkManager.Conditions>} */
220 NetworkConditions.NetworkConditionsSelector.presets = [ 220 MobileThrottling.NetworkConditionsSelector.presets = [
221 SDK.NetworkManager.OfflineConditions, 221 SDK.NetworkManager.OfflineConditions,
222 {title: 'Slow 3G', download: 500 * 1024 / 8 * .8, upload: 500 * 1024 / 8 * .8, latency: 400 * 5}, 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} 223 {title: 'Fast 3G', download: 1.6 * 1024 * 1024 / 8 * .9, upload: 750 * 1024 / 8 * .9, latency: 150 * 3.75}
224 ]; 224 ];
225 225
226 /** 226 /**
227 * @implements {UI.ActionDelegate} 227 * @implements {UI.ActionDelegate}
228 * @unrestricted 228 * @unrestricted
229 */ 229 */
230 NetworkConditions.NetworkConditionsActionDelegate = class { 230 MobileThrottling.NetworkConditionsActionDelegate = class {
231 /** 231 /**
232 * @override 232 * @override
233 * @param {!UI.Context} context 233 * @param {!UI.Context} context
234 * @param {string} actionId 234 * @param {string} actionId
235 * @return {boolean} 235 * @return {boolean}
236 */ 236 */
237 handleAction(context, actionId) { 237 handleAction(context, actionId) {
238 if (actionId === 'network-conditions.network-online') { 238 if (actionId === 'network-conditions.network-online') {
239 SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.NoTh rottlingConditions); 239 SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.NoTh rottlingConditions);
240 return true; 240 return true;
241 } 241 }
242 if (actionId === 'network-conditions.network-offline') { 242 if (actionId === 'network-conditions.network-offline') {
243 SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.Offl ineConditions); 243 SDK.multitargetNetworkManager.setNetworkConditions(SDK.NetworkManager.Offl ineConditions);
244 return true; 244 return true;
245 } 245 }
246 return false; 246 return false;
247 } 247 }
248 }; 248 };
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698