Rerender RequestHeadersView when headers have changed
Bug: 1346234
Change-Id: Ifbb287059c2ad7ee03b93595a4f44d38b82f76d8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3790844
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Wolfgang Beyer <[email protected]>
diff --git a/front_end/panels/network/components/RequestHeadersView.ts b/front_end/panels/network/components/RequestHeadersView.ts
index d522d6d..4c56604 100644
--- a/front_end/panels/network/components/RequestHeadersView.ts
+++ b/front_end/panels/network/components/RequestHeadersView.ts
@@ -173,12 +173,16 @@
wasShown(): void {
this.#request.addEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged, this.#refreshHeadersView, this);
this.#request.addEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.#refreshHeadersView, this);
+ this.#request.addEventListener(SDK.NetworkRequest.Events.RequestHeadersChanged, this.#refreshHeadersView, this);
+ this.#request.addEventListener(SDK.NetworkRequest.Events.ResponseHeadersChanged, this.#refreshHeadersView, this);
this.#refreshHeadersView();
}
willHide(): void {
this.#request.removeEventListener(SDK.NetworkRequest.Events.RemoteAddressChanged, this.#refreshHeadersView, this);
this.#request.removeEventListener(SDK.NetworkRequest.Events.FinishedLoading, this.#refreshHeadersView, this);
+ this.#request.removeEventListener(SDK.NetworkRequest.Events.RequestHeadersChanged, this.#refreshHeadersView, this);
+ this.#request.removeEventListener(SDK.NetworkRequest.Events.ResponseHeadersChanged, this.#refreshHeadersView, this);
}
#refreshHeadersView(): void {
diff --git a/test/unittests/front_end/panels/network/components/RequestHeadersView_test.ts b/test/unittests/front_end/panels/network/components/RequestHeadersView_test.ts
index c098207..d5dc4dd 100644
--- a/test/unittests/front_end/panels/network/components/RequestHeadersView_test.ts
+++ b/test/unittests/front_end/panels/network/components/RequestHeadersView_test.ts
@@ -21,6 +21,8 @@
} from '../../../helpers/DOMHelpers.js';
import {describeWithEnvironment} from '../../../helpers/EnvironmentHelpers.js';
+import type * as Platform from '../../../../../../front_end/core/platform/platform.js';
+
const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
const {assert} = chai;
@@ -297,6 +299,38 @@
'set a cookie via a Set-Cookie header was blocked because it was not sent over a ' +
'secure connection and would have overwritten a cookie with the Secure attribute.');
});
+
+ it('re-renders on request headers update', async () => {
+ const request = SDK.NetworkRequest.NetworkRequest.create(
+ 'requestId' as Protocol.Network.RequestId,
+ 'https://www.example.com/foo.html' as Platform.DevToolsPath.UrlString, '' as Platform.DevToolsPath.UrlString,
+ null, null, null);
+ request.responseHeaders = [{name: 'originalName', value: 'originalValue'}];
+
+ const view = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
+ const div = document.createElement('div');
+ renderElementIntoDOM(div);
+ view.markAsRoot();
+ view.show(div);
+
+ const component = view.element.querySelector('devtools-request-headers');
+ assertElement(component, NetworkComponents.RequestHeadersView.RequestHeadersComponent);
+ assertShadowRoot(component.shadowRoot);
+ const responseHeadersCategory = component.shadowRoot.querySelector('[aria-label="Response Headers"]');
+ assertElement(responseHeadersCategory, HTMLElement);
+
+ const spy = sinon.spy(component, 'data', ['set']);
+ assert.isTrue(spy.set.notCalled);
+ assert.deepEqual(getCleanTextContentFromElements(responseHeadersCategory, '.header-name'), ['originalName:']);
+ assert.deepEqual(getCleanTextContentFromElements(responseHeadersCategory, '.header-value'), ['originalValue']);
+
+ request.responseHeaders = [{name: 'updatedName', value: 'updatedValue'}];
+ assert.isTrue(spy.set.calledOnce);
+ assert.deepEqual(getCleanTextContentFromElements(responseHeadersCategory, '.header-name'), ['updatedName:']);
+ assert.deepEqual(getCleanTextContentFromElements(responseHeadersCategory, '.header-value'), ['updatedValue']);
+
+ view.detach();
+ });
});
describeWithEnvironment('RequestHeadersView\'s Category', () => {
