chrome-devtools-frontend 1.0.1618066 → 1.0.1621064

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -254,8 +254,8 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
   }
 
-  set commandToDisplay(command: string) {
-    this.displayCommand(command, {});
+  set commandToDisplay(data: {command: string, parameters?: Record<string, unknown>}) {
+    this.displayCommand(data.command, data.parameters ?? {});
   }
 
   get targetId(): string|undefined {

package/front_end/panels/search/SearchView.ts

@@ -134,7 +134,7 @@ export interface SearchViewOutput {
   collapseAllResults: () => void;
 }
 
-export type View = (input: SearchViewInput, output: SearchViewOutput, target: HTMLElement) => void;
+export type View = (input: SearchViewInput, output: SearchViewOutput, target: HTMLElement|DocumentFragment) => void;
 
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const {
@@ -262,11 +262,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             </devtools-progress>` : ''}
         </div>
         <div class="search-message">${searchResultsMessage}</div>
-      </div>`, target);
+      </div>`, target, {container: {attributes: {jslog: `${VisualLogging.panel('search').track({resize: true})}`}}});
   // clang-format on
 };
 
-export class SearchView extends UI.Widget.VBox {
+export class SearchView extends UI.Widget.VBox<ShadowRoot> {
   readonly #view: View;
   #focusSearchInput = (): void => {};
   #showAllMatches = (): void => {};
@@ -295,10 +295,7 @@ export class SearchView extends UI.Widget.VBox {
   #searchResults: SearchResult[] = [];
 
   constructor(settingKey: string, view = DEFAULT_VIEW) {
-    super({
-      jslog: `${VisualLogging.panel('search').track({resize: true})}`,
-      useShadowDom: true,
-    });
+    super({useShadowDom: 'pure'});
     this.#view = view;
     this.setMinimumSize(0, 40);
 

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -153,43 +153,39 @@ function domBreakpointSubtext(data: DOMBreakpointData): Lit.LitTemplate {
   `;
 }
 
-const DEFAULT_VIEW = (input: ViewInput|null, _output: undefined, target: HTMLElement): void => {
-  render(
-      html`
+const DEFAULT_VIEW = (input: ViewInput|null, _output: undefined, target: DocumentFragment): void => {
+  // clang-format off
+  render(html`
     <style>${debuggerPausedMessageStyles}</style>
-    <div aria-live="polite" ?hidden=${!input}>${
-          input ?
-              html`
+    <div aria-live="polite" ?hidden=${!input}>${input ? html`
       <div class="paused-status ${input.errorLike ? 'error-reason' : ''}">
         <span>
           <div class="status-main">
             <devtools-icon name=${input.errorLike ? 'cross-circle-filled' : 'info'} class="medium"></devtools-icon>
             ${input.mainText}
           </div>
-          ${
-                  input.subText || input.domBreakpointData ?
-                      html`
-            <div class="status-sub monospace" title=${ifDefined(input.title ?? input.subText)}>${
-                          input.domBreakpointData ? domBreakpointSubtext(input.domBreakpointData) : input.subText}</div>
-          ` :
-                      nothing}
+          ${input.subText || input.domBreakpointData ? html`
+            <div class="status-sub monospace" title=${ifDefined(input.title ?? input.subText)}>
+              ${input.domBreakpointData ? domBreakpointSubtext(input.domBreakpointData) : input.subText}
+            </div>` : nothing}
         </span>
-      </div>` :
-              nothing}
-    </div>
-  `,
-      target);
+      </div>` : nothing}
+    </div>`, target, {
+        container: {
+          attributes: {jslog: `${VisualLogging.dialog('debugger-paused')}`},
+          classes: ['paused-message', 'flex-none']
+        }
+      });
+  // clang-format on
 };
 
 type View = typeof DEFAULT_VIEW;
 
-export class DebuggerPausedMessage extends UI.Widget.Widget {
+export class DebuggerPausedMessage extends UI.Widget.Widget<ShadowRoot> {
   #viewInput: ViewInput|null = null;
   constructor(element?: HTMLElement, private readonly view: View = DEFAULT_VIEW) {
     super(element, {
-      jslog: `${VisualLogging.dialog('debugger-paused')}`,
-      classes: ['paused-message', 'flex-none'],
-      useShadowDom: true,
+      useShadowDom: 'pure',
     });
   }
 

package/front_end/panels/sources/ThreadsSidebarPane.ts

@@ -52,7 +52,7 @@ const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement)
       </button>
     `)}
     </div>
-  `, target);
+  `, target, {container: {attributes: {jslog: `${VisualLogging.section('sources.threads')}`}}});
 };
 // clang-format on
 
@@ -65,9 +65,7 @@ export class ThreadsSidebarPane extends UI.Widget.VBox implements
   #view: View;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
-    super(element, {
-      jslog: `${VisualLogging.section('sources.threads')}`,
-    });
+    super(element);
     this.#view = view;
 
     const currentTarget = UI.Context.Context.instance().flavor(SDK.Target.Target);

package/front_end/panels/web_audio/WebAudioView.ts

@@ -80,7 +80,7 @@ interface ViewInput {
   contextRealtimeData: Protocol.WebAudio.ContextRealtimeData|null;
 }
 
-type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+type View = (input: ViewInput, output: object, target: HTMLElement|DocumentFragment) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   const {
@@ -169,11 +169,12 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                 (contextRealtimeData.renderCapacity * 100).toFixed(3)} %</span>
           </div>` : ''}
       </div>
