chrome-devtools-frontend 1.0.1570343 → 1.0.1571573

package/front_end/models/ai_assistance/BuiltInAi.ts

@@ -47,7 +47,8 @@ export class BuiltInAi extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   }
 
   async getLanguageModelAvailability(): Promise<LanguageModelAvailability> {
-    if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.enabled) {
+    if (!Root.Runtime.hostConfig.devToolsConsoleInsightsTeasers?.enabled ||
+        (Root.Runtime.hostConfig.devToolsAiPromptApi && !Root.Runtime.hostConfig.devToolsAiPromptApi.enabled)) {
       this.#availability = LanguageModelAvailability.DISABLED;
       return this.#availability;
     }
@@ -74,7 +75,7 @@ export class BuiltInAi extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   }
 
   isEventuallyAvailable(): boolean {
-    if (!this.#hasGpu && !Boolean(Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu)) {
+    if (!this.#hasGpu && !Boolean(Root.Runtime.hostConfig.devToolsConsoleInsightsTeasers?.allowWithoutGpu)) {
       return false;
     }
     return this.#availability === LanguageModelAvailability.AVAILABLE ||
@@ -92,7 +93,7 @@ export class BuiltInAi extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   }
 
   startDownloadingModel(): void {
-    if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !this.#hasGpu) {
+    if (!Root.Runtime.hostConfig.devToolsConsoleInsightsTeasers?.allowWithoutGpu && !this.#hasGpu) {
       return;
     }
     if (this.#availability !== LanguageModelAvailability.DOWNLOADABLE) {
@@ -132,7 +133,7 @@ export class BuiltInAi extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   }
 
   async initialize(): Promise<void> {
-    if (!Root.Runtime.hostConfig.devToolsAiPromptApi?.allowWithoutGpu && !this.#hasGpu) {
+    if (!Root.Runtime.hostConfig.devToolsConsoleInsightsTeasers?.allowWithoutGpu && !this.#hasGpu) {
       return;
     }
     if (this.#availability !== LanguageModelAvailability.AVAILABLE &&

package/front_end/models/issues_manager/ContrastCheckTrigger.ts

@@ -45,7 +45,7 @@ export class ContrastCheckTrigger {
   }
 
   #checkContrast(resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel): void {
-    if (!Root.Runtime.experiments.isEnabled('contrast-issues')) {
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CONTRAST_ISSUES)) {
       return;
     }
     void resourceTreeModel.target().auditsAgent().invoke_checkContrast({});
@@ -60,7 +60,7 @@ export class ContrastCheckTrigger {
 
   async #frameAdded(event: Common.EventTarget.EventTargetEvent<SDK.ResourceTreeModel.ResourceTreeFrame>):
       Promise<void> {
-    if (!Root.Runtime.experiments.isEnabled('contrast-issues')) {
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CONTRAST_ISSUES)) {
       return;
     }
     const frame = event.data;

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -6594,6 +6594,14 @@ export const NativeFunctions = [
     name: "setHTML",
     signatures: [["html","?options"]]
   },
+  {
+    name: "streamAppendHTMLUnsafe",
+    signatures: [["?options"]]
+  },
+  {
+    name: "streamHTMLUnsafe",
+    signatures: [["?options"]]
+  },
   {
     name: "scrollIntoViewIfNeeded",
     signatures: [["?centerIfNeeded"]]

package/front_end/models/trace/ModelImpl.ts

@@ -10,10 +10,6 @@ import type * as Insights from './insights/insights.js';
 import {TraceParseProgressEvent, TraceProcessor} from './Processor.js';
 import * as Types from './types/types.js';
 
-// Note: this model is implemented in a way that can support multiple trace
-// processors. Currently there is only one implemented, but you will see
-// references to "processors" plural because it can easily be extended in the future.
-
 /**
  * The Model is responsible for parsing arrays of raw trace events and storing the
  * resulting data. It can store multiple traces at once, and can return the data for

package/front_end/panels/accessibility/AccessibilitySidebarView.ts

@@ -95,7 +95,7 @@ export class AccessibilitySidebarView extends UI.Widget.VBox {
     if (!accessibilityModel) {
       return;
     }
-    if (!Root.Runtime.experiments.isEnabled('full-accessibility-tree')) {
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.FULL_ACCESSIBILITY_TREE)) {
       accessibilityModel.clear();
     }
     await accessibilityModel.requestPartialAXTree(node);

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -5,6 +5,7 @@
 import '../../ui/legacy/legacy.js';
 import '../../ui/components/markdown_view/markdown_view.js';
 import '../../ui/components/spinners/spinners.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -200,15 +201,13 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       return nothing;
     }
 
-    return html`<x-link
+    return html`<devtools-link
           class="link"
           title="${UIStringsNotTranslate.viewUploadedFiles} ${UIStringsNotTranslate.opensInNewTab}"
           href="data:text/plain;charset=utf-8,${encodeURIComponent(input.sources)}"
-          jslog=${VisualLogging.link('files-used-in-patching').track({
-      click: true
-    })}>
+          .jslogContext=${'files-used-in-patching'}>
           ${UIStringsNotTranslate.viewUploadedFiles}
-        </x-link>`;
+        </devtools-link>`;
   }
 
   function renderHeader(): LitTemplate {
@@ -297,12 +296,10 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       return html`
           <div class="footer">
             <div class="left-side">
-              <x-link class="link disclaimer-link" href="https://support.google.com/legal/answer/13505487" jslog=${
-          VisualLogging.link('code-disclaimer').track({
-            click: true,
-          })}>
+              <devtools-link class="link disclaimer-link" href="https://support.google.com/legal/answer/13505487" .jslogContext=${
+                 'code-disclaimer'}>
                 ${lockedString(UIStringsNotTranslate.codeDisclaimer)}
-              </x-link>
+              </devtools-link>
               ${renderSourcesLink()}
             </div>
             <div class="save-or-discard-buttons">
@@ -575,13 +572,11 @@ export class PatchWidget extends UI.Widget.Widget {
         {
           iconName: 'warning',
           // clang-format off
-          content: html`<x-link
+          content: html`<devtools-link
             href=${CODE_SNIPPET_WARNING_URL}
             class="link devtools-link"
-            jslog=${VisualLogging.link('code-snippets-explainer.patch-widget').track({
-              click: true
-            })}
-          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</x-link>`,
+            .jslogContext=${'code-snippets-explainer.patch-widget'}
+          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</devtools-link>`,
           // clang-format on
         }
       ],

package/front_end/panels/ai_assistance/SelectWorkspaceDialog.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';
@@ -13,7 +15,6 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import selectWorkspaceDialogStyles from './selectWorkspaceDialog.css.js';
 
@@ -89,11 +90,11 @@ export const SELECT_WORKSPACE_DIALOG_DEFAULT_VIEW: View = (input, _output, targe
           <!-- Hardcoding, because there is no 'getFormatLocalizedString' equivalent for 'lockedString' -->
           <div>
             Tip: provide a
-            <x-link
+            <devtools-link
               class="devtools-link"
               href="https://goo.gle/devtools-automatic-workspace-folders"
-              jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('automatic-workspaces-documentation')}
-            >com.chrome.devtools.json</x-link>
+              .jslogContext=${'automatic-workspaces-documentation'}
+            >com.chrome.devtools.json</devtools-link>
             file to automatically connect your project to DevTools.
           </div>
         ` : nothing}

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import '../../../ui/components/markdown_view/markdown_view.js';
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -576,12 +577,12 @@ function renderImageChatMessage(inlineData: Host.AidaClient.MediaBlob): Lit.LitT
   }
   const imageUrl = `data:${inlineData.mimeType};base64,${inlineData.data}`;
   // clang-format off
-    return html`<x-link
+    return html`<devtools-link
       class="image-link" title=${UIStringsNotTranslate.openImageInNewTab}
       href=${imageUrl}
     >
       <img src=${imageUrl} alt=${UIStringsNotTranslate.imageInputSentToTheModel} />
-    </x-link>`;
+    </devtools-link>`;
   // clang-format on
 }
 

package/front_end/panels/application/FrameDetailsView.ts

@@ -856,7 +856,8 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
-    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
+    this.#protocolMonitorExperimentEnabled =
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.PROTOCOL_MONITOR);
     this.#view = view;
   }
 

package/front_end/panels/application/components/ReportsGrid.ts

@@ -134,7 +134,8 @@ export class ReportsGrid extends UI.Widget.Widget {
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
-    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
+    this.#protocolMonitorExperimentEnabled =
+        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.PROTOCOL_MONITOR);
     this.requestUpdate();
   }
 

package/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -4,13 +4,13 @@
 
 import '../../ui/components/spinners/spinners.js';
 import '../../ui/components/tooltips/tooltips.js';
+import '../../ui/kit/kit.js';
 
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {AiCodeCompletionDisclaimer} from './AiCodeCompletionDisclaimer.js';
 import styles from './aiCodeCompletionSummaryToolbar.css.js';
@@ -86,12 +86,10 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, _output, target) => {
                     variant="rich"
                     jslogContext="ai-code-completion-citations"
                 ><div class="citations-tooltip-container">
-                    ${Directives.repeat(input.citations, citation => html`<x-link
+                    ${Directives.repeat(input.citations, citation => html`<devtools-link
                         tabIndex="0"
                         href=${citation}
-                        jslog=${VisualLogging.link('ai-code-completion-citations.citation-link').track({
-      click: true
-    })}>${citation}</x-link>`)}</div></devtools-tooltip>
+                        .jslogContext=${'ai-code-completion-citations.citation-link'}>${citation}</devtools-link>`)}</div></devtools-tooltip>
             </div>` : nothing;
 
   render(

package/front_end/panels/common/AiCodeCompletionTeaser.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';
@@ -244,13 +246,11 @@ export class AiCodeCompletionTeaser extends UI.Widget.Widget {
         {
           iconName: 'warning',
           // clang-format off
-          content: html`<x-link
+          content: html`<devtools-link
             href=${CODE_SNIPPET_WARNING_URL}
             class="link devtools-link"
-            jslog=${VisualLogging.link('code-snippets-explainer.ai-code-completion-teaser').track({
-              click: true
-            })}
-          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</x-link>`,
+            .jslogContext=${'code-snippets-explainer.ai-code-completion-teaser'}
+          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</devtools-link>`,
           // clang-format on
         });
     return reminderItems;

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import '../../ui/components/tooltips/tooltips.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -167,13 +168,13 @@ function renderNoModel(input: ViewInput): Lit.TemplateResult {
           lockedString(UIStringsNotTranslate.getHelpForWarning) :
           lockedString(UIStringsNotTranslate.getHelpForError)}
         </h2>
-        <div>You can get quick answers from <x-link
-            .jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('insights-teaser-built-in-ai-documentation')}
+        <div>You can get quick answers from <devtools-link
+            .jslogContext=${'insights-teaser-built-in-ai-documentation'}
             class="link"
             href=${BUILT_IN_AI_DOCUMENTATION}
           >
             Chrome’s Built-in AI
-          </x-link>
+          </devtools-link>
           , without any data leaving your device.
         </div>
         <div>${lockedString(UIStringsNotTranslate.toUseDownload)}</div>
@@ -324,12 +325,12 @@ function renderFooter(input: ViewInput): Lit.TemplateResult {
       >
         <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
         <div class="learn-more">
-          <x-link
+          <devtools-link
             class="devtools-link"
             title=${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}
             href=${DATA_USAGE_URL}
-            jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explain.teaser.learn-more')}
-          >${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}</x-link>
+            .jslogContext=${'explain.teaser.learn-more'}
+          >${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}</devtools-link>
         </div>
       </devtools-tooltip>
       ${renderDontShowCheckbox(input)}
@@ -509,13 +510,11 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
         {
           iconName: 'warning',
           // clang-format off
-          content: html`<x-link
+          content: html`<devtools-link
             href=${CODE_SNIPPET_WARNING_URL}
             class="link devtools-link"
-            jslog=${VisualLogging.link('explain.teaser.code-snippets-explainer').track({
-              click: true
-            })}
-          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</x-link>`,
+            .jslogContext=${'explain.teaser.code-snippets-explainer'}
+          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</devtools-link>`,
           // clang-format on
         }
       ],

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('apca');
+  const showAPCA = Root.Runtime.experiments.isEnabled(Root.Runtime.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('apca');
+  const showAPCA = Root.Runtime.experiments.isEnabled(Root.Runtime.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('apca')) {
+          if (Root.Runtime.experiments.isEnabled(Root.Runtime.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

@@ -18,13 +18,12 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
   private computedStylePromise?: Promise<ComputedStyle|null>;
   private currentTrackedNodeId?: number;
 
-  constructor() {
+  constructor(node?: SDK.DOMModel.DOMNode|null) {
     super();
     this.#cssModel = null;
     this.eventListeners = [];
-    this.#node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
+    this.#node = node ?? null;
 
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.onNodeChanged, this);
     UI.Context.Context.instance().addFlavorChangeListener(
         StylesSidebarPane, this.evaluateTrackingComputedStyleUpdatesForNode, this);
     UI.Context.Context.instance().addFlavorChangeListener(
@@ -32,17 +31,23 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
   }
 
   dispose(): void {
-    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.onNodeChanged, this);
     UI.Context.Context.instance().removeFlavorChangeListener(
         StylesSidebarPane, this.evaluateTrackingComputedStyleUpdatesForNode, this);
     UI.Context.Context.instance().removeFlavorChangeListener(
         ComputedStyleWidget, this.evaluateTrackingComputedStyleUpdatesForNode, this);
   }
 
-  node(): SDK.DOMModel.DOMNode|null {
+  get node(): SDK.DOMModel.DOMNode|null {
     return this.#node;
   }
 
+  set node(node: SDK.DOMModel.DOMNode|null) {
+    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;
   }
@@ -82,13 +87,6 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
     }
   }, 100);
 
-  private onNodeChanged(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
-    this.#node = event.data;
-    this.updateModel(this.#node ? this.#node.domModel().cssModel() : null);
-    this.onCSSModelChanged(null);
-    this.evaluateTrackingComputedStyleUpdatesForNode();
-  }
-
   private updateModel(cssModel: SDK.CSSModel.CSSModel|null): void {
     if (this.#cssModel === cssModel) {
       return;
@@ -155,7 +153,7 @@ export class ComputedStyleModel extends Common.ObjectWrapper.ObjectWrapper<Event
   }
 
   private elementNode(): SDK.DOMModel.DOMNode|null {
-    const node = this.node();
+    const node = this.node;
     if (!node) {
       return null;
     }

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -319,7 +319,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
         return link;
       }
       return null;
-    }, () => this.computedStyleModel.node());
+    }, () => this.computedStyleModel.node);
 
     const fontsWidget = new PlatformFontsWidget(this.computedStyleModel);
     fontsWidget.show(this.contentElement);
@@ -356,7 +356,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   }
 
   private async fetchMatchedCascade(): Promise<SDK.CSSMatchedStyles.CSSMatchedStyles|null> {
-    const node = this.computedStyleModel.node();
+    const node = this.computedStyleModel.node;
     if (!node || !this.computedStyleModel.cssModel()) {
       return null;
     }
@@ -370,7 +370,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
 
     function validateStyles(this: ComputedStyleWidget, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null):
         SDK.CSSMatchedStyles.CSSMatchedStyles|null {
-      return matchedStyles && matchedStyles.node() === this.computedStyleModel.node() ? matchedStyles : null;
+      return matchedStyles && matchedStyles.node() === this.computedStyleModel.node ? matchedStyles : null;
     }
   }
 

package/front_end/panels/elements/ElementsPanel.ts

@@ -263,7 +263,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.mainContainer = document.createElement('div');
     this.domTreeContainer = document.createElement('div');
     const crumbsContainer = document.createElement('div');
-    if (Root.Runtime.experiments.isEnabled('full-accessibility-tree')) {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.FULL_ACCESSIBILITY_TREE)) {
       this.initializeFullAccessibilityTreeView();
     }
     this.mainContainer.appendChild(this.domTreeContainer);
@@ -299,7 +299,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     crumbsContainer.appendChild(this.breadcrumbs);
 
-    const computedStyleModel = new ComputedStyleModel();
+    const computedStyleModel = new ComputedStyleModel(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode));
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, event => {
+      computedStyleModel.node = event.data;
+    });
     this.stylesWidget = new StylesSidebarPane(computedStyleModel);
     this.computedStyleWidget = new ComputedStyleWidget(computedStyleModel);
     this.metricsWidget = new MetricsSidebarPane(computedStyleModel);

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -21,7 +21,7 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
   }
 
   node(): SDK.DOMModel.DOMNode|null {
-    return this.computedStyleModelInternal.node();
+    return this.computedStyleModelInternal.node;
   }
 
   cssModel(): SDK.CSSModel.CSSModel|null {

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -93,7 +93,7 @@ export class PlatformFontsWidget extends UI.Widget.VBox {
 
   override async performUpdate(): Promise<void> {
     const cssModel = this.sharedModel.cssModel();
-    const node = this.sharedModel.node();
+    const node = this.sharedModel.node;
     if (!node || !cssModel) {
       this.#view({platformFonts: null}, {}, this.contentElement);
       return;

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -257,7 +257,7 @@ export class StylePropertiesSection {
       UI.ARIAUtils.setHidden(this.newStyleRuleToolbar, true);
     }
 
-    if (Root.Runtime.experiments.isEnabled('font-editor') && this.editable) {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.FONT_EDITOR) && this.editable) {
       this.fontEditorToolbar = this.#styleRuleElement.createChild('devtools-toolbar', 'sidebar-pane-section-toolbar');
       this.fontEditorSectionManager = new FontEditorSectionManager(this.parentPane.swatchPopoverHelper(), this);
       this.fontEditorButton =

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -2348,7 +2348,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
             this.name, this.style, this.#parentPane, this.#matchedStyles, this, this.getComputedStyles() ?? new Map()) :
         [];
 
-    if (Root.Runtime.experiments.isEnabled('font-editor') && this.property.parsedOk) {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.FONT_EDITOR) && this.property.parsedOk) {
       renderers.push(new FontRenderer(this));
     }
     this.listItemElement.removeChildren();