chrome-devtools-frontend 1.0.1571573 → 1.0.1572937

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -23,10 +23,22 @@ const UIStringsNotTranslate = {
    * @description Text for teaser to generate code in Mac.
    */
   cmdItoGenerateCode: 'Cmd+I to generate code',
+  /**
+   * @description Aria label for teaser to generate code.
+   */
+  pressCtrlPeriodToLearnHowYourDataIsBeingUsed: 'Press ctrl . (“period”) to learn how your data is being used.',
+  /**
+   * @description Aria label for teaser to generate code in Mac.
+   */
+  pressCmdPeriodToLearnHowYourDataIsBeingUsed: 'Press cmd . (“period”) to learn how your data is being used.',
   /**
    * @description Text for teaser when generating suggestion.
    */
   generating: 'Generating... (esc to cancel)',
+  /**
+   * @description Aria label for teaser when generating suggestion.
+   */
+  generatingAriaLabel: 'Generating. Press escape to cancel.',
   /**
    * @description Text for teaser for discoverability.
    */
@@ -103,6 +115,7 @@ export interface ViewInput {
 
 export interface ViewOutput {
   hideTooltip?: () => void;
+  showTooltip?: () => void;
   setTimerText?: (text: string) => void;
 }
 
@@ -123,11 +136,18 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       }
       const toGenerateCode = Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmdItoGenerateCode) :
                                                      lockedString(UIStringsNotTranslate.ctrlItoGenerateCode);
+      const toLearnHowYourDataIsBeingUsed = Host.Platform.isMac() ?
+          lockedString(UIStringsNotTranslate.pressCmdPeriodToLearnHowYourDataIsBeingUsed) :
+          lockedString(UIStringsNotTranslate.pressCtrlPeriodToLearnHowYourDataIsBeingUsed);
       const tooltipDisclaimerText = getTooltipDisclaimerText(input.noLogging, input.panel);
       // TODO(b/472291834): Disclaimer icon should match the placeholder's color
       // clang-format off
       teaserLabel = html`<div class="ai-code-generation-teaser-trigger">
-        ${toGenerateCode}&nbsp;<devtools-button
+        <span aria-atomic="true" aria-live="assertive">${toGenerateCode}&nbsp;</span>
+        <div class="ai-code-generation-teaser-screen-reader-only" aria-atomic="true" aria-live="assertive">
+          ${toLearnHowYourDataIsBeingUsed}
+        </div>
+        <devtools-button
           .data=${{
               title: lockedString(UIStringsNotTranslate.learnMoreAboutHowYourDataIsBeingUsed),
               size: Buttons.Button.Size.MICRO,
@@ -147,6 +167,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   output.hideTooltip = () => {
                     el.hidePopover();
                   };
+                  output.showTooltip = () => {
+                    el.showPopover();
+                    // Announce the content specifically for screen readers when triggered
+                    UI.ARIAUtils.LiveAnnouncer.status(tooltipDisclaimerText);
+                  };
                 }
               })}>
             <div class="disclaimer-tooltip-container"><div class="tooltip-text">
@@ -175,10 +200,12 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     }
 
     case AiCodeGenerationTeaserDisplayState.LOADING: {
+      const teaserAriaLabel = lockedString(UIStringsNotTranslate.generatingAriaLabel);
       // clang-format off
       teaserLabel = html`
