chrome-devtools-frontend 1.0.1632065 → 1.0.1635648

package/front_end/panels/common/ExtensionServer.ts

@@ -141,6 +141,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private inspectedTabId?: string;
   private readonly extensionAPITestHook?: (server: unknown, api: unknown) => unknown;
   private themeChangeHandlers = new Map<string, MessagePort>();
+  private readonly recorderViewPortMap: Map<string, MessagePort>;
   readonly #pendingExtensions: Host.InspectorFrontendHostAPI.ExtensionDescriptor[] = [];
 
   private constructor() {
@@ -148,6 +149,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.clientObjects = new Map();
     this.handlers = new Map();
     this.subscribers = new Map();
+    this.recorderViewPortMap = new Map();
     this.subscriptionStartHandlers = new Map();
     this.subscriptionStopHandlers = new Map();
     this.extraHeaders = new Map();
@@ -430,8 +432,10 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
           'command', `expected ${Extensions.ExtensionAPI.PrivateAPI.Commands.RegisterRecorderExtensionPlugin}`);
     }
     const {pluginName, mediaType, port, capabilities} = message;
+    const extensionOrigin = this.getExtensionOrigin(_shared_port);
     Extensions.RecorderPluginManager.RecorderPluginManager.instance().addPlugin(
-        new Extensions.RecorderExtensionEndpoint.RecorderExtensionEndpoint(pluginName, port, capabilities, mediaType));
+        new Extensions.RecorderExtensionEndpoint.RecorderExtensionEndpoint(
+            pluginName, port, capabilities, extensionOrigin, mediaType));
     return this.status.OK();
   }
 
@@ -483,12 +487,15 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.status.OK();
   }
 
-  private onShowRecorderView(message: Extensions.ExtensionAPI.PrivateAPI.ExtensionServerRequestMessage): Record
-      |undefined {
+  private onShowRecorderView(
+      message: Extensions.ExtensionAPI.PrivateAPI.ExtensionServerRequestMessage, port: MessagePort): Record|undefined {
     if (message.command !== Extensions.ExtensionAPI.PrivateAPI.Commands.ShowRecorderView) {
       return this.status.E_BADARG(
           'command', `expected ${Extensions.ExtensionAPI.PrivateAPI.Commands.ShowRecorderView}`);
     }
+    if (this.recorderViewPortMap.get(message.id) !== port) {
+      return this.status.E_FAILED('Permission denied');
+    }
     Extensions.RecorderPluginManager.RecorderPluginManager.instance().showView(message.id);
     return undefined;
   }
@@ -516,7 +523,8 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       return this.status.E_EXISTS(id);
     }
 
-    const pagePath = ExtensionServer.expandResourcePath(this.getExtensionOrigin(port), message.pagePath);
+    const extensionOrigin = this.getExtensionOrigin(port);
+    const pagePath = ExtensionServer.expandResourcePath(extensionOrigin, message.pagePath);
     if (pagePath === undefined) {
       return this.status.E_BADARG('pagePath', 'Resources paths cannot point to non-extension resources');
     }
@@ -528,7 +536,9 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       title: message.title,
       onShown,
       onHidden,
+      extensionOrigin,
     });
+    this.recorderViewPortMap.set(id, port);
     return this.status.OK();
   }
 
@@ -614,15 +624,25 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return undefined;
   }
 
