chrome-devtools-frontend 1.0.1578729 → 1.0.1581449

package/agents/prompts/creating-a-model.md

@@ -0,0 +1,51 @@
+# Creating or Migrating a Model in DevTools
+
+This guide outlines the standard procedure for creating a new model or migrating an existing one to `front_end/models/`.
+
+## 0. Preparation (Before you start)
+*   **Baseline:** Run existing tests for the code you are moving to ensure they pass *before* you touch anything.
+    *   `npm run test -- front_end/<old_location>`
+*   **Impact Analysis:** Search for usages of the class/file to understand the scope of refactoring.
+    *   `grep -r "ClassName" front_end/`
+
+## 1. File Structure
+*   **Location:** `front_end/models/<model_name>/` (must be lowercase).
+*   **Entrypoint:** Create a barrel file `front_end/models/<model_name>/<model_name>.ts` that exports the model's public API.
+*   **Implementation:** The actual logic goes in `<ClassName>.ts`.
+*   **Tests:** Unit tests go in `<ClassName>.test.ts` alongside the implementation.
+
+## 2. Build Configuration (`BUILD.gn`)
+Every model requires a `BUILD.gn` file in its directory with three specific targets:
+
+1.  **`devtools_module("<model_name>")`**: Lists implementation source files (`sources`) and dependencies (`deps`).
+    *   **Crucial:** Do NOT include the barrel file (`<model_name>.ts`) in `sources`.
+2.  **`devtools_entrypoint("bundle")`**: Defines the barrel file (`entrypoint = "<model_name>.ts"`).
+    *   **Crucial:** Must depend on the module target: `deps = [ ":<model_name>" ]`.
+3.  **`ts_library("unittests")`**: Lists test files and test-only dependencies.
+    *   **Crucial:** Must depend on the bundle: `deps = [ ":bundle" ]`.
+
+## 3. Global Registration (Crucial)
+The build system does not auto-detect new modules. You must manually register them in **`config/gni/devtools_grd_files.gni`**:
+
+*   **Bundled (Release) Build:** Add the new barrel file path (e.g., `front_end/models/<model_name>/<model_name>.js`) to the `grd_files_bundled_sources` list.
+*   **Unbundled (Debug) Build:** Add all other implementation files (e.g., `front_end/models/<model_name>/<ClassName>.js`) to the `grd_files_unbundled_sources` list.
+*   **Test Runner:** Add the new model's unittest target (e.g., `models/<model_name>:unittests`) to the `deps` list in **`front_end/BUILD.gn`**.
+
+## 4. Refactoring Imports & Exports
+*   **Consumers:** Update all files importing the model to use the new entrypoint:
+    `import * as ModelName from '../../models/<model_name>/<model_name>.js';`
+*   **Old Barrel File (Migration only):** If moving a file, **remove** its export from the original directory's barrel file (e.g., `front_end/panels/elements/elements.ts`).
+*   **Internal Imports:** Files *within* the model directory must import each other via relative paths (e.g., `./OtherClass.js`), **never** via the model's own barrel file.
+
+## 5. Verification Checklist
+1.  **Build:** `autoninja -C out/Default` (Ensures BUILD.gn and GRD files are correct).
+2.  **Lint:** `npm run lint` (Checks style and formatting).
+3.  **Test:**
+    *   `npm run test -- front_end/models/<model_name>` (New tests).
+    *   `npm run test -- front_end/<old_location>` (Regression check for previous owner).
+
+## Common Pitfalls
+*   **Circular Dependencies:** Occur when internal files import from the directory's own barrel file.
+*   **Missing Tests:** Failing to add the target to `front_end/BUILD.gn` means tests exist but never run.
+*   **Legacy Exports:** Forgetting to remove the class from the old location's `files` or `exports` allows old patterns to persist.
+*   **Build Errors:** Including the barrel file in `devtools_module` sources causes duplicate definition errors.

package/docs/cookbook/devtools_on_devtools.md

