chrome-devtools-frontend 1.0.1587905 → 1.0.1589336

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -224,13 +224,7 @@ export class SoftContextMenu {
     if (item.tooltip) {
       Tooltip.install(menuItemElement, item.tooltip);
     }
-    const detailsForElement: ElementMenuDetails = {
-      actionId: undefined,
-      isSeparator: undefined,
-      customElement: undefined,
-      subItems: undefined,
-      subMenuTimer: undefined,
-    };
+    const detailsForElement: ElementMenuDetails = {};
 
     // Only add a jslog context if the item has a label. Menu items without a
     // label are containers for custom elements, which are responsible for adding
@@ -309,10 +303,6 @@ export class SoftContextMenu {
     ARIAUtils.markAsMenuItemSubMenu(menuItemElement);
     this.detailsForElementMap.set(menuItemElement, {
       subItems: item.subItems,
-      actionId: undefined,
-      isSeparator: undefined,
-      customElement: undefined,
-      subMenuTimer: undefined,
     });
 
     // If the menu contains a checkbox, add checkbox space in front of the label to align the items
@@ -344,11 +334,7 @@ export class SoftContextMenu {
     const separatorElement = document.createElement('div');
     separatorElement.classList.add('soft-context-menu-separator');
     this.detailsForElementMap.set(separatorElement, {
-      subItems: undefined,
-      actionId: undefined,
       isSeparator: true,
-      customElement: undefined,
-      subMenuTimer: undefined,
     });
     separatorElement.createChild('div', 'separator-line');
     return separatorElement;

package/front_end/ui/legacy/TabbedPane.ts

@@ -303,7 +303,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
       this.hideTabElement(tab);
     }
 
-    const eventData: EventData = {prevTabId: undefined, tabId: id, view: tab.view, isUserGesture: userGesture};
+    const eventData: EventData = {tabId: id, view: tab.view, isUserGesture: userGesture};
     this.dispatchEventToListeners(Events.TabClosed, eventData);
     return true;
   }
@@ -1026,7 +1026,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
     this.#tabs.splice(index, 0, tab);
 
-    const eventData: EventData = {prevTabId: undefined, tabId: tab.id, view: tab.view, isUserGesture: undefined};
+    const eventData: EventData = {tabId: tab.id, view: tab.view};
     this.dispatchEventToListeners(Events.TabOrderChanged, eventData);
   }
 

package/front_end/ui/legacy/Treeoutline.ts

