DevTools: persist console text filter and sidebar state

Console will remember
- User text typed in the input filter
- Whether the sidebar was open, consistent with Sources and the drawer
- Which top level sidebar filter was selected

Bug: 787620, 734088
Change-Id: Iab109fbf1f459b0c64974c7414dcf3fd24739f11
Reviewed-on: https://chromium-review.googlesource.com/810090
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#523247}

third_party/WebKit/LayoutTests/http/tests/devtools/console-sidebar/console-filter-sidebar-expected.txt

@@ -47,7 +47,7 @@ Selecting item: 1 error
 MESSAGES:
 console-filter-sidebar.js:19 Error from test
 error1 @ console-filter-sidebar.js:19
-(anonymous) @ console-filter-sidebar.js:54
+(anonymous) @ console-filter-sidebar.js:55
 
 SIDEBAR:
 > 4 messages
@@ -71,7 +71,7 @@ MESSAGES:
 log-source.js:3 Log from log-source
 log-source.js:8 Warning from log-source
 warn2 @ log-source.js:8
-(anonymous) @ console-filter-sidebar.js:50
+(anonymous) @ console-filter-sidebar.js:51
 
 Running: clearConsole
 SIDEBAR:

third_party/WebKit/LayoutTests/http/tests/devtools/console-sidebar/console-filter-sidebar.js

@@ -24,7 +24,8 @@
   var sidebar = consoleView._sidebar;
   var messages = Console.ConsoleView.instance()._visibleViewMessages;
   consoleView._setImmediatelyFilterMessagesForTest();
-  consoleView._splitWidget._showHideSidebarButton.element.click();
+  if (!consoleView._isSidebarOpen)
+    consoleView._splitWidget._showHideSidebarButton.element.click();
 
   function dumpSidebar() {
     var treeElement = sidebar._tree.firstChild();

third_party/WebKit/LayoutTests/http/tests/devtools/console/console-filter-level-test.js

@@ -21,7 +21,10 @@
     console.warn("abc warn");
     console.warn("def warn");
   `);
-  Console.ConsoleView.instance()._setImmediatelyFilterMessagesForTest();
+  var consoleView = Console.ConsoleView.instance();
+  consoleView._setImmediatelyFilterMessagesForTest();
+  if (consoleView._isSidebarOpen)
+    consoleView._splitWidget._showHideSidebarButton.element.click();
 
   function dumpVisibleMessages() {
     var menuText = Console.ConsoleView.instance()._filter._levelMenuButton._text;

third_party/WebKit/LayoutTests/http/tests/devtools/console/console-filter-test.js

@@ -45,7 +45,10 @@
 
     console.log("end");
   `);
