chrome-devtools-frontend 1.0.1661063 → 1.0.1662965

package/front_end/panels/emulation/DeviceModeView.ts

@@ -113,9 +113,17 @@ export class DeviceModeView extends UI.Widget.VBox {
     this.showRulersSetting = Common.Settings.Settings.instance().moduleSetting('emulation.show-rulers');
     this.showRulersSetting.addChangeListener(this.updateUI, this);
 
-    this.topRuler = new Ruler(true, this.model.setWidthAndScaleToFit.bind(this.model));
+    this.topRuler = new Ruler();
+    this.topRuler.horizontal = true;
+    this.topRuler.addEventListener(RulerEvents.MARKER_SELECTED, event => {
+      this.model.setWidthAndScaleToFit(event.data);
+    });
     this.topRuler.element.classList.add('device-mode-ruler-top');
-    this.leftRuler = new Ruler(false, this.model.setHeightAndScaleToFit.bind(this.model));
+    this.leftRuler = new Ruler();
+    this.leftRuler.horizontal = false;
+    this.leftRuler.addEventListener(RulerEvents.MARKER_SELECTED, event => {
+      this.model.setHeightAndScaleToFit(event.data);
+    });
     this.leftRuler.element.classList.add('device-mode-ruler-left');
     this.createUI();
     UI.ZoomManager.ZoomManager.instance().addEventListener(UI.ZoomManager.Events.ZOOM_CHANGED, this.zoomChanged, this);
@@ -566,86 +574,147 @@ export class DeviceModeView extends UI.Widget.VBox {
   }
 }
 
