Bug 1461522 - Persist active styles for a button with an expanded menu; r?jdescottes draft
authorBrian Birtles <birtles@gmail.com>
Thu, 28 Jun 2018 15:14:13 +0900
changeset 813905 da24e12f5324de58d5617343356391fb501517e0
parent 813904 0f4176c8ad2339903ac4c1f766ae447449e8e6b7
child 813906 375096e708b2b85363ab8220b20e7d35ed772860
push id115042
push userbbirtles@mozilla.com
push dateWed, 04 Jul 2018 04:36:27 +0000
reviewersjdescottes
bugs1461522
milestone63.0a1
Bug 1461522 - Persist active styles for a button with an expanded menu; r?jdescottes When we open the menu, the menu button should remain active so long as the menu is open. MozReview-Commit-ID: DPYEjbNiOuY
devtools/client/themes/common.css
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -353,30 +353,31 @@ checkbox:-moz-focusring {
 .devtools-toolbarbutton[standalone],
 .devtools-button[data-standalone],
 .devtools-button:not(:empty) {
   background: var(--toolbarbutton-background);
   padding: 0 5px;
 }
 
 .devtools-toolbarbutton:not([label]):hover,
-.devtools-button:empty:not(:disabled):hover {
+.devtools-button:empty:not(:disabled):not([aria-expanded="true"]):hover {
   background: var(--toolbarbutton-background);
 }
 
 .devtools-button:focus {
   background-color: var(--theme-toolbar-hover);
 }
 
 /* Selectable button which is unchecked. */
 
 .devtools-button:not(:empty):not(:disabled):not(.checked):hover,
 .devtools-toolbarbutton[label]:not(:-moz-any([checked=true],[disabled])):hover,
 .devtools-button:empty:not(:disabled):-moz-any(:hover:active,.checked),
-.devtools-toolbarbutton:not([label]):-moz-any([checked],[open],:hover:active) {
+.devtools-toolbarbutton:not([label]):-moz-any([checked],[open],:hover:active),
+.devtools-button[aria-haspopup="menu"][aria-expanded="true"] {
   background: var(--toolbarbutton-hover-background);
   border-color: var(--toolbarbutton-hover-border-color);
 }
 
 .devtools-button:not(:empty):not(.checked):not(:disabled):hover:active,
 .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:hover:active {
   background-color: var(--theme-selection-background-hover);
 }