-    </div>`, target);
+    </div>`, target, {container: {attributes: {jslog: `${VisualLogging.panel('web-audio').track({resize: true})}`}}});
   // clang-format on
 };
 
-export class WebAudioView extends UI.Widget.VBox implements SDK.TargetManager.SDKModelObserver<WebAudioModel> {
+export class WebAudioView extends UI.Widget.VBox<ShadowRoot> implements
+    SDK.TargetManager.SDKModelObserver<WebAudioModel> {
   private readonly knownContexts = new Set<string>();
   private readonly contextSelectorItems: UI.ListModel.ListModel<Protocol.WebAudio.BaseAudioContext>;
   private contextRealtimeData: Protocol.WebAudio.ContextRealtimeData|null = null;
@@ -182,7 +183,7 @@ export class WebAudioView extends UI.Widget.VBox implements SDK.TargetManager.SD
   private readonly pollRealtimeDataThrottler: Common.Throttler.Throttler;
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
-    super({jslog: `${VisualLogging.panel('web-audio').track({resize: true})}`, useShadowDom: true});
+    super({useShadowDom: 'pure'});
     this.view = view;
 
     this.contextSelectorItems = new UI.ListModel.ListModel();

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: 9b1af1c3bfa10271c6f92691e32659acea5f941c
+Revision: 3e3e498dbe4d68709d4f6b2e2a834a7a85a17a83
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/icon_button/iconButton.css

@@ -21,6 +21,7 @@
   font-size: inherit;
   font-family: inherit;
   background-color: inherit;
+  cursor: inherit;
 }
 
 .icon-button.with-click-handler {

package/front_end/ui/components/lists/list.css

@@ -13,6 +13,10 @@
   --override-background-list-item-color: var(--sys-color-cdt-base-container);
 }
 
+:host(.square-corners) li {
+  border-radius: 0;
+}
+
 :host([hidden]) {
   display: none;
 }

package/front_end/ui/legacy/ViewRegistration.ts

@@ -8,7 +8,7 @@ import * as Root from '../../core/root/root.js';
 import type * as Foundation from '../../foundation/foundation.js';
 
 import type {ViewLocationResolver} from './View.js';
-import type {Widget} from './Widget.js';
+import type {AnyWidget} from './Widget.js';
 
 const UIStrings = {
   /**
@@ -140,7 +140,7 @@ export interface ViewRegistration {
    * });
    * ```
    */
-  loadView: (universe: Foundation.Universe.Universe) => Promise<Widget>;
+  loadView: (universe: Foundation.Universe.Universe) => Promise<AnyWidget>;
   /**
    * Used to sort the views that appear in a shared location.
    */

package/front_end/ui/legacy/Widget.ts

@@ -527,6 +527,8 @@ export class Widget<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElem
     }
     if (this.contentElement instanceof HTMLElement) {
       this.contentElement.classList.add('widget');
+    } else if (options?.useShadowDom === 'pure') {
+      this.element.classList.add('widget');
     }
     widgetMap.set(this.element, this);
   }
