chrome-devtools-frontend 1.0.1652307 → 1.0.1656291

package/.agents/skills/ui-eng-vision-widget-promoter/SKILL.md

@@ -0,0 +1,75 @@
+---
+name: ui-eng-vision-widget-promoter
+description: Promotes legacy views to modern UI.Widget classes, hooks up performUpdate() rendering, and exports default views.
+allowed-tools: code_search open_urls
+---
+
+# Subskill: Widget Promoter (Pass 3)
+
+This subskill completes the architectural transition, upgrading the component
+from legacy base classes (like `SimpleView` or custom wrapper layouts) into
+clean `UI.Widget` classes that use native update rendering delegates.
+
+--------------------------------------------------------------------------------
+
+## 1. Widget Promotion Guidelines
+
+1.  **Change Class Inheritance**:
+
+    *   Rewrite class declarations to extend `UI.Widget` (or specialized
+        sub-layouts like `UI.Widget.VBox`).
+    *   Clean up and remove older constructors that perform custom container
+        initializations or access `.element` directly for manual append
+        operations.
+
+2.  **Upgrade View Delegates & Inject View**:
+
+    *   Migrate the local Lit template strings into a formally exported default
+        view layout:
+
+        ```typescript
+        export const DEFAULT_VIEW: View = (input, output, target) => {
+          Lit.render(html`...`, target);
+        };
+        ```
+
+    *   Make the view injectable in the constructor for testability (as per `docs/ui_engineering.md`):
+
+        ```typescript
+        class MyWidget extends UI.Widget.VBox {
+          #view: View;
+          constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+            super(true, element);
+            this.#view = view;
+          }
+        ```
+
+    *   Implement the standard modern `performUpdate()` override on the widget:
+
+        ```typescript
+        override performUpdate(): void {
+          this.#view(this.viewInput, this.viewOutput, this.contentElement);
+        }
+        ```
+
+3.  **Clean Up Legacy Wrappers**:
+
+    *   Remove any `LegacyWrapper` bindings or custom wrappable custom elements.
+    *   Replace old panel instantiations with standard `<devtools-widget>`
+        declarative entries:
+
+        ```typescript
+        html`<devtools-widget .widgetConfig=${widgetConfig(MyWidgetClass, [params])}></devtools-widget>`
+        ```
+
+    *   Inspect instantiator files (e.g., `ApplicationPanelSidebar.ts`) and
+        decouple any direct accesses to `.element`.
+
+--------------------------------------------------------------------------------
+
+## 2. Safety & Verification Rules
+
+*   **CRITICAL**: Never update screenshot goldens without explicit consent of the user. Most likely the failure points to an issue in the implementation or (less likely) the test itself. Look at the screenshot diffs to debug.
+*   **Minimal Code Movement**: When migrating, try to move code around as little as possible, in particular around the lit rendering helpers. This minimizes the git diff and improves reviewability.
+
+--------------------------------------------------------------------------------

package/AUTHORS

@@ -49,6 +49,7 @@ Gautham Banasandra <gautham.bangalore@gmail.com>
 Han Xu <suyanhanx@gmail.com>
 Helmut Januschka <helmut@januschka.com>
 Henry Lim <henry@limhenry.xyz>
+Hojeong Park <parkhj062@gmail.com>
 Jacky Hu <flameddd@gmail.com>
 Jake Mulhern <mulherje@gmail.com>
 Jan Keitel <jan.keitel@gmail.com>

package/config/owner/COMMON_OWNERS

@@ -2,19 +2,15 @@ file://config/owner/ENG_REVIEW_OWNERS
 
 alexrudenko@chromium.org
 alinavarkki@chromium.org
-andoli@chromium.org
 bmeurer@chromium.org
-changhaohan@chromium.org
 cjamcl@chromium.org
 dsv@chromium.org
-ergunsh@chromium.org
 finnur@chromium.org
 jacktfranklin@chromium.org
 kimanh@chromium.org
 kprokopenko@chromium.org
 leese@chromium.org
 mathias@chromium.org
