Make filter box placeholder text visible in dark theme

When devtools is activated with dark theme, colors of certain elements
may be inverted from how they are defined in the stylesheet. The filter
box placeholder color was not explicitly defined in the stylesheet, so
the color inversion did not occur for the placeholder color. This fix
explicitly sets the placeholder color so it is visible in both light
and dark themes.

Bug: 1000628
Change-Id: I7ed29c3135a91b0c1f27cd51bbaeda858997138f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1787337Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Jeffrey Chen <jeffreyca16@gmail.com>
Cr-Commit-Position: refs/heads/master@{#694430}

third_party/blink/renderer/devtools/front_end/elements/computedStyleSidebarPane.css

@@ -32,3 +32,7 @@
 .styles-sidebar-pane-filter-box > input:not(:placeholder-shown) {
     box-shadow: var(--focus-ring-active-shadow);
 }
+
+.styles-sidebar-pane-filter-box > input::placeholder {
+    color: rgba(0, 0, 0, 0.54);
+}

third_party/blink/renderer/devtools/front_end/elements/stylesSidebarPane.css

@@ -188,6 +188,10 @@
     box-shadow: var(--focus-ring-active-shadow);
 }
 
+.styles-sidebar-pane-filter-box > input::placeholder {
+    color: rgba(0, 0, 0, 0.54);
+}
+
 .styles-section.styles-panel-hovered:not(.read-only) span.simple-selector:hover,
 .styles-section.styles-panel-hovered:not(.read-only) .media-text :hover{
     text-decoration: underline;