chrome-devtools-frontend 1.0.948295 → 1.0.949424

package/front_end/panels/console/ConsolePrompt.ts

@@ -259,7 +259,6 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     } else {
       this.editor.dispatch({scrollIntoView: true});
     }
-    this.enterProcessedForTest();
     return true;
   }
 
@@ -283,9 +282,6 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
   }
 
-  private enterProcessedForTest(): void {
-  }
-
   private editorUpdate(update: CodeMirror.ViewUpdate): void {
     if (update.docChanged ||
         CodeMirror.selectedCompletion(update.state) !== CodeMirror.selectedCompletion(update.startState)) {

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -86,13 +86,7 @@ async function getChildren(node: SDK.AccessibilityModel.AccessibilityNode):
     const localRoot = await getRootNode(frameId);
     return [localRoot];
   }
-  if (node.hasUnloadedChildren()) {
-    await node.accessibilityModel().requestAXChildren(node.id(), node.getFrameId() || undefined);
-    if (node.numChildren() !== node.children().length) {
-      throw new Error('Once loaded, number of children and length of children must match.');
-    }
-  }
-  return node.children();
+  return node.accessibilityModel().requestAXChildren(node.id(), node.getFrameId() || undefined);
 }
 
 export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.AccessibilityNode): Promise<AXTreeNode[]> {

package/front_end/panels/elements/AccessibilityTreeView.ts

@@ -120,16 +120,14 @@ export class AccessibilityTreeView extends UI.Widget.VBox implements
 
   // Selected node in the DOM tree has changed.
   async selectedNodeChanged(inspectedNode: SDK.DOMModel.DOMNode): Promise<void> {
-    if (this.isShowing()) {
+    if (this.isShowing() || (inspectedNode === this.inspectedDOMNode)) {
       return;
     }
     if (inspectedNode.ownerDocument && (inspectedNode.nodeName() === 'HTML' || inspectedNode.nodeName() === 'BODY')) {
-      inspectedNode = inspectedNode.ownerDocument;
+      this.inspectedDOMNode = inspectedNode.ownerDocument;
+    } else {
+      this.inspectedDOMNode = inspectedNode;
     }
-    if (inspectedNode === this.inspectedDOMNode) {
-      return;
-    }
-    this.inspectedDOMNode = inspectedNode;
   }
 
   treeUpdated({data}: Common.EventTarget

package/front_end/panels/elements/PropertiesWidget.ts

@@ -31,25 +31,67 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import propertiesWidgetStyles from './propertiesWidget.css.js';
-import type * as Common from '../../core/common/common.js';
+import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import propertiesWidgetStyles from './propertiesWidget.css.js';
+import {StylesSidebarPane} from './StylesSidebarPane.js';
+
 const OBJECT_GROUP_NAME = 'properties-sidebar-pane';
 
+const UIStrings = {
+  /**
+  * @description Placeholder text for a text input used to filter which DOM element properties show up in
+  * the Properties tab of the Elements panel.
+  */
+  filter: 'Filter',
+  /**
+  * @description ARIA accessible name for the text input used to filter which DOM element properties show up
+  * in the Properties tab of the Elements panel.
+  */
+  filterProperties: 'Filter Properties',
+  /**
+  * @description Text on the checkbox in the Properties tab of the Elements panel, which controls whether
+  * all properties of the currently selected DOM element are shown, or only meaningful properties (i.e.
+  * excluding properties whose values aren't set for example).
+  */
+  showAll: 'Show all',
+  /**
+   * @description Tooltip on the checkbox in the Properties tab of the Elements panel, which controls whether
+  * all properties of the currently selected DOM element are shown, or only meaningful properties (i.e.
+  * excluding properties whose values aren't set for example).
+   */
+  showAllTooltip: 'When unchecked, only properties whose values are neither null nor undefined will be shown',
+  /**
+  * @description Text shown to the user when a filter is applied in the Properties tab of the Elements panel, but
+  * no properties matched the filter and thus no results were returned.
+  */
+  noMatchingProperty: 'No matching property',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/elements/PropertiesWidget.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 let propertiesWidgetInstance: PropertiesWidget;
 
 export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
   private node: SDK.DOMModel.DOMNode|null;
+  private readonly showAllPropertiesSetting: Common.Settings.Setting<boolean>;
+  private filterRegex: RegExp|null = null;
+  private readonly noMatchesElement: HTMLElement;
   private readonly treeOutline: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline;
   private readonly expandController: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController;
   private lastRequestedNode?: SDK.DOMModel.DOMNode;
   constructor() {
     super(true /* isWebComponent */);
 
+    this.showAllPropertiesSetting = Common.Settings.Settings.instance().createSetting('showAllProperties', false);
+    this.showAllPropertiesSetting.addChangeListener(this.filterList.bind(this));
+
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DOMModel.DOMModel, SDK.DOMModel.Events.AttrModified, this.onNodeChange, this);
     SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -61,6 +103,20 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.setNode, this);
     this.node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
 
+    const hbox = this.contentElement.createChild('div', 'hbox properties-widget-toolbar');
+    const filterContainerElement = hbox.createChild('div', 'properties-widget-filter-box');
+    const filterInput = StylesSidebarPane.createPropertyFilterElement(
+        i18nString(UIStrings.filter), hbox, this.filterProperties.bind(this));
+    UI.ARIAUtils.setAccessibleName(filterInput, i18nString(UIStrings.filterProperties));
+    filterContainerElement.appendChild(filterInput);
+
+    const toolbar = new UI.Toolbar.Toolbar('styles-pane-toolbar', hbox);
+    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
+        this.showAllPropertiesSetting, i18nString(UIStrings.showAllTooltip), i18nString(UIStrings.showAll)));
+
+    this.noMatchesElement = this.contentElement.createChild('div', 'gray-info-message hidden');
+    this.noMatchesElement.textContent = i18nString(UIStrings.noMatchingProperty);
+
     this.treeOutline = new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline({readOnly: true});
     this.treeOutline.setShowSelectionOnKeyboardFocus(/* show */ true, /* preventTabOrder */ false);
     this.expandController =
@@ -73,6 +129,7 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
 
     this.update();
   }
