chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/panels/accessibility/ARIAAttributesView.ts

@@ -5,7 +5,7 @@
 
 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';
+import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -66,7 +66,7 @@ export class ARIAAttributesPane extends AccessibilitySubPane {
   }
 
   private isARIAAttribute(attribute: SDK.DOMModel.Attribute): boolean {
-    return ATTRIBUTES.has(attribute.name);
+    return SDK.DOMModel.ARIA_ATTRIBUTES.has(attribute.name);
   }
 }
 
@@ -235,61 +235,3 @@ export class ARIAAttributePrompt extends UI.TextPrompt.TextPrompt {
     });
   }
 }
-
-// Keep this list in sync with https://w3c.github.io/aria/#state_prop_def
-const ATTRIBUTES = new Set<string>([
-  'role',
-  'aria-activedescendant',
-  'aria-atomic',
-  'aria-autocomplete',
-  'aria-braillelabel',
-  'aria-brailleroledescription',
-  'aria-busy',
-  'aria-checked',
-  'aria-colcount',
-  'aria-colindex',
-  'aria-colindextext',
-  'aria-colspan',
-  'aria-controls',
-  'aria-current',
-  'aria-describedby',
-  'aria-description',
-  'aria-details',
-  'aria-disabled',
-  'aria-dropeffect',
-  'aria-errormessage',
-  'aria-expanded',
-  'aria-flowto',
-  'aria-grabbed',
-  'aria-haspopup',
-  'aria-hidden',
-  'aria-invalid',
-  'aria-keyshortcuts',
-  'aria-label',
-  'aria-labelledby',
-  'aria-level',
-  'aria-live',
-  'aria-modal',
-  'aria-multiline',
-  'aria-multiselectable',
-  'aria-orientation',
-  'aria-owns',
-  'aria-placeholder',
-  'aria-posinset',
-  'aria-pressed',
-  'aria-readonly',
-  'aria-relevant',
-  'aria-required',
-  'aria-roledescription',
-  'aria-rowcount',
-  'aria-rowindex',
-  'aria-rowindextext',
-  'aria-rowspan',
-  'aria-selected',
-  'aria-setsize',
-  'aria-sort',
-  'aria-valuemax',
-  'aria-valuemin',
-  'aria-valuenow',
-  'aria-valuetext',
-]);

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -20,6 +20,7 @@ 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 NetworkForward from '../network/forward/forward.js';
+import * as NetworkPanel from '../network/network.js';
 import * as TimelinePanel from '../timeline/timeline.js';
 import * as TimelineUtils from '../timeline/utils/utils.js';
 
@@ -428,7 +429,8 @@ function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|null):
   if (!request) {
     return null;
   }
-  return new AiAssistanceModel.RequestContext(request);
+  const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
+  return new AiAssistanceModel.RequestContext(request, calculator);
 }
 
 function createPerformanceTraceContext(focus: TimelineUtils.AIContext.AgentFocus|null):
@@ -826,7 +828,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           return;
         }
 
-        this.#selectedRequest = Boolean(ev.data) ? new AiAssistanceModel.RequestContext(ev.data) : null;
+        if (Boolean(ev.data)) {
+          const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
+          this.#selectedRequest = new AiAssistanceModel.RequestContext(ev.data, calculator);
+        } else {
+          this.#selectedRequest = null;
+        }
         this.#updateConversationState({agent: this.#conversationAgent});
       };
 
@@ -1268,10 +1275,20 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (!this.#conversation) {
       return;
     }
+
     const markdownContent = this.#conversation.getConversationMarkdown();
