Bug 1530662 - Add hover/active and dark theme colors for buttons in Changes panel. r=pbro
authorRazvan Caliman <rcaliman@mozilla.com>
Tue, 26 Feb 2019 14:18:29 +0000
changeset 519039 cb9df1982b8a0cd8f53adf46580e7a79af654af0
parent 519038 85f7a0580ce94b1d58e63485108fe7ebe54fea2b
child 519040 8963bca25d1a8bc1c517c27aa6ef94d752bcae25
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)
reviewerspbro
bugs1530662
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 1530662 - Add hover/active and dark theme colors for buttons in Changes panel. r=pbro Adds button styles to conform to latest UI designs: https://mozilla.invisionapp.com/share/VFQC7MQSD9W#/screens Differential Revision: https://phabricator.services.mozilla.com/D21212
devtools/client/themes/changes.css
devtools/client/themes/variables.css
--- a/devtools/client/themes/changes.css
+++ b/devtools/client/themes/changes.css
@@ -1,33 +1,39 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
  /* CSS Variables specific to the Changes panel that aren't defined by the themes */
  :root {
-   --changes-button-background-color: var(--grey-90-a10);
-   --changes-button-background-color-hover: var(--grey-90-a15);
-   --changes-button-background-color-active: var(--grey-90-a20);
+   --changes-button-copy-all-background-color--hover: var(--grey-90-a10);
+   --changes-button-copy-all-background-color--active: var(--grey-90-a15);
+   --changes-button-copy-rule-background-color: var(--grey-90-a10);
+   --changes-button-copy-rule-background-color--hover: var(--grey-90-a15);
+   --changes-button-copy-rule-background-color--active: var(--grey-90-a20);
    --diff-add-background-color: #f1feec;
    --diff-add-text-color: #54983f;
    --diff-remove-background-color: #fbf2f5;
    --diff-remove-text-color: #bf7173;
    --diff-source-background: var(--theme-toolbar-background);
    --diff-level: 0;
    --diff-level-offset: 10px;
    /*
     Minimum padding so content on the first level (zero) isn't touching the edge. Added
     and removed lines will re-declare this to add extra padding to clear the +/- icons.
    */
    --diff-level-min-offset: 5px;
  }
 
 :root.theme-dark {
-  --changes-button-background-color: #252526;
+  --changes-button-copy-all-background-color--hover: var(--grey-10-a10);
+  --changes-button-copy-all-background-color--active: var(--grey-10-a15);
+  --changes-button-copy-rule-background-color: var(--grey-10-a10);
+  --changes-button-copy-rule-background-color--hover: var(--grey-10-a15);
+  --changes-button-copy-rule-background-color--active: var(--grey-10-a20);
   --diff-add-background-color: rgba(18, 188, 0, 0.15);
   --diff-add-text-color: #12BC00;
   --diff-remove-background-color: rgba(255, 0, 57, 0.15);
   --diff-remove-text-color: #FF0039;
   --diff-source-background: #222225;
 }
 
 :root[dir="rtl"] {
@@ -79,44 +85,66 @@
   padding-bottom: 3px;
   padding-left: calc(var(--diff-level-min-offset) +
                      var(--diff-level-offset) * var(--diff-level));
 }
 
 .changes__copy-all-changes-button {
   -moz-context-properties: fill;
   background: url(chrome://devtools/skin/images/copy.svg) no-repeat;
+  background-position: 4px 3px;
   background-size: 16px;
   border: none;
+  border-radius: 3px;
   color: var(--theme-body-color);
   fill: currentColor;
-  height: 16px;
-  margin: 7px 10px;
-  padding-left: 21px;
+  margin: 2px 5px;
+  padding: 4px 5px 4px 25px;
+}
+
+.changes__copy-all-changes-button:hover {
+  background-color: var(--changes-button-copy-all-background-color--hover);
+}
+
+.changes__copy-all-changes-button:active {
+  background-color: var(--changes-button-copy-all-background-color--active);
 }
 
 /* Hide the Copy Rule button by default. */
 .changes__copy-rule-button {
-  background-color: var(--changes-button-background-color);
-  border-radius: 5px;
+  /**
+   * The rgba() format of the background colors makes the button see-through and it looks
+   * bad when stacked on top of long selectors.
+   *
+   * To solve this and not change the color format which is inherited from the Photon
+   * color guide in `client/themes/variables.css`, we use a blending trick to overlay the
+   * rgba() color value onto a solid color used for the panel background (achieved with
+   * a linear gradient with no transition). This keeps the rgba() color, but prevents the
+   * see-through effect.
+   */
+  background-blend-mode: overlay;
+  background-color: var(--changes-button-copy-rule-background-color);
+  background-image:
+    linear-gradient(var(--theme-sidebar-background), var(--theme-sidebar-background));
+  border-radius: 8px;
   border: none;
   color: var(--theme-body-color);
   display: none;
-  padding: 1px 5px;
+  padding: 1px 7px;
   position: absolute;
   right: 5px;
   top: 2px;
 }
 
 .changes__copy-rule-button:hover {
-  background-color: var(--changes-button-background-color-hover);
+  background-color: var(--changes-button-copy-rule-background-color--hover);
 }
 
 .changes__copy-rule-button:active {
-  background-color: var(--changes-button-background-color-active);
+  background-color: var(--changes-button-copy-rule-background-color--active);
 }
 
 .changes__rule {
   position: relative;
 }
 
 .changes__selector {
   word-wrap: break-word;
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -238,16 +238,19 @@
   --green-70: #058b00;
 
   --yellow-50: #ffe900;
   --yellow-60: #d7b600;
   --yellow-65: #be9b00;
   --yellow-80: #715100;
 
   --grey-10: #f9f9fa;
+  --grey-10-a10: rgba(249, 249, 250, 0.1);
+  --grey-10-a15: rgba(249, 249, 250, 0.15);
+  --grey-10-a20: rgba(249, 249, 250, 0.2);
   --grey-20: #ededf0;
   --grey-25: #e0e0e2;
   --grey-30: #d7d7db;
   --grey-40: #b1b1b3;
   --grey-45: #939395;
   --grey-50: #737373;
   --grey-55: #5c5c5f;
   --grey-60: #4a4a4f;