DevTools: render console filter in the main console toolbar.

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

Index: third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js b/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
index 8e6f552001bba2f712cf2fb3412318eddf459255..53a1b35ef43ad52d0e6fd47b6ad8fb5d7af4c2b7 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
@@ -553,12 +553,15 @@ UI.ToolbarInput = class extends UI.ToolbarItem {
   /**
    * @param {string=} placeholder
    * @param {number=} growFactor
+   * @param {number=} shrinkFactor
    */
-  constructor(placeholder, growFactor) {
+  constructor(placeholder, growFactor, shrinkFactor) {
     super(createElementWithClass('input', 'toolbar-item'));
     this.element.addEventListener('input', this._onChangeCallback.bind(this), false);
     if (growFactor)
       this.element.style.flexGrow = growFactor;
+    if (shrinkFactor)
+      this.element.style.flexShrink = shrinkFactor;
     if (placeholder)
       this.element.setAttribute('placeholder', placeholder);
     this._value = '';
@@ -895,6 +898,76 @@ UI.ToolbarComboBox = class extends UI.ToolbarItem {
 /**
  * @unrestricted
  */
+UI.ToolbarSettingComboBox = class extends UI.ToolbarComboBox {
+  /**
+   * @param {!Array.<!{value: string, label: string, title: string, default:(boolean|undefined)}>} options
+   * @param {!Common.Setting} setting
+   * @param {string=} optGroup
+   */
+  constructor(options, setting, optGroup) {
+    super(null);
+    this._setting = setting;
+    this._options = options;
+    this._selectElement.addEventListener('change', this._filterChanged.bind(this), false);
+    var optGroupElement = optGroup ? this._selectElement.createChild('optgroup') : null;
+    if (optGroupElement)
+      optGroupElement.label = optGroup;
+    for (var i = 0; i < options.length; ++i) {
+      var filterOption = options[i];

[dgozman, 2017/01/31 04:21:30]

It's not a filter anymore.

[pfeldman, 2017/01/31 19:54:44]

Done.

+      var option = this.createOption(filterOption.label, filterOption.title, filterOption.value);
+      if (optGroupElement)
+        optGroupElement.appendChild(option);
+      else
+        this._selectElement.appendChild(option);

[dgozman, 2017/01/31 04:21:30]

You can assign this._selectElement to optGroupElement before for-loop to
simplify this.

[pfeldman, 2017/01/31 19:54:44]

I fixed it, but I did not reassign anything.

+      if (setting.get() === filterOption.value)
+        this.setSelectedIndex(i);
+    }
+
+    setting.addChangeListener(this._settingChanged, this);
+  }
+
+  /**
+   * @return {boolean}
+   */
+  isActive() {

[dgozman, 2017/01/31 04:21:30]

isNonDefault

[pfeldman, 2017/01/31 19:54:44]

Done in a way.

+    var option = this._options[this.selectedIndex()];
+    return !option || !option.default;
+  }
+
+  /**
+   * @return {string}
+   */
+  value() {
+    return this._options[this.selectedIndex()].value;
+  }
+
+  _settingChanged() {
+    if (this._muteSettingListener)
+      return;
+
+    var value = this._setting.get();
+    for (var i = 0; i < this._options.length; ++i) {
+      if (value === this._options[i].value) {
+        this.setSelectedIndex(i);
+        break;
+      }
+    }
+  }
+
+  /**
+   * @param {!Event} event
+   */
+  _filterChanged(event) {

[dgozman, 2017/01/31 04:21:29]

_valueChanged

[pfeldman, 2017/01/31 19:54:45]

Done.

+    var option = this._options[this.selectedIndex()];
+    this._muteSettingListener = true;
+    this._setting.set(option.value);
+    this._muteSettingListener = false;
+  }
+};
+
+/**
+ * @unrestricted
+ */
 UI.ToolbarCheckbox = class extends UI.ToolbarItem {
   /**
    * @param {string} text