chrome-devtools-frontend 1.0.1595090 → 1.0.1596260

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

@@ -11,6 +11,7 @@ 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 type * as Protocol from '../../../generated/protocol.js';
 import type {AiWidget, ComputedStyleAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
@@ -278,6 +279,7 @@ export interface MessageInput {
     isExpanded: boolean,
     onToggle: (isOpen: boolean) => void,
     isInlined: boolean,
+    activeMessage: ModelChatMessage|null,
   };
 }
 
@@ -483,14 +485,18 @@ function renderStepDetails({
 
 function renderWalkthroughSidebarButton(
     input: ChatMessageViewInput,
-    lastStep: Step,
+    steps: Step[],
     ): Lit.LitTemplate {
   const {message, walkthrough} = input;
-  if (walkthrough.isInlined) {
+  const lastStep = steps.at(-1);
+  if (walkthrough.isInlined || !lastStep) {
     return Lit.nothing;
   }
+
+  const hasOneStepWithWidget = steps.some(step => step.widgets?.length);
   const title = walkthroughTitle({
     isLoading: input.isLoading,
+    hasWidgets: hasOneStepWithWidget,
     lastStep,
   });
 
@@ -505,7 +511,7 @@ function renderWalkthroughSidebarButton(
         .jslogContext=${walkthrough.isExpanded ? 'ai-hide-walkthrough-sidebar' : 'ai-show-walkthrough-sidebar'}
         data-show-walkthrough
         @click=${() => {
-          if(walkthrough.isExpanded) {
+          if(walkthrough.activeMessage === input.message && walkthrough.isExpanded) {
             walkthrough.onToggle(false);
           } else {
             // Can't just toggle the visibility here; we need to ensure we
@@ -535,7 +541,7 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
   // If the walkthrough is in the sidebar, we render a button into the
   // ChatView to open it.
   const openWalkThroughSidebarButton =
-      !input.walkthrough.isInlined ? renderWalkthroughSidebarButton(input, lastStep) : Lit.nothing;
+      !input.walkthrough.isInlined ? renderWalkthroughSidebarButton(input, steps) : Lit.nothing;
 
   // If there are side-effect steps, and the walkthrough is not open, we render
   // those inline so that the user can see them and approve them.
@@ -554,6 +560,9 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
 
   // If the walkthrough is inlined (narrow width screens), render it here.
   // Note that we force it open if there is a side-effect.
+
+  const isExpanded = (input.walkthrough.isExpanded && input.walkthrough.activeMessage === input.message) ||
+      steps.some(s => s.requestApproval);
   // clang-format off
   const walkthroughInline = input.walkthrough.isInlined ? html`
     <div class="walkthrough-container">
@@ -562,9 +571,9 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
         isLoading: input.isLoading && input.isLastMessage,
         markdownRenderer: input.markdownRenderer,
         isInlined: true,
-        isExpanded: input.isLastMessage &&
-            (input.walkthrough.isExpanded || steps.some(step => Boolean(step.requestApproval))),
+        isExpanded,
         onToggle: input.walkthrough.onToggle,
+        onOpen: input.walkthrough.onOpen,
       })}></devtools-widget>
     </div>
   ` : Lit.nothing;
@@ -649,37 +658,42 @@ interface WidgetMakerResponse {
   revealable: unknown;
 }
 
+const computedStyleNodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
+
 async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promise<WidgetMakerResponse|null> {
-  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-  if (!target) {
-    return null;
-  }
-  const node = new SDK.DOMModel.DeferredDOMNode(
-      target,
-      widgetData.data.backendNodeId,
-  );
-  const resolved = await node.resolvePromise();
-  if (!resolved) {
-    return null;
+  let domNodeForId = computedStyleNodeCache.get(widgetData.data.backendNodeId);
+  if (!domNodeForId) {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (!target) {
+      return null;
+    }
+    const node = new SDK.DOMModel.DeferredDOMNode(
+        target,
+        widgetData.data.backendNodeId,
+    );
+    const resolved = await node.resolvePromise();
+    if (!resolved) {
+      return null;
+    }
+    domNodeForId = resolved;
+    computedStyleNodeCache.set(widgetData.data.backendNodeId, resolved);
   }
-  const model = new ComputedStyle.ComputedStyleModel.ComputedStyleModel(resolved);
-  const styles = new ComputedStyle.ComputedStyleModel.ComputedStyle(resolved, widgetData.data.computedStyles);
+  const styles = new ComputedStyle.ComputedStyleModel.ComputedStyle(domNodeForId, widgetData.data.computedStyles);
 
   const widgetConfig = UI.Widget.widgetConfig(Elements.ComputedStyleWidget.ComputedStyleWidget, {
     nodeStyle: styles,
     matchedStyles: widgetData.data.matchedCascade,
     // This disables showing the nested traces and detailed information in the widget.
     propertyTraces: null,
-    computedStyleModel: model,
     allowUserControl: false,
     filterText: new RegExp(widgetData.data.properties.join('|'), 'i')
   });
 
   // clang-format off
-    const widget = html`<devtools-widget class="computed-styles-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
+  const widget = html`<devtools-widget class="computed-styles-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
   // clang-format on
 
-  return {renderedWidget: widget, revealable: new Elements.ElementsPanel.NodeComputedStyles(resolved)};
+  return {renderedWidget: widget, revealable: new Elements.ElementsPanel.NodeComputedStyles(domNodeForId)};
 }
 
 function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTemplate {
@@ -696,15 +710,17 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
 
   // clang-format off
   return html`
-    <div class="widget-content-container">
-      ${response.renderedWidget}
-    </div>
-    <div class="widget-reveal-container">
-      <devtools-button class="widget-reveal"
-        .iconName=${'tab-move'}
-        .variant=${Buttons.Button.Variant.TEXT}
-        @click=${onReveal}
-      >${lockedString(UIStringsNotTranslate.reveal)}</devtools-button>
+    <div class="widget-and-revealer-container">
+      <div class="widget-content-container">
+        ${response.renderedWidget}
+      </div>
+      <div class="widget-reveal-container">
+        <devtools-button class="widget-reveal"
+          .iconName=${'tab-move'}
+          .variant=${Buttons.Button.Variant.TEXT}
+          @click=${onReveal}
+        >${lockedString(UIStringsNotTranslate.reveal)}</devtools-button>
+      </div>
     </div>
     `;
   // clang-format on
@@ -994,6 +1010,7 @@ export class ChatMessage extends UI.Widget.Widget {
     onToggle: () => {},
     isInlined: false,
     isExpanded: false,
+    activeMessage: null,
   };
 
   #suggestionsResizeObserver = new ResizeObserver(() => this.#handleSuggestionsScrollOrResize());

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

@@ -27,9 +27,13 @@ const UIStrings = {
    */
   title: 'Investigation steps',
   /**
-   * @description Title for the button that shows the thinking process (walkthrough).
+   * @description Title for the button that shows the walkthrough when there are no widgets in the walkthrough.
    */
   showThinking: 'Show thinking',
+  /**
+   * @description Title for the button that shows the walkthrough when there are widgets in the walkthrough.
+   */
+  showAgentWalkthrough: 'Show agent walkthrough',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/components/WalkthroughView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -41,14 +45,21 @@ export interface ViewInput {
   isInlined: boolean;
   isExpanded: boolean;
   onToggle: (isOpen: boolean) => void;
+  onOpen: (message: ModelChatMessage) => void;
 }
 
 export function walkthroughTitle(input: {
   isLoading: boolean,
+  hasWidgets: boolean,
   lastStep: Step,
 }): string {
-  const title = input.isLoading ? titleForStep(input.lastStep) : lockedString(UIStrings.showThinking);
-  return title;
+  if (input.isLoading) {
+    return titleForStep(input.lastStep);
+  }
+  if (input.hasWidgets) {
+    return lockedString(UIStrings.showAgentWalkthrough);
+  }
+  return lockedString(UIStrings.showThinking);
 }
 
 function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate, steps: Step[]): Lit.LitTemplate {
@@ -61,12 +72,14 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
     input.onToggle((event.target as HTMLDetailsElement).open);
   }
 
+  const hasWidgets = steps.some(s => s.widgets?.length);
+
   // clang-format off
   return html`
     <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
       <summary>
         ${input.isLoading ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
-        ${walkthroughTitle({isLoading: input.isLoading, lastStep,})}
+        ${walkthroughTitle({isLoading: input.isLoading, lastStep, hasWidgets})}
         <devtools-icon name="chevron-down"></devtools-icon>
       </summary>
       ${stepsOutput}
@@ -117,13 +130,16 @@ export const DEFAULT_VIEW = (
   const stepsOutput = steps.length > 0 ? html`
     <div class="steps-container">
       ${steps.map((step, index) => html`
-        <div class="step-wrapper">
-          ${renderStep({
-            step,
-            isLoading: input.isLoading,
-            markdownRenderer: input.markdownRenderer,
-            isLast: index === steps.length - 1
-          })}
+        <div class="walkthrough-step">
+          <span class="step-number">${index+1}</span>
+          <div class="step-wrapper">
+            ${renderStep({
+              step,
+              isLoading: input.isLoading,
+              markdownRenderer: input.markdownRenderer,
+              isLast: index === steps.length - 1
+            })}
+          </div>
         </div>
       `)}
     </div>
@@ -152,6 +168,7 @@ export class WalkthroughView extends UI.Widget.Widget {
   #isLoading = false;
   #markdownRenderer: MarkdownLitRenderer|null = null;
   #onToggle: (isOpen: boolean) => void = () => {};
+  #onOpen: (message: ModelChatMessage) => void = () => {};
   #isInlined = false;
   #isExpanded = false;
 
@@ -182,6 +199,15 @@ export class WalkthroughView extends UI.Widget.Widget {
     return this.#message;
   }
 
+  get onOpen(): (message: ModelChatMessage) => void {
+    return this.#onOpen;
+  }
+
+  set onOpen(onOpen: (message: ModelChatMessage) => void) {
+    this.#onOpen = onOpen;
+    this.requestUpdate();
+  }
+
   set message(message: ModelChatMessage|null) {
     this.#message = message;
     this.requestUpdate();
@@ -211,6 +237,7 @@ export class WalkthroughView extends UI.Widget.Widget {
           isLoading: this.#isLoading,
           markdownRenderer: this.#markdownRenderer,
           onToggle: this.#onToggle,
+          onOpen: this.#onOpen,
           isInlined: this.#isInlined,
           isExpanded: this.#isExpanded,
           message: this.#message,

package/front_end/panels/ai_assistance/components/chatMessage.css

@@ -364,10 +364,13 @@
 
   .step-widgets-wrapper {
     width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--sys-size-5);
   }
 
   .widget-reveal-container {
-    width: 100%;
     background: var(--sys-color-surface5);
     border-bottom-right-radius: var(--sys-shape-corner-medium);
     border-bottom-left-radius: var(--sys-shape-corner-medium);
@@ -378,7 +381,6 @@
     padding: var(--sys-size-4);
     border-top-left-radius: var(--sys-shape-corner-medium);
     border-top-right-radius: var(--sys-shape-corner-medium);
-    width: 100%;
     overflow-x: auto;
     background-color: var(--sys-color-surface3);
 

package/front_end/panels/ai_assistance/components/walkthroughView.css

@@ -38,6 +38,21 @@
     gap: var(--sys-size-6);
   }
 
+  .walkthrough-step {
+    display: flex;
+    gap: var(--sys-size-6);
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    .step-number {
+      font: var(--sys-typescale-body4-regular);
+      color: var(--sys-color-on-surface-subtle);
+      padding-top:var(--sys-size-4);
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+  }
+
   .step-wrapper {
     display: flex;
     flex-direction: column;

package/front_end/panels/application/IndexedDBModel.ts

@@ -143,8 +143,7 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
     }
 
     for (const [storageBucketName] of this.databaseNamesByStorageKeyAndBucket.get(storageKey) || []) {
-      const storageBucket =
-          this.storageBucketModel?.getBucketByName(storageKey, storageBucketName ?? undefined)?.bucket;
+      const storageBucket = this.storageBucketModel?.getBucketByName(storageKey, storageBucketName)?.bucket;
       if (storageBucket) {
         this.removeStorageBucket(storageBucket);
       }
@@ -169,8 +168,7 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
     for (const [storageKey] of this.databaseNamesByStorageKeyAndBucket) {
       const storageBucketNames = this.databaseNamesByStorageKeyAndBucket.get(storageKey)?.keys() || [];
       for (const storageBucketName of storageBucketNames) {
-        const storageBucket =
-            this.storageBucketModel?.getBucketByName(storageKey, storageBucketName ?? undefined)?.bucket;
+        const storageBucket = this.storageBucketModel?.getBucketByName(storageKey, storageBucketName)?.bucket;
         if (storageBucket) {
           await this.loadDatabaseNamesByStorageBucket(storageBucket);
         }

package/front_end/panels/application/ServiceWorkersView.ts

@@ -10,6 +10,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import {Link} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -227,17 +228,8 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     othersView.show(othersDiv);
     const othersSection = othersView.appendSection(i18nString(UIStrings.serviceWorkersFromOtherOrigins));
     const othersSectionRow = othersSection.appendRow();
-    const seeOthers =
-        UI.Fragment
-            .html`<a class="devtools-link" role="link" tabindex="0" href="chrome://serviceworker-internals" target="_blank" style="display: inline; cursor: pointer;">${
-                i18nString(UIStrings.seeAllRegistrations)}</a>`;
-    seeOthers.setAttribute('jslog', `${VisualLogging.link('view-all').track({click: true})}`);
-    self.onInvokeElement(seeOthers, event => {
-      const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
-      rootTarget &&
-          void rootTarget.targetAgent().invoke_createTarget({url: 'chrome://serviceworker-internals?devtools'});
-      event.consume(true);
-    });
+    const seeOthers = Link.create(
+        'chrome://serviceworker-internals', i18nString(UIStrings.seeAllRegistrations), undefined, 'view-all');
     othersSectionRow.appendChild(seeOthers);
 
     this.toolbar.appendToolbarItem(

package/front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -104,7 +104,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
     if (!filter?.regex) {
       return '';
     }
-    const matches = filter.regex.exec(textContent ?? '');
+    const matches = filter.regex.exec(textContent);
     if (!matches?.length) {
       return '';
     }

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -294,7 +294,14 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 export class ComputedStyleWidget extends UI.Widget.VBox {
-  #computedStyleModel?: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+  /**
+   * We store these because they are used when calculating the dimensions for the image preview.
+   * When we need to get those dimensions, we try to resolve them against the
+   * node fresh (in case the dimensions have changed), but if that doesn't work,
+   * we fallback to the precomputed ones, which helps to deal with situations
+   * where the node might have been removed from the DOM.
+   */
+  #storedNodeFeatures: Components.ImagePreview.PrecomputedFeatures|null = null;
   #nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle|null = null;
   #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null = null;
   #propertyTraces: Map<string, SDK.CSSProperty.CSSProperty[]>|null = null;
@@ -363,7 +370,8 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
           return null;
         },
         async () => {
-          return await Components.ImagePreview.loadPrecomputedFeatures(this.#computedStyleModel?.node);
+          const liveFeatures = await Components.ImagePreview.loadPrecomputedFeatures(this.#nodeStyle?.node);
+          return liveFeatures ?? this.#storedNodeFeatures ?? undefined;
         });
 
     this.#updateView({hasMatches: true});
@@ -430,7 +438,13 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
 
   set nodeStyle(nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle|null) {
     this.#nodeStyle = nodeStyle;
-    this.requestUpdate();
+    if (nodeStyle) {
+      // Make sure we get the node features before we request an update so we
+      // don't run the update before we have the features fetched.
+      void this.#storeNodeFeatures(nodeStyle.node).then(() => this.requestUpdate());
+    } else {
+      this.requestUpdate();
+    }
   }
 
   get matchedStyles(): SDK.CSSMatchedStyles.CSSMatchedStyles|null {
@@ -447,13 +461,13 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  get computedStyleModel(): ComputedStyleModule.ComputedStyleModel.ComputedStyleModel|undefined {
-    return this.#computedStyleModel;
-  }
-
-  set computedStyleModel(computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel) {
-    this.#computedStyleModel = computedStyleModel;
-    this.requestUpdate();
+  async #storeNodeFeatures(node: SDK.DOMModel.DOMNode|null): Promise<void> {
+    if (node) {
+      const features = await Components.ImagePreview.loadPrecomputedFeatures(node);
+      this.#storedNodeFeatures = features ?? null;
+    } else {
+      this.#storedNodeFeatures = null;
+    }
   }
 
   #shouldGroupStyles(): boolean {
@@ -483,10 +497,6 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles): Promise<void> {
     this.imagePreviewPopover.hide();
     this.linkifier.reset();
-    const cssModel = this.#computedStyleModel?.cssModel();
-    if (!cssModel) {
-      return;
-    }
 
     const uniqueProperties = [...nodeStyle.computedStyle.keys()];
     uniqueProperties.sort(propertySorter);
@@ -526,8 +536,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null): Promise<void> {
     this.imagePreviewPopover.hide();
     this.linkifier.reset();
-    const cssModel = this.#computedStyleModel?.cssModel();
-    if (!nodeStyle || !matchedStyles || !cssModel) {
+    if (!nodeStyle || !matchedStyles) {
       this.#updateView({hasMatches: false});
       return;
     }

package/front_end/panels/elements/ElementsPanel.ts

@@ -316,7 +316,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.stylesWidget = new StylesSidebarPane(this.#computedStyleModel);
     this.#computedStyleWidget = new ComputedStyleWidget();
-    this.#computedStyleWidget.computedStyleModel = this.#computedStyleModel;
     this.#computedStyleModel.addEventListener(
         ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.#updateComputedStyles, this);
     this.#computedStyleModel.addEventListener(

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1575,11 +1575,17 @@ export class GridTemplateRenderer extends rendererBase(SDK.CSSPropertyParserMatc
 
     const indent = Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get();
     const container = document.createDocumentFragment();
-    for (const line of match.lines) {
-      const value = Renderer.render(line, context);
-      const lineBreak = UI.Fragment.html`<br /><span class='styles-clipboard-only'>${indent.repeat(2)}</span>`;
-      container.append(lineBreak, ...value.nodes);
-    }
+
+    const template = html`
+      ${match.lines.map(line => {
+      const lines = Renderer.render(line, context).nodes;
+      return html`
+        <span class='styles-clipboard-only'>${indent.repeat(2)}</span>
+        ${lines}`;
+    })}
+    `;
+
+    render(template, container);
     return [container];
   }
 }

package/front_end/panels/elements/nodeStackTraceWidget.css

@@ -6,6 +6,6 @@
 @scope to (devtools-widget > *) {
   .stack-trace {
     font-size: 11px !important; /* stylelint-disable-line declaration-no-important */
-    font-family: Menlo, monospace;
+    font-family: Menlo, var(--monospace-font-family);
   }
 }