chrome-devtools-frontend 1.0.1625854 → 1.0.1626437

package/front_end/panels/application/WebMCPView.ts

@@ -191,6 +191,10 @@ const UIStrings = {
    * @description Notice to display when a tool has been unregistered
    */
   toolUnregisteredNotice: 'This tool has been unregistered',
+  /**
+   * @description Text preceding a nested error in a stack trace
+   */
+  causedBy: 'Caused by:',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/WebMCPView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -219,6 +223,11 @@ export interface FilterMenuButtons {
   toolTypes: FilterMenuButton;
   statusTypes: FilterMenuButton;
 }
+export const enum TabId {
+  DETAILS = 'webmcp.tool-details',
+  INPUT = 'webmcp.call-inputs',
+  OUTPUT = 'webmcp.call-outputs',
+}
 export interface SelectedTool {
   tool: WebMCP.WebMCPModel.Tool;
   parameters?: Record<string, unknown>;
@@ -229,7 +238,8 @@ export interface ViewInput {
   onToolSelect: (tool: WebMCP.WebMCPModel.Tool|null) => void;
   onRevealTool: (tool: WebMCP.WebMCPModel.Tool, parameters?: Record<string, unknown>) => void;
   selectedCall: WebMCP.WebMCPModel.Call|null;
-  onCallSelect: (call: WebMCP.WebMCPModel.Call|null) => void;
+  selectedTab?: TabId;
+  onCallSelect: (call: WebMCP.WebMCPModel.Call|null, tabId?: TabId) => void;
   filters: FilterState;
   filterButtons: FilterMenuButtons;
   onClearLogClick: () => void;
@@ -508,7 +518,10 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                             }, {jslogContext: 'webmcp.cancel-call'});
                           }
                         }}>
-                      <td>
+                      <td @click=${(e: Event) => {
+                        e.stopPropagation();
+                        input.onCallSelect(call, TabId.DETAILS);
+                      }}>
                         <div class="name-cell">
                           <span>${call.tool.name}</span>
                           <button class="run-tool-action-button"
@@ -524,7 +537,10 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                           </button>
                         </div>
                       </td>
-                      <td>
+                      <td @click=${(e: Event) => {
+                        e.stopPropagation();
+                        input.onCallSelect(call, TabId.OUTPUT);
+                      }}>
                         <div class="status-cell">
                           ${iconName(call) ? html`<devtools-icon class="small" name=${iconName(call)}></devtools-icon>`
                                            : ''}
@@ -532,8 +548,14 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                         </div>
                       </td>
                       ${!input.selectedCall ? html`
-                        <td>${call.input}</td>
-                        <td>${call.result?.output ? JSON.stringify(call.result.output)
+                        <td @click=${(e: Event) => {
+                          e.stopPropagation();
+                          input.onCallSelect(call, TabId.INPUT);
+                        }}>${call.input}</td>
+                        <td @click=${(e: Event) => {
+                          e.stopPropagation();
+                          input.onCallSelect(call, TabId.OUTPUT);
+                        }}>${call.result?.output ? JSON.stringify(call.result.output)
                                                     : call.result?.errorText ?? ''}</td>
                         ` : nothing}
                     </tr>
@@ -552,17 +574,20 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   @click=${() => input.onCallSelect(null)}
                 ></devtools-button>
                 <devtools-widget
-                  id="webmcp.tool-details"
+                  id=${TabId.DETAILS}
+                  ?selected=${input.selectedTab === TabId.DETAILS}
                   title=${i18nString(UIStrings.toolDetails)}
                   ${widget(ToolDetailsWidget, {tool: input.selectedCall?.tool, isUnregistered: input.selectedCall ? !input.tools.includes(input.selectedCall.tool) : false})}>
                 </devtools-widget>
                 <devtools-widget
-                  id="webmcp.call-inputs"
+                  id=${TabId.INPUT}
+                  ?selected=${input.selectedTab === TabId.INPUT}
                   title=${i18nString(UIStrings.input)}
                   ${widget(PayloadWidget, parsePayload(input.selectedCall?.input))}>
                 </devtools-widget>
                 <devtools-widget