-nancyly@chromium.org
 nharshunova@chromium.org
 nroscino@chromium.org
 nvitkov@chromium.org

package/docs/get_the_code.md

@@ -56,8 +56,7 @@ out of bundling by setting `devtools_bundle` to `false`
 gn gen out/fast-build --args="devtools_skip_typecheck=true devtools_bundle=false"
 ```
 
-and use `npm run build -- -t fast-build` to build this target (you can of course
-also just change the `Default` target to skip bundling and type checking).
+and use `npm run build -- -t fast-build` to build this target.
 
 ### Rebuilding automatically
 

package/docs/playbook.md

@@ -36,7 +36,7 @@ For certain topics, there are dedicated points of contact (PoCs) within the DevT
 | Topic                                 | PoC             |
 | ------------------------------------- | --------------- |
 | Web Compass, Interop, and Baseline    | pfaffe@chromium.org         |
-| UI Capabilities                       | changhaohan@chromium.org    |
+| UI Capabilities                       | pfaffe@chromium.org    |
 | Performance                           | paulirish@chromium.org      |
 | JavaScript                            | szuend@chromium.org         |
 | WebAssembly                           | pfaffe@chromium.org         |

package/docs/ui_engineering.md

@@ -209,7 +209,9 @@ assert.deepStrictEqual((await viewCall).headersForSourceURL, [{...}]);
 
 // ❌ not recommended: mocking CDP responses to make the models behave in a certain way
 // while testing a presenter is fragile.
-setMockConnectionResponseHandler('CSS.getHeaders', () => ({}));
+const connection = new MockCDPConnection();
+connection.setSuccessHandler('CSS.getHeaders', () => ({}));
+createTarget({connection});
 const presenter = new Presenter();
 presenter.doSomething();
 ```

package/eslint.config.mjs

