chrome-devtools-frontend 1.0.1578486 → 1.0.1578729

package/front_end/panels/security/security-meta.ts

@@ -2,12 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import * as Security from './security.js';
+import type * as Security from './security.js';
 
 const UIStrings = {
   /**
@@ -55,16 +54,3 @@ UI.ViewManager.registerViewExtension({
     return Security.SecurityPanel.SecurityPanel.instance();
   },
 });
-
-Common.Revealer.registerRevealer({
-  contextTypes() {
-    return [
-      Security.CookieReportView.CookieReportView,
-    ];
-  },
-  destination: Common.Revealer.RevealerDestination.SECURITY_PANEL,
-  async loadRevealer() {
-    const Security = await loadSecurityModule();
-    return new Security.SecurityPanel.SecurityRevealer();
-  },
-});

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -178,7 +178,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       </div>
       ${this.list.element}
       <div class='show-more-message hidden' ${ref(showMoreRef)}>
-        <span class='link' @click=${onShowMoreClicked}>${i18nString(UIStrings.showMore)}</span>
+        <button class='link' @click=${onShowMoreClicked}>${i18nString(UIStrings.showMore)}</button>
       </div>
     `, this.contentElement);
     // clang-format on

package/front_end/ui/components/buttons/Button.ts

@@ -126,7 +126,7 @@ export class Button extends HTMLElement {
   }
 
   override cloneNode(deep?: boolean): Node {
-    const node = super.cloneNode(deep) as Button;
+    const node = document.importNode(this, deep);
     Object.assign(node.#props, this.#props);
     node.#render();
     return node;

package/front_end/ui/legacy/InspectorView.ts

@@ -155,6 +155,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   private focusRestorer?: WidgetFocusRestorer|null;
   private ownerSplitWidget?: SplitWidget;
   private reloadRequiredInfobar?: Infobar;
+  #debuggedTabReloadRequiredInfobar?: Infobar;
   #selectOverrideFolderInfobar?: Infobar;
   #resizeObserver: ResizeObserver;
   #toggleOrientationButton: ToolbarButton;
@@ -636,7 +637,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   }
 
   displayDebuggedTabReloadRequiredWarning(message: string): void {
-    if (!this.reloadRequiredInfobar) {
+    if (!this.#debuggedTabReloadRequiredInfobar) {
       const infobar = new Infobar(
           InfobarType.INFO, message,
           [
@@ -654,9 +655,9 @@ export class InspectorView extends VBox implements ViewLocationResolver {
           undefined, 'reload-required');
       infobar.setParentView(this);
       this.attachInfobar(infobar);
-      this.reloadRequiredInfobar = infobar;
+      this.#debuggedTabReloadRequiredInfobar = infobar;
       infobar.setCloseCallback(() => {
-        delete this.reloadRequiredInfobar;
+        this.#debuggedTabReloadRequiredInfobar = undefined;
       });
 
       SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -666,8 +667,8 @@ export class InspectorView extends VBox implements ViewLocationResolver {
   }
 
   removeDebuggedTabReloadRequiredWarning(): void {
-    if (this.reloadRequiredInfobar) {
-      this.reloadRequiredInfobar.dispose();
+    if (this.#debuggedTabReloadRequiredInfobar) {
+      this.#debuggedTabReloadRequiredInfobar.dispose();
       SDK.TargetManager.TargetManager.instance().removeModelListener(
           SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
           this.removeDebuggedTabReloadRequiredWarning, this);

package/front_end/ui/legacy/Treeoutline.ts

@@ -1535,6 +1535,7 @@ export class TreeSearch < NodeT extends TreeNode<NodeT>,
 }
 
 class TreeViewTreeElement extends TreeElement {
+  static readonly CLONED_ATTRIBUTES = SDK.DOMModel.ARIA_ATTRIBUTES.union(new Set(['jslog']));
   #clonedAttributes = new Set<string>();
   #clonedClasses = new Set<string>();
 
@@ -1556,7 +1557,7 @@ class TreeViewTreeElement extends TreeElement {
     this.#clonedClasses.clear();
     for (let i = 0; i < this.configElement.attributes.length; ++i) {
       const attribute = this.configElement.attributes.item(i);
-      if (attribute && attribute.name !== 'role' && SDK.DOMModel.ARIA_ATTRIBUTES.has(attribute.name)) {
+      if (attribute && attribute.name !== 'role' && TreeViewTreeElement.CLONED_ATTRIBUTES.has(attribute.name)) {
         this.listItemElement.setAttribute(attribute.name, attribute.value);
         this.#clonedAttributes.add(attribute.name);
       }
@@ -1574,6 +1575,8 @@ class TreeViewTreeElement extends TreeElement {
       this.titleElement.appendChild(HTMLElementWithLightDOMTemplate.cloneNode(child));
     }
 
+    this.hidden = hasBooleanAttribute(this.configElement, 'hidden');
+
     Highlighting.HighlightManager.HighlightManager.instance().apply(this.titleElement);
   }
 
@@ -1582,23 +1585,26 @@ class TreeViewTreeElement extends TreeElement {
   }
 
   remove(): void {
-    const parent = this.parent;
-    if (parent) {
-      parent.removeChild(this);
-      parent.setExpandable(parent.children().length > 0);
-    }
+    removeNode(this);
     TreeViewTreeElement.#elementToTreeElement.delete(this.configElement);
   }
 }
 
-function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
+function getTreeNodes(nodeList: NodeList|Node[]): Array<HTMLLIElement|TreeElementWrapper> {
   return nodeList.values()
       .flatMap(node => {
+        if (node instanceof TreeElementWrapper) {
+          return [node];
+        }
         if (node instanceof HTMLLIElement && node.role === 'treeitem') {
-          return [node, ...node.querySelectorAll<HTMLLIElement>('ul[role="group"] li[role="treeitem"]')];
+          return [
+            node,
+            ...node.querySelectorAll<HTMLLIElement|TreeElementWrapper>(
+                'ul[role="group"] li[role="treeitem"],ul[role="group"] devtools-tree-wrapper')
+          ];
         }
         if (node instanceof HTMLElement) {
-          return node.querySelectorAll<HTMLLIElement>('li[role="treeitem"]');
+          return node.querySelectorAll<HTMLLIElement|TreeElementWrapper>('li[role="treeitem"],devtools-tree-wrapper');
         }
         return [];
       })
@@ -1617,6 +1623,14 @@ function getStyleElements(nodes: NodeList|Node[]): HTMLElement[] {
   });
 }
 
+function removeNode(node: TreeElement): void {
+  const parent = node.parent;
+  if (parent) {
+    parent.removeChild(node);
+    parent.setExpandable(parent.children().length > 0);
+  }
+}
+
 /**
  * A tree element that can be used as progressive enhancement over a <ul> element. A `template` IDL attribute allows
  * additionally to insert the <ul> into a <template>, avoiding rendering anything into light DOM, which is recommended.
@@ -1683,7 +1697,7 @@ function getStyleElements(nodes: NodeList|Node[]): HTMLElement[] {
  * @attribute hide-overflow
  */
 export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
-  static readonly observedAttributes = ['navigation-variant', 'hide-overflow'];
+  static readonly observedAttributes = ['navigation-variant', 'hide-overflow', 'dense'];
   readonly #treeOutline = new TreeOutlineInShadow(undefined, this);
 
   constructor() {
@@ -1710,7 +1724,7 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     return this.#treeOutline;
   }
 
-  #getParentTreeElement(element: HTMLLIElement): {treeElement: TreeElement, expanded: boolean}|null {
+  #getParentTreeElement(element: HTMLLIElement|TreeElementWrapper): {treeElement: TreeElement, expanded: boolean}|null {
     const subtreeRoot = element.parentElement;
     if (!(subtreeRoot instanceof HTMLUListElement)) {
       return null;
@@ -1765,15 +1779,25 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
       }
       const nextElement = nextSibling ? TreeViewTreeElement.get(nextSibling) : null;
       const index = nextElement ? parent.treeElement.indexOfChild(nextElement) : parent.treeElement.children().length;
-      const treeElement = new TreeViewTreeElement(this.#treeOutline, node);
-      const expandable = Boolean(node.querySelector('ul[role="group"]'));
-      treeElement.setExpandable(expandable);
-      parent.treeElement.insertChild(treeElement, index);
-      if (hasBooleanAttribute(node, 'selected')) {
-        treeElement.revealAndSelect(true);
+      let treeElement;
+      if (node instanceof HTMLLIElement) {
+        treeElement = new TreeViewTreeElement(this.#treeOutline, node);
+        const expandable = Boolean(node.querySelector('ul[role="group"]'));
+        treeElement.setExpandable(expandable);
+      } else {
+        treeElement = node.treeElement;
       }
-      if (parent.expanded) {
-        parent.treeElement.expand();
+      if (treeElement) {
+        if (treeElement.parent) {
+          removeNode(treeElement);
+        }
+        parent.treeElement.insertChild(treeElement, index);
+        if (hasBooleanAttribute(node, 'selected')) {
+          treeElement.revealAndSelect(true);
+        }
+        if (parent.expanded) {
+          parent.treeElement.expand();
+        }
       }
     }
     for (const element of getStyleElements(nodes)) {
@@ -1783,7 +1807,11 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
 
   protected override removeNodes(nodes: NodeList): void {
     for (const node of getTreeNodes(nodes)) {
-      TreeViewTreeElement.get(node)?.remove();
+      if (node instanceof HTMLLIElement) {
+        TreeViewTreeElement.get(node)?.remove();
+      } else if (node.treeElement) {
+        removeNode(node.treeElement);
+      }
     }
   }
 
@@ -1803,16 +1831,29 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     return hasBooleanAttribute(this, 'navigation-variant');
   }
 
+  set dense(dense: boolean) {
+    this.toggleAttribute('dense', dense);
+  }
+
+  get dense(): boolean {
+    return hasBooleanAttribute(this, 'dense');
+  }
+
   attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
     if (oldValue === newValue) {
       return;
     }
+    const booleanValueIsTrue = newValue !== null && newValue !== 'false';
     switch (name) {
       case 'navigation-variant':
-        this.#treeOutline.setVariant(newValue !== 'false' ? TreeVariant.NAVIGATION_TREE : TreeVariant.OTHER);
+        this.#treeOutline.setVariant(booleanValueIsTrue ? TreeVariant.NAVIGATION_TREE : TreeVariant.OTHER);
         break;
       case 'hide-overflow':
-        this.#treeOutline.setHideOverflow(newValue !== 'false');
+        this.#treeOutline.setHideOverflow(booleanValueIsTrue);
+        break;
+      case 'dense':
+        this.#treeOutline.setDense(booleanValueIsTrue);
+        break;
     }
   }
 }
@@ -1831,11 +1872,29 @@ export namespace TreeViewElement {
   }
 }
 
+export class TreeElementWrapper extends HTMLElement {
+  #treeElement?: TreeElement;
+  set treeElement(treeElement: TreeElement) {
+    if (this.#treeElement?.parent) {
+      const parent = this.#treeElement.parent;
+      const index = parent.indexOfChild(this.#treeElement);
+      parent.removeChildAtIndex(index);
+      parent.insertChild(treeElement, index);
+    }
+    this.#treeElement = treeElement;
+  }
+  get treeElement(): TreeElement|undefined {
+    return this.#treeElement;
+  }
+}
+
 customElements.define('devtools-tree', TreeViewElement);
+customElements.define('devtools-tree-wrapper', TreeElementWrapper);
 
 declare global {
   interface HTMLElementTagNameMap {
     'devtools-tree': TreeViewElement;
+    'devtools-tree-wrapper': TreeElementWrapper;
   }
 }
 

package/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css

@@ -16,7 +16,8 @@
   overflow-x: auto;
 }
 
-.object-properties-section li {
+.object-properties-section li,
+li.object-properties-section  {
   user-select: text;
 
   &::before {

package/front_end/ui/legacy/softDropDown.css

@@ -17,6 +17,9 @@
 
 .item.highlighted {
   background-color: var(--sys-color-state-hover-on-subtle);
+  outline: var(--sys-size-2) solid var(--sys-color-primary);
+  outline-offset: calc(-1 * var(--sys-size-2));
+  border-radius: var(--sys-shape-corner-extra-small);
 }
 
 @media (forced-colors: active) {
@@ -25,7 +28,7 @@
   }
 
   .item-list {
-    border: 1px solid ButtonText;
+    border: var(--sys-size-1) solid ButtonText;
     background-color: ButtonFace;
   }
 
@@ -33,5 +36,8 @@
     forced-color-adjust: none;
     color: HighlightText;
     background-color: Highlight;
+    outline: var(--sys-size-2) solid Highlight;
+    outline-offset: calc(-1 * var(--sys-size-2));
+    border-radius: var(--sys-shape-corner-extra-small);
   }
 }

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -3167,6 +3167,9 @@ export const knownContextValues = new Set([
   'request-header-sec-fetch-mode',
   'request-header-user-agent',
   'request-headers',
+  'request-info-form-data-category-expanded',
+  'request-info-query-string-category-expanded',
+  'request-info-request-payload-category-expanded',
   'request-payload',
   'request-types',
   'required',

package/mcp/mcp.ts

@@ -23,9 +23,11 @@ export type * as CDPConnection from '../front_end/core/protocol_client/CDPConnec
 export {ConnectionTransport} from '../front_end/core/protocol_client/ConnectionTransport.js';
 export * as ProtocolClient from '../front_end/core/protocol_client/protocol_client.js';
 export {DebuggerModel} from '../front_end/core/sdk/DebuggerModel.js';
+export {RuntimeModel} from '../front_end/core/sdk/RuntimeModel.js';
 export {Target} from '../front_end/core/sdk/Target.js';
 export {TargetManager} from '../front_end/core/sdk/TargetManager.js';
 export * as Foundation from '../front_end/foundation/foundation.js';
+export * as Protocol from '../front_end/generated/protocol.js';
 export {
   PerformanceInsightFormatter
 } from '../front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.js';

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1578486"
+  "version": "1.0.1578729"
 }