1 files changed, 11 insertions, 3 deletions
diff --git a/chromium/third_party/blink/renderer/devtools/front_end/elements/ComputedStyleWidget.js b/chromium/third_party/blink/renderer/devtools/front_end/elements/ComputedStyleWidget.js
index aceeed54c5d..231a28b4d19 100644
--- a/chromium/third_party/blink/renderer/devtools/front_end/elements/ComputedStyleWidget.js
+++ b/chromium/third_party/blink/renderer/devtools/front_end/elements/ComputedStyleWidget.js
@@ -47,8 +47,8 @@ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget {
 
     const hbox = this.contentElement.createChild('div', 'hbox styles-sidebar-pane-toolbar');
     const filterContainerElement = hbox.createChild('div', 'styles-sidebar-pane-filter-box');
-    const filterInput = Elements.StylesSidebarPane.createPropertyFilterElement(
-        Common.UIString('Filter'), hbox, filterCallback.bind(this), 'styles-filter-engaged');
+    const filterInput =
+        Elements.StylesSidebarPane.createPropertyFilterElement(ls`Filter`, hbox, filterCallback.bind(this));
     UI.ARIAUtils.setAccessibleName(filterInput, Common.UIString('Filter Computed Styles'));
     filterContainerElement.appendChild(filterInput);
     this.setDefaultFocusedElement(filterInput);
@@ -57,6 +57,9 @@ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget {
     toolbar.appendToolbarItem(new UI.ToolbarSettingCheckbox(
         this._showInheritedComputedStylePropertiesSetting, undefined, Common.UIString('Show all')));
 
+    this._noMatchesElement = this.contentElement.createChild('div', 'gray-info-message');
+    this._noMatchesElement.textContent = ls`No matching property`;
+
     this._propertiesOutline = new UI.TreeOutlineInShadow();
     this._propertiesOutline.hideOverflow();
     this._propertiesOutline.registerRequiredCSS('elements/computedStyleWidgetTree.css');
@@ -141,8 +144,10 @@ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget {
     this._propertiesOutline.removeChildren();
     this._linkifier.reset();
     const cssModel = this._computedStyleModel.cssModel();
-    if (!nodeStyle || !matchedStyles || !cssModel)
+    if (!nodeStyle || !matchedStyles || !cssModel) {
+      this._noMatchesElement.classList.remove('hidden');
       return;
+    }
 
     const uniqueProperties = nodeStyle.computedStyle.keysArray();
     uniqueProperties.sort(propertySorter);
@@ -336,11 +341,14 @@ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget {
    */
   _updateFilter(regex) {
     const children = this._propertiesOutline.rootElement().children();
+    let hasMatch = false;
     for (const child of children) {
       const property = child[Elements.ComputedStyleWidget._propertySymbol];
       const matched = !regex || regex.test(property.name) || regex.test(property.value);
       child.hidden = !matched;
+      hasMatch |= matched;
     }
+    this._noMatchesElement.classList.toggle('hidden', hasMatch);
   }
 };