DirectSocket TCP panel #2

On click NetworkLogItem of type DirectSocket now a new set of tabs is
opened: ConnectionInfo, Initiator, Timing

The related commit in chromium -
https://chromium-review.googlesource.com/c/chromium/src/+/6308994

The previous commit in devtools that add NetworkManager logic -
https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6316791/20

Design Document: go/chrome-devtools:directsockets-design

How the UI looks like:

1. Direct Socket connection in Network manager log:
https://screenshot.googleplex.com/6oorNNBQW3TWvWx.png.
2. Connection info tab Opening state:
https://screenshot.googleplex.com/6SeiiJb5vQyVHKh.png.
3. Initiator tab:
https://screenshot.googleplex.com/AXaNjTaX2MqJVGx.png.
4. Timing tab:
https://screenshot.googleplex.com/3tofCoEdAat4tuC.png.

Change-Id: I70ab6e80a163d39c287ac5e35293346e37239db4
Bug: 358327120
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6406321
Reviewed-by: Danil Somsikov <[email protected]>
Reviewed-by: Changhao Han <[email protected]>
Commit-Queue: Vlad Krot <[email protected]>

Author: vkrot-cell

config/gni/devtools_grd_files.gni

@@ -1622,6 +1622,7 @@ grd_files_debug_sources = [
   "front_end/panels/network/SignedExchangeInfoView.js",
   "front_end/panels/network/binaryResourceView.css.js",
   "front_end/panels/network/blockedURLsPane.css.js",
+  "front_end/panels/network/components/DirectSocketConnectionView.js",
   "front_end/panels/network/components/EditableSpan.css.js",
   "front_end/panels/network/components/EditableSpan.js",
   "front_end/panels/network/components/HeaderSectionRow.css.js",

front_end/panels/network/NetworkDataGridNode.ts

@@ -1239,6 +1239,8 @@ export class NetworkRequestNode extends NetworkNode {
       const statusText = this.requestInternal.getInferredStatusText();
       this.appendSubtitle(cell, statusText);
       UI.Tooltip.Tooltip.install(cell, this.requestInternal.statusCode + ' ' + statusText);
+    } else if (this.requestInternal.statusText) {
+      this.setTextAndTitle(cell, this.requestInternal.statusText);
     } else if (this.requestInternal.finished) {
       this.setTextAndTitle(cell, i18nString(UIStrings.finished));
     } else if (this.requestInternal.preserved) {

front_end/panels/network/NetworkItemView.test.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
@@ -53,6 +54,7 @@ describeWithMockConnection('NetworkItemView', () => {
   it('reveals header in RequestHeadersView', async () => {
     const networkItemView = renderNetworkItemView();
     const headersViewComponent = networkItemView.getHeadersViewComponent();
+    assert.exists(headersViewComponent);
     const headersViewComponentSpy = sinon.spy(headersViewComponent, 'revealHeader');
 
     assert.isTrue(headersViewComponentSpy.notCalled);
@@ -139,4 +141,29 @@ describeWithEnvironment('NetworkItemView', () => {
 
     networkItemView.detach();
   });
+
+  it('shows the ConnectionInfo tab for DirectSocket requests', () => {
+    request.setResourceType(Common.ResourceType.resourceTypes.DirectSocket);
+    request.directSocketInfo = {
+      type: SDK.NetworkRequest.DirectSocketType.TCP,
+      status: SDK.NetworkRequest.DirectSocketStatus.OPENING,
+      createOptions: {
+        remoteAddr: '127.0.0.1',
+        remotePort: 2545,
+        noDelay: false,
+        keepAliveDelay: 1000,
+        sendBufferSize: 1002,
+        receiveBufferSize: 1003,
+        dnsQueryType: undefined,
+      }
+    };
+
+    const networkItemView = renderNetworkItemView(request);
+
+    assert.isTrue(networkItemView.hasTab(NetworkForward.UIRequestLocation.UIRequestTabs.DIRECT_SOCKET_CONNECTION));
+    assert.isTrue(networkItemView.hasTab(NetworkForward.UIRequestLocation.UIRequestTabs.INITIATOR));
+    assert.isTrue(networkItemView.hasTab(NetworkForward.UIRequestLocation.UIRequestTabs.TIMING));
+
+    networkItemView.detach();
+  });
 });

front_end/panels/network/NetworkItemView.ts

@@ -57,6 +57,10 @@ const UIStrings = {
    *@description Text for network request headers
    */
   headers: 'Headers',
+  /**
+   *@description Text for network connection info. In case the request is not made over http.
+   */
+  connectionInfo: 'Connection Info',
   /**
    *@description Text in Network Item View of the Network panel
    */
@@ -147,11 +151,12 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   private requestInternal: SDK.NetworkRequest.NetworkRequest;
   private readonly resourceViewTabSetting: Common.Settings.Setting<NetworkForward.UIRequestLocation.UIRequestTabs>;
-  private readonly headersViewComponent: NetworkComponents.RequestHeadersView.RequestHeadersView;
+  private readonly headersViewComponent: NetworkComponents.RequestHeadersView.RequestHeadersView|undefined;
   private payloadView: RequestPayloadView|null;
   private readonly responseView: RequestResponseView|undefined;
   private cookiesView: RequestCookiesView|null;
   private initialTab?: NetworkForward.UIRequestLocation.UIRequestTabs;
+  private readonly firstTab: NetworkForward.UIRequestLocation.UIRequestTabs;
 
   constructor(
       request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator,
@@ -163,15 +168,22 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
                                         keydown: 'ArrowUp|ArrowLeft|ArrowDown|ArrowRight|Enter|Space',
                                       })}`);
 
-    const headersTab = NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT;
-    this.resourceViewTabSetting = Common.Settings.Settings.instance().createSetting(
-        'resource-view-tab', NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
+    if (request.resourceType() === Common.ResourceType.resourceTypes.DirectSocket) {
+      this.firstTab = NetworkForward.UIRequestLocation.UIRequestTabs.DIRECT_SOCKET_CONNECTION;
+      this.appendTab(
+          NetworkForward.UIRequestLocation.UIRequestTabs.DIRECT_SOCKET_CONNECTION, i18nString(UIStrings.connectionInfo),
+          new NetworkComponents.DirectSocketConnectionView.DirectSocketConnectionView(request),
+          i18nString(UIStrings.headers));
+    } else {
+      this.firstTab = NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT;
+      this.headersViewComponent = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
+      this.appendTab(
+          NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT, i18nString(UIStrings.headers),
+          LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.VBox, this.headersViewComponent),
+          i18nString(UIStrings.headers));
+    }
 
-    this.headersViewComponent = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
-    this.appendTab(
-        headersTab, i18nString(UIStrings.headers),
-        LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.VBox, this.headersViewComponent),
-        i18nString(UIStrings.headers));
+    this.resourceViewTabSetting = Common.Settings.Settings.instance().createSetting('resource-view-tab', this.firstTab);
 
     if (this.requestInternal.hasOverriddenHeaders()) {
       const statusDot = document.createElement('div');
@@ -190,6 +202,8 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.WS_FRAMES, i18nString(UIStrings.messages), frameView,
           i18nString(UIStrings.websocketMessages));
+    } else if (request.resourceType() === Common.ResourceType.resourceTypes.DirectSocket) {
+      // TODO(@vkrot): add direct socket messages tab
     } else if (request.mimeType === Platform.MimeType.MimeType.EVENTSTREAM) {
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.EVENT_SOURCE, i18nString(UIStrings.eventstream),
@@ -328,7 +342,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
       // it makes sense to retry on the next tick
       window.setTimeout(() => {
         if (!this.selectTab(tabId)) {
-          this.selectTab(NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
+          this.selectTab(this.firstTab);
         }
       }, 0);
     }
@@ -352,10 +366,10 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
 
   revealHeader(section: NetworkForward.UIRequestLocation.UIHeaderSection, header: string|undefined): void {
     this.selectTabInternal(NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
-    this.headersViewComponent.revealHeader(section, header);
+    this.headersViewComponent?.revealHeader(section, header);
   }
 
-  getHeadersViewComponent(): NetworkComponents.RequestHeadersView.RequestHeadersView {
+  getHeadersViewComponent(): NetworkComponents.RequestHeadersView.RequestHeadersView|undefined {
     return this.headersViewComponent;
   }
 }

front_end/panels/network/components/BUILD.gn

@@ -22,6 +22,7 @@ generate_css("css_files") {
 
 devtools_module("components") {
   sources = [
+    "DirectSocketConnectionView.ts",
     "EditableSpan.ts",
     "HeaderSectionRow.ts",
     "RequestHeaderSection.ts",
@@ -76,6 +77,7 @@ devtools_entrypoint("bundle") {
 ts_library("unittests") {
   testonly = true
   sources = [
+    "DirectSocketConnectionView.test.ts",
     "HeaderSectionRow.test.ts",
     "RequestHeaderSection.test.ts",
     "RequestHeadersView.test.ts",