-    const titleFormatted = Platform.StringUtilities.toSnakeCase(this.#conversation.title || '');
     const contentData = new TextUtils.ContentData.ContentData(markdownContent, false, 'text/markdown');
-    const filename = `devtools_${titleFormatted || 'conversation'}.md` as Platform.DevToolsPath.RawPathString;
+
+    const titleFormatted = Platform.StringUtilities.toSnakeCase(this.#conversation.title || '');
+    const prefix = 'devtools_';
+    const suffix = '.md';
+    const maxTitleLength = 64 - prefix.length - suffix.length;
+    let finalTitle = titleFormatted || 'conversation';
+    if (finalTitle.length > maxTitleLength) {
+      finalTitle = finalTitle.substring(0, maxTitleLength);
+    }
+    const filename = `${prefix}${finalTitle}${suffix}` as Platform.DevToolsPath.RawPathString;
+
     await Workspace.FileManager.FileManager.instance().save(filename, contentData, true);
     Workspace.FileManager.FileManager.instance().close(filename);
   }
@@ -1469,6 +1486,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (this.#conversation) {
       void VisualLogging.logFunctionCall(`start-conversation-${this.#conversation.type}`, 'ui');
     }
+
     const generator = this.#conversationAgent.run(
         text, {
           signal,

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -599,7 +599,7 @@ export class PatchWidget extends UI.Widget.Widget {
         void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
       },
       ariaLabel: lockedString(UIStringsNotTranslate.freDisclaimerHeader),
-      learnMoreButtonTitle: lockedString(UIStringsNotTranslate.learnMore),
+      learnMoreButtonText: lockedString(UIStringsNotTranslate.learnMore),
     });
 
     if (result) {

package/front_end/panels/ai_assistance/SelectWorkspaceDialog.ts

@@ -7,6 +7,7 @@ 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 Root from '../../core/root/root.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
@@ -354,7 +355,7 @@ export class SelectWorkspaceDialog extends UI.Widget.VBox {
       currentProject?: Workspace.Workspace.Project): void {
     const dialog = new UI.Dialog.Dialog('select-workspace');
     dialog.setAriaLabel(UIStringsNotTranslate.selectFolderAccessibleLabel);
-    dialog.setMaxContentSize(new UI.Geometry.Size(384, 340));
+    dialog.setMaxContentSize(new Geometry.Size(384, 340));
     dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
     dialog.setDimmed(true);
 

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

@@ -165,7 +165,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: () => titleForAiAssistanceActions(),
+  title: titleForAiAssistanceActions,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -180,7 +180,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: () => titleForAiAssistanceActions(),
+  title: titleForAiAssistanceActions,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -195,7 +195,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: () => titleForAiAssistanceActions(),
+  title: titleForAiAssistanceActions,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -210,7 +210,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: () => titleForAiAssistanceActions(),
+  title: titleForAiAssistanceActions,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -225,7 +225,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: () => titleForAiAssistanceActions(),
+  title: titleForAiAssistanceActions,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -240,7 +240,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: () => titleForAiAssistanceActions(),
+  title: titleForAiAssistanceActions,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -257,7 +257,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: i18nLazyString(UIStrings.askAi),
+  title: titleForAiAssistanceActions,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -273,7 +273,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: () => titleForAiAssistanceActions(),
+  title: titleForAiAssistanceActions,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -287,7 +287,7 @@ UI.ActionRegistration.registerActionExtension({
     return [];
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
-  title: () => titleForAiAssistanceActions(),
+  title: titleForAiAssistanceActions,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();

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

@@ -10,7 +10,12 @@ 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 Root from '../../../core/root/root.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
+import * as Workspace from '../../../models/workspace/workspace.js';
+import * as ElementsPanel from '../../../panels/elements/elements.js';
+import * as TimelineUtils from '../../../panels/timeline/utils/utils.js';
+import * as PanelUtils from '../../../panels/utils/utils.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
@@ -1022,6 +1027,43 @@ function renderImageChatMessage(inlineData: Host.AidaClient.MediaBlob): Lit.LitT
   // clang-format on
 }
 
+function renderContextIcon(context: AiAssistanceModel.ConversationContext<unknown>|null): Lit.LitTemplate {
+  if (!context) {
+    return Lit.nothing;
+  }
+  const item = context.getItem();
+  // FIXME: move this to presenter once PanelUtils are declarative. The instance
+  // checking should be in the presenter and the rendering in the view function.
+  if (item instanceof SDK.NetworkRequest.NetworkRequest) {
+    return PanelUtils.PanelUtils.getIconForNetworkRequest(item);
+  }
+  if (item instanceof Workspace.UISourceCode.UISourceCode) {
+    return PanelUtils.PanelUtils.getIconForSourceFile(item);
+  }
+  if (item instanceof TimelineUtils.AIContext.AgentFocus) {
+    return html`<devtools-icon name="performance" title="Performance"></devtools-icon>`;
+  }
+  if (item instanceof SDK.DOMModel.DOMNode) {
+    return Lit.nothing;
+  }
+  return Lit.nothing;
+}
+
+function renderContextTitle(
+    context: AiAssistanceModel.ConversationContext<unknown>, disabled: boolean): Lit.TemplateResult|string {
+  const item = context.getItem();
+  if (item instanceof SDK.DOMModel.DOMNode) {
+    // FIXME: move this to the model code.
+    const hiddenClassList =
+        item.classNames().filter(className => className.startsWith(AiAssistanceModel.AI_ASSISTANCE_CSS_CLASS_NAME));
+    return html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ElementsPanel.DOMLinkifier.DOMNodeLink, {
+      node: item,
+      options: {hiddenClassList, disabled}
+    })}></devtools-widget>`;
+  }
+  return context.getTitle();
+}
+
 function renderSelection({
   selectedContext,
   inspectElementToggled,
@@ -1089,8 +1131,8 @@ function renderSelection({
       @keydown=${handleKeyDown}
       aria-description=${i18nString(UIStrings.revealContextDescription)}
     >
-      ${selectedContext?.getIcon() ? html`${selectedContext?.getIcon()}` : Lit.nothing}
-      <span class="title">${selectedContext?.getTitle({ disabled: isTextInputDisabled }) ?? lockedString(UIStringsNotTranslate.noElementSelected)}</span>
+      ${renderContextIcon(selectedContext)}
+      <span class="title">${selectedContext ? renderContextTitle(selectedContext, isTextInputDisabled) : lockedString(UIStringsNotTranslate.noElementSelected)}</span>
     </div>
   </div>`;
   // clang-format on

package/front_end/panels/animation/AnimationUI.ts

@@ -6,6 +6,7 @@ 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';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -232,7 +233,7 @@ export class AnimationUI {
       line.style.stroke = strokeColor;
     }
 
-    const bezier = UI.Geometry.CubicBezier.parse(easing);
+    const bezier = Geometry.CubicBezier.parse(easing);
     const cache = this.#cachedElements[iteration].keyframeRender;
     if (!cache[keyframeIndex]) {
       const svg = bezier ? UI.UIUtils.createSVGChild(parentElement, 'path', 'animation-keyframe') :

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -29,6 +29,7 @@
  */
 /* eslint no-return-assign: "off" */
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives as LitDirectives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -39,7 +40,7 @@ import {StorageItemsToolbar} from './StorageItemsToolbar.js';
 const {ARIAUtils} = UI;
 const {EmptyWidget} = UI.EmptyWidget;
 const {VBox, widgetConfig} = UI.Widget;
-const {Size} = UI.Geometry;
+const {Size} = Geometry;
 const {repeat} = LitDirectives;
 
 type Widget = UI.Widget.Widget;

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

@@ -535,17 +535,17 @@ const UIStrings = {
   cookieDisabled:
       'Back/forward cache is disabled because cookies are disabled on a page that uses `Cache-Control: no-store`.',
   /**
-   * @description Description text for not restored reason WebRTCSticky.
+   * @description Description text for not restored reason WebRTCUsedWithCCNS.
    */
-  webRTCSticky: 'Back/forward cache is disabled because WebRTC has been used.',
+  webRTCUsedWithCCNS: 'Back/forward cache is disabled because WebRTC has been used.',
   /**
-   * @description Description text for not restored reason WebTransportSticky.
+   * @description Description text for not restored reason WebTransportUsedWithCCNS.
    */
-  webTransportSticky: 'Back/forward cache is disabled because WebTransport has been used.',
+  webTransportUsedWithCCNS: 'Back/forward cache is disabled because WebTransport has been used.',
   /**
-   * @description Description text for not restored reason WebSocketSticky.
+   * @description Description text for not restored reason WebSocketUsedWithCCNS.
    */
-  webSocketSticky: 'Back/forward cache is disabled because WebSocket has been used.',
+  webSocketUsedWithCCNS: 'Back/forward cache is disabled because WebSocket has been used.',
 
 } as const;
 
@@ -691,9 +691,9 @@ export const NotRestoredReasonDescription = {
       {name: i18nLazyString(UIStrings.jsNetworkRequestReceivedCacheControlNoStoreResource)},
   IndexedDBEvent: {name: i18nLazyString(UIStrings.indexedDBEvent)},
   CookieDisabled: {name: i18nLazyString(UIStrings.cookieDisabled)},
-  WebRTCSticky: {name: i18nLazyString(UIStrings.webRTCSticky)},
-  WebTransportSticky: {name: i18nLazyString(UIStrings.webTransportSticky)},
-  WebSocketSticky: {name: i18nLazyString(UIStrings.webSocketSticky)},
+  WebRTCUsedWithCCNS: {name: i18nLazyString(UIStrings.webRTCUsedWithCCNS)},
+  WebTransportUsedWithCCNS: {name: i18nLazyString(UIStrings.webTransportUsedWithCCNS)},
+  WebSocketUsedWithCCNS: {name: i18nLazyString(UIStrings.webSocketUsedWithCCNS)},
   HTTPAuthRequired: {name: i18n.i18n.lockedLazyString('HTTPAuthRequired')},
   CookieFlushed: {name: i18n.i18n.lockedLazyString('CookieFlushed')},
   SmartCard: {name: i18n.i18n.lockedLazyString('SmartCard')},

package/front_end/panels/autofill/AutofillView.ts

@@ -7,6 +7,7 @@ import '../../ui/components/adorners/adorners.js';
 import '../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -293,7 +294,8 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
 export class AutofillView extends UI.Widget.VBox {
   readonly #view: View;
   readonly #autofillManager: AutofillManager.AutofillManager.AutofillManager;
-  #autoOpenViewSetting: Common.Settings.Setting<boolean>;
+  #autoOpenViewSetting: Common.Settings.Setting<boolean> =
+      Common.Settings.Settings.instance().createSetting('auto-open-autofill-view-on-event', true);
   #showTestAddressesInAutofillMenuSetting: Common.Settings.Setting<boolean>;
   #address = '';
   #filledFields: Protocol.Autofill.FilledField[] = [];
@@ -304,8 +306,6 @@ export class AutofillView extends UI.Widget.VBox {
     super({useShadowDom: true});
     this.#autofillManager = autofillManager;
     this.#view = view;
-    this.#autoOpenViewSetting =
-        Common.Settings.Settings.instance().createSetting('auto-open-autofill-view-on-event', true);
     this.#showTestAddressesInAutofillMenuSetting =
         Common.Settings.Settings.instance().createSetting('show-test-addresses-in-autofill-menu-on-event', false);
   }
@@ -348,13 +348,18 @@ export class AutofillView extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  #onAddressFormFilled(
-      {data}: Common.EventTarget.EventTargetEvent<AutofillManager.AutofillManager.AddressFormFilledEvent>): void {
-    ({
-      address: this.#address,
-      filledFields: this.#filledFields,
-      matches: this.#matches,
-    } = data);
+  async #onAddressFormFilled(
+      {data}: Common.EventTarget.EventTargetEvent<AutofillManager.AutofillManager.AddressFormFilledEvent>):
+      Promise<void> {
+    if (this.#autoOpenViewSetting.get()) {
+      await UI.ViewManager.ViewManager.instance().showView('autofill-view');
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AutofillReceivedAndTabAutoOpened);
+    } else {
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AutofillReceived);
+    }
+    this.#address = data.address;
+    this.#filledFields = data.filledFields;
+    this.#matches = data.matches;
     this.#highlightedMatches = [];
     this.requestUpdate();
   }

package/front_end/panels/browser_debugger/CSPViolationBreakpointsSidebarPane.ts

@@ -1,10 +1,8 @@
 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as SDK from '../../core/sdk/sdk.js';
-import * as Protocol from '../../generated/protocol.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {CategorizedBreakpointsSidebarPane} from './CategorizedBreakpointsSidebarPane.js';
@@ -13,8 +11,9 @@ export class CSPViolationBreakpointsSidebarPane extends CategorizedBreakpointsSi
   constructor() {
     const breakpoints: SDK.DOMDebuggerModel.CSPViolationBreakpoint[] =
         SDK.DOMDebuggerModel.DOMDebuggerManager.instance().cspViolationBreakpoints();
-    super(breakpoints, 'sources.csp-violation-breakpoints', Protocol.Debugger.PausedEventReason.CSPViolation);
-    this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.csp-violation-breakpoints')}`);
+    super(
+        breakpoints, `${VisualLogging.section('sources.csp-violation-breakpoints')}`,
+        'sources.csp-violation-breakpoints');
   }
 
   protected override getBreakpointFromPausedDetails(details: SDK.DebuggerModel.DebuggerPausedDetails):
@@ -25,9 +24,9 @@ export class CSPViolationBreakpointsSidebarPane extends CategorizedBreakpointsSi
     return breakpoint ? breakpoint : null;
   }
 
-  protected override toggleBreakpoint(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean):
+  protected override onBreakpointChanged(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean):
       void {
-    breakpoint.setEnabled(enabled);
+    super.onBreakpointChanged(breakpoint, enabled);
     SDK.DOMDebuggerModel.DOMDebuggerManager.instance().updateCSPViolationBreakpoints();
   }
 }