chrome-devtools-frontend 1.0.1622369 → 1.0.1624409

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -2324,6 +2324,11 @@ export const NativeFunctions = [
     signatures: [["type"]],
     receivers: ["HTMLScriptElement","ClipboardItem"]
   },
+  {
+    name: "supports",
+    signatures: [["operation","algorithm","?length"],["operation","algorithm","additionalAlgorithm"]],
+    receivers: ["SubtleCrypto"]
+  },
   {
     name: "toggle",
     signatures: [["token","?force"]]
@@ -7435,10 +7440,6 @@ export const NativeFunctions = [
     name: "setReportEventDataForAutomaticBeacons",
     signatures: [["event"]]
   },
-  {
-    name: "notifyEvent",
-    signatures: [["triggering_event"]]
-  },
   {
     name: "FencedFrameConfig",
     signatures: [["url"]]
@@ -9391,6 +9392,10 @@ export const NativeFunctions = [
     name: "startDiagnosticLogging",
     signatures: [["?options"]]
   },
+  {
+    name: "finishDiagnosticLogging",
+    signatures: [["?options"]]
+  },
   {
     name: "CloseEvent",
     signatures: [["type","?eventInitDict"]]

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

@@ -46,7 +46,7 @@ const {html, Directives: {ref, ifDefined}} = Lit;
 const lockedString = i18n.i18n.lockedString;
 const {widget} = UI.Widget;
 
-const REPORT_URL = 'https://crbug.com/364805393' as Platform.DevToolsPath.UrlString;
+const REPORT_URL = 'https://crbug.com/508304827' as Platform.DevToolsPath.UrlString;
 const SCROLL_ROUNDING_OFFSET = 1;
 const MAX_NUM_LINES_IN_CODEBLOCK = 11;
 
@@ -227,6 +227,14 @@ const UIStringsNotTranslate = {
    * @description Accessible label for the reveal button in the bottom up thread activity widget.
    */
   revealBottomUpTree: 'Reveal bottom-up thread activity',
+  /**
+   * @description Accessible label for the reveal button in the network dependency tree widget.
+   */
+  revealNetworkDependencyTree: 'Reveal network dependency tree',
+  /**
+   * @description Accessible label for the reveal button in the 3rd parties widget.
+   */
+  revealThirdParties: 'Reveal 3rd parties',
   /**
    * @description Title for the core web vitals widget.
    */
@@ -247,6 +255,14 @@ const UIStringsNotTranslate = {
    * @description Title for the render-blocking requests widget.
    */
   renderBlockingBreakdown: 'Render-blocking requests',
+  /**
+   * @description Title for the network dependency tree widget.
+   */
+  networkDependencyTree: 'Network dependency tree',
+  /**
+   * @description Title for the 3rd parties widget.
+   */
+  thirdParties: '3rd parties',
   /**
    * @description Title for the LCP element widget.
    */
@@ -263,6 +279,110 @@ const UIStringsNotTranslate = {
    * @description Title for the bottom up thread activity widget.
    */
   bottomUpTree: 'Bottom-up thread activity',
+  /**
+   * @description Accessible label for the reveal button in the forced reflow widget.
+   */
+  revealForcedReflow: 'Reveal forced reflow',
+  /**
+   * @description Title for the forced reflow widget.
+   */
+  forcedReflow: 'Forced reflow',
+  /**
+   * @description Accessible label for the reveal button in the cache widget.
+   */
+  revealCache: 'Reveal efficient cache lifetimes',
+  /**
+   * @description Title for the cache widget.
+   */
+  cache: 'Efficient cache lifetimes',
+  /**
+   * @description Accessible label for the reveal button in the INP breakdown widget.
+   */
+  revealInpBreakdown: 'Reveal INP breakdown',
+  /**
+   * @description Title for the INP breakdown widget.
+   */
+  inpBreakdown: 'INP breakdown',
+  /**
+   * @description Accessible label for the reveal button in the document latency widget.
+   */
+  revealDocumentLatency: 'Reveal document latency',
+  /**
+   * @description Title for the document latency widget.
+   */
+  documentLatency: 'Document latency',
+  /**
+   * @description Accessible label for the reveal button in the DOM size widget.
+   */
+  revealDomSize: 'Reveal DOM size',
+  /**
+   * @description Title for the DOM size widget.
+   */
+  domSize: 'DOM size',
+  /**
+   * @description Accessible label for the reveal button in the duplicated JavaScript widget.
+   */
+  revealDuplicateJavaScript: 'Reveal duplicated JavaScript',
+  /**
+   * @description Title for the duplicated JavaScript widget.
+   */
+  duplicateJavaScript: 'Duplicated JavaScript',
+  /**
+   * @description Accessible label for the reveal button in the image delivery widget.
+   */
+  revealImageDelivery: 'Reveal image delivery',
+  /**
+   * @description Title for the image delivery widget.
+   */
+  imageDelivery: 'Image delivery',
+  /**
+   * @description Accessible label for the reveal button in the font display widget.
+   */
+  revealFontDisplay: 'Reveal font display',
+  /**
+   * @description Title for the font display widget.
+   */
+  fontDisplay: 'Font display',
+  /**
+   * @description Accessible label for the reveal button in the slow CSS selectors widget.
+   */
+  revealSlowCssSelector: 'Reveal slow CSS selectors',
+  /**
+   * @description Title for the slow CSS selectors widget.
+   */
+  slowCssSelector: 'Slow CSS selectors',
+  /**
+   * @description Accessible label for the reveal button in the legacy JavaScript widget.
+   */
+  revealLegacyJavaScript: 'Reveal legacy JavaScript',
+  /**
+   * @description Title for the legacy JavaScript widget.
+   */
+  legacyJavaScript: 'Legacy JavaScript',
+  /**
+   * @description Accessible label for the reveal button in the viewport optimization widget.
+   */
+  revealViewport: 'Reveal viewport optimization',
+  /**
+   * @description Title for the viewport optimization widget.
+   */
+  viewport: 'Viewport optimization',
+  /**
+   * @description Accessible label for the reveal button in the modern HTTP usage widget.
+   */
+  revealModernHttp: 'Reveal modern HTTP usage',
+  /**
+   * @description Title for the modern HTTP usage widget.
+   */
+  modernHttp: 'Modern HTTP usage',
+  /**
+   * @description Accessible label for the reveal button in the character set declaration widget.
+   */
+  revealCharacterSet: 'Reveal character set declaration',
+  /**
+   * @description Title for the character set declaration widget.
+   */
+  characterSet: 'Character set declaration',
 } as const;
 
 export interface Step {
@@ -941,8 +1061,7 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
 }
 
 const INSIGHT_METADATA: Record<string, {
-  component: typeof TimelineInsights.LCPBreakdown.LCPBreakdown | typeof TimelineInsights.RenderBlocking.RenderBlocking |
-      typeof TimelineInsights.LCPDiscovery.LCPDiscovery | typeof TimelineInsights.CLSCulprits.CLSCulprits,
+  component: new () => BaseInsightComponent<Trace.Insights.Types.InsightModel>,
   accessibleLabel: string,
   title: string,
   jslog: string,
@@ -971,6 +1090,96 @@ const INSIGHT_METADATA: Record<string, {
     title: UIStringsNotTranslate.clsCulprits,
     jslog: 'cls-culprits-widget',
   },
+  [Trace.Insights.Types.InsightKeys.NETWORK_DEPENDENCY_TREE]: {
+    component: TimelineInsights.NetworkDependencyTree.NetworkDependencyTree,
+    accessibleLabel: UIStringsNotTranslate.revealNetworkDependencyTree,
+    title: UIStringsNotTranslate.networkDependencyTree,
+    jslog: 'network-dependency-tree-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.THIRD_PARTIES]: {
+    component: TimelineInsights.ThirdParties.ThirdParties,
+    accessibleLabel: UIStringsNotTranslate.revealThirdParties,
+    title: UIStringsNotTranslate.thirdParties,
+    jslog: 'third-parties-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.FORCED_REFLOW]: {
+    component: TimelineInsights.ForcedReflow.ForcedReflow,
+    accessibleLabel: UIStringsNotTranslate.revealForcedReflow,
+    title: UIStringsNotTranslate.forcedReflow,
+    jslog: 'forced-reflow-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.CACHE]: {
+    component: TimelineInsights.Cache.Cache,
+    accessibleLabel: UIStringsNotTranslate.revealCache,
+    title: UIStringsNotTranslate.cache,
+    jslog: 'cache-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.INP_BREAKDOWN]: {
+    component: TimelineInsights.INPBreakdown.INPBreakdown,
+    accessibleLabel: UIStringsNotTranslate.revealInpBreakdown,
+    title: UIStringsNotTranslate.inpBreakdown,
+    jslog: 'inp-breakdown-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.DOCUMENT_LATENCY]: {
+    component: TimelineInsights.DocumentLatency.DocumentLatency,
+    accessibleLabel: UIStringsNotTranslate.revealDocumentLatency,
+    title: UIStringsNotTranslate.documentLatency,
+    jslog: 'document-latency-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.DOM_SIZE]: {
+    component: TimelineInsights.DOMSize.DOMSize,
+    accessibleLabel: UIStringsNotTranslate.revealDomSize,
+    title: UIStringsNotTranslate.domSize,
+    jslog: 'dom-size-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.DUPLICATE_JAVASCRIPT]: {
+    component: TimelineInsights.DuplicatedJavaScript.DuplicatedJavaScript,
+    accessibleLabel: UIStringsNotTranslate.revealDuplicateJavaScript,
+    title: UIStringsNotTranslate.duplicateJavaScript,
+    jslog: 'duplicate-javascript-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.IMAGE_DELIVERY]: {
+    component: TimelineInsights.ImageDelivery.ImageDelivery,
+    accessibleLabel: UIStringsNotTranslate.revealImageDelivery,
+    title: UIStringsNotTranslate.imageDelivery,
+    jslog: 'image-delivery-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.FONT_DISPLAY]: {
+    component: TimelineInsights.FontDisplay.FontDisplay,
+    accessibleLabel: UIStringsNotTranslate.revealFontDisplay,
+    title: UIStringsNotTranslate.fontDisplay,
+    jslog: 'font-display-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.SLOW_CSS_SELECTOR]: {
+    component: TimelineInsights.SlowCSSSelector.SlowCSSSelector,
+    accessibleLabel: UIStringsNotTranslate.revealSlowCssSelector,
+    title: UIStringsNotTranslate.slowCssSelector,
+    jslog: 'slow-css-selector-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.LEGACY_JAVASCRIPT]: {
+    component: TimelineInsights.LegacyJavaScript.LegacyJavaScript,
+    accessibleLabel: UIStringsNotTranslate.revealLegacyJavaScript,
+    title: UIStringsNotTranslate.legacyJavaScript,
+    jslog: 'legacy-javascript-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.VIEWPORT]: {
+    component: TimelineInsights.Viewport.Viewport,
+    accessibleLabel: UIStringsNotTranslate.revealViewport,
+    title: UIStringsNotTranslate.viewport,
+    jslog: 'viewport-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.MODERN_HTTP]: {
+    component: TimelineInsights.ModernHTTP.ModernHTTP,
+    accessibleLabel: UIStringsNotTranslate.revealModernHttp,
+    title: UIStringsNotTranslate.modernHttp,
+    jslog: 'modern-http-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.CHARACTER_SET]: {
+    component: TimelineInsights.CharacterSet.CharacterSet,
+    accessibleLabel: UIStringsNotTranslate.revealCharacterSet,
+    title: UIStringsNotTranslate.characterSet,
+    jslog: 'character-set-widget',
+  },
 };
 
 function renderInsightWidget<T extends Trace.Insights.Types.InsightModel>(

package/front_end/panels/console/ConsoleView.ts

@@ -265,6 +265,16 @@ const UIStrings = {
    * @example {5} PH1
    */
   filteredMessagesInConsole: '{PH1} messages in console',
+  /**
+   * @description Tooltip for the collapse all button in the Console panel toolbar.
+   * Clicking this button will collapse all groups and stack traces.
+   */
+  collapseAll: 'Collapse all',
+  /**
+   * @description Tooltip for the expand all button in the Console panel toolbar.
+   * Clicking this button will expand all groups and stack traces.
+   */
+  expandAll: 'Expand all',
 
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsoleView.ts', UIStrings);
@@ -337,6 +347,8 @@ export class ConsoleView extends UI.Widget.VBox implements
   private issueResolver = new IssuesManager.IssueResolver.IssueResolver();
   #isDetached = false;
   #onIssuesCountUpdateBound = this.#onIssuesCountUpdate.bind(this);
+  #collapseAllButton: UI.Toolbar.ToolbarButton;
+  #allCollapsed = false;
   aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
   private aiCodeCompletionSummaryToolbarContainer?: HTMLElement;
   private aiCodeCompletionSummaryToolbar?: AiCodeCompletionSummaryToolbar;
@@ -428,6 +440,10 @@ export class ConsoleView extends UI.Widget.VBox implements
         i18nString(UIStrings.showConsoleSidebar), i18nString(UIStrings.hideConsoleSidebar),
         i18nString(UIStrings.consoleSidebarShown), i18nString(UIStrings.consoleSidebarHidden), 'console-sidebar'));
     toolbar.appendToolbarItem(UI.Toolbar.Toolbar.createActionButton('console.clear'));
+    this.#collapseAllButton =
+        new UI.Toolbar.ToolbarButton(i18nString(UIStrings.collapseAll), 'compress', undefined, 'console.collapse-all');
+    this.#collapseAllButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.#toggleCollapseAll, this);
+    toolbar.appendToolbarItem(this.#collapseAllButton);
     toolbar.appendSeparator();
     toolbar.appendToolbarItem(this.consoleContextSelector.toolbarItem());
     toolbar.appendSeparator();
@@ -684,6 +700,62 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.prompt.clearAiCodeCompletionCache();
   }
 
+  collapseAll(): void {
+    for (const message of this.consoleMessages) {
+      if (message instanceof ConsoleGroupViewMessage) {
+        message.setCollapsedSilent(true);
+      }
+      message.setTraceExpanded(false);
+    }
+    this.updateMessageList();
+  }
+
+  expandAll(): void {
+    for (const message of this.consoleMessages) {
+      if (message instanceof ConsoleGroupViewMessage) {
+        message.setCollapsedSilent(false);
+      }
+      message.setTraceExpanded(true);
+    }
+    this.updateMessageList();
+  }
+
+  #toggleCollapseAll(): void {
+    if (this.#allCollapsed) {
+      this.expandAll();
+    } else {
+      this.collapseAll();
+    }
+    this.#allCollapsed = !this.#allCollapsed;
+    this.#updateCollapseAllButton();
+  }
+
+  #updateCollapseAllButton(): void {
+    let hasExpandedMessages = false;
+    let hasCollapsedMessages = false;
+    for (const message of this.visibleViewMessages) {
+      if (message instanceof ConsoleGroupViewMessage) {
+        hasExpandedMessages = hasExpandedMessages || !message.collapsed();
+        hasCollapsedMessages = hasCollapsedMessages || message.collapsed();
+      }
+      if (message.isExpandableTrace()) {
+        hasExpandedMessages = hasExpandedMessages || message.isTraceExpanded();
+        hasCollapsedMessages = hasCollapsedMessages || !message.isTraceExpanded();
+      }
+      if (hasExpandedMessages && hasCollapsedMessages) {
+        break;
+      }
+    }
+    this.#allCollapsed = !hasExpandedMessages && hasCollapsedMessages;
+    if (this.#allCollapsed) {
+      this.#collapseAllButton.setGlyph('expand');
+      this.#collapseAllButton.setTitle(i18nString(UIStrings.expandAll));
+    } else {
+      this.#collapseAllButton.setGlyph('compress');
+      this.#collapseAllButton.setTitle(i18nString(UIStrings.collapseAll));
+    }
+  }
+
   #onIssuesCountUpdate(): void {
     void this.issueToolbarThrottle.schedule(async () => this.updateIssuesToolbarItem());
     this.issuesCountUpdatedForTest();
@@ -1121,11 +1193,13 @@ export class ConsoleView extends UI.Widget.VBox implements
       }
       const parentGroup = currentGroup.consoleGroup();
       if (parentGroup) {
+        // If the parent group has its messages hidden, don't show this group.
+        if (parentGroup.messagesHidden()) {
+          return;
+        }
         showGroup(parentGroup, visibleViewMessages);
       }
-      if (!parentGroup?.messagesHidden()) {
-        visibleViewMessages.push(currentGroup);
-      }
+      visibleViewMessages.push(currentGroup);
     }
   }
 