-                  id="webmcp.call-outputs"
+                  id=${TabId.OUTPUT}
+                  ?selected=${input.selectedTab === TabId.OUTPUT}
                   title=${i18nString(UIStrings.output)}
                   ${widget(PayloadWidget, {
                           valueObject: input.selectedCall?.result?.output,
@@ -697,6 +722,8 @@ export class WebMCPView extends UI.Widget.VBox {
   readonly #view: View;
   #selectedTool: SelectedTool|null = null;
   #selectedCall: WebMCP.WebMCPModel.Call|null = null;
+  #selectedTab: TabId|undefined = undefined;
+  #lastDevToolsInvocationId: string|null = null;
 
   #filterState: FilterState = {
     text: '',
@@ -799,17 +826,26 @@ export class WebMCPView extends UI.Widget.VBox {
   #webMCPModelAdded(model: WebMCP.WebMCPModel.WebMCPModel): void {
     model.addEventListener(WebMCP.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
     model.addEventListener(WebMCP.WebMCPModel.Events.TOOLS_REMOVED, this.#toolsRemoved, this);
-    model.addEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.requestUpdate, this);
+    model.addEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.#toolInvoked, this);
     model.addEventListener(WebMCP.WebMCPModel.Events.TOOL_RESPONDED, this.requestUpdate, this);
   }
 
   #webMCPModelRemoved(model: WebMCP.WebMCPModel.WebMCPModel): void {
     model.removeEventListener(WebMCP.WebMCPModel.Events.TOOLS_ADDED, this.requestUpdate, this);
     model.removeEventListener(WebMCP.WebMCPModel.Events.TOOLS_REMOVED, this.#toolsRemoved, this);
-    model.removeEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.requestUpdate, this);
+    model.removeEventListener(WebMCP.WebMCPModel.Events.TOOL_INVOKED, this.#toolInvoked, this);
     model.removeEventListener(WebMCP.WebMCPModel.Events.TOOL_RESPONDED, this.requestUpdate, this);
   }
 
+  #toolInvoked(event: Common.EventTarget.EventTargetEvent<WebMCP.WebMCPModel.Call>): void {
+    const call = event.data;
+    if (call.invocationId === this.#lastDevToolsInvocationId) {
+      this.#selectedCall = call;
+      this.#lastDevToolsInvocationId = null;
+    }
+    this.requestUpdate();
+  }
+
   #toolsRemoved(event: Common.EventTarget.EventTargetEvent<readonly WebMCP.WebMCPModel.Tool[]>): void {
     if (this.#selectedTool && event.data.includes(this.#selectedTool.tool)) {
       this.#selectedTool = null;
@@ -861,8 +897,16 @@ export class WebMCPView extends UI.Widget.VBox {
         this.requestUpdate();
       },
       selectedCall: this.#selectedCall,
-      onCallSelect: call => {
-        this.#selectedCall = call;
+      selectedTab: this.#selectedTab,
+      onCallSelect: (call, tabId) => {
+        if (call === null) {
+          this.#selectedCall = null;
+        } else if (this.#selectedCall === null) {
+          this.#selectedCall = call;
+          this.#selectedTab = tabId;
+        } else {
+          this.#selectedCall = call;
+        }
         this.requestUpdate();
       },
       toolCalls: filteredCalls,
@@ -870,9 +914,20 @@ export class WebMCPView extends UI.Widget.VBox {
       filterButtons: this.#filterButtons,
       onClearLogClick: this.#handleClearLogClick,
       onFilterChange: this.#handleFilterChange,
-      onRunTool: event => {
+      onRunTool: async event => {
         if (this.#selectedTool) {
-          void this.#selectedTool.tool.invoke(event.data.parameters || {});
+          this.#selectedTool.parameters = event.data.parameters || {};
+          this.#lastDevToolsInvocationId = await this.#selectedTool.tool.invoke(this.#selectedTool.parameters) ?? null;
+          if (this.#lastDevToolsInvocationId) {
+            const models = SDK.TargetManager.TargetManager.instance().models(WebMCP.WebMCPModel.WebMCPModel);
+            const call =
+                models.flatMap(model => model.toolCalls).find(c => c.invocationId === this.#lastDevToolsInvocationId);
+            if (call) {
+              this.#selectedCall = call;
+              this.#lastDevToolsInvocationId = null;
+            }
+          }
+          this.requestUpdate();
         }
       },
       onPaste: async () => {
@@ -891,6 +946,7 @@ export class WebMCPView extends UI.Widget.VBox {
       },
     };
     this.#view(input, {}, this.contentElement);
+    this.#selectedTab = undefined;
   }
 }
 export interface PayloadViewInput {
@@ -972,7 +1028,9 @@ export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, ta
       <div class="payload-value source-code error-text">
         ${details.frames.length === 0 && details.description ? html`<span>${details.description}\n</span>` : nothing}
         <div>${details.frames.map(renderFrame)}</div>
-        ${details.cause ? html`\nCaused by:\n${createException(details.cause, linkifier)}` : nothing}</div>`;
+        ${
+        details.cause ? html`\n${i18nString(UIStrings.causedBy)}\n${createException(details.cause, linkifier)}` :
+                        nothing}</div>`;
   };
 
   render(
@@ -1124,7 +1182,7 @@ const TOOL_DETAILS_VIEW = (input: ToolDetailsViewInput, output: undefined, targe
            ></devtools-button>
       </div>` : origin ? html`
       <div class="label">Origin</div>
-      <div class="value">
+      <div class="value stack-trace">
         ${widget(Components.JSPresentationUtils.StackTracePreviewContent,
                  {stackTrace: origin, options: { expandable: true}})}
       </div>` : nothing}

package/front_end/panels/application/webMCPView.css

@@ -88,6 +88,14 @@
     display: flex;
     gap: var(--sys-size-5);
     align-items: center;
+    min-width: 0;
+  }
+
+  .name-cell > span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
   }
 
   .run-tool-action-button {
@@ -141,8 +149,11 @@
       color: var(--sys-color-on-surface);
       overflow-wrap: anywhere;
 
-      &:has(> .stack-preview-container) {
-        padding: var(--sys-size-4) 0;
+      &.stack-trace {
+        display: flex;
+        padding: 0;
+        margin-top: calc(-1 * (var(--sys-size-1) + var(--sys-size-2)));
+        margin-left: calc(-1 * var(--sys-size-3));
       }
 
       &.tool-origin-container {

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -314,6 +314,9 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
   jumpToFontPaletteDefinition(_paletteName: string): void {
   }
 
+  jumpToCounterStyleDefinition(_counterStyleName: string): void {
+  }
+
   jumpToDeclaration(_valueSource: SDK.CSSMatchedStyles.CSSValueSource): void {
   }
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1156,10 +1156,19 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
         return {
           jslogContext: 'css-font-palette',
           metric: null,
-          ruleBlock: '@font-*',
+          ruleBlock: '',  // Not used
           isDefined: Boolean(this.#matchedStyles.atRules().find(
               ar => ar.type() === 'font-palette-values' && ar.name()?.text === match.text)),
         };
+      case SDK.CSSPropertyParserMatchers.LinkableNameProperties.LIST_STYLE:
+      case SDK.CSSPropertyParserMatchers.LinkableNameProperties.LIST_STYLE_TYPE:
+        return {
+          jslogContext: 'css-list-style-type',
+          metric: null,
+          ruleBlock: '',  // Not used
+          isDefined: Boolean(this.#matchedStyles.atRules().find(
+              ar => ar.type() === 'counter-style' && ar.name()?.text === match.text)),
+        };
       case SDK.CSSPropertyParserMatchers.LinkableNameProperties.POSITION_TRY:
       case SDK.CSSPropertyParserMatchers.LinkableNameProperties.POSITION_TRY_FALLBACKS:
         return {
@@ -1182,6 +1191,10 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
         metric && Host.userMetrics.swatchActivated(metric);
         if (match.propertyName === SDK.CSSPropertyParserMatchers.LinkableNameProperties.FONT_PALETTE) {
           this.#stylesContainer.jumpToFontPaletteDefinition(match.text);
+        } else if (
+            match.propertyName === SDK.CSSPropertyParserMatchers.LinkableNameProperties.LIST_STYLE ||
+            match.propertyName === SDK.CSSPropertyParserMatchers.LinkableNameProperties.LIST_STYLE_TYPE) {
+          this.#stylesContainer.jumpToCounterStyleDefinition(match.text);
         } else {
           this.#stylesContainer.jumpToSectionBlock(`${ruleBlock} ${match.text}`);
         }
@@ -3635,6 +3648,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
     this.#clearGhostTextInValue();
+    if (this.value === text) {
+      return;
+    }
     if (this.value) {
       // If there is an existing value, and user is editing the name field
       // which leads to a new value suggestion, then the previous value should no
@@ -3648,7 +3664,24 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   #clearGhostTextInValue(): void {
-    this.listItemElement.querySelector('.ghost-value-prediction')?.remove();
+    const ghostTextElement = this.listItemElement.querySelector('.ghost-value-prediction');
+    if (!ghostTextElement) {
+      return;
+    }
+    ghostTextElement.remove();
+    // If there's no value, there's nothing to restore
+    if (!this.value) {
+      return;
+    }
+    // Restore original classes
+    if (this.property.parsedOk) {
+      this.listItemElement.classList.remove('not-parsed-ok', 'invalid-property-value');
+    } else {
+      const invalidPropertyValue = SDK.CSSMetadata.cssMetadata().isCSSPropertyName(this.property.name);
+      if (!invalidPropertyValue) {
+        this.listItemElement.classList.remove('invalid-property-value');
+      }
+    }
   }
 }
 

package/front_end/panels/elements/StylesContainer.ts

@@ -52,6 +52,7 @@ export interface StylesContainer {
   jumpToProperty(propertyName: string, sectionName?: string, blockName?: string): boolean;
   jumpToSectionBlock(section: string): void;
   jumpToFontPaletteDefinition(paletteName: string): void;
+  jumpToCounterStyleDefinition(counterStyleName: string): void;
   jumpToDeclaration(valueSource: SDK.CSSMatchedStyles.CSSValueSource): void;
   setActiveProperty(treeElement: StylePropertyTreeElement|null): void;
   addStyleUpdateListener(listener: () => void): void;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -140,6 +140,10 @@ const UIStrings = {
    * @example {color: blue;} PH1
    */
   aiSuggestionAccepted: '{PH1} Suggestion accepted.',
+  /**
+   * @description Title of the general at-rule section
+   */
+  atRuleSection: 'Other @rules',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/StylesSidebarPane.ts', UIStrings);
@@ -154,8 +158,6 @@ const MIN_FOLDED_SECTIONS_COUNT = 5;
 export const REGISTERED_PROPERTY_SECTION_NAME = '@property';
 /** Title of the function section **/
 export const FUNCTION_SECTION_NAME = '@function';
-/** Title of the general at-rule section */
-export const AT_RULE_SECTION_NAME = '@font-*';
 
 // Highlightable properties are those that can be hovered in the sidebar to trigger a specific
 // highlighting mode on the current element.
@@ -347,7 +349,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   jumpToFontPaletteDefinition(paletteName: string): void {
-    this.jumpToSection(`@font-palette-values ${paletteName}`, AT_RULE_SECTION_NAME);
+    this.jumpToSection(`@font-palette-values ${paletteName}`, i18nString(UIStrings.atRuleSection));
+  }
+
+  jumpToCounterStyleDefinition(counterStyleName: string): void {
+    this.jumpToSection(`@counter-style ${counterStyleName}`, i18nString(UIStrings.atRuleSection));
   }
 
   forceUpdate(): void {
@@ -1710,7 +1716,7 @@ export class SectionBlock {
     const separatorElement = document.createElement('div');
     const block = new SectionBlock(separatorElement, true, expandedByDefault);
     separatorElement.className = 'sidebar-separator';
-    separatorElement.appendChild(document.createTextNode(AT_RULE_SECTION_NAME));
+    separatorElement.appendChild(document.createTextNode(i18nString(UIStrings.atRuleSection)));
     return block;
   }
 

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -248,6 +248,10 @@ export class DeviceModeToolbar {
         'emulation.device-mode-value', {device: '', orientation: '', mode: ''});
 
     this.model.toolbarControlsEnabledSetting().addChangeListener(this.update, this);
+    this.model.scaleSetting().addChangeListener(this.update, this);
+    this.model.uaSetting().addChangeListener(this.update, this);
+    this.model.deviceScaleFactorSetting().addChangeListener(this.update, this);
+    this.model.addEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.update, this);
 
     this.update();
   }
@@ -449,11 +453,11 @@ export class DeviceModeToolbar {
 
       <div class="device-mode-empty-toolbar-element"></div>
       <devtools-button class="toolbar-button"
-                       .data=${{variant: Buttons.Button.Variant.TOOLBAR, iconName: 'screen-rotation'} as Buttons.Button.ButtonData}
+                       .data=${{variant: Buttons.Button.Variant.TOOLBAR, iconName: 'screen-rotation',
+                                disabled: modeButtonDisabled} as Buttons.Button.ButtonData}
                        jslog=${VisualLogging.action('screen-rotation').track({click: true})}
                        @click=${this.modeMenuClicked.bind(this)}
-                       .title=${modeButtonTitle}
-                       .disabled=${modeButtonDisabled}>
+                       .title=${modeButtonTitle}>
       </devtools-button>
 
       <!-- Show dual screen toolbar -->

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -104,6 +104,10 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     return scopeChainSidebarPaneInstance;
   }
 
+  treeOutlineForTest(): ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline {
+    return this.treeOutline;
+  }
+
   flavorChanged(callFrame: StackTrace.StackTrace.DebuggableFrameFlavor|null): void {
     this.#scopeChainModel?.dispose();
     this.#scopeChainModel = null;
@@ -210,6 +214,6 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     return section;
   }
 
-  private sidebarPaneUpdatedForTest(): void {
+  sidebarPaneUpdatedForTest(): void {
   }
 }