chrome-devtools-frontend 1.0.1660788 → 1.0.1662289

package/front_end/panels/network/RequestTimingView.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-imperative-dom-api */
 import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
@@ -297,22 +296,22 @@ function getLocalizedResponseSourceForCode(swResponseSource: Protocol.Network.Se
 }
 
 interface ViewInput {
-  requestUnfinished: boolean;
-  requestStartTime: number;
-  requestIssueTime: number;
+  request: SDK.NetworkRequest.NetworkRequest;
   totalDuration: number;
   startTime: number;
   endTime: number;
   timeRanges: NetworkTimeCalculator.RequestTimeRange[];
   calculator: NetworkTimeCalculator.NetworkTimeCalculator;
-  serverTimings: SDK.ServerTiming.ServerTiming[];
-  fetchDetails?: UI.TreeOutline.TreeOutlineInShadow;
-  routerDetails?: UI.TreeOutline.TreeOutlineInShadow;
   wasThrottled?: SDK.NetworkManager.AppliedNetworkConditions;
 }
 
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
+  const serverTimings = input.request.serverTimings ?? [];
+  const requestStartTime = input.request.startTime;
+  const requestIssueTime = input.request.issueTime();
+  const requestUnfinished = !input.request.finished;
+  const routerDetails = input.request.serviceWorkerRouterInfo;
   const revealThrottled = (): void => {
     if (input.wasThrottled) {
       void Common.Revealer.reveal(input.wasThrottled);
@@ -367,6 +366,80 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     // clang-format on
   };
 
+  const routerDetailsTree = (serviceWorkerRouterInfo: Protocol.Network.ServiceWorkerRouterInfo): LitTemplate => {
+    const matchedSourceType = serviceWorkerRouterInfo.matchedSourceType;
+    const matchedSourceTypeString = String(matchedSourceType) || i18nString(UIStrings.unknown);
+    const actualSourceType = serviceWorkerRouterInfo.actualSourceType;
+    const actualSourceTypeString = String(actualSourceType) || i18nString(UIStrings.unknown);
+    // clang-format off
+    return html`<devtools-tree>
+      <ul role=tree>
+        <li role=treeitem>
+          <div class=network-fetch-details-treeitem>
+            ${i18nString(UIStrings.routerMatchedSource, {PH1: matchedSourceTypeString})}
+          </div>
+        </li>
+        <li role=treeitem>
+          <div class=network-fetch-details-treeitem>
+            ${i18nString(UIStrings.routerActualSource, {PH1: actualSourceTypeString})}
+          </div>
+        </li>
+      </ul>
+    </devtools-tree>`;
+    // clang-format on
+  };
+
+  const fetchDetailsTree = (): LitTemplate => {
+    const origRequest = Logs.NetworkLog.NetworkLog.instance().originalRequestForURL(input.request.url());
+    const origRequestTree = origRequest &&
+        new ObjectUI.ObjectPropertiesSection.ObjectTree(SDK.RemoteObject.RemoteObject.fromLocalObject(origRequest), {
+          readOnly: true,
+          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+        });
+    const response = Logs.NetworkLog.NetworkLog.instance().originalResponseForURL(input.request.url());
+    const responseTree = response &&
+        new ObjectUI.ObjectPropertiesSection.ObjectTree(SDK.RemoteObject.RemoteObject.fromLocalObject(response), {
+          readOnly: true,
+          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+        });
+    const swResponseSource = input.request.serviceWorkerResponseSource();
+    const responseCacheStorageName = input.request.getResponseCacheStorageCacheName();
+    const retrievalTime = input.request.getResponseRetrievalTime();
+    // clang-format off
+    return html`<devtools-tree>
+      <ul role=tree>
+        ${origRequestTree ? html`<li role=treeitem class="object-properties-section-root-element object-properties-section" open>
+            ${i18nString(UIStrings.originalRequest)}
+            ${ObjectUI.ObjectPropertiesSection.renderObjectTree(origRequestTree)}
+          </li>` : nothing}
+        ${responseTree ? html`<li role=treeitem class="object-properties-section-root-element object-properties-section" open>
+            ${i18nString(UIStrings.responseReceived)}
+            ${ObjectUI.ObjectPropertiesSection.renderObjectTree(responseTree)}
+          </li>` : nothing}
+        <li role=treeitem>
+          <div class=network-fetch-details-treeitem>
+            ${i18nString(UIStrings.sourceOfResponseS, {PH1: swResponseSource ?
+                         getLocalizedResponseSourceForCode(swResponseSource) :
+                         i18nString(UIStrings.unknown)})}
+          </div>
+        </li>
+        <li role=treeitem>
+          <div class=network-fetch-details-treeitem>
+            ${responseCacheStorageName ?
+              i18nString(UIStrings.cacheStorageCacheNameS, {PH1: responseCacheStorageName}) :
+              i18nString(UIStrings.cacheStorageCacheNameUnknown)}
+          </div>
+        </li>
+        ${retrievalTime ? html`<li role=treeitem>
+            <div class=network-fetch-details-treeitem>
+              ${i18nString(UIStrings.retrievalTimeS, {PH1: retrievalTime.toString()})}
+            </div>
+          </li>` : nothing}
+      </ul>
+    </devtools-tree>`;
+    // clang-format on
+  };
+
   const onActivate = (e: KeyboardEvent|MouseEvent): void => {
     if ('key' in e && !Platform.KeyboardUtilities.isEnterOrSpaceKey(e)) {
       return;
@@ -434,12 +507,12 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           </tr>
           <tr>
             <td colspan = 3>
-              ${i18nString(UIStrings.queuedAtS, {PH1: input.calculator.formatValue(input.requestIssueTime, 2)})}
+              ${i18nString(UIStrings.queuedAtS, {PH1: input.calculator.formatValue(requestIssueTime, 2)})}
             </td>
           </tr>
           <tr>
             <td colspan=3>
-              ${i18nString(UIStrings.startedAtS, {PH1: input.calculator.formatValue(input.requestStartTime, 2)})}
+              ${i18nString(UIStrings.startedAtS, {PH1: input.calculator.formatValue(requestStartTime, 2)})}
             </td>
           </tr>
         </thead>
@@ -481,19 +554,19 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                 </div>
               </td>
             </tr>
-            ${range.name === 'serviceworker-respondwith' && input.fetchDetails ? html`
+            ${range.name === 'serviceworker-respondwith' && input.request.fetchedViaServiceWorker ? html`
               <tr class="network-fetch-timing-bar-details network-fetch-timing-bar-details-collapsed">
-                ${input.fetchDetails.element}
+                ${fetchDetailsTree()}
               </tr>`
               : nothing}
-            ${range.name === 'serviceworker-routerevaluation' && input.routerDetails ? html`
+            ${range.name === 'serviceworker-routerevaluation' && routerDetails ? html`
               <tr class="router-evaluation-timing-bar-details network-fetch-timing-bar-details-collapsed">
-                ${input.routerDetails.element}
+                ${routerDetailsTree(routerDetails)}
               </tr>`
               : nothing}
           `)}
         `)}
-        ${input.requestUnfinished ? html`
+        ${requestUnfinished ? html`
           <tr>
             <td class=caution colspan=3>
               ${i18nString(UIStrings.cautionRequestIsNotFinishedYet)}
@@ -502,9 +575,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
        <tr class=network-timing-footer>
          <td colspan=1>
            <devtools-link
-             href="https://developer.chrome.com/docs/devtools/network/reference/#timing-explanation"
+             href='https://developer.chrome.com/docs/devtools/network/reference/#timing-explanation'
              class=devtools-link
-             jslogcontext="explanation">
+             jslogcontext='explanation'>
                ${i18nString(UIStrings.explanation)}
            </devtools-link>
          <td></td>
@@ -523,9 +596,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
          <td></td>
          <td>${i18nString(UIStrings.time)}</td>
        </tr>
-       ${repeat(input.serverTimings.filter(item => item.metric.toLowerCase() !== 'total'), addServerTiming)}
-       ${repeat(input.serverTimings.filter(item => item.metric.toLowerCase() === 'total'), addServerTiming)}
-       ${input.serverTimings.length === 0 ? html`
+       ${repeat(serverTimings.filter(item => item.metric.toLowerCase() !== 'total'), addServerTiming)}
+       ${repeat(serverTimings.filter(item => item.metric.toLowerCase() === 'total'), addServerTiming)}
+       ${serverTimings.length === 0 ? html`
          <tr>
            <td colspan=3>
 ${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.duringDevelopmentYouCanUseSToAdd, {PH1:
@@ -546,8 +619,8 @@ export class RequestTimingView extends UI.Widget.VBox {
     this.#view = view;
   }
 
-  static create(request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator.NetworkTimeCalculator):
-      RequestTimingView {
+  static create(request: SDK.NetworkRequest.NetworkRequest,
+                calculator: NetworkTimeCalculator.NetworkTimeCalculator): RequestTimingView {
     const view = new RequestTimingView();
     view.request = request;
     view.calculator = calculator;
@@ -571,119 +644,14 @@ export class RequestTimingView extends UI.Widget.VBox {
       startTime,
       endTime,
       totalDuration,
-      serverTimings: this.#request.serverTimings ?? [],
       calculator: this.#calculator,
-      requestStartTime: this.#request.startTime,
-      requestIssueTime: this.#request.issueTime(),
-      requestUnfinished: !this.#request.finished,
-      fetchDetails: this.#fetchDetailsTree(),
-      routerDetails: this.#routerDetailsTree(),
+      request: this.#request,
       wasThrottled: conditions?.urlPattern ? conditions : undefined,
       timeRanges,
     };
     this.#view(input, {}, this.contentElement);
   }
 
-  #fetchDetailsTree(): UI.TreeOutline.TreeOutlineInShadow|undefined {
-    if (!this.#request?.fetchedViaServiceWorker) {
-      return undefined;
-    }
-    const detailsView = new UI.TreeOutline.TreeOutlineInShadow();
-
-    const origRequest = Logs.NetworkLog.NetworkLog.instance().originalRequestForURL(this.#request.url());
-    if (origRequest) {
-      const requestObject = SDK.RemoteObject.RemoteObject.fromLocalObject(origRequest);
-      const requestTreeElement = new ObjectUI.ObjectPropertiesSection.RootElement(
-          new ObjectUI.ObjectPropertiesSection.ObjectTree(requestObject, {
-            readOnly: true,
-            propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-          }));
-      requestTreeElement.title = i18nString(UIStrings.originalRequest);
-      detailsView.appendChild(requestTreeElement);
-    }
-
-    const response = Logs.NetworkLog.NetworkLog.instance().originalResponseForURL(this.#request.url());
-    if (response) {
-      const responseObject = SDK.RemoteObject.RemoteObject.fromLocalObject(response);
-      const responseTreeElement = new ObjectUI.ObjectPropertiesSection.RootElement(
-          new ObjectUI.ObjectPropertiesSection.ObjectTree(responseObject, {
-            readOnly: true,
-            propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-          }));
-      responseTreeElement.title = i18nString(UIStrings.responseReceived);
-      detailsView.appendChild(responseTreeElement);
-    }
-
-    const serviceWorkerResponseSource = document.createElement('div');
-    serviceWorkerResponseSource.classList.add('network-fetch-details-treeitem');
-    let swResponseSourceString = i18nString(UIStrings.unknown);
-    const swResponseSource = this.#request.serviceWorkerResponseSource();
-    if (swResponseSource) {
-      swResponseSourceString = getLocalizedResponseSourceForCode(swResponseSource);
-    }
-    serviceWorkerResponseSource.textContent = i18nString(UIStrings.sourceOfResponseS, {PH1: swResponseSourceString});
-
-    const responseSourceTreeElement = new UI.TreeOutline.TreeElement(serviceWorkerResponseSource);
-    detailsView.appendChild(responseSourceTreeElement);
-
-    const cacheNameElement = document.createElement('div');
-    cacheNameElement.classList.add('network-fetch-details-treeitem');
-    const responseCacheStorageName = this.#request.getResponseCacheStorageCacheName();
-    if (responseCacheStorageName) {
-      cacheNameElement.textContent = i18nString(UIStrings.cacheStorageCacheNameS, {PH1: responseCacheStorageName});
-    } else {
-      cacheNameElement.textContent = i18nString(UIStrings.cacheStorageCacheNameUnknown);
-    }
-
-    const cacheNameTreeElement = new UI.TreeOutline.TreeElement(cacheNameElement);
-    detailsView.appendChild(cacheNameTreeElement);
-
-    const retrievalTime = this.#request.getResponseRetrievalTime();
-    if (retrievalTime) {
-      const responseTimeElement = document.createElement('div');
-      responseTimeElement.classList.add('network-fetch-details-treeitem');
-      responseTimeElement.textContent = i18nString(UIStrings.retrievalTimeS, {PH1: retrievalTime.toString()});
-      const responseTimeTreeElement = new UI.TreeOutline.TreeElement(responseTimeElement);
-      detailsView.appendChild(responseTimeTreeElement);
-    }
-    return detailsView;
-  }
-
-  #routerDetailsTree(): UI.TreeOutline.TreeOutlineInShadow|undefined {
-    if (!this.#request?.serviceWorkerRouterInfo) {
-      return undefined;
-    }
-
-    const detailsView = new UI.TreeOutline.TreeOutlineInShadow();
-
-    const {serviceWorkerRouterInfo} = this.#request;
-    if (!serviceWorkerRouterInfo) {
-      return;
-    }
-
-    // Add matched source type element
-    const matchedSourceTypeElement = document.createElement('div');
-    matchedSourceTypeElement.classList.add('network-fetch-details-treeitem');
-    const matchedSourceType = serviceWorkerRouterInfo.matchedSourceType;
-    const matchedSourceTypeString = String(matchedSourceType) || i18nString(UIStrings.unknown);
-    matchedSourceTypeElement.textContent = i18nString(UIStrings.routerMatchedSource, {PH1: matchedSourceTypeString});
-
-    const matchedSourceTypeTreeElement = new UI.TreeOutline.TreeElement(matchedSourceTypeElement);
-    detailsView.appendChild(matchedSourceTypeTreeElement);
-
-    // Add actual source type element
-    const actualSourceTypeElement = document.createElement('div');
-    actualSourceTypeElement.classList.add('network-fetch-details-treeitem');
-    const actualSourceType = serviceWorkerRouterInfo.actualSourceType;
-    const actualSourceTypeString = String(actualSourceType) || i18nString(UIStrings.unknown);
-    actualSourceTypeElement.textContent = i18nString(UIStrings.routerActualSource, {PH1: actualSourceTypeString});
-
-    const actualSourceTypeTreeElement = new UI.TreeOutline.TreeElement(actualSourceTypeElement);
-    detailsView.appendChild(actualSourceTypeTreeElement);
-
-    return detailsView;
-  }
-
   set request(request: SDK.NetworkRequest.NetworkRequest) {
     this.#request = request;
     if (this.isShowing()) {

package/front_end/panels/network/components/ResponseHeaderSection.ts

@@ -170,12 +170,14 @@ export class ResponseHeaderSection extends ResponseHeaderSectionBase {
           BlockedReasonDetails.get((this.#request.blockedReason() as Protocol.Network.BlockedReason));
       if (headerWithIssues) {
         if (IssuesManager.RelatedIssue.hasIssueOfCategory(
-                this.#request, IssuesManager.Issue.IssueCategory.CROSS_ORIGIN_EMBEDDER_POLICY)) {
+                this.#request, IssuesManager.Issue.IssueCategory.CROSS_ORIGIN_EMBEDDER_POLICY,
+                IssuesManager.IssuesManager.IssuesManager.instance())) {
           const followLink = (): void => {
             Host.userMetrics.issuesPanelOpenedFrom(Host.UserMetrics.IssueOpener.LEARN_MORE_LINK_COEP);
             if (this.#request) {
-              void IssuesManager.RelatedIssue.reveal(
-                  this.#request, IssuesManager.Issue.IssueCategory.CROSS_ORIGIN_EMBEDDER_POLICY);
+              void IssuesManager.RelatedIssue.reveal(this.#request,
+                                                     IssuesManager.IssuesManager.IssuesManager.instance(),
+                                                     IssuesManager.Issue.IssueCategory.CROSS_ORIGIN_EMBEDDER_POLICY);
             }
           };
           if (headerWithIssues.blockedDetails) {

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -1795,8 +1795,8 @@ export class HeapProfileHeader extends ProfileHeader {
 
   setupWorker(): void {
     console.assert(!this.workerProxy, 'HeapSnapshotWorkerProxy already exists');
-    this.workerProxy =
-        new HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotWorkerProxy(this.handleWorkerEvent.bind(this));
+    this.workerProxy = new HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotWorkerProxy(
+        this.handleWorkerEvent.bind(this), Common.Console.Console.instance());
     this.workerProxy.addEventListener(
         HeapSnapshotModel.HeapSnapshotProxy.HeapSnapshotWorkerProxy.Events.WAIT, event => {
           this.updateStatus(null, event.data);
@@ -1836,7 +1836,7 @@ export class HeapProfileHeader extends ProfileHeader {
 
   transferChunk(chunk: string): void {
     if (!this.bufferedWriter) {
-      this.bufferedWriter = new Bindings.TempFile.TempFile();
+      this.bufferedWriter = new Bindings.TempFile.TempFile(Common.Console.Console.instance());
     }
     this.bufferedWriter.write([chunk]);
 

package/front_end/panels/profiler/WritableProfileHeader.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Common from '../../core/common/common.js';
+import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
@@ -145,7 +145,7 @@ export class WritableProfileHeader extends ProfileHeader implements Common.Strin
   setProtocolProfile(profile: Protocol.Profiler.Profile): void {
     this.setProfile(profile);
     this.protocolProfileInternal = profile;
-    this.tempFile = new Bindings.TempFile.TempFile();
+    this.tempFile = new Bindings.TempFile.TempFile(Common.Console.Console.instance());
     this.tempFile.write([JSON.stringify(profile)]);
     this.#profileReceivedPromise.resolve();
   }

package/front_end/panels/recorder/{components/ControlButton.ts → ControlButton.ts}

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 
 import controlButtonStyles from './controlButton.css.js';
 
@@ -74,13 +74,12 @@ export class ControlButton extends UI.Widget.Widget<ShadowRoot> {
   }
 
   override performUpdate(): void {
-    this.#view(
-        {
-          label: this.#label,
-          shape: this.#shape,
-          disabled: this.#disabled,
-          onClick: this.#onClick,
-        },
-        {}, this.contentElement);
+    this.#view({
+      label: this.#label,
+      shape: this.#shape,
+      disabled: this.#disabled,
+      onClick: this.#onClick,
+    },
+               {}, this.contentElement);
   }
 }

package/front_end/panels/recorder/{components/CreateRecordingView.ts → CreateRecordingView.ts}

@@ -2,20 +2,20 @@
 // 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 '../../ui/kit/kit.js';
 
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as Badges from '../../../models/badges/badges.js';
-import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as Input from '../../../ui/components/input/input.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
-import * as Models from '../models/models.js';
-import * as Actions from '../recorder-actions/recorder-actions.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Badges from '../../models/badges/badges.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Input from '../../ui/components/input/input.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ControlButton} from './ControlButton.js';
 import createRecordingViewStyles from './createRecordingView.css.js';
+import * as Models from './models/models.js';
+import * as Actions from './recorder-actions/recorder-actions.js';
 
 const {html, Directives: {ref, createRef, repeat}} = Lit;
 
@@ -97,7 +97,7 @@ const UIStrings = {
   learnMore: 'Learn more',
 } as const;
 const str_ = i18n.i18n.registerUIStrings(
-    'panels/recorder/components/CreateRecordingView.ts',
+    'panels/recorder/CreateRecordingView.ts',
     UIStrings,
 );
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -301,9 +301,11 @@ export class CreateRecordingView extends UI.Widget.Widget {
   #output: ViewOutput = {};
   #recorderSettings?: Models.RecorderSettings.RecorderSettings;
 
-  onRecordingStarted:
-      (data: {name: string, selectorTypesToRecord: Models.Schema.SelectorType[], selectorAttribute?: string}) => void =
-          () => {};
+  onRecordingStarted: (data: {
+    name: string,
+    selectorTypesToRecord: Models.Schema.SelectorType[],
+    selectorAttribute?: string,
+  }) => void = () => {};
   onRecordingCancelled = (): void => {};
 
   set recorderSettings(value: Models.RecorderSettings.RecorderSettings) {
@@ -373,39 +375,38 @@ export class CreateRecordingView extends UI.Widget.Widget {
   }
 
   override performUpdate(): void {
-    this.#view(
-        {
-          name: this.#name,
-          selectorAttribute: this.#selectorAttribute,
-          selectorTypes: this.#selectorTypes,
-          error: this.#error,
-          onRecordingCancelled: this.onRecordingCancelled,
-          onUpdate: update => {
-            if ('name' in update) {
-              this.#name = update.name;
-            } else if ('selectorAttribute' in update) {
-              this.#selectorAttribute = update.selectorAttribute;
-            } else {
-              this.#selectorTypes = this.#selectorTypes.map(item => {
-                if (item.selectorType === update.selectorType) {
-                  return {
-                    ...item,
-                    checked: update.checked,
-                  };
-                }
-                return item;
-              });
+    this.#view({
+      name: this.#name,
+      selectorAttribute: this.#selectorAttribute,
+      selectorTypes: this.#selectorTypes,
+      error: this.#error,
+      onRecordingCancelled: this.onRecordingCancelled,
+      onUpdate: update => {
+        if ('name' in update) {
+          this.#name = update.name;
+        } else if ('selectorAttribute' in update) {
+          this.#selectorAttribute = update.selectorAttribute;
+        } else {
+          this.#selectorTypes = this.#selectorTypes.map(item => {
+            if (item.selectorType === update.selectorType) {
+              return {
+                ...item,
+                checked: update.checked,
+              };
             }
-            this.requestUpdate();
-          },
-          onRecordingStarted: (): void => {
-            this.startRecording();
-          },
-          onErrorReset: () => {
-            this.#error = undefined;
-            this.requestUpdate();
-          },
-        },
-        this.#output, this.contentElement);
+            return item;
+          });
+        }
+        this.requestUpdate();
+      },
+      onRecordingStarted: (): void => {
+        this.startRecording();
+      },
+      onErrorReset: () => {
+        this.#error = undefined;
+        this.requestUpdate();
+      },
+    },
+               this.#output, this.contentElement);
   }
 }

package/front_end/panels/recorder/{components/ExtensionView.ts → ExtensionView.ts}

@@ -2,14 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as i18n from '../../../core/i18n/i18n.js';
-import type * as PublicExtensions from '../../../models/extensions/extensions.js';
-import * as Buttons from '../../../ui/components/buttons/buttons.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';
-import * as Extensions from '../extensions/extensions.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import type * as PublicExtensions from '../../models/extensions/extensions.js';
+import * as Buttons from '../../ui/components/buttons/buttons.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';
 
+import * as Extensions from './extensions/extensions.js';
 import extensionViewStyles from './extensionView.css.js';
 
 const {html} = Lit;
@@ -24,7 +24,7 @@ const UIStrings = {
    */
   extension: 'Content provided by a browser extension',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('panels/recorder/components/ExtensionView.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/recorder/ExtensionView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface ViewInput {