DevTools: update empty style text on inspected node change

Style sidebar's empty text updates visibility when the filter changes.
It should also update when the inspected node changes.

Bug: 849208
Change-Id: I1f5e2eeb12deecef312fbc9b50f69afd3317ab06
Reviewed-on: https://chromium-review.googlesource.com/1132348Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#575541}

third_party/blink/renderer/devtools/front_end/elements/ComputedStyleWidget.js

@@ -144,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);

third_party/blink/renderer/devtools/front_end/elements/StylesSidebarPane.js

@@ -432,8 +432,10 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane {
     this._sectionBlocks = [];
 
     const node = this.node();
-    if (!matchedStyles || !node)
+    if (!matchedStyles || !node) {
+      this._noMatchesElement.classList.remove('hidden');
       return;
+    }
 
     this._sectionBlocks =
         await this._rebuildSectionsForMatchedStyleRules(/** @type {!SDK.CSSMatchedStyles} */ (matchedStyles));
@@ -476,6 +478,8 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane {
 
     if (this._filterRegex)
       this._updateFilter();
+    else
+      this._noMatchesElement.classList.toggle('hidden', this._sectionBlocks.length > 0);
 
     this._nodeStylesUpdatedForTest(/** @type {!SDK.DOMNode} */ (node), true);
     if (this._decorator) {