[DevTools] Rework some focus code.

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 30 matching lines @@
         icon.setAttribute("height", 16);
         icon.setAttribute("width", 16);
         var path = icon.createSVGChild("path");
         path.setAttribute("d", "M5,6 L11,6 L8,2 Z M5,10 L11,10 L8,14 Z");
         return icon;
     }
 
     WebInspector.VBox.call(this, true);
     this.registerRequiredCSS("components/spectrum.css");
     this.contentElement.tabIndex = 0;
+    this.setDefaultFocusedElement(this.contentElement);
 
     this._colorElement = this.contentElement.createChild("div", "spectrum-color");
     this._colorDragElement = this._colorElement.createChild("div", "spectrum-sat fill").createChild("div", "spectrum-val fill").createChild("div", "spectrum-dragger");
     var contrastRatioSVG = this._colorElement.createSVGChild("svg", "spectrum-contrast-container fill");
     this._contrastRatioLine = contrastRatioSVG.createSVGChild("path", "spectrum-contrast-line");
 
     var toolbar = new WebInspector.Toolbar("spectrum-eye-dropper", this.contentElement);
     this._colorPickerButton = new WebInspector.ToolbarToggle(WebInspector.UIString("Toggle color picker"), "eyedropper-toolbar-item");
     this._colorPickerButton.setToggled(true);
     this._colorPickerButton.addEventListener("click", this._toggleColorPicker.bind(this, undefined));
@@ skipping 160 matching lines @@
             return;
         if (show)
             this._updatePalettePanel();
         this._focus();
         this._palettePanelShowing = show;
         this.contentElement.classList.toggle("palette-panel-showing", show);
     },
 
     _focus: function()
     {
-        if (this.isShowing() && WebInspector.currentFocusElement() !== this.contentElement)
-            WebInspector.setCurrentFocusElement(this.contentElement);
+        if (this.isShowing())
+            this.contentElement.focus();
     },
 
     /**
      * @param {string} colorText
      * @param {number=} animationDelay
      * @return {!Element}
      */
     _createPaletteColor: function(colorText, animationDelay)
     {
         var element = createElementWithClass("div", "spectrum-palette-color");
@@ skipping 78 matching lines @@
         this._shadesContainer.style.left = colorElement.offsetLeft + "px";
         colorElement.classList.add("spectrum-shades-shown");
 
         var shades = WebInspector.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);
         }
 
-        WebInspector.setCurrentFocusElement(this._shadesContainer);
+        this._shadesContainer.focus();
         this._shadesCloseHandler = closeLightnessShades.bind(this, colorElement);
         this._shadesContainer.ownerDocument.addEventListener("mousedown", this._shadesCloseHandler, true);
     },
 
     /**
      * @param {!Event} e
      * @return {number}
      */
     _slotIndexForEvent: function(e)
     {
@@ skipping 675 matching lines @@
     "#FFEB3B": ["#FFFDE7", "#FFF9C4", "#FFF59D", "#FFF176", "#FFEE58", "#FFEB3B", "#FDD835", "#FBC02D", "#F9A825", "#F57F17"],
     "#FFC107": ["#FFF8E1", "#FFECB3", "#FFE082", "#FFD54F", "#FFCA28", "#FFC107", "#FFB300", "#FFA000", "#FF8F00", "#FF6F00"],
     "#FF9800": ["#FFF3E0", "#FFE0B2", "#FFCC80", "#FFB74D", "#FFA726", "#FF9800", "#FB8C00", "#F57C00", "#EF6C00", "#E65100"],
     "#FF5722": ["#FBE9E7", "#FFCCBC", "#FFAB91", "#FF8A65", "#FF7043", "#FF5722", "#F4511E", "#E64A19", "#D84315", "#BF360C"],
     "#795548": ["#EFEBE9", "#D7CCC8", "#BCAAA4", "#A1887F", "#8D6E63", "#795548", "#6D4C41", "#5D4037", "#4E342E", "#3E2723"],
     "#9E9E9E": ["#FAFAFA", "#F5F5F5", "#EEEEEE", "#E0E0E0", "#BDBDBD", "#9E9E9E", "#757575", "#616161", "#424242", "#212121"],
     "#607D8B": ["#ECEFF1", "#CFD8DC", "#B0BEC5", "#90A4AE", "#78909C", "#607D8B", "#546E7A", "#455A64", "#37474F", "#263238"]
 };
 
 WebInspector.Spectrum.MaterialPalette = { title: "Material", mutable: false, matchUserFormat: true, colors: Object.keys(WebInspector.Spectrum.MaterialPaletteShades) };