Bug 1444793 - Make focus style of tool tab to be same as hover style. r=nchevobbe

This patch removed the border and outline from focus style of tool tab and make
its style to be same as hover styles.

MozReview-Commit-ID: KD97vYiyUX2

--HG--
extra : rebase_source : 83fd2d5b743ac8488c711e98e316a39e9c8be30f

devtools/client/themes/common.css

@@ -229,6 +229,15 @@ checkbox:-moz-focusring {
   outline: none;
 }
 
+/* Tab and button of toolbox does not need to display outline */
+
+.devtools-button:-moz-focusring,
+.devtools-tab:-moz-focusring {
+  outline:none;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
+}
+
 /* Toolbar buttons */
 .devtools-menulist,
 .devtools-toolbarbutton,
@@ -248,6 +257,11 @@ checkbox:-moz-focusring {
   white-space: nowrap;
 }
 
+/* Remove system form border from devtools-button. */
+.devtools-button::-moz-focus-inner {
+  border: 0;
+}
+
 .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
 .devtools-button:empty::before {
   width: 16px;
@@ -323,6 +337,10 @@ checkbox:-moz-focusring {
   background: var(--toolbarbutton-background);
 }
 
+.devtools-button:focus {
+  background-color: var(--theme-toolbar-hover);
+}
+
 .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),
@@ -714,6 +732,12 @@ checkbox:-moz-focusring {
   transform: scaleX(1);
 }
 
+.devtools-tab:not(.selected):focus .devtools-tab-line {
+  background: var(--tab-line-hover-color);
+  opacity: 1;
+  transform: scaleX(1);
+}
+
 /* No result message styles */
 
 .devtools-sidepanel-no-result {

devtools/client/themes/toolbox.css

@@ -99,10 +99,16 @@
   color: var(--theme-toolbar-color);
 }
 
-.devtools-tab:hover {
+.devtools-tab:hover,
+.devtools-tab:focus {
   background-color: var(--theme-toolbar-hover);
 }
 
+/* Remove system control border from devtools-tab. */
+.devtools-tab::-moz-focus-inner {
+  border: 0;
+}
+
 .devtools-tab:hover:active {
   background-color: var(--theme-toolbar-hover-active);
 }