chrome-devtools-frontend 1.0.1593518 → 1.0.1595090

package/docs/contributing/settings-experiments-features.md

@@ -1,44 +1,35 @@
 # Settings, Experiments, and Features in Chromium DevTools
 
-From a developers perspective the Chromium DevTools experience can be
-customized in multiple ways:
+Chromium DevTools can be customized in several ways:
 
-* via Settings \> Preferences,
-* via Settings \> Experiments,
-* via `chrome://flags`,
-* or by passing a command line flag to Chromium.
-
-Adding new DevTools experiments is deprecated, the preferred way for adding new
-features / exposing experimental features is via `base::Feature`s. These are
-controllable via Chromium command line parameters or optionally via `chrome://flags`.
-
-Note: We are currently in the process of migrating away from DevTools experiments,
-this documentation is partly outdated and will be updated ASAP.
+**Preferences** (found in Settings > Preferences) control the general appearance and behavior of
+DevTools, such as language or UI options. In the codebase, these are represented as "Settings"
+([documentation](https://chromium.googlesource.com/devtools/devtools-frontend/+/main/front_end/core/common/README.md)).
+They are intended as permanent options that remain relatively stable over time.
 
+**Experiments** are features under active development or evaluation. These can change frequently
+and are managed through DevTools > Settings > Experiments, `chrome://flags`, or command-line
+switches. They are implemented using Chromium's `base::Feature` system, which allows for granular
+control and testing.
 
 [TOC]
 
-## How to add `base::Feature` feature flags
-
-[go/chrome-devtools:command-line-config](http://go/chrome-devtools:command-line-config)
+## How to add base::Feature feature flags
 
-`base::Feature`s are defined in the Chromium repository and made available to
-DevTools via host bindings. This allows configuring features which have both a
-DevTools front-end and a Chromium back-end component from a single source of
-truth. But front-end-only features can be controlled via a `base::Feature` just
-as well.
+`base::Feature` flags are defined in the Chromium repository and exposed to DevTools through [host
+bindings](https://crsrc.org/c/chrome/browser/devtools/devtools_ui_bindings.cc). This architecture
+ensures a single source of truth for features that span both the front-end (DevTools) and back-end
+(Chromium). Even features that only affect the front-end should use this system for consistency.
+By default, `base::Features` are configurable via command line parameters when launching Chromium.
+Optionally, they can be made available via the `chrome://flags` UI and via
+DevTools > Settings > Preferences as well.
 
-By default, `base::Feature`s are configurable via command line parameters when
-launching Chromium. Optionally, they can be made available via the `chrome://flags`
-UI as well.
-
-### Define a new `base::Feature`
+### Define a new base::Feature
 
 Add a new `base::Feature` to DevTools' [`features.cc`](https://crsrc.org/c/chrome/browser/devtools/features.cc). This feature will automatically be available as a Chrome command line parameter:
 
 ```cxx
-// in browser_features.cc
-
+// in features.cc
 BASE_FEATURE(kDevToolsNewFeature, "DevToolsNewFeature",
              base::FEATURE_DISABLED_BY_DEFAULT);
 
@@ -47,25 +38,20 @@ const base::FeatureParam<std::string> kDevToolsNewFeatureStringParam{
     &kDevToolsNewFeature, "string_param", /*default_value=*/""};
 const base::FeatureParam<double> kDevToolsNewFeatureDoubleParam{
     &kDevToolsNewFeature, "double_param", /*default_value=*/0};
-
 ```
 
 Start Chrome via command line including flags:
 
 ```bash
-out/Default/chrome --enable-features=DevToolsNewFeature
+[path to chrome]/chrome --enable-features=DevToolsNewFeature
 ```
 
-You can even pass additional feature parameters:
+Command for starting Chrome with feature and additional feature parameters:
 
 ```bash
-out/Default/chrome --enable-features="DevToolsNewFeature:string_param/foo/double_param/0.5"
+[path to chrome]/chrome --enable-features="DevToolsNewFeature:string_param/foo/double_param/0.5"
 ```
 
-### Make the `base::Feature` available via `chrome://flags`
-
-This step is optional. If you want the `base::Feature` to be controllable via the `chrome://flags` UI and not only via the command line, follow [this documentation](https://chromium.googlesource.com/chromium/src/+/main/docs/how_to_add_your_feature_flag.md#step-2_adding-the-feature-flag-to-the-chrome_flags-ui).
-
 ### Add the new feature to the host configuration being sent to DevTools
 
  Add the new feature to `DevToolsUIBindings::GetHostConfig` ([link to code](https://crsrc.org/c/chrome/browser/devtools/devtools_ui_bindings.cc;l=1506;drc=dd0b2a0bee86088ec0d481bd8722c06edaaba4a4), [example CL](https://crrev.com/c/5625935)).
@@ -73,92 +59,101 @@ This step is optional. If you want the `base::Feature` to be controllable via th
 ### In DevTools, use the new property added to HostConfig
 
 * Update the type definition in [`Runtime.ts`](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/core/root/Runtime.ts).
-* Update the dummy value returned by `getHostConfig` in [`InspectorFrontendHost.ts`](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/core/host/InspectorFrontendHost.ts).
-* Access the host config via `Root.Runtime.hostConfig`.
-* In unit tests, make sure to assign the expected configuration using `updateHostConfig({ foo: bar })`.
+* Check if the `base::Feature` is enabled and use this to run certain code blocks conditionally by
+accessing the host config via `Root.Runtime.hostConfig`.
+* In unit tests, make sure to assign the expected configuration using
+`updateHostConfig({ someFeature: {enabled: true} })`.
 
-Please refer to this [example CL](https://crrev.com/c/5626314).
+Please refer to this [example CL](https://crrev.com/c/6820841).
 
-## DEPRECATED:How to add experiments
+### Optional: Make the base::Feature available via chrome://flags
 
-Note: We are currently in the process of migrating away from DevTools experiments, please use a `base::Feature` instead.
+This step is optional. If you want the `base::Feature` to be controllable via the
+`chrome://flags` UI and not only via the command line, follow
+[this documentation](https://chromium.googlesource.com/chromium/src/+/main/docs/how_to_add_your_feature_flag.md#step-2_adding-the-feature-flag-to-the-chrome_flags-ui).
 
-If you want to launch a new feature in DevTools behind an experiment flag, you
-will need to do two things:
+[Example CL](https://crrev.com/c/7588357)
 
-1.  Make Chromium aware of the experiment and enable it to track users
-    enabling/disabling the experiment.
-2.  Register the experiment in DevTools to have it added to the Settings UI.
+### Optional: Add the base::Feature to DevTools > Settings > Experiments
 
-### Chromium
+Prerequisite: The `base::Feature` needs to be have been added to `chrome://flags`.
 
-In Chromium, edit `tools/metrics/histograms/enums.xml`. Find the enum titled
-`DevToolsExperiments` (your best bet is to search for this text in your editor,
-as `enums.xml` is very large).
+#### Step 1: Create a HostExperiment in the DevTools repository
 
-Go to the end of this enum, and add a new entry. Make sure that the `value` is
-increased by one from the previous entry. The label can be anything you like but
-make sure it is easily identifiable.
+Register the experiment in [`MainImpl.ts`](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/entrypoints/main/MainImpl.ts;l=343)
 
-```xml
-<int value="95" label="yourExperimentNameHere"/>
+```ts
+Root.Runtime.experiments.registerHostExperiment({
+  name: Root.ExperimentNames.ExperimentName.DURABLE_MESSAGES,
+  // Short description of the experiment, shown to users
+  title: 'Durable Messages',
+  // This must match the name of the Chrome flag as seen in `chrome://flags` or in `chrome/browser/about_flags.cc`
+  aboutFlag: 'devtools-enable-durable-messages',
+  isEnabled: Root.Runtime.hostConfig.devToolsEnableDurableMessages?.enabled ?? false,
+  // Whether the experiment requires a Chrome restart or only a reload of DevTools
+  requiresChromeRestart: false,
+  // optional
+  docLink: 'https://goo.gle/related-documentation',
+  // optional
+  feedbackLink: 'https://crbug.com/[bug number]',
+});
 ```
 
-See an example Chromium CL [here](https://crrev.com/c/4915777).
-
-### DevTools front-end
+[Example CL](https://crrev.com/c/7588114)
 
-In DevTools, you need to register the experiment. This is done in
-`front_end/entrypoints/main/MainImpl.ts` and is done by calling
-`Root.Runtime.experiments.register`:
+`requiresChromeRestart` should be set to `true` if the `base::Feature` is used for conditionally
+running code in the Chromium repository as well. If it only affects code paths in the DevTools
+repository, `requiresChromeRestart` should be set to `false`. This means that toggling the
+experimental feature requires only reloading DevTools and not restarting Chrome.
 
-```ts
-Root.Runtime.experiments.register(
-  'yourExperimentNameHere',
-  'User facing short description of experiment here',
-  false,
-);
-```
+You may also pass in two additional arguments which can be used to link users to documentation and
+to a place for providing feedback.
 
-The first argument is the experiment's label, and **this must match the label
-you used in your Chromium CL**.
+You must also add the experiment to [UserMetrics.ts](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/core/host/UserMetrics.ts;l=807).
+Add an entry to the `DevToolsExperiments` enum, incrementing the `MAX_VALUE` by 1 and assigning the
+un-incremented value to your experiment (the gaps in the values assigned to experiments are caused
+by expired experiments which are no longer part of the codebase).
 
-The second argument is a short description of the experiment. This string will
-be shown to users.
+#### Step 2: Update UI bindings to allow toggling the experiment from the DevTools UI
 
-Finally, the third argument marks the experiment as unstable. You should pass
-`true` if you want your experiment to be marked as unstable. This moves it into
-a separate part of the UI where users are warned that enabling the experiment
-may cause issues.
+In the scenario of allowing users to toggle the experiment from the DevTools UI, when assembling
+the host config to be sent to DevTools, use the `GetFeatureStateForDevTools` helper to determine
+the enabled/disabled state of the experiment.
 
-You may also pass in two additional arguments which can be used to link users to
-documentation and a way to provide feedback:
-
-```ts
-Root.Runtime.experiments.register(
-  'jsProfilerTemporarilyEnable',
-  'Enable JavaScript Profiler temporarily',
-  /* unstable= */ false,
-  /* documentation */ 'https://goo.gle/js-profiler-deprecation',
-  /* feedback */ 'https://crbug.com/1354548',
+```cxx
+response_dict.Set(
+  "devToolsNewFeature",
+  base::DictValue().Set(
+    "enabled",
+    GetFeatureStateForDevTools(
+      ::features::kDevToolsNewFeature,
+      enabled_by_flags,
+      disabled_by_flags
+    )
+  )
 );
 ```
 
-You must also add the experiment to `front_end/core/host/UserMetrics.ts`. Add an
-entry to the `DevToolsExperiments` enum, using **the same label and integer
-value** that you used in the Chromium CL. You should also increase the
-`MaxValue` entry by one.
+#### Step 3: Add the experiment to enums.xml in the Chromium repository
 
-Once the experiment is registered, you can check if it is enabled and use this
-to run certain code blocks conditionally:
+In Chromium, edit [tools/metrics/histograms/metadata/dev/enums.xml](https://crsrc.org/c/tools/metrics/histograms/metadata/dev/enums.xml;l=898).
+Find the enum titled `DevToolsExperiments`, and add a new entry. Make sure that the value matches the one from
+[UserMetrics.ts](https://crsrc.org/c/third_party/devtools-frontend/src/front_end/core/host/UserMetrics.ts;l=807)
+in the DevTools repository. The label can be anything you like but make sure it is easily identifiable.
 
-```ts
-if (Root.Runtime.experiments.isEnabled('yourExperimentNameHere')) {
-  // Experiment code here
-}
+```xml
+<int value="95" label="yourExperimentNameHere"/>
 ```
 
-## A/B Testing with Finch and `base::Feature`
+[Example CL](https://crrev.com/c/4915777)
+
+## Deprecated: DevTools experiments
+
+Previously, DevTools experiments that lacked a Chrome component were managed separately. This
+system is now deprecated. All legacy experiments are being migrated to the `base::Feature`
+framework to streamline development.
+
+## A/B Testing with Finch and base::Feature
 
 `base::Feature` flags can be used with Finch to conduct A/B testing by toggling feature flags for a defined percentage of users. A/B testing can be a good way of testing the waters. However, since the time to get meaningful metrics may take a long time, it shouldn't be used to get feedback on options quickly.
 

package/front_end/core/common/README.md

@@ -31,3 +31,129 @@ Common.Settings.registerSettingExtension({
 
 A controller for the each setting is added to the 'preferences' tab if they are visible, that is, they have a `title` and a `category`.
 They can also be set with the command menu if they have `options` and a `category` (options’ names are added as commands).
+
+---
+
+# The DevTools Revealer System
+
+The `Revealer.ts` module provides a centralized system that allows different parts of the DevTools UI to "reveal" or display various types of objects without being tightly coupled to one another. It's a powerful decoupling mechanism that makes the codebase more modular, extensible, and performant.
+
+For example, if you click on a CSS file link in the **Console**, this system is responsible for telling the **Sources** panel to open and display that file, without the Console needing a direct reference to the Sources panel.
+
+## Core Concepts
+
+1.  **`Revealer<T>` Interface**: This is the fundamental contract. A "Revealer" is any object (typically a UI panel or view) that knows how to display a specific type of data (`T`). It must implement a single method: `reveal(revealable: T): Promise<void>`.
+
+2.  **"Revealable" Object**: This is any object you want to show to the user. It can be a source code file (`SDK.SourceCode.UISourceCode`), a network request (`SDK.NetworkRequest.NetworkRequest`), a DOM node (`SDK.DOMModel.DOMNode`), or any other custom data type.
+
+3.  **`RevealerRegistry`**: This is a singleton class that acts as a central directory. It holds a list of all available `Revealer`s and maps them to the data types they can handle.
+
+4.  **`RevealerRegistration<T>`**: This is a configuration object used to register a `Revealer` with the `RevealerRegistry`. It contains three key pieces of information:
+    *   `contextTypes`: A function that returns an array of classes (constructors) that the `Revealer` can handle.
+    *   `loadRevealer`: An asynchronous function that returns a promise, which resolves to an instance of the `Revealer`. This allows for the lazy-loading of UI panels, improving initial application performance.
+    *   `destination` (optional): A user-friendly, localized string that describes where the object will be revealed (e.g., "Network panel", "Elements panel"). This is used for UI text, such as in context menus ("Reveal in...").
+
+---
+
+## How to Create a New Revealer
+
+Here are the steps to implement a new revealer that can take the user to a specific place in the DevTools UI.
+
+### Step 1: Define the Object to be Revealed
+
+First, ensure you have a class or data type that you want to make "revealable."
+
+```ts
+// front_end/models/my_app/MyApp.ts
+export class MyDataObject {
+  id: string;
+  constructor(id: string) {
+    this.id = id;
+  }
+}
+```
+
+### Step 2: Implement the `Revealer` Interface in Your UI Panel
+
+The UI component that will display the object (e.g., your panel or widget) must implement the `Common.Revealer.Revealer<T>` interface for your specific data type.
+
+```ts
+// front_end/panels/my_panel/MyPanel.ts
+import * as Common from '../../core/common/common.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as MyApp from '../../models/my_app/my_app.js';
+
+// 1. Implement the interface for your specific data type.
+export class MyPanel extends UI.Panel.Panel implements Common.Revealer.Revealer<MyApp.MyDataObject> {
+  // ... other panel implementation ...
+
+  // 2. This is the required method from the interface.
+  async reveal(dataObject: MyApp.MyDataObject): Promise<void> {
+    // This is where you put your panel's custom logic to show the object.
+
+    // First, ensure this panel is visible to the user.
+    await UI.ViewManager.ViewManager.instance().showView('my-panel-view-id');
+
+    // Now, highlight the specific item within your panel.
+    console.log(`Revealing data object with ID: ${dataObject.id}`);
+    // e.g., this.selectItemInUI(dataObject.id);
+  }
+}
+```
+
+### Step 3: Register Your Panel as a `Revealer`
+
+This is the most important step. You must tell the central `RevealerRegistry` that `MyPanel` knows how to handle `MyDataObject`. This registration is typically done in a module's `-meta.ts` or `-legacy.ts` configuration file, which is executed at startup.
+
+```ts
+// front_end/panels/my_panel/my_panel-meta.ts
+import * as Common from '../../core/common/common.js';
+import * as i18n from '../../core/i18n/i18n.js';
+
+const UIStrings = {
+  /**
+  * @description The name of the panel that reveals our custom data objects.
+  */
+  myPanel: 'My Awesome Panel',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/my_panel/my_panel-meta.ts', UIStrings);
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+Common.Revealer.registerRevealer({
+  // 1. Specify the data type(s) this revealer can handle.
+  contextTypes() {
+    // Use a dynamic import to avoid circular dependencies at module load time.
+    const {MyApp} = await import('../../models/my_app/my_app.js');
+    return [
+      MyApp.MyDataObject,
+    ];
+  },
+
+  // 2. Provide a function to load and return an instance of your panel.
+  //    This is what makes lazy loading possible.
+  async loadRevealer() {
+    const {MyPanel} = await import('./MyPanel.js');
+    // If your panel is a singleton, return its instance, otherwise create a new one.
+    return MyPanel.instance();
+  },
+
+  // 3. (Optional) Provide a user-facing destination name for context menus.
+  destination: i18nLazyString(UIStrings.myPanel),
+});
+```
+
+### Step 4: Trigger the Reveal from Anywhere
+
+Now that your revealer is registered, any other part of the DevTools codebase can ask to reveal an instance of `MyDataObject` without needing to know anything about `MyPanel`.
+
+```ts
+// In some other file, e.g., a context menu action.
+import * as Common from '../../core/common/common.js';
+import * as MyApp from '../../models/my_app/my_app.js';
+
+// Create an instance of the object you want to reveal.
+const myObject = new MyApp.MyDataObject('abc-123');
+
+// Call the global reveal function.
+await Common.Revealer.reveal(myObject);
+```

package/front_end/core/host/UserMetrics.ts

@@ -817,7 +817,6 @@ export enum DevtoolsExperiments {
   apca = 39,
   'font-editor' = 41,
   'full-accessibility-tree' = 42,
-  'contrast-issues' = 44,
   'experimental-cookie-features' = 45,
   'instrumentation-breakpoints' = 61,
   'authored-deployed-grouping' = 63,
@@ -907,7 +906,7 @@ export enum IssueCreated {
   'CookieIssue::WarnSameSiteUnspecifiedCrossSiteContext::SetCookie' = 35,
   'SharedArrayBufferIssue::TransferIssue' = 36,
   'SharedArrayBufferIssue::CreationIssue' = 37,
-  LowTextContrastIssue = 41,
+
   'CorsIssue::InsecureLocalNetwork' = 42,
   'CorsIssue::InvalidHeaders' = 44,
   'CorsIssue::WildcardOriginWithCredentials' = 45,

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -559,6 +559,10 @@ export class TargetBase {
     this.registerDispatcher('DOMStorage', dispatcher);
   }
 
+  registerEmulationDispatcher(dispatcher: ProtocolProxyApi.EmulationDispatcher): void {
+    this.registerDispatcher('Emulation', dispatcher);
+  }
+
   registerFetchDispatcher(dispatcher: ProtocolProxyApi.FetchDispatcher): void {
     this.registerDispatcher('Fetch', dispatcher);
   }

package/front_end/core/root/ExperimentNames.ts

@@ -15,7 +15,6 @@ export enum ExperimentName {
   APCA = 'apca',
   FONT_EDITOR = 'font-editor',
   FULL_ACCESSIBILITY_TREE = 'full-accessibility-tree',
-  CONTRAST_ISSUES = 'contrast-issues',
   EXPERIMENTAL_COOKIE_FEATURES = 'experimental-cookie-features',
   INSTRUMENTATION_BREAKPOINTS = 'instrumentation-breakpoints',
   AUTHORED_DEPLOYED_GROUPING = 'authored-deployed-grouping',

package/front_end/core/sdk/CSSModel.ts

@@ -575,6 +575,28 @@ export class CSSModel extends SDKModel<EventTypes> {
     }
   }
 
+  async setNavigationText(
+      styleSheetId: Protocol.DOM.StyleSheetId, range: TextUtils.TextRange.TextRange,
+      newNavigationText: string): Promise<boolean> {
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleEdited);
+
+    try {
+      await this.ensureOriginalStyleSheetText(styleSheetId);
+      const {navigation} = await this.agent.invoke_setNavigationText({styleSheetId, range, text: newNavigationText});
+
+      if (!navigation) {
+        return false;
+      }
+      this.#domModel.markUndoableState();
+      const edit = new Edit(styleSheetId, range, newNavigationText, navigation);
+      this.fireStyleSheetChanged(styleSheetId, edit);
+      return true;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }
+
   async setScopeText(
       styleSheetId: Protocol.DOM.StyleSheetId, range: TextUtils.TextRange.TextRange,
       newScopeText: string): Promise<boolean> {

package/front_end/core/sdk/CSSNavigation.ts

@@ -0,0 +1,33 @@
+// Copyright 2026 The Chromium Authors
+// 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 TextUtils from '../../models/text_utils/text_utils.js';
+
+import type {CSSModel} from './CSSModel.js';
+import {CSSQuery} from './CSSQuery.js';
+
+export class CSSNavigation extends CSSQuery {
+  static parseNavigationPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSNavigation[]): CSSNavigation[] {
+    return payload.map(navigation => new CSSNavigation(cssModel, navigation));
+  }
+
+  #active = true;
+
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSNavigation) {
+    super(cssModel);
+    this.reinitialize(payload);
+  }
+
+  reinitialize(payload: Protocol.CSS.CSSNavigation): void {
+    this.text = payload.text;
+    this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
+    this.styleSheetId = payload.styleSheetId;
+    this.#active = payload.active ?? true;
+  }
+
+  active(): boolean {
+    return this.#active;
+  }
+}

package/front_end/core/sdk/CSSRule.ts

@@ -10,6 +10,7 @@ import {CSSContainerQuery} from './CSSContainerQuery.js';
 import {CSSLayer} from './CSSLayer.js';
 import {CSSMedia} from './CSSMedia.js';
 import type {CSSModel, Edit} from './CSSModel.js';
+import {CSSNavigation} from './CSSNavigation.js';
 import {CSSScope} from './CSSScope.js';
 import {CSSStartingStyle} from './CSSStartingStyle.js';
 import {CSSStyleDeclaration, Type} from './CSSStyleDeclaration.js';
@@ -113,6 +114,7 @@ export class CSSStyleRule extends CSSRule {
   layers: CSSLayer[];
   ruleTypes: Protocol.CSS.CSSRuleType[];
   startingStyles: CSSStartingStyle[];
+  navigations: CSSNavigation[];
   wasUsed: boolean;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSRule, wasUsed?: boolean) {
     super(cssModel, {
@@ -132,6 +134,7 @@ export class CSSStyleRule extends CSSRule {
     this.layers = payload.layers ? CSSLayer.parseLayerPayload(cssModel, payload.layers) : [];
     this.startingStyles =
         payload.startingStyles ? CSSStartingStyle.parseStartingStylePayload(cssModel, payload.startingStyles) : [];
+    this.navigations = payload.navigations ? CSSNavigation.parseNavigationPayload(cssModel, payload.navigations) : [];
     this.ruleTypes = payload.ruleTypes || [];
     this.wasUsed = wasUsed || false;
   }
@@ -224,6 +227,7 @@ export class CSSStyleRule extends CSSRule {
     this.containerQueries.forEach(cq => cq.rebase(edit));
     this.scopes.forEach(scope => scope.rebase(edit));
     this.supports.forEach(supports => supports.rebase(edit));
+    this.navigations.forEach(navigation => navigation.rebase(edit));
 
     super.rebase(edit);
   }
@@ -396,7 +400,7 @@ export interface CSSNestedStyleLeaf {
 
 export type CSSNestedStyleCondition = {
   children: CSSNestedStyle[],
-}&({media: CSSMedia}|{container: CSSContainerQuery}|{supports: CSSSupports});
+}&({media: CSSMedia}|{container: CSSContainerQuery}|{supports: CSSSupports}|{navigation: CSSNavigation});
 
 export type CSSNestedStyle = CSSNestedStyleLeaf|CSSNestedStyleCondition;
 
@@ -463,7 +467,13 @@ export class CSSFunctionRule extends CSSRule {
           supports: new CSSSupports(this.cssModelInternal, node.condition.supports),
         };
       }
-      console.error('A function rule condition must have a media, container, or supports');
+      if (node.condition.navigation) {
+        return {
+          children,
+          navigation: new CSSNavigation(this.cssModelInternal, node.condition.navigation),
+        };
+      }
+      console.error('A function rule condition must have a media, container, supports, or navigation');
       return;
     }
     console.error('A function rule node must have a style or condition');

package/front_end/core/sdk/EmulationModel.ts

@@ -18,7 +18,7 @@ export const enum DataSaverOverride {
   DISABLED = 'disabled',
 }
 
-export class EmulationModel extends SDKModel<void> {
+export class EmulationModel extends SDKModel<EmulationModelEventTypes> implements ProtocolProxyApi.EmulationDispatcher {
   readonly #emulationAgent: ProtocolProxyApi.EmulationApi;
   readonly #deviceOrientationAgent: ProtocolProxyApi.DeviceOrientationApi;
   #cssModel: CSSModel|null;
@@ -33,11 +33,15 @@ export class EmulationModel extends SDKModel<void> {
     enabled: boolean,
     configuration: Protocol.Emulation.SetEmitTouchEventsForMouseRequestConfiguration,
   };
+  #screenOrientationLocked: boolean;
+  #lockedOrientation: Protocol.Emulation.ScreenOrientation|null;
 
   constructor(target: Target) {
     super(target);
     this.#emulationAgent = target.emulationAgent();
     this.#deviceOrientationAgent = target.deviceOrientationAgent();
+    this.#screenOrientationLocked = false;
+    this.#lockedOrientation = null;
     this.#cssModel = target.model(CSSModel);
     this.#overlayModel = target.model(OverlayModel);
     if (this.#overlayModel) {
@@ -225,6 +229,7 @@ export class EmulationModel extends SDKModel<void> {
       enabled: false,
       configuration: Protocol.Emulation.SetEmitTouchEventsForMouseRequestConfiguration.Mobile,
     };
+    target.registerEmulationDispatcher(this);
   }
 
   setTouchEmulationAllowed(touchEmulationAllowed: boolean): void {
@@ -478,6 +483,41 @@ export class EmulationModel extends SDKModel<void> {
     ];
     return await this.emulateCSSMedia(type, features);
   }
+
+  // ProtocolProxyApi.EmulationDispatcher implementation
+
+  virtualTimeBudgetExpired(): void {
+    // No-op for now; not used by the frontend.
+  }
+
+  screenOrientationLockChanged(event: Protocol.Emulation.ScreenOrientationLockChangedEvent): void {
+    this.#screenOrientationLocked = event.locked;
+    this.#lockedOrientation = event.orientation ?? null;
+    this.dispatchEventToListeners(
+        EmulationModelEvents.SCREEN_ORIENTATION_LOCK_CHANGED,
+        {locked: event.locked, orientation: event.orientation ?? null});
+  }
+
+  isScreenOrientationLocked(): boolean {
+    return this.#screenOrientationLocked;
+  }
+
+  lockedOrientation(): Protocol.Emulation.ScreenOrientation|null {
+    return this.#lockedOrientation;
+  }
+}
+
+export const enum EmulationModelEvents {
+  SCREEN_ORIENTATION_LOCK_CHANGED = 'ScreenOrientationLockChanged',
+}
+
+export interface ScreenOrientationLockChangedEvent {
+  locked: boolean;
+  orientation: Protocol.Emulation.ScreenOrientation|null;
+}
+
+export interface EmulationModelEventTypes {
+  [EmulationModelEvents.SCREEN_ORIENTATION_LOCK_CHANGED]: ScreenOrientationLockChangedEvent;
 }
 
 export class Location {