chrome-devtools-frontend 1.0.1657855 → 1.0.1661063

package/.agents/skills/evaluate-ai-css-completion/SKILL.md

@@ -0,0 +1,133 @@
+---
+name: evaluate-ai-css-completion
+description: Expose a temporary evaluation hook in DevTools and run a Puppeteer script to validate CSS code completion trigger rates.
+---
+
+# Evaluate CSS Completion Skill
+
+This skill allows you to temporarily expose an evaluation hook in DevTools to measure CSS code completion trigger rates using a Puppeteer script.
+
+> [!WARNING]
+> **NEVER commit the `devtools_app.ts` patch.** It is only for local evaluation. Always revert it before uploading your CL.
+
+## Step 1: Apply the Temporary Patch
+
+Modify `front_end/entrypoints/devtools_app/devtools_app.ts` to expose the global `testCssCompletion` hook.
+
+Add the following code at the end of `front_end/entrypoints/devtools_app/devtools_app.ts`:
+
+```typescript
+// --- TEMPORARY EVALUATION HOOK ---
+// TEMPORARY PATCH - REMOVE BEFORE COMMIT
+
+import * as Host from '../../core/host/host.js';
+import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
+
+(self as any).testCss = {
+  getCases() {
+    return [
+      {
+        name: 'Generic CSS Test Case',
+        url: null,
+        prefix: 'h1 { font-s',
+        suffix: ' }',
+      },
+      // Add more test cases here
+    ];
+  },
+
+  async evaluate(uiSourceCodeUrl: string | null, prefix: string, suffix: string, additionalFiles?: any[]) {
+    const aidaClient = new Host.AidaClient.AidaClient();
+    const completion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
+      {aidaClient},
+      AiCodeCompletion.AiCodeCompletion.ContextFlavor.STYLES
+    );
+
+    const formattedAdditionalFiles = additionalFiles?.map(f => ({
+      path: f.path || f.name,
+      content: f.content || f.text,
+      included_reason: f.included_reason ?? Host.AidaClient.Reason.RELATED_FILE,
+    }));
+
+    const result = await completion.completeCode(
+      prefix,
+      suffix,
+      prefix.length,
+      Host.AidaClient.AidaInferenceLanguage.CSS,
+      formattedAdditionalFiles
+    );
+
+    return {
+      hasSuggestion: result.response !== null && result.response.generatedSamples.length > 0,
+      suggestions: result.response?.generatedSamples.map(s => s.generationString) ?? [],
+      injectedFiles: formattedAdditionalFiles?.map(f => f.path) ?? [],
+    };
+  }
+};
+// ----------------------------------
+```
+
+## Step 2: Launch Chrome with Local DevTools
+
+Use the `npm start` script to build DevTools, launch Chrome Canary with remote debugging, and automatically load your local build.
+
+You must specify a persistent user data directory so you can log in once and reuse the session:
+
+```bash
+npm start -- --browser=canary --remote-debugging-port=9222 --user-data-dir=/tmp/devtools-ai-evaluate-css-completion
+```
+
+> [!IMPORTANT]
+> **Instructions for the Agent:**
+> After launching Chrome, you MUST print the following checklist to the user and wait for their explicit confirmation before running the evaluation script:
+> 1. Sign in to Chrome with your corporate account in the new window.
+> 2. Open DevTools, go to **Settings** (gear icon) > **AI Innovations**, and ensure **Code Completions** is enabled.
+> 3. Ask the user to reply when they are ready.
+
+*   Keep this process running (it will watch and rebuild changes).
+
+## Step 3: Configure Test Cases
+
+Before running the evaluation, configure your test cases directly in `front_end/entrypoints/devtools_app/devtools_app.ts` inside the `getCases()` method of the patch you applied in Step 1.
+
+For example, to test spacing sensitivity, update the returned array:
+```typescript
+  getCases() {
+    return [
+      {
+        name: 'With CSS Context',
+        url: null,
+        prefix: 'h1 { font-s',
+        suffix: ' }',
+        additionalFiles: [
+          {
+            path: 'other.css',
+            content: 'body { color: red; }',
+          }
+        ]
+      }
+    ];
+  }
+```
+
+## Step 4: Run the Evaluation Script
+
+Run the Puppeteer script to execute the evaluation:
+
+```bash
+node .agents/skills/evaluate-ai-css-completion/scripts/evaluate.js
+```
+
+> [!IMPORTANT]
+> **Instructions for the Agent:**
+> Since the evaluation script runs asynchronously as a background task, you MUST use the `schedule` tool to check the log file of the evaluation task every 10 seconds until it completes. Do not poll using status checks in a loop.
+
+The script will connect to the DevTools instance, trigger completions, and output the results.
+
+## Step 5: Revert the Patch
+
+Once the evaluation is complete and you have recorded the results, revert the patch in `devtools_app.ts`:
+
+```bash
+git checkout front_end/entrypoints/devtools_app/devtools_app.ts
+```

