Fix 1289157 issue: highlight text when hovered mouse on top drop down

How to test:
1. launch chrome and open New Tab Page right click and select inspect from menu.
2. Click on Console tab.
3. Hover mouse on top drop down .
4. Observe focus is seen when hovered mouse on top drop down.

Before vs After screenshots:
- https://imgur.com/a/41rUjo0

Bug: 1289157
Change-Id: I71d344e126803b676b25b6e65e68846a37ece916
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3583291
Reviewed-by: Simon Zünd <szuend@chromium.org>
Reviewed-by: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Danil Somsikov <dsv@chromium.org>

AUTHORS

@@ -26,6 +26,7 @@ Edward Trist <edwardtrist@gmail.com>
 Ergün Erdoğmuş <erdogmusergun@gmail.com>
 Eric Rannaud <eric.rannaud@gmail.com>
 Feng Lu <lufengd3@gmail.com>
+Feng Yu <f3n67u@gmail.com>
 Gabriel Luong <gabriel.luong@gmail.com>
 Gautham Banasandra <gautham.bangalore@gmail.com>
 Jacky Hu <flameddd@gmail.com>

front_end/ui/legacy/softDropDownButton.css

@@ -23,6 +23,10 @@ button.soft-dropdown > .title {
   text-overflow: ellipsis;
 }
 
+button.soft-dropdown:hover:not(:active) > .title {
+  color: var(--color-text-primary);
+}
+
 @media (forced-colors: active) {
   button.soft-dropdown {
     border: 1px solid ButtonText;