third_party/WebKit/Source/devtools/front_end/ui/SettingsUI.js

   1 /*
   2  * Copyright (C) 2014 Google Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions are
   6  * met:
   7  *
   8  *     * Redistributions of source code must retain the above copyright
   9  * notice, this list of conditions and the following disclaimer.
  10  *     * Redistributions in binary form must reproduce the above
  11  * copyright notice, this list of conditions and the following disclaimer
  12  * in the documentation and/or other materials provided with the
  13  * distribution.
  14  *     * Neither the name of Google Inc. nor the names of its
  15  * contributors may be used to endorse or promote products derived from
  16  * this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 WebInspector.SettingsUI = {}
  32
  33 /**
  34  * @param {string} name
  35  * @param {!WebInspector.Setting} setting
  36  * @param {boolean=} omitParagraphElement
  37  * @param {string=} tooltip
  38  * @return {!Element}
  39  */
  40 WebInspector.SettingsUI.createSettingCheckbox = function(name, setting, omitParagraphElement, tooltip)
  41 {
  42     var label = createCheckboxLabel(name);
  43     if (tooltip)
  44         label.title = tooltip;
  45
  46     var input = label.checkboxElement;
  47     input.name = name;
  48     WebInspector.SettingsUI.bindCheckbox(input, setting);
  49
  50     if (omitParagraphElement)
  51         return label;
  52
  53     var p = createElement("p");
  54     p.appendChild(label);
  55     return p;
  56 }
  57
  58 /**
  59  * @param {!Element} input
  60  * @param {!WebInspector.Setting} setting
  61  */
  62 WebInspector.SettingsUI.bindCheckbox = function(input, setting)
  63 {
  64     function settingChanged()
  65     {
  66         if (input.checked !== setting.get())
  67             input.checked = setting.get();
  68     }
  69     setting.addChangeListener(settingChanged);
  70     settingChanged();
  71
  72     function inputChanged()
  73     {
  74         if (setting.get() !== input.checked)
  75             setting.set(input.checked);
  76     }
  77     input.addEventListener("change", inputChanged, false);
  78 }
  79
  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, numeric, 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     if (validatorCallback || instant) {
 108         inputElement.addEventListener("change", onInput, false);
 109         inputElement.addEventListener("input", onInput, false);
 110     }
 111     inputElement.addEventListener("keydown", onKeyDown, false);
 112
 113     var errorMessageLabel;
 114     if (validatorCallback)
 115         errorMessageLabel = p.createChild("div", "field-error-message");
 116
 117     function onInput()
 118     {
 119         if (validatorCallback)
 120             validate();
 121         if (instant)
 122             apply();
 123     }
 124
 125     function onKeyDown(event)
 126     {
 127         if (isEnterKey(event))
 128             apply();
 129         incrementForArrows(event);
 130     }
 131
 132     function incrementForArrows(event)
 133     {
 134         if (!numeric)
 135             return;
 136
 137         var increment = event.keyIdentifier === "Up" ? 1 : event.keyIdentifier === "Down" ? -1 : 0;
 138         if (!increment)
 139             return;
 140         if (event.shiftKey)
 141             increment *= 10;
 142
 143         var value = inputElement.value;
 144         if (validatorCallback && validatorCallback(value))
 145             return;
 146         value = Number(value);
 147         if (clearForZero && !value)
 148             return;
 149         value += increment;
 150         if (clearForZero && !value)
 151             return;
 152         value = String(value);
 153         if (validatorCallback && validatorCallback(value))
 154             return;
 155
 156         inputElement.value = value;
 157         apply();
 158         event.preventDefault();
 159     }
 160
 161     function validate()
 162     {
 163         var error = validatorCallback(inputElement.value);
 164         if (!error)
 165             error = "";
 166         inputElement.classList.toggle("error-input", !!error);
 167         errorMessageLabel.textContent = error;
 168     }
 169
 170     if (!instant)
 171         inputElement.addEventListener("blur", apply, false);
 172
 173     function apply()
 174     {
 175         if (validatorCallback && validatorCallback(inputElement.value))
 176             return;
 177         setting.removeChangeListener(onSettingChange);
 178         setting.set(numeric ? Number(inputElement.value) : inputElement.value);
 179         setting.addChangeListener(onSettingChange);
 180     }
 181
 182     setting.addChangeListener(onSettingChange);
 183
 184     function onSettingChange()
 185     {
 186         var value = setting.get();
 187         if (clearForZero && !value)
 188             value = "";
 189         inputElement.value = value;
 190     }
 191     onSettingChange();
 192
 193     if (validatorCallback)
 194       validate();
 195
 196     return p;
 197 }
 198
 199 /**
 200  * @param {string} name
 201  * @param {!Element} element
 202  * @return {!Element}
 203  */
 204 WebInspector.SettingsUI.createCustomSetting = function(name, element)
 205 {
 206     var p = createElement("p");
 207     var fieldsetElement = p.createChild("fieldset");
 208     fieldsetElement.createChild("label").textContent = name;
 209     fieldsetElement.appendChild(element);
 210     return p;
 211 }
 212
 213 /**
 214  * @param {!WebInspector.Setting} setting
 215  * @return {!Element}
 216  */
 217 WebInspector.SettingsUI.createSettingFieldset = function(setting)
 218 {
 219     var fieldset = createElement("fieldset");
 220     fieldset.disabled = !setting.get();
 221     setting.addChangeListener(settingChanged);
 222     return fieldset;
 223
 224     function settingChanged()
 225     {
 226         fieldset.disabled = !setting.get();
 227     }
 228 }
 229
 230 /**
 231  * @param {string} text
 232  * @return {?string}
 233  */
 234 WebInspector.SettingsUI.regexValidator = function(text)
 235 {
 236     var regex;
 237     try {
 238         regex = new RegExp(text);
 239     } catch (e) {
 240     }
 241     return regex ? null : WebInspector.UIString("Invalid pattern");
 242 }
 243
 244 /**
 245  * Creates an input element under the parentElement with the given id and defaultText.
 246  * @param {!Element} parentElement
 247  * @param {string} id
 248  * @param {string} defaultText
 249  * @param {function(*)} eventListener
 250  * @param {boolean=} numeric
 251  * @param {string=} size
 252  * @return {!Element} element
 253  */
 254 WebInspector.SettingsUI.createInput = function(parentElement, id, defaultText, eventListener, numeric, size)
 255 {
 256     var element = parentElement.createChild("input");
 257     element.id = id;
 258     element.type = "text";
 259     element.maxLength = 12;
 260     element.style.width = size || "80px";
 261     element.value = defaultText;
 262     element.align = "right";
 263     if (numeric)
 264         element.className = "numeric";
 265     element.addEventListener("input", eventListener, false);
 266     element.addEventListener("keydown", keyDownListener, false);
 267     function keyDownListener(event)
 268     {
 269         if (isEnterKey(event))
 270             eventListener(event);
 271     }
 272     return element;
 273 }
 274
 275 /**
 276  * @interface
 277  */
 278 WebInspector.SettingUI = function()
 279 {
 280 }
 281
 282 WebInspector.SettingUI.prototype = {
 283     /**
 284      * @return {?Element}
 285      */
 286     settingElement: function() { }
 287 }