-  private onAddRequestHeaders(message: Extensions.ExtensionAPI.PrivateAPI.ExtensionServerRequestMessage): Record
-      |undefined {
+  private onAddRequestHeaders(
+      message: Extensions.ExtensionAPI.PrivateAPI.ExtensionServerRequestMessage, port: MessagePort): Record|undefined {
     if (message.command !== Extensions.ExtensionAPI.PrivateAPI.Commands.AddRequestHeaders) {
       return this.status.E_BADARG(
           'command', `expected ${Extensions.ExtensionAPI.PrivateAPI.Commands.AddRequestHeaders}`);
     }
-    const id = message.extensionId;
-    if (typeof id !== 'string') {
-      return this.status.E_BADARGTYPE('extensionId', typeof id, 'string');
+    // Use the authenticated port origin instead of the caller-supplied extensionId to
+    // prevent one extension from manipulating another extension's header set.
+    const id = this.getExtensionOrigin(port);
+    const extension = this.registeredExtensions.get(id);
+    if (!extension) {
+      return this.status.E_FAILED('Permission denied');
+    }
+    // Refuse the request if the extension has any runtime_blocked_hosts policy entries.
+    // MultitargetNetworkManager fans out setExtraHTTPHeaders to every attached network
+    // agent (including OOPIF/subframe targets), so there is no safe per-target URL check
+    // here. Blocking the call when blocked hosts exist is the minimal safe mitigation.
+    if (extension.hostsPolicy.runtimeBlockedHosts.length > 0) {
+      return this.status.E_FAILED('Permission denied');
     }
     let extensionHeaders = this.extraHeaders.get(id);
     if (!extensionHeaders) {
@@ -977,8 +997,6 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
     const options = (message.options || {});
 
-    SDK.NetworkManager.MultitargetNetworkManager.instance().setUserAgentOverride(
-        typeof options.userAgent === 'string' ? options.userAgent : '', null);
     let injectedScript;
     if (options.injectedScript) {
       injectedScript = '(function(){' + options.injectedScript + '})()';
@@ -991,6 +1009,11 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (!this.extensionAllowedOnTarget(target, port)) {
       return this.status.E_FAILED('Permission denied');
     }
+    // Apply the UA override only after confirming the extension is allowed on this target,
+    // so that extensions blocked by runtime_blocked_hosts cannot override the UA for the
+    // primary page (and, via singleton persistence, for future targets that attach later).
+    SDK.NetworkManager.MultitargetNetworkManager.instance().setUserAgentOverride(
+        typeof options.userAgent === 'string' ? options.userAgent : '', null);
     resourceTreeModel?.reloadPage(Boolean(options.ignoreCache), injectedScript);
     return this.status.OK();
   }

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -4,6 +4,8 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as uiI18n from '../../ui/i18n/i18n.js';
+import {html, type LitTemplate} from '../../ui/lit/lit.js';
 
 import {
   buildPropertyDefinitionText,
@@ -102,6 +104,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSRuleValidator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const i18nLazyStringTemplate = uiI18n.getFormatLocalizedStringTemplate.bind(undefined, str_);
 
 export const enum HintType {
   INACTIVE_PROPERTY = 'ruleValidation',
@@ -109,21 +112,21 @@ export const enum HintType {
 }
 
 export class Hint {
-  readonly #hintMessage: string;
-  readonly #possibleFixMessage: string|null;
+  readonly #hintMessage: LitTemplate|string;
+  readonly #possibleFixMessage: LitTemplate|string|null;
   readonly #learnMoreLink: string|undefined;
 
-  constructor(hintMessage: string, possibleFixMessage: string|null, learnMoreLink?: string) {
+  constructor(hintMessage: LitTemplate|string, possibleFixMessage: LitTemplate|string|null, learnMoreLink?: string) {
     this.#hintMessage = hintMessage;
     this.#possibleFixMessage = possibleFixMessage;
     this.#learnMoreLink = learnMoreLink;
   }
 
-  getMessage(): string {
+  getMessage(): LitTemplate|string {
     return this.#hintMessage;
   }
 
-  getPossibleFixMessage(): string|null {
+  getPossibleFixMessage(): LitTemplate|string|null {
     return this.#possibleFixMessage;
   }
 
@@ -164,11 +167,11 @@ export class AlignContentValidator extends CSSRuleValidator {
       const affectedPropertyDeclarationCode = buildPropertyName('align-content');
 
       return new Hint(
-          i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
             REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
             AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
           }),
-          i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleFix, {
             PROPERTY_NAME: buildPropertyName('display'),
             PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
           }),
@@ -186,11 +189,11 @@ export class AlignContentValidator extends CSSRuleValidator {
     const affectedPropertyDeclarationCode = buildPropertyName('align-content');
 
     return new Hint(
-        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
           REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
           AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
         }),
-        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleFix, {
           PROPERTY_NAME: buildPropertyName('flex-wrap'),
           PROPERTY_VALUE: buildPropertyValue('nowrap'),
         }),
@@ -215,11 +218,11 @@ export class FlexItemValidator extends CSSRuleValidator {
     const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
     const targetParentPropertyDeclaration = buildPropertyDefinitionText('display', 'flex');
     return new Hint(
-        i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedByParentElementRuleReason, {
           REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
           AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
         }),
-        i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedByParentElementRuleFix, {
           EXISTING_PARENT_ELEMENT_RULE: reasonPropertyDeclaration,
           TARGET_PARENT_ELEMENT_RULE: targetParentPropertyDeclaration,
         }),
@@ -244,11 +247,11 @@ export class FlexContainerValidator extends CSSRuleValidator {
     const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
           REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
           AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
         }),
-        i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
           EXISTING_PROPERTY_DECLARATION: reasonPropertyDeclaration,
           TARGET_PROPERTY_DECLARATION: targetRuleCode,
         }),
@@ -279,11 +282,11 @@ export class GridContainerValidator extends CSSRuleValidator {
     const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
           REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
           AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
         }),
-        i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
           EXISTING_PROPERTY_DECLARATION: reasonPropertyDeclaration,
           TARGET_PROPERTY_DECLARATION: targetRuleCode,
         }),
@@ -315,11 +318,11 @@ export class GridItemValidator extends CSSRuleValidator {
     const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedByParentElementRuleReason, {
           REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
           AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
         }),
-        i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedByParentElementRuleFix, {
           EXISTING_PARENT_ELEMENT_RULE: reasonPropertyDeclaration,
           TARGET_PARENT_ELEMENT_RULE: targetParentPropertyDeclaration,
         }),
@@ -344,15 +347,15 @@ export class FlexOrGridItemValidator extends CSSRuleValidator {
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', parentComputedStyles?.get('display'));
     const targetParentPropertyDeclaration =
-        `${buildPropertyDefinitionText('display', 'flex')} or ${buildPropertyDefinitionText('display', 'grid')}`;
+        html`${buildPropertyDefinitionText('display', 'flex')} or ${buildPropertyDefinitionText('display', 'grid')}`;
     const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedByParentElementRuleReason, {
           REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
           AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
         }),
-        i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedByParentElementRuleFix, {
           EXISTING_PARENT_ELEMENT_RULE: reasonPropertyDeclaration,
           TARGET_PARENT_ELEMENT_RULE: targetParentPropertyDeclaration,
         }),
