chrome-devtools-frontend 1.0.1618066 → 1.0.1621064

package/front_end/panels/application/webMCPView.css

@@ -5,236 +5,297 @@
  */
 
 @scope to (devtools-widget > *) {
-    .webmcp-view {
-        height: 100%;
-        width: 100%;
+  .webmcp-view {
+    height: 100%;
+    width: 100%;
+  }
+
+  .call-log,
+  .tool-list {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    padding: 0;
+  }
+
+  .empty-view-scroller {
+    flex: auto;
+  }
+
+  devtools-data-grid {
+    flex: auto;
+  }
+
+  .data-grid {
+    th {
+      height: 26px;
     }
 
-    .call-log,
-    .tool-list {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
-        padding: 0;
+    td {
+      vertical-align: middle;
     }
 
-    .empty-view-scroller {
-        flex: auto;
+    tr.status-cancelled {
+      color: var(--sys-color-on-surface-light);
     }
 
-    devtools-data-grid {
-        flex: auto;
+    tr.status-error {
+      color: var(--sys-color-error);
     }
 
-    .data-grid {
-      th {
-        height: 26px;
-      }
-
-      td {
-        vertical-align: middle;
-      }
-
-      tr.status-cancelled {
-        color: var(--sys-color-on-surface-light);
-      }
-
-      tr.status-error {
-        color: var(--sys-color-error);
-      }
-
-      tr.selected {
-        background-color: var(--sys-color-tonal-container);
-      }
-
-      tbody tr.selected.status-error,
-      tbody tr.selected.status-error.revealed {
-        background-color: var(--sys-color-error-container);
-        color: var(--sys-color-error);
-      }
+    tr.selected {
+      background-color: var(--sys-color-tonal-container);
     }
 
-    .section-title {
-        display: flex;
-        gap: var(--sys-size-2);
-        background-color: var(--sys-color-surface1);
-        padding: 0 5px;
-        line-height: 22px;
-        overflow: hidden;
-        align-items: center;
-        flex: none;
-        color: var(--sys-color-on-surface);
-        border-bottom: 1px solid var(--sys-color-divider);
+    tbody tr.selected.status-error,
+    tbody tr.selected.status-error.revealed {
+      background-color: var(--sys-color-error-container);
+      color: var(--sys-color-error);
     }
 
-    .status-cell {
-        display: flex;
-        align-items: center;
-        gap: 4px;
+    tbody tr:hover .run-tool-action-button,
+    tbody tr:focus-within .run-tool-action-button,
+    &:focus-within tbody tr.selected .run-tool-action-button {
+      display: flex;
     }
-
-    .tool-details {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
-
-    .tool-details-grid {
-      display: grid;
-      grid-template-columns: min-content 1fr;
-      gap: 0 var(--sys-size-16);
-      padding: calc(0.5*var(--sys-size-6)) var(--sys-size-8);
-      align-items: flex-start;
-      overflow-y: auto;
-
-      .label {
-        color: var(--sys-color-on-surface-subtle);
-        white-space: nowrap;
-        padding: var(--sys-size-6) 0;
-      }
-
-      .value {
-        user-select: text;
-
-        &.source-code {
-          color: var(--sys-color-token-attribute);
-        }
-
-        padding: var(--sys-size-6) 0;
-        color: var(--sys-color-on-surface);
-        overflow-wrap: anywhere;
-
-        &:has(> .stack-preview-container) {
-          padding: var(--sys-size-4) 0;
-        }
-
-        &.tool-origin-container {
-          display: flex;
-          align-items: center;
-          gap: var(--sys-size-4);
-        }
-
-        .tool-origin-node {
-          display: flex;
-          align-items: center;
-          cursor: default;
-        }
-      }
-
-      .show-element {
-        height: 1lh;
-      }
+  }
+
+  .section-title {
+    display: flex;
+    gap: var(--sys-size-2);
+    background-color: var(--sys-color-surface1);
+    padding: 0 var(--sys-size-3);
+    line-height: var(--sys-size-10);
+    overflow: hidden;
+    align-items: center;
+    flex: none;
+    color: var(--sys-color-on-surface);
+    border-bottom: 1px solid var(--sys-color-divider);
+
+    devtools-button {
+      margin: calc(-1 * var(--sys-size-1)) 0;
     }
-
-    devtools-list {
-      flex: 1 1 auto;
-      margin: 0;
-      padding: var(--sys-size-4);
-      box-sizing: border-box;
+  }
+
+  .status-cell {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-3);
+  }
+
+  .name-cell {
+    display: flex;
+    gap: var(--sys-size-5);
+    align-items: center;
+  }
+
+  .run-tool-action-button {
+    display: none;
+    width: var(--sys-size-8);
+    height: var(--sys-size-8);
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    devtools-icon {
+      width: var(--sys-size-7);
+      height: var(--sys-size-7);
+      color: var(--sys-color-primary);
     }
-
-    .tool-item {
-        display: flex;
-        flex-direction: column;
-        padding: 8px 0;
-        gap: 4px;
-        width: 100%;
-        box-sizing: border-box;
-        border-bottom: 1px solid var(--sys-color-divider);
-        cursor: pointer;
+  }
+
+  .tool-details {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .tool-details-grid {
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    gap: var(--sys-size-6);
+    padding: calc(0.5*var(--sys-size-6)) var(--sys-size-8);
+    align-items: flex-start;
+    overflow-y: auto;
+
+    .label {
+      color: var(--sys-color-on-surface-subtle);
+      white-space: nowrap;
+      padding: var(--sys-size-3) 0;
     }
 
-    .tool-item:hover {
-        background-color: var(--sys-color-state-hover-on-subtle);
-    }
+    .value {
+      user-select: text;
 
-    .tool-item.selected {
-        background-color: var(--sys-color-tonal-container);
-    }
+      &.source-code {
+        color: var(--sys-color-token-property-special);
+      }
 
-    .tool-name-container {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-        gap: 8px;
-    }
+      padding: var(--sys-size-3) 0;
+      color: var(--sys-color-on-surface);
+      overflow-wrap: anywhere;
 
-    .tool-name.source-code {
-        color: var(--sys-color-token-string);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        min-width: 0;
-        flex: 1;
-    }
+      &:has(> .stack-preview-container) {
+        padding: var(--sys-size-4) 0;
+      }
 
-    /* stylelint-disable-next-line selector-type-no-unknown */
-    .tool-name-container icon-button {
-        flex-shrink: 0;
-        height: 0;
-        overflow: visible;
+      &.tool-origin-container {
         display: flex;
         align-items: center;
-    }
-
-    .tool-description {
-        color: var(--sys-color-on-surface);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    devtools-toolbar-input {
-        flex-grow: 1;
-        flex-shrink: 1;
-    }
-
-    .toolbar-text.status-error-text {
-      color: var(--sys-color-error);
-    }
-
-    .toolbar-text.status-cancelled-text {
-      color: var(--sys-color-on-surface-light);
-    }
-
-    .call-details-tabbed-pane {
-        flex: auto;
-        border-bottom: 1px solid var(--sys-color-divider);
-    }
+        gap: var(--sys-size-4);
+      }
 
-    .call-payload-view {
+      .tool-origin-node {
         display: flex;
-        flex-direction: column;
-        height: 100%;
+        align-items: center;
+        cursor: default;
+      }
     }
 
-    .call-payload-content {
-        padding: var(--sys-size-5);
-        flex: auto;
-        overflow: auto;
+    .show-element {
+      height: 1lh;
     }
-
-    .payload-value.error-text {
-      color: var(--sys-color-error);
-      white-space: pre-wrap;
+  }
+
+  devtools-list {
+    flex: 1 1 auto;
+    margin: 0;
+    padding: var(--sys-size-4) 0;
+    box-sizing: border-box;
+  }
+
+  .tool-item {
+    display: flex;
+    flex-direction: column;
+    padding: var(--sys-size-5) var(--sys-size-4);
+    gap: var(--sys-size-3);
+    width: 100%;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--sys-color-divider);
+
+    &:hover {
+      background-color: var(--sys-color-state-hover-on-subtle);
     }
 
-    .sidebar-tool-details {
-        flex: none;
-        border-bottom: 1px solid var(--sys-color-divider);
+    &.selected {
+      background-color: var(--sys-color-tonal-container);
     }
-
-    .json-editor-widget {
-        flex: auto;
-        /* extend the JSON editor padding to match the details grid */
-        padding-left: calc(var(--sys-size-8) - 1em);
-        min-height: 0;
+  }
+
+  .tool-name-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sys-size-5);
+
+    .tool-icons {
+      display: flex;
+      gap: var(--sys-size-2);
+      align-items: center;
     }
-
-    .webmcp-run-tool-button {
-        align-self: flex-end;
-        margin: var(--sys-size-6) var(--sys-size-8);
+    /* stylelint-disable-next-line selector-type-no-unknown */
+    icon-button {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
     }
+  }
+
+  .tool-name.source-code {
+    color: var(--sys-color-token-property-special);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .tool-description {
+    color: var(--sys-color-on-surface);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  devtools-toolbar-input {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  .toolbar-text.status-error-text {
+    color: var(--sys-color-error);
+  }
+
+  .toolbar-text.status-cancelled-text {
+    color: var(--sys-color-on-surface-light);
+  }
+
+  .call-details-tabbed-pane {
+    flex: auto;
+    border-bottom: 1px solid var(--sys-color-divider);
+  }
+
+  .call-payload-view {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .call-payload-content {
+    padding: var(--sys-size-5);
+    flex: auto;
+    overflow: auto;
+  }
+
+  .payload-value.error-text {
+    color: var(--sys-color-error);
+    white-space: pre-wrap;
+  }
+
+  .sidebar-tool-details {
+    flex: none;
+    border-bottom: 1px solid var(--sys-color-divider);
+  }
+
+  .call-to-action {
+    background-color: var(--sys-color-neutral-container);
+    padding: 8px;
+    border-radius: 5px;
+    margin: 4px;
+  }
+
+  .call-to-action-body {
+    padding: 6px 0;
+    margin-left: 9.5px;
+    border-left: 2px solid var(--issue-color-yellow);
+    padding-left: 18px;
+    line-height: 20px;
+  }
+
+  .call-to-action .explanation {
+    font-weight: bold;
+  }
+
+  .inline-icon {
+    vertical-align: middle;
+  }
+
+  .json-editor-widget {
+    flex: auto;
+    /* extend the JSON editor padding to match the details grid */
+    padding-left: calc(var(--sys-size-8) - 1em);
+    min-height: 0;
+  }
+
+  .webmcp-run-tool-button {
+    align-self: flex-end;
+    margin: var(--sys-size-6) var(--sys-size-8);
+  }
 }

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -141,10 +141,11 @@ interface ViewInput {
   highlightedItem: SDK.CategorizedBreakpoint.CategorizedBreakpoint|null;
   categories: Map<SDK.CategorizedBreakpoint.Category, SDK.CategorizedBreakpoint.CategorizedBreakpoint[]>;
   sortedCategoryNames: SDK.CategorizedBreakpoint.Category[];
+  jslog?: string;
 }
 
-export type View = typeof DEFAULT_VIEW;
-export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLElement): void => {
+export type View = (input: ViewInput, output: undefined, target: HTMLElement|DocumentFragment) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
   const shouldExpandCategory = (breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[]): boolean =>
       Boolean(input.filterText) || (input.highlightedItem && breakpoints.includes(input.highlightedItem)) ||
       breakpoints.some(breakpoint => breakpoint.enabled());
@@ -250,12 +251,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
             </ul>
           </li>`)}
       </ul>`}>
-    </devtools-tree>`, target);
+    </devtools-tree>`, target, {container: {attributes: {jslog: input.jslog}}});
   // clang-format on
 };
 
-export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
+export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox<ShadowRoot> {
   readonly #viewId: string;
+  readonly #jslog: string;
   // A layout test reaches into this
   private readonly categories =
       new Map<SDK.CategorizedBreakpoint.Category, SDK.CategorizedBreakpoint.CategorizedBreakpoint[]>();
@@ -267,8 +269,9 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   constructor(
       breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], jslog: string, viewId: string,
       view = DEFAULT_VIEW) {
-    super({useShadowDom: true, jslog});
+    super({useShadowDom: 'pure'});
     this.#view = view;
+    this.#jslog = jslog;
     this.#viewId = viewId;
 
     for (const breakpoint of breakpoints) {
@@ -348,6 +351,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   override performUpdate(): void {
     const input: ViewInput = {
       filterText: this.#filterText,
+      jslog: this.#jslog,
       onFilterChanged: this.#onFilterChanged.bind(this),
       onBreakpointChange: this.onBreakpointChanged.bind(this),
       onItemSelected: this.#onItemSelected.bind(this),

package/front_end/panels/changes/ChangesSidebar.ts

@@ -60,7 +60,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                    </li>`)}
                </ul>`}></devtools-tree>`,
       // clang-format on
-      target);
+      target, {container: {attributes: {jslog: `${VisualLogging.pane('sidebar').track({resize: true})}`}}});
 };
 
 export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
@@ -70,7 +70,7 @@ export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes,
   readonly #sourceCodes = new Set<Workspace.UISourceCode.UISourceCode>();
   #selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null = null;
   constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
-    super(target, {jslog: `${VisualLogging.pane('sidebar').track({resize: true})}`});
+    super(target);
     this.#view = view;
   }
 

package/front_end/panels/changes/ChangesView.ts

@@ -39,7 +39,7 @@ interface ViewInput {
   onSelect(sourceCode: Workspace.UISourceCode.UISourceCode|null): void;
   workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
 }
-type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+type View = (input: ViewInput, output: object, target: DocumentFragment) => void;
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   render(
       // clang-format off
@@ -70,19 +70,16 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         </devtools-widget>
       </devtools-split-view>`,
       // clang-format on
-      target);
+      target, {container: {attributes: {jslog: `${VisualLogging.panel('changes').track({resize: true})}`}}});
 };
 
-export class ChangesView extends UI.Widget.VBox {
+export class ChangesView extends UI.Widget.VBox<ShadowRoot> {
   readonly #workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
   #selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null = null;
   readonly #view: View;
 
   constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
-    super(target, {
-      jslog: `${VisualLogging.panel('changes').track({resize: true})}`,
-      useShadowDom: true,
-    });
+    super(target, {useShadowDom: 'pure'});
 
     this.#workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
     this.#view = view;

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -238,24 +238,6 @@ export const getMessageForElement = (element: Element): ConsoleViewMessage|undef
   return elementToMessage.get(element);
 };
 
-/**
- * Combines the error description (essentially the `Error#stack` property value)
- * with the `issueSummary`.
- *
- * @param description the `description` property of the `Error` remote object.
- * @param issueSummary the optional `issueSummary` of the `exceptionMetaData`.
- * @returns the enriched description.
- * @see https://goo.gle/devtools-reduce-network-noise-design
- */
-export const concatErrorDescriptionAndIssueSummary = (description: string, issueSummary: string): string => {
-  // Insert the issue summary right after the error message.
-  const pos = description.indexOf('\n');
-  const prefix = pos === -1 ? description : description.substring(0, pos);
-  const suffix = pos === -1 ? '' : description.substring(pos);
-  description = `${prefix}. ${issueSummary}${suffix}`;
-  return description;
-};
-
 // This value reflects the 18px min-height of .console-message.
 // Keep in sync with consoleView.css.
 const defaultConsoleRowHeight = 18;
@@ -1948,7 +1930,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
     const issueSummary = exceptionDetails?.exceptionMetaData?.issueSummary;
     if (typeof issueSummary === 'string') {
-      string = concatErrorDescriptionAndIssueSummary(string, issueSummary);
+      string = StackTrace.ErrorStackParser.concatErrorDescriptionAndIssueSummary(string, issueSummary);
     }
 
     const linkInfos = StackTrace.ErrorStackParser.parseSourcePositionsFromErrorStack(runtimeModel, string);

package/front_end/panels/coverage/CoverageView.ts

@@ -153,7 +153,7 @@ export interface CoverageViewOutput {
   focusResults: () => void;
 }
 
-export type View = (input: CoverageViewInput, output: CoverageViewOutput, target: HTMLElement) => void;
+export type View = (input: CoverageViewInput, output: CoverageViewOutput, target: DocumentFragment) => void;
 
 export const DEFAULT_VIEW: View = (input, output, target) => {
   // clang-format off
@@ -234,7 +234,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         <div class="coverage-message">
             ${input.statusMessage}
         </div>
-    </div>`, target);
+    </div>`, target, {container: {attributes: {jslog: `${VisualLogging.panel('coverage').track({resize: true})}`}}});
   // clang-format on
 };
 
@@ -282,7 +282,7 @@ function renderReloadPromptPage(message: Common.UIString.LocalizedString, classN
   // clang-format on
 }
 
-export class CoverageView extends UI.Widget.VBox {
+export class CoverageView extends UI.Widget.VBox<ShadowRoot> {
   #model: CoverageModel|null;
   #decorationManager: CoverageDecorationManager|null;
   readonly #coverageTypeComboBoxSetting: Common.Settings.Setting<number>;
@@ -303,8 +303,7 @@ export class CoverageView extends UI.Widget.VBox {
 
   constructor(view: View = DEFAULT_VIEW) {
     super({
-      jslog: `${VisualLogging.panel('coverage').track({resize: true})}`,
-      useShadowDom: true,
+      useShadowDom: 'pure',
       delegatesFocus: true,
     });
     this.registerRequiredCSS(coverageViewStyles);