chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/core/i18n/time-utilities.test.ts

@@ -14,12 +14,30 @@ describeWithLocale('preciseMillisToString', () => {
     assert.strictEqual(outputString, '8\xA0ms');
   });
 
-  it('formats without a given precision', () => {
+  it('formats big number without a given precision', () => {
+    const inputNumber = 723123;
+    const outputString = i18n.TimeUtilities.preciseMillisToString(inputNumber);
+    assert.strictEqual(outputString, '723,123\xA0ms');
+  });
+
+  it('formats with a given precision', () => {
     const inputNumber = 7.84;
     const precision = 2;
     const outputString = i18n.TimeUtilities.preciseMillisToString(inputNumber, precision);
     assert.strictEqual(outputString, '7.84\xA0ms');
   });
+
+  it('formats with a given precision, rounding as expected', () => {
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(5.55555, 2), '5.56\xA0ms');
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(-5.55555, 2), '-5.56\xA0ms');
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(5.555, 2), '5.56\xA0ms');
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(-5.55, 2), '-5.55\xA0ms');  // ties break towards zero!
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(9.99999, 1), '10.0\xA0ms');
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(9.95, 1), '10.0\xA0ms');
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(9.94, 1), '9.9\xA0ms');
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(1.001, 1), '1.0\xA0ms');
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(1.001, 0), '1\xA0ms');
+  });
 });
 
 describeWithLocale('formatMicroSecondsTime', () => {
@@ -121,7 +139,7 @@ describeWithLocale('millisToString', () => {
   it('formats less than 24 hours', () => {
     const inputNumber = 20000000;
     const outputString = i18n.TimeUtilities.millisToString(inputNumber);
-    assert.strictEqual(outputString, '5.6\xA0hrs');
+    assert.strictEqual(outputString, '5.6\xA0hr');
   });
 
   it('formats days', () => {

package/front_end/core/i18n/time-utilities.ts

@@ -2,128 +2,167 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * @fileoverview Uses Intl.NumberFormat.
+ * @see go/cpq:i18n-units-design
+ */
+
 import * as Platform from '../platform/platform.js';
 
-import {getLocalizedString, registerUIStrings} from './i18nImpl.js';
-
-const UIStrings = {
-  /**
-   *@description μs is the short form of micro-seconds and the placeholder is a number
-   * The shortest form or abbreviation of micro-seconds should be used, as there is
-   * limited room in this UI.
-   *@example {2} PH1
-   */
-  fmms: '{PH1} μs',
-  /**
-   *@description ms is the short form of milli-seconds and the placeholder is a decimal number
-   * The shortest form or abbreviation of milli-seconds should be used, as there is
-   * limited room in this UI.
-   *@example {2.14} PH1
-   */
-  fms: '{PH1} ms',
-  /**
-   *@description s is short for seconds and the placeholder is a decimal number
-   * The shortest form or abbreviation of seconds should be used, as there is
-   * limited room in this UI.
-   *@example {2.14} PH1
-   */
-  fs: '{PH1} s',
-  /**
-   *@description min is short for minutes and the placeholder is a decimal number
-   *@example {2.2} PH1
-   */
-  fmin: '{PH1} min',
-  /**
-   *@description hrs is short for hours and the placeholder is a decimal number
-   *@example {2.2} PH1
-   */
-  fhrs: '{PH1} hrs',
-  /**
-   *@description days formatting and the placeholder is a decimal number
-   *@example {2.2} PH1
-   */
-  fdays: '{PH1} days',
-
-  /**
-   *@description describes a number of milliseconds (the unit should not abbreviated)
-   *@example {2.14} PH1
-   */
-  fmsExpanded: '{PH1} milliseconds',
-};
-
-const str_ = registerUIStrings('core/i18n/time-utilities.ts', UIStrings);
-const i18nString = getLocalizedString.bind(undefined, str_);
-
-export const preciseMillisToString = function(ms: number, precision?: number): string {
-  precision = precision || 0;
-  return i18nString(UIStrings.fms, {PH1: ms.toFixed(precision)});
-};
-
-export function formatMicroSecondsTime(
-    time: Platform.Timing.MicroSeconds,
-    ): string {
+import {defineFormatter, type NumberFormatter} from './NumberFormatter.js';
+
+const narrowMillisecondsInteger = defineFormatter({
+  style: 'unit',
+  unit: 'millisecond',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const longMilliseconds = defineFormatter({
+  style: 'unit',
+  unit: 'millisecond',
+  unitDisplay: 'long',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const narrowMicrosecondsInteger = defineFormatter({
+  style: 'unit',
+  unit: 'microsecond',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const narrowMillisecondsDecimal = defineFormatter({
+  style: 'unit',
+  unit: 'millisecond',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+const narrowSecondsDecimal = defineFormatter({
+  style: 'unit',
+  unit: 'second',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+const shortMinutesDecimal = defineFormatter({
+  style: 'unit',
+  unit: 'minute',
+  unitDisplay: 'short',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const shortHoursDecimal = defineFormatter({
+  style: 'unit',
+  unit: 'hour',
+  unitDisplay: 'short',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const longDaysDecimal = defineFormatter({
+  style: 'unit',
+  unit: 'day',
+  unitDisplay: 'long',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+export function formatMicroSecondsTime(time: Platform.Timing.MicroSeconds): string {
   return millisToString(Platform.Timing.microSecondsToMilliSeconds(time), true);
 }
 
-export function formatMicroSecondsAsMillisFixed(time: Platform.Timing.MicroSeconds, fractionDigits = 0): string {
-  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(
-      time,
-  );
-  return i18nString(UIStrings.fms, {PH1: milliseconds.toFixed(fractionDigits)});
-}
-export function formatMicroSecondsAsMillisFixedExpanded(
-    time: Platform.Timing.MicroSeconds, fractionDigits = 0): string {
-  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(
-      time,
-  );
-  return i18nString(UIStrings.fmsExpanded, {PH1: milliseconds.toFixed(fractionDigits)});
+export function formatMicroSecondsAsSeconds(time: Platform.Timing.MicroSeconds): string {
+  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(time);
+  const seconds = Platform.Timing.milliSecondsToSeconds(milliseconds);
+  return narrowSecondsDecimal.format(seconds);
 }
 
-export function formatMicroSecondsAsSeconds(time: Platform.Timing.MicroSeconds): string {
-  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(
-      time,
-  );
+export function formatPartsMicroSecondsAsSeconds(time: Platform.Timing.MicroSeconds): Intl.NumberFormatPart[] {
+  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(time);
   const seconds = Platform.Timing.milliSecondsToSeconds(milliseconds);
-  return i18nString(UIStrings.fs, {PH1: (seconds).toFixed(2)});
+  return narrowSecondsDecimal.formatToParts(seconds);
+}
+
+export function formatMicroSecondsAsMillisFixed(time: Platform.Timing.MicroSeconds): string {
+  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(time);
+  return narrowMillisecondsInteger.format(milliseconds);
+}
+
+export function formatPartsMicroSecondsAsMillisFixed(time: Platform.Timing.MicroSeconds): Intl.NumberFormatPart[] {
+  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(time);
+  return narrowMillisecondsInteger.formatToParts(milliseconds);
+}
+
+export function formatMicroSecondsAsMillisFixedExpanded(time: Platform.Timing.MicroSeconds): string {
+  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(time);
+  return longMilliseconds.format(milliseconds);
 }
 
-export const millisToString = function(ms: number, higherResolution?: boolean): string {
+/**
+ * @param higherResolution if true, the output may show as microsends or as milliseconds with a fractional component
+ */
+export function millisToString(ms: number, higherResolution?: boolean): string {
   if (!isFinite(ms)) {
     return '-';
   }
 
   if (higherResolution && ms < 0.1) {
-    return i18nString(UIStrings.fmms, {PH1: (ms * 1000).toFixed(0)});
+    return narrowMicrosecondsInteger.format(ms * 1000);
   }
   if (higherResolution && ms < 1000) {
-    return i18nString(UIStrings.fms, {PH1: (ms).toFixed(2)});
+    return narrowMillisecondsDecimal.format(ms);
   }
   if (ms < 1000) {
-    return i18nString(UIStrings.fms, {PH1: (ms).toFixed(0)});
+    return narrowMillisecondsInteger.format(ms);
   }
 
   const seconds = ms / 1000;
   if (seconds < 60) {
-    return i18nString(UIStrings.fs, {PH1: (seconds).toFixed(2)});
+    return narrowSecondsDecimal.format(seconds);
   }
 
   const minutes = seconds / 60;
   if (minutes < 60) {
-    return i18nString(UIStrings.fmin, {PH1: (minutes).toFixed(1)});
+    return shortMinutesDecimal.format(minutes);
   }
 
   const hours = minutes / 60;
   if (hours < 24) {
-    return i18nString(UIStrings.fhrs, {PH1: (hours).toFixed(1)});
+    return shortHoursDecimal.format(hours);
   }
 
   const days = hours / 24;
-  return i18nString(UIStrings.fdays, {PH1: (days).toFixed(1)});
-};
+  return longDaysDecimal.format(days);
+}
 
-export const secondsToString = function(seconds: number, higherResolution?: boolean): string {
+const preciseMillisToStringFormattersCache = new Map<number, NumberFormatter>();
+
+export function preciseMillisToString(ms: number, precision = 0): string {
+  let formatter = preciseMillisToStringFormattersCache.get(precision);
+  if (!formatter) {
+    formatter = defineFormatter({
+      style: 'unit',
+      unit: 'millisecond',
+      unitDisplay: 'narrow',
+      minimumFractionDigits: precision,
+      maximumFractionDigits: precision,
+    });
+    preciseMillisToStringFormattersCache.set(precision, formatter);
+  }
+  return formatter.format(ms);
+}
+
+export function secondsToString(seconds: number, higherResolution?: boolean): string {
   if (!isFinite(seconds)) {
     return '-';
   }
   return millisToString(seconds * 1000, higherResolution);
-};
+}

package/front_end/core/platform/NumberUtilities.test.ts

@@ -2,9 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
+
 import * as Platform from './platform.js';
 
-describe('NumberUtilities', () => {
+describeWithLocale('NumberUtilities', () => {
   describe('clamp', () => {
     it('takes the lower bound if the number is smaller', () => {
       assert.strictEqual(5, Platform.NumberUtilities.clamp(1, 5, 10));
@@ -26,31 +28,6 @@ describe('NumberUtilities', () => {
     });
   });
 
-  describe('bytesToString', () => {
-    it('formats for < 1000 bytes', () => {
-      assert.deepEqual(Platform.NumberUtilities.bytesToString(50), '50\xA0B');
-    });
-
-    it('formats for < 100 kilobytes', () => {
-      assert.deepEqual(Platform.NumberUtilities.bytesToString(5 * 1000), '5.0\xA0kB');
-    });
-
-    it('formats for < 1000 kilobytes', () => {
-      assert.deepEqual(Platform.NumberUtilities.bytesToString(500 * 1000), '500\xA0kB');
-    });
-
-    it('formats for < 100 megabytes', () => {
-      const oneAndAHalfMegabytes = 1500 * 1000;
-      assert.deepEqual(Platform.NumberUtilities.bytesToString(oneAndAHalfMegabytes), '1.5\xA0MB');
-    });
-
-    it('formats for > 100 megabytes', () => {
-      const oneMegabyte = 1000 * 1000;
-      const twoHundredAndTenMegabytes = oneMegabyte * 210;
-      assert.deepEqual(Platform.NumberUtilities.bytesToString(twoHundredAndTenMegabytes), '210\xA0MB');
-    });
-  });
-
   describe('toFixedIfFloating', () => {
     it('converts a decimal to a fixed string with 3 decimal places', () => {
       const output = Platform.NumberUtilities.toFixedIfFloating('1.23456');

package/front_end/core/platform/NumberUtilities.ts

@@ -16,26 +16,6 @@ export const mod = (m: number, n: number): number => {
   return ((m % n) + n) % n;
 };
 
-export const bytesToString = (bytes: number): string => {
-  if (bytes < 1000) {
-    return `${bytes.toFixed(0)}\xA0B`;
-  }
-
-  const kilobytes = bytes / 1000;
-  if (kilobytes < 100) {
-    return `${kilobytes.toFixed(1)}\xA0kB`;
-  }
-  if (kilobytes < 1000) {
-    return `${kilobytes.toFixed(0)}\xA0kB`;
-  }
-
-  const megabytes = kilobytes / 1000;
-  if (megabytes < 100) {
-    return `${megabytes.toFixed(1)}\xA0MB`;
-  }
-  return `${megabytes.toFixed(0)}\xA0MB`;
-};
-
 export const toFixedIfFloating = (value: string): string => {
   if (!value || Number.isNaN(Number(value))) {
     return value;

package/front_end/core/root/Runtime.ts

@@ -299,7 +299,6 @@ export const enum ExperimentName {
   TIMELINE_OBSERVATIONS = 'timeline-observations',
   TIMELINE_ENHANCED_TRACES = 'timeline-enhanced-traces',
   TIMELINE_SERVER_TIMINGS = 'timeline-server-timings',
-  EXTENSION_STORAGE_VIEWER = 'extension-storage-viewer',
   FLOATING_ENTRY_POINTS_FOR_AI_ASSISTANCE = 'floating-entry-points-for-ai-assistance',
   TIMELINE_EXPERIMENTAL_INSIGHTS = 'timeline-experimental-insights',
   TIMELINE_DIM_UNRELATED_EVENTS = 'timeline-dim-unrelated-events',
@@ -365,6 +364,11 @@ export interface HostConfigPrivacyUI {
   enabled: boolean;
 }
 
+export interface HostConfigEnableOriginBoundCookies {
+  portBindingEnabled: boolean;
+  schemeBindingEnabled: boolean;
+}
+
 // We use `RecursivePartial` here to enforce that DevTools code is able to
 // handle `HostConfig` objects of an unexpected shape. This can happen if
 // the implementation in the Chromium backend is changed without correctly
@@ -376,11 +380,8 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   aidaAvailability: AidaAvailability,
   devToolsConsoleInsights: HostConfigConsoleInsights,
   devToolsFreestyler: HostConfigFreestyler,
-  devToolsExplainThisResourceDogfood: HostConfigAiAssistanceNetworkAgent,
   devToolsAiAssistanceNetworkAgent: HostConfigAiAssistanceNetworkAgent,
-  devToolsAiAssistancePerformanceAgentDogfood: HostConfigAiAssistancePerformanceAgent,
   devToolsAiAssistanceFileAgent: HostConfigAiAssistanceFileAgent,
-  devToolsAiAssistanceFileAgentDogfood: HostConfigAiAssistanceFileAgent,
   devToolsAiAssistancePerformanceAgent: HostConfigAiAssistancePerformanceAgent,
   devToolsVeLogging: HostConfigVeLogging,
   devToolsPrivacyUI: HostConfigPrivacyUI,
@@ -389,6 +390,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
    * or guest mode, rather than a "normal" profile.
    */
   isOffTheRecord: boolean,
+  devToolsEnableOriginBoundCookies: HostConfigEnableOriginBoundCookies,
 }>;
 
 /**

package/front_end/core/sdk/CPUThrottlingManager.ts

@@ -35,6 +35,10 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
   }
 
   setCPUThrottlingRate(rate: number): void {
+    if (rate === this.#cpuThrottlingRateInternal) {
+      return;
+    }
+
     this.#cpuThrottlingRateInternal = rate;
     for (const emulationModel of TargetManager.instance().models(EmulationModel)) {
       void emulationModel.setCPUThrottlingRate(this.#cpuThrottlingRateInternal);

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

@@ -4,29 +4,23 @@
 
 import * as SDK from './sdk.js';
 
-const {getPhysicalAxisFromQueryAxis, getQueryAxis, PhysicalAxis, QueryAxis} = SDK.CSSContainerQuery;
+const {getPhysicalAxisFromQueryAxis, getQueryAxisFromContainerType, PhysicalAxis, QueryAxis} = SDK.CSSContainerQuery;
 
 describe('CSSContainerQuery', () => {
-  describe('getQueryAxis', () => {
-    it('gets the query axis of no containment correctly', () => {
-      assert.strictEqual(getQueryAxis(''), QueryAxis.NONE);
-      assert.strictEqual(getQueryAxis('style layout'), QueryAxis.NONE);
+  describe('getQueryAxisFromContainerType', () => {
+    it('gets the query axis of no container-type correctly', () => {
+      assert.strictEqual(getQueryAxisFromContainerType(''), QueryAxis.NONE);
+      assert.strictEqual(getQueryAxisFromContainerType('normal'), QueryAxis.NONE);
     });
 
     it('gets the query axis of an inline container query correctly', () => {
-      assert.strictEqual(getQueryAxis('inline-size layout style'), QueryAxis.INLINE);
-      assert.strictEqual(getQueryAxis('layout inline-size style inline-size'), QueryAxis.INLINE);
+      assert.strictEqual(getQueryAxisFromContainerType('inline-size'), QueryAxis.INLINE);
+      assert.strictEqual(getQueryAxisFromContainerType('scroll-state inline-size'), QueryAxis.INLINE);
     });
 
-    it('gets the query axis of a block container query correctly', () => {
-      assert.strictEqual(getQueryAxis('block-size layout style'), QueryAxis.BLOCK);
-      assert.strictEqual(getQueryAxis('layout block-size style block-size'), QueryAxis.BLOCK);
-    });
-
-    it('gets the query axis of inline-block container query correctly', () => {
-      assert.strictEqual(getQueryAxis('inline-size layout style block-size'), QueryAxis.BOTH);
-      assert.strictEqual(getQueryAxis('layout size style'), QueryAxis.BOTH);
-      assert.strictEqual(getQueryAxis('size'), QueryAxis.BOTH);
+    it('gets the query axis of size container query correctly', () => {
+      assert.strictEqual(getQueryAxisFromContainerType('size'), QueryAxis.BOTH);
+      assert.strictEqual(getQueryAxisFromContainerType('scroll-state size'), QueryAxis.BOTH);
     });
   });
 

package/front_end/core/sdk/CSSContainerQuery.ts

@@ -62,14 +62,12 @@ export class CSSContainerQueryContainer {
       return;
     }
     const containerType = styles.get('container-type');
-    const contain = styles.get('contain');
     const writingMode = styles.get('writing-mode');
-    if (!containerType || !contain || !writingMode) {
+    if (!containerType || !writingMode) {
       return;
     }
 
-    // The final queried axes are the union of both properties.
-    const queryAxis = getQueryAxis(`${containerType} ${contain}`);
+    const queryAxis = getQueryAxisFromContainerType(`${containerType}`);
     const physicalAxis = getPhysicalAxisFromQueryAxis(queryAxis, writingMode);
     let width, height;
     if (physicalAxis === PhysicalAxis.BOTH || physicalAxis === PhysicalAxis.HORIZONTAL) {
@@ -88,28 +86,18 @@ export class CSSContainerQueryContainer {
   }
 }
 
-export const getQueryAxis = (propertyValue: string): QueryAxis => {
+export const getQueryAxisFromContainerType = (propertyValue: string): QueryAxis => {
   const segments = propertyValue.split(' ');
   let isInline = false;
-  let isBlock = false;
   for (const segment of segments) {
     if (segment === 'size') {
       return QueryAxis.BOTH;
     }
     isInline = isInline || segment === 'inline-size';
-    isBlock = isBlock || segment === 'block-size';
-  }
-
-  if (isInline && isBlock) {
-    return QueryAxis.BOTH;
   }
   if (isInline) {
     return QueryAxis.INLINE;
   }
-  if (isBlock) {
-    return QueryAxis.BLOCK;
-  }
-
   return QueryAxis.NONE;
 };
 

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

@@ -67,6 +67,8 @@ describe('CSSMatchedStyles', () => {
                 {name: '--baz', value: 'active-baz !important', important: true},
                 {name: '--baz', value: 'passive-baz'},
                 {name: '--dark', value: 'darkgrey'},
+                {name: '--empty', value: ''},
+                {name: '--empty2', value: 'var(--empty)'},
                 {name: '--light', value: 'lightgrey'},
                 {name: '--theme', value: 'var(--dark)'},
                 {name: '--shadow', value: '1px var(--theme)'},
@@ -110,6 +112,8 @@ describe('CSSMatchedStyles', () => {
       await testCssValueEquals('--shadow', '1px darkgrey');
       await testCssValueEquals('--width', '1px');
       await testCssValueEquals('--diamond', 'active-foo active-foo');
+      await testCssValueEquals('--empty', '');
+      await testCssValueEquals('--empty2', '');
     });
 
     it('correctly resolves the declaration', async () => {

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -1123,8 +1123,8 @@ class DOMInheritanceCascade {
           // The SCC record for the referenced variable may not exist if the var was already computed in a previous
           // iteration. That means it's in a different SCC.
           newChildRecord && record.updateRoot(newChildRecord);
-          if (cssVariableValue?.value) {
-            return cssVariableValue?.value;
+          if (cssVariableValue?.value !== undefined) {
+            return cssVariableValue.value;
           }
 
           // Variable reference is not resolved, use the fallback.
@@ -1136,7 +1136,7 @@ class DOMInheritanceCascade {
         })]);
 
     const decl = PropertyParser.ASTUtils.siblings(PropertyParser.ASTUtils.declValue(matching.ast.tree));
-    const computedText = matching.getComputedTextRange(decl[0], decl[decl.length - 1]);
+    const computedText = decl.length > 0 ? matching.getComputedTextRange(decl[0], decl[decl.length - 1]) : '';
 
     if (record.isRootEntry) {
       // Variables are kept on the stack until all descendents in the same SCC have been visited. That's the case when
@@ -1144,13 +1144,13 @@ class DOMInheritanceCascade {
       const scc = sccRecord.finishSCC(record);
       if (scc.length > 1) {
         for (const entry of scc) {
-          console.assert(entry.nodeCascade !== nodeCascade, 'Circles should be within the cascade');
+          console.assert(entry.nodeCascade === nodeCascade, 'Circles should be within the cascade');
           computedCSSVariables.set(entry.name, null);
         }
         return null;
       }
     }
-    if (matching.hasUnresolvedVarsRange(decl[0], decl[decl.length - 1])) {
+    if (decl.length > 0 && matching.hasUnresolvedVarsRange(decl[0], decl[decl.length - 1])) {
       computedCSSVariables.set(variableName, null);
       return null;
     }

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;
   }