DevTools: render console filter in the main console toolbar.

third_party/WebKit/Source/devtools/front_end/console/ConsoleView.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * 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:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 36 matching lines @@
     this._contentsElement.classList.add('console-view');
     /** @type {!Array.<!Console.ConsoleViewMessage>} */
     this._visibleViewMessages = [];
     this._urlToMessageCount = {};
     this._hiddenByFilterCount = 0;
 
     /**
      * @type {!Array.<!Console.ConsoleView.RegexMatchRange>}
      */
     this._regexMatchRanges = [];
+    this._filter = new Console.ConsoleViewFilter(this._updateMessageList.bind(this));
 
     this._executionContextComboBox = new UI.ToolbarComboBox(null, 'console-context');
-    this._executionContextComboBox.setMaxWidth(200);
+    this._executionContextComboBox.setMaxWidth(80);
     this._consoleContextSelector = new Console.ConsoleContextSelector(this._executionContextComboBox.selectElement());
 
-    this._showAllMessagesCheckbox = new UI.ToolbarCheckbox(Common.UIString('Show all messages'));
-    this._filter = new Console.ConsoleViewFilter(this._showAllMessagesCheckbox, this._updateMessageList.bind(this));
+    this._showSettingsPaneSetting = Common.settings.createSetting('consoleShowSettingsToolbar', false);
+    this._showSettingsPaneButton = new UI.ToolbarSettingToggle(
+        this._showSettingsPaneSetting, 'largeicon-settings-gear', Common.UIString('Console settings'));
 
-    this._filterBar = new UI.FilterBar('consoleView');
-
-    this._preserveLogCheckbox = new UI.ToolbarCheckbox(
-        Common.UIString('Preserve log'), Common.UIString('Do not clear log on page reload / navigation'),
-        Common.moduleSetting('preserveConsoleLog'));
     this._progressToolbarItem = new UI.ToolbarItem(createElement('div'));
 
     var toolbar = new UI.Toolbar('', this._contentsElement);
     toolbar.appendToolbarItem(UI.Toolbar.createActionButton(
         /** @type {!UI.Action }*/ (UI.actionRegistry.action('console.clear'))));
-    toolbar.appendToolbarItem(this._filterBar.filterButton());
+    toolbar.appendSeparator();
     toolbar.appendToolbarItem(this._executionContextComboBox);
-    toolbar.appendToolbarItem(this._preserveLogCheckbox);
+    toolbar.appendSeparator();
+    toolbar.appendToolbarItem(this._filter._textFilterUI);
+    toolbar.appendToolbarItem(this._filter._levelComboBox);
     toolbar.appendToolbarItem(this._progressToolbarItem);
+    toolbar.appendSpacer();
+    toolbar.appendText('');

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

Why this?

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

To render split.

+    toolbar.appendSeparator();
+    toolbar.appendToolbarItem(this._showSettingsPaneButton);
 
-    this._filterBar.show(this._contentsElement);
-    this._filter.addFilters(this._filterBar);
+    this._preserveLogCheckbox = new UI.ToolbarCheckbox(
+        Common.UIString('Preserve log'), Common.UIString('Do not clear log on page reload / navigation'),
+        Common.moduleSetting('preserveConsoleLog'));
+    this._hideNetworkMessagesCheckbox = new UI.ToolbarCheckbox(
+        Common.UIString('Hide network'), Common.UIString('Hide network messages'),
+        this._filter._hideNetworkMessagesSetting);
+
+    var settingsToolbar = new UI.Toolbar('', this._contentsElement);
+    settingsToolbar.appendToolbarItem(this._hideNetworkMessagesCheckbox);
+    settingsToolbar.appendToolbarItem(this._preserveLogCheckbox);
+    // settingsToolbar.appendToolbarItem(this._filter._showTargetMessagesCheckbox);

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

- Commented code?
- Is it never here? How does the test pass then?

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

This is removing item from toolbar, so the test passes. I'll restore it.