package/.agents/skills/evaluate-ai-css-completion/scripts/evaluate.js

@@ -0,0 +1,76 @@
+// 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.
+
+/* eslint-disable no-console */
+
+const puppeteer = require('puppeteer-core');
+
+async function runEvaluation() {
+  console.log('Connecting to Chrome...');
+  const browser = await puppeteer.connect({browserURL: 'http://127.0.0.1:9222', defaultViewport: null});
+
+  try {
+    console.log('Opening test page (example.com)...');
+    const testPage = await browser.newPage();
+    await testPage.goto('https://example.com');
+
+    console.log('Waiting for DevTools target...');
+    const devtoolsTarget = await browser.waitForTarget(t => {
+      return t.url().startsWith('devtools://') || t.url().includes('inspector.html');
+    }, {timeout: 10000});
+
+    console.log('Connecting to DevTools page...');
+    const devtoolsPage = await devtoolsTarget.page();
+    if (!devtoolsPage) {
+      throw new Error('Could not get DevTools page object. Make sure DevTools is undocked or opened in a tab.');
+    }
+    console.log('DevTools URL:', devtoolsPage.url());
+
+    console.log('Reloading DevTools to ensure patch is loaded...');
+    await devtoolsPage.reload();
+
+    console.log('Waiting for DevTools to initialize and hook to be available...');
+    try {
+      await devtoolsPage.waitForFunction(() => typeof self.testCss?.getCases === 'function', {timeout: 15000});
+    } catch {
+      throw new Error('testCss.getCases hook not found. Did you apply the patch and build? Is this the local build?');
+    }
+
+    console.log('Fetching test cases from DevTools...');
+    const testCases = await devtoolsPage.evaluate(() => self.testCss.getCases());
+    console.log(`Found ${testCases.length} test cases.`);
+
+    let testCount = 0;
+    for (const tc of testCases) {
+      console.log(`\nRunning: ${tc.name}`);
+      // Delay to avoid rate limiting
+      await new Promise(resolve => setTimeout(resolve, 1000));
+
+      try {
+        const result = await devtoolsPage.evaluate(async (url, prefix, suffix, additionalFiles) => {
+          return await self.testCss.evaluate(url, prefix, suffix, additionalFiles);
+        }, tc.url, tc.prefix, tc.suffix, tc.additionalFiles);
+
+        console.log('  Result:', result);
+      } catch (e) {
+        console.error('  Failed to run test case:', e.message);
+      }
+
+      testCount++;
+      if (testCount % 20 === 0 && testCount < testCases.length) {
+        console.log('\n[INFO] Pausing for 10 seconds to avoid rate limiting...');
+        await new Promise(resolve => setTimeout(resolve, 10000));
+      }
+    }
+
+    // Cleanup tabs
+    await devtoolsPage.close();
+    await testPage.close();
+  } finally {
+    console.log('Disconnecting from Chrome...');
+    await browser.disconnect();
+  }
+}
+
+runEvaluation().catch(console.error);

package/.agents/skills/migrate-chromium-test/SKILL.md

@@ -1,22 +1,18 @@
 ---
 name: devtools-migrate-chromium-test
-description: Use when migrating chromium `third_party/blink/web_tests/http/tests/devtools/` tests to modern unit tests in `third_party/devtools-frontend/src/front_end/`.
+description: Use when migrating Chromium layout tests to DevTools unit tests
 ---
 
