DevTools: Make add button in color-picker accessible

Earlier, when user pressed Enter when focus was in Add button it used to close color-picker because keydown event used to
get bubbled up to inline_editor_module.js which was hiding the element. This inline_editor_module hides
the suggested list of items when user presses enter in one of them.

This change adds keydown handler in UI.Toolbar which consumes the keydown event similar to click handler in it which prevents hiding up color-picker when user presses enter.
Also, this change gives focus to recently added item when add button is clicked which has a lightblue border color.

Gif showing this change: https://imgur.com/2aaF4Y2

Bug: 963183

Change-Id: Ia4594adbb802fdf2fada7ebf62be9a8d1c148f1e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1688337Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Commit-Queue: Chandani Shrestha <chshrest@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#704841}

third_party/blink/renderer/devtools/front_end/color_picker/Spectrum.js

@@ -317,6 +317,7 @@ ColorPicker.Spectrum = class extends UI.VBox {
     for (let i = 0; i < palette.colors.length; i++) {
       const animationDelay = animate ? i * 100 / palette.colors.length : 0;
       const colorElement = this._createPaletteColor(palette.colors[i], palette.colorNames[i], animationDelay);
+      colorElement.tabIndex = -1;
       colorElement.addEventListener(
           'mousedown',
           this._paletteColorSelected.bind(this, palette.colors[i], palette.colorNames[i], palette.matchUserFormat));
@@ -627,6 +628,8 @@ ColorPicker.Spectrum = class extends UI.VBox {
     palette.colors.push(this.colorString());
     this._customPaletteSetting.set(palette);
     this._showPalette(this._customPaletteSetting.get(), false);
+    const colorElements = this._paletteContainer.querySelectorAll('.spectrum-palette-color');
+    colorElements[colorElements.length - 1].focus();
   }
 
   /**

third_party/blink/renderer/devtools/front_end/color_picker/spectrum.css

@@ -424,6 +424,11 @@
     border-color: transparent;
 }
 
+.spectrum-palette-color:not(.has-material-shades):focus {
+  border: 1px solid var(--accent-color-hover);
+  transform: scale(1.4);
+}
+
 .spectrum-palette > .spectrum-palette-color:not(.empty-color):not(.has-material-shades):hover,
 .palette-color-shades > .spectrum-palette-color:not(.empty-color):hover {
     transform: scale(1.15);

third_party/blink/renderer/devtools/front_end/ui/Toolbar.js

@@ -493,6 +493,7 @@ export class ToolbarButton extends ToolbarItem {
     super(createElementWithClass('button', 'toolbar-button'));
     this.element.addEventListener('click', this._clicked.bind(this), false);
     this.element.addEventListener('mousedown', this._mouseDown.bind(this), false);
+    this.element.addEventListener('keydown', this._keydown.bind(this), false);
 
     this._glyphElement = UI.Icon.create('', 'toolbar-glyph hidden');
     this.element.appendChild(this._glyphElement);
@@ -565,6 +566,16 @@ export class ToolbarButton extends ToolbarItem {
     event.consume();
   }
 
+  /**
+   * @param {!Event} event
+   */
+  _keydown(event) {
+    if (!this._enabled)
+      return;
+    this.dispatchEventToListeners(UI.ToolbarButton.Events.KeyDown, event);
+    event.consume();
+  }
+
   /**
    * @param {!Event} event
    */
@@ -578,6 +589,7 @@ export class ToolbarButton extends ToolbarItem {
 
 ToolbarButton.Events = {
   Click: Symbol('Click'),
+  KeyDown: Symbol('KeyDown'),
   MouseDown: Symbol('MouseDown')
 };