chrome-devtools-frontend 1.0.1616061 → 1.0.1621064

package/front_end/panels/application/preloading/components/MismatchedPreloadingGrid.ts

@@ -91,7 +91,7 @@ export interface ViewInput {
   pageURL: string;
 }
 
-export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, never>, target: HTMLElement): void => {
+export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, never>, target: DocumentFragment): void => {
   // clang-format off
   render(html`
     <devtools-data-grid striped inline>
@@ -146,7 +146,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, never>, t
               </tr>
             `)}
       </table>
-    </devtools-data-grid>`, target);
+    </devtools-data-grid>`, target, {container: {classes: ['devtools-resources-mismatched-preloading-grid']}});
   // clang-format on
 };
 
@@ -164,12 +164,12 @@ export interface MismatchedPreloadingGridData {
 type ViewFunction = typeof DEFAULT_VIEW;
 
 /** Grid component to show prerendering attempts. **/
-export class MismatchedPreloadingGrid extends UI.Widget.Widget {
+export class MismatchedPreloadingGrid extends UI.Widget.Widget<ShadowRoot> {
   #data: MismatchedPreloadingGridData|null = null;
   #view: ViewFunction;
 
   constructor(element?: HTMLElement, view: typeof DEFAULT_VIEW = DEFAULT_VIEW) {
-    super(element, {classes: ['devtools-resources-mismatched-preloading-grid'], useShadowDom: true});
+    super(element, {useShadowDom: 'pure'});
     this.#view = view;
   }
 

package/front_end/panels/application/webMCPView.css

@@ -5,218 +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);
+    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;
-    }
+        gap: var(--sys-size-4);
+      }
 
-    .toolbar-text.status-error-text {
-      color: var(--sys-color-error);
+      .tool-origin-node {
+        display: flex;
+        align-items: center;
+        cursor: default;
+      }
     }
 
-    .toolbar-text.status-cancelled-text {
-      color: var(--sys-color-on-surface-light);
+    .show-element {
+      height: 1lh;
     }
-
-    .call-details-tabbed-pane {
-        flex: auto;
-        border-bottom: 1px solid var(--sys-color-divider);
+  }
+
+  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);
     }
 
-    .call-payload-view {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
+    &.selected {
+      background-color: var(--sys-color-tonal-container);
     }
-
-    .call-payload-content {
-        padding: var(--sys-size-5);
-        flex: auto;
-        overflow: auto;
+  }
+
+  .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;
     }
-
-    .payload-value.error-text {
-      color: var(--sys-color-error);
-      white-space: pre-wrap;
+    /* 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

@@ -12,7 +12,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 {ChangesSidebar, Events} from './ChangesSidebar.js';
+import {ChangesSidebar} from './ChangesSidebar.js';
 import changesViewStyles from './changesView.css.js';
 import * as CombinedDiffView from './CombinedDiffView.js';
 
@@ -39,13 +39,8 @@ 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) => {
-  const onSidebar = (sidebar: ChangesSidebar): void => {
-    sidebar.addEventListener(
-        Events.SELECTED_UI_SOURCE_CODE_CHANGED, () => input.onSelect(sidebar.selectedUISourceCode()));
-  };
-
   render(
       // clang-format off
       html`
@@ -68,23 +63,23 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           </div>
         </div>
         <devtools-widget slot="sidebar" ${widget(ChangesSidebar, {workspaceDiff: input.workspaceDiff})}
-          ${UI.Widget.widgetRef(ChangesSidebar, onSidebar)}>
+          @SelectedUISourceCodeChanged=${(e: Event) => {
+            const sidebar = UI.Widget.Widget.get(e.target as HTMLElement) as ChangesSidebar;
+            input.onSelect(sidebar.selectedUISourceCode());
+          }}>
         </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/ConsolePanel.ts

@@ -41,6 +41,7 @@ let consolePanelInstance: ConsolePanel;
 
 export class ConsolePanel extends UI.Panel.Panel {
   private readonly view: ConsoleView;
+  #drawerWasMinimized = false;
   constructor() {
     super('console');
     this.view = ConsoleView.instance();
@@ -64,9 +65,11 @@ export class ConsolePanel extends UI.Panel.Panel {
 
   override wasShown(): void {
     super.wasShown();
+    const inspectorView = UI.InspectorView.InspectorView.instance();
+    this.#drawerWasMinimized = inspectorView.isDrawerMinimized();
     const wrapper = wrapperViewInstance;
     if (wrapper?.isShowing()) {
-      UI.InspectorView.InspectorView.instance().setDrawerMinimized(true);
+      inspectorView.setDrawerMinimized(true);
     }
     this.view.show(this.element);
     ConsolePanel.updateContextFlavor();
@@ -74,12 +77,17 @@ export class ConsolePanel extends UI.Panel.Panel {
 
   override willHide(): void {
     super.willHide();
+    const inspectorView = UI.InspectorView.InspectorView.instance();
     // The minimized drawer has 0 height, and showing Console inside may set
     // Console's scrollTop to 0. Unminimize before calling show to avoid this.
-    UI.InspectorView.InspectorView.instance().setDrawerMinimized(false);
+    // Restore the previous minimized state afterwards.
+    inspectorView.setDrawerMinimized(false);
     if (wrapperViewInstance) {
       wrapperViewInstance.showViewInWrapper();
     }
+    if (this.#drawerWasMinimized) {
+      inspectorView.setDrawerMinimized(true);
+    }
     ConsolePanel.updateContextFlavor();
   }
 
@@ -117,7 +125,6 @@ export class WrapperView extends UI.Widget.VBox {
 
   override willHide(): void {
     super.willHide();
-    UI.InspectorView.InspectorView.instance().setDrawerMinimized(false);
     ConsolePanel.updateContextFlavor();
   }