+    if (!this._showSettingsPaneSetting.get())
+      settingsToolbar.element.classList.add('hidden');
+    this._showSettingsPaneSetting.addChangeListener(
+        () => settingsToolbar.element.classList.toggle('hidden', !this._showSettingsPaneSetting.get()));
 
     this._viewport = new Console.ConsoleViewport(this);
     this._viewport.setStickToBottom(true);
     this._viewport.contentElement().classList.add('console-group', 'console-group-messages');
     this._contentsElement.appendChild(this._viewport.element);
     this._messagesElement = this._viewport.element;
     this._messagesElement.id = 'console-messages';
     this._messagesElement.classList.add('monospace');
     this._messagesElement.addEventListener('click', this._messagesClicked.bind(this), true);
 
     this._viewportThrottler = new Common.Throttler(50);
 
     this._filterStatusMessageElement = createElementWithClass('div', 'console-message');
     this._messagesElement.insertBefore(this._filterStatusMessageElement, this._messagesElement.firstChild);
     this._filterStatusTextElement = this._filterStatusMessageElement.createChild('span', 'console-info');
     this._filterStatusMessageElement.createTextChild(' ');
-    this._resetFiltersLink = createElementWithClass('span', 'link');
-    this._resetFiltersLink.textContent = Common.UIString('filters');
-    this._resetFiltersLink.addEventListener('click', () => this._filterBar.showOnce(), true);
 
     this._topGroup = Console.ConsoleGroup.createTopGroup();
     this._currentGroup = this._topGroup;
 
     this._promptElement = this._messagesElement.createChild('div', 'source-code');
     var promptIcon = UI.Icon.create('smallicon-text-prompt', 'console-prompt-icon');
     this._promptElement.appendChild(promptIcon);
     this._promptElement.id = 'console-prompt';
     this._promptElement.addEventListener('input', this._promptInput.bind(this), false);
 
     // FIXME: This is a workaround for the selection machinery bug. See crbug.com/410899
     var selectAllFixer = this._messagesElement.createChild('div', 'console-view-fix-select-all');
     selectAllFixer.textContent = '.';
 
-    this._showAllMessagesCheckbox.inputElement.checked = true;
-    this._showAllMessagesCheckbox.inputElement.addEventListener('change', this._updateMessageList.bind(this), false);
-
-    this._showAllMessagesCheckbox.element.classList.add('hidden');
-
-    toolbar.appendToolbarItem(this._showAllMessagesCheckbox);
-
     this._registerShortcuts();
 
     this._messagesElement.addEventListener('contextmenu', this._handleContextMenuEvent.bind(this), false);
     Common.moduleSetting('monitoringXHREnabled').addChangeListener(this._monitoringXHREnabledSettingChanged, this);
 
     this._linkifier = new Components.Linkifier();
 
     /** @type {!Array.<!Console.ConsoleViewMessage>} */
     this._consoleMessages = [];
     this._viewMessageSymbol = Symbol('viewMessage');
@@ skipping 130 matching lines @@
   minimumRowHeight() {
     return 16;
   }
 
   /**
    * @override
    * @param {!SDK.Target} target
    */
   targetAdded(target) {
     this._viewport.invalidate();
-    this._updateAllMessagesCheckbox();
   }
 
   /**
    * @override
    * @param {!SDK.Target} target
    */
   targetRemoved(target) {
-    this._updateAllMessagesCheckbox();
-  }
-
-  _updateAllMessagesCheckbox() {
-    var hasMultipleCotexts = SDK.targetManager.targets(SDK.Target.Capability.JS).length > 1;
-    this._showAllMessagesCheckbox.element.classList.toggle('hidden', !hasMultipleCotexts);
   }
 
   _registerWithMessageSink() {
     Common.console.messages().forEach(this._addSinkMessage, this);
     Common.console.addEventListener(Common.Console.Events.MessageAdded, messageAdded, this);
 
     /**
      * @param {!Common.Event} event
      * @this {Console.ConsoleView}
      */
@@ skipping 31 matching lines @@
   _consoleTimestampsSettingChanged(event) {
     var enabled = /** @type {boolean} */ (event.data);
     this._updateMessageList();
     this._consoleMessages.forEach(function(viewMessage) {
       viewMessage.updateTimestamp(enabled);
     });
   }
 
   _executionContextChanged() {
     this._prompt.clearAutocomplete();
-    if (!this._showAllMessagesCheckbox.checked())
+    if (this._filter._showTargetMessagesCheckbox.checked())
       this._updateMessageList();
   }
 
   /**
    * @override
    */
   willHide() {
     this._hidePromptSuggestBox();
   }
 
@@ skipping 78 matching lines @@
   }
 
   _immediatelyScrollToBottom() {
     // This will scroll viewport and trigger its refresh.
     this._viewport.setStickToBottom(true);
     this._promptElement.scrollIntoView(true);
   }
 
   _updateFilterStatus() {
     this._filterStatusTextElement.removeChildren();
-    this._filterStatusTextElement.appendChild(UI.formatLocalized(
-        this._hiddenByFilterCount === 1 ? '1 message is hidden by %s.' :
-                                          this._hiddenByFilterCount + ' messages are hidden by %s.',
-        [this._resetFiltersLink]));
+    this._filterStatusTextElement.createTextChild(Common.UIString(
+        this._hiddenByFilterCount === 1 ? '1 message is hidden by filters.' :
+                                          this._hiddenByFilterCount + ' messages are hidden by filters.'));

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

Use %d now?

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

It is still conditional, right?

     this._filterStatusMessageElement.style.display = this._hiddenByFilterCount ? '' : 'none';
   }
 
   /**
    * @param {!Common.Event} event
    */
   _onConsoleMessageAdded(event) {
     var message = /** @type {!SDK.ConsoleMessage} */ (event.data);
     this._addConsoleMessage(message);
   }
