chrome-devtools-frontend 1.0.948445 → 1.0.950484

package/front_end/models/issues_manager/CorsIssue.ts

@@ -40,7 +40,6 @@ export enum IssueCode {
   PreflightMissingAllowExternal = 'CorsIssue::PreflightMissingAllowExternal',
   // TODO(https://crbug.com/1263483): Remove this once it's removed from CDP.
   PreflightInvalidAllowExternal = 'CorsIssue::PreflightInvalidAllowExternal',
-  InvalidResponse = 'CorsIssue::InvalidResponse',
   NoCorsRedirectModeNotFollow = 'CorsIssue::NoCorsRedirectModeNotFollow',
   InvalidPrivateNetworkAccess = 'CorsIssue::InvalidPrivateNetworkAccess',
   UnexpectedPrivateNetworkAccess = 'CorsIssue::UnexpectedPrivateNetworkAccess',
@@ -63,6 +62,7 @@ function getIssueCode(details: Protocol.Audits.CorsIssueDetails): IssueCode {
       return IssueCode.WildcardOriginNotAllowed;
     case Protocol.Network.CorsError.PreflightInvalidStatus:
     case Protocol.Network.CorsError.PreflightDisallowedRedirect:
+    case Protocol.Network.CorsError.InvalidResponse:
       return IssueCode.PreflightResponseInvalid;
     case Protocol.Network.CorsError.AllowOriginMismatch:
     case Protocol.Network.CorsError.PreflightAllowOriginMismatch:
@@ -84,8 +84,6 @@ function getIssueCode(details: Protocol.Audits.CorsIssueDetails): IssueCode {
       return IssueCode.PreflightMissingAllowExternal;
     case Protocol.Network.CorsError.PreflightInvalidAllowExternal:
       return IssueCode.PreflightInvalidAllowExternal;
-    case Protocol.Network.CorsError.InvalidResponse:
-      return IssueCode.InvalidResponse;
     case Protocol.Network.CorsError.InsecurePrivateNetwork:
       return IssueCode.InsecurePrivateNetwork;
     case Protocol.Network.CorsError.NoCorsRedirectModeNotFollow:
@@ -226,7 +224,6 @@ export class CorsIssue extends Issue<IssueCode> {
         };
       case IssueCode.PreflightMissingAllowExternal:
       case IssueCode.PreflightInvalidAllowExternal:
-      case IssueCode.InvalidResponse:
       case IssueCode.InvalidPrivateNetworkAccess:
       case IssueCode.UnexpectedPrivateNetworkAccess:
         return null;

package/front_end/models/issues_manager/descriptions/arInvalidAttributionSourceExpiry.md

@@ -0,0 +1,4 @@
+# Ensure attribution source expiry is a valid number
+
+The expiry associated with an attribution source was defaulted to 30 days.
+This happens if the provided value is not a valid 64-bit signed integer.

package/front_end/models/issues_manager/descriptions/arInvalidAttributionSourcePriority.md

@@ -0,0 +1,4 @@
+# Ensure attribution source priority is a valid number
+
+The priority associated with an attribution source was defaulted to `0`.
+This happens if the provided value is not a valid 64-bit signed integer.

package/front_end/models/issues_manager/descriptions/arInvalidEventSourceTriggerData.md

@@ -0,0 +1,9 @@
+# Ensure the "event-source-trigger-data" query parameter for an attribution redirect is a valid number
+
+The event-source trigger data associated with an attribution was defaulted to `0`.
+This happens if the `event-source-trigger-data` query parameter provided in the `.well-known`
+redirect is not a valid 64-bit unsigned integer.
+
+Note that even if a valid integer is provided, only the lowest 1-bit of the
+`event-source-trigger-data` query parameter is recorded, with a 5% chance of the 1 bit being
+noised.

package/front_end/models/issues_manager/descriptions/arInvalidTriggerDedupKey.md

@@ -0,0 +1,5 @@
+# Ensure the "dedup-key" query parameter for an attribution redirect is a valid number
+
+The dedup key associated with an attribution was defaulted to `null`.
+This happens if the `dedup-key` query parameter provided in the `.well-known` redirect is not a
+valid 64-bit signed integer.

package/front_end/models/issues_manager/descriptions/arInvalidTriggerPriority.md

@@ -0,0 +1,5 @@
+# Ensure the "priority" query parameter for an attribution redirect is a valid number
+
+The priority associated with an attribution was defaulted to `0`.
+This happens if the `priority` query parameter provided in the `.well-known` redirect is not a
+valid 64-bit signed integer.

package/front_end/models/issues_manager/descriptions/corsPreflightResponseInvalid.md

@@ -1,5 +1,5 @@
 # Ensure preflight responses are valid
 
-A cross-origin resource sharing (CORS) request was blocked because the response to the associated [preflight request](issueCorsPreflightRequest) had an unsuccessful HTTP status code and/or was a redirect.
+A cross-origin resource sharing (CORS) request was blocked because the response to the associated [preflight request](issueCorsPreflightRequest) failed, had an unsuccessful HTTP status code, and/or was a redirect.
 
-To fix this issue, ensure all CORS preflight `OPTION` requests are answered with a successful HTTP status code (2xx) and do not redirect.
+To fix this issue, ensure all CORS preflight `OPTIONS` requests are answered with a successful HTTP status code (2xx) and do not redirect.

package/front_end/panels/accessibility/AXBreadcrumbsPane.ts

@@ -3,8 +3,11 @@
 // found in the LICENSE file.
 
 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 Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Feedback from '../../ui/components/panel_feedback/panel_feedback.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import axBreadcrumbsStyles from './axBreadcrumbs.css.js';
@@ -27,6 +30,18 @@ const UIStrings = {
   *@description Ignored node element text content in AXBreadcrumbs Pane of the Accessibility panel
   */
   ignored: 'Ignored',
+  /**
+  *@description Name for experimental tree toggle.
+  */
+  fullTreeExperimentName: 'Enable full-page accessibility tree',
+  /**
+  *@description Description text for experimental tree toggle.
+  */
+  fullTreeExperimentDescription: 'The accessibility tree moved to the top right corner of the DOM tree.',
+  /**
+  *@description Message saying that DevTools must be restarted before the experiment is enabled.
+  */
+  reloadRequired: 'Reload required before the change takes effect.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/accessibility/AXBreadcrumbsPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -37,24 +52,48 @@ export class AXBreadcrumbsPane extends AccessibilitySubPane {
   private collapsingBreadcrumbId: number;
   private hoveredBreadcrumb: AXBreadcrumb|null;
   private readonly rootElement: HTMLElement;
+  #legacyTreeDisabled = false;
 
   constructor(axSidebarView: AccessibilitySidebarView) {
     super(i18nString(UIStrings.accessibilityTree));
 
     this.element.classList.add('ax-subpane');
-    UI.ARIAUtils.markAsTree(this.element);
     this.element.tabIndex = -1;
 
     this.axSidebarView = axSidebarView;
-
     this.preselectedBreadcrumb = null;
     this.inspectedNodeBreadcrumb = null;
 
     this.collapsingBreadcrumbId = -1;
 
-    this.hoveredBreadcrumb = null;
     this.rootElement = this.element.createChild('div', 'ax-breadcrumbs');
 
+    this.hoveredBreadcrumb = null;
+    const previewToggle = new Feedback.PreviewToggle.PreviewToggle();
+    const name = i18nString(UIStrings.fullTreeExperimentName);
+    const experiment = Root.Runtime.ExperimentName.FULL_ACCESSIBILITY_TREE;
+    const onChangeCallback: (checked: boolean) => void = checked => {
+      Host.userMetrics.experimentChanged(experiment, checked);
+      UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(i18nString(UIStrings.reloadRequired));
+    };
+    if (Root.Runtime.experiments.isEnabled(experiment)) {
+      this.#legacyTreeDisabled = true;
+      const feedbackURL = 'https://goo.gle/devtools-a11y-tree-feedback';
+      previewToggle.data = {
+        name,
+        helperText: i18nString(UIStrings.fullTreeExperimentDescription),
+        feedbackURL,
+        experiment,
+        onChangeCallback,
+      };
+      this.element.appendChild(previewToggle);
+      return;
+    }
+    previewToggle.data = {name, helperText: null, feedbackURL: null, experiment, onChangeCallback};
+    this.element.prepend(previewToggle);
+
+    UI.ARIAUtils.markAsTree(this.rootElement);
+
     this.rootElement.addEventListener('keydown', this.onKeyDown.bind(this), true);
     this.rootElement.addEventListener('mousemove', this.onMouseMove.bind(this), false);
     this.rootElement.addEventListener('mouseleave', this.onMouseLeave.bind(this), false);
@@ -72,6 +111,9 @@ export class AXBreadcrumbsPane extends AccessibilitySubPane {
   }
 
   setAXNode(axNode: SDK.AccessibilityModel.AccessibilityNode|null): void {
+    if (this.#legacyTreeDisabled) {
+      return;
+    }
     const hadFocus = this.element.hasFocus();
     super.setAXNode(axNode);
 

package/front_end/panels/accessibility/AccessibilitySidebarView.ts

@@ -31,10 +31,8 @@ export class AccessibilitySidebarView extends UI.ThrottledWidget.ThrottledWidget
     this.axNodeInternal = null;
     this.skipNextPullNode = false;
     this.sidebarPaneStack = UI.ViewManager.ViewManager.instance().createStackLocation();
-    if (!Root.Runtime.experiments.isEnabled('fullAccessibilityTree')) {
-      this.breadcrumbsSubPane = new AXBreadcrumbsPane(this);
-      this.sidebarPaneStack.showView(this.breadcrumbsSubPane);
-    }
+    this.breadcrumbsSubPane = new AXBreadcrumbsPane(this);
+    this.sidebarPaneStack.showView(this.breadcrumbsSubPane);
     this.ariaSubPane = new ARIAAttributesPane();
     this.sidebarPaneStack.showView(this.ariaSubPane);
     this.axNodeSubPane = new AXNodeSubPane();

package/front_end/panels/accessibility/axBreadcrumbs.css

@@ -99,6 +99,10 @@
   background-color: var(--color-background-elevation-0);
 }
 
+.ax-breadcrumbs .ax-node:not(.inspected):focus {
+  background-color: var(--color-background-elevation-1);
+}
+
 .ax-breadcrumbs .ax-node.inspected:focus * {
   color: inherit;
 }

package/front_end/panels/animation/animationTimeline.css

@@ -26,7 +26,8 @@
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  align-items: center;
+  align-items: flex-start;
+  white-space: nowrap;
   flex: 0 0 150px;
 }
 

package/front_end/panels/application/components/FrameDetailsView.ts

@@ -47,6 +47,11 @@ const UIStrings = {
   */
   document: 'Document',
   /**
+  *@description A web URL (for a lot of languages this does not need to be translated, please translate only where necessary)
+  */
+  url: 'URL',
+  /**
+  /**
   *@description Title for a link to the Sources panel
   */
   clickToRevealInSourcesPanel: 'Click to reveal in Sources panel',
@@ -63,6 +68,12 @@ const UIStrings = {
   */
   clickToRevealInNetworkPanelMight: 'Click to reveal in Network panel (might require page reload)',
   /**
+  *@description The origin of a URL (https://web.dev/same-site-same-origin/#origin)
+  *(for a lot of languages this does not need to be translated, please translate only where necessary)
+  */
+  origin: 'Origin',
+  /**
+  /**
   *@description Related node label in Timeline UIUtils of the Performance panel
   */
   ownerElement: 'Owner Element',
@@ -107,9 +118,11 @@ const UIStrings = {
   */
   no: 'No',
   /**
-  *@description Row title for in the Frame Details view
+  *@description Label for whether a frame is cross-origin isolated
+  *(https://developer.chrome.com/docs/extensions/mv3/cross-origin-isolation/)
+  *(for a lot of languages this does not need to be translated, please translate only where necessary)
   */
-  crossoriginIsolated: '`Cross-Origin` Isolated',
+  crossoriginIsolated: 'Cross-Origin Isolated',
   /**
   *@description Explanatory text in the Frame Details view
   */
@@ -132,10 +145,11 @@ const UIStrings = {
   */
   apiAvailability: 'API availability',
   /**
-  *@description Explanatory text in the Frame Details view for the API availability section
+  *@description Explanation of why cross-origin isolation is important
+  *(https://web.dev/why-coop-coep/)
+  *(for a lot of languages 'cross-origin isolation' does not need to be translated, please translate only where necessary)
   */
-  availabilityOfCertainApisDepends:
-      'Availability of certain APIs depends on the document being `cross-origin` isolated.',
+  availabilityOfCertainApisDepends: 'Availability of certain APIs depends on the document being cross-origin isolated.',
   /**
   *@description Description of the SharedArrayBuffer status
   */
@@ -159,13 +173,17 @@ const UIStrings = {
   sharedarraybufferConstructorIsAvailable:
       '`SharedArrayBuffer` constructor is available but `SABs` cannot be transferred via `postMessage`',
   /**
-  *@description Explanation for the SharedArrayBuffer availability status
+  *@description Explanation why SharedArrayBuffer will not be available in the future
+  *(https://developer.chrome.com/docs/extensions/mv3/cross-origin-isolation/)
+  *(for a lot of languages 'cross-origin isolation' does not need to be translated, please translate only where necessary)
   */
-  willRequireCrossoriginIsolated: '⚠️ will require `cross-origin` isolated context in the future',
+  willRequireCrossoriginIsolated: '⚠️ will require cross-origin isolated context in the future',
   /**
-  *@description Explanation for the SharedArrayBuffer availability status
+  *@description Explanation why SharedArrayBuffer is not available
+  *(https://developer.chrome.com/docs/extensions/mv3/cross-origin-isolation/)
+  *(for a lot of languages 'cross-origin isolation' does not need to be translated, please translate only where necessary).
   */
-  requiresCrossoriginIsolated: 'requires `cross-origin` isolated context',
+  requiresCrossoriginIsolated: 'requires cross-origin isolated context',
   /**
    *@description Explanation for the SharedArrayBuffer availability status in case the transfer of a SAB requires the
    * permission policy `cross-origin-isolated` to be enabled (e.g. because the message refers to the situation in an iframe).
@@ -218,10 +236,6 @@ const UIStrings = {
   */
   createdByAdScriptExplanation:
       'There was an ad script in the `(async) stack` when this frame was created. Examining the creation `stack trace` of this frame might provide more insight.',
-  /**
-   *@description Label for a list of origin trials that associated with at least one token.
-   */
-  // originTrials: 'Origin Trials',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/FrameDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -343,7 +357,7 @@ export class FrameDetailsReportView extends HTMLElement {
     return LitHtml.html`
       <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.document)}</${
         ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18n.i18n.lockedString('URL')}</${
+      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.url)}</${
         ReportView.ReportView.ReportKey.litTagName}>
       <${ReportView.ReportView.ReportValue.litTagName}>
         <div class="inline-items">
@@ -449,7 +463,7 @@ export class FrameDetailsReportView extends HTMLElement {
   private maybeRenderOrigin(): LitHtml.TemplateResult|{} {
     if (this.frame && this.frame.securityOrigin && this.frame.securityOrigin !== '://') {
       return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>${i18n.i18n.lockedString('Origin')}</${
+        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.origin)}</${
           ReportView.ReportView.ReportKey.litTagName}>
         <${ReportView.ReportView.ReportValue.litTagName}>
           <div class="text-ellipsis" title=${this.frame.securityOrigin}>${this.frame.securityOrigin}</div>

package/front_end/panels/console/ConsolePrompt.ts

@@ -207,7 +207,14 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       {key: 'ArrowDown', run: (): boolean => this.moveHistory(1)},
       {mac: 'Ctrl-p', run: (): boolean => this.moveHistory(-1, true)},
       {mac: 'Ctrl-n', run: (): boolean => this.moveHistory(1, true)},
-      {key: 'Enter', run: (): boolean => this.evaluate(), shift: CodeMirror.insertNewlineAndIndent},
+      {
+        key: 'Enter',
+        run: (): boolean => {
+          this.handleEnter();
+          return true;
+        },
+        shift: CodeMirror.insertNewlineAndIndent,
+      },
     ];
   }
 
@@ -242,30 +249,28 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     return true;
   }
 
-  private enterWillEvaluate(): boolean {
+  private async enterWillEvaluate(): Promise<boolean> {
     const {state} = this.editor;
-    return state.doc.length > 0 && TextEditor.JavaScript.isExpressionComplete(state);
+    return state.doc.length > 0 && await TextEditor.JavaScript.isExpressionComplete(state.doc.toString());
   }
 
-  private evaluate(): boolean {
-    if (this.enterWillEvaluate()) {
+  private async handleEnter(): Promise<void> {
+    if (await this.enterWillEvaluate()) {
       this.appendCommand(this.text(), true);
       this.editor.dispatch({
         changes: {from: 0, to: this.editor.state.doc.length},
         scrollIntoView: true,
       });
     } else if (this.editor.state.doc.length) {
-      return CodeMirror.insertNewlineAndIndent(this.editor.editor);
+      CodeMirror.insertNewlineAndIndent(this.editor.editor);
     } else {
       this.editor.dispatch({scrollIntoView: true});
     }
-    this.enterProcessedForTest();
-    return true;
   }
 
   private updatePromptIcon(): void {
     this.iconThrottler.schedule(async () => {
-      this.promptIcon.classList.toggle('console-prompt-incomplete', !this.enterWillEvaluate());
+      this.promptIcon.classList.toggle('console-prompt-incomplete', !(await this.enterWillEvaluate()));
     });
   }
 
@@ -283,9 +288,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)}`;
   }