@@ -44,7 +44,7 @@ set up your Chrome or Chromium instance for earlier versions of M-136 and M-135.
 Then in your `devtools-frontend` checkout, use
 
 ```bash
-./third_party/chrome/chrome-linux/chrome \
+./third_party/chrome/chrome-linux/chrome-linux64/chrome \
    --disable-infobars \
    --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
 ```
@@ -52,7 +52,7 @@ Then in your `devtools-frontend` checkout, use
 on Linux or
 
 ```bash
-./third_party/chrome/chrome-mac/Google\ Chrome\ for\ Testing.app/Contents/MacOS/Google\ Chrome\ for\ Testing \
+./third_party/chrome/chrome-mac-{arm64|x64}/chrome-mac-{arm64|x64}/Google\ Chrome\ for\ Testing.app/Contents/MacOS/Google\ Chrome\ for\ Testing \
   --disable-infobars \
   --disable-features=MediaRouter \
   --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end) \

package/docs/feature-specs/elements-gutter-decorators.md

@@ -0,0 +1,40 @@
+# Requirements Specification: Elements Panel Gutter & Decoration Logic
+
+## 1. Overview
+The gutter area in the Elements panel DOM tree serves as a visual indicator for state markers (decorations) associated with DOM nodes. These decorations provide users with "at-a-glance" information about the node or its subtree, such as active breakpoints or framework-specific annotations.
+
+## 2. Functional Requirements
+
+### 2.1 Decoration Visibility
+*   **Target Nodes**: Decorations must only appear on **Element** nodes (e.g., `<div>`, `<body>`). They must not appear on text nodes or closing tags.
+*   **Visual Indicators**: Active states must be represented by colored markers (dots) within the gutter to the left of the element's tag.
+*   **Multiple States**: If a node has multiple active states (e.g., multiple types of breakpoints), the gutter must display markers for all of them.
+    *   **Layout**: Markers must be arranged horizontally.
+    *   **Spacing**: Markers must be tightly packed, with each subsequent marker offset by exactly `3px` to the right of the previous one (creating a stacked or dense visual line).
+    ![Multiple Markers Example](images/elements-gutter-decorators-multiple.png)
+
+### 2.2 Parent/Child Aggregation Logic
+The visibility of decorations depends on the expansion state of the node to ensure users don't miss information hidden inside collapsed regions.
+
+*   **Collapsed State (Summary View)**:
+    *   The gutter must display markers for the node's **own** decorations.
+    *   The gutter must **also** display markers for any **descendant** nodes that have decorations. This acts as a summary, alerting the user that a reflected state exists somewhere inside the collapsed subtree.
+*   **Expanded State (Direct View)**:
+    *   The gutter must **only** display markers for the node's **own** decorations.
+    *   Markers for descendant nodes must be hidden from the parent's gutter, as they will be directly visible on the child nodes themselves.
+    *   **Style**: Descendant markers visible in the collapsed state must be rendered with `50%` opacity to visually distinguish them from the node's own decorations.
+
+### 2.3 Tooltip Behavior
+Hovering over the decoration markers in the gutter must display a consolidated tooltip containing:
+*   **Own Decorations**: A list of titles for all decorations active on the current node.
+*   **Descendant Decorations** (Collapsed State Only): A separate list of titles for decorations found within the subtree, clearly labeled to distinguish them from the parent's own states (e.g., under a "Children:" header).
+
+### 2.4 Layout & Positioning
+*   **Indentation Tracking**: The decoration container must dynamically adjust its position to match the indentation level of the tree element. It should always appear to the left of the opening tag, regardless of how deep the node is in the DOM hierarchy.
+*   **Gutter Alignment**: The markers must align consistent with the "gutter" column effectively creating a vertical channel for status indicators down the left side of the tree.
+
+### 2.5 User Interaction
+*   **Menu Access**: Clicking on the gutter area (often visualized with a "..." icon or actionable space) must trigger the context menu for that node, allowing access to actions related to the decorations (e.g., removing a breakpoint).
+
+### 2.6 Performance
+*   **Throttled Updates**: Changes to decorations must be batched or throttled. Visually updating the markers should not occur synchronously with every minor internal state change to prevent UI flickering during rapid DOM updates.

package/docs/feature-specs/elements-tree-edit-html.md

@@ -0,0 +1,14 @@
+# HTML Edit View in Elements Tree
+
+## Overview
+The HTML Edit View allows developers to freely edit the HTML of a DOM node directly in the Elements panel. When active, it replaces the standard tree item representation with a fully functional CodeMirror editor instance.
+
+## Requirements
+1. **Triggering**: Users can trigger the HTML edit view via keyboard shortcuts (`F2` on a selected node), or via the Context Menu ("Edit as HTML").
+2. **Editor UI**: When activated, the tree element's inline attributes, tags, and descendant nodes are hidden. A CodeMirror editor instance is shown in place of the node.
+3. **Behavior**:
+    - The editor is populated with the node's `outerHTML` (or relevant subset).
+    - It supports syntax highlighting, auto-completion of tags, and proper indentation.
+    - If the user clicks outside the editor or presses `Cmd+Enter` / `Ctrl+Enter`, the edit is committed.
+    - If the user presses `Escape`, the edit is aborted.
+4. **State Management**: Upon committing or aborting, the tree element restores its standard view, and any updated DOM state is reflected.

package/docs/feature-specs/elements-tree-node-title.md

@@ -0,0 +1,46 @@
+# Requirements Specification: Elements Panel Tree Node Title
+
+## 1. Overview
+The Elements panel represents the DOM tree as a collection of nodes. Each node's primary visual representation—its "title"—is a dynamic string of text, interactive links, and syntax-highlighted code. This specification documents the expected user-facing behaviors of the node title rendering across various DOM node types, ensuring a rich, interactive, and accurate representation of the document structure.
+
+## 2. Node Types and Rendering Rules
+
+### 2.1 Element Nodes (`Node.ELEMENT_NODE`)
+Element nodes are the most common nodes in the tree. Their rendering depends on their state:
+*   **Standard Tags**: Rendered as `<tagName attribute="value">` for opening tags and `</tagName>` for closing tags. The tag names are syntax-highlighted.
+*   **Pseudo-Elements**: Rendered as `::pseudo-element-name(identifier)`.
+*   **Inline Text Nodes**: If an element contains only a text node and no other children (e.g., `<div>Hello</div>`), it is rendered entirely on one line: `<tagName>Hello</tagName>`. The text content has its whitespace collapsed, and HTML entities are syntax-highlighted.
+*   **Collapsed Expandable Elements**: When an element with children is collapsed, the title renders the opening tag, a clickable expand button (`▶`), a visually hidden `…` (for accessibility and layout tests), and the closing tag, all on one line.
+
+### 2.2 Attributes
+Attributes within Element nodes have complex interactive behaviors:
+*   **Formatting**: Rendered natively as `name="value"`. If an attribute has no value, the `="value"` part is omitted unless explicitly forced.
+*   **HTML Entities**: Unicode sequences and entities within attribute values are syntax-highlighted.
+*   **Linkification (URLs)**: Values of `src` and `href` attributes, as well as complex `srcset` definitions in `<img>`, `<source>`, and `<image>` tags, are automatically detected. They are rendered as clickable links that open the resource or show an image preview popover on hover.
+*   **Linkification (DOM Relations)**: Attributes that establish DOM relationships (`popovertarget`, `interesttarget`, `commandfor`) are parsed. Their values are rendered as clickable links that, when clicked, reveal the target DOM node in the Elements panel. Tooltips will read: "Reveal Popover Target", "Reveal Interest Target", or "Reveal Command For Target" respectively.
+
+### 2.3 Text Nodes (`Node.TEXT_NODE`)
+*   **Standard Text**: Rendered surrounded by double quotes (`"text"`). HTML entities within the text are highlighted.
+*   **JavaScript inside `<script>`**: If the parent is a `<script>` tag, the text is treated as code. Quotes are omitted, whitespace is trimmed, and the content is passed through the JavaScript syntax highlighter.
+*   **CSS inside `<style>`**: If the parent is a `<style>` tag, the text is treated as code. Quotes are omitted, whitespace is trimmed, and the content is passed through the CSS syntax highlighter.
+
+### 2.4 Other Node Types
+*   **Comment Nodes (`Node.COMMENT_NODE`)**: Rendered exactly as `<!-- comment text -->`.
+*   **Doctype Nodes (`Node.DOCUMENT_TYPE_NODE`)**: Rendered in the format `<!DOCTYPE name PUBLIC "publicId" "systemId" [internalSubset]>`. Only the applicable parts of the doctype are displayed.
+*   **CDATA Sections (`Node.CDATA_SECTION_NODE`)**: Rendered as `<![CDATA[text]]>`.
+*   **Document Nodes (`Node.DOCUMENT_NODE`)**: Rendered as `#document (url)` where the URL is a clickable link.
+*   **Document Fragments (`Node.DOCUMENT_FRAGMENT_NODE`)**: Rendered as the fragment name, with whitespace collapsed (e.g., `#document-fragment`). Shadow roots also receive specific CSS classes to indent them appropriately (`shadow-root`, `shadow-root-deep`, etc.).
+
+## 3. Dynamic Highlighting and Interactions
+
+### 3.1 DOM Update Flash (Animations)
+When the DevTools backend reports a change to a node (via an `ElementUpdateRecord`), the specific portion of the title that changed must briefly flash with a purple highlight (`dom-update-highlight` CSS animation):
+*   If an attribute was added/modified, the attribute value flashes.
+*   If children were added/removed (and the element is not expanded), the tag name flashes.
+*   If text content changed, the text node itself flashes.
+
+### 3.2 Search Result Highlighting
+When a user executes a search within the Elements panel (Ctrl/Cmd + F), matches found within the text representation of the node title are highlighted with a distinct yellow background span. This highlight spans across Tag names, attributes, and text values.
+
+### 3.3 Adorners
+Specific semantic markers like `slot`, `grid`, `flex`, and `popover` markers are appended to the title but managed via a separate layout/adorner system, overlaying on the line.

