Bug 1558558 - Fix toggle buttons padding and colors. .
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Sun, 16 Jun 2019 02:42:07 +0000
changeset 479071 8cc6bacf7bf059b841d3e4febecf57600e77aeec
parent 479070 04fa66cb9c35bd6440698887d6fa3184a0156abc
child 479072 a39c67169747c1dbd184c14c11aa6bdd3d61db93
child 479083 71456a95cc55151048fecc079613d83617aebfd2
child 479085 51d26396dfafa7b5f45acc6c8c5f1dcf93bec486
push id88048
push usernchevobbe@mozilla.com
push dateSun, 16 Jun 2019 03:00:12 +0000
treeherderautoland@8cc6bacf7bf0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1558558
milestone69.0a1
first release with
nightly linux32
8cc6bacf7bf0 / 69.0a1 / 20190616093534 / files
nightly linux64
8cc6bacf7bf0 / 69.0a1 / 20190616093534 / files
nightly mac
8cc6bacf7bf0 / 69.0a1 / 20190616093534 / files
nightly win32
8cc6bacf7bf0 / 69.0a1 / 20190616093534 / files
nightly win64
8cc6bacf7bf0 / 69.0a1 / 20190616093534 / files
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
releases
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1558558 - Fix toggle buttons padding and colors. . Some colors weren't matching the UI spec document, and the padding was a bit off. Differential Revision: https://phabricator.services.mozilla.com/D34701
devtools/client/themes/common.css
devtools/client/themes/variables.css
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -305,17 +305,17 @@ checkbox:-moz-focusring {
   padding: 2px;
   margin: 1px;
 
   /* Button text should not wrap on multiple lines */
   white-space: nowrap;
 }
 
 .devtools-togglebutton {
-  padding: 0 4px;
+  padding: 1px 6px;
 }
 
 /* Remove system form border from devtools-button. */
 .devtools-button::-moz-focus-inner {
   border: 0;
 }
 
 .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
@@ -416,18 +416,17 @@ checkbox:-moz-focusring {
   color: var(--toolbarbutton-focus-color);
 }
 
 .devtools-togglebutton:not([aria-pressed="true"]) {
   background: var(--theme-toolbarbutton-background);
   color: var(--theme-toolbarbutton-color);
 }
 