@@ -1369,18 +1443,23 @@ export class ConsoleView extends UI.Widget.VBox implements
       for (const consoleMessage of this.consoleMessages) {
         consoleMessage.setInSimilarGroup(false);
         if (consoleMessage.consoleMessage().isGroupable()) {
-          // Since grouping similar messages is disabled, we need clear the
-          // reference to the artificial console group start.
-          consoleMessage.clearConsoleGroup();
+          // Since grouping similar messages is disabled, we need to clear the
+          // reference to the artificial console group start, but preserve
+          // references to real console groups (console.group()/console.groupCollapsed()).
+          const group = consoleMessage.consoleGroup();
+          if (group && !this.consoleGroupStarts.includes(group)) {
+            consoleMessage.clearConsoleGroup();
+          }
         }
         this.appendMessageToEnd(
             consoleMessage,
-            true /* crbug.com/1082963: prevent collaps`e of same messages when "Group similar" is false */);
+            true /* crbug.com/1082963: prevent collapse of same messages when "Group similar" is false */);
       }
     }
     this.updateFilterStatus();
     this.#searchableView.updateSearchMatchesCount(this.regexMatchRanges.length);
     this.highlightMatch(this.currentMatchRangeIndex, false);  // Re-highlight current match without scrolling.
+    this.#updateCollapseAllButton();
     this.viewport.invalidate();
     this.messagesCountElement.setAttribute(
         'aria-label', i18nString(UIStrings.filteredMessagesInConsole, {PH1: this.visibleViewMessages.length}));

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -299,6 +299,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   protected messageIcon: Icon|null;
   private traceExpanded: boolean;
   private expandTrace: ((arg0: boolean) => void)|null;