@@ -775,11 +775,6 @@ export default defineConfig([
 
     settings: {
       'mocha/additionalCustomNames': [
-        {
-          name: 'describeWithDevtoolsExtension',
-          type: 'suite',
-          interfaces: ['BDD', 'TDD'],
-        },
         {
           name: 'describeWithEnvironment',
           type: 'suite',

package/front_end/Tests.js

@@ -958,6 +958,7 @@
         ...Main.Main.instanceForTest.createSettingsStorage(prefs),
         settingRegistrations: Common.SettingRegistration.getRegisteredSettings(),
         runSettingsMigration: false,
+        console: Common.Console.Console.instance(),
       });
 
       const localSetting = Common.Settings.Settings.instance().createLocalSetting('local', undefined);

package/front_end/core/common/Settings.ts

@@ -5,7 +5,7 @@
 import * as Platform from '../platform/platform.js';
 import * as Root from '../root/root.js';
 
-import {Console} from './Console.js';
+import type {Console} from './Console.js';
 import type {EventDescriptor, EventTargetEvent, GenericEvents} from './EventTarget.js';
 import {ObjectWrapper} from './Object.js';
 import {
@@ -30,6 +30,7 @@ export interface SettingsCreationOptions {
   settingRegistrations: SettingRegistration[];
   logSettingAccess?: (name: string, value: number|string|boolean) => Promise<void>;
   runSettingsMigration?: boolean;
+  console: Console;
 }
 
 export class Settings {
@@ -45,10 +46,18 @@ export class Settings {
   #registry = new Map<string, Setting<unknown>>();
   readonly moduleSettings = new Map<string, Setting<unknown>>();
   #logSettingAccess?: (name: string, value: number|string|boolean) => Promise<void>;
-
-  constructor(
-      {syncedStorage, globalStorage, localStorage, settingRegistrations, logSettingAccess, runSettingsMigration}:
-          SettingsCreationOptions) {
+  readonly #console: Console;
+
+  constructor({
+    syncedStorage,
+    globalStorage,
+    localStorage,
+    settingRegistrations,
+    logSettingAccess,
+    runSettingsMigration,
+    console
+  }: SettingsCreationOptions) {
+    this.#console = console;
     this.syncedStorage = syncedStorage;
     this.globalStorage = globalStorage;
     this.localStorage = localStorage;
@@ -93,10 +102,17 @@ export class Settings {
     globalStorage: SettingsStorage|null,
     localStorage: SettingsStorage|null,
     settingRegistrations: SettingRegistration[]|null,
+    console: Console|null,
     logSettingAccess?: (name: string, value: number|string|boolean) => Promise<void>,
     runSettingsMigration?: boolean,
-  } = {forceNew: null, syncedStorage: null, globalStorage: null, localStorage: null, settingRegistrations: null}):
-      Settings {
+  } = {
+    forceNew: null,
+    syncedStorage: null,
+    globalStorage: null,
+    localStorage: null,
+    settingRegistrations: null,
+    console: null
+  }): Settings {
     const {
       forceNew,
       syncedStorage,
@@ -104,10 +120,11 @@ export class Settings {
       localStorage,
       settingRegistrations,
       logSettingAccess,
-      runSettingsMigration
+      runSettingsMigration,
+      console,
     } = opts;
     if (!Root.DevToolsContext.globalInstance().has(Settings) || forceNew) {
-      if (!syncedStorage || !globalStorage || !localStorage || !settingRegistrations) {
+      if (!syncedStorage || !globalStorage || !localStorage || !settingRegistrations || !console) {
         throw new Error(`Unable to create settings: global and local storage must be provided: ${new Error().stack}`);
       }
 
@@ -117,7 +134,8 @@ export class Settings {
                                                   localStorage,
                                                   settingRegistrations,
                                                   logSettingAccess,
-                                                  runSettingsMigration
+                                                  runSettingsMigration,
+                                                  console,
                                                 }));
     }
 
@@ -195,7 +213,7 @@ export class Settings {
     const storage = this.storageFromType(storageType);
     let setting = this.#registry.get(key) as Setting<T>;
     if (!setting) {
-      setting = new Setting(key, defaultValue, this.#eventSupport, storage, this.#logSettingAccess);
+      setting = new Setting(key, defaultValue, this.#eventSupport, storage, this.#console, this.#logSettingAccess);
       this.#registry.set(key, setting);
     }
     return setting;
@@ -208,11 +226,9 @@ export class Settings {
   createRegExpSetting(key: string, defaultValue: string, regexFlags?: string, storageType?: SettingStorageType):
       RegExpSetting {
     if (!this.#registry.get(key)) {
-      this.#registry.set(
-          key,
-          new RegExpSetting(
-              key, defaultValue, this.#eventSupport, this.storageFromType(storageType), regexFlags,
-              this.#logSettingAccess));
+      this.#registry.set(key,
+                         new RegExpSetting(key, defaultValue, this.#eventSupport, this.storageFromType(storageType),
+                                           this.#console, regexFlags, this.#logSettingAccess));
     }
     return this.#registry.get(key) as RegExpSetting;
   }
@@ -324,8 +340,8 @@ export class SettingsStorage {
     return Object.keys(this.object);
   }
 
-  dumpSizes(): void {
-    Console.instance().log('Ten largest settings: ');
+  dumpSizes(commonConsole: Console): void {
+    commonConsole.log('Ten largest settings: ');
     // @ts-expect-error __proto__ optimization
     const sizes: Record<string, number> = {__proto__: null};
     for (const key in this.object) {
@@ -340,7 +356,7 @@ export class SettingsStorage {
     keys.sort(comparator);
 
     for (let i = 0; i < 10 && i < keys.length; ++i) {
-      Console.instance().log('Setting: \'' + keys[i] + '\', size: ' + sizes[keys[i]]);
+      commonConsole.log('Setting: \'' + keys[i] + '\', size: ' + sizes[keys[i]]);
     }
   }
 }
@@ -375,12 +391,13 @@ export class Setting<V> {
   #deprecation: Deprecation|null = null;
   #loggedInitialAccess = false;
   #logSettingAccess?: (name: string, value: number|string|boolean) => Promise<void>;
+  readonly #console: Console;
 
-  constructor(
-      readonly name: string, readonly defaultValue: V, private readonly eventSupport: ObjectWrapper<GenericEvents>,
-      readonly storage: SettingsStorage,
-      logSettingAccess?: (name: string, value: number|string|boolean) => Promise<void>) {
+  constructor(readonly name: string, readonly defaultValue: V,
+              private readonly eventSupport: ObjectWrapper<GenericEvents>, readonly storage: SettingsStorage,
+              console: Console, logSettingAccess?: (name: string, value: number|string|boolean) => Promise<void>) {
     storage.register(this.name);
+    this.#console = console;
     this.#logSettingAccess = logSettingAccess;
   }
 
@@ -532,7 +549,7 @@ export class Setting<V> {
         this.printSettingsSavingError(e.message, settingString);
       }
     } catch (e) {
-      Console.instance().error('Cannot stringify setting with name: ' + this.name + ', error: ' + e.message);
+      this.#console.error('Cannot stringify setting with name: ' + this.name + ', error: ' + e.message);
     }
     this.eventSupport.dispatchEventToListeners(this.name, value);
   }
@@ -623,8 +640,8 @@ export class Setting<V> {
     const errorMessage =
         'Error saving setting with name: ' + this.name + ', value length: ' + value.length + '. Error: ' + message;
     console.error(errorMessage);
-    Console.instance().error(errorMessage);
-    this.storage.dumpSizes();
+    this.#console.error(errorMessage);
+    this.storage.dumpSizes(this.#console);
   }
 }
 
@@ -633,10 +650,10 @@ export class RegExpSetting extends Setting<any> {
   #regexFlags?: string;
   #regex?: RegExp|null;
 
-  constructor(
-      name: string, defaultValue: string, eventSupport: ObjectWrapper<GenericEvents>, storage: SettingsStorage,
-      regexFlags?: string, logSettingAccess?: (name: string, value: number|string|boolean) => Promise<void>) {
-    super(name, defaultValue ? [{pattern: defaultValue}] : [], eventSupport, storage, logSettingAccess);
+  constructor(name: string, defaultValue: string, eventSupport: ObjectWrapper<GenericEvents>, storage: SettingsStorage,
+              console: Console, regexFlags?: string,
+              logSettingAccess?: (name: string, value: number|string|boolean) => Promise<void>) {
+    super(name, defaultValue ? [{pattern: defaultValue}] : [], eventSupport, storage, console, logSettingAccess);
     this.#regexFlags = regexFlags;
   }
 

package/front_end/core/sdk/CPUThrottlingManager.ts

@@ -3,110 +3,59 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as i18n from '../i18n/i18n.js';
+import * as Root from '../root/root.js';
 
 import {EmulationModel} from './EmulationModel.js';
 import {type SDKModelObserver, TargetManager} from './TargetManager.js';
 
-const UIStrings = {
-  /**
-   * @description Text label for a menu item indicating that no throttling is applied.
-   */
-  noThrottling: 'No throttling',
-  /**
-   * @description Text label for a menu item indicating that a specific slowdown multiplier is applied.
-   * @example {2} PH1
-   */
-  dSlowdown: '{PH1}× slowdown',
-  /**
-   * @description Text label for a menu item indicating an average mobile device.
-   */
-  calibratedMidTierMobile: 'Mid-tier mobile',
-  /**
-   * @description Text label for a menu item indicating a below-average mobile device.
-   */
-  calibratedLowTierMobile: 'Low-tier mobile',
-  /**
-   * @description Text label indicating why an option is not available, because the user's device is not fast enough to emulate a device.
-   */
-  calibrationErrorDeviceTooWeak: 'Device is not powerful enough',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('core/sdk/CPUThrottlingManager.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
-
-let throttlingManagerInstance: CPUThrottlingManager|undefined;
-
 export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     SDKModelObserver<EmulationModel> {
   readonly #targetManager: TargetManager;
-  #cpuThrottlingOption: CPUThrottlingOption;
-  #calibratedThrottlingSetting: Common.Settings.Setting<CalibratedCPUThrottling>;
+  #cpuThrottlingRate: number;
   #hardwareConcurrency?: number;
   #pendingMainTargetPromise?: (r: number) => void;
 
   constructor(settings: Common.Settings.Settings, targetManager: TargetManager) {
     super();
     this.#targetManager = targetManager;
-    this.#cpuThrottlingOption = NoThrottlingOption;
-    this.#calibratedThrottlingSetting = settings.createSetting<CalibratedCPUThrottling>(
-        'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
-    this.#calibratedThrottlingSetting.addChangeListener(this.#onCalibratedSettingChanged, this);
+    this.#cpuThrottlingRate = 1;  // No throttling
     targetManager.observeModels(EmulationModel, this);
   }
 
-  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): CPUThrottlingManager {
+  static instance(opts: {
+    forceNew?: boolean|null,
+    settings?: Common.Settings.Settings,
+    targetManager?: TargetManager,
+  } = {forceNew: null}): CPUThrottlingManager {
     const {forceNew} = opts;
-    if (!throttlingManagerInstance || forceNew) {
-      throttlingManagerInstance =
-          new CPUThrottlingManager(Common.Settings.Settings.instance(), TargetManager.instance());
+    if (!Root.DevToolsContext.globalInstance().has(CPUThrottlingManager) || forceNew) {
+      Root.DevToolsContext.globalInstance().set(
+          CPUThrottlingManager,
+          new CPUThrottlingManager(opts.settings ?? Common.Settings.Settings.instance(),
+                                   opts.targetManager ?? TargetManager.instance()));
     }
 
-    return throttlingManagerInstance;
+    return Root.DevToolsContext.globalInstance().get(CPUThrottlingManager);
   }
 
   static removeInstance(): void {
-    throttlingManagerInstance = undefined;
+    Root.DevToolsContext.globalInstance().delete(CPUThrottlingManager);
   }
 
   cpuThrottlingRate(): number {
-    return this.#cpuThrottlingOption.rate();
-  }
-
-  cpuThrottlingOption(): CPUThrottlingOption {
-    return this.#cpuThrottlingOption;
+    return this.#cpuThrottlingRate;
   }
 
-  #onCalibratedSettingChanged(): void {
-    // If a calibrated option is selected, need to propagate new rate.
-    const currentOption = this.#cpuThrottlingOption;
-    if (!currentOption.calibratedDeviceType) {
-      return;
-    }
-
-    const rate = this.#cpuThrottlingOption.rate();
-    if (rate === 0) {
-      // This calibrated option is no longer valid.
-      this.setCPUThrottlingOption(NoThrottlingOption);
+  setCPUThrottlingRate(rate: number): void {
+    if (rate === this.#cpuThrottlingRate) {
       return;
     }
 
+    this.#cpuThrottlingRate = rate;
     for (const emulationModel of this.#targetManager.models(EmulationModel)) {
-      void emulationModel.setCPUThrottlingRate(rate);
+      void emulationModel.setCPUThrottlingRate(this.#cpuThrottlingRate);
     }
-    this.dispatchEventToListeners(Events.RATE_CHANGED, rate);
-  }
-
-  setCPUThrottlingOption(option: CPUThrottlingOption): void {
-    if (option === this.#cpuThrottlingOption) {
-      return;
-    }
-
-    this.#cpuThrottlingOption = option;
-    for (const emulationModel of this.#targetManager.models(EmulationModel)) {
-      void emulationModel.setCPUThrottlingRate(this.#cpuThrottlingOption.rate());
-    }
-    this.dispatchEventToListeners(Events.RATE_CHANGED, this.#cpuThrottlingOption.rate());
+    this.dispatchEventToListeners(Events.RATE_CHANGED, this.#cpuThrottlingRate);
   }
 
   setHardwareConcurrency(concurrency: number): void {
@@ -161,8 +110,8 @@ export class CPUThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Eve
   }
 
   modelAdded(emulationModel: EmulationModel): void {
-    if (this.#cpuThrottlingOption !== NoThrottlingOption) {
-      void emulationModel.setCPUThrottlingRate(this.#cpuThrottlingOption.rate());
+    if (this.#cpuThrottlingRate !== 1) {
+      void emulationModel.setCPUThrottlingRate(this.#cpuThrottlingRate);
     }
     if (this.#hardwareConcurrency !== undefined) {
       void emulationModel.setHardwareConcurrency(this.#hardwareConcurrency);
@@ -190,96 +139,3 @@ export interface EventTypes {
   [Events.RATE_CHANGED]: number;
   [Events.HARDWARE_CONCURRENCY_CHANGED]: number;
 }
-
-export enum CPUThrottlingRates {
-  NO_THROTTLING = 1,
-  MID_TIER_MOBILE = 4,
-  LOW_TIER_MOBILE = 6,
-  EXTRA_SLOW = 20,
-
-  // eslint-disable-next-line @typescript-eslint/naming-convention -- Used by web_tests.
-  MidTierMobile = MID_TIER_MOBILE,
-  // eslint-disable-next-line @typescript-eslint/naming-convention -- Used by web_tests.
-  LowEndMobile = LOW_TIER_MOBILE,
-}
-
-export type CalibratedDeviceType = 'low-tier-mobile'|'mid-tier-mobile';
-
-export interface CPUThrottlingOption {
-  title: () => string;
-  rate: () => number;
-  calibratedDeviceType?: CalibratedDeviceType;
-  jslogContext: string;
-}
-
-function makeFixedPresetThrottlingOption(rate: CPUThrottlingRates): CPUThrottlingOption {
-  return {
-    title: rate === 1 ? i18nLazyString(UIStrings.noThrottling) : i18nLazyString(UIStrings.dSlowdown, {PH1: rate}),
-    rate: () => rate,
-    jslogContext: rate === 1 ? 'cpu-no-throttling' : `cpu-throttled-${rate}`,
-  };
-}
-
-export const NoThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.NO_THROTTLING);
-export const MidTierThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.MID_TIER_MOBILE);
-export const LowTierThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.LOW_TIER_MOBILE);
-export const ExtraSlowThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.EXTRA_SLOW);
-
-function makeCalibratedThrottlingOption(calibratedDeviceType: CalibratedDeviceType): CPUThrottlingOption {
-  const getSettingValue = (): number|CalibrationError|null => {
-    const setting = Common.Settings.Settings.instance().createSetting<CalibratedCPUThrottling>(
-        'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
-    const value = setting.get();
-    if (calibratedDeviceType === 'low-tier-mobile') {
-      return value.low ?? null;
-    }
-    if (calibratedDeviceType === 'mid-tier-mobile') {
-      return value.mid ?? null;
-    }
-    return null;
-  };
-
-  return {
-    title(): string {
-      const typeString = calibratedDeviceType === 'low-tier-mobile' ? i18nString(UIStrings.calibratedLowTierMobile) :
-                                                                      i18nString(UIStrings.calibratedMidTierMobile);
-
-      const value = getSettingValue();
-      if (typeof value === 'number') {
-        return `${typeString} – ${value.toFixed(1)}×`;
-      }
-
-      return typeString;
-    },
-    rate(): number {
-      const value = getSettingValue();
-      if (typeof value === 'number') {
-        return value;
-      }
-      return 0;
-    },
-    calibratedDeviceType,
-    jslogContext: `cpu-throttled-calibrated-${calibratedDeviceType}`,
-  };
-}
-
-export const CalibratedLowTierMobileThrottlingOption = makeCalibratedThrottlingOption('low-tier-mobile');
-export const CalibratedMidTierMobileThrottlingOption = makeCalibratedThrottlingOption('mid-tier-mobile');
-
-export interface CalibratedCPUThrottling {
-  /** Either the CPU multiplier, or an error code for why it could not be determined. */
-  low?: number|CalibrationError;
-  mid?: number|CalibrationError;
-}
-
-export enum CalibrationError {
-  DEVICE_TOO_WEAK = 'DEVICE_TOO_WEAK',
-}
-
-export function calibrationErrorToString(error: CalibrationError): string {
-  if (error === CalibrationError.DEVICE_TOO_WEAK) {
-    return i18nString(UIStrings.calibrationErrorDeviceTooWeak);
-  }
-
-  return error;
-}

package/front_end/core/sdk/CSSMetadata.ts

@@ -108,6 +108,29 @@ export class CSSMetadata {
         propertyValueSets.set(propertyName, extraValues);
       }
     }
+    // and add common keywords for shorthands
+    const commonKeywordSet = new Set(CommonKeywords);
+    for (const propertyName of this.#longhands.keys()) {
+      // skip "all" because it is a CSS-wide keyword
+      // skip shorthands that are defined in generatedPropertyValues because they have their own value sets
+      if (propertyName === 'all' || propertyValueSets.has(propertyName)) {
+        continue;
+      }
+      const longhands = this.#longhands.get(propertyName);
+      if (!longhands) {
+        continue;
+      }
+      const values = new Array<string>();
+      for (const longhand of longhands) {
+        const longhandValues = propertyValueSets.get(longhand);
+        if (!longhandValues) {
+          continue;
+        }
+        const commonKeywordsInLonghandValues = longhandValues.intersection(commonKeywordSet);
+        values.push(...commonKeywordsInLonghandValues);
+      }
+      propertyValueSets.set(propertyName, new Set(values));
+    }
     // finally add keywords from alias property, common keywords to value sets and convert property #values
     // into arrays since callers expect arrays
     for (const [propertyName, values] of propertyValueSets) {

package/front_end/core/sdk/CompilerSourceMappingContentProvider.ts

@@ -25,13 +25,17 @@ export class CompilerSourceMappingContentProvider implements TextUtils.ContentPr
   readonly #sourceURL: Platform.DevToolsPath.UrlString;
   readonly #contentType: Common.ResourceType.ResourceType;
   readonly #initiator: PageResourceLoadInitiator;
+  readonly #pageResourceLoader: PageResourceLoader;
 
-  constructor(
-      sourceURL: Platform.DevToolsPath.UrlString, contentType: Common.ResourceType.ResourceType,
-      initiator: PageResourceLoadInitiator) {
+  constructor(sourceURL: Platform.DevToolsPath.UrlString, contentType: Common.ResourceType.ResourceType,
+              initiator: PageResourceLoadInitiator,
+              pageResourceLoader: PageResourceLoader = initiator.target ?
+                  initiator.target.targetManager().context.get(PageResourceLoader) :
+                  PageResourceLoader.instance()) {
     this.#sourceURL = sourceURL;
     this.#contentType = contentType;
     this.#initiator = initiator;
+    this.#pageResourceLoader = pageResourceLoader;
   }
 
   contentURL(): Platform.DevToolsPath.UrlString {
@@ -44,7 +48,7 @@ export class CompilerSourceMappingContentProvider implements TextUtils.ContentPr
 
   async requestContentData(): Promise<TextUtils.ContentData.ContentDataOrError> {
     try {
-      const {content} = await PageResourceLoader.instance().loadResource(this.#sourceURL, this.#initiator);
+      const {content} = await this.#pageResourceLoader.loadResource(this.#sourceURL, this.#initiator);
       return new TextUtils.ContentData.ContentData(
           content, /* isBase64=*/ false, this.#contentType.canonicalMimeType());
     } catch (e) {