@@ -1648,11 +1648,18 @@ function removeNode(node: TreeElement): void {
  *          <ul role="group">
  *            Node with subtree
  *            <li role="treeitem" jslog-context="context">
- *              <ul role="group" hidden>
+ *              <ul role="group">
  *                <li role="treeitem">Tree Node Text in collapsed subtree</li>
  *                <li role="treeitem">Tree Node Text in collapsed subtree</li>
  *              </ul>
  *           </li>
+ *           <li role="treeitem" open>
+ *             Tree Node Text in expanded subtree
+ *              <ul role="group">
+ *                <li role="treeitem">Tree Node Text in expanded subtree</li>
+ *                <li role="treeitem">Tree Node Text in expanded subtree</li>
+ *              </ul>
+ *           </li>
  *           <li selected role="treeitem">Tree Node Text in a selected-by-default node</li>
  *         </ul>
  *       </li>
@@ -1662,8 +1669,8 @@ function removeNode(node: TreeElement): void {
  *
  * ```
  * where a <li role="treeitem"> element defines a tree node and its contents (the <li> is the `config element` for this
- * tree node). If a tree node contains a <ul role="group">, that defines a subtree under that tree node. The `hidden`
- * attribute on the <ul> defines whether that subtree should render as collapsed. Note that node expanding/collapsing do
+ * tree node). If a tree node contains a <ul role="group">, that defines a subtree under that tree node. The `open`
+ * attribute on the <li> defines whether that subtree should render as expanded. Note that node expanding/collapsing do
  * not reflect this state back to the attribute on the config element, those state changes are rather sent out as
  * `expand` events on the config element.
  *
@@ -1674,7 +1681,7 @@ function removeNode(node: TreeElement): void {
  * - `selected`: Whether the tree node should be rendered as selected.
  * - `jslog-context`: The jslog context for the tree element.
  * - `aria-*`: All aria attributes defined on the config element are cloned over.
- * - `hidden`: On the <ul>, declares whether the subtree should be rendererd as expanded or collapsed.
+ * - `open`: On the <li>, declares whether the subtree should be rendererd as expanded or collapsed.
  *
  * ## Event Handling ##
  *
@@ -1735,7 +1742,7 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     if (subtreeRoot.role !== 'group' || !subtreeRoot.parentElement) {
       return null;
     }
-    const expanded = !hasBooleanAttribute(subtreeRoot, 'hidden');
+    const expanded = hasBooleanAttribute(subtreeRoot.parentElement, 'open');
     const treeElement = TreeViewTreeElement.get(subtreeRoot.parentElement);
     return treeElement ? {expanded, treeElement} : null;
   }
@@ -1756,11 +1763,11 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     if (node === treeNode && attributeName === 'selected' && hasBooleanAttribute(treeNode, 'selected')) {
       treeElement.revealAndSelect(true);
     }
-    if (attributeName === 'hidden' && node instanceof HTMLUListElement && node.role === 'group') {
-      if (hasBooleanAttribute(node, 'hidden')) {
-        treeElement.collapse();
-      } else {
+    if (node === treeNode && attributeName === 'open') {
+      if (hasBooleanAttribute(treeNode, 'open')) {
         treeElement.expand();
+      } else {
+        treeElement.collapse();
       }
     }
   }

package/front_end/ui/legacy/UIUtils.ts

@@ -1808,10 +1808,7 @@ function focusChanged(event: Event): void {
 export function createShadowRootWithCoreStyles(element: Element, options: {
   cssFile?: CSSInJS[]|CSSInJS,
   delegatesFocus?: boolean,
-} = {
-  delegatesFocus: undefined,
-  cssFile: undefined,
-}): ShadowRoot {
+} = {}): ShadowRoot {
   const {cssFile, delegatesFocus} = options;
 
   const shadowRoot = element.attachShadow({mode: 'open', delegatesFocus});

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -876,8 +876,12 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
 
   private loadPalettes(): void {
     this.palettes.set(MaterialPalette.title, MaterialPalette);
-    const defaultCustomPalette:
-        Palette = {title: 'Custom', colors: [], colorNames: [], mutable: true, matchUserFormat: undefined};
+    const defaultCustomPalette: Palette = {
+      title: 'Custom',
+      colors: [],
+      colorNames: [],
+      mutable: true,
+    };
     this.customPaletteSetting =
         Common.Settings.Settings.instance().createSetting('custom-color-palette', defaultCustomPalette);
     const customPalette = this.customPaletteSetting.get();
@@ -1538,7 +1542,6 @@ export class PaletteGenerator {
       colors: [...paletteColors.keys()].sort(hueComparator),
       colorNames: [],
       mutable: false,
-      matchUserFormat: undefined,
     });
   }
 

package/front_end/ui/legacy/components/inline_editor/ColorSwatch.ts

@@ -53,45 +53,45 @@ export class ClickEvent extends Event {
 }
 
 export class ColorSwatch extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #tooltip: string = i18nString(UIStrings.shiftclickToChangeColorFormat);
+  private readonly shadow = this.attachShadow({mode: 'open'});
+  private tooltip: string = i18nString(UIStrings.shiftclickToChangeColorFormat);
   #color: Common.Color.Color|null = null;
-  #readonly = false;
+  private readonly = false;
 
   constructor(tooltip?: string) {
     super();
     if (tooltip) {
-      this.#tooltip = tooltip;
+      this.tooltip = tooltip;
     }
     this.tabIndex = -1;
-    this.addEventListener('keydown', e => this.#onActivate(e));
+    this.addEventListener('keydown', e => this.onActivate(e));
   }
 
   static isColorSwatch(element: Element): element is ColorSwatch {
     return element.localName === 'devtools-color-swatch';
   }
 
-  get readonly(): boolean {
-    return this.#readonly;
-  }
-
-  set readonly(readonly: boolean) {
-    if (this.#readonly === readonly) {
+  setReadonly(readonly: boolean): void {
+    if (this.readonly === readonly) {
       return;
     }
 
-    this.#readonly = readonly;
+    this.readonly = readonly;
     if (this.#color) {
-      this.color = this.#color;
+      this.renderColor(this.#color);
     }
   }
 
+  set color(color: Common.Color.Color) {
+    this.renderColor(color);
+  }
+
   get color(): Common.Color.Color|null {
     return this.#color;
   }
 
   get anchorBox(): AnchorBox|null {
-    const swatch = this.#shadow.querySelector('.color-swatch');
+    const swatch = this.shadow.querySelector('.color-swatch');
     return swatch ? swatch.boxInWindow() : null;
   }
 
@@ -103,12 +103,12 @@ export class ColorSwatch extends HTMLElement {
    * Render this swatch given a color object or text to be parsed as a color.
    * @param color The color object or string to use for this swatch.
    */
-  set color(color: Common.Color.Color) {
+  renderColor(color: Common.Color.Color): void {
     this.#color = color;
 
     const colorSwatchClasses = Lit.Directives.classMap({
       'color-swatch': true,
-      readonly: this.#readonly,
+      readonly: this.readonly,
     });
 
     // Disabled until https://crbug.com/1079231 is fixed.
@@ -120,20 +120,19 @@ export class ColorSwatch extends HTMLElement {
     Lit.render(
       html`<style>${colorSwatchStyles}</style><span
           class=${colorSwatchClasses}
-          title=${this.#tooltip}><span
+          title=${this.tooltip}><span
             class="color-swatch-inner"
             style="background-color: ${color.asString()};"
             jslog=${VisualLogging.showStyleEditor('color').track({click: true})}
-            @click=${this.#onActivate}
-            @mousedown=${this.#consume}
-            @dblclick=${this.#consume}></span></span>`,
-      this.#shadow, {host: this});
+            @click=${this.onActivate}
+            @mousedown=${this.consume}
+            @dblclick=${this.consume}></span></span>`,
+      this.shadow, {host: this});
     // clang-format on
-    this.dispatchEvent(new ColorChangedEvent(color));
   }
 
-  #onActivate(e: KeyboardEvent|MouseEvent): void {
-    if (this.#readonly) {
+  private onActivate(e: KeyboardEvent|MouseEvent): void {
+    if (this.readonly) {
       return;
     }
 
@@ -144,19 +143,24 @@ export class ColorSwatch extends HTMLElement {
 
     if (e.shiftKey) {
       e.stopPropagation();
-      this.#showFormatPicker(e);
+      this.showFormatPicker(e);
       return;
     }
 
     this.dispatchEvent(new ClickEvent());
-    this.#consume(e);
+    this.consume(e);
   }
 
-  #consume(e: Event): void {
+  private consume(e: Event): void {
     e.stopPropagation();
   }
 
-  #showFormatPicker(e: Event): void {
+  setColor(color: Common.Color.Color): void {
+    this.renderColor(color);
+    this.dispatchEvent(new ColorChangedEvent(color));
+  }
+
+  private showFormatPicker(e: Event): void {
     if (!this.#color) {
       return;
     }

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -150,12 +150,14 @@ interface NodeChildren {
 
 abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrapper<ObjectTreeNodeBase.EventTypes> {
   #children?: NodeChildren;
+  protected filter: {includeNullOrUndefinedValues: boolean, regex: RegExp|null}|null = null;
   protected extraProperties: ObjectTreeNode[] = [];
   expanded = false;
   constructor(
       readonly parent?: ObjectTreeNodeBase,
       readonly propertiesMode: ObjectPropertiesMode = ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED) {
     super();
+    this.filter = parent?.filter ?? null;
   }
 
   // Performs a pre-order tree traversal over the populated children. If any children need to be populated, callers must
@@ -189,6 +191,15 @@ abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrapper<Obj
     }
   }
 
+  setFilter(filter: {includeNullOrUndefinedValues: boolean, regex: RegExp|null}|null): void {
+    this.filter = filter;
+    this.dispatchEventToListeners(ObjectTreeNodeBase.Events.FILTER_CHANGED);
+    this.#walk().forEach(c => {
+      c.filter = filter;
+      c.dispatchEventToListeners(ObjectTreeNodeBase.Events.FILTER_CHANGED);
+    });
+  }
+
   abstract get object(): SDK.RemoteObject.RemoteObject|undefined;
 
   removeChildren(): void {
@@ -222,9 +233,13 @@ abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrapper<Obj
   }
 
   async populateChildrenIfNeeded(): Promise<NodeChildren> {
-    if (this.#children) {
-      return this.#children;
+    if (!this.#children) {
+      this.#children = await this.populateChildrenIfNeededImpl();
     }
+    return this.#children;
+  }
+
+  protected async populateChildrenIfNeededImpl(): Promise<NodeChildren> {
     const object = this.object;
     if (!object) {
       return {};
@@ -315,10 +330,12 @@ namespace ObjectTreeNodeBase {
   export const enum Events {
     VALUE_CHANGED = 'value-changed',
     CHILDREN_CHANGED = 'children-changed',
+    FILTER_CHANGED = 'filter-changed',
   }
   export interface EventTypes {
     [Events.VALUE_CHANGED]: void;
     [Events.CHILDREN_CHANGED]: void;
+    [Events.FILTER_CHANGED]: void;
   }
 }
 
@@ -348,10 +365,7 @@ class ArrayGroupTreeNode extends ObjectTreeNodeBase {
     this.#range = range;
   }
 
-  override async populateChildrenIfNeeded(): Promise<NodeChildren> {
-    if (this.children) {
-      return this.children;
-    }
+  override async populateChildrenIfNeededImpl(): Promise<NodeChildren> {
     if (this.#range.count > ArrayGroupingTreeElement.bucketThreshold) {
       const ranges = await arrayRangeGroups(this.object, this.#range.fromIndex, this.#range.toIndex);
       const arrayRanges = ranges?.ranges.map(
@@ -405,6 +419,10 @@ export class ObjectTreeNode extends ObjectTreeNodeBase {
     return this.property.value;
   }
 
+  get isFiltered(): boolean {
+    return Boolean(this.filter && !this.property.match(this.filter));
+  }
+
   get name(): string {
     return this.property.name;
   }
@@ -1274,8 +1292,10 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     this.#widget = new ObjectPropertyWidget();
     this.property = property;
+    this.hidden = property.isFiltered;
     this.property.addEventListener(ObjectTreeNodeBase.Events.VALUE_CHANGED, this.#updateValue, this);
     this.property.addEventListener(ObjectTreeNodeBase.Events.CHILDREN_CHANGED, this.#updateChildren, this);
+    this.property.addEventListener(ObjectTreeNodeBase.Events.FILTER_CHANGED, this.#updateFilter, this);
     this.toggleOnClick = true;
     this.linkifier = linkifier;
     this.maxNumPropertiesToShow = InitialVisibleChildrenLimit;
@@ -1355,6 +1375,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   revertHighlightChanges(): void {
     this.#widget.revertHighlightChanges();
   }
+
   setSearchRegex(regex: RegExp, additionalCssClassName?: string): boolean {
     return this.#widget.setSearchRegex(regex, additionalCssClassName);
   }
@@ -1457,6 +1478,10 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     void this.onpopulate();
   }
 
+  #updateFilter(): void {
+    this.hidden = this.property.isFiltered;
+  }
+
   getContextMenu(event: Event): UI.ContextMenu.ContextMenu {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.appendApplicableItems(this);

package/front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -156,7 +156,6 @@ export class CommandMenu {
       jslogContext: action.id(),
       executeHandler: action.execute.bind(action),
       userActionCode,
-      availableHandler: undefined,
       isPanelOrDrawer: panelOrDrawer,
     });
   }
@@ -191,7 +190,6 @@ export class CommandMenu {
       jslogContext: id,
       executeHandler,
       userActionCode,
-      availableHandler: undefined,
       isPanelOrDrawer: panelOrDrawer,
       featurePromotionId,
     });

package/front_end/ui/legacy/components/quick_open/HelpQuickOpen.ts

@@ -77,6 +77,5 @@ registerProvider({
   provider: jslogContext => Promise.resolve(new HelpQuickOpen(jslogContext)),
   helpTitle: () => 'Help',
   titlePrefix: () => 'Help',
-  titleSuggestion: undefined,
   jslogContext: 'help'
 });

package/front_end/ui/legacy/components/quick_open/quick_open-meta.ts

@@ -111,11 +111,9 @@ UI.ActionRegistration.registerActionExtension({
 UI.ContextMenu.registerItem({
   location: UI.ContextMenu.ItemLocation.MAIN_MENU_DEFAULT,
   actionId: 'quick-open.show-command-menu',
-  order: undefined,
 });
 
 UI.ContextMenu.registerItem({
   location: UI.ContextMenu.ItemLocation.MAIN_MENU_DEFAULT,
   actionId: 'quick-open.show',
-  order: undefined,
 });

package/front_end/ui/legacy/components/source_frame/XMLView.ts

@@ -144,12 +144,13 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     return html`
       <li role="treeitem"
           ?selected=${input.jumpToNextSearchResult?.node === node}
-          @expand=${onExpand}>
+          @expand=${onExpand}
+          ?open=${node.expanded || input.jumpToNextSearchResult?.node === node}>
         <devtools-highlight ranges=${highlights} current-range=${selected}>
           ${htmlView(node)}
         </devtools-highlight>
         ${node.children().length ? html`
-          <ul role="group" ?hidden=${!node.expanded && input.jumpToNextSearchResult?.node !== node}>
+          <ul role="group">
             ${populateSubtrees || input.search ? subtree(node) : Lit.nothing}
           </ul>` : Lit.nothing}
       </li>`;

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

@@ -76,11 +76,11 @@ export class ImagePreview {
       originalImageURL: Platform.DevToolsPath.UrlString,
       showDimensions: boolean,
       options: {
-        precomputedFeatures: (PrecomputedFeatures|undefined),
-        imageAltText: (string|undefined),
         align: Align,
+        precomputedFeatures?: PrecomputedFeatures,
+        imageAltText?: string,
         hideFileData?: boolean,
-      }|undefined = {precomputedFeatures: undefined, imageAltText: undefined, align: Align.CENTER},
+      } = {align: Align.CENTER},
       ): Promise<HTMLDivElement|null> {
     const {precomputedFeatures, imageAltText, align} = options;
 

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -358,6 +358,7 @@ export const knownContextValues = new Set([
   'ai-code-generation-teaser.show-disclaimer-info-tooltip',
   'ai-code-generation-upgrade-dialog.continue',
   'ai-code-generation-upgrade-dialog.manage-in-settings',
+  'ai-code-generation-used',
   'ai-explorer',
   'ai_assistance',
   'align-content',
@@ -765,6 +766,7 @@ export const knownContextValues = new Set([
   'clear-palette',
   'clear-replace-input',
   'clear-search-input',
+  'clear-speculative-loads',
   'clear-storage',
   'clear-storage-cache-storage',
   'clear-storage-cookies',
@@ -825,6 +827,8 @@ export const knownContextValues = new Set([
   'column-rule-edge-start-inset',
   'column-rule-edge-start-outset',
   'column-rule-inset',
+  'column-rule-inset-end',
+  'column-rule-inset-start',
   'column-rule-interior-end-inset',
   'column-rule-interior-end-outset',
   'column-rule-interior-inset',
@@ -3250,6 +3254,8 @@ export const knownContextValues = new Set([
   'row-rule-edge-start-inset',
   'row-rule-edge-start-outset',
   'row-rule-inset',
+  'row-rule-inset-end',
+  'row-rule-inset-start',
   'row-rule-interior-end-inset',
   'row-rule-interior-end-outset',
   'row-rule-interior-inset',
@@ -3272,6 +3278,8 @@ export const knownContextValues = new Set([
   'rule-color',
   'rule-edge-inset',
   'rule-inset',
+  'rule-inset-end',
+  'rule-inset-start',
   'rule-interior-inset',
   'rule-outset',
   'rule-overlap',

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1587905"
+  "version": "1.0.1589336"
 }