Bug 1466486 - Apply focus style to devtools selection button. r=nchevobbe
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Fri, 15 Jun 2018 10:52:09 -0700
changeset 476922 d1379e27688ec1fc1e1a072519267c221c4906ca
parent 476896 d62ce3e3ee8ad7ed946c6b5bf6d7a793dcbecfe0
child 476923 e3891caf027f304b6b9c2a6040edc7053daba8ea
push id9374
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:43:20 +0000
treeherdermozilla-beta@160e085dfb0b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1466486, 1444793
milestone62.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1466486 - Apply focus style to devtools selection button. r=nchevobbe The bug 1444793 introduced the focus devtools button style instead of using the outline style. However, devtools selection button didn't use this style. This patch apply the focus style to the devtools selection buttons. MozReview-Commit-ID: DQEDMRSThMr
devtools/client/themes/common.css
devtools/client/themes/variables.css
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -369,37 +369,53 @@ checkbox:-moz-focusring {
 .devtools-button:empty:not(:disabled):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) {
   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);
 }
 
+.devtools-button:not(:empty):not(.checked):not(:disabled):focus,
+.devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled]))[label]:focus {
+  background-color: var(--toolbarbutton-focus-background);
+  color: var(--toolbarbutton-focus-color);
+}
+
+/* Selectable button which is checked. */
+
 .devtools-toolbarbutton:not([disabled])[label][checked=true],
 .devtools-toolbarbutton:not([disabled])[label][open],
 .devtools-button:not(:empty).checked {
   background: var(--toolbarbutton-checked-background);
   border-color: var(--toolbarbutton-checked-border-color);
   color: var(--toolbarbutton-checked-color);
 }
 
+.devtools-toolbarbutton:not([disabled])[label][checked=true]:focus,
+.devtools-toolbarbutton:not([disabled])[label][open]:focus,
+.devtools-button:not(:empty).checked:focus {
+  background-color: var(--toolbarbutton-checked-focus-background);
+}
+
 /* Icons */
 :root {
   --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
 }
 
 .devtools-button.devtools-clear-icon::before {
   background-image: var(--clear-icon-url);
 }
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -30,16 +30,18 @@
   --theme-toolbar-background-hover: rgba(221, 225, 228, 0.66);
   --theme-toolbar-background-alt: #f5f5f5;
   --theme-toolbar-hover: var(--grey-20);
   --theme-toolbar-hover-active: var(--grey-20);
 
   /* Selection */
   --theme-selection-background: var(--blue-55);
   --theme-selection-background-hover: #F0F9FE;
+  --theme-selection-focus-background: var(--toolbarbutton-hover-background);
+  --theme-selection-focus-color: var(--grey-70);
   --theme-selection-color: #ffffff;
 
   /* Border color that splits the toolbars/panels/headers. */
   --theme-splitter-color: #e0e0e1;
 
   --theme-comment: var(--grey-50);
   --theme-comment-alt: #ccd1d5;
 
@@ -115,16 +117,18 @@
   --theme-toolbar-background-hover: #20232B;
   --theme-toolbar-background-alt: #1B1B1D;
   --theme-toolbar-hover: #252526;
   --theme-toolbar-hover-active: #252526;
 
   /* Selection */
   --theme-selection-background: #204E8A;
   --theme-selection-background-hover: #353B48;
+  --theme-selection-focus-background: var(--grey-60);
+  --theme-selection-focus-color: var(--grey-30);
   --theme-selection-color: #ffffff;
 
   /* Border color that splits the toolbars/panels/headers. */
   --theme-splitter-color: #3c3c3d;
 
   --theme-comment: #939393;
   --theme-comment-alt: #939393;
 
@@ -192,19 +196,22 @@
    * should improve keyboard navigation usability. */
   --theme-focus-outline: 1px dotted var(--theme-focus-outline-color);
   --theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow);
 
   --toolbarbutton-background: var(--theme-toolbar-hover);
   --toolbarbutton-border-color: transparent;
   --toolbarbutton-hover-background: rgba(110,120,130,0.2);
   --toolbarbutton-hover-border-color: var(--toolbarbutton-border-color);
+  --toolbarbutton-focus-background: var(--theme-selection-focus-background);
+  --toolbarbutton-focus-color: var(--theme-selection-focus-color);
   --toolbarbutton-checked-background: var(--theme-selection-background);
   --toolbarbutton-checked-color: var(--theme-selection-color);
   --toolbarbutton-checked-border-color: var(--toolbarbutton-border-color);
+  --toolbarbutton-checked-focus-background: var(--blue-60);
 
   /* The photon animation curve */
   --animation-curve: cubic-bezier(.07,.95,0,1);
 
   /* Firefox Colors CSS Variables v1.0.3
    * Colors are taken from: https://github.com/FirefoxUX/design-tokens */
   --magenta-65: #dd00a9;