DevTools: Focus background in Toolbars

third_party/WebKit/Source/devtools/front_end/ui/UIUtils.js

 /*
  * Copyright (C) 2011 Google Inc.  All rights reserved.
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2007 Matt Lilek (pewtermoose@gmail.com).
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
@@ skipping 767 matching lines @@
     document.body.classList.add('inactive');
 };
 
 /**
  * @param {!Event} event
  */
 UI._focusChanged = function(event) {
   var document = event.target && event.target.ownerDocument;
   var element = document ? document.deepActiveElement() : null;
   UI.Widget.focusWidgetForNode(element);
+  if (!UI._keyboardFocus)
+    return;
+  element.setAttribute('data-keyboard-focus', 'true');
+  element.addEventListener('blur', () => element.removeAttribute('data-keyboard-focus'), {once: true, capture: true});
 };
 
 /**
  * @unrestricted
  */
 UI.ElementFocusRestorer = class {
   /**
    * @param {!Element} element
    */
   constructor(element) {
@@ skipping 378 matching lines @@
 };
 
 /**
  * @param {!Document} document
  * @param {!Common.Setting} themeSetting
  */
 UI.initializeUIUtils = function(document, themeSetting) {
   document.defaultView.addEventListener('focus', UI._windowFocused.bind(UI, document), false);
   document.defaultView.addEventListener('blur', UI._windowBlurred.bind(UI, document), false);
   document.addEventListener('focus', UI._focusChanged.bind(UI), true);
+  document.addEventListener('keydown', event => {
+    UI._keyboardFocus = true;
+    document.defaultView.requestAnimationFrame(() => UI._keyboardFocus = false);
+  }, true);
 
   if (!UI.themeSupport)
     UI.themeSupport = new UI.ThemeSupport(themeSetting);
   UI.themeSupport.applyTheme(document);
 
   var body = /** @type {!Element} */ (document.body);
   UI.appendStyle(body, 'ui/inspectorStyle.css');
   UI.GlassPane.setContainer(/** @type {!Element} */ (document.body));
 };
 
@@ skipping 168 matching lines @@
   }
 
   /**
    * @param {string} color
    * @this {Element}
    */
   set borderColor(color) {
     this.checkboxElement.classList.add('dt-checkbox-themed');
     this.checkboxElement.style.borderColor = color;
   }
-
-  /**
-   * @param {boolean} focus
-   * @this {Element}
-   */
-  set visualizeFocus(focus) {
-    this.checkboxElement.classList.toggle('dt-checkbox-visualize-focus', focus);
-  }
 };
 
 (function() {
   UI.registerCustomElement('button', 'text-button', {
     /**
      * @this {Element}
      */
     createdCallback: function() {
       this.type = 'button';
       var root = UI.createShadowRootWithCoreStyles(this, 'ui/textButton.css');
@@ skipping 671 matching lines @@
    */
   constructor(message, okCallback, cancelCallback) {
     super(true);
     this.registerRequiredCSS('ui/confirmDialog.css');
     this.contentElement.createChild('div', 'message').createChild('span').textContent = message;
     var buttonsBar = this.contentElement.createChild('div', 'button');
     buttonsBar.appendChild(UI.createTextButton(Common.UIString('Ok'), okCallback));
     buttonsBar.appendChild(UI.createTextButton(Common.UIString('Cancel'), cancelCallback));
   }
 };