chrome-devtools-frontend 1.0.1534717 → 1.0.1536371

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/TimelineUIUtils.ts

@@ -48,6 +48,7 @@ import * as Tracing from '../../services/tracing/tracing.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import codeHighlighterStyles from '../../ui/components/code_highlighter/codeHighlighter.css.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import imagePreviewStyles from '../../ui/legacy/components/utils/imagePreview.css.js';
@@ -1899,7 +1900,7 @@ export class TimelineUIUtils {
       const niceNodeLink = createLinkForInvalidationNode(invalidation);
 
       const text = scriptLink ?
-          i18n.i18n.getFormatLocalizedString(
+          uiI18n.getFormatLocalizedString(
               str_, UIStrings.invalidationWithCallFrame, {PH1: niceNodeLink, PH2: scriptLink}) as HTMLElement :
           niceNodeLink;
 
@@ -2207,7 +2208,7 @@ export class TimelineUIUtils {
       PH1: i18n.TimeUtilities.millisToString(durationMilli, true),
       PH2: i18n.TimeUtilities.millisToString(offsetMilli, true),
     });
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.emptyPlaceholder, {PH1: durationText});
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.emptyPlaceholder, {PH1: durationText});
   }
 
   static quadWidth(quad: number[]): number {

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

@@ -7,6 +7,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Trace from '../../../models/trace/trace.js';
+import * as uiI18n from '../../../ui/i18n/i18n.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 
 // *********************************************************************
@@ -86,8 +87,8 @@ export function buildWarningElementsForEvent(
         const forcedReflowLink = UI.XLink.XLink.create(
             'https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts',
             i18nString(UIStrings.forcedReflow), undefined, undefined, 'forced-reflow');
-        span.appendChild(i18n.i18n.getFormatLocalizedString(
-            str_, UIStrings.sIsALikelyPerformanceBottleneck, {PH1: forcedReflowLink}));
+        span.appendChild(
+            uiI18n.getFormatLocalizedString(str_, UIStrings.sIsALikelyPerformanceBottleneck, {PH1: forcedReflowLink}));
         break;
       }
       case 'IDLE_CALLBACK_OVER_TIME': {
@@ -103,7 +104,7 @@ export function buildWarningElementsForEvent(
       case 'LONG_TASK': {
         const longTaskLink = UI.XLink.XLink.create(
             'https://web.dev/optimize-long-tasks/', i18nString(UIStrings.longTask), undefined, undefined, 'long-tasks');
-        span.appendChild(i18n.i18n.getFormatLocalizedString(
+        span.appendChild(uiI18n.getFormatLocalizedString(
             str_, UIStrings.sTookS,
             {PH1: longTaskLink, PH2: i18n.TimeUtilities.millisToString((duration || 0), true)}));
         break;
@@ -111,7 +112,7 @@ export function buildWarningElementsForEvent(
       case 'LONG_INTERACTION': {
         const longInteractionINPLink = UI.XLink.XLink.create(
             'https://web.dev/inp', i18nString(UIStrings.longInteractionINP), undefined, undefined, 'long-interaction');
-        span.appendChild(i18n.i18n.getFormatLocalizedString(
+        span.appendChild(uiI18n.getFormatLocalizedString(
             str_, UIStrings.sIsLikelyPoorPageResponsiveness, {PH1: longInteractionINPLink}));
         break;
       }

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

@@ -11,6 +11,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Input from '../../../ui/components/input/input.js';
+import * as uiI18n from '../../../ui/i18n/i18n.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -331,7 +332,7 @@ export class FieldSettingsDialog extends HTMLElement {
   #render = (): void => {
     const linkEl =
         UI.XLink.XLink.create('https://developer.chrome.com/docs/crux', i18n.i18n.lockedString('Chrome UX Report'));
-    const descriptionEl = i18n.i18n.getFormatLocalizedString(str_, UIStrings.fetchAggregated, {PH1: linkEl});
+    const descriptionEl = uiI18n.getFormatLocalizedString(str_, UIStrings.fetchAggregated, {PH1: linkEl});
 
     // clang-format off
     const output = html`

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

@@ -25,6 +25,7 @@ import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wra
 import type * as Menus from '../../../ui/components/menus/menus.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import type * as Settings from '../../../ui/components/settings/settings.js';
+import * as uiI18n from '../../../ui/i18n/i18n.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -629,8 +630,8 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       <div class="device-toolbar-description">${md(i18nString(UIStrings.useDeviceToolbar))}</div>
       ${fieldEnabled ? html`
         <ul class="environment-recs-list">
-          <li>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.device, {PH1: deviceRecEl})}</li>
-          <li>${i18n.i18n.getFormatLocalizedString(str_, UIStrings.network, {PH1: networkRecEl})}</li>
+          <li>${uiI18n.getFormatLocalizedString(str_, UIStrings.device, {PH1: deviceRecEl})}</li>
+          <li>${uiI18n.getFormatLocalizedString(str_, UIStrings.network, {PH1: networkRecEl})}</li>
         </ul>
       ` : nothing}
       <div class="environment-option">
@@ -839,7 +840,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     dateEl.classList.add('collection-period-range');
     dateEl.textContent = range || i18nString(UIStrings.notEnoughData);
 
-    const message = i18n.i18n.getFormatLocalizedString(str_, UIStrings.collectionPeriod, {
+    const message = uiI18n.getFormatLocalizedString(str_, UIStrings.collectionPeriod, {
       PH1: dateEl,
     });
 
@@ -862,7 +863,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
     const linkEl =
         UI.XLink.XLink.create('https://developer.chrome.com/docs/crux', i18n.i18n.lockedString('Chrome UX Report'));
-    const messageEl = i18n.i18n.getFormatLocalizedString(str_, UIStrings.seeHowYourLocalMetricsCompare, {PH1: linkEl});
+    const messageEl = uiI18n.getFormatLocalizedString(str_, UIStrings.seeHowYourLocalMetricsCompare, {PH1: linkEl});
 
     return html`
       <div class="field-data-message">${messageEl}</div>

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as uiI18n from '../../../ui/i18n/i18n.js';
 
 import type {MetricRating} from './Utils.js';
 
@@ -185,40 +186,40 @@ export function renderCompareText(
   };
 
   if (rating === 'good' && compare === 'better') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodBetterCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodBetterCompare, values);
   }
   if (rating === 'good' && compare === 'worse') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodWorseCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodWorseCompare, values);
   }
   if (rating === 'good' && compare === 'similar') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodSimilarCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodSimilarCompare, values);
   }
   if (rating === 'good' && !compare) {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodSummarized, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodSummarized, values);
   }
   if (rating === 'needs-improvement' && compare === 'better') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementBetterCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementBetterCompare, values);
   }
   if (rating === 'needs-improvement' && compare === 'worse') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementWorseCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementWorseCompare, values);
   }
   if (rating === 'needs-improvement' && compare === 'similar') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementSimilarCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementSimilarCompare, values);
   }
   if (rating === 'needs-improvement' && !compare) {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementSummarized, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementSummarized, values);
   }
   if (rating === 'poor' && compare === 'better') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorBetterCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorBetterCompare, values);
   }
   if (rating === 'poor' && compare === 'worse') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorWorseCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorWorseCompare, values);
   }
   if (rating === 'poor' && compare === 'similar') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorSimilarCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorSimilarCompare, values);
   }
   if (rating === 'poor' && !compare) {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorSummarized, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorSummarized, values);
   }
 
   throw new Error('Compare string not found');