-.devtools-togglebutton:not([aria-pressed="true"]):hover,
-.devtools-togglebutton:hover:active {
+.devtools-togglebutton:not([aria-pressed="true"]):hover {
   background-color: var(--theme-toolbarbutton-hover-background);
 }
 
 /* Selectable button which is checked. */
 
 .devtools-toolbarbutton:not([disabled])[label][checked=true],
 .devtools-toolbarbutton:not([disabled])[label][open],
 .devtools-button:not(:empty).checked {
@@ -443,17 +442,28 @@ checkbox:-moz-focusring {
 
 .devtools-togglebutton[aria-pressed="true"],
 .devtools-togglebutton:focus {
   background-color: var(--theme-toolbarbutton-checked-background);
   color: var(--theme-toolbarbutton-checked-color);
 }
 
 .devtools-togglebutton[aria-pressed="true"]:hover {
-  background: var(--theme-toolbarbutton-checked-hover-color);
+  background: var(--theme-toolbarbutton-checked-hover-background);
+  color: var(--theme-toolbarbutton-checked-hover-color);
+}
+
+.devtools-togglebutton:active,
+.devtools-togglebutton:hover:active {
+  background: var(--theme-toolbarbutton-active-background);
+  color: var(--theme-toolbarbutton-active-color);
+}
+
+.devtools-togglebutton::-moz-focus-inner {
+  border-color: transparent;
 }
 
 /* Icons */
 
 .devtools-button.devtools-clear-icon::before {
   background-image: url("chrome://devtools/skin/images/clear.svg");
 }
 
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -92,19 +92,22 @@
   --theme-popup-color: -moz-fieldText;
   --theme-popup-border-color: ThreeDShadow;
   --theme-popup-dimmed: hsla(0,0%,80%,.3);
 
   /* Styling for devtool buttons */
   --theme-toolbarbutton-background: none;
   --theme-toolbarbutton-color: var(--grey-70);
   --theme-toolbarbutton-hover-background: var(--grey-90-a05);
-  --theme-toolbarbutton-checked-background: var(--grey-90-a20);
+  --theme-toolbarbutton-checked-background: var(--grey-90-a10);
   --theme-toolbarbutton-checked-color: var(--grey-90);
-  --theme-toolbarbutton-checked-hover-color: var(--grey-90-a15);
+  --theme-toolbarbutton-checked-hover-background: var(--grey-90-a15);
+  --theme-toolbarbutton-checked-hover-color: var(--grey-90);
+  --theme-toolbarbutton-active-background: var(--grey-90-a20);
+  --theme-toolbarbutton-active-color: var(--grey-90);
 }
 
 /*
  * For doorhangers elsewhere in Firefox, Mac uses fixed colors rather than
  * system colors.
  */
 :root[platform="mac"].theme-light {
   --theme-popup-background: hsla(0,0%,99%,.975);
@@ -190,19 +193,22 @@
   --theme-popup-color: rgb(249,249,250);
   --theme-popup-border-color: #27272b;
   --theme-popup-dimmed: rgba(249,249,250,.1);
 
   /* Styling for devtool buttons */
   --theme-toolbarbutton-background: none;
   --theme-toolbarbutton-color: var(--grey-40);
   --theme-toolbarbutton-hover-background: var(--grey-10-a15);
-  --theme-toolbarbutton-checked-background: var(--grey-10-a30);
+  --theme-toolbarbutton-checked-background: var(--grey-10-a20);
   --theme-toolbarbutton-checked-color: var(--grey-30);
-  --theme-toolbarbutton-checked-hover-color: var(--grey-10-a25);
+  --theme-toolbarbutton-checked-hover-background: var(--grey-10-a25);
+  --theme-toolbarbutton-checked-hover-color: var(--grey-30);
+  --theme-toolbarbutton-active-background: var(--grey-10-a30);
+  --theme-toolbarbutton-active-color: var(--grey-30);
 }
 
 :root {
   --theme-focus-border-color-textbox: #0675d3;
   --theme-textbox-box-shadow: rgba(97,181,255,.75);
 
   /* Text sizes */
   --theme-body-font-size: 11px;
@@ -258,26 +264,31 @@
 
   --yellow-50: #ffe900;
   --yellow-60: #d7b600;
   --yellow-65: #be9b00;
   --yellow-70: #a47f00;
   --yellow-80: #715100;
 
   --grey-10: #f9f9fa;
+  --grey-10-a15: rgba(249, 249, 250, 0.15);
+  --grey-10-a20: rgba(249, 249, 250, 0.2);
   --grey-10-a25: rgba(249, 249, 250, 0.25);
   --grey-10-a30: rgba(249, 249, 250, 0.3);
   --grey-20: #ededf0;
   --grey-25: #e0e0e2;
   --grey-30: #d7d7db;
   --grey-40: #b1b1b3;
   --grey-43: #a4a4a4;
   --grey-45: #939395;
   --grey-50: #737373;
   --grey-55: #5c5c5f;
   --grey-60: #4a4a4f;
   --grey-70: #38383d;
   --grey-80: #2a2a2e;
   --grey-85: #1b1b1d;
   --grey-90: #0c0c0d;
+  --grey-90-a05: rgba(12, 12, 13, 0.05);
+  --grey-90-a10: rgba(12, 12, 13, 0.1);
   --grey-90-a15: rgba(12, 12, 13, 0.15);
   --grey-90-a20: rgba(12, 12, 13, 0.2);
+  --grey-90-a30: rgba(12, 12, 13, 0.3);
 }