chrome-devtools-frontend 1.0.1657855 → 1.0.1661063

package/front_end/panels/settings/WorkspaceSettingsTab.ts

@@ -19,23 +19,23 @@ import workspaceSettingsTabStyles from './workspaceSettingsTab.css.js';
 
 const UIStrings = {
   /**
-   * @description Text of a DOM element in Workspace Settings Tab of the Workspace settings in Settings
+   * @description Text of a DOM element in Workspace settings tab of the Workspace settings in Settings.
    */
   workspace: 'Workspace',
   /**
-   * @description Text of a DOM element in Workspace Settings Tab of the Workspace settings in Settings
+   * @description Text of a DOM element in Workspace settings tab of the Workspace settings in Settings.
    */
   mappingsAreInferredAutomatically: 'Mappings are inferred automatically.',
   /**
-   * @description Text of the add button in Workspace Settings Tab of the Workspace settings in Settings
+   * @description Text of the add button in Workspace settings tab of the Workspace settings in Settings.
    */
   addFolder: 'Add folder',
   /**
-   * @description Label element text content in Workspace Settings Tab of the Workspace settings in Settings
+   * @description Label element text content in Workspace settings tab of the Workspace settings in Settings.
    */
   folderExcludePattern: 'Exclude from workspace',
   /**
-   * @description Label for an item to remove something
+   * @description Label for an item to remove something.
    */
   remove: 'Remove',
 } as const;

package/front_end/panels/settings/components/SyncSection.ts