@@ -383,11 +386,11 @@ export class FlexGridValidator extends CSSRuleValidator {
       const reasonPropertyName = buildPropertyName(propertyName);
       const reasonAlternativePropertyName = buildPropertyName('justify-self');
       return new Hint(
-          i18nString(UIStrings.flexGridContainerPropertyRuleReason, {
+          i18nLazyStringTemplate(UIStrings.flexGridContainerPropertyRuleReason, {
             CONTAINER_DISPLAY_NAME: reasonContainerDisplayName,
             PROPERTY_NAME: reasonPropertyName,
           }),
-          i18nString(UIStrings.flexGridContainerPropertyRuleFix, {
+          i18nLazyStringTemplate(UIStrings.flexGridContainerPropertyRuleFix, {
             PROPERTY_NAME: reasonPropertyName,
             ALTERNATIVE_PROPERTY_NAME: reasonAlternativePropertyName,
           }),
@@ -398,11 +401,11 @@ export class FlexGridValidator extends CSSRuleValidator {
     const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
           REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
           AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
         }),
-        i18nString(UIStrings.ruleViolatedBySameElementRuleChangeFlexOrGrid, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleChangeFlexOrGrid, {
           DISPLAY_GRID_RULE: buildPropertyDefinitionText('display', 'grid'),
           DISPLAY_FLEX_RULE: buildPropertyDefinitionText('display', 'flex'),
         }),
@@ -436,11 +439,11 @@ export class MulticolFlexGridValidator extends CSSRuleValidator {
     const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
           REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
           AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
         }),
-        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleFix, {
           PROPERTY_NAME: buildPropertyName('display'),
           PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
         }),
@@ -480,11 +483,11 @@ export class PaddingValidator extends CSSRuleValidator {
     const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
           REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
           AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
         }),
-        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleFix, {
           PROPERTY_NAME: buildPropertyName('display'),
           PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
         }),
@@ -515,11 +518,11 @@ export class PositionValidator extends CSSRuleValidator {
     const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
           REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
           AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
         }),
