chrome-devtools-frontend 1.0.1579812 → 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/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/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';