+
   static instance(opts: {
     forceNew: boolean|null,
   }|undefined = {forceNew: null}): PropertiesWidget {
@@ -84,6 +141,46 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     return propertiesWidgetInstance;
   }
 
+  private filterProperties(this: PropertiesWidget, regex: RegExp|null): void {
+    this.filterRegex = regex;
+    this.filterList();
+  }
+
+  private filterList(): void {
+    const isHidden = (property: SDK.RemoteObject.RemoteObjectProperty): boolean => {
+      if (!this.showAllPropertiesSetting.get()) {
+        if (SDK.RemoteObject.RemoteObject.isNullOrUndefined(property.value)) {
+          return true;
+        }
+        if (property.value?.type === Protocol.Runtime.RemoteObjectType.Undefined ||
+            (property.value?.type === Protocol.Runtime.RemoteObjectType.Object &&
+             property.value.subtype === Protocol.Runtime.RemoteObjectSubtype.Null)) {
+          return true;
+        }
+      }
+      if (this.filterRegex !== null) {
+        if (this.filterRegex.test(property.name)) {
+          return false;
+        }
+        if (this.filterRegex.test(property.value?.description ?? '')) {
+          return false;
+        }
+        return true;
+      }
+      return false;
+    };
+    let noMatches = true;
+    for (const element of this.treeOutline.rootElement().children()) {
+      const {property} = element as ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement;
+      const hidden = isHidden(property);
+      if (!hidden) {
+        noMatches = false;
+      }
+      element.hidden = hidden;
+    }
+    this.noMatchesElement.classList.toggle('hidden', !noMatches);
+  }
+
   private setNode(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
     this.node = event.data;
     this.update();
@@ -106,8 +203,15 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
       return;
     }
 
-    await ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populate(
-        this.treeOutline.rootElement(), object, true, true, undefined, undefined);
+    const treeElement = this.treeOutline.rootElement();
+    let {properties} = await SDK.RemoteObject.RemoteObject.loadFromObjectPerProto(object, true /* generatePreview */);
+    treeElement.removeChildren();
+    if (properties === null) {
+      properties = [];
+    }
+    ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(
+        treeElement, properties, null, true /* skipProto */, true /* skipGettersAndSetters */, object);
+    this.filterList();
   }
 
   private onNodeChange(event: Common.EventTarget
@@ -122,6 +226,7 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     }
     this.update();
   }
+
   wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([propertiesWidgetStyles]);

package/front_end/panels/elements/propertiesWidget.css

@@ -8,3 +8,37 @@
   padding: 2px 0 2px 5px;
   flex: none;
 }
