Update Network list to use x-fb-friendly-name header (#221)

Author: huntie

front_end/panels/network/NetworkDataGridNode.test.ts

@@ -506,4 +506,69 @@ describeWithEnvironment('NetworkLogView', () => {
 constbackgroundColorOfIcon=iconStyle.backgroundColor.toString();
 assert.strictEqual(backgroundColorOfIcon,'var(--icon-warning)');
 });
+
+it('uses x-fb-friendly-name from response headers when present',async()=>{
+constrequest=SDK.NetworkRequest.NetworkRequest.create(
+'requestId'asProtocol.Network.RequestId,urlString`https://www.example.com/api/v1/users/12345`,urlString``,
+null,null,null);
+request.statusCode=200;
+request.responseHeaders=[{name: 'x-fb-friendly-name',value: 'GetUserProfile'}];
+
+constnetworkRequestNode=newNetwork.NetworkDataGridNode.NetworkRequestNode(
+{}asNetwork.NetworkDataGridNode.NetworkLogViewInterface,request);
+constel=document.createElement('div');
+networkRequestNode.renderCell(el,'name');
+
+// The cell should contain the friendly name instead of the default URL name
+assert.include(el.textContent,'GetUserProfile');
+});
+
+it('uses x-fb-friendly-name from request headers when not in response',async()=>{
+constrequest=SDK.NetworkRequest.NetworkRequest.create(
+'requestId'asProtocol.Network.RequestId,urlString`https://www.example.com/graphql`,urlString``,null,null,
+null);
+request.statusCode=200;
+request.setRequestHeaders([{name: 'x-fb-friendly-name',value: 'CreatePost'}]);
+
+constnetworkRequestNode=newNetwork.NetworkDataGridNode.NetworkRequestNode(
+{}asNetwork.NetworkDataGridNode.NetworkLogViewInterface,request);
+constel=document.createElement('div');
+networkRequestNode.renderCell(el,'name');
+
+// The cell should contain the friendly name from request headers
+assert.include(el.textContent,'CreatePost');
+});
+
+it('uses default name when x-fb-friendly-name is not present',async()=>{
+constrequest=SDK.NetworkRequest.NetworkRequest.create(
+'requestId'asProtocol.Network.RequestId,urlString`https://www.example.com/test.js`,urlString``,null,null,
+null);
+request.statusCode=200;
+
+constnetworkRequestNode=newNetwork.NetworkDataGridNode.NetworkRequestNode(
+{}asNetwork.NetworkDataGridNode.NetworkLogViewInterface,request);
+constel=document.createElement('div');
+networkRequestNode.renderCell(el,'name');
+
+// The cell should contain the default name (test.js)
+assert.include(el.textContent,'test.js');
+});
+
+it('prefers response header x-fb-friendly-name over request header',async()=>{
+constrequest=SDK.NetworkRequest.NetworkRequest.create(
+'requestId'asProtocol.Network.RequestId,urlString`https://www.example.com/api/data`,urlString``,null,null,
+null);
+request.statusCode=200;
+request.responseHeaders=[{name: 'x-fb-friendly-name',value: 'ResponseName'}];
+request.setRequestHeaders([{name: 'x-fb-friendly-name',value: 'RequestName'}]);
+
+constnetworkRequestNode=newNetwork.NetworkDataGridNode.NetworkRequestNode(
+{}asNetwork.NetworkDataGridNode.NetworkLogViewInterface,request);
+constel=document.createElement('div');
+networkRequestNode.renderCell(el,'name');
+
+// The cell should contain the response header value, not the request header value
+assert.include(el.textContent,'ResponseName');
+assert.notInclude(el.textContent,'RequestName');
+});
 });

front_end/panels/network/NetworkDataGridNode.ts

@@ -882,7 +882,10 @@ export class NetworkRequestNode extends NetworkNode {
 }
 
 overridedisplayName(): string{
-returnthis.requestInternal.name();
+// [RN] Check for x-fb-friendly-name header in response or request headers
+constfriendlyName=this.requestInternal.responseHeaderValue('x-fb-friendly-name')||
+this.requestInternal.requestHeaderValue('x-fb-friendly-name');
+returnfriendlyName||this.requestInternal.name();
 }
 
 overriderequest(): SDK.NetworkRequest.NetworkRequest{
@@ -1126,7 +1129,10 @@ export class NetworkRequestNode extends NetworkNode {
 cell.appendChild(secondIconElement);
 }
 }
-constname=Platform.StringUtilities.trimMiddle(this.requestInternal.name(),100);
+// [RN] Check for x-fb-friendly-name header in response or request headers
+constfriendlyName=this.requestInternal.responseHeaderValue('x-fb-friendly-name')||
+this.requestInternal.requestHeaderValue('x-fb-friendly-name');
+constname=Platform.StringUtilities.trimMiddle(friendlyName||this.requestInternal.name(),100);
 constnetworkManager=SDK.NetworkManager.NetworkManager.forRequest(this.requestInternal);
 UI.UIUtils.createTextChild(cell,networkManager ? networkManager.target().decorateLabel(name) : name);
 this.appendSubtitle(cell,this.requestInternal.path());