-  Console.ConsoleView.instance()._setImmediatelyFilterMessagesForTest();
+  var consoleView = Console.ConsoleView.instance();
+  consoleView._setImmediatelyFilterMessagesForTest();
+  if (consoleView._isSidebarOpen)
+    consoleView._splitWidget._showHideSidebarButton.element.click();
 
   // Add Violation-source message.
   var violationMessage = new ConsoleModel.ConsoleMessage(

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

@@ -19,6 +19,7 @@ Console.ConsoleSidebar = class extends UI.VBox {
     this._selectedTreeElement = null;
     /** @type {!Array<!Console.ConsoleSidebar.FilterTreeElement>} */
     this._treeElements = [];
+    var selectedFilterSetting = Common.settings.createSetting('console.sidebarSelectedFilter', null);
 
     var Levels = ConsoleModel.ConsoleMessage.MessageLevel;
     var consoleAPIParsedFilters = [{
@@ -28,23 +29,27 @@ Console.ConsoleSidebar = class extends UI.VBox {
     }];
     this._appendGroup(
         Console.ConsoleSidebar._groupSingularName.All, [], Console.ConsoleFilter.allLevelsFilterValue(),
-        UI.Icon.create('mediumicon-list'), badgePool);
+        UI.Icon.create('mediumicon-list'), badgePool, selectedFilterSetting);
     this._appendGroup(
         Console.ConsoleSidebar._groupSingularName.ConsoleAPI, consoleAPIParsedFilters,
-        Console.ConsoleFilter.allLevelsFilterValue(), UI.Icon.create('mediumicon-account-circle'), badgePool);
+        Console.ConsoleFilter.allLevelsFilterValue(), UI.Icon.create('mediumicon-account-circle'), badgePool,
+        selectedFilterSetting);
     this._appendGroup(
         Console.ConsoleSidebar._groupSingularName.Error, [], Console.ConsoleFilter.singleLevelMask(Levels.Error),
-        UI.Icon.create('mediumicon-error-circle'), badgePool);
+        UI.Icon.create('mediumicon-error-circle'), badgePool, selectedFilterSetting);
     this._appendGroup(
         Console.ConsoleSidebar._groupSingularName.Warning, [], Console.ConsoleFilter.singleLevelMask(Levels.Warning),
-        UI.Icon.create('mediumicon-warning-triangle'), badgePool);
+        UI.Icon.create('mediumicon-warning-triangle'), badgePool, selectedFilterSetting);
     this._appendGroup(
         Console.ConsoleSidebar._groupSingularName.Info, [], Console.ConsoleFilter.singleLevelMask(Levels.Info),
-        UI.Icon.create('mediumicon-info-circle'), badgePool);
+        UI.Icon.create('mediumicon-info-circle'), badgePool, selectedFilterSetting);
     this._appendGroup(
         Console.ConsoleSidebar._groupSingularName.Verbose, [], Console.ConsoleFilter.singleLevelMask(Levels.Verbose),
-        UI.Icon.create('mediumicon-bug'), badgePool);
-    this._treeElements[0].select();
+        UI.Icon.create('mediumicon-bug'), badgePool, selectedFilterSetting);
+    var selectedTreeElementName = selectedFilterSetting.get();
+    var defaultTreeElement =
+        this._treeElements.find(x => x.name() === selectedTreeElementName) || this._treeElements[0];
+    defaultTreeElement.select();
   }
 
   /**
@@ -53,10 +58,11 @@ Console.ConsoleSidebar = class extends UI.VBox {
    * @param {!Object<string, boolean>} levelsMask
    * @param {!Element} icon
    * @param {!ProductRegistry.BadgePool} badgePool
+   * @param {!Common.Setting} selectedFilterSetting
    */