@@ -241,40 +242,40 @@ export function renderDetailedCompareText(options: {
   };
 
   if (localRating === 'good' && fieldRating === 'good') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodGoodDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodGoodDetailedCompare, values);
   }
   if (localRating === 'good' && fieldRating === 'needs-improvement') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodNeedsImprovementDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodNeedsImprovementDetailedCompare, values);
   }
   if (localRating === 'good' && fieldRating === 'poor') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodPoorDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodPoorDetailedCompare, values);
   }
   if (localRating === 'good' && !fieldRating) {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.goodSummarized, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.goodSummarized, values);
   }
   if (localRating === 'needs-improvement' && fieldRating === 'good') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementGoodDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementGoodDetailedCompare, values);
   }
   if (localRating === 'needs-improvement' && fieldRating === 'needs-improvement') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementNeedsImprovementDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementNeedsImprovementDetailedCompare, values);
   }
   if (localRating === 'needs-improvement' && fieldRating === 'poor') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementPoorDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementPoorDetailedCompare, values);
   }
   if (localRating === 'needs-improvement' && !fieldRating) {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.needsImprovementSummarized, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.needsImprovementSummarized, values);
   }
   if (localRating === 'poor' && fieldRating === 'good') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorGoodDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorGoodDetailedCompare, values);
   }
   if (localRating === 'poor' && fieldRating === 'needs-improvement') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorNeedsImprovementDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorNeedsImprovementDetailedCompare, values);
   }
   if (localRating === 'poor' && fieldRating === 'poor') {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorPoorDetailedCompare, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorPoorDetailedCompare, values);
   }
   if (localRating === 'poor' && !fieldRating) {
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.poorSummarized, values);
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.poorSummarized, values);
   }
 
   throw new Error('Detailed compare string not found');

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/panels/timeline/components/insights/LCPDiscovery.ts

