Fix network category filter being reset if text filter is persisted

This fixes a bug where if the user filters the network panel for the
text "foo", and filters by resource type (e.g. to "XHR"), when they
close and re-open DevTools the search text "foo" is persisted and added
back, but as a side-effect the resource type filter is lost.

I discovered this is true for all the additional filters; the moment you
restore a text filter every other setting is lost. To fix this we avoid
calling the `setTextFilterValue` function, which resets everything else,
and instead set the value of the filter input directly, with no other
side-effects.

Fixed: 1155564
Change-Id: I9fa1db634e9e5ec71e84b220c66503a4ab3e4be5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2577574
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Sigurd Schneider <sigurds@chromium.org>

front_end/network/NetworkLogView.js

@@ -212,7 +212,7 @@ export class NetworkLogView extends UI.Widget.VBox {
 
     this._textFilterSetting = Common.Settings.Settings.instance().createSetting('networkTextFilter', '');
     if (this._textFilterSetting.get()) {
-      this.setTextFilterValue(this._textFilterSetting.get());
+      this._textFilterUI.setValue(this._textFilterSetting.get());
     }
   }
 

test/e2e/network/network_test.ts

@@ -4,19 +4,28 @@
 
 import {assert} from 'chai';
 
-import {goTo} from '../../shared/helper.js';
+import {$textContent, goTo, reloadDevTools, typeText, waitFor} from '../../shared/helper.js';
 import {describe, it} from '../../shared/mocha-extensions.js';
 import {getAllRequestNames, getSelectedRequestName, navigateToNetworkTab, selectRequestByName, togglePersistLog, waitForSelectedRequestChange, waitForSomeRequestsToAppear} from '../helpers/network-helpers.js';
 
 const SIMPLE_PAGE_REQUEST_NUMBER = 10;
 const SIMPLE_PAGE_URL = `requests.html?num=${SIMPLE_PAGE_REQUEST_NUMBER}`;
 
-// Tests are flaky
-describe.skip('[crbug.com/1093287]: The Network Tab', async function() {
+async function getCategoryXHRFilter() {
+  const filters = await waitFor('.filter-bitset-filter');
+  const categoryXHRFilter = await $textContent('XHR', filters);
+  if (!categoryXHRFilter) {
+    assert.fail('Could not find category XHR filter to click.');
+  }
+  return categoryXHRFilter;
+}
+
+describe('The Network Tab', async function() {
   // The tests here tend to take time because they wait for requests to appear in the request panel.
   this.timeout(5000);
 
-  it('displays requests', async () => {
+  // Flakey test
+  it.skip('[crbug.com/1093287] displays requests', async () => {
     await navigateToNetworkTab(SIMPLE_PAGE_URL);
 
     // Wait for all the requests to be displayed + 1 to account for the page itself.
@@ -31,7 +40,8 @@ describe.skip('[crbug.com/1093287]: The Network Tab', async function() {
     assert.deepStrictEqual(names, expectedNames, 'The right request names should appear in the list');
   });
 
-  it('can select requests', async () => {
+  // Flakey test
+  it.skip('[crbug.com/1093287] can select requests', async () => {
     await navigateToNetworkTab(SIMPLE_PAGE_URL);
 
     let selected = await getSelectedRequestName();
@@ -51,7 +61,8 @@ describe.skip('[crbug.com/1093287]: The Network Tab', async function() {
     assert.strictEqual(selected, lastRequestName, 'Selecting the last request should work');
   });
 
-  it('can persist requests', async () => {
+  // Flakey test
+  it.skip('[crbug.com/1093287] can persist requests', async () => {
     await navigateToNetworkTab(SIMPLE_PAGE_URL);
 
     // Wait for all the requests to be displayed + 1 to account for the page itself, and get their names.
@@ -67,4 +78,22 @@ describe.skip('[crbug.com/1093287]: The Network Tab', async function() {
 
     assert.deepStrictEqual(secondPageRequestNames, firstPageRequestNames, 'The requests were persisted');
   });
+
+  it('persists filters across a reload', async () => {
+    await navigateToNetworkTab(SIMPLE_PAGE_URL);
+    let filterInput = await waitFor('.filter-input-field.text-prompt');
+    filterInput.focus();
+    await typeText('foo');
+    let categoryXHRFilter = await getCategoryXHRFilter();
+    await categoryXHRFilter.click();
+
+    await reloadDevTools({selectedPanel: {name: 'network'}});
+    filterInput = await waitFor('.filter-input-field.text-prompt');
+    const filterText = await filterInput.evaluate(x => (x as HTMLElement).innerText);
+    assert.strictEqual(filterText, 'foo');
+
+    categoryXHRFilter = await getCategoryXHRFilter();
+    const xhrHasSelectedClass = await categoryXHRFilter.evaluate(x => x.classList.contains('selected'));
+    assert.isTrue(xhrHasSelectedClass);
+  });
 });