chrome-devtools-frontend 1.0.1528866 → 1.0.1529904

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1343,6 +1343,17 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return this.contentElementInternal;
   }
 
+  #onMouseEnter(_event: MouseEvent): void {
+    if (this.#teaser &&
+        Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').getIfNotDisabled()) {
+      this.#teaser.maybeGenerateTeaser();
+    }
+  }
+
+  #onMouseLeave(): void {
+    this.#teaser?.abortTeaserGeneration();
+  }
+
   toMessageElement(): HTMLElement {
     if (this.elementInternal) {
       return this.elementInternal;
@@ -1350,6 +1361,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.elementInternal = document.createElement('div');
     this.elementInternal.tabIndex = -1;
     this.elementInternal.addEventListener('keydown', (this.onKeyDown.bind(this) as EventListener));
+    this.elementInternal.addEventListener('mouseenter', this.#onMouseEnter.bind(this));
+    this.elementInternal.addEventListener('mouseleave', this.#onMouseLeave.bind(this));
     this.updateMessageElement();
     this.elementInternal.classList.toggle('console-adjacent-user-command-result', this.#adjacentUserCommandResult);
     return this.elementInternal;
@@ -1447,7 +1460,11 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   shouldShowTeaser(): boolean {
-    if (!this.shouldShowInsights() || !AiAssistanceModel.BuiltInAi.BuiltInAi.cachedIsAvailable()) {
+    if (!this.shouldShowInsights()) {
+      return false;
+    }
+    if (!Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').getIfNotDisabled() ||
+        !AiAssistanceModel.BuiltInAi.BuiltInAi.cachedIsAvailable()) {
       return false;
     }
     const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();

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

@@ -133,6 +133,11 @@ const UIStrings = {
    * @description Title of a setting under the Console category in Settings that controls whether `console.trace()` messages appear collapsed by default.
    */
   collapseConsoleTraceMessagesByDefault: 'Do not automatically expand `console.trace()` messages',
+  /**
+   * @description Title of a setting under the Console category in Settings that controls whether AI summaries should
+   * be shown for console warnings/errors.
+   */
+  showConsoleInsightTeasers: 'Show AI summaries for console messages',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/console-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -437,6 +442,15 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.CONSOLE,
+  storageType: Common.Settings.SettingStorageType.SYNCED,
+  title: i18nLazyString(UIStrings.showConsoleInsightTeasers),
+  settingName: 'console-insight-teasers-enabled',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});
+
 Common.Revealer.registerRevealer({
   contextTypes() {
     return [

package/front_end/panels/console/consoleInsightTeaser.css

@@ -52,4 +52,32 @@
     font: var(--sys-typescale-body4-bold);
     margin: 0 0 var(--sys-size-3);
   }
+
+  .lightbulb-icon {
+    color: var(--sys-color-on-primary);
+    height: var(--sys-size-7);
+    margin-left: calc(-1 * var(--sys-size-4));
+  }
+
+  .learn-more {
+    padding-top: 7px;
+  }
+
+  .info-tooltip-text {
+    max-width: var(--sys-size-26);
+  }
+
+  .tooltip-footer {
+    padding: var(--sys-size-5) 0 0;
+    display: flex;
+    align-items: center;
+
+    .info-icon {
+      margin-left: var(--sys-size-4);
+    }
+
+    devtools-checkbox {
+      margin-left: auto;
+    }
+  }
 }

package/front_end/panels/console/consolePrompt.css

@@ -18,13 +18,14 @@
 
 #console-prompt .console-prompt-icon {
   position: absolute;
-  left: -13px;
-  top: 2px;
+  left: -9px;
+  top: 4px;
   user-select: none;
 }
 
 .console-eager-preview {
   padding-bottom: 2px;
+  margin-left: 4px;
   opacity: 60%;
   position: relative;
 }

package/front_end/panels/console/consoleView.css

@@ -1,4 +1,7 @@
-/*
+/* Copyright 2021 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ *
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
@@ -90,17 +93,20 @@
 
 .console-prompt-editor-container {
   min-height: 21px;
+  padding-left: 2px;
+  padding-top: 1px;
 }
 
 .console-message,
 .console-user-command {
   clear: right;
   position: relative;
-  padding: 3px 22px 1px 0;
+  padding: 1px 22px 1px 0;
   margin-left: 24px;
-  min-height: 17px;  /* Sync with ConsoleViewMessage.js */
+  min-height: 18px;
   flex: auto;
   display: flex;
+  align-items: flex-end;
 }
 
 .console-message > * {
@@ -215,7 +221,7 @@
   --console-color-white: #fff;
 
   &.console-selected {
-    background-color: var(--sys-color-tonal-container);
+    background-color: var(--sys-color-state-focus-highlight);
   }
 }
 
@@ -329,7 +335,6 @@
   display: inline-block;
   overflow-wrap: break-word;
   max-width: 100%;
-  vertical-align: top;
   margin-top: -1.5px;
 }
 

package/front_end/panels/explain/ActionDelegate.ts

@@ -15,11 +15,14 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       case 'explain.console-message.context.error':
       case 'explain.console-message.context.warning':
       case 'explain.console-message.context.other':
+      case 'explain.console-message.teaser':
       case 'explain.console-message.hover': {
         const consoleViewMessage = context.flavor(Console.ConsoleViewMessage.ConsoleViewMessage);
         if (consoleViewMessage) {
           if (actionId.startsWith('explain.console-message.context')) {
             Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightRequestedViaContextMenu);
+          } else if (actionId === 'explain.console-message.teaser') {
+            Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightRequestedViaTeaser);
           } else if (actionId === 'explain.console-message.hover') {
             Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightRequestedViaHoverButton);
           }

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

@@ -57,6 +57,13 @@ const actions = [
       return [Console.ConsoleViewMessage.ConsoleViewMessage];
     },
   },
+  {
+    actionId: 'explain.console-message.teaser',
+    title: i18nLazyString(UIStrings.explainThisMessage),
+    contextTypes(): [] {
+      return [];
+    },
+  },
   {
     actionId: 'explain.console-message.context.error',
     title: i18nLazyString(UIStrings.explainThisError),

package/front_end/panels/network/BlockedURLsPane.ts

@@ -5,15 +5,17 @@
 /* eslint-disable rulesdir/no-imperative-dom-api */
 
 import '../../ui/legacy/legacy.js';
+import '../../ui/components/tooltips/tooltips.js';
 
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, render} from '../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import blockedURLsPaneStyles from './blockedURLsPane.css.js';
@@ -51,6 +53,10 @@ const UIStrings = {
    * @description Text in Blocked URLs Pane of the Network panel
    */
   textPatternToBlockMatching: 'Text pattern to block matching requests; use * for wildcard',
+  /**
+   * @description Text in Blocked URLs Pane of the Network panel
+   */
+  textPatternToBlockMatchingURLPatterns: 'Text pattern to block matching requests; use URLPattern syntax.',
   /**
    * @description Error text for empty list widget input in Request Blocking tool
    */
@@ -59,6 +65,19 @@ const UIStrings = {
    * @description Error text for duplicate list widget input in Request Blocking tool
    */
   patternAlreadyExists: 'Pattern already exists.',
+  /**
+   * @description Tooltip message when a pattern failed to parse as a URLPattern
+   */
+  patternFailedToParse: 'This pattern failed to parse as a URLPattern',
+  /**
+   * @description Tooltip message when a pattern failed to parse as a URLPattern because it contains RegExp groups
+   */
+  patternFailedWithRegExpGroups: 'RegExp groups are not allowed',
+  /**
+   * @description Tooltip message when a pattern was converted to a URLPattern
+   * @example {example.com} PH1
+   */
+  patternWasUpgraded: 'This pattern was upgraded from "{PH1}"',
   /**
    * @description Message to be announced for a when list item is removed from list widget
    */
@@ -73,6 +92,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const NETWORK_REQUEST_BLOCKING_EXPLANATION_URL =
     'https://developer.chrome.com/docs/devtools/network-request-blocking' as Platform.DevToolsPath.UrlString;
+const PATTERN_API_DOCS_URL =
+    'https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API' as Platform.DevToolsPath.UrlString;
 
 const {bindToAction} = UI.UIUtils;
 
@@ -126,12 +147,22 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       target);
 };
 
+function learnMore(): LitTemplate {
+  return html`<x-link
+        href=${NETWORK_REQUEST_BLOCKING_EXPLANATION_URL}
+        tabindex=0
+        class=devtools-link
+        jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}>
+          ${i18nString(UIStrings.learnMore)}
+      </x-link>`;
+}
+
 export class BlockedURLsPane extends UI.Widget.VBox implements
     UI.ListWidget.Delegate<SDK.NetworkManager.RequestCondition> {
   private manager: SDK.NetworkManager.MultitargetNetworkManager;
   private readonly list: UI.ListWidget.ListWidget<SDK.NetworkManager.RequestCondition>;
   private editor: UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition>|null;
-  private blockedCountForUrl: Map<string, number>;
+  private blockedCountForUrl: Map<Platform.DevToolsPath.UrlString, number>;
   #view: View;
 
   constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
@@ -183,8 +214,8 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
     this.manager.requestConditions.clear();
   }
 
-  renderItem(condition: SDK.NetworkManager.RequestCondition, editable: boolean): Element {
-    const count = this.blockedRequestsCount(condition.url);
+  renderItem(condition: SDK.NetworkManager.RequestCondition, editable: boolean, index: number): Element {
+    const count = this.blockedRequestsCount(condition);
     const element = document.createElement('div');
     element.classList.add('blocked-url');
     const toggle = (e: Event): void => {
@@ -193,8 +224,56 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
         condition.enabled = !condition.enabled;
       }
     };
-    render(
-        // clang-format off
+
+    const {enabled, originalOrUpgradedURLPattern, constructorStringOrWildcardURL, wildcardURL} = condition;
+
+    if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
+      render(
+          // clang-format off
+        html`
+    <input class=blocked-url-checkbox
+      @click=${toggle}
+      type=checkbox
+      ?checked=${enabled}
+      ?disabled=${!editable || !originalOrUpgradedURLPattern}
+      .jslog=${VisualLogging.toggle().track({ change: true })}>
+    ${originalOrUpgradedURLPattern ? html`
+      <devtools-tooltip variant=rich jslogcontext=url-pattern id=url-pattern-${index}>
+        <div>hash: ${originalOrUpgradedURLPattern.hash}</div>
+        <div>hostname: ${originalOrUpgradedURLPattern.hostname}</div>
+        <div>password: ${originalOrUpgradedURLPattern.password}</div>
+        <div>pathname: ${originalOrUpgradedURLPattern.pathname}</div>
+        <div>port: ${originalOrUpgradedURLPattern.port}</div>
+        <div>protocol: ${originalOrUpgradedURLPattern.protocol}</div>
+        <div>search: ${originalOrUpgradedURLPattern.search}</div>
+        <div>username: ${originalOrUpgradedURLPattern.username}</div>
+        <hr />
+        ${learnMore()}
+      </devtools-tooltip>` : nothing}
+    ${wildcardURL ? html`
+      <devtools-icon name=warning-filled class="small warning" aria-details=url-pattern-warning-${index}>
+      </devtools-icon>
+      <devtools-tooltip variant=rich jslogcontext=url-pattern-warning id=url-pattern-warning-${index}>
+        ${i18nString(UIStrings.patternWasUpgraded, {PH1: wildcardURL})}
+      </devtools-tooltip>
+      `: nothing}
+    ${!originalOrUpgradedURLPattern ? html`
+      <devtools-icon name=cross-circle-filled class=small aria-details=url-pattern-error-${index}>
+      </devtools-icon>
+      <devtools-tooltip variant=rich jslogcontext=url-pattern-warning id=url-pattern-error-${index}>
+        ${SDK.NetworkManager.RequestURLPattern.isValidPattern(constructorStringOrWildcardURL) ===
+            SDK.NetworkManager.RequestURLPatternValidity.HAS_REGEXP_GROUPS
+            ? i18nString(UIStrings.patternFailedWithRegExpGroups)
+            : i18nString(UIStrings.patternFailedToParse)}
+        ${learnMore()}
+      </devtools-tooltip>`: nothing}
+    <div @click=${toggle} class=blocked-url-label aria-details=url-pattern-${index}>${constructorStringOrWildcardURL}</div>
+    <div class=blocked-url-count>${i18nString(UIStrings.dBlocked, {PH1: count})}</div>`,
+          // clang-format on
+          element);
+    } else {
+      render(
+          // clang-format off
         html`
     <input class=blocked-url-checkbox
       @click=${toggle}
@@ -202,10 +281,11 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
       ?checked=${condition.enabled}
       ?disabled=${!editable}
       .jslog=${VisualLogging.toggle().track({ change: true })}>
-    <div @click=${toggle} class=blocked-url-label>${condition.url}</div>
+    <div @click=${toggle} class=blocked-url-label>${wildcardURL}</div>
     <div class=blocked-url-count>${i18nString(UIStrings.dBlocked, {PH1: count})}</div>`,
-      // clang-format off
-        element);
+          // clang-format on
+          element);
+    }
     return element;
   }
 
@@ -215,21 +295,29 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
   }
 
   removeItemRequested(condition: SDK.NetworkManager.RequestCondition): void {
-     this.manager.requestConditions.delete(condition);
+    this.manager.requestConditions.delete(condition);
     UI.ARIAUtils.LiveAnnouncer.alert(UIStrings.itemDeleted);
   }
 
   beginEdit(pattern: SDK.NetworkManager.RequestCondition): UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition> {
     this.editor = this.createEditor();
-    this.editor.control('url').value = pattern.url;
+    this.editor.control('url').value = Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled ?
+        pattern.constructorStringOrWildcardURL :
+        pattern.wildcardURL ?? '';
     return this.editor;
   }
 
   commitEdit(
       item: SDK.NetworkManager.RequestCondition, editor: UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition>,
       isNew: boolean): void {
-    item.url =
-     editor.control('url').value as Platform.DevToolsPath.UrlString;
+    const constructorString = editor.control('url').value as SDK.NetworkManager.URLPatternConstructorString;
+    const pattern = Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled ?
+        SDK.NetworkManager.RequestURLPattern.create(constructorString) :
+        constructorString;
+    if (!pattern) {
+      throw new Error('Failed to parse pattern');
+    }
+    item.pattern = pattern;
     if (isNew) {
       this.manager.requestConditions.add(item);
     }
@@ -243,23 +331,37 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
     const editor = new UI.ListWidget.Editor<SDK.NetworkManager.RequestCondition>();
     const content = editor.contentElement();
     const titles = content.createChild('div', 'blocked-url-edit-row');
-    titles.createChild('div').textContent = i18nString(UIStrings.textPatternToBlockMatching);
+    const label = titles.createChild('div');
+    if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
+      label.textContent = i18nString(UIStrings.textPatternToBlockMatchingURLPatterns);
+      label.append(UI.XLink.XLink.create(
+          PATTERN_API_DOCS_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more'));
+    } else {
+      label.textContent = i18nString(UIStrings.textPatternToBlockMatching);
+    }
     const fields = content.createChild('div', 'blocked-url-edit-row');
-    const validator = (_item: SDK.NetworkManager.RequestCondition, _index: number, input: UI.ListWidget.EditorControl): {
-      valid: boolean,
-      errorMessage: Common.UIString.LocalizedString|undefined,
-    } => {
-      let valid = true;
-      let errorMessage;
-      if (!input.value) {
-        errorMessage = i18nString(UIStrings.patternInputCannotBeEmpty);
-        valid = false;
-      } else if (this.manager.requestConditions.has(input.value)) {
-        errorMessage = i18nString(UIStrings.patternAlreadyExists);
-        valid = false;
-      }
-      return {valid, errorMessage};
-    };
+    const validator =
+        (_item: SDK.NetworkManager.RequestCondition, _index: number, input: UI.ListWidget.EditorControl): {
+          valid: boolean,
+          errorMessage: Common.UIString.LocalizedString|undefined,
+        } => {
+          if (!input.value) {
+            return {errorMessage: i18nString(UIStrings.patternInputCannotBeEmpty), valid: false};
+          }
+          if (this.manager.requestConditions.has(input.value)) {
+            return {errorMessage: i18nString(UIStrings.patternAlreadyExists), valid: false};
+          }
+          if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
+            const isValid = SDK.NetworkManager.RequestURLPattern.isValidPattern(input.value);
+            switch (isValid) {
+              case SDK.NetworkManager.RequestURLPatternValidity.FAILED_TO_PARSE:
+                return {errorMessage: i18nString(UIStrings.patternFailedToParse), valid: false};
+              case SDK.NetworkManager.RequestURLPatternValidity.HAS_REGEXP_GROUPS:
+                return {errorMessage: i18nString(UIStrings.patternFailedWithRegExpGroups), valid: false};
+            }
+          }
+          return {valid: true, errorMessage: undefined};
+        };
     const urlInput = editor.createInput('url', 'text', '', validator);
     fields.createChild('div', 'blocked-url-edit-value').appendChild(urlInput);
     return editor;
@@ -269,19 +371,20 @@ export class BlockedURLsPane extends UI.Widget.VBox implements
     const enabled = this.manager.blockingEnabled();
     this.list.clear();
     for (const pattern of this.manager.requestConditions.conditions) {
-      this.list.appendItem(pattern, enabled);
+      if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled || pattern.wildcardURL) {
+        this.list.appendItem(pattern, enabled);
+      }
     }
     this.requestUpdate();
   }
 