-        <span class="ai-code-generation-spinner"></span>&nbsp;${lockedString(UIStringsNotTranslate.generating)}&nbsp;
-        <span class="ai-code-generation-timer" ${Directives.ref(el => {
+        <div class="ai-code-generation-teaser-screen-reader-only">${teaserAriaLabel}</div>
+        <span class="ai-code-generation-spinner" aria-hidden="true"></span>&nbsp;${lockedString(UIStringsNotTranslate.generating)}&nbsp;
+        <span class="ai-code-generation-timer" aria-hidden="true" ${Directives.ref(el => {
           if (el) {
             output.setTimerText = (text: string) => {
               el.textContent = text;
@@ -206,7 +233,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           <style>${styles}</style>
           <style>@scope to (devtools-widget > *) { ${UI.inspectorCommonStyles} }</style>
           <div class="ai-code-generation-teaser">
-            ${teaserLabel}
+            &nbsp;${teaserLabel}
           </div>
         `, target
       );
@@ -309,4 +336,8 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
     void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
     event.consume(true);
   }
+
+  showTooltip(): void {
+    this.#viewOutput.showTooltip?.();
+  }
 }

package/front_end/panels/common/BadgeNotification.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
+
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -11,6 +13,7 @@ import * as UIHelpers from '../../ui/helpers/helpers.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 {type LitTemplate, nothing} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import badgeNotificationStyles from './badgeNotification.css.js';
@@ -65,7 +68,7 @@ const UIStrings = {
 
 const str_ = i18n.i18n.registerUIStrings('panels/common/BadgeNotification.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const i18nFormatString = uiI18n.getFormatLocalizedString.bind(undefined, str_);
+const i18nFormatStringTemplate = uiI18n.getFormatLocalizedStringTemplate.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
 const LEFT_OFFSET = 5;
@@ -80,7 +83,7 @@ export interface BadgeNotificationAction {
 }
 
 export interface BadgeNotificationProperties {
-  message: HTMLElement|string;
+  message: LitTemplate;
   jslogContext: string;
   imageUri: string;
   actions: BadgeNotificationAction[];
@@ -141,7 +144,7 @@ function revealBadgeSettings(): void {
 
 export class BadgeNotification extends UI.Widget.Widget {
   jslogContext = '';
-  message: HTMLElement|string = '';
+  message: LitTemplate = nothing;
   imageUri = '';
   actions: BadgeNotificationAction[] = [];
   isStarterBadge = false;
@@ -198,12 +201,12 @@ export class BadgeNotification extends UI.Widget.Widget {
   }
 
   #presentStarterBadgeSettingsNudge(badge: Badges.Badge): void {
-    const googleDeveloperProgramLink = UI.XLink.XLink.create(
-        'https://developers.google.com/program', lockedString('Google Developer Program'), 'badge-link', undefined,
-        'program-link');
     this.#show({
-      message: i18nFormatString(
-          UIStrings.starterBadgeAwardMessageSettingDisabled, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+      message: i18nFormatStringTemplate(UIStrings.starterBadgeAwardMessageSettingDisabled, {
+        PH1: badge.title,
+        PH2: html`<devtools-link class="badge-link" href="https://developers.google.com/program" .jslogContext=${
+                 'program-link'}>${lockedString('Google Developer Program')}</devtools-link>`
+      }),
       jslogContext: badge.jslogContext,
       actions: [
         {
@@ -228,12 +231,12 @@ export class BadgeNotification extends UI.Widget.Widget {
   }
 
   #presentStarterBadgeProfileNudge(badge: Badges.Badge): void {
-    const googleDeveloperProgramLink = UI.XLink.XLink.create(
-        'https://developers.google.com/program', lockedString('Google Developer Program'), 'badge-link', undefined,
-        'program-link');
     this.#show({
-      message: i18nFormatString(
-          UIStrings.starterBadgeAwardMessageNoGdpProfile, {PH1: badge.title, PH2: googleDeveloperProgramLink}),
+      message: i18nFormatStringTemplate(UIStrings.starterBadgeAwardMessageNoGdpProfile, {
+        PH1: badge.title,
+        PH2: html`<devtools-link class="badge-link" href="https://developers.google.com/program" .jslogContext=${
+                 'program-link'}>${lockedString('Google Developer Program')}</devtools-link>`
+      }),
       jslogContext: badge.jslogContext,
       actions: [
         {
@@ -262,7 +265,7 @@ export class BadgeNotification extends UI.Widget.Widget {
 
   #presentActivityBasedBadge(badge: Badges.Badge): void {
     this.#show({
-      message: i18nString(UIStrings.activityBasedBadgeAwardMessage, {PH1: badge.title}),
+      message: i18nFormatStringTemplate(UIStrings.activityBasedBadgeAwardMessage, {PH1: badge.title}),
       jslogContext: badge.jslogContext,
       actions: [
         {

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import '../../ui/components/switch/switch.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -152,12 +153,10 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             <h2 class="section-title">${i18nString(UIStrings.tailorProfile)}</h2>
             <div class="section-text">
               <div>${i18nString(UIStrings.tailorProfileBody)}</div><br/>
-              <div>${uiI18n.getFormatLocalizedString(str_, UIStrings.tailorProfileBodyDisclaimer, {
-      PH1: UI.XLink.XLink.create(CONTENT_POLICY_URL, i18nString(UIStrings.contentPolicy), 'link', undefined, 'content-policy'),
-      PH2: UI.XLink.XLink.create(TERMS_OF_SERVICE_URL, i18nString(UIStrings.termsOfService), 'link',
-        undefined, 'terms-of-service'),
-      PH3: UI.XLink.XLink.create(PRIVACY_POLICY_URL, i18nString(UIStrings.privacyPolicy), 'link',
-        undefined, 'privacy-policy'),
+              <div>${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.tailorProfileBodyDisclaimer, {
+      PH1: html`<devtools-link href=${CONTENT_POLICY_URL} class="link" .jslogContext=${'content-policy'}>${i18nString(UIStrings.contentPolicy)}</devtools-link>`,
+      PH2: html`<devtools-link href=${TERMS_OF_SERVICE_URL} class="link" .jslogContext=${'terms-of-service'}>${i18nString(UIStrings.termsOfService)}</devtools-link>`,
+      PH3: html`<devtools-link href=${PRIVACY_POLICY_URL} class="link" .jslogContext=${'privacy-policy'}>${i18nString(UIStrings.privacyPolicy)}</devtools-link>`,
     })}</div>
             </div>
           </div>

package/front_end/panels/common/GeminiRebrandPromoDialog.ts

@@ -0,0 +1,192 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// This dialog will be shown during M146 and removed by M147.
+//
+// To enable:
+//   --enable-features=DevToolsGeminiRebranding
+
+import '../../ui/components/switch/switch.js';
+import '../../ui/kit/kit.js';
+
+import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
+import * as Geometry from '../../models/geometry/geometry.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+
+import styles from './geminiRebrandPromoDialog.css.js';
+
+const UIStrings = {
+  /**
+   * @description Aria label for the dialog
+   */
+  dialogAriaLabel: 'Gemini 3 Flash in DevTools',
+  /**
+   *
+   * @description Button text for dismissing the dialog.
+   */
+  dismiss: 'Dismiss',
+  /**
+   * @description Button text for getting started.
+   */
+  getStarted: 'Get started',
+  /**
+   * @description Detail message shown in the dialog.
+   */
+  detailAiCompanion: 'Meet your AI-powered companion for web dev',
+  /**
+   * @description Detail message shown in the dialog.
+   */
+  detailConsoleErrors: 'Get instant, accurate answers for console errors',
+  /**
+   * @description Detail message shown in the dialog.
+   */
+  detailGenerateCode: 'Generate CSS and JS snippets on the fly',
+  /**
+   * @description Detail message shown in the dialog.
+   */
+  detailPerformance: 'Automatically find issues in performance traces',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/common/GeminiRebrandPromoDialog.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+interface ViewInput {
+  onGetStartedClick: () => void;
+  onCancelClick: () => void;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+const PROMO_IMAGE_1X = new URL('../../Images/geminiInDevTools.png', import.meta.url).toString();
+const PROMO_IMAGE_2X = new URL('../../Images/geminiInDevTools_2x.png', import.meta.url).toString();
+
+export const DEFAULT_VIEW: View = (input, _output, target): void => {
+  // clang-format off
+  render(
+    html`
+      <style>${styles}</style>
+
+      <div class="header">
+        <div class="title">Gemini 3 Flash in DevTools</div>
+        <div class="close-button">
+          <devtools-button
+            .iconName=${'cross'}
+            .variant=${Buttons.Button.Variant.ICON}
+            .size=${Buttons.Button.Size.REGULAR}
+            .title=${i18nString(UIStrings.dismiss)}
+            jslog=${VisualLogging.close().track({click: true})}
+            @click=${() => {}}
+          ></devtools-button>
+        </div>
+      </div>
+
+      <img class="banner-image" srcset=${`${PROMO_IMAGE_1X} 1x, ${PROMO_IMAGE_2X} 2x`}>
+
+      <div class="main-content">
+        <div class="detail-row">
+          <devtools-icon name="performance"></devtools-icon>
+          <div>${i18nString(UIStrings.detailAiCompanion)}</div>
+        </div>
+        <div class="detail-row">
+          <devtools-icon name="lightbulb-spark"></devtools-icon>
+          <div>${i18nString(UIStrings.detailConsoleErrors)}</div>
+        </div>
+        <div class="detail-row">
+          <devtools-icon name="text-analysis"></devtools-icon>
+          <div>${i18nString(UIStrings.detailGenerateCode)}</div>
+        </div>
+        <div class="detail-row">
+          <devtools-icon name="smart-assistant"></devtools-icon>
+          <div>${i18nString(UIStrings.detailPerformance)}</div>
+        </div>
+      </div>
+
+      <div class="buttons">
+        <devtools-button
+          .variant=${Buttons.Button.Variant.OUTLINED}
+          .jslogContext=${'cancel'}
+          @click=${input.onCancelClick}>${i18nString(UIStrings.dismiss)}</devtools-button>
+        <devtools-button
+          .variant=${Buttons.Button.Variant.PRIMARY}
+          .jslogContext=${'get-started'}
+          @click=${input.onGetStartedClick}>${i18nString(UIStrings.getStarted)}</devtools-button>
+      </div>
+    `,
+    target
+  );
+  // clang-format on
+};
+
+export class GeminiRebrandPromoDialog extends UI.Widget.VBox {
+  #view: View;
+  #dialog: UI.Dialog.Dialog;
+
+  constructor(
+      options: {
+        dialog: UI.Dialog.Dialog,
+        onSuccess?: () => void,
+        onCancel?: () => void,
+      },
+      view?: View) {
+    super();
+    this.#dialog = options.dialog;
+    this.#view = view ?? DEFAULT_VIEW;
+    this.requestUpdate();
+  }
+
+  async #onGetStartedClick(): Promise<void> {
+    this.#dialog.hide();
+    await UI.ViewManager.ViewManager.instance().showView('freestyler');
+  }
+
+  #onCancelClick(): void {
+    this.#dialog.hide();
+  }
+
+  override performUpdate(): void {
+    const viewInput: ViewInput = {
+      onGetStartedClick: this.#onGetStartedClick.bind(this),
+      onCancelClick: this.#onCancelClick.bind(this),
+    };
+
+    this.#view(viewInput, undefined, this.contentElement);
+  }
+
+  static show(): void {
+    const dialog = new UI.Dialog.Dialog('gemini-rebranding-dialog');
+    dialog.setAriaLabel(i18nString(UIStrings.dialogAriaLabel));
+    dialog.setMaxContentSize(new Geometry.Size(384, 500));
+    dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
+    dialog.setDimmed(true);
+
+    new GeminiRebrandPromoDialog({dialog}).show(dialog.contentElement);
+    dialog.show(undefined, /* stack */ true);
+  }
+
+  static async maybeShow(): Promise<void> {
+    if (!Root.Runtime.hostConfig.aidaAvailability?.enabled) {
+      return;
+    }
+
+    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    if (currentAidaAvailability !== Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
+      return;
+    }
+
+    const setting = Common.Settings.Settings.instance().createSetting<boolean>(
+        'gemini-rebranding-dialog-shown', false, Common.Settings.SettingStorageType.SYNCED);
+    if (setting.get()) {
+      return;
+    }
+
+    setting.set(true);
+    GeminiRebrandPromoDialog.show();
+  }
+}

package/front_end/panels/common/aiCodeGenerationTeaser.css

@@ -5,15 +5,29 @@
  */
 
 @scope to (devtools-widget > *) {
+    .ai-code-generation-teaser-screen-reader-only {
+        position: absolute;
+        overflow: hidden;
+        clip-path: rect(0 0 0 0);
+        height: var(--sys-size-1);
+        width: var(--sys-size-1);
+        margin: -1 * var(--sys-size-1);;
+        padding: 0;
+        border: 0;
+    }
+
     .ai-code-generation-teaser {
         pointer-events: all;
         font-style: italic;
-        padding-left: var(--sys-size-3);
         line-height: var(--sys-size-7);
 
         .ai-code-generation-teaser-trigger {
             display: inline-flex;
             align-items: center;
+
+            devtools-button {
+                --override-button-icon-color: var(--sys-color-token-subtle);
+            }
         }
 
         .ai-code-generation-teaser-generated {
@@ -53,6 +67,7 @@
                 .link {
                     margin: var(--sys-size-5) var(--sys-size-8) 0 var(--sys-size-5);
                     display: inline-block;
+                    color: var(--sys-color-on-surface-subtle);
                 }
             }
         }

package/front_end/panels/common/common.ts

@@ -100,6 +100,7 @@ export {AiCodeGenerationUpgradeDialog} from './AiCodeGenerationUpgradeDialog.js'
 export {AnnotationManager} from './AnnotationManager.js';
 export {FreDialog} from './FreDialog.js';
 export {GdpSignUpDialog} from './GdpSignUpDialog.js';
+export {GeminiRebrandPromoDialog} from './GeminiRebrandPromoDialog.js';
 export {AiCodeCompletionDisclaimer} from './AiCodeCompletionDisclaimer.js';
 export {AiCodeCompletionSummaryToolbar} from './AiCodeCompletionSummaryToolbar.js';
 export * from './BadgeNotification.js';

package/front_end/panels/common/geminiRebrandPromoDialog.css

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+    :scope {
+        width: 100%;
+        box-shadow: none;
+        padding: var(--sys-size-8);
+    }
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .title {
+        font-size: 20px;
+    }
+
+    .banner-image {
+        margin: 10px 0;
+    }
+
+    .main-content {
+        display: flex;
+        flex-direction: column;
+        margin: var(--sys-size-6) 0;
+        gap: var(--sys-size-3);
+    }
+
+    .detail-row {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        margin: 5px;
+    }
+
+    .buttons {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 10px;
+    }
+}

package/front_end/panels/console/ErrorStackParser.ts

@@ -54,24 +54,19 @@ export function parseSourcePositionsFromErrorStack(
     let left = match[0].length;
     let right = line.length;
     let enclosedInBraces = false;
-    while (line[right - 1] === ')') {
+    if (line[right - 1] === ')') {
       right--;
       enclosedInBraces = true;
-      do {
-        left = line.indexOf('(', left);
-        if (left < 0) {
-          return null;
-        }
-        left++;
-        if (!line.substring(left).startsWith('eval at ')) {
-          break;
-        }
-        left += 8;
-        right = line.lastIndexOf(', ', right) - 1;
-        if (right < 0) {
-          return null;
-        }
-      } while (true);
+      left = line.lastIndexOf(' (', right);
+      if (left < 0) {
+        return null;
+      }
+      left += 2;
+      // Relevant in the `eval at ...` case.
+      const newRight = line.indexOf('), ', left);
+      if (newRight > left) {
+        right = newRight;
+      }
     }
 
     const linkCandidate = line.substring(left, right);

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -483,7 +483,7 @@ function renderContrastIssue(key: string, issues: ContrastIssue[]): TemplateResu
   const color = (minContrastIssue.textColor.asString(Common.Color.Format.HEXA));
   const backgroundColor = (minContrastIssue.backgroundColor.asString(Common.Color.Format.HEXA));
 
-  const showAPCA = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.APCA);
+  const showAPCA = Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA);
 
   const title = i18nString(UIStrings.textColorSOverSBackgroundResults, {
     PH1: color,
@@ -1041,7 +1041,7 @@ function renderContrastRatio(data: PopulateNodesEventNodeTypes): TemplateResult
   if (!('contrastRatio' in data)) {
     throw new Error('Contrast ratio entry is missing a contrast ratio.');
   }
-  const showAPCA = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.APCA);
+  const showAPCA = Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA);
   const contrastRatio = Platform.NumberUtilities.floor(data.contrastRatio, 2);
   const contrastRatioString = showAPCA ? contrastRatio + '%' : contrastRatio;
   const border = getBorderString(data.backgroundColor);

package/front_end/panels/css_overview/CSSOverviewModel.ts

@@ -267,7 +267,7 @@ export class CSSOverviewModel extends SDK.SDKModel.SDKModel<void> {
           const formattedTextColor = formatColor(blendedTextColor);
           const formattedBackgroundColor = formatColor(blendedBackgroundColor.asLegacyColor());
           const key = `${formattedTextColor}_${formattedBackgroundColor}`;
-          if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.APCA)) {
+          if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA)) {
             const contrastRatio = contrastInfo.contrastRatioAPCA();
             const threshold = contrastInfo.contrastRatioAPCAThreshold();
             const passes = contrastRatio && threshold ? Math.abs(contrastRatio) >= threshold : false;

package/front_end/panels/elements/ComputedStyleModel.ts

@@ -3,38 +3,26 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as UI from '../../ui/legacy/legacy.js';
-
-import {ComputedStyleWidget} from './ComputedStyleWidget.js';
-import {StylesSidebarPane} from './StylesSidebarPane.js';
 
+/**
+ * A thin wrapper around the CSS Model to gather up changes in CSS files that
+ * could impact a node's computed styles.
+ * Callers are expected to initiate tracking of the Node themselves via the CSS
+ * Model trackComputedStyleUpdatesForNode method.
+ */
 export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   #node: SDK.DOMModel.DOMNode|null;
   #cssModel: SDK.CSSModel.CSSModel|null;
   private eventListeners: Common.EventTarget.EventDescriptor[];
   private frameResizedTimer?: number;
   private computedStylePromise?: Promise<ComputedStyle|null>;
-  private currentTrackedNodeId?: number;
 
   constructor(node?: SDK.DOMModel.DOMNode|null) {
     super();
     this.#cssModel = null;
     this.eventListeners = [];
     this.#node = node ?? null;
-
-    UI.Context.Context.instance().addFlavorChangeListener(
-        StylesSidebarPane, this.evaluateTrackingComputedStyleUpdatesForNode, this);
-    UI.Context.Context.instance().addFlavorChangeListener(
-        ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
-  }
-
-  dispose(): void {
-    UI.Context.Context.instance().removeFlavorChangeListener(
-        StylesSidebarPane, this.evaluateTrackingComputedStyleUpdatesForNode, this);
-    UI.Context.Context.instance().removeFlavorChangeListener(
-        ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
   }
 
   get node(): SDK.DOMModel.DOMNode|null {
@@ -45,48 +33,12 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     this.#node = node;
     this.updateModel(this.#node ? this.#node.domModel().cssModel() : null);
     this.onCSSModelChanged(null);
-    this.evaluateTrackingComputedStyleUpdatesForNode();
   }
 
   cssModel(): SDK.CSSModel.CSSModel|null {
     return this.#cssModel?.isEnabled() ? this.#cssModel : null;
   }
 
-  // This is a debounced method because the user might be navigated from Styles tab to Computed Style tab and vice versa.
-  // For that case, we want to only run this function once.
-  private evaluateTrackingComputedStyleUpdatesForNode = Common.Debouncer.debounce((): void => {
-    if (!this.#node) {
-      // There isn't a node selected now, so let's stop tracking computed style updates for the previously tracked node.
-      if (this.currentTrackedNodeId) {
-        void this.cssModel()?.trackComputedStyleUpdatesForNode(undefined);
-        this.currentTrackedNodeId = undefined;
-      }
-      return;
-    }
-
-    const isComputedStyleWidgetVisible = Boolean(UI.Context.Context.instance().flavor(ComputedStyleWidget));
-    const isStylesTabVisible = Boolean(UI.Context.Context.instance().flavor(StylesSidebarPane));
-    const shouldTrackComputedStyleUpdates = isComputedStyleWidgetVisible ||
-        (isStylesTabVisible && Root.Runtime.hostConfig.devToolsAnimationStylesInStylesTab?.enabled);
-    // There is a selected node but not the computed style widget nor the styles tab is visible.
-    // If there is a previously tracked node let's stop tracking computed style updates for that node.
-    if (!shouldTrackComputedStyleUpdates) {
-      if (this.currentTrackedNodeId) {
-        void this.cssModel()?.trackComputedStyleUpdatesForNode(undefined);
-        this.currentTrackedNodeId = undefined;
-      }
-      return;
-    }
-
-    // Either computed style widget or styles tab is visible
-    // if the currently tracked node id is not the same as the selected node
-    // let's start tracking the currently selected node.
-    if (this.currentTrackedNodeId !== this.#node.id) {
-      void this.cssModel()?.trackComputedStyleUpdatesForNode(this.#node.id);
-      this.currentTrackedNodeId = this.#node.id;
-    }
-  }, 100);
-
   private updateModel(cssModel: SDK.CSSModel.CSSModel|null): void {
     if (this.#cssModel === cssModel) {
       return;
@@ -95,6 +47,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     this.#cssModel = cssModel;
     const domModel = cssModel ? cssModel.domModel() : null;
     const resourceTreeModel = cssModel ? cssModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel) : null;
+
     if (cssModel && domModel && resourceTreeModel) {
       this.eventListeners = [
         cssModel.addEventListener(SDK.CSSModel.Events.StyleSheetAdded, this.onCSSModelChanged, this),