-        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleFix, {
           PROPERTY_NAME: buildPropertyName('position'),
           PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('position') as string),
         }),
@@ -549,11 +552,11 @@ export class ZIndexValidator extends CSSRuleValidator {
     const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
           REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
           AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
         }),
-        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleFix, {
           PROPERTY_NAME: buildPropertyName('position'),
           PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('position') as string),
         }),
@@ -615,11 +618,11 @@ export class SizingValidator extends CSSRuleValidator {
     const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleReason, {
           REASON_PROPERTY_DECLARATION_CODE: reasonPropertyDeclaration,
           AFFECTED_PROPERTY_DECLARATION_CODE: affectedPropertyDeclarationCode,
         }),
-        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+        i18nLazyStringTemplate(UIStrings.ruleViolatedBySameElementRuleFix, {
           PROPERTY_NAME: buildPropertyName('display'),
           PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
         }),

package/front_end/panels/elements/CSSRuleValidatorHelper.ts

@@ -2,19 +2,21 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-export const buildPropertyDefinitionText = (property: string, value?: string): string => {
+import {html, type LitTemplate} from '../../ui/lit/lit.js';
+
+export const buildPropertyDefinitionText = (property: string, value?: string): LitTemplate => {
   if (value === undefined) {
     return buildPropertyName(property);
   }
-  return '<code class="unbreakable-text"><span class="property">' + property + '</span>: ' + value + '</code>';
+  return html`<code class="unbreakable-text"><span class="property">${property}</span>: ${value}</code>`;
 };
 
-export const buildPropertyName = (property: string): string => {
-  return '<code class="unbreakable-text"><span class="property">' + property + '</span></code>';
+export const buildPropertyName = (property: string): LitTemplate => {
+  return html`<code class="unbreakable-text"><span class="property">${property}</span></code>`;
 };
 
-export const buildPropertyValue = (property: string): string => {
-  return '<code class="unbreakable-text">' + property + '</code>';
+export const buildPropertyValue = (property: string): LitTemplate => {
+  return html`<code class="unbreakable-text">${property}</code>`;
 };
 
 export const isFlexContainer = (computedStyles?: Map<string, string>): boolean => {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1299,6 +1299,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
   // ClearNode param is used to clean DOM after in-place editing..
   performUpdate(clearNode = false): void {
+    // Skip updating when in-place editing (not HTML editing indicated by the
+    // editorState) is happening. Doing an update would break editing
+    // (crbug.com/515639787).
+    if (this.editing && !this.#editorState) {
+      return;
+    }
     const output: ViewOutput = {};
     DEFAULT_VIEW(
         {
@@ -2384,7 +2390,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     return this.startEditingAttribute(attr, attr);
   }
 
-  private triggerEditAttribute(attributeName: string): boolean|undefined {
+  triggerEditAttribute(attributeName: string): boolean|undefined {
     const attributeElements = this.listItemElement.getElementsByClassName('webkit-html-attribute-name');
     for (let i = 0, len = attributeElements.length; i < len; ++i) {
       if (attributeElements[i].textContent === attributeName) {
@@ -2823,7 +2829,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     textNode.setNodeValue(newText, callback.bind(this));
   }
 
-  private editingCancelled(_element: Element, _tagName: string|null): void {
+  editingCancelled(_element: Element, _tagName: string|null): void {
     this.editing = null;
 
     // Need to restore attributes structure.

package/front_end/panels/elements/components/CSSHintDetailsView.ts

@@ -7,7 +7,7 @@ import '../../../ui/kit/kit.js';
 import '../../../ui/legacy/legacy.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import {Directives, html, render} from '../../../ui/lit/lit.js';
+import {html, type LitTemplate, render} from '../../../ui/lit/lit.js';
 
 import cssHintDetailsViewStyles from './cssHintDetailsView.css.js';
 
@@ -21,8 +21,8 @@ const str_ = i18n.i18n.registerUIStrings('panels/elements/components/CSSHintDeta
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 interface Hint {
-  getMessage(): string;
-  getPossibleFixMessage(): string|null;
+  getMessage(): LitTemplate|string;
+  getPossibleFixMessage(): LitTemplate|string|null;
   getLearnMoreLink(): string|undefined;
 }
 
@@ -43,11 +43,11 @@ export class CSSHintDetailsView extends HTMLElement {
         <style>${cssHintDetailsViewStyles}</style>
         <div class="hint-popup-wrapper">
           <div class="hint-popup-reason">
-            ${Directives.unsafeHTML(this.#authoringHint.getMessage())}
+            ${this.#authoringHint.getMessage()}
           </div>
           ${this.#authoringHint.getPossibleFixMessage() ? html`
               <div class="hint-popup-possible-fix">
-                  ${Directives.unsafeHTML(this.#authoringHint.getPossibleFixMessage())}
+                  ${this.#authoringHint.getPossibleFixMessage()}
               </div>
           ` : ''}
           ${link ? html`

package/front_end/panels/js_timeline/js_timeline-meta.ts

@@ -33,6 +33,14 @@ const UIStrings = {
    * @description Title of an action in the timeline tool to record a reload of the current page
    */
   recordAndReload: 'Record and reload',
+  /**
+   * @description Title of a setting under the Performance category in Settings
+   */
+  timelineShowAllEvents: 'Show all events',
+  /**
+   * @description Title of a setting under the Performance category in Settings
+   */
+  timelineDebugMode: 'Timeline debug mode (trace event details, etc.)',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/js_timeline/js_timeline-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -152,6 +160,28 @@ UI.ActionRegistration.registerActionExtension({
   ],
 });
 
+// IMPORTANT: if you are updating this, you should also update the setting in
+// timeline-meta.
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.PERFORMANCE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.timelineShowAllEvents),
+  settingName: 'timeline-show-all-events',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
+// IMPORTANT: if you are updating this, you should also update the setting in
+// timeline-meta.
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.PERFORMANCE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.timelineDebugMode),
+  settingName: 'timeline-debug-mode',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+});
+
 // IMPORTANT: if you are updating this, you should also update the setting in
 // timeline-meta.
 Common.Settings.registerSettingExtension({

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -509,12 +509,12 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
     const [head, tail] = splitDescription(elementData.description);
     const type = elementData.type;
     const replyArgs = elementData.replyArgs;
-    let popupContent = '';
+    let popupContent: Lit.LitTemplate|string;
     // replyArgs and type cannot get into conflict because replyArgs is attached to a command and type to a parameter
     if (replyArgs && replyArgs.length > 0) {
-      popupContent = tail + `Returns: ${replyArgs}<br>`;
+      popupContent = html`${tail}Returns: ${replyArgs}<br>`;
     } else if (type) {
-      popupContent = tail + `<br>Type: ${type}<br>`;
+      popupContent = html`${tail}<br>Type: ${type}<br>`;
     } else {
       popupContent = tail;
     }
@@ -523,7 +523,7 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
       box: hintElement.boxInWindow(),
       show: async (popover: UI.GlassPane.GlassPane) => {
         const popupElement = new ElementsComponents.CSSHintDetailsView.CSSHintDetailsView({
-          getMessage: () => `<span>${head}</span>`,
+          getMessage: () => html`<span>${head}</span>`,
           getPossibleFixMessage: () => popupContent,
           getLearnMoreLink: () =>
               `https://chromedevtools.github.io/devtools-protocol/tot/${this.command.split('.')[0]}/`,

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -5,7 +5,6 @@
 import '../../ui/legacy/legacy.js';
 import '../../ui/legacy/components/data_grid/data_grid.js';
 
-import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
@@ -13,6 +12,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, render} from '../../ui/lit/lit.js';
@@ -523,7 +523,7 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel implements SDK.TargetMan
     menu.footerSection().appendItem(i18nString(UIStrings.documentation), () => {
       const [domain, method] = message.method.split('.');
       const type = 'id' in message ? 'method' : 'event';
-      Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+      UIHelpers.openInNewTab(
           `https://chromedevtools.github.io/devtools-protocol/tot/${domain}#${type}-${method}` as
           Platform.DevToolsPath.UrlString);
     }, {jslogContext: 'documentation'});

package/front_end/panels/recorder/RecorderController.ts

@@ -245,6 +245,8 @@ export class RecorderController extends LitElement {
   @state() declare private replayExtensions: Extensions.ExtensionManager.Extension[];
 
   @state() declare private viewDescriptor?: PublicExtensions.RecorderPluginManager.ViewDescriptor;
+  #extensionViewShowRequestedListener?:
+      (event: Common.EventTarget.EventTargetEvent<PublicExtensions.RecorderPluginManager.ViewDescriptor>) => void;
 
   #recorderSettings = new Models.RecorderSettings.RecorderSettings();
   #shortcutHelper = new Models.RecorderShortcutHelper.RecorderShortcutHelper();
@@ -294,6 +296,13 @@ export class RecorderController extends LitElement {
     if (this.currentRecordingSession) {
       void this.currentRecordingSession.stop();
     }
+    if (this.#extensionViewShowRequestedListener) {
+      PublicExtensions.RecorderPluginManager.RecorderPluginManager.instance().removeEventListener(
+          PublicExtensions.RecorderPluginManager.Events.SHOW_VIEW_REQUESTED,
+          this.#extensionViewShowRequestedListener,
+      );
+      this.#extensionViewShowRequestedListener = undefined;
+    }
   }
 
   #updateExtensions(extensions: Extensions.ExtensionManager.Extension[]): void {
@@ -482,7 +491,40 @@ export class RecorderController extends LitElement {
       return;
     }
     const pluginManager = PublicExtensions.RecorderPluginManager.RecorderPluginManager.instance();
-    const promise = pluginManager.once(PublicExtensions.RecorderPluginManager.Events.SHOW_VIEW_REQUESTED);
+
+    if (this.#extensionViewShowRequestedListener) {
+      pluginManager.removeEventListener(
+          PublicExtensions.RecorderPluginManager.Events.SHOW_VIEW_REQUESTED,
+          this.#extensionViewShowRequestedListener,
+      );
+      this.#extensionViewShowRequestedListener = undefined;
+    }
+
+    let resolveView: (descriptor: PublicExtensions.RecorderPluginManager.ViewDescriptor) => void;
+    const promise = new Promise<PublicExtensions.RecorderPluginManager.ViewDescriptor>(resolve => {
+      resolveView = resolve;
+    });
+
+    this.#extensionViewShowRequestedListener =
+        (event: Common.EventTarget.EventTargetEvent<PublicExtensions.RecorderPluginManager.ViewDescriptor>): void => {
+          const descriptor = event.data;
+          if (descriptor.extensionOrigin === extension.getOrigin()) {
+            if (this.#extensionViewShowRequestedListener) {
+              pluginManager.removeEventListener(
+                  PublicExtensions.RecorderPluginManager.Events.SHOW_VIEW_REQUESTED,
+                  this.#extensionViewShowRequestedListener,
+              );
+              this.#extensionViewShowRequestedListener = undefined;
+            }
+            resolveView(descriptor);
+          }
+        };
+
+    pluginManager.addEventListener(
+        PublicExtensions.RecorderPluginManager.Events.SHOW_VIEW_REQUESTED,
+        this.#extensionViewShowRequestedListener,
+    );
+
     extension.replay(this.currentRecording.flow);
     const descriptor = await promise;
     this.viewDescriptor = descriptor;
@@ -496,6 +538,13 @@ export class RecorderController extends LitElement {
     if (this.viewDescriptor) {
       this.viewDescriptor = undefined;
     }
+    if (this.#extensionViewShowRequestedListener) {
+      PublicExtensions.RecorderPluginManager.RecorderPluginManager.instance().removeEventListener(
+          PublicExtensions.RecorderPluginManager.Events.SHOW_VIEW_REQUESTED,
+          this.#extensionViewShowRequestedListener,
+      );
+      this.#extensionViewShowRequestedListener = undefined;
+    }
     if (event.extension) {
       return await this.#onPlayViaExtension(event.extension);
     }

package/front_end/panels/recorder/extensions/ExtensionManager.ts

@@ -10,6 +10,7 @@ let instance: ExtensionManager|null = null;
 
 export interface Extension {
   getName(): string;
+  getOrigin(): string;
   getMediaType(): string|undefined;
   stringify(recording: Object): Promise<string>;
   stringifyStep(step: Object): Promise<string>;