+  private hasStackTrace: boolean;
   protected anchorElement: HTMLElement|null;
   protected contentElementInternal: HTMLElement|null;
   private nestingLevelMarkers: HTMLElement[]|null;
@@ -340,6 +341,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.messageIcon = null;
     this.traceExpanded = false;
     this.expandTrace = null;
+    this.hasStackTrace = false;
     this.anchorElement = null;
     this.contentElementInternal = null;
     this.nestingLevelMarkers = null;
@@ -653,6 +655,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       this.expandTrace(true);
     }
 
+    this.hasStackTrace = true;
+
     // @ts-expect-error
     toggleElement._expandStackTraceForTest = this.expandTrace.bind(this, true);
     return toggleElement;
@@ -1200,6 +1204,20 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return this.consoleGroupInternal;
   }
 
+  isTraceExpanded(): boolean {
+    return this.traceExpanded;
+  }
+
+  isExpandableTrace(): boolean {
+    return this.hasStackTrace;
+  }
+
+  setTraceExpanded(expanded: boolean): void {
+    if (this.expandTrace && this.traceExpanded !== expanded) {
+      this.expandTrace(expanded);
+    }
+  }
+
   setInSimilarGroup(inSimilarGroup: boolean, isLast?: boolean): void {
     this.inSimilarGroup = inSimilarGroup;
     this.lastInSimilarGroup = inSimilarGroup && Boolean(isLast);
@@ -2161,11 +2179,15 @@ export class ConsoleGroupViewMessage extends ConsoleViewMessage {
   }
 
   setCollapsed(collapsed: boolean): void {
+    this.setCollapsedSilent(collapsed);
+    this.onToggle.call(null);
+  }
+
+  setCollapsedSilent(collapsed: boolean): void {
     this.collapsedInternal = collapsed;
     if (this.expandGroupIcon) {
       this.expandGroupIcon.name = this.collapsedInternal ? 'triangle-right' : 'triangle-down';
     }
-    this.onToggle.call(null);
   }
 
   collapsed(): boolean {

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -907,8 +907,7 @@ export class StylePropertiesSection {
       return;
     }
     const sourceTreeElement = this.closestPropertyForEditing(this.#activeAiSuggestion.cssProperty.index);
-    if (!(sourceTreeElement instanceof StylePropertyTreeElement) ||
-        sourceTreeElement.property !== this.#activeAiSuggestion.cssProperty) {
+    if (!(sourceTreeElement instanceof StylePropertyTreeElement)) {
       return;
     }
     return sourceTreeElement;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -3515,7 +3515,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     if (this.prompt) {
       this.prompt.detach();
       this.prompt = null;
-      this.#clearGhostTextInValue();
+      this.section().activeAiSuggestion = undefined;
     }
   }
 

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -55,9 +55,13 @@ export class StylesAiCodeCompletionProvider {
       // early return as this means that code completion was previously setup
       return;
     }
+    // Adding '}' as a stop sequence so that suggestion is limited to properties for a given style section
+    const stopSequences = ['}'];
+    if (this.#aiCodeCompletionConfig.completionContext.stopSequences) {
+      stopSequences.push(...this.#aiCodeCompletionConfig.completionContext.stopSequences);
+    }
     this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-        {aidaClient: this.#aidaClient}, this.#aiCodeCompletionConfig.panel, undefined,
-        this.#aiCodeCompletionConfig.completionContext.stopSequences);
+        {aidaClient: this.#aidaClient}, this.#aiCodeCompletionConfig.panel, undefined, stopSequences);
     this.#aiCodeCompletionConfig.onFeatureEnabled();
   }
 

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1918,14 +1918,18 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
           return;
         }
         break;
-      case 'Enter':
+      case 'Enter': {
         if (keyboardEvent.shiftKey) {
           return;
         }
         // Accept any available autocompletions and advance to the next field.
-        this.tabKeyPressed();
+        const handled = this.tabKeyPressed();
+        if (this.aiCodeCompletionProvider && handled) {
+          event.consume(true);
+        }
         keyboardEvent.preventDefault();
         return;
+      }
       case 'Escape':
         if (this.#handleEscape(keyboardEvent)) {
           return;
@@ -2264,9 +2268,18 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
     if (!this.queryRange) {
       this.queryRange = new TextUtils.TextRange.TextRange(0, 0, 0, this.text().length);
     }
+
+    const properties = this.#getAiSuggestedProperties(args.text);
+    if (properties.length === 0) {
+      this.treeElement.section().activeAiSuggestion = undefined;
+      this.activeAiSuggestionInfo = undefined;
+      return;
+    }
+
+    const styleText = properties.map(p => `${p.name}: ${p.value};`).join(' ');
     this.treeElement.section().activeAiSuggestion = {
-      text: args.text,
-      properties: this.#getAiSuggestedProperties(args.text),
+      text: styleText,
+      properties,
       cursorPosition: args.from,
       clearCachedRequest: args.clearCachedRequest,
       cssProperty: this.treeElement.property,

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -16,7 +16,6 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 
-import * as EmulationComponents from './components/components.js';
 const UIStrings = {
   /**
    * @description Title of the device dimensions selection item in the Device Mode Toolbar.
@@ -219,8 +218,8 @@ export class DeviceModeToolbar {
   private spanButton!: Buttons.Button.Button;
   private postureItem!: HTMLSelectElement;
   private modeButton!: Buttons.Button.Button;
-  private widthInput: EmulationComponents.DeviceSizeInputElement.SizeInputElement;
-  private heightInput: EmulationComponents.DeviceSizeInputElement.SizeInputElement;
+  private widthInput: HTMLInputElement;
+  private heightInput: HTMLInputElement;
   private deviceScaleItem!: HTMLSelectElement;
   private deviceScaleItems: HTMLElement[] = [];
   private deviceSelectItem!: HTMLSelectElement;
@@ -255,10 +254,9 @@ export class DeviceModeToolbar {
         Common.Settings.Settings.instance().createSetting('emulation.auto-adjust-scale', true);
 
     this.lastMode = new Map();
-    this.widthInput = new EmulationComponents.DeviceSizeInputElement.SizeInputElement(
-        i18nString(UIStrings.width), {jslogContext: 'width'});
-    this.heightInput = new EmulationComponents.DeviceSizeInputElement.SizeInputElement(
-        i18nString(UIStrings.heightLeaveEmptyForFull), {jslogContext: 'height'});
+
+    this.widthInput = this.createSizeInput(i18nString(UIStrings.width), 'width');
+    this.heightInput = this.createSizeInput(i18nString(UIStrings.heightLeaveEmptyForFull), 'height');
 
     this.#element = document.createElement('div');
     this.#element.classList.add('device-mode-toolbar');
@@ -306,6 +304,30 @@ export class DeviceModeToolbar {
     return element;
   }
 
+  private createSizeInput(title: string, jslogContext: string): HTMLInputElement {
+    const input = document.createElement('input');
+    input.type = 'number';
+    input.max = String(EmulationModel.DeviceModeModel.MaxDeviceSize);
+    input.min = String(EmulationModel.DeviceModeModel.MinDeviceSize);
+    input.title = title;
+    input.classList.add('device-mode-size-input');
+    input.setAttribute('jslog', `${VisualLogging.textField().track({change: true}).context(jslogContext)}`);
+
+    input.addEventListener('keydown', (event: Event) => {
+      let modifiedValue = UI.UIUtils.modifiedFloatNumber(Number(input.value), event);
+      if (modifiedValue === null) {
+        return;
+      }
+      modifiedValue = Math.min(modifiedValue, EmulationModel.DeviceModeModel.MaxDeviceSize);
+      modifiedValue = Math.max(modifiedValue, EmulationModel.DeviceModeModel.MinDeviceSize);
+
+      event.preventDefault();
+      input.value = String(modifiedValue);
+      input.dispatchEvent(new Event('change'));
+    });
+    return input;
+  }
+
   private createMainToolbar(): UI.Toolbar.Toolbar {
     const mainToolbar = this.#element.createChild('devtools-toolbar', 'main-toolbar');
 
@@ -320,14 +342,16 @@ export class DeviceModeToolbar {
     mainToolbar.append(...dimensionsSpan.childNodes);
     mainToolbar.append(this.deviceSelectItem);
 
-    this.widthInput.addEventListener('sizechanged', ({size: width}) => {
+    this.widthInput.addEventListener('change', () => {
+      const width = Number(this.widthInput.value);
       if (this.autoAdjustScaleSetting.get()) {
         this.model.setWidthAndScaleToFit(width);
       } else {
         this.model.setWidth(width);
       }
     });
-    this.heightInput.addEventListener('sizechanged', ({size: height}) => {
+    this.heightInput.addEventListener('change', () => {
+      const height = Number(this.heightInput.value);
       if (this.autoAdjustScaleSetting.get()) {
         this.model.setHeightAndScaleToFit(height);
       } else {
@@ -389,8 +413,8 @@ export class DeviceModeToolbar {
     MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.createForGlobalConditions(
         mainToolbar, i18nString(UIStrings.throttling));
     const saveDataItem = MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector();
-    saveDataItem.turnShrinkable();
-    mainToolbar.appendToolbarItem(saveDataItem);
+    saveDataItem.classList.add('dark-text', 'toolbar-has-dropdown-shrinkable');
+    mainToolbar.append(saveDataItem);
 
     mainToolbar.append(this.createEmptyToolbarElement());
     this.modeButton = new Buttons.Button.Button();
@@ -947,8 +971,8 @@ export class DeviceModeToolbar {
     }
 
     const size = this.model.appliedDeviceSize();
-    this.widthInput.size = String(size.width);
-    this.heightInput.size =
+    this.widthInput.value = String(size.width);
+    this.heightInput.value =
         this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive && this.model.isFullHeight() ?
         '' :
         String(size.height);