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 377 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('keydown', event => {
+    UI._keyboardFocus = true;
+    document.defaultView.requestAnimationFrame(() => UI._keyboardFocus = false);
+  }, true);
   document.addEventListener('focus', UI._focusChanged.bind(UI), 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 211 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);
-    },
-
     __proto__: HTMLLabelElement.prototype
   });
 
   UI.registerCustomElement('label', 'dt-icon-label', {
     /**
      * @this {Element}
      */
     createdCallback: function() {
       var root = UI.createShadowRootWithCoreStyles(this);
       this._iconElement = UI.Icon.create();
@@ skipping 630 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));
   }
 };