Bug 1525615: Change button style. r=jdescottes,ladybenko
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 26 Feb 2019 12:41:34 +0000
changeset 518951 a77368ca7fdf21e5d2d73ca741ecf2418c56b10e
parent 518950 263279adce20c07bef7db8b8b97bd9cffaa90f22
child 518952 2aedb2fbe8e1f8e05c8d4db7cbcadef29b162750
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, ladybenko
bugs1525615
milestone67.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 1525615: Change button style. r=jdescottes,ladybenko Differential Revision: https://phabricator.services.mozilla.com/D20293
devtools/client/aboutdebugging-new/src/base.css
--- a/devtools/client/aboutdebugging-new/src/base.css
+++ b/devtools/client/aboutdebugging-new/src/base.css
@@ -5,17 +5,16 @@
 :root {
   /* Colors from common.css */
   --bg-color: #f9f9fa; /* --in-content-background-color */
   --text-color: #0c0c0d; /* --in-content-text-color */
 
   --border-color: #d7d7db; /* --in-content-border-color */
 
   --box-background: #fff;
-  --box-background-hover: #ebebeb;
   --box-border-color: #d7d7db;
 
   --category-background-hover: rgba(12,12,13,0.1);
   --category-text: rgba(12,12,13);
   --category-text-selected: #0a84ff;
 
   /* Dimensions from common.css #categories > .category */
   /* TODO: Values are not based on photon's 4px base distance, see bug 1501638 */
@@ -31,28 +30,34 @@
   --success-50: #30e60b;
   --warning-50: #ffe900;
   --warning-90: #3e2800;
   --error-50: #ff0039;
   --error-60: #d70022;
   --highlight-50: #0a84ff;
   --grey-20: #ededf0;
   --grey-30: #d7d7db; /* for ui, no special semantic */
+  --grey-90: #0c0c0d;
+  --grey-90-a10: rgba(12, 12, 13, 0.1);
+  --grey-90-a20: rgba(12, 12, 13, 0.2);
+  --grey-90-a30: rgba(12, 12, 13, 0.3);
   --grey-90-a60: rgba(12, 12, 13, 0.6);
   --grey-90-a80: rgba(12, 12, 13, 0.8);
   --white-100: #fff; /* for ui, no special semantic */
 
   /* Global layout vars */
   --page-width: 664px;
   --base-unit: 4px;
 
   /* Global styles */
   --base-font-style: message-box;
   --base-font-size: 15px; /* root font of 11px * 1.36em = 15px */
   --base-line-height: 1.8;
+  /* --button-font-size should merge with --base-font-size once the base font becomes 13px */
+  --button-font-size: 13px;
   --micro-font-size: 11px;
 
   --monospace-font-family: monospace;
 
   /*
   * Variables particular to about:debugging
   */
   --alt-heading-icon-size: calc(var(--base-unit) * 6);
@@ -236,37 +241,41 @@ p {
 Form controls
 */
 .default-button, .default-input {
   box-sizing: border-box;
   font-size: 1em;
 }
 
 /* standard, normal button */
-.default-button, .default-select {
+.default-button {
   -moz-appearance: none;
-  font-size: 1em;
-  color: var(--text-color);
-  background-color: var(--page-background);
+  color: var(--grey-90); /* Note: this is from Photon Default button */
+  background-color: var(--grey-90-a10); /* Note: this is from Photon Default button */
+  font-size: var(--button-font-size); /* Note: this is from Photon Default button */
 
   margin: 0;
   height: calc(var(--base-unit) * 8); /* Note: this is from Photon, not common.css */
   padding-inline-start: calc(var(--base-unit) * 5);
   padding-inline-end: calc(var(--base-unit) * 5);
 
-  border: 1px solid var(--box-border-color);
+  border: none;
   border-radius: calc(var(--base-unit) / 2);
 }
 
 .default-button:enabled:hover {
-  background: var(--box-background-hover)
+  background: var(--grey-90-a20); /* Note: this is from Photon Default button */
+}
+
+.default-button:enabled:active {
+  background: var(--grey-90-a30); /* Note: this is from Photon Default button */
 }
 
 .default-button:disabled {
-  opacity: 0.4;
+  opacity: 0.4; /* Note: this is from Photon Default button */
 }
 
 /* smaller size for a default button */
 .default-button--micro {
   padding-inline-start: calc(2 * var(--base-unit));
   padding-inline-end: calc(2 * var(--base-unit));
   font-size: var(--micro-font-size);
   height: calc(var(--base-unit) * 6);