chrome-devtools-frontend 1.0.944903 → 1.0.945884

package/front_end/panels/application/BackForwardCacheStrings.ts

@@ -424,66 +424,6 @@ const UIStrings = {
       * @description Description text for not restored reason ContentMediaPlay.
       */
   contentMediaPlay: 'A media player was playing upon navigating away.',
-  /**
-      * @description Description text for not restored reason EmbedderPopupBlockerTabHelper.
-      */
-  embedderPopupBlockerTabHelper: 'EmbedderPopupBlockerTabHelper',
-  /**
-      * @description Description text for not restored reason EmbedderSafeBrowsingTriggeredPopupBlocker.
-      */
-  embedderSafeBrowsingTriggeredPopupBlocker: 'EmbedderSafeBrowsingTriggeredPopupBlocker',
-  /**
-      * @description Description text for not restored reason EmbedderSafeBrowsingThreatDetails.
-      */
-  embedderSafeBrowsingThreatDetails: 'EmbedderSafeBrowsingThreatDetails',
-  /**
-      * @description Description text for not restored reason EmbedderAppBannerManager.
-      */
-  embedderAppBannerManager: 'EmbedderAppBannerManager',
-  /**
-      * @description Description text for not restored reason EmbedderDomDistillerViewerSource.
-      */
-  embedderDomDistillerViewerSource: 'EmbedderDomDistillerViewerSource',
-  /**
-      * @description Description text for not restored reason EmbedderDomDistillerSelfDeletingRequestDelegate.
-      */
-  embedderDomDistillerSelfDeletingRequestDelegate: 'EmbedderDomDistillerSelfDeletingRequestDelegate',
-  /**
-      * @description Description text for not restored reason EmbedderOomInterventionTabHelper.
-      */
-  embedderOomInterventionTabHelper: 'EmbedderOomInterventionTabHelper',
-  /**
-      * @description Description text for not restored reason EmbedderOfflinePage.
-      */
-  embedderOfflinePage: 'EmbedderOfflinePage',
-  /**
-      * @description Description text for not restored reason EmbedderChromePasswordManagerClientBindCredentialManager.
-      */
-  embedderChromePasswordManagerClientBindCredentialManager: 'EmbedderChromePasswordManagerClientBindCredentialManager',
-  /**
-      * @description Description text for not restored reason EmbedderPermissionRequestManager.
-      */
-  embedderPermissionRequestManager: 'EmbedderPermissionRequestManager',
-  /**
-      * @description Description text for not restored reason EmbedderModalDialog.
-      */
-  embedderModalDialog: 'EmbedderModalDialog',
-  /**
-      * @description Description text for not restored reason EmbedderExtensions.
-      */
-  embedderExtensions: 'EmbedderExtensions',
-  /**
-      * @description Description text for not restored reason EmbedderExtensionMessaging.
-      */
-  embedderExtensionMessaging: 'EmbedderExtensionMessaging',
-  /**
-      * @description Description text for not restored reason EmbedderExtensionMessagingForOpenPort.
-      */
-  embedderExtensionMessagingForOpenPort: 'EmbedderExtensionMessagingForOpenPort',
-  /**
-      * @description Description text for not restored reason EmbedderExtensionSentMessageToCachedFrame.
-      */
-  embedderExtensionSentMessageToCachedFrame: 'EmbedderExtensionSentMessageToCachedFrame',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheStrings.ts', UIStrings);
@@ -601,23 +541,23 @@ export const NotRestoredReasonDescription = {
   'ContentMediaSession': {name: i18nLazyString(UIStrings.contentMediaSession)},
   'ContentMediaSessionService': {name: i18nLazyString(UIStrings.contentMediaSessionService)},
   'ContentMediaPlay': {name: i18nLazyString(UIStrings.contentMediaPlay)},
-  'EmbedderPopupBlockerTabHelper': {name: i18nLazyString(UIStrings.embedderPopupBlockerTabHelper)},
+  'EmbedderPopupBlockerTabHelper': {name: i18n.i18n.lockedLazyString('EmbedderPopupBlockerTabHelper')},
   'EmbedderSafeBrowsingTriggeredPopupBlocker':
-      {name: i18nLazyString(UIStrings.embedderSafeBrowsingTriggeredPopupBlocker)},
-  'EmbedderSafeBrowsingThreatDetails': {name: i18nLazyString(UIStrings.embedderSafeBrowsingThreatDetails)},
-  'EmbedderAppBannerManager': {name: i18nLazyString(UIStrings.embedderAppBannerManager)},
-  'EmbedderDomDistillerViewerSource': {name: i18nLazyString(UIStrings.embedderDomDistillerViewerSource)},
+      {name: i18n.i18n.lockedLazyString('EmbedderSafeBrowsingTriggeredPopupBlocker')},
+  'EmbedderSafeBrowsingThreatDetails': {name: i18n.i18n.lockedLazyString('EmbedderSafeBrowsingThreatDetails')},
+  'EmbedderAppBannerManager': {name: i18n.i18n.lockedLazyString('EmbedderAppBannerManager')},
+  'EmbedderDomDistillerViewerSource': {name: i18n.i18n.lockedLazyString('EmbedderDomDistillerViewerSource')},
   'EmbedderDomDistillerSelfDeletingRequestDelegate':
-      {name: i18nLazyString(UIStrings.embedderDomDistillerSelfDeletingRequestDelegate)},
-  'EmbedderOomInterventionTabHelper': {name: i18nLazyString(UIStrings.embedderOomInterventionTabHelper)},
-  'EmbedderOfflinePage': {name: i18nLazyString(UIStrings.embedderOfflinePage)},
+      {name: i18n.i18n.lockedLazyString('EmbedderDomDistillerSelfDeletingRequestDelegate')},
+  'EmbedderOomInterventionTabHelper': {name: i18n.i18n.lockedLazyString('EmbedderOomInterventionTabHelper')},
+  'EmbedderOfflinePage': {name: i18n.i18n.lockedLazyString('EmbedderOfflinePage')},
   'EmbedderChromePasswordManagerClientBindCredentialManager':
-      {name: i18nLazyString(UIStrings.embedderChromePasswordManagerClientBindCredentialManager)},
-  'EmbedderPermissionRequestManager': {name: i18nLazyString(UIStrings.embedderPermissionRequestManager)},
-  'EmbedderModalDialog': {name: i18nLazyString(UIStrings.embedderModalDialog)},
-  'EmbedderExtensions': {name: i18nLazyString(UIStrings.embedderExtensions)},
-  'EmbedderExtensionMessaging': {name: i18nLazyString(UIStrings.embedderExtensionMessaging)},
-  'EmbedderExtensionMessagingForOpenPort': {name: i18nLazyString(UIStrings.embedderExtensionMessagingForOpenPort)},
+      {name: i18n.i18n.lockedLazyString('EmbedderChromePasswordManagerClientBindCredentialManager')},
+  'EmbedderPermissionRequestManager': {name: i18n.i18n.lockedLazyString('EmbedderPermissionRequestManager')},
+  'EmbedderModalDialog': {name: i18n.i18n.lockedLazyString('EmbedderModalDialog')},
+  'EmbedderExtensions': {name: i18n.i18n.lockedLazyString('EmbedderExtensions')},
+  'EmbedderExtensionMessaging': {name: i18n.i18n.lockedLazyString('EmbedderExtensionMessaging')},
+  'EmbedderExtensionMessagingForOpenPort': {name: i18n.i18n.lockedLazyString('EmbedderExtensionMessagingForOpenPort')},
   'EmbedderExtensionSentMessageToCachedFrame':
-      {name: i18nLazyString(UIStrings.embedderExtensionSentMessageToCachedFrame)},
+      {name: i18n.i18n.lockedLazyString('EmbedderExtensionSentMessageToCachedFrame')},
 };

package/front_end/panels/application/BackForwardCacheView.ts

@@ -262,7 +262,14 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
 
   private renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult {
     return LitHtml.html`
-      <li>${explanation.reason} : ${
+      <li>
+      <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+      iconName: 'circled_exclamation_icon',
+      color: 'orange',
+      width: '16px',
+      height: '16px',
+    } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
+        ${explanation.reason} : ${
         (explanation.reason in NotRestoredReasonDescription) ?
             LitHtml.html`${NotRestoredReasonDescription[explanation.reason].name()}` :
             LitHtml.nothing} </li>

package/front_end/panels/changes/ChangesView.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
 import * as Diff from '../../third_party/diff/diff.js';
 import * as DiffView from '../../ui/components/diff_view/diff_view.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -166,7 +167,7 @@ export class ChangesView extends UI.Widget.VBox {
     this.registerCSSFiles([changesViewStyles]);
   }
 
-  private refreshDiff(): void {
+  private async refreshDiff(): Promise<void> {
     if (!this.isShowing()) {
       return;
     }
@@ -180,12 +181,12 @@ export class ChangesView extends UI.Widget.VBox {
       this.hideDiff(i18nString(UIStrings.binaryData));
       return;
     }
-    this.workspaceDiff.requestDiff(uiSourceCode).then((diff: Diff.Diff.DiffArray|null): void => {
-      if (this.selectedUISourceCode !== uiSourceCode) {
-        return;
-      }
-      this.renderDiffRows(diff);
-    });
+    const diff = await this.workspaceDiff.requestDiff(
+        uiSourceCode, {shouldFormatDiff: Root.Runtime.experiments.isEnabled('preciseChanges')});
+    if (this.selectedUISourceCode !== uiSourceCode) {
+      return;
+    }
+    this.renderDiffRows(diff);
   }
 
   private hideDiff(message: string): void {

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -30,7 +30,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   private section?: StylePropertiesSection;
   private editorContainer: HTMLElement;
 
-  #propertyIndex = -1;
+  #triggerKey: string|undefined;
 
   constructor() {
     super(true);
@@ -73,12 +73,12 @@ export class StyleEditorWidget extends UI.Widget.VBox {
     this.editor?.addEventListener('propertydeselected', this.onPropertyDeselected);
   }
 
-  setPropertyIndex(value: number): void {
-    this.#propertyIndex = value;
+  setTriggerKey(value: string): void {
+    this.#triggerKey = value;
   }
 
-  getPropertyIndex(): number {
-    return this.#propertyIndex;
+  getTriggerKey(): string|undefined {
+    return this.#triggerKey;
   }
 
   unbindContext(): void {
@@ -116,7 +116,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
 
   static createTriggerButton(
       pane: StylesSidebarPane, section: StylePropertiesSection, editorClass: {new(): Editor}, buttonTitle: string,
-      propertyIndex: number): HTMLElement {
+      triggerKey: string): HTMLElement {
     const triggerButton = createButton(buttonTitle);
 
     triggerButton.onclick = async(event): Promise<void> => {
@@ -125,7 +125,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
       const widget = StyleEditorWidget.instance();
       widget.setEditor(editorClass);
       widget.bindContext(pane, section);
-      widget.setPropertyIndex(propertyIndex);
+      widget.setTriggerKey(triggerKey);
       await widget.render();
       const scrollerElement = triggerButton.enclosingNodeOrSelfWithClass('style-panes-wrapper');
       const onScroll = (): void => {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -668,24 +668,17 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const section = this.section();
     if (this.valueElement && section && section.editable && this.property.name === 'display') {
       const propertyValue = this.property.trimmedValueWithoutImportant();
-      if (propertyValue === 'flex' || propertyValue === 'inline-flex') {
+      const isFlex = propertyValue === 'flex' || propertyValue === 'inline-flex';
+      const isGrid = propertyValue === 'grid' || propertyValue === 'inline-grid';
+      if (isFlex || isGrid) {
+        const key = `${section.getSectionIdx()}_${section.nextEditorTriggerButtonIdx}`;
         const button = StyleEditorWidget.createTriggerButton(
-            this.parentPaneInternal, section, FlexboxEditor, i18nString(UIStrings.flexboxEditorButton),
-            this.property.index);
+            this.parentPaneInternal, section, isFlex ? FlexboxEditor : GridEditor,
+            isFlex ? i18nString(UIStrings.flexboxEditorButton) : i18nString(UIStrings.gridEditorButton), key);
+        section.nextEditorTriggerButtonIdx++;
         this.listItemElement.appendChild(button);
         const helper = this.parentPaneInternal.swatchPopoverHelper();
-        if (helper.isShowing(StyleEditorWidget.instance()) &&
-            this.property.index === StyleEditorWidget.instance().getPropertyIndex()) {
-          helper.setAnchorElement(button);
-        }
-      }
-      if (propertyValue === 'grid' || propertyValue === 'inline-grid') {
-        const button = StyleEditorWidget.createTriggerButton(
-            this.parentPaneInternal, section, GridEditor, i18nString(UIStrings.gridEditorButton), this.property.index);
-        this.listItemElement.appendChild(button);
-        const helper = this.parentPaneInternal.swatchPopoverHelper();
-        if (helper.isShowing(StyleEditorWidget.instance()) &&
-            this.property.index === StyleEditorWidget.instance().getPropertyIndex()) {
+        if (helper.isShowing(StyleEditorWidget.instance()) && StyleEditorWidget.instance().getTriggerKey() === key) {
           helper.setAnchorElement(button);
         }
       }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -832,6 +832,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.idleCallbackManager = new IdleCallbackManager();
 
     const blocks = [new SectionBlock(null)];
+    let sectionIdx = 0;
     let lastParentNode: SDK.DOMModel.DOMNode|null = null;
     for (const style of matchedStyles.nodeStyles()) {
       const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
@@ -844,7 +845,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const lastBlock = blocks[blocks.length - 1];
       if (lastBlock) {
         this.idleCallbackManager.schedule(() => {
-          const section = new StylePropertiesSection(this, matchedStyles, style);
+          const section = new StylePropertiesSection(this, matchedStyles, style, sectionIdx);
+          sectionIdx++;
           lastBlock.sections.push(section);
         });
       }
@@ -860,7 +862,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const block = SectionBlock.createPseudoTypeBlock(pseudoType);
       for (const style of matchedStyles.pseudoStyles(pseudoType)) {
         this.idleCallbackManager.schedule(() => {
-          const section = new StylePropertiesSection(this, matchedStyles, style);
+          const section = new StylePropertiesSection(this, matchedStyles, style, sectionIdx);
+          sectionIdx++;
           block.sections.push(section);
         });
       }
@@ -871,7 +874,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const block = SectionBlock.createKeyframesBlock(keyframesRule.name().text);
       for (const keyframe of keyframesRule.keyframes()) {
         this.idleCallbackManager.schedule(() => {
-          block.sections.push(new KeyframePropertiesSection(this, matchedStyles, keyframe.style));
+          block.sections.push(new KeyframePropertiesSection(this, matchedStyles, keyframe.style, sectionIdx));
+          sectionIdx++;
         });
       }
       blocks.push(block);
@@ -917,7 +921,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const node = this.node();
     const blankSection = new BlankStylePropertiesSection(
         this, insertAfterSection.matchedStyles, node ? node.simpleSelector() : '', styleSheetId, ruleLocation,
-        insertAfterSection.style());
+        insertAfterSection.style(), 0);
 
     this.sectionsContainer.insertBefore(blankSection.element, insertAfterSection.element.nextSibling);
 
@@ -929,6 +933,13 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       block.sections.splice(index + 1, 0, blankSection);
       blankSection.startEditingSelector();
     }
+    let sectionIdx = 0;
+    for (const block of this.sectionBlocks) {
+      for (const section of block.sections) {
+        section.setSectionIdx(sectionIdx);
+        sectionIdx++;
+      }
+    }
   }
 
   removeSection(section: StylePropertiesSection): void {
@@ -1208,10 +1219,15 @@ export class StylePropertiesSection {
 
   private queryListElement: HTMLElement;
 
+  // Used to identify buttons that trigger a flexbox or grid editor.
+  nextEditorTriggerButtonIdx = 1;
+  private sectionIdx = 0;
+
   constructor(
       parentPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration) {
+      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
     this.parentPane = parentPane;
+    this.sectionIdx = sectionIdx;
     this.styleInternal = style;
     this.matchedStyles = matchedStyles;
     this.editable = Boolean(style.styleSheetId && style.range);
@@ -1344,6 +1360,15 @@ export class StylePropertiesSection {
     this.onpopulate();
   }
 
+  setSectionIdx(sectionIdx: number): void {
+    this.sectionIdx = sectionIdx;
+    this.onpopulate();
+  }
+
+  getSectionIdx(): number {
+    return this.sectionIdx;
+  }
+
   registerFontProperty(treeElement: StylePropertyTreeElement): void {
     if (this.fontEditorSectionManager) {
       this.fontEditorSectionManager.registerFontProperty(treeElement);
@@ -1935,6 +1960,7 @@ export class StylePropertiesSection {
 
   onpopulate(): void {
     this.parentPane.setActiveProperty(null);
+    this.nextEditorTriggerButtonIdx = 1;
     this.propertiesTreeOutline.removeChildren();
     const style = this.styleInternal;
     let count = 0;
@@ -2457,10 +2483,10 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, defaultSelectorText: string,
       styleSheetId: Protocol.CSS.StyleSheetId, ruleLocation: TextUtils.TextRange.TextRange,
-      insertAfterStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration) {
+      insertAfterStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
     const cssModel = (stylesPane.cssModel() as SDK.CSSModel.CSSModel);
     const rule = SDK.CSSRule.CSSStyleRule.createDummyRule(cssModel, defaultSelectorText);
-    super(stylesPane, matchedStyles, rule.style);
+    super(stylesPane, matchedStyles, rule.style, sectionIdx);
     this.normal = false;
     this.ruleLocation = ruleLocation;
     this.styleSheetId = styleSheetId;
@@ -2564,8 +2590,8 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
 export class KeyframePropertiesSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration) {
-    super(stylesPane, matchedStyles, style);
+      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
+    super(stylesPane, matchedStyles, style, sectionIdx);
     this.selectorElement.className = 'keyframe-key';
   }
 

package/front_end/panels/emulation/DeviceModeView.ts

@@ -547,6 +547,9 @@ export class DeviceModeView extends UI.Widget.VBox {
     const link = document.createElement('a');
     link.download = fileName + '.png';
     canvas.toBlob(blob => {
+      if (blob === null) {
+        return;
+      }
       link.href = URL.createObjectURL(blob);
       link.click();
     });

package/front_end/panels/help/ReleaseNoteText.ts

@@ -21,7 +21,9 @@ function getReleaseNoteLang(): string {
   // @ts-ignore TODO(crbug.com/1163928) Wait for Intl support.
   const currentDevToolsLocale = new Intl.Locale(currentDevToolsUILanguage);
 
-  return releaseNoteLangs.has(currentDevToolsLocale.language) ? currentDevToolsLocale.language : '';
+  return currentDevToolsLocale.language && releaseNoteLangs.has(currentDevToolsLocale.language) ?
+      currentDevToolsLocale.language :
+      '';
 }
 
 function getLocalizedReleaseNoteURL(url: string): string {

package/front_end/panels/network/NetworkItemView.ts

@@ -270,7 +270,13 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
 
   private selectTabInternal(tabId: string): void {
     if (!this.selectTab(tabId)) {
-      this.selectTab('headers');
+      // maybeAppendPayloadPanel might cause payload tab to appear asynchronously, so
+      // it makes sense to retry on the next tick
+      setTimeout(() => {
+        if (!this.selectTab(tabId)) {
+          this.selectTab('headers');
+        }
+      }, 0);
     }
   }
 

package/front_end/panels/profiler/heapProfiler.css

@@ -132,11 +132,8 @@
   }
 }
 
-.heap-snapshot-view tr:not(.selected) td.object-column span.heap-object-tag {
-  color: var(--color-text-secondary);
-}
-
-.heap-snapshot-view td.object-column span.grayed {
+.heap-snapshot-view tr:not(.selected) td.object-column span.heap-object-tag,
+.heap-snapshot-view tr:not(.selected) td.object-column span.grayed {
   color: var(--color-text-secondary);
 }
 

package/front_end/panels/timeline/TimelineController.ts

@@ -93,6 +93,9 @@ export class TimelineController implements SDK.TargetManager.SDKModelObserver<SD
     ];
     categoriesArray.push(TimelineModel.TimelineModel.TimelineModelImpl.Category.LatencyInfo);
 
+    if (Root.Runtime.experiments.isEnabled('timelineV8RuntimeCallStats') && options.enableJSSampling) {
+      categoriesArray.push(disabledByDefault('v8.runtime_stats_sampling'));
+    }
     if (!Root.Runtime.Runtime.queryParam('timelineTracingJSProfileDisabled') && options.enableJSSampling) {
       categoriesArray.push(disabledByDefault('v8.cpu_profiler'));
     }

package/front_end/panels/webauthn/WebauthnPane.ts

@@ -227,15 +227,15 @@ const PROTOCOL_AUTHENTICATOR_VALUES: Protocol.EnumerableEnum<typeof Protocol.Web
   U2f: Protocol.WebAuthn.AuthenticatorProtocol.U2f,
 };
 
-export class WebauthnPaneImpl extends UI.Widget.VBox {
-  private enabled: boolean;
-  private activeAuthId: Protocol.WebAuthn.AuthenticatorId|null;
-  private hasBeenEnabled: boolean;
-  private readonly dataGrids: Map<Protocol.WebAuthn.AuthenticatorId, DataGrid.DataGrid.DataGridImpl<DataGridNode>>;
-  // @ts-ignore
-  private enableCheckbox: UI.Toolbar.ToolbarCheckbox;
+export class WebauthnPaneImpl extends UI.Widget.VBox implements
+    SDK.TargetManager.SDKModelObserver<SDK.WebAuthnModel.WebAuthnModel> {
+  private activeAuthId: Protocol.WebAuthn.AuthenticatorId|null = null;
+  private hasBeenEnabled = false;
+  private readonly dataGrids =
+      new Map<Protocol.WebAuthn.AuthenticatorId, DataGrid.DataGrid.DataGridImpl<DataGridNode>>();
+  private enableCheckbox!: UI.Toolbar.ToolbarCheckbox;
   private readonly availableAuthenticatorSetting: Common.Settings.Setting<AvailableAuthenticatorOptions[]>;
-  private model: SDK.WebAuthnModel.WebAuthnModel|null|undefined;
+  private model?: SDK.WebAuthnModel.WebAuthnModel;
   private authenticatorsView: HTMLElement;
   private topToolbarContainer: HTMLElement|undefined;
   private topToolbar: UI.Toolbar.Toolbar|undefined;
@@ -253,21 +253,13 @@ export class WebauthnPaneImpl extends UI.Widget.VBox {
 
   constructor() {
     super(true);
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.WebAuthnModel.WebAuthnModel, this);
 
     this.contentElement.classList.add('webauthn-pane');
-    this.enabled = false;
-    this.activeAuthId = null;
-    this.hasBeenEnabled = false;
-    this.dataGrids = new Map();
 
     this.availableAuthenticatorSetting =
-        (Common.Settings.Settings.instance().createSetting('webauthnAuthenticators', []) as
-         Common.Settings.Setting<AvailableAuthenticatorOptions[]>);
-
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
-    if (mainTarget) {
-      this.model = mainTarget.model(SDK.WebAuthnModel.WebAuthnModel);
-    }
+        Common.Settings.Settings.instance().createSetting<AvailableAuthenticatorOptions[]>(
+            'webauthnAuthenticators', []);
 
     this.createToolbar();
     this.authenticatorsView = this.contentElement.createChild('div', 'authenticators-view');
@@ -284,6 +276,18 @@ export class WebauthnPaneImpl extends UI.Widget.VBox {
     return webauthnPaneImplInstance;
   }
 
+  modelAdded(model: SDK.WebAuthnModel.WebAuthnModel): void {
+    if (model.target() === SDK.TargetManager.TargetManager.instance().mainTarget()) {
+      this.model = model;
+    }
+  }
+
+  modelRemoved(model: SDK.WebAuthnModel.WebAuthnModel): void {
+    if (model.target() === SDK.TargetManager.TargetManager.instance().mainTarget()) {
+      this.model = undefined;
+    }
+  }
+
   private async loadInitialAuthenticators(): Promise<void> {
     let activeAuthenticatorId: Protocol.WebAuthn.AuthenticatorId|null = null;
     const availableAuthenticators = this.availableAuthenticatorSetting.get();
@@ -422,7 +426,6 @@ export class WebauthnPaneImpl extends UI.Widget.VBox {
         Host.userMetrics.actionTaken(Host.UserMetrics.Action.VirtualAuthenticatorEnvironmentEnabled);
         this.hasBeenEnabled = true;
       }
-      this.enabled = enable;
       if (this.model) {
         await this.model.setVirtualAuthEnvEnabled(enable);
       }
@@ -609,7 +612,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox {
         UI.UIUtils.createRadioLabel(`active-authenticator-${authenticatorId}`, i18nString(UIStrings.active));
     activeLabel.radioElement.addEventListener('click', this.setActiveAuthenticator.bind(this, authenticatorId));
     activeButtonContainer.appendChild(activeLabel);
-    /** @type {!HTMLInputElement} */ (activeLabel.radioElement as HTMLInputElement).checked = true;
+    (activeLabel.radioElement as HTMLInputElement).checked = true;
     this.activeAuthId = authenticatorId;  // Newly added authenticator is automatically set as active.
 
     const removeButton = headerElement.createChild('button', 'text-button');
@@ -783,19 +786,16 @@ export class WebauthnPaneImpl extends UI.Widget.VBox {
       throw new Error('Unable to create options from current inputs');
     }
 
-    /**
-     * @type {!Protocol.WebAuthn.VirtualAuthenticatorOptions}
-     */
-    const options = ({
-      protocol: this.protocolSelect.options[this.protocolSelect.selectedIndex].value,
-      transport: this.transportSelect.options[this.transportSelect.selectedIndex].value,
+    return {
+      protocol: this.protocolSelect.options[this.protocolSelect.selectedIndex].value as
+          Protocol.WebAuthn.AuthenticatorProtocol,
+      transport: this.transportSelect.options[this.transportSelect.selectedIndex].value as
+          Protocol.WebAuthn.AuthenticatorTransport,
       hasResidentKey: this.residentKeyCheckbox.checked,
       hasUserVerification: this.userVerificationCheckbox.checked,
       automaticPresenceSimulation: true,
       isUserVerified: true,
-    } as Protocol.WebAuthn.VirtualAuthenticatorOptions);
-
-    return options;
+    };
   }
 
   /**
@@ -824,8 +824,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox {
       if (!button) {
         return;
       }
-      button.checked =
-          /** @type {!HTMLElement} */ (authenticator as HTMLElement).dataset.authenticatorId === this.activeAuthId;
+      button.checked = (authenticator as HTMLElement).dataset.authenticatorId === this.activeAuthId;
     });
   }
 

package/front_end/third_party/acorn/README.chromium

@@ -1,7 +1,7 @@
 Name: Acorn, a tiny, fast JavaScript parser written in JavaScript.
 Short Name: acorn
 URL: https://github.com/acornjs/acorn
-Version: 8.4.1
+Version: 8.6.0
 License: MIT
 License File: LICENSE
 Security Critical: no
@@ -10,5 +10,5 @@ Description:
 A tiny, fast JavaScript parser written in JavaScript.
 
 ```bash
-wget -qO- https://registry.npmjs.org/acorn/-/acorn-8.4.1.tgz | tar xzf -
+wget -qO- https://registry.npmjs.org/acorn/-/acorn-8.6.0.tgz | tar xzf -
 ```

package/front_end/third_party/acorn/acorn.ts

@@ -7,7 +7,7 @@ import * as acorn from './package/dist/acorn.mjs';
 import type * as ESTree from './estree-legacy';
 export {ESTree};
 
-export { Comment, defaultOptions, getLineInfo, isNewLine, lineBreak, lineBreakG, Node, SourceLocation, Token,tokTypes} from './package/dist/acorn.mjs';
+export { Comment, defaultOptions, getLineInfo, isNewLine, lineBreak, lineBreakG, Node, SourceLocation, Token, tokTypes, tokContexts} from './package/dist/acorn.mjs';
 
 export const Parser = acorn.Parser;
 export const tokenizer = acorn.Parser.tokenizer.bind(acorn.Parser);

package/front_end/third_party/acorn/package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## 8.6.0 (2021-11-18)
+
+### Bug fixes
+
+Fix a bug where an object literal with multiple `__proto__` properties would incorrectly be accepted if a later property value held an assigment.
+
+### New features
+
+Support class private fields with the `in` operator.
+
+## 8.5.0 (2021-09-06)
+
+### Bug fixes
+
+Improve context-dependent tokenization in a number of corner cases.
+
+Fix location tracking after a 0x2028 or 0x2029 character in a string literal (which before did not increase the line number).
+
+Fix an issue where arrow function bodies in for loop context would inappropriately consume `in` operators.
+
+Fix wrong end locations stored on SequenceExpression nodes.
+
+Implement restriction that `for`/`of` loop LHS can't start with `let`.
+
+### New features
+
+Add support for ES2022 class static blocks.
+
+Allow multiple input files to be passed to the CLI tool.
+
 ## 8.4.1 (2021-06-24)
 
 ### Bug fixes
@@ -16,7 +46,7 @@ A new option, `allowSuperOutsideMethod`, can be used to suppress the error when
 
 Default `allowAwaitOutsideFunction` to true for ECMAScript 2022 an higher.
 
-Add support for the `p` ([indices](https://github.com/tc39/proposal-regexp-match-indices)) regexp flag.
+Add support for the `d` ([indices](https://github.com/tc39/proposal-regexp-match-indices)) regexp flag.
 
 ## 8.2.4 (2021-05-04)
 

package/front_end/third_party/acorn/package/README.md

@@ -54,7 +54,7 @@ required):
 
 - **ecmaVersion**: Indicates the ECMAScript version to parse. Must be
   either 3, 5, 6 (or 2015), 7 (2016), 8 (2017), 9 (2018), 10 (2019),
-  11 (2020), 12 (2021, partial support), 13 (2022, partial support)
+  11 (2020), 12 (2021), 13 (2022, partial support)
   or `"latest"` (the latest the library supports). This influences
   support for strict mode, the set of reserved words, and support
   for new syntax features.

package/front_end/third_party/acorn/package/dist/acorn.d.ts

@@ -173,6 +173,9 @@ declare namespace acorn {
     p_expr: TokContext
     q_tmpl: TokContext
     f_expr: TokContext
+    f_stat: TokContext
+    f_expr_gen: TokContext
+    f_gen: TokContext
   }
 
   function isIdentifierStart(code: number, astral?: boolean): boolean