@@ -8,6 +8,7 @@ import './Checklist.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {LCPDiscoveryInsightModel} from '../../../../models/trace/insights/LCPDiscovery.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import * as uiI18n from '../../../../ui/i18n/i18n.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
@@ -63,7 +64,7 @@ export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel>
     const timeWrapper = document.createElement('span');
     timeWrapper.classList.add('discovery-time-ms');
     timeWrapper.innerText = i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(delay);
-    return i18n.i18n.getFormatLocalizedString(str_, UIStrings.lcpLoadDelay, {PH1: timeWrapper});
+    return uiI18n.getFormatLocalizedString(str_, UIStrings.lcpLoadDelay, {PH1: timeWrapper});
   }
 
   override renderContent(): Lit.LitTemplate {

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: 02e01d70b196feed2ae409aa37b1c99afb6c2ef3
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/docs/tooltip/basic.ts

@@ -31,7 +31,7 @@ Lit.render(
       >
         Non-button click trigger
       </span>
-      <devtools-tooltip id="rich-tooltip" variant="rich" use-click>
+      <devtools-tooltip id="rich-tooltip" variant="rich" trigger="click">
         <p>Rich tooltip</p>
         <button>Action</button>
       </devtools-tooltip>

package/front_end/ui/components/tooltips/Tooltip.ts

@@ -167,6 +167,7 @@ const proposedRectForSimpleTooltip =
 
 export type TooltipVariant = 'simple'|'rich';
 export type PaddingMode = 'small'|'large';
+export type TooltipTrigger = 'hover'|'click'|'both';
 
 export interface TooltipProperties {
   id: string;
@@ -174,6 +175,7 @@ export interface TooltipProperties {
   padding?: PaddingMode;
   anchor?: HTMLElement;
   jslogContext?: string;
+  trigger?: TooltipTrigger;
 }
 
 /**
@@ -182,7 +184,7 @@ export interface TooltipProperties {
  * @property hoverDelay - reflects the `"hover-delay"` attribute.
  * @property variant - reflects the `"variant"` attribute.
  * @property padding - reflects the `"padding"` attribute.
- * @property useClick - reflects the `"click"` attribute.
+ * @property trigger - reflects the `"trigger"` attribute.
  * @property verticalDistanceIncrease - reflects the `"vertical-distance-increase"` attribute.
  * @property preferSpanLeft - reflects the `"prefer-span-left"` attribute.
  * @attribute id - Id of the tooltip. Used for searching an anchor element with aria-describedby.
@@ -190,17 +192,19 @@ export interface TooltipProperties {
  * @attribute variant - Variant of the tooltip, `"simple"` for strings only, inverted background,
  *                 `"rich"` for interactive content, background according to theme's surface.
  * @attribute padding - Which padding to use, defaults to `"small"`. Use `"large"` for richer content.
- * @attribute use-click - If present, the tooltip will be shown on click instead of on hover.
+ * @attribute trigger - Specifies which action triggers the tooltip. `"hover"` is the default. `"click"` means the
+ *                 tooltip will be shown on click instead of hover. `"both"` means both hover and click trigger the
+ *                 tooltip.
  * @attribute vertical-distance-increase - The tooltip is moved vertically this many pixels further away from its anchor.
  * @attribute prefer-span-left - If present, the tooltip's preferred position is `"span-left"` (The right
  *                 side of the tooltip and its anchor are aligned. The tooltip expands to the left from
  *                 there.). Applies to rich tooltips only.
  * @attribute use-hotkey - If present, the tooltip will be shown on hover but not when receiving focus.
- *                    Requires a hotkey to open when fosed (Alt-down). When `"use-click"` is present
- *                    as well, use-click takes precedence.
+ *                  Requires a hotkey to open when fosed (Alt-down). When `"trigger"` is present
+ *                  as well, `"trigger"` takes precedence.
  */
 export class Tooltip extends HTMLElement {
-  static readonly observedAttributes = ['id', 'variant', 'jslogcontext'];
+  static readonly observedAttributes = ['id', 'variant', 'jslogcontext', 'trigger'];
   static lastOpenedTooltipId: string|null = null;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -231,16 +235,20 @@ export class Tooltip extends HTMLElement {
     }
   }
 
-  get useClick(): boolean {
-    return this.hasAttribute('use-click') ?? false;
-  }
-  set useClick(useClick: boolean) {
-    if (useClick) {
-      this.setAttribute('use-click', '');
-    } else {
-      this.removeAttribute('use-click');
+  get trigger(): TooltipTrigger {
+    switch (this.getAttribute('trigger')) {
+      case 'click':
+        return 'click';
+      case 'both':
+        return 'both';
+      case 'hover':
+      default:
+        return 'hover';
     }
   }
+  set trigger(trigger: TooltipTrigger) {
+    this.setAttribute('trigger', trigger);
+  }
 
   get hoverDelay(): number {
     return this.hasAttribute('hover-delay') ? Number(this.getAttribute('hover-delay')) : 300;
@@ -297,7 +305,7 @@ export class Tooltip extends HTMLElement {
 
   constructor(properties?: TooltipProperties) {
     super();
-    const {id, variant, padding, jslogContext, anchor} = properties ?? {};
+    const {id, variant, padding, jslogContext, anchor, trigger} = properties ?? {};
     if (id) {
       this.id = id;
     }
@@ -317,6 +325,9 @@ export class Tooltip extends HTMLElement {
       }
       this.#anchor = anchor;
     }
+    if (trigger) {
+      this.trigger = trigger;
+    }
   }
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
@@ -463,7 +474,7 @@ export class Tooltip extends HTMLElement {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'tooltip');
     }
-    this.setAttribute('popover', this.useClick ? 'auto' : 'manual');
+    this.setAttribute('popover', this.trigger === 'hover' ? 'manual' : 'auto');
     this.#updateJslog();
   }
 
@@ -474,6 +485,9 @@ export class Tooltip extends HTMLElement {
   #setClosing = (event: Event): void => {
     if ((event as ToggleEvent).newState === 'closed') {
       this.#closing = true;
+      if (this.#timeout) {
+        window.clearTimeout(this.#timeout);
+      }
     }
   };
 
@@ -521,9 +535,10 @@ export class Tooltip extends HTMLElement {
       // as we always want to support ESC to close.
       this.#anchor.addEventListener('keydown', this.#keyDown);
 
-      if (this.useClick) {
+      if (this.trigger === 'click' || this.trigger === 'both') {
         this.#anchor.addEventListener('click', this.toggle);
-      } else {
+      }
+      if (this.trigger === 'hover' || this.trigger === 'both') {
         this.#anchor.addEventListener('mouseenter', this.showTooltip);
         if (!this.useHotkey) {
           this.#anchor.addEventListener('focus', this.showTooltip);

package/front_end/ui/i18n/i18n.ts

@@ -0,0 +1,31 @@
+// 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-imperative-dom-api */
+
+import * as I18n from '../../core/i18n/i18n.js';
+import type * as ThirdPartyI18n from '../../third_party/i18n/i18n.js';
+
+/**
+ * Returns a span element that may contains other DOM element as placeholders
+ */
+export function getFormatLocalizedString(
+    registeredStrings: ThirdPartyI18n.LocalizedStringSet.RegisteredFileStrings, stringId: string,
+    placeholders: Record<string, Object>): HTMLSpanElement {
+  const formatter = registeredStrings.getLocalizedStringSetFor(I18n.DevToolsLocale.DevToolsLocale.instance().locale)
+                        .getMessageFormatterFor(stringId);
+
+  const element = document.createElement('span');
+  for (const icuElement of formatter.getAst()) {
+    if (icuElement.type === /* argumentElement */ 1) {
+      const placeholderValue = placeholders[icuElement.value];
+      if (placeholderValue) {
+        element.append(placeholderValue as Node | string);
+      }
+    } else if ('value' in icuElement) {
+      element.append(String(icuElement.value));
+    }
+  }
+  return element;
+}

package/front_end/ui/legacy/SoftDropDown.ts

@@ -38,7 +38,6 @@ export class SoftDropDown<T> implements ListDelegate<T> {
   private list: ListControl<T>;
   private rowHeight: number;
   private width: number;
-  private listWasShowing200msAgo: boolean;
 
   constructor(model: ListModel<T>, delegate: Delegate<T>, jslogContext?: string) {
     this.delegate = delegate;
@@ -79,9 +78,8 @@ export class SoftDropDown<T> implements ListDelegate<T> {
         'jslog',
         `${VisualLogging.menu().parent('mapped').track({resize: true, keydown: 'ArrowUp|ArrowDown|PageUp|PageDown'})}`);
 
-    this.listWasShowing200msAgo = false;
     this.element.addEventListener('mousedown', event => {
-      if (this.listWasShowing200msAgo) {
+      if (this.glassPane.isShowing()) {
         this.hide(event);
       } else if (!this.element.disabled) {
         this.show(event);
@@ -96,9 +94,6 @@ export class SoftDropDown<T> implements ListDelegate<T> {
         return;
       }
 
-      if (!this.listWasShowing200msAgo) {
-        return;
-      }
       this.selectHighlightedItem();
       if (event.target instanceof Element && event.target?.parentElement) {
         // hide() will consume the mouseup event and click won't be triggered
@@ -122,9 +117,6 @@ export class SoftDropDown<T> implements ListDelegate<T> {
       this.list.selectItem(this.selectedItem);
     }
     event.consume(true);
-    window.setTimeout(() => {
-      this.listWasShowing200msAgo = true;
-    }, 200);
   }
 
   private updateGlasspaneSize(): void {
@@ -134,9 +126,6 @@ export class SoftDropDown<T> implements ListDelegate<T> {
   }
 
   private hide(event: Event): void {
-    window.setTimeout(() => {
-      this.listWasShowing200msAgo = false;
-    }, 200);
     this.glassPane.hide();
     this.list.selectItem(null);
     ARIAUtils.setExpanded(this.element, false);

package/front_end/ui/legacy/ViewManager.ts

@@ -164,14 +164,12 @@ export interface EventTypes {
 }
 
 export class ViewManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  readonly views: Map<string, View>;
-  private readonly locationNameByViewId: Map<string, string>;
+  readonly views = new Map<string, View>();
+  private readonly locationNameByViewId = new Map<string, string>();
   private readonly locationOverrideSetting: Common.Settings.Setting<Record<string, string>>;
 
   private constructor() {
     super();
-    this.views = new Map();
-    this.locationNameByViewId = new Map();
 
     // Read override setting for location
     this.locationOverrideSetting = Common.Settings.Settings.instance().createSetting('views-location-override', {});