-# Migrating Legacy DevTools Tests
-
-The skill should be used from within a Chromium check out. The agent should make a devtools CL for the changes in `third_party/devtools-frontend`.
-
 ## Workflow
 
 1.  **Identify the Test to Move**:
 
-- Locate the legacy test file (usually `.js`) and its expectation file (`-expected.txt`) in `third_party/blink/web_tests/http/tests/devtools/`.
-- Example: `unit/datagrid-editable-longtext.js`
+- You should have already received the issue ID, the test title, and the exact local paths of the downloaded legacy test file (`.js`) and its expectation file (`-expected.txt`) in your initial prompt.
+- Refer to these local copies as you write the new modern test.
 
 2.  **Identify the Target Location**:
 
-- Find the file being tested in `third_party/devtools-frontend/src/front_end/`.
+- Find the file being tested in `front_end/`.
 - Place the new test file next to the file being tested, following the naming convention `[FileName].test.ts`.
 - Example: If testing `ui/legacy/components/data_grid/DataGrid.ts`, the test should be `ui/legacy/components/data_grid/DataGrid.test.ts`.
 
@@ -35,21 +31,23 @@ The skill should be used from within a Chromium check out. The agent should make
 
 5.  **Verify the Changes**:
 
-- Build the unittests target: `autoninja -C out/Default <target_path>:unittests`
-- Run the test using the DevTools test runner: `npm run test -- <relative_path_to_test>`
+- Use the `verification` skill to correctly build the project and run the new test.
 - Ensure the test passes.
 
-6.  **Clean Up**:
+6. **Evaluate Test Completeness and Utility**:
 
-- Delete the original legacy test file and its expectation file from `third_party/blink/web_tests/...`.
-- _(Optional)_ If instructed by the user, you may leave the files or handle them differently.
+- Critically review the newly created test to ensure it provides meaningful coverage. Cross-reference it with the original Chromium layout test to verify that all original behaviors, edge cases, and assertions have been fully migrated and are actively being tested.
+- If the newly added test does not test any logic from the component but just the getters from the mocked data explain to the user that this test does not add value and it's better to close it without adding the test. Provide a command without executing it to close the issue as "Fixed".
+- If the newly added test uses too extensive mocks of CDP objects and methods explain to the user that the test should be foundation e2e test instead of unit test and we won't migrate it. Provide a command without executing it to close the issue as "Won't Fix (Infeasible)".
+
+7. Upload a CL with your changes using the `version-control` skill. Make sure the CL description has a `Fixed: <issue number>` trailer instead of `Bug: <issue number>`.
 
 ## Example Conversion
 
 ### Legacy Test (`datagrid-editable-longtext.js`)
 
 ```javascript
-import { TestRunner } from 'test_runner';
+import {TestRunner} from 'test_runner';
 import * as DataGrid from 'devtools/ui/legacy/components/data_grid/data_grid.js';
 
 (async function () {
@@ -65,8 +63,8 @@ import * as DataGrid from 'devtools/ui/legacy/components/data_grid/data_grid.js'
 
 ```typescript
 import * as DataGrid from './data_grid.js';
