Devtools: Fix ctrl-z in ColorPicker

Source/devtools/front_end/elements/Spectrum.js

 /*
  * Copyright (C) 2011 Brian Grinstead All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 59 matching lines @@
 
     this._currentFormat = WebInspector.Color.Format.HEX;
     var displaySwitcher = this.contentElement.createChild("div", "spectrum-display-switcher");
     appendSwitcherIcon(displaySwitcher);
     displaySwitcher.addEventListener("click", this._formatViewSwitch.bind(this));
 
     // RGBA/HSLA display.
     this._displayContainer = this.contentElement.createChild("div", "spectrum-text source-code");
     this._textValues = [];
     for (var i = 0; i < 4; ++i) {
-        var inputValue = this._displayContainer.createChild("span", "spectrum-text-value");
+        var inputValue = this._displayContainer.createChild("input", "spectrum-text-value");
         inputValue.maxLength = 4;
         this._textValues.push(inputValue);
-        inputValue.addEventListener("keydown", this._checkForTabEvent.bind(this));
         inputValue.addEventListener("keyup", this._inputChanged.bind(this));
         inputValue.addEventListener("mousewheel", this._inputChanged.bind(this));
     }
 
     this._textLabels = this._displayContainer.createChild("div", "spectrum-text-label");
 
     // HEX display.
     this._hexContainer = this.contentElement.createChild("div", "spectrum-text spectrum-text-hex source-code");
-    this._hexValue = this._hexContainer.createChild("span", "spectrum-text-value");
+    this._hexValue = this._hexContainer.createChild("input", "spectrum-text-value");
     this._hexValue.maxLength = 7;
     this._hexValue.addEventListener("keyup", this._inputChanged.bind(this));
     this._hexValue.addEventListener("mousewheel", this._inputChanged.bind(this));
 
     var label = this._hexContainer.createChild("div", "spectrum-text-label");
     label.textContent = "HEX";
 
     WebInspector.installDragHandle(this._hueElement, dragStart.bind(this, positionHue.bind(this)), positionHue.bind(this), null, "default");
     WebInspector.installDragHandle(this._alphaElement, dragStart.bind(this, positionAlpha.bind(this)), positionAlpha.bind(this), null, "default");
     WebInspector.installDragHandle(this._colorElement, dragStart.bind(this, positionColor.bind(this)), positionColor.bind(this), null, "default");
@@ skipping 147 matching lines @@
         this._alphaSlider.style.left = alphaSlideX + "px";
     },
 
     _updateInput: function()
     {
         var cf = WebInspector.Color.Format;
         if (this._currentFormat === cf.HEX || this._currentFormat === cf.ShortHEX || this._currentFormat === cf.Nickname) {
             this._hexContainer.hidden = false;
             this._displayContainer.hidden = true;
             if (this._currentFormat === cf.ShortHEX && this._color().canBeShortHex())
-                this._hexValue.textContent = this._color().asString(cf.ShortHEX);
+                this._hexValue.value = this._color().asString(cf.ShortHEX);
             else
-                this._hexValue.textContent = this._color().asString(cf.HEX);
+                this._hexValue.value = this._color().asString(cf.HEX);
         } else {
             // RGBA, HSLA display.
             this._hexContainer.hidden = true;
             this._displayContainer.hidden = false;
             var isRgb = this._currentFormat === cf.RGB;
             this._textLabels.textContent = isRgb ? "RGBA" : "HSLA";
             var colorValues = isRgb ? this._color().canonicalRGBA() : this._color().canonicalHSLA();
             for (var i = 0; i < 3; ++i) {
-                this._textValues[i].textContent = colorValues[i];
+                this._textValues[i].value = colorValues[i];
                 if (!isRgb && (i === 1 || i === 2))
-                    this._textValues[i].textContent += "%";
+                    this._textValues[i].value += "%";
             }
-            this._textValues[3].textContent = Math.round(colorValues[3] * 100) / 100;
+            this._textValues[3].value= Math.round(colorValues[3] * 100) / 100;
         }
     },
 
     _updateUI: function()
     {
         var h = WebInspector.Color.fromHSVA([this._hsv[0], 1, 1, 1]);
         this._colorElement.style.backgroundColor = /** @type {string} */ (h.asString(WebInspector.Color.Format.RGB));
         this._swatchInnerElement.style.backgroundColor = /** @type {string} */ (this._color().asString(WebInspector.Color.Format.RGBA));
         // Show border if the swatch is white.
         this._swatchInnerElement.classList.toggle("swatch-inner-white", this._color().hsla()[2] > 0.9);
@@ skipping 10 matching lines @@
         else if (this._currentFormat === cf.HSL && !this._color().hasAlpha())
             this._currentFormat = this._originalFormat === cf.ShortHEX ? cf.ShortHEX : cf.HEX;
         else
             this._currentFormat = cf.RGB;
         this._onchange();
     },
 
     /**
      * @param {!Event} event
      */
-    _checkForTabEvent: function(event)
-    {
-        var sibling = event.shiftKey ? event.target.previousSibling : event.target.nextSibling;
-        if (event.code !== "Tab" || !sibling || !sibling.classList.contains("spectrum-text-value"))
-            return;
-        sibling.getComponentSelection().setBaseAndExtent(sibling, 0, sibling, 1);
-        event.consume(true);
-    },
-
-    /**
-     * @param {!Event} event
-     */
     _inputChanged: function(event)
     {
         /**
          * @param {!Element} element
          * @return {string}
          */
         function elementValue(element)
         {
-            return element.textContent;
+            return element.value;
         }
 
         var element = /** @type {!Element} */(event.currentTarget);
         WebInspector.handleElementValueModifications(event, element);
 
         const cf = WebInspector.Color.Format;
         var colorString;
         if (this._currentFormat === cf.HEX || this._currentFormat === cf.ShortHEX) {
-            colorString = this._hexValue.textContent;
+            colorString = this._hexValue.value;
         } else {
             var format = this._currentFormat === cf.RGB ? "rgba" : "hsla";
             var values = this._textValues.map(elementValue).join(",");
             colorString = String.sprintf("%s(%s)", format, values);
         }
 
         var color = WebInspector.Color.parse(colorString);
         if (!color)
             return;
         this._hsv = color.hsva();
@@ skipping 45 matching lines @@
         var rgba = [rgbColor.r, rgbColor.g, rgbColor.b, (rgbColor.a / 2.55 | 0) / 100];
         var color = WebInspector.Color.fromRGBA(rgba);
         this.setColor(color);
         this._dispatchChangeEvent();
         InspectorFrontendHost.bringToFront();
     },
 
 
     __proto__: WebInspector.VBox.prototype
 }