@@ skipping 584 matching lines @@
     if (this.itemCount() !== 0 && this._viewport.firstVisibleIndex() !== this.itemCount())
       this._immediatelyScrollToBottom();
   }
 };
 
 Console.ConsoleView.persistedHistorySize = 300;
 
 /**
  * @unrestricted
  */
-Console.ConsoleViewFilter = class extends Common.Object {
+Console.ConsoleViewFilter = class {
   /**
-   * @param {!UI.ToolbarCheckbox} showAllMessagesCheckbox
    * @param {function()} filterChangedCallback
    */
-  constructor(showAllMessagesCheckbox, filterChangedCallback) {
-    super();
-    this._showAllMessagesCheckbox = showAllMessagesCheckbox;
+  constructor(filterChangedCallback) {
+    this._showTargetMessagesCheckbox =
+        new UI.ToolbarCheckbox(Common.UIString('Selected target only'), undefined, undefined, filterChangedCallback);

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

Didn't we agree with Paul to use 'frame' or 'context' here instead of 'target'?

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

No, I don't think 'frame' is good. You always have extensions, often have
'workers', so frame is no good.

     this._filterChanged = filterChangedCallback;
 
     this._messageURLFiltersSetting = Common.settings.createSetting('messageURLFilters', {});
     this._messageLevelFiltersSetting =
         Common.settings.createSetting('messageLevelFilters2', SDK.ConsoleMessage.MessageLevel.Info);
     this._hideNetworkMessagesSetting = Common.moduleSetting('hideNetworkMessages');
 
     this._messageURLFiltersSetting.addChangeListener(this._filterChanged);
     this._messageLevelFiltersSetting.addChangeListener(this._filterChanged);
     this._hideNetworkMessagesSetting.addChangeListener(this._filterChanged);
-  }
 
-  addFilters(filterBar) {
-    this._textFilterUI = new UI.TextFilterUI(true);
-    this._textFilterUI.addEventListener(UI.FilterUI.Events.FilterChanged, this._textFilterChanged, this);
-    filterBar.addFilter(this._textFilterUI);
-
-    this._hideNetworkMessagesCheckbox =
-        new UI.CheckboxFilterUI('', Common.UIString('Hide network'), true, this._hideNetworkMessagesSetting);
+    this._textFilterUI = new UI.ToolbarInput(Common.UIString('Filter'), 0.2, 1);
+    this._textFilterUI.addEventListener(UI.ToolbarInput.Event.TextChanged, this._textFilterChanged, this);
 
     var levels = [
       {value: SDK.ConsoleMessage.MessageLevel.Verbose, label: Common.UIString('Verbose')},
       {value: SDK.ConsoleMessage.MessageLevel.Info, label: Common.UIString('Info'), default: true},
       {value: SDK.ConsoleMessage.MessageLevel.Warning, label: Common.UIString('Warnings')},
       {value: SDK.ConsoleMessage.MessageLevel.Error, label: Common.UIString('Errors')}
     ];
 
-    var levelFilter = new UI.ComboBoxFilterUI(levels, Common.UIString('Level: '), this._messageLevelFiltersSetting);
-    filterBar.addFilter(levelFilter);
-    filterBar.addFilter(this._hideNetworkMessagesCheckbox);
+    this._levelComboBox =
+        new UI.ToolbarSettingComboBox(levels, this._messageLevelFiltersSetting, Common.UIString('Level'));
   }
 
-  _textFilterChanged(event) {
-    this._filterRegex = this._textFilterUI.regex();
+  _textFilterChanged() {
+    this._filterText = this._textFilterUI.value();
+    this._filterRegex = null;
+    if (this._filterText.startsWith('/') && this._filterText.endsWith('/')) {
+      try {
+        this._filterRegex = new RegExp(this._filterText.substring(1, this._filterText.length - 1), 'i');
+      } catch (e) {
+      }
+    }
     this._filterChanged();
   }
 
   /**
    * @param {string} url
    */
   addMessageURLFilter(url) {
     var value = this._messageURLFiltersSetting.get();
     value[url] = true;
     this._messageURLFiltersSetting.set(value);
@@ skipping 23 matching lines @@
   /**
    * @param {!Console.ConsoleViewMessage} viewMessage
    * @return {boolean}
    */
   shouldBeVisible(viewMessage) {
     var message = viewMessage.consoleMessage();
     var executionContext = UI.context.flavor(SDK.ExecutionContext);
     if (!message.target())
       return true;
 
-    if (!this._showAllMessagesCheckbox.checked() && executionContext) {
+    if (this._showTargetMessagesCheckbox.checked() && executionContext) {
       if (message.target() !== executionContext.target())
         return false;
       if (message.executionContextId && message.executionContextId !== executionContext.id)
         return false;
     }
 
-    if (Common.moduleSetting('hideNetworkMessages').get() &&
+    if (this._hideNetworkMessagesSetting.get() &&
         viewMessage.consoleMessage().source === SDK.ConsoleMessage.MessageSource.Network)
       return false;
 
     if (viewMessage.consoleMessage().isGroupMessage())
       return true;
 
     if (message.type === SDK.ConsoleMessage.MessageType.Result ||
         message.type === SDK.ConsoleMessage.MessageType.Command)
       return true;
 
     if (message.url && this._messageURLFiltersSetting.get()[message.url])
       return false;
 
     var filterOrdinal = SDK.ConsoleMessage.MessageLevel.ordinal(
         /** @type {!SDK.ConsoleMessage.MessageLevel} */ (this._messageLevelFiltersSetting.get()));
     if (message.level && SDK.ConsoleMessage.MessageLevel.ordinal(message.level) < filterOrdinal)
       return false;
 
     if (this._filterRegex) {
-      this._filterRegex.lastIndex = 0;

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

Why removed?

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

It is done in matchesFilterRegex call below as well.

       if (!viewMessage.matchesFilterRegex(this._filterRegex))
         return false;
+    } else if (this._filterText) {
+      if (!viewMessage.matchesFilterText(this._filterText))
+        return false;
     }
 
     return true;
   }
 
   reset() {
     this._messageURLFiltersSetting.set({});
     this._messageLevelFiltersSetting.set(SDK.ConsoleMessage.MessageLevel.Info);
-    this._showAllMessagesCheckbox.inputElement.checked = true;
-    Common.moduleSetting('hideNetworkMessages').set(false);
+    this._showTargetMessagesCheckbox.inputElement.checked = false;
+    this._hideNetworkMessagesSetting.set(false);
     this._textFilterUI.setValue('');
-    this._filterChanged();
+    this._textFilterChanged();
   }
 };
 
 /**
  * @unrestricted
  */
 Console.ConsoleCommand = class extends Console.ConsoleViewMessage {
   /**
    * @param {!SDK.ConsoleMessage} message
    * @param {!Components.Linkifier} linkifier
@@ skipping 141 matching lines @@
         return true;
     }
     return false;
   }
 };
 
 /**
  * @typedef {{messageIndex: number, matchIndex: number}}
  */
 Console.ConsoleView.RegexMatchRange;