-export class Ruler extends UI.Widget.VBox {
-  #contentElement: HTMLElement;
-  private readonly horizontal: boolean;
-  private scale: number;
-  private readonly throttler: Common.Throttler.Throttler;
-  private readonly applyCallback: (arg0: number) => void;
-  constructor(horizontal: boolean, applyCallback: (arg0: number) => void) {
-    super({jslog: `${VisualLogging.deviceModeRuler().track({click: true})}`});
-    this.element.classList.add('device-mode-ruler');
-    this.#contentElement =
-        this.element.createChild('div', 'device-mode-ruler-content').createChild('div', 'device-mode-ruler-inner');
-    this.horizontal = horizontal;
-    this.scale = 1;
-    this.throttler = new Common.Throttler.Throttler(0);
-    this.applyCallback = applyCallback;
+export interface RulerViewInput {
+  horizontal: boolean;
+  scale: number;
+  onMarkerClick: (size: number) => void;
+}
+
+export type RulerView = (input: RulerViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_RULER_VIEW: RulerView = (input: RulerViewInput, output: undefined, target: HTMLElement): void => {
+  const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
+  const size = input.horizontal ? target.offsetWidth : target.offsetHeight;
+
+  const dipSize = size * zoomFactor / input.scale;
+  const count = Math.ceil(dipSize / 5);
+  let step = 1;
+  if (input.scale < 0.8) {
+    step = 2;
+  }
+  if (input.scale < 0.6) {
+    step = 4;
+  }
+  if (input.scale < 0.4) {
+    step = 8;
+  }
+  if (input.scale < 0.2) {
+    step = 16;
+  }
+  if (input.scale < 0.1) {
+    step = 32;
   }
 
-  render(scale: number): void {
-    this.scale = scale;
-    void this.throttler.schedule(this.update.bind(this));
+  const markers = [];
+  for (let i = 0; i < count; i++) {
+    if (i % step) {
+      continue;
+    }
+    const isLarge = !(i % 10);
+    const isMedium = !(i % 5);
+    const offset = i ? `${(5 * i) * input.scale / zoomFactor}px` : undefined;
+
+    // clang-format off
+    markers.push(html`
+      <div
+        class=${classMap({
+          'device-mode-ruler-marker': true,
+          'device-mode-ruler-marker-large': isLarge,
+          'device-mode-ruler-marker-medium': isMedium && !isLarge,
+        })}
+        style=${styleMap(input.horizontal ? {left: offset} : {top: offset})}>
+          ${i && !(i % 20) ?
+            html`<div class="device-mode-ruler-text" @click=${() => input.onMarkerClick(i * 5)}>${i * 5}</div>` :
+            nothing}
+      </div>
+    `);
+    // clang-format on
   }
 
-  override onResize(): void {
-    void this.throttler.schedule(this.update.bind(this));
+  render(html`
+    <div class="device-mode-ruler-content">
+      <div class="device-mode-ruler-inner">
+        ${markers}
+      </div>
+    </div>
+  `,
+         target, {
+           container: {
+             classes: ['device-mode-ruler'],
+             attributes: {jslog: VisualLogging.deviceModeRuler().track({click: true})},
+           },
+         });
+};
+
+export const enum RulerEvents {
+  MARKER_SELECTED = 'MarkerSelected',
+}
+
+export interface RulerEventTypes {
+  [RulerEvents.MARKER_SELECTED]: number;
+}
+
+export class Ruler extends Common.ObjectWrapper.eventMixin<RulerEventTypes, typeof UI.Widget.Widget>(UI.Widget.Widget) {
+  #view: RulerView;
+  #horizontal = true;
+  #scale = 1;
+
+  constructor(element?: HTMLElement, view: RulerView = DEFAULT_RULER_VIEW) {
+    super(element);
+    this.#view = view;
   }
 
-  update(): void {
-    const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
-    const size = this.horizontal ? this.#contentElement.offsetWidth : this.#contentElement.offsetHeight;
+  get horizontal(): boolean {
+    return this.#horizontal;
+  }
 
-    const dipSize = size * zoomFactor / this.scale;
-    const count = Math.ceil(dipSize / 5);
-    let step = 1;
-    if (this.scale < 0.8) {
-      step = 2;
-    }
-    if (this.scale < 0.6) {
-      step = 4;
-    }
-    if (this.scale < 0.4) {
-      step = 8;
-    }
-    if (this.scale < 0.2) {
-      step = 16;
-    }
-    if (this.scale < 0.1) {
-      step = 32;
+  set horizontal(horizontal: boolean) {
+    if (this.#horizontal === horizontal) {
+      return;
     }
+    this.#horizontal = horizontal;
+    this.requestUpdate();
+  }
 
-    const markers = [];
-    for (let i = 0; i < count; i++) {
-      if (i % step) {
-        continue;
-      }
-      const isLarge = !(i % 10);
-      const isMedium = !(i % 5);
-      const offset = i ? `${(5 * i) * this.scale / zoomFactor}px` : undefined;
-
-      // clang-format off
-      markers.push(html`
-        <div
-          class=${classMap({
-            'device-mode-ruler-marker': true,
-            'device-mode-ruler-marker-large': isLarge,
-            'device-mode-ruler-marker-medium': isMedium && !isLarge,
-          })}
-          style=${styleMap(this.horizontal ? {left: offset} : {top: offset})}>
-            ${i && !(i % 20) ?
-              html`<div class="device-mode-ruler-text" @click=${() => this.onMarkerClick(i * 5)}>${i * 5}</div>` :
-              nothing}
-        </div>
-      `);
-      // clang-format on
+  get scale(): number {
+    return this.#scale;
+  }
+
+  set scale(scale: number) {
+    if (this.#scale === scale) {
+      return;
     }
+    this.#scale = scale;
+    this.requestUpdate();
+  }
 
-    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-    render(html`${markers}`, this.#contentElement);
+  render(scale: number): void {
+    this.scale = scale;
   }
 
-  private onMarkerClick(size: number): void {
-    this.applyCallback.call(null, size);
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  override onResize(): void {
+    super.onResize();
+    this.requestUpdate();
+  }
+
+  #onMarkerClick = (size: number): void => {
+    this.dispatchEventToListeners(RulerEvents.MARKER_SELECTED, size);
+  };
+
+  override performUpdate(): void {
+    if (!this.isShowing()) {
+      return;
+    }
+    const viewInput: RulerViewInput = {
+      horizontal: this.#horizontal,
+      scale: this.#scale,
+      onMarkerClick: this.#onMarkerClick,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 }

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -84,7 +84,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
 
     this.affectedResources = this.createAffectedResources();
     this.#affectedResourcesCount = 0;
-    this.requestResolver = new Logs.RequestResolver.RequestResolver();
+    this.requestResolver = new Logs.RequestResolver.RequestResolver(Logs.NetworkLog.NetworkLog.instance());
     this.#frameListeners = [];
     this.#unresolvedFrameIds = new Set();
   }

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
-import type * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
+import * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import type * as LighthouseModel from '../../models/lighthouse/lighthouse.js';
@@ -78,6 +78,14 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
   private configForTesting?: object;
   private connection?: ProtocolClient.CDPConnection.CDPConnection;
 
+  /**
+   * Session ids that belong to this Lighthouse run. The proxy only relays
+   * worker commands and connection events that target one of these sessions
+   * so that traffic stays scoped to the parallel session created in
+   * `attach()` and its descendants.
+   */
+  readonly #knownSessionIds = new Set<string>();
+
   /**
    * Tracks pending requests to the Lighthouse worker.
    * Key: The message ID sent to the worker.
@@ -119,6 +127,8 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
 
     const rootTargetId = await rootChildTargetManager.getParentTargetId();
     const {sessionId} = await rootTarget.targetAgent().invoke_attachToTarget({targetId: rootTargetId, flatten: true});
+    this.#knownSessionIds.clear();
+    this.#knownSessionIds.add(sessionId);
     this.connection = connection;
     this.connection.observe(this);
 
@@ -217,6 +227,7 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
     this.rootTarget = undefined;
     this.connection?.unobserve(this);
     this.connection = undefined;
+    this.#knownSessionIds.clear();
 
     if (oldLighthouseWorker) {
       (await oldLighthouseWorker).terminate();
@@ -237,18 +248,29 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
   }
 
   private dispatchProtocolMessage(message: ProtocolClient.CDPConnection.CDPReceivableMessage): void {
-    // A message without a sessionId is the main session of the main target (call it "Main session").
-    // A parallel connection and session was made that connects to the same main target (call it "Lighthouse session").
-    // Messages from the "Lighthouse session" have a sessionId.
-    // Without some care, there is a risk of sending the same events for the same main frame to Lighthouse–the backend
-    // will create events for the "Main session" and the "Lighthouse session".
-    // The workaround–only send message to Lighthouse if:
-    //   * the message has a sessionId (is not for the "Main session")
-    //   * the message does not have a sessionId (is for the "Main session"), but only for the Target domain
-    //     (to kickstart autoAttach in LH).
-    if (message.sessionId || ('method' in message && message.method?.startsWith('Target'))) {
-      void this.send('dispatchProtocolMessage', {message});
+    // The shared CDPConnection carries traffic for every DevTools session. A
+    // parallel session is created for the Lighthouse run in `attach()`, and the
+    // worker only ever needs traffic that belongs to that session or one of the
+    // child sessions it subsequently attaches. Filtering on `#knownSessionIds`
+    // keeps the proxy scoped to the run instead of broadcasting unrelated
+    // session traffic into the worker.
+    if (!message.sessionId || !this.#knownSessionIds.has(message.sessionId)) {
+      return;
+    }
+    if ('method' in message) {
+      if (message.method === 'Target.attachedToTarget') {
+        const childSessionId = (message.params as Protocol.Target.AttachedToTargetEvent | undefined)?.sessionId;
+        if (childSessionId) {
+          this.#knownSessionIds.add(childSessionId);
+        }
+      } else if (message.method === 'Target.detachedFromTarget') {
+        const childSessionId = (message.params as Protocol.Target.DetachedFromTargetEvent | undefined)?.sessionId;
+        if (childSessionId) {
+          this.#knownSessionIds.delete(childSessionId);
+        }
+      }
     }
+    void this.send('dispatchProtocolMessage', {message});
   }
 
   onDisconnect(): void {
@@ -303,11 +325,30 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
 
   private sendProtocolMessage(message: string): void {
     const {id, method, params, sessionId} = JSON.parse(message);
+    // The worker is expected to only address the parallel session created in
+    // `attach()` or sessions discovered beneath it. Anything else, including
+    // the root session, is outside the scope of the run.
+    if (!sessionId || !this.#knownSessionIds.has(sessionId)) {
+      void this.send('dispatchProtocolMessage', {
+        message: {
+          id,
+          sessionId,
+          error: {
+            code: ProtocolClient.CDPConnection.CDPErrorStatus.SESSION_NOT_FOUND,
+            message: `Unknown session id: ${sessionId}`,
+          },
+        },
+      });
+      return;
+    }
     // CDPConnection manages it's own message IDs and it's important, otherwise we'd clash
     // with the rest of the DevTools traffic.
     // Instead, we ignore the ID coming from the worker when sending the command, but
     // patch it back in when sending the response back to the worker.
     void this.connection?.send(method, params, sessionId).then(response => {
+      if ('result' in response && method === 'Target.attachToTarget' && response.result?.sessionId) {
+        this.#knownSessionIds.add(response.result.sessionId);
+      }
       const message =
           'result' in response ? {id, sessionId, result: response.result} : {id, sessionId, error: response.error};
       this.dispatchProtocolMessage(message);

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -47,6 +47,7 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import type * as HAR from '../../models/har/har.js';
 import * as Logs from '../../models/logs/logs.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
+import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {createIcon} from '../../ui/kit/kit.js';
@@ -343,6 +344,16 @@ const UIStrings = {
    * @description Text in Network Data Grid Node of the Network panel. Noun. Refers to a potentially blocking resource.
    */
   potentiallyBlocking: 'Potentially blocking',
+  /**
+   * @description Text indicating a request originated from the DevTools console. Used as a subtitle in the
+   * Initiator column.
+   */
+  console: 'Console',
+  /**
+   * @description Tooltip for the console icon in the Network panel, indicating a request was initiated
+   * from the Console.
+   */
+  requestOriginatedFromConsole: 'Request originated from Console',
 
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkDataGridNode.ts', UIStrings);
@@ -1009,6 +1020,29 @@ export class NetworkRequestNode extends NetworkNode {
     return aValue.localeCompare(bValue) || aRequest.identityCompare(bRequest);
   }
 
+  static isConsoleOriginated(request: SDK.NetworkRequest.NetworkRequest): boolean {
+    const resourceType = request.resourceType();
+    if (resourceType !== Common.ResourceType.resourceTypes.Fetch &&
+        resourceType !== Common.ResourceType.resourceTypes.XHR) {
+      return false;
+    }
+    const initiator = request.initiator();
+    if (!initiator || initiator.type !== Protocol.Network.InitiatorType.Script) {
+      return false;
+    }
+    if (initiator.url) {
+      return false;
+    }
+    if (!initiator.stack) {
+      return false;
+    }
+    return StackTrace.StackTrace.isConsoleOriginated(initiator.stack);
+  }
+
+  private isConsoleOriginated(): boolean {
+    return NetworkRequestNode.isConsoleOriginated(this.requestInternal);
+  }
+
   override showingInitiatorChainChanged(): void {
     const showInitiatorChain = this.showingInitiatorChain();
 
@@ -1340,6 +1374,13 @@ export class NetworkRequestNode extends NetworkNode {
       // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
       render(iconElement, cell);
 
+      // render Console icon if this request originated from Console
+      if (this.isConsoleOriginated()) {
+        const consoleIcon = createIcon('terminal', 'network-console-icon');
+        UI.Tooltip.Tooltip.install(consoleIcon, i18nString(UIStrings.requestOriginatedFromConsole));
+        cell.appendChild(consoleIcon);
+      }
+
       // render Ask AI button
       const aiButtonContainer = this.createAiButtonIfAvailable();
       if (aiButtonContainer) {
@@ -1590,7 +1631,8 @@ export class NetworkRequestNode extends NetworkNode {
         }
         UI.Tooltip.Tooltip.install((this.linkifiedInitiatorAnchor), '');
         cell.appendChild(this.linkifiedInitiatorAnchor);
-        this.appendSubtitle(cell, i18nString(UIStrings.script));
+        this.appendSubtitle(cell,
+                            this.isConsoleOriginated() ? i18nString(UIStrings.console) : i18nString(UIStrings.script));
         cell.classList.add('network-script-initiated');
         break;
       }

package/front_end/panels/network/RequestInitiatorView.ts

@@ -12,6 +12,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import {NetworkRequestNode} from './NetworkDataGridNode.js';
 import requestInitiatorViewStyles from './requestInitiatorView.css.js';
 import requestInitiatorViewTreeStyles from './requestInitiatorViewTree.css.js';
 
@@ -30,6 +31,10 @@ const UIStrings = {
    * @description Title of a section in Request Initiator view of the Network Panel
    */
   requestInitiatorChain: 'Request initiator chain',
+  /**
+   * @description Label shown in the initiator chain when a request was initiated from the Console.
+   */
+  console: 'Console',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestInitiatorView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -51,6 +56,7 @@ export interface ViewInput {
   initiatorGraph: Logs.NetworkLog.InitiatorGraph;
   stackTrace: StackTrace.StackTrace.StackTrace|null;
   request: SDK.NetworkRequest.NetworkRequest;
+  isConsoleOriginated: boolean;
 }
 
 export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
@@ -83,6 +89,11 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
               stackTrace: input.stackTrace,
             })}
           </li>
+          ${input.isConsoleOriginated ? html`
+            <li role="treeitem" class="console-origin-label">
+              ${i18nString(UIStrings.console)}
+            </li>
+          ` : nothing}
         </ul>
       </li>
     `;
@@ -167,13 +178,21 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
         ${i18nString(UIStrings.requestInitiatorChain)}
         ${hasInitiatorChain ? html`
           <ul role="group">
-            ${renderInitiatorNodes(initiators, 0, initiatorGraph.initiated, visited)}
+            ${input.isConsoleOriginated ? html`
+              <li role="treeitem" aria-expanded="true" open>
+                <span>${i18nString(UIStrings.console)}</span>
+                <ul role="group">
+                  ${renderInitiatorNodes(initiators, 0, initiatorGraph.initiated, visited)}
+                </ul>
+              </li>` :
+              renderInitiatorNodes(initiators, 0, initiatorGraph.initiated, visited)}
           </ul>` : nothing}
       </li>`;
     // clang-format on
   };
 
-  const hasInitiatorChain = input.initiatorGraph.initiators.size > 1 || input.initiatorGraph.initiated.size > 1;
+  const hasInitiatorChain =
+      input.initiatorGraph.initiators.size > 1 || input.initiatorGraph.initiated.size > 1 || input.isConsoleOriginated;
 
   // clang-format off
   render(html`
@@ -242,10 +261,13 @@ export class RequestInitiatorView extends UI.Widget.VBox {
                        .createStackTraceFromProtocolRuntime(rawStack, target);
     }
 
+    const isConsoleOriginated = NetworkRequestNode.isConsoleOriginated(this.request);
+
     const viewInput: ViewInput = {
       initiatorGraph,
       stackTrace,
       request: this.request,
+      isConsoleOriginated,
     };
 
     this.#view(viewInput, undefined, this.contentElement);