chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/core/sdk/CSSMetadata.ts

@@ -824,6 +824,7 @@ const extraPropertyValues = new Map<string, Set<string>>([
       'self-end',
       'flex-start',
       'flex-end',
+      'anchor-center',
     ]),
   ],
   [
@@ -842,6 +843,7 @@ const extraPropertyValues = new Map<string, Set<string>>([
       'left',
       'right',
       'legacy',
+      'anchor-center',
     ]),
   ],
   [
@@ -857,6 +859,7 @@ const extraPropertyValues = new Map<string, Set<string>>([
       'self-end',
       'flex-start',
       'flex-end',
+      'anchor-center',
     ]),
   ],
   [
@@ -872,6 +875,7 @@ const extraPropertyValues = new Map<string, Set<string>>([
       'self-end',
       'flex-start',
       'flex-end',
+      'anchor-center',
     ]),
   ],
   [
@@ -889,6 +893,7 @@ const extraPropertyValues = new Map<string, Set<string>>([
       'flex-end',
       'left',
       'right',
+      'anchor-center',
     ]),
   ],
   [
@@ -904,6 +909,7 @@ const extraPropertyValues = new Map<string, Set<string>>([
       'self-end',
       'flex-start',
       'flex-end',
+      'anchor-center',
     ]),
   ],
   ['perspective-origin', new Set(['left', 'center', 'right', 'top', 'bottom'])],

package/front_end/core/sdk/CSSModel.ts

@@ -200,6 +200,10 @@ export class CSSModel extends SDKModel<EventTypes> {
     return this.#domModel;
   }
 
