chrome-devtools-frontend 1.0.1534717 → 1.0.1535712

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -124,6 +124,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
       variant="rich"
       vertical-distance-increase=-6
       prefer-span-left
+      jslogContext="console-insight-teaser"
     >
       <div class="teaser-tooltip-container">
         ${input.isError ? html`
@@ -177,7 +178,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
             aria-details=${'teaser-info-tooltip-' + input.uuid}
             .accessibleLabel=${lockedString(UIStringsNotTranslate.learnDataUsage)}
           ></devtools-button>
-          <devtools-tooltip id=${'teaser-info-tooltip-' + input.uuid} variant="rich">
+          <devtools-tooltip id=${'teaser-info-tooltip-' + input.uuid} variant="rich" jslogContext="teaser-info-tooltip">
             <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
             <div class="learn-more">
               <x-link
@@ -322,6 +323,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     }
     if (this.#isGenerating) {
       this.#mainText = '';
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationAborted);
     }
     this.#isGenerating = false;
     if (this.#timeoutId) {
@@ -345,6 +347,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
   async #generateTeaserText(): Promise<void> {
     this.#headerText = this.#consoleViewMessage.toMessageTextString().substring(0, 70);
     this.#isGenerating = true;
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationStarted);
     this.#timeoutId = setTimeout(this.#setSlow.bind(this), SLOW_GENERATION_CUTOFF_MILLISECONDS);
     const startTime = performance.now();
     let teaserText = '';
@@ -359,6 +362,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
       if (err.name !== 'AbortError') {
         console.error(err.name, err.message);
         this.#isError = true;
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationErrored);
       }
       this.#isGenerating = false;
       clearTimeout(this.#timeoutId);
@@ -370,6 +374,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     Host.userMetrics.consoleInsightTeaserGenerated(performance.now() - startTime);
     this.#isGenerating = false;
     this.#mainText = teaserText;
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightTeaserGenerationCompleted);
     this.requestUpdate();
   }
 

package/front_end/panels/console/ConsoleView.ts

@@ -505,6 +505,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
     this.pinPane = new ConsolePinPane(liveExpressionButton, () => this.prompt.focus());
     this.pinPane.element.classList.add('console-view-pinpane');
+    this.pinPane.element.classList.remove('flex-auto');
     this.pinPane.show(this.contentsElement);
 
     this.viewport = new ConsoleViewport(this);

package/front_end/panels/console/consoleView.css

@@ -527,7 +527,6 @@
 }
 
 .console-view-pinpane {
-  flex: none;
   max-height: 50%;
 }
 

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -422,7 +422,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       if (domModel.parentModel()) {
         continue;
       }
-      if (!this.rootDOMNode) {
+      if (!this.rootDOMNode || this.rootDOMNode.domModel() !== domModel) {
         if (domModel.existingDocument()) {
           this.rootDOMNode = domModel.existingDocument();
           this.onDocumentUpdated(domModel);

package/front_end/panels/network/components/DirectSocketConnectionView.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 * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -112,9 +110,9 @@ export interface ViewInput {
   onCopyRow: () => void;
 }
 
-export type View = (input: ViewInput, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
-export const DEFAULT_VIEW: View = (input, target) => {
+export const DEFAULT_VIEW: View = (input, _output, target) => {
   function isCategoryOpen(name: string): boolean {
     return input.openCategories.includes(name);
   }
@@ -203,7 +201,7 @@ export const DEFAULT_VIEW: View = (input, target) => {
     ${renderCategory(CATEGORY_NAME_GENERAL, i18nString(UIStrings.general), generalContent)}
     ${renderCategory(CATEGORY_NAME_OPTIONS, i18nString(UIStrings.options), optionsContent)}
     ${socketInfo.openInfo ? renderCategory(CATEGORY_NAME_OPEN_INFO, i18nString(UIStrings.openInfo), openInfoContent) : Lit.nothing}
-  `, target, {host: input});
+  `, target);
   // clang-format on
 };
 
@@ -278,7 +276,7 @@ export class DirectSocketConnectionView extends UI.Widget.Widget {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
       }
     };
-    this.#view(viewInput, this.contentElement);
+    this.#view(viewInput, undefined, this.contentElement);
   }
 
   #setIsOpen(categoryName: string, open: boolean): void {

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/visual_logging/KnownContextValues.ts

@@ -810,6 +810,7 @@ export const knownContextValues = new Set([
   'column-rule-color',
   'column-rule-outset',
   'column-rule-style',
+  'column-rule-visibility-items',
   'column-rule-width',
   'column-span',
   'column-width',
@@ -3729,6 +3730,7 @@ export const knownContextValues = new Set([
   'text-emphasis-style',
   'text-grow',
   'text-indent',
+  'text-justify',
   'text-node',
   'text-orientation',
   'text-overflow',

package/package.json

@@ -102,5 +102,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1534717"
+  "version": "1.0.1535712"
 }