+
+.properties-widget-toolbar {
+  border-bottom: 1px solid var(--color-details-hairline-light);
+  flex-shrink: 0;
+}
+
+.properties-widget-filter-box {
+  flex: auto;
+  display: flex;
+}
+
+.properties-widget-filter-box > input {
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
+  border: none;
+  width: 100%;
+  background: var(--color-background);
+  padding-left: 4px;
+  margin: 3px;
+}
+
+.properties-widget-filter-box > input:focus,
+.properties-widget-filter-box > input:not(:placeholder-shown) {
+  box-shadow: var(--legacy-focus-ring-active-shadow);
+}
+
+.properties-widget-filter-box > input::placeholder {
+  color: var(--color-text-disabled);
+}
+
+@media (forced-colors: active) {
+  .properties-widget-filter-box > input {
+    border: 1px solid ButtonText;
+  }
+}

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -402,7 +402,7 @@ export class DeviceModeToolbar {
   private appendScaleMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
     if (this.model.type() === EmulationModel.DeviceModeModel.Type.Device) {
       contextMenu.footerSection().appendItem(
-          i18nString(UIStrings.fitToWindowF, {PH1: this.getPrettyZoomPercentage()}),
+          i18nString(UIStrings.fitToWindowF, {PH1: this.getPrettyFitZoomPercentage()}),
           this.onScaleMenuChanged.bind(this, this.model.fitScale()), false);
     }
     contextMenu.footerSection().appendCheckboxItem(
@@ -693,6 +693,10 @@ export class DeviceModeToolbar {
     }
   }
 
+  private getPrettyFitZoomPercentage(): string {
+    return `${(this.model.fitScale() * 100).toFixed(0)}`;
+  }
+
   private getPrettyZoomPercentage(): string {
     return `${(this.model.scale() * 100).toFixed(0)}`;
   }

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -32,6 +32,16 @@ const UIStrings = {
    * on an anchor HTML element ("a link").
    */
   invalidSourceEventId: 'Invalid `attributionsourceeventid`',
+  /**
+   * @description Label for the column showing the invalid value used as the 'attributionexpiry' attribute
+   * on an anchor HTML element ("a link").
+   */
+  invalidSourceExpiry: 'Invalid `attributionexpiry`',
+  /**
+   * @description Label for the column showing the invalid value used as the 'attributionpriority' attribute
+   * on an anchor HTML element ("a link").
+   */
+  invalidSourcePriority: 'Invalid `attributionsourcepriority`',
   /**
    * @description Label for the column showing the invalid URL used in an HTML anchor element ("a link").
    * A origin is (roughly said) the front part of a URL.
@@ -47,6 +57,16 @@ const UIStrings = {
    * 'event-source-trigger-data' query parameter.
    */
   invalidEventSourceTriggerData: 'Invalid `event-source-trigger-data`',
+  /**
+   * @description Label for the column showing the invalid value used for the
+   * 'priority' query parameter.
+   */
+  invalidTriggerPriority: 'Invalid `priority`',
+  /**
+   * @description Label for the column showing the invalid value used for the
+   * 'dedup-key' query parameter.
+   */
+  invalidTriggerDedupKey: 'Invalid `dedup-key`',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/issues/AttributionReportingIssueDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -94,15 +114,34 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         this.appendColumnTitle(header, i18nString(UIStrings.invalidTriggerData));
         break;
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidEventSourceTriggerData:
       case IssuesManager.AttributionReportingIssue.IssueCode.AttributionEventSourceTriggerDataTooLarge:
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         this.appendColumnTitle(header, i18nString(UIStrings.invalidEventSourceTriggerData));
         break;
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidTriggerPriority:
+        this.appendColumnTitle(header, i18nString(UIStrings.request));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidTriggerPriority));
+        break;
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidTriggerDedupKey:
+        this.appendColumnTitle(header, i18nString(UIStrings.request));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidTriggerDedupKey));
+        break;
       case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceEventId:
         this.appendColumnTitle(header, i18nString(UIStrings.frame));
         this.appendColumnTitle(header, i18nString(UIStrings.element));
         this.appendColumnTitle(header, i18nString(UIStrings.invalidSourceEventId));
         break;
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceExpiry:
+        this.appendColumnTitle(header, i18nString(UIStrings.frame));
+        this.appendColumnTitle(header, i18nString(UIStrings.element));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidSourceExpiry));
+        break;
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourcePriority:
+        this.appendColumnTitle(header, i18nString(UIStrings.frame));
+        this.appendColumnTitle(header, i18nString(UIStrings.element));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidSourcePriority));
+        break;
       case IssuesManager.AttributionReportingIssue.IssueCode.MissingAttributionData:
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         break;
@@ -144,11 +183,16 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
       case IssuesManager.AttributionReportingIssue.IssueCode.AttributionEventSourceTriggerDataTooLarge:
       case IssuesManager.AttributionReportingIssue.IssueCode.AttributionUntrustworthyOrigin:
       case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionData:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidEventSourceTriggerData:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidTriggerPriority:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidTriggerDedupKey:
         this.appendRequestOrEmptyCell(element, details.request);
         this.appendIssueDetailCell(element, details.invalidParameter || '');
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.AttributionSourceUntrustworthyFrameOrigin:
       case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceEventId:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourceExpiry:
+      case IssuesManager.AttributionReportingIssue.IssueCode.InvalidAttributionSourcePriority:
         this.appendFrameOrEmptyCell(element, issue);
         await this.appendElementOrEmptyCell(element, issue);
         this.appendIssueDetailCell(element, details.invalidParameter || '');

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -554,6 +554,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
           aria-controls="form-container"
           @disabled=${this.isFormDisabled}
           aria-disabled=${this.isFormDisabled}
+          aria-label=${i18nString(UIStrings.title)}
         >
           <${IconButton.Icon.Icon.litTagName}
             class=${this.isFormOpened ? '' : 'rotate-icon'}