+  async trackComputedStyleUpdatesForNode(nodeId: Protocol.DOM.NodeId|undefined): Promise<void> {
+    await this.agent.invoke_trackComputedStyleUpdatesForNode({nodeId});
+  }
+
   async setStyleText(
       styleSheetId: Protocol.CSS.StyleSheetId, range: TextUtils.TextRange.TextRange, text: string,
       majorChange: boolean): Promise<boolean> {
@@ -651,6 +655,10 @@ export class CSSModel extends SDKModel<EventTypes> {
     return this.#styleSheetIdToHeader.values();
   }
 
+  computedStyleUpdated(nodeId: Protocol.DOM.NodeId): void {
+    this.dispatchEventToListeners(Events.ComputedStyleUpdated, {nodeId});
+  }
+
   styleSheetAdded(header: Protocol.CSS.CSSStyleSheetHeader): void {
     console.assert(!this.#styleSheetIdToHeader.get(header.styleSheetId));
     if (header.loadingFailed) {
@@ -900,6 +908,7 @@ export enum Events {
   StyleSheetAdded = 'StyleSheetAdded',
   StyleSheetChanged = 'StyleSheetChanged',
   StyleSheetRemoved = 'StyleSheetRemoved',
+  ComputedStyleUpdated = 'ComputedStyleUpdated',
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
@@ -914,6 +923,10 @@ export interface PseudoStateForcedEvent {
   enable: boolean;
 }
 
+export interface ComputedStyleUpdatedEvent {
+  nodeId: Protocol.DOM.NodeId;
+}
+
 export type EventTypes = {
   [Events.FontsUpdated]: void,
   [Events.MediaQueryResultChanged]: void,
@@ -923,6 +936,7 @@ export type EventTypes = {
   [Events.StyleSheetAdded]: CSSStyleSheetHeader,
   [Events.StyleSheetChanged]: StyleSheetChangedEvent,
   [Events.StyleSheetRemoved]: CSSStyleSheetHeader,
+  [Events.ComputedStyleUpdated]: ComputedStyleUpdatedEvent,
 };
 
 const PseudoStateMarker = 'pseudo-state-marker';
@@ -990,6 +1004,10 @@ class CSSDispatcher implements ProtocolProxyApi.CSSDispatcher {
   styleSheetRemoved({styleSheetId}: Protocol.CSS.StyleSheetRemovedEvent): void {
     this.#cssModel.styleSheetRemoved(styleSheetId);
   }
+
+  computedStyleUpdated({nodeId}: Protocol.CSS.ComputedStyleUpdatedEvent): void {
+    this.#cssModel.computedStyleUpdated(nodeId);
+  }
 }
 
 class ComputedStyleLoader {

package/front_end/core/sdk/CSSPropertyParser.test.ts

@@ -206,11 +206,26 @@ describe('CSSPropertyParser', () => {
     });
 
     it('correctly tokenizes invalid text', () => {
-      assert.isNull(SDK.CSSPropertyParser.tokenizeDeclaration('--p', ''));
       assert.isNull(SDK.CSSPropertyParser.tokenizeDeclaration('--p', '/*'));
       assert.isNull(SDK.CSSPropertyParser.tokenizeDeclaration('--p', '}'));
     });
 
+    it('correctly tokenizes empty text', () => {
+      const ast = tokenizeDeclaration('--p', '');
+      const topNode = ast.tree.parent?.parent?.parent;
+      assert.exists(topNode);
+      assert.strictEqual(Printer.walk(ast.subtree(topNode)).get(), ` StyleSheet: *{--p: ;}
+| RuleSet: *{--p: ;}
+|| UniversalSelector: *
+|| Block: {--p: ;}
+||| {
+||| Declaration: --p:
+|||| VariableName: --p
+|||| :
+||| ;
+||| }`);
+    });
+
     it('correctly parses property names', () => {
       assert.strictEqual(tokenizeDeclaration('color /*comment*/', 'red')?.propertyName, 'color');
       assert.strictEqual(tokenizeDeclaration('/*comment*/color/*comment*/', 'red')?.propertyName, 'color');

package/front_end/core/sdk/CSSPropertyParser.ts

@@ -609,11 +609,11 @@ export function tokenizeDeclaration(propertyName: string, propertyValue: string)
   }
 
   const childNodes = ASTUtils.children(decl);
-  if (childNodes.length < 3) {
+  if (childNodes.length < 2) {
     return null;
   }
   const [varName, colon, tree] = childNodes;
-  if (!varName || varName.type.isError || !colon || colon.type.isError || !tree || tree.type.isError) {
+  if (!varName || varName.type.isError || !colon || colon.type.isError || tree?.type.isError) {
     return null;
   }
 

package/front_end/core/sdk/CSSStyleDeclaration.test.ts

@@ -202,6 +202,16 @@ describeWithMockConnection('CSSStyleDeclaration', () => {
           range: {startLine: 1, startColumn: 4, endLine: 1, endColumn: 20},
           text: '--a 10;',
         },
+        {
+          name: '--b',
+          value: '10',
+          disabled: true,
+          implicit: false,
+          parsedOk: true,
+          longhandProperties: [],
+          range: {startLine: 1, startColumn: 4, endLine: 1, endColumn: 20},
+          text: '--b: 10;',
+        },
       ],
       shorthandEntries: [],
       cssText: '\n    --a: 5px;\n    --a: 10\n',

package/front_end/core/sdk/CSSStyleDeclaration.ts

@@ -192,7 +192,7 @@ export class CSSStyleDeclaration {
       const metadata = cssMetadata();
       const canonicalName = metadata.canonicalPropertyName(property.name);
       if (property.disabled || !property.parsedOk) {
-        if (property.name.startsWith('--')) {
+        if (!property.disabled && metadata.isCustomProperty(property.name)) {
           // Variable declarations that aren't parsedOk still "overload" other previous active declarations.
           activeProperties.get(canonicalName)?.setActive(false);
           activeProperties.delete(canonicalName);

package/front_end/core/sdk/DOMModel.ts

@@ -1623,9 +1623,9 @@ export class DOMModel extends SDKModel<EventTypes> {
 
   async getContainerForNode(
       nodeId: Protocol.DOM.NodeId, containerName?: string, physicalAxes?: Protocol.DOM.PhysicalAxes,
-      logicalAxes?: Protocol.DOM.LogicalAxes): Promise<DOMNode|null> {
-    const {nodeId: containerNodeId} =
-        await this.agent.invoke_getContainerForNode({nodeId, containerName, physicalAxes, logicalAxes});
+      logicalAxes?: Protocol.DOM.LogicalAxes, queriesScrollState?: boolean): Promise<DOMNode|null> {
+    const {nodeId: containerNodeId} = await this.agent.invoke_getContainerForNode(
+        {nodeId, containerName, physicalAxes, logicalAxes, queriesScrollState});
     if (!containerNodeId) {
       return null;
     }

package/front_end/core/sdk/DebuggerModel.test.ts

@@ -29,6 +29,7 @@ describeWithMockConnection('DebuggerModel', () => {
       setMockConnectionResponseHandler('DOM.disable', () => ({}));
       setMockConnectionResponseHandler('CSS.disable', () => ({}));
       setMockConnectionResponseHandler('Overlay.disable', () => ({}));
+      setMockConnectionResponseHandler('Animation.disable', () => ({}));
       setMockConnectionResponseHandler('Overlay.setShowGridOverlays', () => ({}));
       setMockConnectionResponseHandler('Overlay.setShowFlexOverlays', () => ({}));
       setMockConnectionResponseHandler('Overlay.setShowScrollSnapOverlays', () => ({}));
@@ -43,6 +44,7 @@ describeWithMockConnection('DebuggerModel', () => {
       setMockConnectionResponseHandler('DOM.enable', () => ({}));
       setMockConnectionResponseHandler('Overlay.enable', () => ({}));
       setMockConnectionResponseHandler('CSS.enable', () => ({}));
+      setMockConnectionResponseHandler('Animation.enable', () => ({}));
     });
 
     it('deactivates breakpoints on construction with inactive breakpoints', async () => {

package/front_end/core/sdk/EmulationModel.ts

@@ -19,6 +19,7 @@ export class EmulationModel extends SDKModel<void> {
   #cssModel: CSSModel|null;
   readonly #overlayModelInternal: OverlayModel|null;
   readonly #mediaConfiguration: Map<string, string>;
+  #cpuPressureEnabled: boolean;
   #touchEnabled: boolean;
   #touchMobile: boolean;
   #touchEmulationAllowed: boolean;
@@ -70,6 +71,24 @@ export class EmulationModel extends SDKModel<void> {
       await this.setIdleOverride(emulationParams);
     });
 
+    const cpuPressureDetectionSetting = Common.Settings.Settings.instance().moduleSetting('emulation.cpu-pressure');
+    cpuPressureDetectionSetting.addChangeListener(async () => {
+      const settingValue = cpuPressureDetectionSetting.get();
+
+      if (settingValue === 'none') {
+        await this.setPressureSourceOverrideEnabled(false);
+        this.#cpuPressureEnabled = false;
+        return;
+      }
+
+      if (!this.#cpuPressureEnabled) {
+        this.#cpuPressureEnabled = true;
+        await this.setPressureSourceOverrideEnabled(true);
+      }
+
+      await this.setPressureStateOverride(settingValue);
+    });
+
     const mediaTypeSetting = Common.Settings.Settings.instance().moduleSetting<string>('emulated-css-media');
     const mediaFeatureColorGamutSetting =
         Common.Settings.Settings.instance().moduleSetting<string>('emulated-css-media-feature-color-gamut');
@@ -179,6 +198,7 @@ export class EmulationModel extends SDKModel<void> {
       updateDisabledImageFormats();
     }
 
+    this.#cpuPressureEnabled = false;
     this.#touchEmulationAllowed = true;
     this.#touchEnabled = false;
     this.#touchMobile = false;
@@ -213,6 +233,18 @@ export class EmulationModel extends SDKModel<void> {
     return this.#overlayModelInternal;
   }
 
+  async setPressureSourceOverrideEnabled(enabled: boolean): Promise<void> {
+    await this.#emulationAgent.invoke_setPressureSourceOverrideEnabled(
+        {source: Protocol.Emulation.PressureSource.Cpu, enabled});
+  }
+
+  async setPressureStateOverride(pressureState: string): Promise<void> {
+    await this.#emulationAgent.invoke_setPressureStateOverride({
+      source: Protocol.Emulation.PressureSource.Cpu,
+      state: pressureState as Protocol.Emulation.PressureState,
+    });
+  }
+
   async emulateLocation(location: Location|null): Promise<void> {
     if (!location) {
       await Promise.all([

package/front_end/core/sdk/EnhancedTracesParser.test.ts

@@ -133,7 +133,7 @@ describe('EnhancedTracesParser', () => {
   });
 
   it('captures targets from target rundown events', async function() {
-    const data = enhancedTracesParser.data().data;
+    const data = enhancedTracesParser.data();
     const targets: RehydratingTarget[] = [];
     for (const target of data.keys()) {
       targets.push(target);
@@ -147,7 +147,7 @@ describe('EnhancedTracesParser', () => {
   });
 
   it('captures execution context info', async function() {
-    const data = enhancedTracesParser.data().data;
+    const data = enhancedTracesParser.data();
     let executionContexts: RehydratingExecutionContext[] = [];
     for (const target of data.keys()) {
       const contextsAndScripts = data.get(target);
@@ -170,7 +170,7 @@ describe('EnhancedTracesParser', () => {
   });
 
   it('captures script info and source text', async function() {
-    const data = enhancedTracesParser.data().data;
+    const data = enhancedTracesParser.data();
     let scripts: RehydratingScript[] = [];
     for (const target of data.keys()) {
       const contextsAndScripts = data.get(target);
@@ -193,7 +193,7 @@ describe('EnhancedTracesParser', () => {
   });
 
   it('grouped contexts and scripts under the right target', async function() {
-    const data = enhancedTracesParser.data().data;
+    const data = enhancedTracesParser.data();
     for (const target of data.keys()) {
       const contextsAndScripts = data.get(target);
       if (contextsAndScripts) {

package/front_end/core/sdk/EnhancedTracesParser.ts

@@ -6,7 +6,8 @@ import type * as Protocol from '../../generated/protocol.js';
 import {UserVisibleError} from '../platform/platform.js';
 
 import type {
-  EnhancedTracesData, RehydratingExecutionContext, RehydratingScript, RehydratingTarget} from './RehydratingObject.js';
+  HydratingDataPerTarget, RehydratingExecutionContext, RehydratingScript, RehydratingTarget} from
+  './RehydratingObject.js';
 
 interface RehydratingTraceBase {
   cat: string;
@@ -156,7 +157,7 @@ export class EnhancedTracesParser {
     }
   }
 
-  data(): EnhancedTracesData {
+  data(): HydratingDataPerTarget {
     // Put back execution context id
     const v8ContextToExecutionContextId: Map<string, Protocol.Runtime.ExecutionContextId> =
         new Map<string, Protocol.Runtime.ExecutionContextId>();
@@ -199,9 +200,7 @@ export class EnhancedTracesParser {
     for (const target of this.#targets) {
       data.set(target, this.groupContextsAndScriptsUnderTarget(target, this.#executionContexts, this.#scripts));
     }
-    return {
-      data,
-    };
+    return data;
   }
 
   private getScriptIsolateId(isolate: string, scriptId: Protocol.Runtime.ScriptId): string {

package/front_end/core/sdk/RehydratingConnection.test.ts

@@ -0,0 +1,190 @@
+// Copyright (c) 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Protocol from '../../generated/protocol.js';
+
+import * as Rehydrating from './RehydratingConnection.js';
+import type {
+  RehydratingExecutionContext, RehydratingScript, RehydratingTarget, ServerMessage} from './RehydratingObject.js';
+
+const mockTarget1: RehydratingTarget = {
+  targetId: 'ABCDE' as Protocol.Page.FrameId,
+  type: 'page',
+  isolate: '12345',
+  url: 'example.com',
+  pid: 12345,
+};
+
+const mockExecutionContext1: RehydratingExecutionContext = {
+  id: 1 as Protocol.Runtime.ExecutionContextId,
+  origin: 'example.com',
+  v8Context: 'example context 1',
+  auxData: {
+    frameId: 'ABCDE' as Protocol.Page.FrameId,
+    isDefault: true,
+    type: 'type',
+  },
+  isolate: '12345',
+};
+
+const mockExecutionContext2: RehydratingExecutionContext = {
+  id: 2 as Protocol.Runtime.ExecutionContextId,
+  origin: 'example.com',
+  v8Context: 'example context 2',
+  auxData: {
+    frameId: 'ABCDE' as Protocol.Page.FrameId,
+    isDefault: true,
+    type: 'type',
+  },
+  isolate: '12345',
+};
+
+const mockScript1: RehydratingScript = {
+  scriptId: '1' as Protocol.Runtime.ScriptId,
+  isolate: '12345',
+  executionContextId: 1 as Protocol.Runtime.ExecutionContextId,
+  startLine: 0,
+  startColumn: 0,
+  endLine: 1,
+  endColumn: 10,
+  hash: '',
+  isModule: false,
+  url: 'example.com',
+  hasSourceUrl: false,
+  sourceMapUrl: undefined,
+  length: 10,
+  sourceText: 'source text 1',
+  auxData: {
+    frameId: 'ABCDE' as Protocol.Page.FrameId,
+    isDefault: true,
+    type: 'type',
+  },
+};
+
+const mockScript2: RehydratingScript = {
+  scriptId: '2' as Protocol.Runtime.ScriptId,
+  isolate: '12345',
+  executionContextId: 2 as Protocol.Runtime.ExecutionContextId,
+  startLine: 0,
+  startColumn: 0,
+  endLine: 1,
+  endColumn: 10,
+  hash: '',
+  isModule: false,
+  url: 'example.com',
+  hasSourceUrl: false,
+  sourceMapUrl: undefined,
+  length: 10,
+  sourceText: 'source text 2',
+  auxData: {
+    frameId: 'ABCDE' as Protocol.Page.FrameId,
+    isDefault: true,
+    type: 'type',
+  },
+};
+
+describe('RehydratingSession', () => {
+  const sessionId = 1;
+  const messageId = 1;
+  const target = mockTarget1;
+  let mockRehydratingConnection: MockRehydratingConnection;
+  let mockRehydratingSession: Rehydrating.RehydratingSession;
+  const executionContextsForTarget1 = [mockExecutionContext1, mockExecutionContext2];
+  const scriptsForTarget1 = [mockScript1, mockScript2];
+
+  class MockRehydratingConnection implements Rehydrating.RehydratingConnectionInterface {
+    messageQueue: ServerMessage[] = [];
+
+    postToFrontend(arg: ServerMessage): void {
+      this.messageQueue.push(arg);
+    }
+
+    clearMessageQueue(): void {
+      this.messageQueue = [];
+    }
+  }
+
+  class RehydratingSessionForTest extends Rehydrating.RehydratingSession {
+    override sendMessageToFrontend(payload: ServerMessage): void {
+      this.connection?.postToFrontend(payload);
+    }
+  }
+
+  beforeEach(() => {
+    mockRehydratingConnection = new MockRehydratingConnection();
+    mockRehydratingSession = new RehydratingSessionForTest(
+        sessionId, target, executionContextsForTarget1, scriptsForTarget1, mockRehydratingConnection);
+  });
+
+  it('send attach to target on construction', async function() {
+    const attachToTargetMessage = mockRehydratingConnection.messageQueue[0];
+    assert.isNotNull(attachToTargetMessage);
+    assert.strictEqual(attachToTargetMessage.method, 'Target.attachedToTarget');
+    assert.strictEqual(
+        (attachToTargetMessage.params as Protocol.Target.AttachedToTargetEvent).sessionId.toString(),
+        sessionId.toString());
+    assert.strictEqual(
+        (attachToTargetMessage.params as Protocol.Target.AttachedToTargetEvent).targetInfo.targetId.toString(),
+        target.targetId.toString());
+  });
+
+  it('sends script parsed and debugger id while handling debugger enable', async function() {
+    mockRehydratingConnection.clearMessageQueue();
+    mockRehydratingSession.handleFrontendMessageAsFakeCDPAgent({
+      id: messageId,
+      method: 'Debugger.enable',
+      sessionId,
+    });
+    assert.strictEqual(mockRehydratingConnection.messageQueue.length, 3);
+    const scriptParsedMessages = mockRehydratingConnection.messageQueue.slice(0, 2);
+    const resultMessage = mockRehydratingConnection.messageQueue.slice(2);
+    for (const scriptParsedMessage of scriptParsedMessages) {
+      assert.strictEqual(scriptParsedMessage.method, 'Debugger.scriptParsed');
+      assert.strictEqual((scriptParsedMessage.params as RehydratingScript).isolate, target.isolate);
+    }
+    assert.isNotNull(resultMessage[0]);
+    assert.strictEqual(resultMessage[0].id, messageId);
+    assert.isNotNull((resultMessage[0].result as Protocol.Debugger.EnableResponse).debuggerId);
+  });
+
+  it('sends execution context created while handling runtime enable', async function() {
+    mockRehydratingConnection.clearMessageQueue();
+    mockRehydratingSession.handleFrontendMessageAsFakeCDPAgent({
+      id: messageId,
+      method: 'Runtime.enable',
+      sessionId,
+    });
+    assert.strictEqual(mockRehydratingConnection.messageQueue.length, 3);
+    const executionContextCreatedMessages = mockRehydratingConnection.messageQueue.slice(0, 2);
+    const resultMessage = mockRehydratingConnection.messageQueue.slice(2);
+    for (const executionContextCreatedMessage of executionContextCreatedMessages) {
+      assert.strictEqual(executionContextCreatedMessage.method, 'Runtime.executionContextCreated');
+      assert.strictEqual(
+          (executionContextCreatedMessage.params as Protocol.Runtime.ExecutionContextCreatedEvent)
+              .context.auxData.frameId,
+          target.targetId);
+    }
+    assert.isNotNull(resultMessage[0]);
+    assert.strictEqual(resultMessage[0].id, messageId);
+  });
+
+  it('sends script source text while handling get script source', async function() {
+    mockRehydratingConnection.clearMessageQueue();
+    mockRehydratingSession.handleFrontendMessageAsFakeCDPAgent({
+      id: messageId,
+      method: 'Debugger.getScriptSource',
+      sessionId,
+      params: {
+        scriptId: mockScript1.scriptId,
+      },
+    });
+    assert.strictEqual(mockRehydratingConnection.messageQueue.length, 1);
+    const scriptSourceTextMessage = mockRehydratingConnection.messageQueue[0];
+    assert.isNotNull(scriptSourceTextMessage);
+    assert.strictEqual(scriptSourceTextMessage.id, messageId);
+    assert.strictEqual(
+        (scriptSourceTextMessage.result as Protocol.Debugger.GetScriptSourceResponse).scriptSource,
+        mockScript1.sourceText);
+  });
+});