[DevTools] Add targets to protocol monitor

Screenshot: https://imgur.com/UiJ8BhH
Change-Id: I0a9b9440073b864516723400ebe73ca3d2c71f11
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1799700
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#700371}

third_party/blink/renderer/devtools/front_end/protocol/InspectorBackend.js

@@ -237,13 +237,13 @@ Protocol.test = {
 
   /**
    * Set to get notified about any messages sent over protocol.
-   * @type {?function({domain: string, method: string, params: !Object, id: number})}
+   * @type {?function({domain: string, method: string, params: !Object, id: number}, ?Protocol.TargetBase)}
    */
   onMessageSent: null,
 
   /**
    * Set to get notified about any messages received over protocol.
-   * @type {?function(!Object)}
+   * @type {?function(!Object, ?Protocol.TargetBase)}
    */
   onMessageReceived: null,
 };
@@ -317,6 +317,17 @@ Protocol.SessionRouter = class {
     this._sessions.delete(sessionId);
   }
 
+  /**
+   * @param {string} sessionId
+   * @return {?Protocol.TargetBase}
+   */
+  _getTargetBySessionId(sessionId) {
+    const session = this._sessions.get(sessionId ? sessionId : '');
+    if (!session)
+      return null;
+    return session.target;
+  }
+
   /**
    * @return {number}
    */
@@ -353,7 +364,9 @@ Protocol.SessionRouter = class {
 
     if (Protocol.test.onMessageSent) {
       const paramsObject = JSON.parse(JSON.stringify(params || {}));
-      Protocol.test.onMessageSent({domain, method, params: /** @type {!Object} */ (paramsObject), id: messageId});
+      Protocol.test.onMessageSent(
+          {domain, method, params: /** @type {!Object} */ (paramsObject), id: messageId},
+          this._getTargetBySessionId(sessionId));
     }
 
     ++this._pendingResponsesCount;
@@ -380,7 +393,8 @@ Protocol.SessionRouter = class {
 
     if (Protocol.test.onMessageReceived) {
       const messageObjectCopy = JSON.parse((typeof message === 'string') ? message : JSON.stringify(message));
-      Protocol.test.onMessageReceived(/** @type {!Object} */ (messageObjectCopy));
+      Protocol.test.onMessageReceived(
+          /** @type {!Object} */ (messageObjectCopy), this._getTargetBySessionId(messageObjectCopy.sessionId));
     }
 
     const messageObject = /** @type {!Object} */ ((typeof message === 'string') ? JSON.parse(message) : message);

third_party/blink/renderer/devtools/front_end/protocol_monitor/ProtocolMonitor.js

@@ -15,7 +15,8 @@ ProtocolMonitor.ProtocolMonitor = class extends UI.VBox {
       {id: 'direction', title: ls`Direction`, visible: false, sortable: true, hideable: true, weight: 30},
       {id: 'request', title: ls`Request`, visible: true, hideable: true, weight: 60},
       {id: 'response', title: ls`Response`, visible: true, hideable: true, weight: 60},
-      {id: 'timestamp', title: ls`Timestamp`, visible: false, sortable: true, hideable: true, weight: 30}
+      {id: 'timestamp', title: ls`Timestamp`, visible: false, sortable: true, hideable: true, weight: 30},
+      {id: 'target', title: ls`Target`, visible: false, sortable: true, hideable: true, weight: 30}
     ];
 
     this.registerRequiredCSS('protocol_monitor/protocolMonitor.css');
@@ -180,7 +181,21 @@ ProtocolMonitor.ProtocolMonitor = class extends UI.VBox {
     }
   }
 
-  _messageRecieved(message) {
+  /**
+   * @param {?SDK.Target} target
+   * @return {string}
+   */
+  _targetToString(target) {
+    if (!target)
+      return '';
+    return target.decorateLabel(`${target.name()} ${target === SDK.targetManager.mainTarget() ? '' : target.id()}`);
+  }
+
+  /**
+   * @param {!Object} message
+   * @param {?Protocol.TargetBase} target
+   */
+  _messageRecieved(message, target) {
     if ('id' in message) {
       const node = this._nodeForId[message.id];
       if (!node)
@@ -192,26 +207,35 @@ ProtocolMonitor.ProtocolMonitor = class extends UI.VBox {
         this._infoWidget.render(node.data);
       return;
     }
+
+    const sdkTarget = /** @type {?SDK.Target} */ (target);
     const node = new ProtocolMonitor.ProtocolMonitor.ProtocolNode({
       method: message.method,
       direction: 'recieved',
       response: message.params,
       timestamp: Date.now() - this._startTime,
-      request: ''
+      request: '',
+      target: this._targetToString(sdkTarget)
     });
     this._nodes.push(node);
     if (this._filter(node))
       this._dataGrid.insertChild(node);
   }
 
-  _messageSent(message) {
+  /**
+   * @param {{domain: string, method: string, params: !Object, id: number}} message
+   * @param {?Protocol.TargetBase} target
+   */
+  _messageSent(message, target) {
+    const sdkTarget = /** @type {?SDK.Target} */ (target);
     const node = new ProtocolMonitor.ProtocolMonitor.ProtocolNode({
       method: message.method,
       direction: 'sent',
       request: message.params,
       timestamp: Date.now() - this._startTime,
       response: '(pending)',
-      id: message.id
+      id: message.id,
+      target: this._targetToString(sdkTarget)
     });
     this._nodeForId[message.id] = node;
     this._nodes.push(node);

third_party/blink/renderer/devtools/front_end/protocol_monitor/protocol_monitor_strings.grdp

@@ -15,4 +15,7 @@
   <message name="IDS_DEVTOOLS_c2474d3f42e95aac175f984da6d91cf5" desc="Title of the 'Protocol monitor' tool in the bottom drawer">
     Protocol monitor
   </message>
+  <message name="IDS_DEVTOOLS_c41a31890959544c6523af684561abe5" desc="Text in Protocol Monitor of the Protocol Monitor tab">
+    Target
+  </message>
 </grit-part>