@@ -1216,6 +1218,8 @@ export class VBox<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElemen
     super(elementOrOptions, options);
     if (this.contentElement instanceof HTMLElement) {
       this.contentElement.classList.add('vbox');
+    } else {
+      this.element.classList.add('vbox');
     }
   }
 
@@ -1239,7 +1243,7 @@ export class HBox<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElemen
    *
    * @param options optional settings to configure the behavior.
    */
-  constructor(options?: WidgetOptions);
+  constructor(options?: WidgetOptions<ContentTypeT>);
 
   /**
    * Constructs a new `HBox` with the given `options` and attached to the
@@ -1251,13 +1255,16 @@ export class HBox<ContentTypeT extends HTMLElement|DocumentFragment = HTMLElemen
    * @param element an (optional) `HTMLElement` to attach the `HBox` to.
    * @param options optional settings to configure the behavior.
    */
-  constructor(element?: HTMLElement, options?: WidgetOptions);
+  constructor(element?: HTMLElement, options?: WidgetOptions<ContentTypeT>);
 
   constructor(elementOrOptions?: HTMLElement|WidgetOptions<ContentTypeT>, options?: WidgetOptions<ContentTypeT>) {
     // @ts-expect-error
     super(elementOrOptions, options);
     if (this.contentElement instanceof HTMLElement) {
       this.contentElement.classList.add('hbox');
+    } else {
+      this.element.classList.remove('vbox');
+      this.element.classList.add('hbox');
     }
   }
 

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -347,11 +347,11 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
         callFrame.url as Platform.DevToolsPath.UrlString, callFrame.lineNumber, linkifyOptions);
   }
 
