[UI] Avoid to have buttons in hover state after having been clicked (bug 836732)

 - it aims to fix https://bugzilla.mozilla.org/show_bug.cgi?id=836732;
 - replace :focus by :focus-visible for the buttons in the UI, according to the docs:
   - https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
   - the button has the focus-visible state when it has been focused with the keyboard

Author: calixteman

web/viewer.css

@@ -559,7 +559,7 @@ html[dir="rtl"] .findbar .splitToolbarButton > .findNext {
 }
 
 .findbar label:hover,
-.findbar input:focus + label {
+.findbar input:focus-visible + label {
   color: var(--toggled-btn-color);
   background-color: var(--button-hover-color);
 }
@@ -753,12 +753,12 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton {
 }
 
 .overlayButton:hover,
-.overlayButton:focus {
+.overlayButton:focus-visible {
   background-color: var(--overlay-button-hover-bg-color);
 }
 
 .overlayButton:hover > span,
-.overlayButton:focus > span {
+.overlayButton:focus-visible > span {
   color: var(--overlay-button-hover-color);
 }
 
@@ -780,10 +780,10 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton {
 }
 
 .splitToolbarButton > .toolbarButton:hover,
-.splitToolbarButton > .toolbarButton:focus,
+.splitToolbarButton > .toolbarButton:focus-visible,
 .dropdownToolbarButton:hover,
 .toolbarButton.textButton:hover,
-.toolbarButton.textButton:focus {
+.toolbarButton.textButton:focus-visible {
   background-color: var(--button-hover-color);
   z-index: 199;
 }
@@ -847,11 +847,11 @@ html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
   margin-right: 2px;
 }
 .toolbarButton:hover,
-.toolbarButton:focus {
+.toolbarButton:focus-visible {
   background-color: var(--button-hover-color);
 }
 .secondaryToolbarButton:hover,
-.secondaryToolbarButton:focus {
+.secondaryToolbarButton:focus-visible {
   background-color: var(--doorhanger-hover-bg-color);
   color: var(--doorhanger-hover-color);
 }
@@ -917,7 +917,7 @@ html[dir="rtl"] .dropdownToolbarButton > select {
   padding-right: 4px;
 }
 .dropdownToolbarButton > select:hover,
-.dropdownToolbarButton > select:focus {
+.dropdownToolbarButton > select:focus-visible {
   background-color: var(--button-hover-color);
   color: var(--toggled-btn-color);
 }
@@ -959,7 +959,7 @@ html[dir="rtl"] .dropdownToolbarButton > select {
 }
 
 .dropdownToolbarButton:hover::after,
-.dropdownToolbarButton:focus::after,
+.dropdownToolbarButton:focus-visible::after,
 .dropdownToolbarButton:active::after {
   background-color: var(--toolbar-icon-hover-bg-color);
 }
@@ -971,9 +971,9 @@ html[dir="rtl"] .dropdownToolbarButton > select {
 }
 
 .toolbarButton:hover::before,
-.toolbarButton:focus::before,
+.toolbarButton:focus-visible::before,
 .secondaryToolbarButton:hover::before,
-.secondaryToolbarButton:focus::before {
+.secondaryToolbarButton:focus-visible::before {
   background-color: var(--toolbar-icon-hover-bg-color);
 }