DevTools [Common - Infobar]: Make infobars keyboard accessible

Changes:
- Infobar buttons are keyboard accessible

Infobar button focus:
https://imgur.com/a/z9r8wvt

Reduced button size and added margin (current implementation):
https://imgur.com/ZElowjJ

Bug: 963183

Change-Id: Ied028e357be961cc70fde45b952ce8dbf4a7c384
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1657229
Commit-Queue: Michael Liao <michael.liao@microsoft.com>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702653}

third_party/blink/renderer/devtools/front_end/sources/DebuggerPlugin.js

@@ -1585,6 +1585,7 @@ Sources.DebuggerPlugin = class extends Sources.UISourceCodeFrame.Plugin {
     toolbar.element.style.verticalAlign = 'middle';
     toolbar.element.style.marginBottom = '3px';
     toolbar.element.style.pointerEvents = 'none';
+    toolbar.element.tabIndex = -1;
     const element = this._prettyPrintInfobar.createDetailsRowMessage();
     element.appendChild(UI.formatLocalized(
         'You can click the %s button on the bottom status bar, and continue debugging with the new formatted source.',

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

@@ -21,20 +21,21 @@ export default class Infobar {
     this._mainRowText.textContent = text;
     this._detailsRows = this._contentElement.createChild('div', 'infobar-details-rows hidden');
 
-    this._toggleElement = this._mainRow.createChild('div', 'infobar-toggle hidden');
-    this._toggleElement.addEventListener('click', this._onToggleDetails.bind(this), false);
-    this._toggleElement.textContent = Common.UIString('more');
+    this._toggleElement =
+        UI.createTextButton(ls`more`, this._onToggleDetails.bind(this), 'infobar-toggle link-style hidden');
+    this._mainRow.appendChild(this._toggleElement);
 
     /** @type {?Common.Setting} */
     this._disableSetting = disableSetting || null;
     if (disableSetting) {
-      const disableButton = this._mainRow.createChild('div', 'infobar-toggle');
-      disableButton.textContent = Common.UIString('never show');
-      disableButton.addEventListener('click', this._onDisable.bind(this), false);
+      const disableButton =
+          UI.createTextButton(ls`never show`, this._onDisable.bind(this), 'infobar-toggle link-style');
+      this._mainRow.appendChild(disableButton);
     }
 
     this._closeButton = this._contentElement.createChild('div', 'close-button', 'dt-close-button');
-    this._closeButton.addEventListener('click', this.dispose.bind(this), false);
+    this._closeButton.setTabbable(true);
+    self.onInvokeElement(this._closeButton, this.dispose.bind(this));
 
     /** @type {?function()} */
     this._closeCallback = null;

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

@@ -63,28 +63,6 @@ export default class Panel extends UI.VBox {
   elementsToRestoreScrollPositionsFor() {
     return [];
   }
-
-  /**
-   * @param {!UI.Infobar} infobar
-   */
-  showInfobar(infobar) {
-    infobar.setCloseCallback(this._onInfobarClosed.bind(this, infobar));
-    if (this.element.firstChild) {
-      this.element.insertBefore(infobar.element, this.element.firstChild);
-    } else {
-      this.element.appendChild(infobar.element);
-    }
-    infobar.setParentView(this);
-    this.doResize();
-  }
-
-  /**
-   * @param {!UI.Infobar} infobar
-   */
-  _onInfobarClosed(infobar) {
-    infobar.element.remove();
-    this.doResize();
-  }
 }
 
 /**

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

@@ -1594,6 +1594,18 @@ registerCustomElement('div', 'dt-close-button', class extends HTMLDivElement {
   setAccessibleName(name) {
     UI.ARIAUtils.setAccessibleName(this._buttonElement, name);
   }
+
+  /**
+   * @param {boolean} tabbable
+   * @this {Element}
+   */
+  setTabbable(tabbable) {
+    if (tabbable) {
+      this._buttonElement.tabIndex = 0;
+    } else {
+      this._buttonElement.tabIndex = -1;
+    }
+  }
 });
 })();
 

third_party/blink/renderer/devtools/front_end/ui/closeButton.css

@@ -25,6 +25,14 @@
     display: block;
 }
 
+.close-button[data-keyboard-focus="true"]:focus .default-icon, .close-button:active .default-icon {
+    display: none;
+}
+
+.close-button[data-keyboard-focus="true"]:focus .hover-icon {
+    display: block;
+}
+
 .close-button:active .hover-icon {
     display: none !important;
 }

third_party/blink/renderer/devtools/front_end/ui/infobar.css

@@ -67,6 +67,8 @@
 .infobar-toggle {
     color: hsl(214, 92%, 50%);
     cursor: pointer;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 
 .infobar-toggle:hover {

third_party/blink/renderer/devtools/front_end/ui/textButton.css

@@ -44,6 +44,15 @@
     color: #fff;
 }
 
+.text-button.link-style {
+  background: none;
+  border: none;
+  padding: 0!important;
+  font: inherit;
+  cursor: pointer;
+  height: 18px;
+}
+
 .text-button.primary-button:not(:disabled):focus,
 .text-button.primary-button:not(:disabled):hover,
 .text-button.primary-button:not(:disabled):active, -theme-preserve {