chrome-devtools-frontend 1.0.1534251 → 1.0.1535712

package/front_end/panels/security/CookieControlsView.ts

@@ -1,7 +1,6 @@
 // Copyright 2024 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 @devtools/no-lit-render-outside-of-view */
 
 import '../../ui/components/switch/switch.js';
 import '../../ui/components/cards/cards.js';
@@ -14,15 +13,14 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as ChromeLink from '../../ui/components/chrome_link/chrome_link.js';
 import * as Input from '../../ui/components/input/input.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as Lit from '../../ui/lit/lit.js';
+import {Directives, html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import cookieControlsViewStyles from './cookieControlsView.css.js';
 
-const {render, html} = Lit;
+const {ref} = Directives;
 
 const UIStrings = {
   /**
@@ -118,52 +116,50 @@ export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export const i18nFormatString = i18n.i18n.getFormatLocalizedString.bind(undefined, str_);
 
 export interface ViewInput {
+  thirdPartyControlsDict: Root.Runtime.HostConfig['thirdPartyCookieControls'];
+  isGracePeriodActive: boolean;
   inputChanged: (newValue: boolean, setting: Common.Settings.Setting<boolean>) => void;
   openChromeCookieSettings: () => void;
 }
 
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
-export function showInfobar(): void {
-  UI.InspectorView.InspectorView.instance().displayDebuggedTabReloadRequiredWarning(
-      i18nString(UIStrings.siteReloadMessage));
+function getChromeFlagsLink(flag: string): TemplateResult {
+  return html`
+    <devtools-chrome-link href="chrome://flags/#${flag}" tabindex="0">
+     ${flag}
+    </devtools-chrome-link>`;
 }
+const DEFAULT_VIEW: View = (input: ViewInput, _output: object, target: HTMLElement): void => {
+  // createSetting() allows us to initialize the settings with the UI binding values the first
+  // time that the browser starts, and use the existing setting value for all subsequent uses.
+  const enterpriseEnabledSetting = Common.Settings.Settings.instance().createSetting(
+      'enterprise-enabled',
+      input.thirdPartyControlsDict && input.thirdPartyControlsDict.managedBlockThirdPartyCookies &&
+              typeof input.thirdPartyControlsDict.managedBlockThirdPartyCookies === 'boolean' ?
+          input.thirdPartyControlsDict.managedBlockThirdPartyCookies :
+          false,
+      Common.Settings.SettingStorageType.GLOBAL);
+  const toggleEnabledSetting = Common.Settings.Settings.instance().createSetting(
+      'cookie-control-override-enabled',
+      input.thirdPartyControlsDict?.thirdPartyCookieRestrictionEnabled ?
+          input.thirdPartyControlsDict.thirdPartyCookieRestrictionEnabled :
+          false,
+      Common.Settings.SettingStorageType.GLOBAL);
+  const gracePeriodDisabledSetting = Common.Settings.Settings.instance().createSetting(
+      'grace-period-mitigation-disabled',
+      input.thirdPartyControlsDict?.thirdPartyCookieMetadataEnabled ?
+          input.thirdPartyControlsDict.thirdPartyCookieMetadataEnabled :
+          true,
+      Common.Settings.SettingStorageType.GLOBAL);
+  const heuristicsDisabledSetting = Common.Settings.Settings.instance().createSetting(
+      'heuristic-mitigation-disabled',
+      input.thirdPartyControlsDict?.thirdPartyCookieHeuristicsEnabled ?
+          input.thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled :
+          true,
+      Common.Settings.SettingStorageType.GLOBAL);
 
-export class CookieControlsView extends UI.Widget.VBox {
-  #view: View;
-  #isGracePeriodActive: boolean;
-  #thirdPartyControlsDict: Root.Runtime.HostConfig['thirdPartyCookieControls'];
-
-  constructor(element?: HTMLElement, view: View = (input, _, target) => {
-    // createSetting() allows us to initialize the settings with the UI binding values the first
-    // time that the browser starts, and use the existing setting value for all subsequent uses.
-    const enterpriseEnabledSetting = Common.Settings.Settings.instance().createSetting(
-        'enterprise-enabled',
-        this.#thirdPartyControlsDict && this.#thirdPartyControlsDict.managedBlockThirdPartyCookies &&
-                typeof this.#thirdPartyControlsDict.managedBlockThirdPartyCookies === 'boolean' ?
-            this.#thirdPartyControlsDict.managedBlockThirdPartyCookies :
-            false,
-        Common.Settings.SettingStorageType.GLOBAL);
-    const toggleEnabledSetting = Common.Settings.Settings.instance().createSetting(
-        'cookie-control-override-enabled',
-        this.#thirdPartyControlsDict && this.#thirdPartyControlsDict.thirdPartyCookieRestrictionEnabled ?
-            this.#thirdPartyControlsDict.thirdPartyCookieRestrictionEnabled :
-            false,
-        Common.Settings.SettingStorageType.GLOBAL);
-    const gracePeriodDisabledSetting = Common.Settings.Settings.instance().createSetting(
-        'grace-period-mitigation-disabled',
-        this.#thirdPartyControlsDict && this.#thirdPartyControlsDict.thirdPartyCookieMetadataEnabled ?
-            this.#thirdPartyControlsDict.thirdPartyCookieMetadataEnabled :
-            true,
-        Common.Settings.SettingStorageType.GLOBAL);
-    const heuristicsDisabledSetting = Common.Settings.Settings.instance().createSetting(
-        'heuristic-mitigation-disabled',
-        this.#thirdPartyControlsDict && this.#thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled ?
-            this.#thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled :
-            true,
-        Common.Settings.SettingStorageType.GLOBAL);
-
-    // clang-format off
+  // clang-format off
     const cardHeader = html `
       <div class="card-header">
         <div class="lhs">
@@ -175,11 +171,11 @@ export class CookieControlsView extends UI.Widget.VBox {
             <devtools-icon
               tabindex="0"
               name="domain"
-              ${Lit.Directives.ref((el: Element|undefined) => {
+              ${ref((el: Element|undefined) => {
                 UI.Tooltip.Tooltip.install(el as HTMLElement, i18nString(UIStrings.enterpriseTooltip));
                 (el as HTMLElement).role = 'img';
               })}>
-            </devtools-icon>` : Lit.nothing
+            </devtools-icon>` : nothing
           }
         </div>
         <div>
@@ -197,8 +193,8 @@ export class CookieControlsView extends UI.Widget.VBox {
     `;
 
     const gracePeriodControlDisabled =
-        (this.#thirdPartyControlsDict ? (!this.#thirdPartyControlsDict.thirdPartyCookieMetadataEnabled) : false) ||
-        enterpriseEnabledSetting.get() || !toggleEnabledSetting.get() || !this.#isGracePeriodActive;
+        (input.thirdPartyControlsDict ? (!input.thirdPartyControlsDict.thirdPartyCookieMetadataEnabled) : false) ||
+        enterpriseEnabledSetting.get() || !toggleEnabledSetting.get() || !input.isGracePeriodActive;
     const gracePeriodControl = html`
       <div class="card-row">
         <label class='checkbox-label'>
@@ -215,11 +211,11 @@ export class CookieControlsView extends UI.Widget.VBox {
                   i18nFormatString(UIStrings.gracePeriodExplanation, {
                     PH1: i18nString(UIStrings.gracePeriod),
                   }) :
-                (this.#thirdPartyControlsDict ? !this.#thirdPartyControlsDict?.thirdPartyCookieMetadataEnabled: false) ?
+                (input.thirdPartyControlsDict ? !input.thirdPartyControlsDict?.thirdPartyCookieMetadataEnabled: false) ?
                   i18nFormatString(UIStrings.enableFlag, {
-                    PH1: this.getChromeFlagsLink(UIStrings.tpcdMetadataGrants),
+                    PH1: getChromeFlagsLink(UIStrings.tpcdMetadataGrants),
                   }) :
-                i18nFormatString(this.#isGracePeriodActive ? UIStrings.gracePeriodExplanation : UIStrings.enrollGracePeriod, {
+                i18nFormatString(input.isGracePeriodActive ? UIStrings.gracePeriodExplanation : UIStrings.enrollGracePeriod, {
                   PH1: UI.Fragment.html`<x-link class="devtools-link" href="https://developers.google.com/privacy-sandbox/cookies/temporary-exceptions/grace-period" jslog=${VisualLogging.link('grace-period-link').track({click: true})}>${i18nString(UIStrings.gracePeriod)}</x-link>`,
                 })
               }
@@ -230,7 +226,7 @@ export class CookieControlsView extends UI.Widget.VBox {
     `;
 
     const heuristicsControlDisabled =
-        (this.#thirdPartyControlsDict ? (!this.#thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled) : false) ||
+        (input.thirdPartyControlsDict ? (!input.thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled) : false) ||
         enterpriseEnabledSetting.get() || !toggleEnabledSetting.get();
     const heuristicControl = html`
       <div class="card-row">
@@ -248,9 +244,9 @@ export class CookieControlsView extends UI.Widget.VBox {
                 i18nFormatString(UIStrings.heuristicExplanation, {
                   PH1: i18nString(UIStrings.scenarios),
                 }) :
-                (this.#thirdPartyControlsDict ? !this.#thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled: false) ?
+                (input.thirdPartyControlsDict ? !input.thirdPartyControlsDict.thirdPartyCookieHeuristicsEnabled: false) ?
                   i18nFormatString(UIStrings.enableFlag, {
-                    PH1: this.getChromeFlagsLink(UIStrings.tpcdHeuristicsGrants),
+                    PH1: getChromeFlagsLink(UIStrings.tpcdHeuristicsGrants),
                   }) :
                 i18nFormatString(UIStrings.heuristicExplanation, {
                   PH1: UI.Fragment.html`<x-link class="devtools-link" href="https://developers.google.com/privacy-sandbox/cookies/temporary-exceptions/heuristics-based-exceptions" jslog=${VisualLogging.link('heuristic-link').track({click: true})}>${i18nString(UIStrings.scenarios)}</x-link>`,
@@ -300,12 +296,24 @@ export class CookieControlsView extends UI.Widget.VBox {
               </div>
             </div>
           </devtools-card>
-          ${Boolean(enterpriseEnabledSetting.get()) ? enterpriseDisclaimer : Lit.nothing}
+          ${Boolean(enterpriseEnabledSetting.get()) ? enterpriseDisclaimer : nothing}
         </div>
       </div>
-    `, target, {host: this});
-    // clang-format on
-  }) {
+    `, target);
+  // clang-format on
+};
+
+export function showInfobar(): void {
+  UI.InspectorView.InspectorView.instance().displayDebuggedTabReloadRequiredWarning(
+      i18nString(UIStrings.siteReloadMessage));
+}
+
+export class CookieControlsView extends UI.Widget.VBox {
+  #view: View;
+  #isGracePeriodActive: boolean;
+  #thirdPartyControlsDict: Root.Runtime.HostConfig['thirdPartyCookieControls'];
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
     this.#isGracePeriodActive = false;
@@ -327,7 +335,14 @@ export class CookieControlsView extends UI.Widget.VBox {
   }
 
   override performUpdate(): void {
-    this.#view(this, this, this.contentElement);
+    this.#view(
+        {
+          thirdPartyControlsDict: this.#thirdPartyControlsDict,
+          isGracePeriodActive: this.#isGracePeriodActive,
+          inputChanged: this.inputChanged.bind(this),
+          openChromeCookieSettings: this.openChromeCookieSettings.bind(this),
+        },
+        this, this.contentElement);
   }
 
   inputChanged(newValue: boolean, setting: Common.Settings.Setting<boolean>): void {
@@ -390,13 +405,4 @@ export class CookieControlsView extends UI.Widget.VBox {
       this.requestUpdate();
     }
   }
-
-  getChromeFlagsLink(flag: string): Element {
-    const link = new ChromeLink.ChromeLink.ChromeLink();
-    link.textContent = flag;
-    link.href = ('chrome://flags/' + flag) as Platform.DevToolsPath.UrlString;
-    link.setAttribute('tabindex', '0');
-
-    return link;
-  }
 }

package/front_end/panels/security/CookieReportView.ts

@@ -196,17 +196,8 @@ export interface CookieReportNodeData {
 }
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
-
-export class CookieReportView extends UI.Widget.VBox {
-  #issuesManager?: IssuesManager.IssuesManager.IssuesManager;
-  namedBitSetFilterUI?: UI.FilterBar.NamedBitSetFilterUI;
-  #cookieRows = new Map<string, IssuesManager.CookieIssue.CookieReportInfo>();
-  #view: View;
-  filterItems: UI.FilterBar.Item[] = [];
-  searchText: string;
-
-  constructor(element?: HTMLElement, view: View = (input, output, target) => {
-    // clang-format off
+const DEFAULT_VIEW: View = (input, output, target) => {
+  // clang-format off
     render(html `
         <div class="report overflow-auto">
             <div class="header">
@@ -283,9 +274,19 @@ export class CookieReportView extends UI.Widget.VBox {
             }
 
         </div>
-    `, target, {host: this});
-    // clang-format on
-  }) {
+    `, target);
+  // clang-format on
+};
+
+export class CookieReportView extends UI.Widget.VBox {
+  #issuesManager?: IssuesManager.IssuesManager.IssuesManager;
+  namedBitSetFilterUI?: UI.FilterBar.NamedBitSetFilterUI;
+  #cookieRows = new Map<string, IssuesManager.CookieIssue.CookieReportInfo>();
+  #view: View;
+  filterItems: UI.FilterBar.Item[] = [];
+  searchText: string;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
     this.registerRequiredCSS(cookieReportViewStyles);

package/front_end/panels/security/IPProtectionView.ts

@@ -1,7 +1,6 @@
 // Copyright 2025 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 @devtools/no-lit-render-outside-of-view */
 
 import '../../ui/components/switch/switch.js';
 import '../../ui/components/cards/cards.js';
@@ -136,7 +135,7 @@ export interface ViewInput {
 }
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
-export const DEFAULT_VIEW: View = (input, _, target) => {
+export const DEFAULT_VIEW: View = (input, _output, target) => {
   const {status} = input;
   const statusText = status ? i18nString(UIStrings[status]) : i18nString(UIStrings.statusUnknown);
 

package/front_end/panels/security/SecurityPanel.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -549,6 +548,24 @@ export interface ViewOutput {
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
+const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <devtools-split-view direction="column" name="security"
+      ${UI.Widget.widgetRef(UI.SplitWidget.SplitWidget, e => {output.splitWidget = e;})}>
+      <devtools-widget
+        slot="sidebar"
+        .widgetConfig=${widgetConfig(SecurityPanelSidebar)}
+        @showIPProtection=${() => output.setVisibleView(new IPProtectionView())}
+        @showCookieReport=${()=>output.setVisibleView(new CookieReportView())}
+        @showFlagControls=${() => output.setVisibleView(new CookieControlsView())}
+        ${UI.Widget.widgetRef(SecurityPanelSidebar, e => {output.sidebar = e;})}>
+      </devtools-widget>
+  </devtools-split-view>`,
+    target);
+  // clang-format on
+};
+
 export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.SDKModelObserver<SecurityModel> {
   readonly mainView: SecurityMainView;
   readonly sidebar!: SecurityPanelSidebar;
@@ -560,24 +577,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
   private securityModel: SecurityModel|null;
   readonly splitWidget!: UI.SplitWidget.SplitWidget;
 
-  constructor(private view: View = (_input, output, target) => {
-    // clang-format off
-    render(
-      html`
-    <devtools-split-view direction="column" name="security"
-      ${UI.Widget.widgetRef(UI.SplitWidget.SplitWidget, e => {output.splitWidget = e;})}>
-        <devtools-widget
-          slot="sidebar"
-          .widgetConfig=${widgetConfig(SecurityPanelSidebar)}
-          @showIPProtection=${() => output.setVisibleView(new IPProtectionView())}
-          @showCookieReport=${()=>output.setVisibleView(new CookieReportView())}
-          @showFlagControls=${() => output.setVisibleView(new CookieControlsView())}
-          ${UI.Widget.widgetRef(SecurityPanelSidebar, e => {output.sidebar = e;})}>
-        </devtools-widget>
-    </devtools-split-view>`,
-      target, {host: this});
-    // clang-format on
-  }) {
+  constructor(private view: View = DEFAULT_VIEW) {
     super('security');
 
     this.update();

package/front_end/panels/timeline/TimelineSelectorStatsView.ts

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
 import '../../ui/components/linkifier/linkifier.js';
 import '../../ui/legacy/components/data_grid/data_grid.js';
 
@@ -125,24 +123,9 @@ interface ViewInput {
 }
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
-export class TimelineSelectorStatsView extends UI.Widget.VBox {
-  #selectorLocations: Map<string, Protocol.CSS.SourceRange[]>;
-  #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
-  /**
-   * We store the last event (or array of events) that we renderered. We do
-   * this because as the user zooms around the panel this view is updated,
-   * however if the set of events that are populating the view is the same as it
-   * was the last time, we can bail without doing any re-rendering work.
-   * If the user views a single event, this will be set to that single event, but if they are viewing a range of events, this will be set to an array.
-   * If it's null, that means we have not rendered yet.
-   */
-  #lastStatsSourceEventOrEvents: Trace.Types.Events.RecalcStyle|Trace.Types.Events.RecalcStyle[]|null = null;
-  #view: View;
-  #timings: SelectorTiming[] = [];
-
-  constructor(parsedTrace: Trace.TraceModel.ParsedTrace|null, view: View = (input, _, target) => {
-    render(
-        html`
+const DEFAULT_VIEW: View = (input, _output, target) => {
+  render(
+      html`
       <devtools-data-grid striped name=${i18nString(UIStrings.selectorStats)}
           @contextmenu=${input.onContextMenu.bind(input)}>
         <table>
@@ -153,7 +136,7 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
             </th>
             <th id=${SelectorTimingsKey.InvalidationCount} weight="1.5" sortable hideable>
               <span title=${i18nString(UIStrings.invalidationCountExplanation)}>${
-            i18nString(UIStrings.invalidationCount)}</span>
+          i18nString(UIStrings.invalidationCount)}</span>
             </th>
             <th id=${SelectorTimingsKey.MatchAttempts} weight="1" sortable hideable align="right">
               <span title=${i18nString(UIStrings.matchAttemptsExplanation)}>
@@ -165,7 +148,7 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
             </th>
             <th id=${SelectorTimingsKey.RejectPercentage} weight="1" sortable hideable align="right">
               <span title=${i18nString(UIStrings.slowPathNonMatchesExplanation)}>${
-            i18nString(UIStrings.slowPathNonMatches)}</span>
+          i18nString(UIStrings.slowPathNonMatches)}</span>
             </th>
             <th id=${SelectorTimingsKey.Selector} weight="3" sortable hideable>
               <span title=${i18nString(UIStrings.selectorExplanation)}>
@@ -177,15 +160,15 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
             </th>
           </tr>
           ${input.timings.map(timing => {
-          const nonMatches = timing[SelectorTimingsKey.MatchAttempts] - timing[SelectorTimingsKey.MatchCount];
-          const slowPathNonMatches =
-              (nonMatches ? 1.0 - timing[SelectorTimingsKey.FastRejectCount] / nonMatches : 0) * 100;
-          const styleSheetId = timing[SelectorTimingsKey.StyleSheetId];
-          const locations = timing.locations;
-          const locationMessage = locations ? null :
-              locations === null            ? '' :
-                                              i18nString(UIStrings.unableToLinkViaStyleSheetId, {PH1: styleSheetId});
-          return html`<tr>
+        const nonMatches = timing[SelectorTimingsKey.MatchAttempts] - timing[SelectorTimingsKey.MatchCount];
+        const slowPathNonMatches =
+            (nonMatches ? 1.0 - timing[SelectorTimingsKey.FastRejectCount] / nonMatches : 0) * 100;
+        const styleSheetId = timing[SelectorTimingsKey.StyleSheetId];
+        const locations = timing.locations;
+        const locationMessage = locations ? null :
+            locations === null            ? '' :
+                                            i18nString(UIStrings.unableToLinkViaStyleSheetId, {PH1: styleSheetId});
+        return html`<tr>
             <td data-value=${timing[SelectorTimingsKey.Elapsed]}>
               ${(timing[SelectorTimingsKey.Elapsed] / 1000.0).toFixed(3)}
             </td>
@@ -201,17 +184,34 @@ export class TimelineSelectorStatsView extends UI.Widget.VBox {
              ${timing[SelectorTimingsKey.Selector]}
             </td>
             <td data-value=${styleSheetId}>${
-              locations ? html`${locations.map((location, itemIndex) => html`
+            locations ? html`${locations.map((location, itemIndex) => html`
                 <devtools-linkifier .data=${location}></devtools-linkifier
                 >${itemIndex !== locations.length - 1 ? ',' : ''}`)}` :
-                          locationMessage}
+                        locationMessage}
             </td>
           </tr>`;
-        })}
+      })}
         </table>
       </devtools-data-grid>`,
-        target, {host: this});
-  }) {
+      target);
+};
+
+export class TimelineSelectorStatsView extends UI.Widget.VBox {
+  #selectorLocations: Map<string, Protocol.CSS.SourceRange[]>;
+  #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
+  /**
+   * We store the last event (or array of events) that we renderered. We do
+   * this because as the user zooms around the panel this view is updated,
+   * however if the set of events that are populating the view is the same as it
+   * was the last time, we can bail without doing any re-rendering work.
+   * If the user views a single event, this will be set to that single event, but if they are viewing a range of events, this will be set to an array.
+   * If it's null, that means we have not rendered yet.
+   */
+  #lastStatsSourceEventOrEvents: Trace.Types.Events.RecalcStyle|Trace.Types.Events.RecalcStyle[]|null = null;
+  #view: View;
+  #timings: SelectorTiming[] = [];
+
+  constructor(parsedTrace: Trace.TraceModel.ParsedTrace|null, view: View = DEFAULT_VIEW) {
     super({jslog: `${VisualLogging.pane('selector-stats').track({resize: true})}`});
     this.registerRequiredCSS(timelineSelectorStatsViewStyles);
 

package/front_end/panels/timeline/components/SidebarAnnotationsTab.ts

@@ -1,7 +1,6 @@
 // Copyright 2024 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 @devtools/no-lit-render-outside-of-view */
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -448,5 +447,5 @@ export const DEFAULT_VIEW: (input: SidebarAnnotationsTabViewInput, output: objec
             </setting-checkbox>`
     }
     </span>`,
-  target, {host: target});
+  target);
 };

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://source.chromium.org/chromium/chromium/src/+/main:components/variations/proto/devtools/
 Version: N/A
-Revision: 2a28b0737c1e845353e9a2082e30ecd5043c0afe
+Revision: c7f689c4ea24e98a4a1e06c78b10633db5a9f78f
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/dialogs/Dialog.ts

@@ -5,11 +5,11 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
-import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+import * as UI from '../../legacy/legacy.js';
 import * as Buttons from '../buttons/buttons.js';
 
 import dialogStyles from './dialog.css.js';
@@ -77,10 +77,6 @@ interface DialogData {
    */
   dialogShownCallback: (() => unknown)|null;
 
-  /**
-   * Optional. Service that provides the window dimensions used for positioning the Dialog.
-   */
-  windowBoundsService: WindowBoundsService.WindowBoundsService.WindowBoundsService;
   /**
    * Whether the dialog is closed when the 'Escape' key is pressed. When true, the event is
    * propagation is stopped.
@@ -132,7 +128,6 @@ export class Dialog extends HTMLElement {
     horizontalAlignment: DialogHorizontalAlignment.CENTER,
     getConnectorCustomXPosition: null,
     dialogShownCallback: null,
-    windowBoundsService: WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance(),
     closeOnESC: true,
     closeOnScroll: true,
     closeButton: false,
@@ -161,7 +156,7 @@ export class Dialog extends HTMLElement {
     this.#forceDialogCloseInDevToolsBound();
   });
   readonly #dialogResizeObserver = new ResizeObserver(this.#updateDialogBounds.bind(this));
-  #devToolsBoundingElement = this.windowBoundsService.getDevToolsBoundingElement();
+  #devToolsBoundingElement = UI.UIUtils.getDevToolsBoundingElement();
 
   // We bind here because we have to listen to keydowns on the entire window,
   // not on the Dialog element itself. This is because if the user has the
@@ -204,16 +199,6 @@ export class Dialog extends HTMLElement {
     this.#onStateChange();
   }
 
-  get windowBoundsService(): WindowBoundsService.WindowBoundsService.WindowBoundsService {
-    return this.#props.windowBoundsService;
-  }
-
-  set windowBoundsService(windowBoundsService: WindowBoundsService.WindowBoundsService.WindowBoundsService) {
-    this.#props.windowBoundsService = windowBoundsService;
-    this.#devToolsBoundingElement = this.windowBoundsService.getDevToolsBoundingElement();
-    this.#onStateChange();
-  }
-
   get bestVerticalPosition(): DialogVerticalPosition|null {
     return this.#bestVerticalPosition;
   }
@@ -733,6 +718,11 @@ export class Dialog extends HTMLElement {
     VisualLogging.setMappedParent(this.#getDialog(), this.parentElementOrShadowHost() as HTMLElement);
     // clang-format on
   }
+
+  setBoundingElementForTesting(element: HTMLElement): void {
+    this.#devToolsBoundingElement = element;
+    this.#onStateChange();
+  }
 }
 
 customElements.define('devtools-dialog', Dialog);

package/front_end/ui/components/text_editor/TextEditor.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../core/common/common.js';
-import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
+import * as UI from '../../legacy/legacy.js';
 import * as ThemeSupport from '../../legacy/theme_support/theme_support.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
 
@@ -166,8 +166,7 @@ export class TextEditor extends HTMLElement {
   }
 
   #startObservingResize(): void {
-    const devtoolsElement =
-        WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
+    const devtoolsElement = UI.UIUtils.getDevToolsBoundingElement();
     if (devtoolsElement) {
       this.#devtoolsResizeObserver.observe(devtoolsElement);
     }

package/front_end/ui/components/text_editor/config.ts

@@ -7,7 +7,6 @@ import * as Common from '../../../core/common/common.js';
 import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as TextUtils from '../../../models/text_utils/text_utils.js';
-import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as UI from '../../legacy/legacy.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
@@ -343,8 +342,7 @@ let sideBarElement: HTMLElement|null = null;
 
 function getTooltipSpace(): DOMRect {
   if (!sideBarElement) {
-    sideBarElement =
-        WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
+    sideBarElement = UI.UIUtils.getDevToolsBoundingElement();
   }
   return sideBarElement.getBoundingClientRect();
 }

package/front_end/ui/legacy/UIUtils.ts

@@ -56,6 +56,7 @@ import confirmDialogStyles from './confirmDialog.css.js';
 import {Dialog} from './Dialog.js';
 import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import inspectorCommonStyles from './inspectorCommon.css.js';
+import {InspectorView} from './InspectorView.js';
 import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
 import smallBubbleStyles from './smallBubble.css.js';
 import {Tooltip} from './Tooltip.js';
@@ -2348,3 +2349,7 @@ export function copyTextToClipboard(text: string, alert?: string): void {
     ARIAUtils.LiveAnnouncer.alert(alert);
   }
 }
+
+export function getDevToolsBoundingElement(): HTMLElement {
+  return InspectorView.maybeGetInspectorViewInstance()?.element || document.body;
+}

package/front_end/ui/legacy/components/inline_editor/CSSAngle.ts

@@ -99,7 +99,7 @@ export class CSSAngle extends HTMLElement {
       this.angleElement = this.querySelector<HTMLElement>('.css-angle');
     }
     if (!this.swatchElement) {
-      this.swatchElement = this.querySelector<HTMLElement>('devtools-css-angle-swatch');
+      this.swatchElement = this.querySelector('devtools-css-angle-swatch');
     }
     if (!this.angleElement || !this.swatchElement) {
       return;

package/front_end/ui/legacy/components/perf_ui/BrickBreaker.ts

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import * as WindowBounds from '../../../../services/window_bounds/window_bounds.js';
+import * as UI from '../../legacy.js';
 import * as ThemeSupport from '../../theme_support/theme_support.js';
 
 import type {FlameChart} from './FlameChart.js';
@@ -124,7 +124,7 @@ export class BrickBreaker extends HTMLElement {
   #keyPressHandlerBound = this.#keyPressHandler.bind(this);
   #closeGameBound = this.#closeGame.bind(this);
   #mouseMoveHandlerBound = this.#mouseMoveHandler.bind(this);
-  #boundingElement = WindowBounds.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
+  #boundingElement = UI.UIUtils.getDevToolsBoundingElement();
   // Value by which we moved the game up relative to the viewport
   #gameViewportOffset = 0;
   #running = false;