package/docs/feature-specs/elements-tree-selection-and-hover.md

@@ -0,0 +1,31 @@
+# Requirements Specification: Elements Panel Tree Selection and Hover
+
+## 1. Overview
+The Elements panel DOM tree visualizes the structure of the inspected page. As users navigate this tree—either by clicking or hovering—the panel provides visual feedback to indicate the currently active node and offers contextual actions like a console hint and an AI assistance button.
+
+## 2. Functional Requirements
+
+### 2.1 Selection State
+*   **Visual Indicator**: When a tree node is selected, its entire row must be highlighted visually. This is achieved by rendering a background spanning the full width of the tree, visually anchoring the node.
+*   **Full Row Coverage**: The selection highlight must extend to the left edge of the panel, accounting for the dynamic indentation of the DOM tree structure.
+*   **Behavior on Deselection**: When a node loses selection focus, the visual highlight must be removed immediately.
+
+### 2.2 Console Hint (`== $0`)
+*   **Visibility**: The `$0` hint must only appear on the currently selected tree node.
+*   **Placement**: It must be positioned to the right of the closing tag or the node's text content.
+*   **Tooltip**: Hovering over the hint must display a tooltip explaining its purpose: `Use $0 in the console to refer to this element.`
+*   **Accessibility**: The hint itself should be marked hidden from screen readers (`aria-hidden="true"`) to prevent redundancy, as the selection state inherently implies `$0` context to power users.
+
+### 2.3 Floating AI Assistance Button
+*   **Eligibility**: The AI button must only appear for valid `Element` nodes (e.g., `<button>`, `<div>`). It must not appear on text nodes, comments, but does appear for closing tags.
+*   **Visibility Conditions**:
+    *   The button must be visible when the node is actively hovered by the user's cursor.
+    *   The button must also be visible when the node currently holds the selection state (even if not hovered).
+*   **Action**: Clicking the button must:
+    *   Select the node (if it wasn't already selected).
+    *   Open the AI assistance panel with the context of the selected node.
+    *   Not propagate the click event to the underlying row (which might otherwise cause tree expansion/collapse).
+*   **Visual Design**: It should render as a floating button using the standard DevTools AI icon, with the tooltip matching the registered AI action title.
+
+## 3. Implementation Details (Declarative UI)
+The selection background, `$0` hint, and AI floating button are integrated into the primary Lit-html render cycle (`DEFAULT_VIEW`) for the tree element. This replaces previous imperative DOM creation strategies, routing all visibility and styling updates through a unified state object passed to the view.

package/docs/get_the_code.md

@@ -250,19 +250,19 @@ This works with Chromium 79 or later.
 To run on **Mac**:
 
 ```bash
-<path-to-devtools-frontend>./third_party/chrome/chrome-mac/Google\ Chrome\ for\ Testing.app/Contents/MacOS/Google\ Chrome\ for\ Testing --disable-infobars --disable-features=MediaRouter --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end) --use-mock-keychain
+<path-to-devtools-frontend>./third_party/chrome/chrome-mac-{arm64|x64}/chrome-mac-{arm64|x64}/Google\ Chrome\ for\ Testing.app/Contents/MacOS/Google\ Chrome\ for\ Testing --disable-infobars --disable-features=MediaRouter --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end) --use-mock-keychain
 ```
 
 To run on **Linux**:
 
 ```bash
-<path-to-devtools-frontend>./third_party/chrome/chrome-linux/chrome --disable-infobars --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
+<path-to-devtools-frontend>./third_party/chrome/chrome-linux/chrome-linux64/chrome --disable-infobars --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
 ```
 
 To run on **Windows**:
 
 ```bash
-<path-to-devtools-frontend>\third_party\chrome\chrome-win\chrome.exe --disable-infobars --custom-devtools-frontend="<path-to-devtools-frontend>\out\Default\gen\front_end"
+<path-to-devtools-frontend>\third_party\chrome\chrome-win\chrome-win64\chrome.exe --disable-infobars --custom-devtools-frontend="<path-to-devtools-frontend>\out\Default\gen\front_end"
 ```
 
 Note that `$(realpath out/Default/gen/front_end)` expands to the absolute path to build artifacts for DevTools frontend.

package/front_end/core/host/UserMetrics.ts

@@ -906,7 +906,7 @@ export enum IssueCreated {
   'SharedArrayBufferIssue::TransferIssue' = 36,
   'SharedArrayBufferIssue::CreationIssue' = 37,
   LowTextContrastIssue = 41,
-  'CorsIssue::InsecurePrivateNetwork' = 42,
+  'CorsIssue::InsecureLocalNetwork' = 42,
   'CorsIssue::InvalidHeaders' = 44,
   'CorsIssue::WildcardOriginWithCredentials' = 45,
   'CorsIssue::PreflightResponseInvalid' = 46,
@@ -925,7 +925,6 @@ export enum IssueCreated {
   DeprecationIssue = 60,
   'ClientHintIssue::MetaTagAllowListInvalidOrigin' = 61,
   'ClientHintIssue::MetaTagModifiedHTML' = 62,
-  'CorsIssue::PreflightAllowPrivateNetworkError' = 63,
   'GenericIssue::CrossOriginPortalPostMessageError' = 64,
   'GenericIssue::FormLabelForNameError' = 65,
   'GenericIssue::FormDuplicateIdForInputError' = 66,
@@ -940,10 +939,6 @@ export enum IssueCreated {
   'GenericIssue::FormInputHasWrongButWellIntendedAutocompleteValueError' = 75,
   'StylesheetLoadingIssue::LateImportRule' = 76,
   'StylesheetLoadingIssue::RequestFailed' = 77,
-  'CorsIssue::PreflightMissingPrivateNetworkAccessId' = 78,
-  'CorsIssue::PreflightMissingPrivateNetworkAccessName' = 79,
-  'CorsIssue::PrivateNetworkAccessPermissionUnavailable' = 80,
-  'CorsIssue::PrivateNetworkAccessPermissionDenied' = 81,
   'CookieIssue::WarnThirdPartyPhaseout::ReadCookie' = 82,
   'CookieIssue::WarnThirdPartyPhaseout::SetCookie' = 83,
   'CookieIssue::ExcludeThirdPartyPhaseout::ReadCookie' = 84,
@@ -976,8 +971,9 @@ export enum IssueCreated {
   'CorsIssue::LocalNetworkAccessPermissionDenied' = 111,
   'SRIMessageSignatureIssue::ValidationFailedIntegrityMismatch' = 112,
   'ElementAccessibilityIssue::InteractiveContentSummaryDescendant' = 113,
+  'CorsIssue::InvalidLocalNetworkAccess' = 114,
   /* eslint-enable @typescript-eslint/naming-convention */
-  MAX_VALUE = 114,
+  MAX_VALUE = 115,
 }
 
 export const enum DeveloperResourceLoaded {

package/front_end/core/root/Runtime.ts

@@ -631,7 +631,6 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsAiCodeGeneration: HostConfigAiCodeGeneration,
   devToolsVeLogging: HostConfigVeLogging,
   devToolsWellKnown: HostConfigWellKnown,
-  devToolsPrivacyUI: HostConfigPrivacyUI,
   devToolsIndividualRequestThrottling: DevToolsIndividualRequestThrottling,
   /**
    * OffTheRecord here indicates that the user's profile is either incognito,

package/front_end/core/sdk/NetworkManager.ts

@@ -158,14 +158,6 @@ export class NetworkManager extends SDKModel<EventTypes> {
       void this.#networkAgent.invoke_setCacheDisabled({cacheDisabled: true});
     }
 
-    if (Root.Runtime.hostConfig.devToolsPrivacyUI?.enabled &&
-        Root.Runtime.hostConfig.thirdPartyCookieControls?.managedBlockThirdPartyCookies !== true &&
-        (Common.Settings.Settings.instance().createSetting('cookie-control-override-enabled', undefined).get() ||
-         Common.Settings.Settings.instance().createSetting('grace-period-mitigation-disabled', undefined).get() ||
-         Common.Settings.Settings.instance().createSetting('heuristic-mitigation-disabled', undefined).get())) {
-      this.cookieControlFlagsSettingChanged();
-    }
-
     void this.#networkAgent.invoke_enable({
       maxPostDataSize: MAX_EAGER_POST_REQUEST_BODY_LENGTH,
       enableDurableMessages: Root.Runtime.hostConfig.devToolsEnableDurableMessages?.enabled,
@@ -184,16 +176,6 @@ export class NetworkManager extends SDKModel<EventTypes> {
     Common.Settings.Settings.instance()
         .moduleSetting('cache-disabled')
         .addChangeListener(this.cacheDisabledSettingChanged, this);
-
-    Common.Settings.Settings.instance()
-        .createSetting('cookie-control-override-enabled', undefined)
-        .addChangeListener(this.cookieControlFlagsSettingChanged, this);
-    Common.Settings.Settings.instance()
-        .createSetting('grace-period-mitigation-disabled', undefined)
-        .addChangeListener(this.cookieControlFlagsSettingChanged, this);
-    Common.Settings.Settings.instance()
-        .createSetting('heuristic-mitigation-disabled', undefined)
-        .addChangeListener(this.cookieControlFlagsSettingChanged, this);
   }
 
   static forRequest(request: NetworkRequest): NetworkManager|null {
@@ -346,23 +328,6 @@ export class NetworkManager extends SDKModel<EventTypes> {
     void this.#networkAgent.invoke_setCacheDisabled({cacheDisabled: enabled});
   }
 
-  private cookieControlFlagsSettingChanged(): void {
-    const overridesEnabled =
-        Boolean(Common.Settings.Settings.instance().createSetting('cookie-control-override-enabled', undefined).get());
-    const gracePeriodEnabled = overridesEnabled ?
-        Boolean(
-            Common.Settings.Settings.instance().createSetting('grace-period-mitigation-disabled', undefined).get()) :
-        false;
-    const heuristicEnabled = overridesEnabled ?
-        Boolean(Common.Settings.Settings.instance().createSetting('heuristic-mitigation-disabled', undefined).get()) :
-        false;
-    void this.#networkAgent.invoke_setCookieControls({
-      enableThirdPartyCookieRestriction: overridesEnabled,
-      disableThirdPartyCookieMetadata: gracePeriodEnabled,
-      disableThirdPartyCookieHeuristics: heuristicEnabled,
-    });
-  }
-
   override dispose(): void {
     Common.Settings.Settings.instance()
         .moduleSetting('cache-disabled')

package/front_end/core/sdk/OverlayModel.ts

@@ -791,6 +791,12 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
   async hasStyleSheetText(url: Platform.DevToolsPath.UrlString): Promise<boolean> {
     return await this.#windowControls.initializeStyleSheetText(url);
   }
+
+  inspectPanelShowRequested(_event: Protocol.Overlay.InspectNodeRequestedEvent): void {
+  }
+
+  inspectedElementWindowRestored(_event: Protocol.Overlay.InspectNodeRequestedEvent): void {
+  }
 }
 
 export class WindowControls {
@@ -925,6 +931,8 @@ export const enum Events {
   PERSISTENT_FLEX_CONTAINER_OVERLAY_STATE_CHANGED = 'PersistentFlexContainerOverlayStateChanged',
   PERSISTENT_SCROLL_SNAP_OVERLAY_STATE_CHANGED = 'PersistentScrollSnapOverlayStateChanged',
   PERSISTENT_CONTAINER_QUERY_OVERLAY_STATE_CHANGED = 'PersistentContainerQueryOverlayStateChanged',
+  INSPECT_PANEL_SHOW_REQUESTED = 'InspectPanelShowRequested',
+  INSPECTED_ELEMENT_WINDOW_RESTORED = 'InspectedElementWindowRestored',
 }
 
 export interface ChangedNodeId {
@@ -941,6 +949,8 @@ export interface EventTypes {
   [Events.PERSISTENT_FLEX_CONTAINER_OVERLAY_STATE_CHANGED]: ChangedNodeId;
   [Events.PERSISTENT_SCROLL_SNAP_OVERLAY_STATE_CHANGED]: ChangedNodeId;
   [Events.PERSISTENT_CONTAINER_QUERY_OVERLAY_STATE_CHANGED]: ChangedNodeId;
+  [Events.INSPECT_PANEL_SHOW_REQUESTED]: number;
+  [Events.INSPECTED_ELEMENT_WINDOW_RESTORED]: number;
 }
 
 export interface Highlighter {

package/front_end/devtools_compatibility.js

@@ -1036,6 +1036,10 @@
       DevToolsAPI.sendMessageToEmbedder('setChromeFlag', [featureName, value], null);
     }
 
+    requestRestart() {
+      DevToolsAPI.sendMessageToEmbedder('requestRestart', [], null);
+    }
+
     // Backward-compatible methods below this line --------------------------------------------
     /**
      * Support for legacy front-ends (<M65).

package/front_end/entrypoints/devtools_app/devtools_app.ts

@@ -5,6 +5,7 @@ import '../shell/shell.js';
 import '../../panels/css_overview/css_overview-meta.js';
 import '../../panels/elements/elements-meta.js';
 import '../../panels/browser_debugger/browser_debugger-meta.js';
+import '../../panels/greendev/greendev-meta.js';
 import '../../panels/network/network-meta.js';
 import '../../panels/security/security-meta.js';
 import '../../panels/emulation/emulation-meta.js';