[DevTools] Cleanup various bindInput implementations.

third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeToolbar.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @param {!WebInspector.DeviceModeModel} model
  * @param {!WebInspector.Setting} showMediaInspectorSetting
  * @param {!WebInspector.Setting} showRulersSetting
  * @constructor
  */
@@ skipping 50 matching lines @@
 
     /**
      * @param {!WebInspector.Toolbar} toolbar
      */
     _fillMainToolbar: function(toolbar)
     {
         var widthInput = createElementWithClass("input", "device-mode-size-input");
         widthInput.maxLength = 4;
         widthInput.type = "text";
         widthInput.title = WebInspector.UIString("Width");
-        this._updateWidthInput = this._bindInput(widthInput, this._model.setWidthAndScaleToFit.bind(this._model), WebInspector.DeviceModeModel.deviceSizeValidator);
+        this._updateWidthInput = WebInspector.bindInput(widthInput, applyWidth.bind(this), WebInspector.DeviceModeModel.deviceSizeValidator, true);
         this._widthInput = widthInput;
         this._widthItem = this._wrapToolbarItem(widthInput);
         toolbar.appendToolbarItem(this._widthItem);
 
         var xElement = createElementWithClass("div", "device-mode-x");
         xElement.textContent = "\u00D7";
         this._xItem = this._wrapToolbarItem(xElement);
         toolbar.appendToolbarItem(this._xItem);
 
         var heightInput = createElementWithClass("input", "device-mode-size-input");
         heightInput.maxLength = 4;
         heightInput.type = "text";
         heightInput.title = WebInspector.UIString("Height (leave empty for full)");
-        this._updateHeightInput = this._bindInput(heightInput, this._model.setHeightAndScaleToFit.bind(this._model), validateHeight);
+        this._updateHeightInput = WebInspector.bindInput(heightInput, applyHeight.bind(this), validateHeight, true);
         this._heightInput = heightInput;
         this._heightItem = this._wrapToolbarItem(heightInput);
         toolbar.appendToolbarItem(this._heightItem);
 
         /**
          * @param {string} value
-         * @return {string}
+         * @return {boolean}
          */
         function validateHeight(value)
         {
-            return !value ? "" : WebInspector.DeviceModeModel.deviceSizeValidator(value);
+            return !value || WebInspector.DeviceModeModel.deviceSizeValidator(value);
+        }
+
+        /**
+         * @param {string} value
+         * @this {WebInspector.DeviceModeToolbar}
+         */
+        function applyWidth(value)
+        {
+            var width = value ? Number(value) : 0;
+            this._model.setWidthAndScaleToFit(width);
+        }
+
+        /**
+         * @param {string} value
+         * @this {WebInspector.DeviceModeToolbar}
+         */
+        function applyHeight(value)
+        {
+            var height = value ? Number(value) : 0;
+            this._model.setHeightAndScaleToFit(height);
         }
     },
 
     /**
      * @param {!WebInspector.Toolbar} toolbar
      */
     _fillRightToolbar: function(toolbar)
     {
         toolbar.appendToolbarItem(this._wrapToolbarItem(createElementWithClass("div", "device-mode-empty-toolbar-element")));
         this._scaleItem = new WebInspector.ToolbarMenuButton(this._appendScaleMenuItems.bind(this));
@@ skipping 31 matching lines @@
 
         var moreOptionsButton = new WebInspector.ToolbarMenuButton(this._appendOptionsMenuItems.bind(this));
         moreOptionsButton.setTitle(WebInspector.UIString("More options"));
         toolbar.appendToolbarItem(moreOptionsButton);
 
         toolbar.appendToolbarItem(this._wrapToolbarItem(createElementWithClass("div", "device-mode-empty-toolbar-element")));
     },
 
 
     /**
-     * @param {!Element} input
-     * @param {function(number)} apply
-     * @param {function(string):?string} validate
-     * @return {function(number)}
-     */
-    _bindInput: function(input, apply, validate)
-    {
-        input.addEventListener("change", onChange, false);
-        input.addEventListener("input", onInput, false);
-        input.addEventListener("keydown", onKeyDown, false);
-        input.addEventListener("focus", input.select.bind(input), false);
-
-        function onInput()
-        {
-            input.classList.toggle("error-input", !!validate(input.value));
-        }
-
-        function onChange()
-        {
-            var valid = !validate(input.value);
-            input.classList.toggle("error-input", !valid);
-            if (valid)
-                apply(input.value ? Number(input.value) : 0);
-        }
-
-        /**
-         * @param {!Event} event
-         */
-        function onKeyDown(event)
-        {
-            if (isEnterKey(event)) {
-                if (!validate(input.value))
-                    apply(input.value ? Number(input.value) : 0);
-                return;
-            }
-
-            var increment = event.keyIdentifier === "Up" ? 1 : event.keyIdentifier === "Down" ? -1 : 0;
-            if (!increment)
-                return;
-            if (event.shiftKey)
-                increment *= 10;
-
-            var value = input.value;
-            if (validate(value) || !value)
-                return;
-
-            value = (value ? Number(value) : 0) + increment;
-            var stringValue = value ? String(value) : "";
-            if (validate(stringValue) || !value)
-                return;
-
-            input.value = stringValue;
-            apply(input.value ? Number(input.value) : 0);
-            event.preventDefault();
-        }
-
-        /**
-         * @param {number} value
-         */
-        function setValue(value)
-        {
-            var stringValue = value ? String(value) : "";
-            if (stringValue === input.value)
-                return;
-            var valid = !validate(stringValue);
-            input.classList.toggle("error-input", !valid);
-            input.value = stringValue;
-            input.setSelectionRange(stringValue.length, stringValue.length);
-        }
-
-        return setValue;
-    },
-
-    /**
      * @param {!WebInspector.ContextMenu} contextMenu
      */
     _appendScaleMenuItems: function(contextMenu)
     {
         var scaleSetting = this._model.scaleSetting();
         if (this._model.type() === WebInspector.DeviceModeModel.Type.Device) {
             contextMenu.appendItem(WebInspector.UIString("Fit to window (%.0f%%)", this._model.fitScale() * 100), scaleSetting.set.bind(scaleSetting, this._model.fitScale()), false);
             contextMenu.appendSeparator();
         }
         appendScaleItem(WebInspector.UIString("50%"), 0.5);
@@ skipping 247 matching lines @@
 
     update: function()
     {
         if (this._model.type() !== this._cachedModelType) {
             this._cachedModelType = this._model.type();
             this._widthInput.disabled = this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive;
             this._heightInput.disabled = this._model.type() !== WebInspector.DeviceModeModel.Type.Responsive;
         }
 
         var size = this._model.appliedDeviceSize();
-        this._updateHeightInput(this._model.type() === WebInspector.DeviceModeModel.Type.Responsive && this._model.isFullHeight() ? 0 : size.height);
-        this._updateWidthInput(size.width);
+        this._updateHeightInput(this._model.type() === WebInspector.DeviceModeModel.Type.Responsive && this._model.isFullHeight() ? "" : String(size.height));
+        this._updateWidthInput(String(size.width));
         this._heightInput.placeholder = size.height;
 
         if (this._model.scale() !== this._cachedScale) {
             this._scaleItem.setText(WebInspector.UIString("%.0f%%", this._model.scale() * 100));
             this._scaleItem.setState(this._model.scale() === 1 ? "off" : "on");
             this._cachedScale = this._model.scale();
         }
 
         var deviceScale = this._model.deviceScaleFactorSetting().get();
         this._deviceScaleItem.setVisible(this._model.type() === WebInspector.DeviceModeModel.Type.Responsive && !!deviceScale);
@@ skipping 56 matching lines @@
                         this._emulateDevice(device);
                         return;
                     }
                 }
             }
         }
 
         this._model.emulate(WebInspector.DeviceModeModel.Type.Responsive, null, null);
     }
 }