DevTools: Focus background in Toolbars

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

 /*
  * Copyright (C) 2009 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 817 matching lines @@
  */
 UI.ToolbarComboBox = class extends UI.ToolbarItem {
   /**
    * @param {?function(!Event)} changeHandler
    * @param {string=} className
    */
   constructor(changeHandler, className) {
     super(createElementWithClass('span', 'toolbar-select-container'));
 
     this._selectElement = this.element.createChild('select', 'toolbar-item');
+    this._selectElement.addEventListener('focus', () => this.element.classList.add('focused'));

[pfeldman, 2017/03/27 21:17:35]

why not :focused pseudo?

[einbinder, 2017/03/27 23:12:59]

this._selectElement has focus, but this.element needs the class.

+    this._selectElement.addEventListener('blur', () => this.element.classList.remove('focused'));
     var dropdownArrowIcon = UI.Icon.create('smallicon-dropdown-arrow', 'toolbar-dropdown-arrow');
     this.element.appendChild(dropdownArrowIcon);
     if (changeHandler)
       this._selectElement.addEventListener('change', changeHandler, false);
     if (className)
       this._selectElement.classList.add(className);
   }
 
   /**
    * @return {!HTMLSelectElement}
@@ skipping 206 matching lines @@
   /**
    * @param {!Common.Setting} setting
    * @param {string=} tooltip
    * @param {string=} alternateTitle
    */
   constructor(setting, tooltip, alternateTitle) {
     super(alternateTitle || setting.title() || '', tooltip);
     UI.SettingsUI.bindCheckbox(this.inputElement, setting);
   }
 };