@@ -24,38 +24,38 @@ import syncSectionStyles from './syncSection.css.js';
 
 const UIStrings = {
   /**
-   * @description Text shown to the user in the Settings UI. 'This setting' refers
+   * @description Text shown to the user in Settings. ‘This setting’ refers
    * to a checkbox that is disabled.
    */
   syncDisabled: 'To turn this setting on, you must enable Chrome sync.',
   /**
-   * @description Text shown to the user in the Settings UI. Explains why the checkbox
-   * for saving DevTools settings to the user's Google account is inactive.
+   * @description Text shown to the user in Settings. Explains why the checkbox
+   * for saving DevTools settings to the user’s Google account is inactive.
    */
   preferencesSyncDisabled: 'You need to first enable saving `Chrome` settings in your `Google` account.',
   /**
-   * @description Label for the account email address. Shown in the DevTools Settings UI in
+   * @description Label for the account email address. Shown in DevTools Settings in
    * front of the email address currently used for Chrome Sync.
    */
   signedIn: 'Signed into Chrome as:',
   /**
-   * @description Label for the account settings. Shown in the DevTools Settings UI in
-   * case the user is not logged in to Chrome.
+   * @description Label for the account settings. Shown in DevTools Settings when
+   * the user is not logged in to Chrome.
    */
-  notSignedIn: 'You\'re not signed into Chrome.',
+  notSignedIn: 'You’re not signed into Chrome.',
   /**
    * @description Label for the Google Developer Program profile status that corresponds to
-   * standard plan (No subscription).
+   * the standard plan (no subscription).
    */
   gdpStandardPlan: 'Standard plan',
   /**
    * @description Label for the Google Developer Program subscription status that corresponds to
-   * `PREMIUM_ANNUAL` plan.
+   * the `PREMIUM_ANNUAL` plan.
    */
   gdpPremiumSubscription: 'Premium',
   /**
    * @description Label for the Google Developer Program subscription status that corresponds to
-   * `PRO_ANNUAL` plan.
+   * the `PRO_ANNUAL` plan.
    */
   gdpProSubscription: 'Pro',
   /**
@@ -64,7 +64,7 @@ const UIStrings = {
    */
   gdpUnknownSubscription: 'Unknown plan',
   /**
-   * @description Label for Sign-Up button for the Google Developer Program profiles.
+   * @description Label for sign-up button for Google Developer Program profiles.
    */
   signUp: 'Sign up',
   /**
@@ -72,7 +72,7 @@ const UIStrings = {
    */
   viewProfile: 'View profile',
   /**
-   * @description Text for tooltip shown on hovering over "Relevant Data" in the disclaimer text for AI code completion.
+   * @description Text for tooltip shown on hovering over “Relevant data” in the disclaimer text for GDP badges.
    */
   tooltipDisclaimerText:
       'When you qualify for a badge, the badge’s identifier and the type of activity you did to earn it are sent to Google',

package/front_end/panels/settings/emulation/DevicesSettingsTab.ts

@@ -16,25 +16,25 @@ import devicesSettingsTabStyles from './devicesSettingsTab.css.js';
 
 const UIStrings = {
   /**
-   * @description Title for a section of the UI that shows all of the custom devices the user can emulate, in the Device Toolbar.
+   * @description Title for a section of the UI that shows all of the custom devices the user can emulate, in the device toolbar.
    */
   customDevices: 'Custom devices',
   /**
-   * @description Title for a section of the UI that shows all of the default devices the user can emulate, in the Device Toolbar.
+   * @description Title for a section of the UI that shows all of the default devices the user can emulate, in the device toolbar.
    */
   defaultDevices: 'Default devices',
   /**
-   * @description Button to add a custom device (e.g. phone, tablet) the Device Toolbar.
+   * @description Button to add a custom device (e.g., phone, tablet) to the device toolbar.
    */
   addCustomDevice: 'Add custom device',
   /**
-   * @description Label/title for UI to add a new custom device type. Device means mobile/tablet etc.
+   * @description Label/title for UI to add a new custom device type. Device means mobile/tablet, etc.
    */
   device: 'Device',
   /**
    * @description Placeholder for text input for the name of a custom device.
    */
-  deviceName: 'Device Name',
+  deviceName: 'Device name',
   /**
    * @description Placeholder text for text input for the width of a custom device in pixels.
    */
@@ -48,32 +48,32 @@ const UIStrings = {
    */
   devicePixelRatio: 'Device pixel ratio',
   /**
-   * @description Label in the Devices settings pane for the user agent string input of a custom device
+   * @description Label in the Devices settings tab for the user agent string input of a custom device.
    */
   userAgentString: 'User agent string',
   /**
-   * @description Tooltip text for a drop-down in the Devices settings pane, for the 'user agent type' input of a custom device.
-   * 'Type' refers to different options e.g. mobile or desktop.
+   * @description Tooltip text for a drop-down in the Devices settings tab for the user agent type input of a custom device.
+   * 'Type' refers to different options, such as mobile or desktop.
    */
   userAgentType: 'User agent type',
   /**
-   * @description Error message in the Devices settings pane that declares the maximum length of the device name input
+   * @description Error message in the Devices settings tab that declares the maximum length of the device name input.
    * @example {50} PH1
    */
   deviceNameMustBeLessThanS: 'Device name must be less than {PH1} characters.',
   /**
-   * @description Error message in the Devices settings pane that declares that the device name input must not be empty
+   * @description Error message in the Devices settings tab that declares that the device name input must not be empty.
    */
-  deviceNameCannotBeEmpty: 'Device name cannot be empty.',
+  deviceNameCannotBeEmpty: 'Device name can’t be empty.',
   /**
    * @description Success message for screen readers when device is added.
    * @example {TestDevice} PH1
    */
   deviceAddedOrUpdated: 'Device {PH1} successfully added/updated.',
   /**
-   * @description Error message in the Devices settings pane shown when the user agent string is empty.
+   * @description Error message in the Devices settings tab shown when the user agent string is empty.
    */
-  userAgentStringCannotBeEmpty: 'User agent string cannot be empty.',
+  userAgentStringCannotBeEmpty: 'User agent string can’t be empty.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/settings/emulation/DevicesSettingsTab.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -22,12 +22,12 @@ const {html} = Lit;
 
 const UIStrings = {
   /**
-   * @description Title for user agent client hints form
+   * @description Title for user agent client hints form.
    */
   title: 'User agent client hints',
   /**
    * @description Heading for user agent section.
-   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge etc.
+   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge, etc.
    */
   useragent: 'User agent (Sec-CH-UA)',
   /**
@@ -36,60 +36,60 @@ const UIStrings = {
   fullVersionList: 'Full version list (Sec-CH-UA-Full-Version-List)',
   /**
    * @description ARIA label for a form with properties for a single brand in a brand list. The form includes a brand name input field, a version
-   * input field and a delete icon. Brand refer to different browser brands/vendors like Google Chrome, Microsoft Edge etc.
+   * input field and a delete icon. Brands refer to different browser brands/vendors like Google Chrome, Microsoft Edge, etc.
    */
   brandProperties: 'User agent properties',
   /**
-   * @description Input field placeholder for brands browser name.
-   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge etc.
+   * @description Input field placeholder for brand’s browser name.
+   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge, etc.
    */
   brandName: 'Brand',
   /**
-   * @description Aria label for brands browser name input field.
-   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge etc.
+   * @description ARIA label for brand’s browser name input field.
+   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge, etc.
    * @example {index} PH1
    */
   brandNameAriaLabel: 'Brand {PH1}',
   /**
    * @description Input field placeholder for significant brand version.
-   * Brands here relate to different browser brands/vendors like Google Chrome (v89), Microsoft Edge (v92) etc.
+   * Brands here relate to different browser brands/vendors like Google Chrome (v89), Microsoft Edge (v92), etc.
    */
   significantBrandVersionPlaceholder: 'Significant version (e.g. 87)',
   /**
    * @description Input field placeholder for brand version.
-   * Brands here relate to different browser brands/vendors like Google Chrome (v89), Microsoft Edge (v92) etc.
+   * Brands here relate to different browser brands/vendors like Google Chrome (v89), Microsoft Edge (v92), etc.
    */
   brandVersionPlaceholder: 'Version (e.g. 87.0.4280.88)',
   /**
-   * @description Aria label for brands browser version input field.
-   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge etc.
+   * @description ARIA label for brand’s browser version input field.
+   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge, etc.
    * @example {index} PH1
    */
   brandVersionAriaLabel: 'Version {PH1}',
   /**
    * @description Button title for adding another brand in brands section to client hints.
-   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge etc.
+   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge, etc.
    */
-  addBrand: 'Add Brand',
+  addBrand: 'Add brand',
   /**
-   * @description Tooltip and aria label for delete icon for deleting browser brand from brands user agent section.
-   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge etc.
+   * @description Tooltip and ARIA label for delete icon for deleting browser brand from brands user agent section.
+   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge, etc.
    */
   brandUserAgentDelete: 'Delete brand from user agent section',
   /**
-   * @description Tooltip and aria label for delete icon for deleting user agent from brands full version list.
-   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge etc.
+   * @description Tooltip and ARIA label for delete icon for deleting user agent from brands full version list.
+   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge, etc.
    */
   brandFullVersionListDelete: 'Delete brand from full version list',
 
   /**
    * @description Heading for the form factors section.
    */
-  formFactorsTitle: 'Form Factors (Sec-CH-UA-Form-Factors)',
+  formFactorsTitle: 'Form factors (Sec-CH-UA-Form-Factors)',
   /**
    * @description ARIA label for the group of form factor checkboxes.
    */
-  formFactorsGroupAriaLabel: 'Available Form Factors',
+  formFactorsGroupAriaLabel: 'Available form factors',
   /**
    * @description Form factor option: Desktop.
    */
@@ -128,7 +128,7 @@ const UIStrings = {
    */
   fullBrowserVersionPlaceholder: 'Full browser version (e.g. 87.0.4280.88)',
   /**
-   * @description Label for platform heading section, platform relates to OS like Android, Windows etc.
+   * @description Label for platform heading section. Platform relates to OS like Android, Windows, etc.
    */
   platformLabel: 'Platform (Sec-CH-UA-Platform / Sec-CH-UA-Platform-Version)',
   /**
@@ -136,31 +136,31 @@ const UIStrings = {
    */
   platformProperties: 'Platform properties',
   /**
-   * @description Version for platform input field, platform relates to OS like Android, Windows etc.
+   * @description Version for platform input field. Platform relates to OS like Android, Windows, etc.
    */
   platformVersion: 'Platform version',
   /**
-   * @description Placeholder for platform name input field, platform relates to OS like Android, Windows etc.
+   * @description Placeholder for platform name input field. Platform relates to OS like Android, Windows, etc.
    */
   platformPlaceholder: 'Platform (e.g. Android)',
   /**
-   * @description Label for architecture (Eg: x86, x64, arm) input field.
+   * @description Label for architecture (e.g., x86, x64, arm) input field.
    */
   architecture: 'Architecture (Sec-CH-UA-Arch)',
   /**
-   * @description Placeholder for architecture (Eg: x86, x64, arm) input field.
+   * @description Placeholder for architecture (e.g., x86, x64, arm) input field.
    */
   architecturePlaceholder: 'Architecture (e.g. x86)',
   /**
-   * @description Device model row, including device model input field and mobile checkbox
+   * @description Device model row, including device model input field and mobile checkbox.
    */
   deviceProperties: 'Device properties',
   /**
-   * @description Label for Device Model input field.
+   * @description Label for device model input field.
    */
   deviceModel: 'Device model (Sec-CH-UA-Model)',
   /**
-   * @description Label for Mobile phone checkbox.
+   * @description Label for mobile phone checkbox.
    */
   mobileCheckboxLabel: 'Mobile',
   /**
@@ -168,7 +168,7 @@ const UIStrings = {
    */
   update: 'Update',
   /**
-   * @description Field Error message in the Device settings pane that shows that the entered value has characters that can't be represented in the corresponding User Agent Client Hints
+   * @description Field error message in the Devices settings tab that shows that the entered value has characters that can't be represented in the corresponding user agent client hints.
    */
   notRepresentable: 'Not representable as structured headers string.',
   /**
@@ -178,16 +178,16 @@ const UIStrings = {
       'User agent client hints are an alternative to the user agent string that identify the browser and the device in a more structured way with better privacy accounting.',
   /**
    * @description Success message when brand row is successfully added in client hints form.
-   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge etc.
+   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge, etc.
    */
   addedBrand: 'Added brand row',
   /**
    * @description Success message when brand row is successfully deleted in client hints form.
-   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge etc.
+   * Brands here relate to different browser brands/vendors like Google Chrome, Microsoft Edge, etc.
    */
   deletedBrand: 'Deleted brand row',
   /**
-   * @description Text that is usually a hyperlink to more documentation
+   * @description Text that is usually a hyperlink to more documentation.
    */
   learnMore: 'Learn more',
 } as const;

package/front_end/panels/settings/emulation/emulation-meta.ts

@@ -9,7 +9,7 @@ import type * as Emulation from './emulation.js';
 
 const UIStrings = {
   /**
-   * @description Title of the Devices tab/tool. Devices refers to e.g. phones/tablets.
+   * @description Title of the Devices tab/tool. Devices refers to e.g., phones/tablets.
    */
   devices: 'Devices',
   /**

package/front_end/panels/settings/settings-meta.ts

@@ -13,59 +13,59 @@ import type * as Settings from './settings.js';
 
 const UIStrings = {
   /**
-   * @description Text for keyboard shortcuts
+   * @description Text for keyboard shortcuts.
    */
   shortcuts: 'Shortcuts',
   /**
-   * @description Text in Settings Screen of the Settings
+   * @description Text in Settings.
    */
   preferences: 'Preferences',
   /**
-   * @description Text in Settings Screen of the Settings
+   * @description Text in Settings.
    */
   experiments: 'Experiments',
   /**
-   * @description Title of Ignore list settings
+   * @description Title of Ignore list settings.
    */
   ignoreList: 'Ignore list',
   /**
-   * @description Command for showing the keyboard shortcuts in Settings
+   * @description Command for showing the keyboard shortcuts in Settings.
    */
   showShortcuts: 'Show Shortcuts',
   /**
-   * @description Command for showing the preference tab in the Settings Screen
+   * @description Command for showing the Preferences tab in Settings.
    */
   showPreferences: 'Show Preferences',
   /**
-   * @description Command for showing the experiments tab in the Settings Screen
+   * @description Command for showing the Experiments tab in Settings.
    */
   showExperiments: 'Show Experiments',
   /**
-   * @description Command for showing the Ignore list settings
+   * @description Command for showing the Ignore list settings.
    */
   showIgnoreList: 'Show Ignore list',
   /**
-   * @description Name of the Settings view
+   * @description Name of the Settings view.
    */
   settings: 'Settings',
   /**
-   * @description Text for the documentation of something
+   * @description Text for the documentation of something.
    */
   documentation: 'Documentation',
   /**
-   * @description Text for AI innovation settings
+   * @description Text for AI innovations settings.
    */
   aiInnovations: 'AI innovations',
   /**
-   * @description Command for showing the AI innovation settings
+   * @description Command for showing the AI innovations settings.
    */
   showAiInnovations: 'Show AI innovations',
   /**
-   * @description Text of a DOM element in Workspace Settings Tab of the Workspace settings in Settings
+   * @description Text of a DOM element in Workspace settings tab of the Workspace settings in Settings.
    */
   workspace: 'Workspace',
   /**
-   * @description Command for showing the Workspace tool in Settings
+   * @description Command for showing the Workspace tool in Settings.
    */
   showWorkspace: 'Show Workspace settings',
 } as const;

package/front_end/panels/sources/InplaceFormatterEditorAction.ts

@@ -133,8 +133,8 @@ export class InplaceFormatterEditorAction implements EditorAction {
   private async contentLoaded(
       uiSourceCode: Workspace.UISourceCode.UISourceCode, sourceFrame: UISourceCodeFrame,
       content: string): Promise<void> {
-    const {formattedContent, formattedMapping} =
-        await Formatter.ScriptFormatter.format(uiSourceCode.contentType(), sourceFrame.contentType, content);
+    const {formattedContent, formattedMapping} = await Formatter.ScriptFormatter.format(
+        Common.Settings.Settings.instance(), uiSourceCode.contentType(), sourceFrame.contentType, content);
     if (uiSourceCode.workingCopy() === formattedContent) {
       return;
     }

package/front_end/panels/sources/NavigatorView.ts

@@ -186,7 +186,8 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
   private groupByAuthored?: boolean;
   private groupByDomain?: boolean;
   private groupByFolder?: boolean;
-  constructor(jslogContext: string, enableAuthoredGrouping?: boolean) {
+  constructor(jslogContext: string, networkProjectManager: Bindings.NetworkProject.NetworkProjectManager,
+              enableAuthoredGrouping?: boolean) {
     super({
       jslog: `${VisualLogging.pane(jslogContext).track({resize: true})}`,
       useShadowDom: true,
@@ -242,10 +243,10 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     SDK.TargetManager.TargetManager.instance().observeTargets(this);
     this.resetWorkspace(Workspace.Workspace.WorkspaceImpl.instance());
     this.#workspace.uiSourceCodes().forEach(this.addUISourceCode.bind(this));
-    Bindings.NetworkProject.NetworkProjectManager.instance().addEventListener(
-        Bindings.NetworkProject.Events.FRAME_ATTRIBUTION_ADDED, this.frameAttributionAdded, this);
-    Bindings.NetworkProject.NetworkProjectManager.instance().addEventListener(
-        Bindings.NetworkProject.Events.FRAME_ATTRIBUTION_REMOVED, this.frameAttributionRemoved, this);
+    networkProjectManager.addEventListener(Bindings.NetworkProject.Events.FRAME_ATTRIBUTION_ADDED,
+                                           this.frameAttributionAdded, this);
+    networkProjectManager.addEventListener(Bindings.NetworkProject.Events.FRAME_ATTRIBUTION_REMOVED,
+                                           this.frameAttributionRemoved, this);
   }
 
   private static treeElementOrder(treeElement: UI.TreeOutline.TreeElement): number {
@@ -726,7 +727,7 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
           overlayModel.highlightFrame(frame.id);
         }
       } else {
-        SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+        SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(SDK.TargetManager.TargetManager.instance());
       }
     }
     return frameNode;

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -76,40 +76,55 @@ interface ViewInput {
     scope: SDK.DebuggerModel.ScopeChainEntry,
     objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree,
   }>|null;
+  onToggle: (objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree, expanded: boolean) => void;
+  onContextMenu: (
+      objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree,
+      contextMenu: UI.ContextMenu.ContextMenu,
+      ) => void;
 }
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
-  const createScopeSectionTreeElement =
-      (scope: SDK.DebuggerModel.ScopeChainEntry,
-       objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree): TemplateResult => {
-        let emptyPlaceholder: Common.UIString.LocalizedString|null = null;
-        if (scope.type() === Protocol.Debugger.ScopeType.Local ||
-            scope.type() === Protocol.Debugger.ScopeType.Closure) {
-          emptyPlaceholder = i18nString(UIStrings.noVariables);
-        }
-        const icon = scope.icon();
-        const {title, subtitle} = scopeTitle(scope);
-        const section = new ObjectUI.ObjectPropertiesSection.RootElement(objectTree, input.linkifier, emptyPlaceholder);
-        section.listItemElement.classList.add('scope-chain-sidebar-pane-section');
-        section.listItemElement.setAttribute('aria-label', title);
-
-        const titleNode = document.createDocumentFragment();
-        // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-        render(
-            html`<div class='scope-chain-sidebar-pane-section-header tree-element-title'>${
-                icon ? html`<img class=scope-chain-sidebar-pane-section-icon src=${icon}>` : nothing}
-                   <div class=scope-chain-sidebar-pane-section-subtitle>${subtitle}</div>
-                   <div class=scope-chain-sidebar-pane-section-title>${title}</div>
-                 </div>`,
-            titleNode);
-        section.title = titleNode;
+  const createScopeSection = ({scope, objectTree}: {
+    scope: SDK.DebuggerModel.ScopeChainEntry,
+    objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree,
+  }): TemplateResult => {
+    let emptyPlaceholder: Common.UIString.LocalizedString|null = null;
+    if (scope.type() === Protocol.Debugger.ScopeType.Local || scope.type() === Protocol.Debugger.ScopeType.Closure) {
+      emptyPlaceholder = i18nString(UIStrings.noVariables);
+    }
+    const icon = scope.icon();
+    const {title, subtitle} = scopeTitle(scope);
 
-        if (scope === input.scopeChain?.[0]?.scope) {
-          section.select(/* omitFocus */ true);
-        }
+    // clang-format off
+    return html`
+          <li role="treeitem"
+              class="scope-chain-sidebar-pane-section"
+              aria-label=${title}
+              ?open=${objectTree.expanded}
+              @expand=${(e: Event) => {
+                const customEvent = e as UI.TreeOutline.TreeViewElement.ExpandEvent;
+                input.onToggle(objectTree, customEvent.detail.expanded);
+              }}
+              @contextmenu=${(e: Event) => {
+                const contextMenu = new UI.ContextMenu.ContextMenu(e);
+                input.onContextMenu(objectTree, contextMenu);
+                void contextMenu.show();
+              }}>
+            <div class="scope-chain-sidebar-pane-section-header"
+                 @click=${() => {
+                   input.onToggle(objectTree, !objectTree.expanded);
+                 }}>
+              ${icon ? html`<img class="scope-chain-sidebar-pane-section-icon" src=${icon}>` : nothing}
+              <div class="scope-chain-sidebar-pane-section-title">${title}</div>
+              <div class="scope-chain-sidebar-pane-section-subtitle">${subtitle}</div>
+            </div>
 
-        return html`<devtools-tree-wrapper .treeElement=${section}></devtools-tree-wrapper>`;
-      };
+            ${objectTree.expanded
+              ?  ObjectUI.ObjectPropertiesSection.renderObjectTree(objectTree, input.linkifier, emptyPlaceholder)
+              : html`<ul role="group"></ul>`}
+          </li>`;
+    // clang-format on
+  };
 
   render(
       // clang-format off
@@ -121,7 +136,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           <style>${ObjectUI.ObjectPropertiesSection.objectValueStyles}</style>
           <style>${ObjectUI.ObjectPropertiesSection.objectPropertiesSectionStyles}</style>
           <style>${scopeChainSidebarPaneStyles}</style>
-          ${input.scopeChain?.map(({scope, objectTree}) => createScopeSectionTreeElement(scope, objectTree)) ?? nothing}
+          ${input.scopeChain?.map(item => createScopeSection(item)) ?? nothing}
         </ul>`}>
       </devtools-tree>` : html`
       <div class=gray-info-message tabindex=-1>${
@@ -212,13 +227,41 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
   }
 
   override performUpdate(): void {
-    this.#view(
-        {
-          linkifier: this.#linkifier,
-          isPaused: Boolean(this.#scopeChainModel),
-          scopeChain: this.#scopeChain,
-        },
-        {}, this.contentElement);
+    this.#view({
+      linkifier: this.#linkifier,
+      isPaused: Boolean(this.#scopeChainModel),
+      scopeChain: this.#scopeChain,
+      onToggle: (objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree, expanded: boolean) => {
+        objectTree.expanded = expanded;
+        this.requestUpdate();
+      },
+      onContextMenu: (
+          objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree,
+          contextMenu: UI.ContextMenu.ContextMenu,
+          ) => {
+        ObjectUI.ObjectPropertiesSection.populateObjectTreeContextMenu(
+            contextMenu,
+            objectTree,
+            async () => {
+              await objectTree.expandRecursively(ObjectUI.ObjectPropertiesSection.EXPANDABLE_MAX_DEPTH);
+              this.requestUpdate();
+            },
+            () => {
+              objectTree.collapseRecursively();
+              this.requestUpdate();
+            },
+            () => {
+              objectTree.sortPropertiesAlphabetically = !objectTree.sortPropertiesAlphabetically;
+              this.requestUpdate();
+            },
+            () => {
+              objectTree.includeNullOrUndefinedValues = !objectTree.includeNullOrUndefinedValues;
+              this.requestUpdate();
+            },
+        );
+      },
+    },
+               {}, this.contentElement);
   }
 
   #buildScopeChain({scopeChain}: SourceMapScopes.ScopeChainModel.ScopeChain): void {
@@ -240,6 +283,9 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
         readOnly: false,
         expansionTracker,
       });
+      objectTree.addEventListener(ObjectUI.ObjectPropertiesSection.ObjectTreeNodeBase.Events.CHILDREN_CHANGED, () => {
+        this.requestUpdate();
+      });
       void expansionTracker.apply(objectTree);
       objectTree.addExtraProperties(...scope.extraProperties());
       if (scope.type() === Protocol.Debugger.ScopeType.Global) {