-  private blockedRequestsCount(url: string): number {
-    if (!url) {
-      return 0;
-    }
-
+  private blockedRequestsCount(condition: SDK.NetworkManager.RequestCondition): number {
     let result = 0;
     for (const blockedUrl of this.blockedCountForUrl.keys()) {
-      if (this.matches(url, blockedUrl)) {
+      const match = Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled ?
+          condition.originalOrUpgradedURLPattern?.test(blockedUrl) :
+          (condition.wildcardURL && this.matches(condition.wildcardURL, blockedUrl));
+      if (match) {
         result += (this.blockedCountForUrl.get(blockedUrl) as number);
       }
     }

package/front_end/panels/network/NetworkLogView.ts

@@ -1857,7 +1857,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       }
 
       function removeBlockedURL(url: string): void {
-        const entry = manager.requestConditions.conditions.find(condition => condition.url === url);
+        const entry = manager.requestConditions.findCondition(url);
         if (entry) {
           manager.requestConditions.delete(entry);
         }

package/front_end/{models/persistence → panels/settings}/EditFileSystemView.ts

@@ -6,15 +6,11 @@ import '../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-// TODO(crbug.com/442509324): remove UI dependency
-// eslint-disable-next-line rulesdir/no-imports-in-directory
+import type {PlatformFileSystem} from '../../models/persistence/PlatformFileSystem.js';
 import * as UI from '../../ui/legacy/legacy.js';
-// TODO(crbug.com/442509324): remove UI dependency
-// eslint-disable-next-line rulesdir/no-imports-in-directory
 import {Directives, html, render} from '../../ui/lit/lit.js';
 
 import editFileSystemViewStyles from './editFileSystemView.css.js';
-import type {PlatformFileSystem} from './PlatformFileSystem.js';
 
 const {styleMap} = Directives;
 
@@ -36,7 +32,7 @@ const UIStrings = {
    */
   enterAUniquePath: 'Enter a unique path',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('models/persistence/EditFileSystemView.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/settings/EditFileSystemView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export const enum ExcludedFolderStatus {

package/front_end/panels/settings/WorkspaceSettingsTab.ts

@@ -14,6 +14,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import {EditFileSystemView} from './EditFileSystemView.js';
 import workspaceSettingsTabStyles from './workspaceSettingsTab.css.js';
 
 const UIStrings = {
@@ -71,7 +72,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             <div class="mapping-view-container">
               <devtools-widget .widgetConfig=${
                   UI.Widget.widgetConfig(
-                      Persistence.EditFileSystemView.EditFileSystemView,
+                      EditFileSystemView,
                       {fileSystem: fileSystem.fileSystem})}>
               </devtools-widget>
             </div>

package/front_end/panels/settings/settings.ts

@@ -5,6 +5,7 @@
 import './SettingsScreen.js';
 
 import * as AISettingsTab from './AISettingsTab.js';
+import * as EditFileSystemView from './EditFileSystemView.js';
 import * as FrameworkIgnoreListSettingsTab from './FrameworkIgnoreListSettingsTab.js';
 import * as KeybindsSettingsTab from './KeybindsSettingsTab.js';
 import * as SettingsScreen from './SettingsScreen.js';
@@ -12,6 +13,7 @@ import * as WorkspaceSettingsTab from './WorkspaceSettingsTab.js';
 
 export {
   AISettingsTab,
+  EditFileSystemView,
   FrameworkIgnoreListSettingsTab,
   KeybindsSettingsTab,
   SettingsScreen,

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -55,7 +55,6 @@ export class AiCodeCompletionPlugin extends Plugin {
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
-    void this.#onAidaAvailabilityChange();
     const showTeaser = !this.#aiCodeCompletionSetting.get() && !this.#aiCodeCompletionTeaserDismissedSetting.get();
     if (showTeaser) {
       this.#teaser = new PanelCommon.AiCodeCompletionTeaser({onDetach: this.#detachAiCodeCompletionTeaser.bind(this)});
@@ -84,9 +83,7 @@ export class AiCodeCompletionPlugin extends Plugin {
     this.#editor.addEventListener('keydown', this.#boundEditorKeyDown);
     this.#aiCodeCompletionSetting.addChangeListener(this.#boundOnAiCodeCompletionSettingChanged);
     this.#onAiCodeCompletionSettingChanged();
-    if (editor.state.doc.length === 0) {
-      this.#addTeaserPluginToCompartmentImmediate(editor.editor);
-    }
+    void this.#onAidaAvailabilityChange();
   }
 
   override editorExtension(): CodeMirror.Extension {
@@ -281,8 +278,16 @@ export class AiCodeCompletionPlugin extends Plugin {
       this.#aidaAvailability = currentAidaAvailability;
       if (this.#aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
         this.#onAiCodeCompletionSettingChanged();
+        if (this.#editor?.state.doc.length === 0) {
+          this.#addTeaserPluginToCompartmentImmediate(this.#editor?.editor);
+        }
       } else if (this.#aiCodeCompletion) {
         this.#cleanupAiCodeCompletion();
+        if (this.#teaser) {
+          this.#editor?.dispatch({
+            effects: this.#teaserCompartment.reconfigure([]),
+          });
+        }
       }
     }
   }

package/front_end/{models/persistence → panels/sources}/PersistenceActions.ts

@@ -7,15 +7,11 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-// TODO(crbug.com/442509324): remove UI dependency
-// eslint-disable-next-line rulesdir/no-imports-in-directory
+import * as Bindings from '../../models/bindings/bindings.js';
+import * as Persistence from '../../models/persistence/persistence.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as Bindings from '../bindings/bindings.js';
-import * as TextUtils from '../text_utils/text_utils.js';
-import * as Workspace from '../workspace/workspace.js';
-
-import {NetworkPersistenceManager} from './NetworkPersistenceManager.js';
-import {PersistenceImpl} from './PersistenceImpl.js';
 
 const UIStrings = {
   /**
@@ -59,7 +55,7 @@ const UIStrings = {
    */
   saveWasmFailed: 'Unable to save WASM module to disk. Most likely the module is too large.',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('models/persistence/PersistenceActions.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/sources/PersistenceActions.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class ContextMenuProvider implements
@@ -116,9 +112,9 @@ export class ContextMenuProvider implements
 
     // Retrieve uiSourceCode by URL to pick network resources everywhere.
     const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(contentProvider.contentURL());
-    const networkPersistenceManager = NetworkPersistenceManager.instance();
+    const networkPersistenceManager = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance();
 
-    const binding = uiSourceCode && PersistenceImpl.instance().binding(uiSourceCode);
+    const binding = uiSourceCode && Persistence.Persistence.PersistenceImpl.instance().binding(uiSourceCode);
     const fileURL = binding ? binding.fileSystem.contentURL() : contentProvider.contentURL();
 
     if (Common.ParsedURL.schemeIs(fileURL, 'file:')) {
@@ -164,7 +160,7 @@ export class ContextMenuProvider implements
   private async handleOverrideContent(
       uiSourceCode: Workspace.UISourceCode.UISourceCode,
       contentProvider: TextUtils.ContentProvider.ContentProvider): Promise<void> {
-    const networkPersistenceManager = NetworkPersistenceManager.instance();
+    const networkPersistenceManager = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance();
     const isSuccess = await networkPersistenceManager.setupAndStartLocalOverrides(uiSourceCode);
     if (isSuccess) {
       await Common.Revealer.reveal(uiSourceCode);

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -16,6 +16,7 @@ import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelCommon from '../common/common.js';
 import * as Snippets from '../snippets/snippets.js';
 
 import {SourcesView} from './SourcesView.js';
@@ -644,7 +645,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
         /* eslint-enable rulesdir/no-imperative-dom-api */
         this.tabbedPane.setSuffixElement(tabId, suffixElement);
       } else {
-        const icon = Persistence.PersistenceUtils.PersistenceUtils.iconForUISourceCode(uiSourceCode);
+        const icon = PanelCommon.PersistenceUtils.PersistenceUtils.iconForUISourceCode(uiSourceCode);
         this.tabbedPane.setTrailingTabIcon(tabId, icon);
       }
     }