Revert of DevTools: all swatches should have a default focused element

third_party/WebKit/Source/devtools/front_end/components/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 190 matching lines @@
   }
 
   /**
    * @param {boolean} show
    */
   _togglePalettePanel(show) {
     if (this._palettePanelShowing === show)
       return;
     if (show)
       this._updatePalettePanel();
+    this._focus();
     this._palettePanelShowing = show;
     this.contentElement.classList.toggle('palette-panel-showing', show);
   }
 
+  _focus() {
+    if (this.isShowing())
+      this.contentElement.focus();
+  }
+
   /**
    * @param {string} colorText
    * @param {number=} animationDelay
    * @return {!Element}
    */
   _createPaletteColor(colorText, animationDelay) {
     var element = createElementWithClass('div', 'spectrum-palette-color');
     element.style.background = String.sprintf('linear-gradient(%s, %s), url(Images/checker.png)', colorText, colorText);
     if (animationDelay)
       element.animate([{opacity: 0}, {opacity: 1}], {duration: 100, delay: animationDelay, fill: 'backwards'});
@@ skipping 37 matching lines @@
       numItems++;
     if (palette.mutable) {
       this._paletteContainer.appendChild(this._addColorToolbar.element);
       this._paletteContainer.appendChild(this._deleteIconToolbar.element);
     } else {
       this._addColorToolbar.element.remove();
       this._deleteIconToolbar.element.remove();
     }
 
     this._togglePalettePanel(false);
+    this._focus();
   }
 
   /**
    * @param {!Element} colorElement
    * @param {string} colorText
    * @param {!Event} event
    */
   _showLightnessShades(colorElement, colorText, event) {
     /**
      * @param {!Element} element
@@ skipping 18 matching lines @@
     this._shadesContainer.style.left = colorElement.offsetLeft + 'px';
     colorElement.classList.add('spectrum-shades-shown');
 
     var shades = Components.Spectrum.MaterialPaletteShades[colorText];
     for (var i = shades.length - 1; i >= 0; i--) {
       var shadeElement = this._createPaletteColor(shades[i], i * 200 / shades.length + 100);
       shadeElement.addEventListener('mousedown', this._paletteColorSelected.bind(this, shades[i], false));
       this._shadesContainer.appendChild(shadeElement);
     }
 
+    this._shadesContainer.focus();
     this._shadesCloseHandler = closeLightnessShades.bind(this, colorElement);
     this._shadesContainer.ownerDocument.addEventListener('mousedown', this._shadesCloseHandler, true);
   }
 
   /**
    * @param {!Event} e
    * @return {number}
    */
   _slotIndexForEvent(e) {
     var localX = e.pageX - this._paletteContainer.totalOffsetLeft();
@@ skipping 710 matching lines @@
   '#607D8B':
       ['#ECEFF1', '#CFD8DC', '#B0BEC5', '#90A4AE', '#78909C', '#607D8B', '#546E7A', '#455A64', '#37474F', '#263238']
 };
 
 Components.Spectrum.MaterialPalette = {
   title: 'Material',
   mutable: false,
   matchUserFormat: true,
   colors: Object.keys(Components.Spectrum.MaterialPaletteShades)
 };