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
This commit is contained in:
Mantaroh Yoshinaga 2018-04-18 17:37:48 +09:00
parent 23bd4704af
commit 80d5fe7c55
2 changed files with 31 additions and 1 deletions

View File

@ -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 {

View File

@ -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);
}