-import { renderElementIntoDOM } from '../../../../testing/DOMHelpers.js';
-import { describeWithEnvironment } from '../../../../testing/EnvironmentHelpers.js';
+import {renderElementIntoDOM} from '../../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
 
 describeWithEnvironment('DataGrid', () => {
   it('tests long text in datagrid', () => {
@@ -86,59 +84,6 @@ describeWithEnvironment('DataGrid', () => {
 - **Ignoring Environment Failures**: In some environments, `npm run test` may exit with code 1 due to memory leaks (e.g., `WebFrame LEAKED`) or infrastructure issues (e.g., `gpkg` or `Corp Airlock` logs), even if the tests themselves passed. Always check the end of the test log for `TOTAL: X SUCCESS` to confirm if the test logic was successful.
 - **Rendering issue**: If you encounter an issue where checking values never gives correct information it may be due to async rendering. To resolve that you may trying using `raf()` from `front_end/testing/DOMHelpers.ts` to wait for the next rendering cycle.
 
-## Creating a DevTools CL from a Chromium Checkout
-
-To create a DevTools Change List (CL) from a Chromium checkout, you'll be working within the devtools-frontend repository, which is located inside your Chromium source tree. The depot_tools package (which includes git cl) must be in your PATH.
-
-Here's the typical workflow:
-
-1.  **Navigate to the DevTools Frontend Directory**:
-    The DevTools frontend code resides in `third_party/devtools-frontend/src/` within your Chromium checkout (`chromium/src`).
-
-```bash
-cd path/to/chromium/src/third_party/devtools-frontend/src/
-```
-
-2.  **Create a New Branch**:
-    It's best practice to create a new branch for your changes:
-
-```bash
-git new-branch my-devtools-feature
-```
-
-(Or use `git checkout -b my-devtools-feature`)
-
-3.  **Make Your Code Changes**:
-    Edit the files as needed for your feature or bug fix.
-
-4.  **Commit Changes Locally**:
-    Stage and commit your changes using standard Git commands:
-
-```bash
-git add .
-git commit -m "My DevTools feature description"
-```
-
-_See the Chromium guide on commit messages for best practices on formatting descriptions, including the use of tags like Bug:. _
-
-5.  **Upload the CL for Review**:
-    Use `git cl upload` to send your changes to the Chromium Gerrit code review system:
-
-```bash
-git cl upload
-```
-
-This command will create a CL on `https://chromium-review.googlesource.com`. Follow the prompts to add a description, reviewers, etc. You can also add reviewers and trigger builds through the Gerrit web UI.
-
-6.  **Code Review Process**:
-    Your CL will be reviewed by DevTools owners. You may need to address feedback by amending your commit and uploading new patch sets using `git cl upload` again. Once approved, you can land the change via the Commit Queue (CQ).
-
-### Working on Changes Across DevTools and Chromium Core
-
-- DevTools frontend (`third_party/devtools-frontend/src/`) and the main Chromium codebase (`chromium/src`) are distinct Git repositories.
-- If your work involves changes in both areas, you generally need to create separate CLs: one within the devtools-frontend repo and one within the main `chromium/src` repo.
-- The "Juggling the git submodules" section of the DevTools documentation provides guidance on managing these cross-repository changes.
-
 ## After finishing the migration
 
-Identify any helping tips that you discovered during the migration and add them to this skill.
+If you encountered any novel issues, workarounds, or helpful tips during the migration that are not already documented, please report them to the user so they can be added to the skill documentation.

package/.agents/skills/ui-eng-vision-orchestrator/SKILL.md

@@ -11,7 +11,8 @@ DevTools views into declarative `UI.Widget` components based on lit-html,
 managing a multi-pass sequential CL pipeline to ensure each code modification is
 small, testable, and highly reviewable.
 
-Refer to [ui_engineering.md](../../../docs/ui_engineering.md) for general principles.
+Refer to [ui_engineering.md](../../../docs/ui_engineering.md) for general
+principles.
 
 --------------------------------------------------------------------------------
 
@@ -28,9 +29,12 @@ Refer to [ui_engineering.md](../../../docs/ui_engineering.md) for general princi
     file matches older patterns or generic examples. Always perform a structure
     analysis of the active file first and adapt the plan to the actual, current
     code.
-4.  **Hybrid Files**: Files may contain multiple classes in different states of
-    modernization (e.g., one partially migrated class and one fully legacy
-    class). Propose modifications only for classes with actual violations.
+4.  **Hybrid Files/Multiple Classes**: Files may contain multiple classes in
+    different states of modernization (e.g., one partially migrated class and
+    one fully legacy class). If the file being migrated contains several
+    classes, the migration needs to be done separately for each class, starting
+    with the leaves and going up the dependency chain. Propose modifications
+    only for classes with actual violations.
 5.  **Coupling Analysis**: Always check the integration files (e.g., sidebar
     files, parent panel files) where the target class is instantiated to see if
     there are any direct `.element` or `.contentElement` couplings. If found,
@@ -43,12 +47,21 @@ Refer to [ui_engineering.md](../../../docs/ui_engineering.md) for general princi
     single responsibility per CL. Do not combine technology migrations (e.g.,
     converting imperative DOM to Lit-html) with base class refactoring in the
     same diff.
-8.  **Never Break Compilation**: Run a compiler build and execute the DevTools
-    test suite between every pass.
+8.  **Strict Intermediate Stability**: The code must compile and work correctly,
+    and all tests must pass after each step. We should not split the class API
+    update from its usage update.
 9.  **Establish Comprehensive Guardrails First**: Ensure both **logic tests**
-    (verifying presenter interactions and state updates) and **screenshot tests**
-    (verifying layout/styling) exist before rewriting code. If coverage is
-    missing, scaffold it first.
+    (verifying presenter interactions and state updates) and **screenshot
+    tests** (verifying layout/styling) exist before rewriting code. If coverage
+    is missing, scaffold it first.
+10. **Pre-flight Clarification**: Before starting, verify if the task is
+    underspecified or ambiguous. If so, point this out and ask for
+    clarifications before proceeding.
+11. **Step Sizing & Complexity Assessment**: Assess the complexity of each step
+    beforehand. Aim for intermediate steps that involve changing or adding
+    roughly 300 lines of code. If a step is predicted to be too complex, break
+    it down into smaller substeps. The agent must stop and report back after
+    each step or substep to allow verification.
 
 --------------------------------------------------------------------------------
 
@@ -57,17 +70,22 @@ Refer to [ui_engineering.md](../../../docs/ui_engineering.md) for general princi
 ### Plan Generation (Gated)
 
 *   **Actions**:
-    1.  Scan the target file to determine size, complexity, legacy elements
+    1.  Verify if the task is underspecified or ambiguous. If so, ask for
+        clarifications first.
+    2.  Scan the target file to determine size, complexity, legacy elements
         (e.g., `ReportView`, `ToolbarButton`, `DataGrid`, `TreeOutline`), and
         actual class inheritance. Deconstruct the file mentally (or in the plan)
         into **Business Logic** (state, event handlers) and **Rendering Logic**
         (DOM creation, CSS classes). Reference code elements by **Name** (not
         line numbers) to ensure the plan remains valid as the codebase evolves.
-        Check if the class dependencies have been migrated to the ui eng vision or not.
-    2.  Check the files depending on this file, to understand how the code in
+        Check if the class dependencies have been migrated to the ui eng vision
+        or not. If the file contains multiple classes, plan the migration
+        separately for each class, starting with the leaves and going up the
+        dependency chain.
+    3.  Check the files depending on this file, to understand how the code in
         this file is being used.
-    3.  **Dynamic Ordering Decision**: Determine whether to run
-        Logic Consolidation first or Local lit-html rendering first:
+    4.  **Dynamic Ordering Decision**: Determine whether to run Logic
+        Consolidation first or Local lit-html rendering first:
         *   **Option A (Logic First)**: Choose this if the component has a
             complex, nested state model or highly coupled event-handlers.
             Consolidating the state variables and defining the `ViewInput`
@@ -78,9 +96,9 @@ Refer to [ui_engineering.md](../../../docs/ui_engineering.md) for general princi
             DOM construction. Converting the layout to declarative Lit templates
             first (using temporary inline or local state) makes it much easier
             to isolate and group the remaining state updates afterward.
-    4.  Generate a `migration_plan.md` reflecting this ordering and outlining
+    5.  Generate a `migration_plan.md` reflecting this ordering and outlining
         the target steps.
-    5.  Halt execution and print the formatted plan in Markdown to the chat.
+    6.  Halt execution and print the formatted plan in Markdown to the chat.
         Wait for user approval.
 
 ### Baseline & Safety Scaffolding
@@ -90,8 +108,9 @@ Refer to [ui_engineering.md](../../../docs/ui_engineering.md) for general princi
 *   **Subskill to Import**: `ui-eng-vision-test-scaffolder`
 *   **Actions**:
     1.  Verify existing test coverage. Propose and add missing **logic tests**
-        for interactions and **screenshot tests** for visual validation to avoid regressions.
-    2. Pay extra attention not to skip this step.
+        for interactions and **screenshot tests** for visual validation to avoid
+        regressions.
+    2.  Pay extra attention not to skip this step.
 
 ### Logic Consolidation
 

package/.agents/skills/version-control/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: devtools-version-control
-description: Use when starting a new task, creating a branch, switching branches, managing branches, creating and uploading CLs, or handling stacked changes in the DevTools Gerrit-based workflow. ALWAYS use this instead of running standard git checkout/switch commands for branch creation.
+description: Use when starting a new task, creating a branch, switching branches, managing branches, creating and uploading CLs, handling stacked changes, or checking release and roll status in the DevTools Gerrit-based workflow. ALWAYS use this instead of running standard git checkout/switch commands for branch creation.
 ---
 
 # DevTools Version Control
@@ -73,6 +73,12 @@ To upload an updated CL:
 git cl upload -d -t "<one sentence patch set description>"
 ```
 
+## Release and Roll Status
+
+To check whether a DevTools commit (`devtools/devtools-frontend`) has rolled into `chromium/src` (`Roll status`) and what version or channel it is deployed to (`Release status`), look it up via the Chromium Dash API:
+
+`https://chromiumdash.appspot.com/fetch_commit?commit=<sha>`
+
 ## Quick Reference
 
 | Action | Command |
@@ -83,6 +89,7 @@ git cl upload -d -t "<one sentence patch set description>"
 | Upload to Gerrit | `git cl upload` |
 | Change branch parent | `git reparent-branch <new-parent>` |
 | Sync all branches | `git rebase-update` |
+| Check release & roll status | Query `https://chromiumdash.appspot.com/fetch_commit?commit=<sha>` |
 
 ## Common Mistakes
 - **Multiple commits on one branch:** Gerrit expects one commit per CL. Always `commit --amend`.

package/AUTHORS

@@ -82,6 +82,7 @@ Nourhan Hasan <nourhan.m.hasan@gmail.com>
 Paras Awasthi <awasthiparas6@gmail.com>
 Paul Fisher <paul@pfish.zone>
 Peng Zhou <zhoupeng.1996@bytedance.com>
+Percy Wang <a945970854@gmail.com>
 Per-Olov Jernberg <possan@possan.se>
 PhistucK <phistuck@gmail.com>
 Pradhuman Singh Baid <pradhumansinghbaid@gmail.com>

package/SECURITY.md

@@ -54,3 +54,6 @@ Chrome DevTools is a privileged web app running in a sandboxed renderer process,
 
 ### Side-Effect Free Evaluation
 * Side-effect free JavaScript evaluation is a best-effort developer heuristic to prevent accidental state changes, not a security boundary. Bypassing it to cause side effects on the debugged page is not a vulnerability.
+
+### Self-XSS Paste Gate
+* The self-XSS paste gate is not a security boundary. It is supposed to reduce the chance for abuse, not to fully prevent it. Issues around bypassing it are social engineering, and outside of our threat model.

package/docs/get_the_code.md

@@ -499,3 +499,9 @@ ln -s src/third_party/devtools-frontend/src devtools-frontend
 If you did run `gclient sync` first, remove the devtools-frontend directory and start over.
 
 Run `gclient sync` after creating the link to fetch the dependencies for the standalone checkout.
+
+### Known issues
+
+- GN/Siso wrappers in `depot_tools` don't assume the side-by-side solutions, and
+  always use the binaries in Chromium. Please make sure updating Chromium when
+  you get a build error.

package/eslint.config.mjs

@@ -691,6 +691,13 @@ export default defineConfig([
       'lit/quoted-expressions': ['error', 'never'],
     },
   },
+  {
+    name: 'Front-end core files',
+    files: ['front_end/core/**/*.ts'],
+    rules: {
+      '@devtools/no-instance-of-migrated-singletons': 'error',
+    },
+  },
   {
     name: 'Front-end meta files',
     files: ['front_end/**/*-meta.ts'],

package/extension-api/ExtensionAPI.d.ts

@@ -148,12 +148,69 @@ export namespace Chrome {
 
     export interface ExtensionSidebarPane extends ExtensionView {
       setHeight(height: string): void;
+
+      /**
+       * Sets an object to be displayed in the sidebar pane.
+       *
+       * If a `callback` is provided, it is invoked when the object has been set
+       * and the method returns `void`. If no `callback` is provided, the method
+       * returns a `Promise`.
+       *
+       * @param jsonObject The JSON object to display in the pane (as a string).
+       * @param rootTitle Optional title of the root node.
+       * @param callback Optional callback to be invoked when the object has been set.
+       * @returns A Promise that resolves when the object has been set if no callback is
+       * provided, otherwise void. Rejects with an error object on failure.
+       */
+      setObject(jsonObject: string, rootTitle?: string): Promise<void>;
       setObject(jsonObject: string, rootTitle?: string, callback?: () => unknown): void;
+
+      /**
+       * Evaluates an expression in the context of the inspected page and displays the
+       * result in the sidebar pane.
+       *
+       * If a `callback` is provided, it is invoked when the expression has been evaluated
+       * and the method returns `void`. If no `callback` is provided, the method
+       * returns a `Promise`.
+       *
+       * @param expression The expression to evaluate.
+       * @param rootTitle Optional title of the root node.
+       * @param evaluateOptions Options for evaluating the expression.
+       * @param callback Optional callback to be invoked when the expression has been evaluated.
+       * @returns A Promise that resolves when the expression has been evaluated if no callback is
+       * provided, otherwise void. Rejects with an error object on failure.
+       */
+      setExpression(expression: string, rootTitle?: string, evaluateOptions?: {
+        frameURL?: string,
+        useContentScriptContext?: boolean,
+        scriptExecutionContext?: string,
+      }): Promise<void>;
+      setExpression(expression: string, rootTitle?: string, evaluateOptions?: {
+        frameURL?: string,
+        useContentScriptContext?: boolean,
+        scriptExecutionContext?: string,
+      },
+                    callback?: () => unknown): void;
+
       setPage(path: string): void;
     }
 
     export interface PanelWithSidebar {
+      /**
+       * Creates a sidebar pane in the Elements or Sources panel.
+       *
+       * If a `callback` is provided, it is invoked with the sidebar pane
+       * and the method returns `void`. If no `callback` is provided, the method
+       * returns a `Promise`.
+       *
+       * @param title The title of the sidebar pane.
+       * @param callback Optional callback to be invoked when the sidebar pane has been created.
+       * @returns A Promise that resolves to the created ExtensionSidebarPane if no callback is
+       * provided, otherwise void. Rejects with an error object on failure.
+       */
+      createSidebarPane(title: string): Promise<ExtensionSidebarPane>;
       createSidebarPane(title: string, callback?: (result: ExtensionSidebarPane) => unknown): void;
+
       onSelectionChanged: EventSink<() => unknown>;
     }
 
@@ -163,7 +220,38 @@ export namespace Chrome {
       network: NetworkPanel;
       themeName: string;
 
+      /**
+       * Creates an extension panel.
+       *
+       * If a `callback` is provided, it is invoked with the panel
+       * and the method returns `void`. If no `callback` is provided, the method
+       * returns a `Promise`.
+       *
+       * @param title The title of the panel.
+       * @param iconPath The path to the icon for the panel.
+       * @param pagePath The path to the page for the panel.
+       * @param callback Optional callback to be invoked when the panel has been created.
+       * @returns A Promise that resolves to the created ExtensionPanel if no callback is
+       * provided, otherwise void. Rejects with an error object on failure.
+       */
+      create(title: string, iconPath: string, pagePath: string): Promise<ExtensionPanel>;
       create(title: string, iconPath: string, pagePath: string, callback?: (panel: ExtensionPanel) => unknown): void;
+
+      /**
+       * Opens a resource in the Sources panel.
+       *
+       * If a `callback` is provided, it is invoked when the resource has been opened
+       * and the method returns `void`. If no `callback` is provided, the method
+       * returns a `Promise`.
+       *
+       * @param url The URL of the resource.
+       * @param lineNumber The line number to highlight.
+       * @param columnNumber Optional column number to highlight.
+       * @param callback Optional callback to be invoked when the resource has been opened.
+       * @returns A Promise that resolves when the resource has been opened if no callback is
+       * provided, otherwise void. Rejects with an error object on failure.
+       */
+      openResource(url: string, lineNumber: number, columnNumber?: number): Promise<void>;
       openResource(url: string, lineNumber: number, columnNumber?: number, callback?: () => unknown): void;
 
       setOpenResourceHandler(