-  static linkifyStackTraceFrame(frame: StackTrace.StackTrace.Frame, options?: LinkifyOptions): HTMLElement {
+  static linkifyUILocation(uiLocation: Workspace.UISourceCode.UILocation, options?: LinkifyOptions): HTMLElement {
     const linkifyURLOptions = {
       ...options,
-      lineNumber: frame.line,
-      columnNumber: frame.column,
+      lineNumber: uiLocation.lineNumber,
+      columnNumber: uiLocation.columnNumber,
       showColumnNumber: Boolean(options?.showColumnNumber),
       className: options?.className,
       tabStop: options?.tabStop,
@@ -361,13 +361,10 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       omitOrigin: options?.omitOrigin,
     } satisfies LinkifyURLOptions;
     const {className = ''} = linkifyURLOptions;
-    const fallbackAnchor = Linkifier.linkifyURL(frame.url as Platform.DevToolsPath.UrlString, linkifyURLOptions);
-    if (!frame.uiSourceCode) {
-      const isIgnoreListed = (options?.ignoreListManager ?? Workspace.IgnoreListManager.IgnoreListManager.instance())
-                                 .isUserIgnoreListedURL(frame.url as Platform.DevToolsPath.UrlString);
-      fallbackAnchor.classList.toggle('ignore-list-link', isIgnoreListed);
-      return fallbackAnchor;
-    }
+    const fallbackAnchor = Linkifier.linkifyURL(uiLocation.uiSourceCode.url(), linkifyURLOptions);
+    const isIgnoreListed = (options?.ignoreListManager ?? Workspace.IgnoreListManager.IgnoreListManager.instance())
+                               .isUserIgnoreListedURL(uiLocation.uiSourceCode.url());
+    fallbackAnchor.classList.toggle('ignore-list-link', isIgnoreListed);
 
     const createLinkOptions: CreateLinkOptions = {
       tabStop: options?.tabStop,
@@ -384,12 +381,36 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       revealBreakpoint: options?.revealBreakpoint,
     };
 
-    const uiLocation = frame.uiSourceCode.uiLocation(frame.line, frame.column) ?? null;
     Linkifier.updateAnchorFromUILocation(link, linkDisplayOptions, uiLocation, options?.ignoreListManager);
 
     return link;
   }
 
+  static linkifyStackTraceFrame(frame: StackTrace.StackTrace.Frame, options?: LinkifyOptions): HTMLElement {
+    const linkifyURLOptions = {
+      ...options,
+      lineNumber: frame.line,
+      columnNumber: frame.column,
+      showColumnNumber: Boolean(options?.showColumnNumber),
+      className: options?.className,
+      tabStop: options?.tabStop,
+      inlineFrameIndex: options?.inlineFrameIndex ?? 0,
+      userMetric: options?.userMetric,
+      jslogContext: options?.jslogContext || 'script-location',
+      omitOrigin: options?.omitOrigin,
+    } satisfies LinkifyURLOptions;
+    const fallbackAnchor = Linkifier.linkifyURL(frame.url as Platform.DevToolsPath.UrlString, linkifyURLOptions);
+    if (!frame.uiSourceCode) {
+      const isIgnoreListed = (options?.ignoreListManager ?? Workspace.IgnoreListManager.IgnoreListManager.instance())
+                                 .isUserIgnoreListedURL(frame.url as Platform.DevToolsPath.UrlString);
+      fallbackAnchor.classList.toggle('ignore-list-link', isIgnoreListed);
+      return fallbackAnchor;
+    }
+
+    const uiLocation = frame.uiSourceCode.uiLocation(frame.line, frame.column);
+    return Linkifier.linkifyUILocation(uiLocation, options);
+  }
+
   linkifyStackTraceTopFrame(target: SDK.Target.Target|null, stackTrace: Protocol.Runtime.StackTrace): HTMLElement {
     console.assert(stackTrace.callFrames.length > 0);
 

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -853,7 +853,13 @@ export const knownContextValues = new Set([
   'column-rule-edge-start-inset',
   'column-rule-edge-start-outset',
   'column-rule-inset',
+  'column-rule-inset-cap',
+  'column-rule-inset-cap-end',
+  'column-rule-inset-cap-start',
   'column-rule-inset-end',
+  'column-rule-inset-junction',
+  'column-rule-inset-junction-end',
+  'column-rule-inset-junction-start',
   'column-rule-inset-start',
   'column-rule-interior-end-inset',
   'column-rule-interior-end-outset',
@@ -3330,7 +3336,13 @@ export const knownContextValues = new Set([
   'row-rule-edge-start-inset',
   'row-rule-edge-start-outset',
   'row-rule-inset',
+  'row-rule-inset-cap',
+  'row-rule-inset-cap-end',
+  'row-rule-inset-cap-start',
   'row-rule-inset-end',
+  'row-rule-inset-junction',
+  'row-rule-inset-junction-end',
+  'row-rule-inset-junction-start',
   'row-rule-inset-start',
   'row-rule-interior-end-inset',
   'row-rule-interior-end-outset',
@@ -3354,7 +3366,9 @@ export const knownContextValues = new Set([
   'rule-color',
   'rule-edge-inset',
   'rule-inset',
+  'rule-inset-cap',
   'rule-inset-end',
+  'rule-inset-junction',
   'rule-inset-start',
   'rule-interior-inset',
   'rule-outset',
@@ -4368,13 +4382,16 @@ export const knownContextValues = new Set([
   'webgl-warning-fired',
   'webmcp.call-inputs',
   'webmcp.call-outputs',
+  'webmcp.canceled',
   'webmcp.completed',
   'webmcp.copy-tool-description',
   'webmcp.copy-tool-name',
   'webmcp.declarative',
+  'webmcp.edit-and-run',
   'webmcp.error',
   'webmcp.imperative',
   'webmcp.pending',
+  'webmcp.reveal-tool',
   'webmcp.status-types',
   'webmcp.tool-details',
   'webmcp.tool-types',

package/package.json

@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1618066"
+  "version": "1.0.1621064"
 }

package/front_end/Images/src/dots-circle.svg

@@ -1,10 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_367_65863)">
-<path d="M5.2 8.875C5.44306 8.875 5.64722 8.79236 5.8125 8.62708C5.9875 8.45208 6.075 8.24306 6.075 8C6.075 7.75694 5.9875 7.55278 5.8125 7.3875C5.64722 7.2125 5.44306 7.125 5.2 7.125C4.95694 7.125 4.74792 7.2125 4.57292 7.3875C4.40764 7.55278 4.325 7.75694 4.325 8C4.325 8.24306 4.40764 8.45208 4.57292 8.62708C4.74792 8.79236 4.95694 8.875 5.2 8.875ZM8 8.875C8.24306 8.875 8.44722 8.79236 8.6125 8.62708C8.7875 8.45208 8.875 8.24306 8.875 8C8.875 7.75694 8.7875 7.55278 8.6125 7.3875C8.44722 7.2125 8.24306 7.125 8 7.125C7.75694 7.125 7.54792 7.2125 7.37292 7.3875C7.20764 7.55278 7.125 7.75694 7.125 8C7.125 8.24306 7.20764 8.45208 7.37292 8.62708C7.54792 8.79236 7.75694 8.875 8 8.875ZM10.8 8.875C11.0431 8.875 11.2472 8.79236 11.4125 8.62708C11.5875 8.45208 11.675 8.24306 11.675 8C11.675 7.75694 11.5875 7.55278 11.4125 7.3875C11.2472 7.2125 11.0431 7.125 10.8 7.125C10.5569 7.125 10.3479 7.2125 10.1729 7.3875C10.0076 7.55278 9.925 7.75694 9.925 8C9.925 8.24306 10.0076 8.45208 10.1729 8.62708C10.3479 8.79236 10.5569 8.875 10.8 8.875ZM8 13.6C7.23194 13.6 6.50764 13.4542 5.82708 13.1625C5.14653 12.8708 4.54861 12.4722 4.03333 11.9667C3.52778 11.4514 3.12917 10.8535 2.8375 10.1729C2.54583 9.49236 2.4 8.76806 2.4 8C2.4 7.22222 2.54583 6.49792 2.8375 5.82708C3.12917 5.14653 3.52778 4.55347 4.03333 4.04792C4.54861 3.53264 5.14653 3.12917 5.82708 2.8375C6.50764 2.54583 7.23194 2.4 8 2.4C8.77778 2.4 9.50208 2.54583 10.1729 2.8375C10.8535 3.12917 11.4465 3.53264 11.9521 4.04792C12.4674 4.55347 12.8708 5.14653 13.1625 5.82708C13.4542 6.49792 13.6 7.22222 13.6 8C13.6 8.76806 13.4542 9.49236 13.1625 10.1729C12.8708 10.8535 12.4674 11.4514 11.9521 11.9667C11.4465 12.4722 10.8535 12.8708 10.1729 13.1625C9.50208 13.4542 8.77778 13.6 8 13.6ZM8 12.55C9.26389 12.55 10.3382 12.1076 11.2229 11.2229C12.1076 10.3382 12.55 9.26389 12.55 8C12.55 6.73611 12.1076 5.66181 11.2229 4.77708C10.3382 3.89236 9.26389 3.45 8 3.45C6.73611 3.45 5.66181 3.89236 4.77708 4.77708C3.89236 5.66181 3.45 6.73611 3.45 8C3.45 9.26389 3.89236 10.3382 4.77708 11.2229C5.66181 12.1076 6.73611 12.55 8 12.55Z" fill="#474747"/>
-</g>
-<defs>
-<clipPath id="clip0_367_65863">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>

package/front_end/panels/elements/components/Helper.ts

@@ -1,35 +0,0 @@
-// Copyright 2021 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as SDK from '../../../core/sdk/sdk.js';
-
-export interface DOMNode {
-  parentNode: DOMNode|null;
-  id: number;
-  nodeType: number;
-  pseudoType?: string;
-  shadowRootType: string|null;
-  nodeName: string;
-  nodeNameNicelyCased: string;
-  legacyDomNode: SDK.DOMModel.DOMNode;
-  highlightNode: (mode?: string) => void;
-  clearHighlight: () => void;
-  getAttribute: (attr: string) => string | undefined;
-}
-
-export const legacyNodeToElementsComponentsNode = (node: SDK.DOMModel.DOMNode): DOMNode => {
-  return {
-    parentNode: node.parentNode ? legacyNodeToElementsComponentsNode(node.parentNode) : null,
-    id: (node.id as number),
-    nodeType: node.nodeType(),
-    pseudoType: node.pseudoType(),
-    shadowRootType: node.shadowRootType(),
-    nodeName: node.nodeName(),
-    nodeNameNicelyCased: node.nodeNameInCorrectCase(),
-    legacyDomNode: node,
-    highlightNode: (mode?: string) => node.highlight(mode),
-    clearHighlight: () => SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight(),
-    getAttribute: node.getAttribute.bind(node),
-  };
-};