-  _appendGroup(name, parsedFilters, levelsMask, icon, badgePool) {
+  _appendGroup(name, parsedFilters, levelsMask, icon, badgePool, selectedFilterSetting) {
     var filter = new Console.ConsoleFilter(name, parsedFilters, null, levelsMask);
-    var treeElement = new Console.ConsoleSidebar.FilterTreeElement(filter, icon, badgePool);
+    var treeElement = new Console.ConsoleSidebar.FilterTreeElement(filter, icon, badgePool, selectedFilterSetting);
     this._tree.appendChild(treeElement);
     this._treeElements.push(treeElement);
   }
@@ -129,11 +135,13 @@ Console.ConsoleSidebar.FilterTreeElement = class extends UI.TreeElement {
    * @param {!Console.ConsoleFilter} filter
    * @param {!Element} icon
    * @param {!ProductRegistry.BadgePool} badgePool
+   * @param {!Common.Setting} selectedFilterSetting
    */
-  constructor(filter, icon, badgePool) {
+  constructor(filter, icon, badgePool, selectedFilterSetting) {
     super(filter.name, true /* expandable */);
     this._filter = filter;
     this._badgePool = badgePool;
+    this._selectedFilterSetting = selectedFilterSetting;
     /** @type {!Map<?string, !Console.ConsoleSidebar.URLGroupTreeElement>} */
     this._urlTreeElements = new Map();
     this.setLeadingIcons([icon]);
@@ -148,6 +156,23 @@ Console.ConsoleSidebar.FilterTreeElement = class extends UI.TreeElement {
     this._updateCounter();
   }
 
+  /**
+   * @return {string}
+   */
+  name() {
+    return this._filter.name;
+  }
+
+  /**
+   * @param {boolean=} selectedByUser
+   * @return {boolean}
+   * @override
+   */
+  onselect(selectedByUser) {
+    this._selectedFilterSetting.set(this._filter.name);
+    return super.onselect(selectedByUser);
+  }
+
   _updateCounter() {
     var prefix = this._messageCount ? this._messageCount : Common.UIString('No');
     var pluralizedName = this._messageCount === 1 ? this._filter.name :

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

@@ -44,6 +44,7 @@ Console.ConsoleView = class extends UI.VBox {
     this._sidebar = new Console.ConsoleSidebar(this._badgePool);
     this._sidebar.addEventListener(Console.ConsoleSidebar.Events.FilterSelected, this._onFilterChanged.bind(this));
     this._isSidebarOpen = false;
+    this._filter = new Console.ConsoleViewFilter(this._onFilterChanged.bind(this));
 
     var toolbar = new UI.Toolbar('', this.element);
     var isLogManagementEnabled = Runtime.experiments.isEnabled('logManagement');
@@ -52,8 +53,11 @@ Console.ConsoleView = class extends UI.VBox {
           new UI.SplitWidget(true /* isVertical */, false /* secondIsSidebar */, 'console.sidebar.width', 100);
       this._splitWidget.setMainWidget(this._searchableView);
       this._splitWidget.setSidebarWidget(this._sidebar);
-      this._splitWidget.hideSidebar();
       this._splitWidget.show(this.element);
+      this._splitWidget.enableShowModeSaving();
+      this._isSidebarOpen = this._splitWidget.showMode() === UI.SplitWidget.ShowMode.Both;
+      if (this._isSidebarOpen)
+        this._filter._levelMenuButton.setEnabled(false);
       toolbar.appendToolbarItem(this._splitWidget.createShowHideSidebarButton('console sidebar'));
       this._splitWidget.addEventListener(UI.SplitWidget.Events.ShowModeChanged, event => {
         this._isSidebarOpen = event.data === UI.SplitWidget.ShowMode.Both;
@@ -82,7 +86,6 @@ Console.ConsoleView = class extends UI.VBox {
      * @type {!Array.<!Console.ConsoleView.RegexMatchRange>}
      */
     this._regexMatchRanges = [];
-    this._filter = new Console.ConsoleViewFilter(this._onFilterChanged.bind(this));
 
     this._consoleContextSelector = new Console.ConsoleContextSelector();
 
@@ -1191,7 +1194,13 @@ Console.ConsoleViewFilter = class {
     this._textFilterUI = new UI.ToolbarInput(
         Common.UIString('Filter'), 0.2, 1, Common.UIString('e.g. /event\\d/ -cdn url:a.com'),
         this._suggestionBuilder.completions.bind(this._suggestionBuilder));
-    this._textFilterUI.addEventListener(UI.ToolbarInput.Event.TextChanged, this._onFilterChanged, this);
+    this._textFilterSetting = Common.settings.createSetting('console.textFilter', '');
+    if (this._textFilterSetting.get())
+      this._textFilterUI.setValue(this._textFilterSetting.get());
+    this._textFilterUI.addEventListener(UI.ToolbarInput.Event.TextChanged, () => {
+      this._textFilterSetting.set(this._textFilterUI.value());
+      this._onFilterChanged();
+    });
     this._filterParser = new TextUtils.FilterParser(filterKeys);
     this._currentFilter = new Console.ConsoleFilter('', [], null, this._messageLevelFiltersSetting.get());
     this._updateCurrentFilter();