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

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/ui/SettingsUI.js

Issue 1642233002: [DevTools] Cleanup various bindInput implementations. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@device-mode-cleanup-misc
Patch Set: Created 4 years, 10 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 /* 1 /*
2 * Copyright (C) 2014 Google Inc. All rights reserved. 2 * Copyright (C) 2014 Google Inc. All rights reserved.
3 * 3 *
4 * Redistribution and use in source and binary forms, with or without 4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions are 5 * modification, are permitted provided that the following conditions are
6 * met: 6 * met:
7 * 7 *
8 * * Redistributions of source code must retain the above copyright 8 * * Redistributions of source code must retain the above copyright
9 * notice, this list of conditions and the following disclaimer. 9 * notice, this list of conditions and the following disclaimer.
10 * * Redistributions in binary form must reproduce the above 10 * * Redistributions in binary form must reproduce the above
(...skipping 60 matching lines...) Expand 10 before | Expand all | Expand 10 after
71 71
72 function inputChanged() 72 function inputChanged()
73 { 73 {
74 if (setting.get() !== input.checked) 74 if (setting.get() !== input.checked)
75 setting.set(input.checked); 75 setting.set(input.checked);
76 } 76 }
77 input.addEventListener("change", inputChanged, false); 77 input.addEventListener("change", inputChanged, false);
78 } 78 }
79 79
80 /** 80 /**
81 * @param {string} label
82 * @param {!WebInspector.Setting} setting
83 * @param {boolean} numeric
84 * @param {number=} maxLength
85 * @param {string=} width
86 * @param {function(string):?string=} validatorCallback
87 * @param {boolean=} instant
88 * @param {boolean=} clearForZero
89 * @param {string=} placeholder
90 * @return {!Element}
91 */
92 WebInspector.SettingsUI.createSettingInputField = function(label, setting, numer ic, maxLength, width, validatorCallback, instant, clearForZero, placeholder)
93 {
94 var p = createElement("p");
95 var labelElement = p.createChild("label");
96 labelElement.textContent = label;
97 var inputElement = p.createChild("input");
98 inputElement.type = "text";
99 if (numeric)
100 inputElement.className = "numeric";
101 if (maxLength)
102 inputElement.maxLength = maxLength;
103 if (width)
104 inputElement.style.width = width;
105 inputElement.placeholder = placeholder || "";
106
107 var errorMessageLabel;
108 if (validatorCallback)
109 errorMessageLabel = p.createChild("div", "field-error-message");
110 WebInspector.SettingsUI.bindSettingInputField(inputElement, setting, numeric , validatorCallback, instant, clearForZero, errorMessageLabel);
111 return p;
112 }
113
114 /**
115 * @param {!Element} inputElement
116 * @param {!WebInspector.Setting} setting
117 * @param {boolean} numeric
118 * @param {function(string):?string=} validatorCallback
119 * @param {boolean=} instant
120 * @param {boolean=} clearForZero
121 * @param {!Element=} errorMessageLabel
122 */
123 WebInspector.SettingsUI.bindSettingInputField = function(inputElement, setting, numeric, validatorCallback, instant, clearForZero, errorMessageLabel)
124 {
125 if (validatorCallback || instant) {
126 inputElement.addEventListener("change", onInput, false);
127 inputElement.addEventListener("input", onInput, false);
128 }
129 inputElement.addEventListener("keydown", onKeyDown, false);
130
131 function onInput()
132 {
133 if (validatorCallback)
134 validate();
135 if (instant)
136 apply();
137 }
138
139 function onKeyDown(event)
140 {
141 if (isEnterKey(event))
142 apply();
143 incrementForArrows(event);
144 }
145
146 function incrementForArrows(event)
147 {
148 if (!numeric)
149 return;
150
151 var increment = event.keyIdentifier === "Up" ? 1 : event.keyIdentifier = == "Down" ? -1 : 0;
152 if (!increment)
153 return;
154 if (event.shiftKey)
155 increment *= 10;
156
157 var value = inputElement.value;
158 if (validatorCallback && validatorCallback(value))
159 return;
160 value = Number(value);
161 if (clearForZero && !value)
162 return;
163 value += increment;
164 if (clearForZero && !value)
165 return;
166 value = String(value);
167 if (validatorCallback && validatorCallback(value))
168 return;
169
170 inputElement.value = value;
171 apply();
172 event.preventDefault();
173 }
174
175 function validate()
176 {
177 var error = validatorCallback(inputElement.value);
178 if (!error)
179 error = "";
180 inputElement.classList.toggle("error-input", !!error);
181 if (errorMessageLabel)
182 errorMessageLabel.textContent = error;
183 }
184
185 if (!instant)
186 inputElement.addEventListener("blur", apply, false);
187
188 function apply()
189 {
190 if (validatorCallback && validatorCallback(inputElement.value))
191 return;
192 setting.removeChangeListener(onSettingChange);
193 setting.set(numeric ? Number(inputElement.value) : inputElement.value);
194 setting.addChangeListener(onSettingChange);
195 }
196
197 setting.addChangeListener(onSettingChange);
198
199 function onSettingChange()
200 {
201 var value = setting.get();
202 if (clearForZero && !value)
203 value = "";
204 inputElement.value = value;
205 validate();
206 }
207 onSettingChange();
208
209 if (validatorCallback)
210 validate();
211 }
212
213 /**
214 * @param {string} name 81 * @param {string} name
215 * @param {!Element} element 82 * @param {!Element} element
216 * @return {!Element} 83 * @return {!Element}
217 */ 84 */
218 WebInspector.SettingsUI.createCustomSetting = function(name, element) 85 WebInspector.SettingsUI.createCustomSetting = function(name, element)
219 { 86 {
220 var p = createElement("p"); 87 var p = createElement("p");
221 var fieldsetElement = p.createChild("fieldset"); 88 var fieldsetElement = p.createChild("fieldset");
222 fieldsetElement.createChild("label").textContent = name; 89 fieldsetElement.createChild("label").textContent = name;
223 fieldsetElement.appendChild(element); 90 fieldsetElement.appendChild(element);
(...skipping 11 matching lines...) Expand all
235 setting.addChangeListener(settingChanged); 102 setting.addChangeListener(settingChanged);
236 return fieldset; 103 return fieldset;
237 104
238 function settingChanged() 105 function settingChanged()
239 { 106 {
240 fieldset.disabled = !setting.get(); 107 fieldset.disabled = !setting.get();
241 } 108 }
242 } 109 }
243 110
244 /** 111 /**
245 * @param {string} text
246 * @return {?string}
247 */
248 WebInspector.SettingsUI.regexValidator = function(text)
249 {
250 var regex;
251 try {
252 regex = new RegExp(text);
253 } catch (e) {
254 }
255 return regex ? null : WebInspector.UIString("Invalid pattern");
256 }
257
258 /**
259 * Creates an input element under the parentElement with the given id and defaul tText. 112 * Creates an input element under the parentElement with the given id and defaul tText.
260 * @param {!Element} parentElement 113 * @param {!Element} parentElement
261 * @param {string} id 114 * @param {string} id
262 * @param {string} defaultText 115 * @param {string} defaultText
263 * @param {function(*)} eventListener 116 * @param {function(*)} eventListener
264 * @param {boolean=} numeric 117 * @param {boolean=} numeric
265 * @param {string=} size 118 * @param {string=} size
266 * @return {!Element} element 119 * @return {!Element} element
267 */ 120 */
268 WebInspector.SettingsUI.createInput = function(parentElement, id, defaultText, e ventListener, numeric, size) 121 WebInspector.SettingsUI.createInput = function(parentElement, id, defaultText, e ventListener, numeric, size)
(...skipping 23 matching lines...) Expand all
292 WebInspector.SettingUI = function() 145 WebInspector.SettingUI = function()
293 { 146 {
294 } 147 }
295 148
296 WebInspector.SettingUI.prototype = { 149 WebInspector.SettingUI.prototype = {
297 /** 150 /**
298 * @return {?Element} 151 * @return {?Element}
299 */ 152 */
300 settingElement: function() { } 153 settingElement: function() { }
301 } 154 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698