Bug 1339783 - use theme-toolbar-hover for accordion header background on hover;r=gl draft
authorJulian Descottes <jdescottes@mozilla.com>
Wed, 22 Feb 2017 16:55:05 +0100
changeset 488108 c4ea3370878c2f8ed216e4f3c34e2a2fa0e85901
parent 487583 c7b015c488cfb2afbcff295a9639acd85df332f8
child 546639 7bfd2a94424167c8064115b97126bc3024d26abb
push id46424
push userjdescottes@mozilla.com
push dateWed, 22 Feb 2017 15:59:25 +0000
reviewersgl
bugs1339783
milestone54.0a1
Bug 1339783 - use theme-toolbar-hover for accordion header background on hover;r=gl Move toolbar only variable toolbar-tab-hover to variables.css and reuse it in accordion. MozReview-Commit-ID: KgBLlYIYlrr
devtools/client/inspector/layout/components/Accordion.css
devtools/client/responsive.html/index.css
devtools/client/shared/components/tabs/tabs.css
devtools/client/themes/toolbars.css
devtools/client/themes/toolbox.css
devtools/client/themes/variables.css
--- a/devtools/client/inspector/layout/components/Accordion.css
+++ b/devtools/client/inspector/layout/components/Accordion.css
@@ -19,17 +19,17 @@
   font-size: 11px;
   padding: 5px;
   transition: all 0.25s ease;
   width: 100%;
   -moz-user-select: none;
 }
 
 .accordion ._header:hover {
-  background-color: var(--theme-selection-color);
+  background-color: var(--theme-toolbar-hover);
 }
 
 .accordion ._header:hover svg {
   fill: var(--theme-comment-alt);
 }
 
 .accordion ._content {
   border-bottom: 1px solid var(--theme-splitter-color);
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -16,17 +16,17 @@
   --viewport-selection-arrow-hovered:
     url("./images/select-arrow.svg#light-hovered");
   --viewport-selection-arrow-selected:
     url("./images/select-arrow.svg#light-selected");
 }
 
 .theme-dark {
   --rdm-box-shadow: 0 4px 4px 0 rgba(105, 105, 105, 0.26);
-  --submit-button-active-background-color: var(--toolbar-tab-hover-active);
+  --submit-button-active-background-color: var(--theme-toolbar-hover-active);
   --submit-button-active-color: var(--theme-selection-color);
   --viewport-color: #c6ccd0;
   --viewport-hover-color: #dde1e4;
   --viewport-active-color: #fcfcfc;
   --viewport-selection-arrow: url("./images/select-arrow.svg#dark");
   --viewport-selection-arrow-hovered:
     url("./images/select-arrow.svg#dark-hovered");
   --viewport-selection-arrow-selected:
@@ -531,17 +531,17 @@ select > option.divider {
   color: var(--theme-body-color);
   width: 100%;
   height: 20px;
   position: absolute;
   bottom: 0;
 }
 
 #device-submit-button:hover {
-  background-color: var(--toolbar-tab-hover);
+  background-color: var(--theme-toolbar-hover);
 }
 
 #device-submit-button:hover:active {
   background-color: var(--submit-button-active-background-color);
   color: var(--submit-button-active-color);
 }
 
 /**
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@@ -90,22 +90,22 @@
 .theme-dark .tabs .tabs-menu-item a,
 .theme-light .tabs .tabs-menu-item a {
   color: inherit;
   padding: 3px 15px;
 }
 
 .theme-dark .tabs .tabs-menu-item:hover:not(.is-active),
 .theme-light .tabs .tabs-menu-item:hover:not(.is-active) {
-  background-color: var(--toolbar-tab-hover);
+  background-color: var(--theme-toolbar-hover);
 }
 
 .theme-dark .tabs .tabs-menu-item:hover:active:not(.is-active),
 .theme-light .tabs .tabs-menu-item:hover:active:not(.is-active) {
-  background-color: var(--toolbar-tab-hover-active);
+  background-color: var(--theme-toolbar-hover-active);
 }
 
 .theme-dark .tabs .tabs-menu-item.is-active,
 .theme-light .tabs .tabs-menu-item.is-active {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
@@ -160,17 +160,17 @@
 .theme-firebug .tabs .tabs-menu-item.is-active a {
   background-color: var(--theme-toolbar-tab-selected-background);
   border: 1px solid var(--theme-splitter-color);
   border-bottom-color: transparent;
   color: var(--theme-body-color);
 }
 
 .theme-firebug .tabs .tabs-menu-item:hover:active a {
-  background-color: var(--toolbar-tab-hover-active);
+  background-color: var(--theme-toolbar-hover-active);
 }
 
 .theme-firebug .tabs .tabs-menu-item.is-active:hover:active a {
   background-color: var(--theme-selection-background);
   color: var(--theme-selection-color);
 }
 
 .theme-firebug .tabs .tabs-menu-item a {
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -1,31 +1,27 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* 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 devtools toolbar that aren't defined by the themes */
 .theme-light {
-  --toolbar-tab-hover: rgba(170, 170, 170, .2);
-  --toolbar-tab-hover-active: rgba(170, 170, 170, .4);
   --searchbox-background-color: #ffee99;
   --searchbox-border-color: #ffbf00;
   --searcbox-no-match-background-color: #ffe5e5;
   --searcbox-no-match-border-color: #e52e2e;
   --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
   --filter-image: url(chrome://devtools/skin/images/filter.svg);
   --tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
   --icon-filter: none;
   --checked-icon-filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
 }
 
 .theme-dark {
-  --toolbar-tab-hover: rgba(110,120,130,0.1);
-  --toolbar-tab-hover-active: rgba(110,120,130,0.2);
   --searchbox-background-color: #4d4222;
   --searchbox-border-color: #d99f2b;
   --searcbox-no-match-background-color: #402325;
   --searcbox-no-match-border-color: #cc3d3d;
   --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
   --filter-image: url(chrome://devtools/skin/images/filter.svg);
   --tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
   --icon-filter: invert(1);
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -129,25 +129,25 @@
   border-color: var(--theme-splitter-color);
 }
 
 .theme-dark .devtools-tab:hover {
   color: #ced3d9;
 }
 
 .devtools-tab:hover {
-  background-color: var(--toolbar-tab-hover);
+  background-color: var(--theme-toolbar-hover);
 }
 
 .theme-dark .devtools-tab:hover:active {
   color: var(--theme-selection-color);
 }
 
 .devtools-tab:hover:active {
-  background-color: var(--toolbar-tab-hover-active);
+  background-color: var(--theme-toolbar-hover-active);
 }
 
 .theme-dark .devtools-tab:not(.selected).highlighted {
   background-color: hsla(99, 100%, 14%, .3);
 }
 
 .theme-light .devtools-tab:not(.selected).highlighted {
   background-color: rgba(44, 187, 15, .2);
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -13,19 +13,22 @@
  * This file is parsed in js (see client/shared/theme.js)
  * so the formatting should be consistent (i.e. no '}' inside a rule).
  */
 
 :root.theme-light {
   --theme-body-background: white;
   --theme-sidebar-background: white;
   --theme-contrast-background: #e6b064;
+  --theme-hover-background: #e6b064;
 
   --theme-tab-toolbar-background: #fcfcfc;
   --theme-toolbar-background: #fcfcfc;
+  --theme-toolbar-hover: rgba(170, 170, 170, .2);
+  --theme-toolbar-hover-active: rgba(170, 170, 170, .4);
   --theme-selection-background: #4c9ed9;
   --theme-selection-background-semitransparent: rgba(76, 158, 217, 0.15);
   --theme-selection-color: #f5f7fa;
   --theme-splitter-color: #dde1e4;
   --theme-comment: #696969;
 
   --theme-body-color: #393f4c;
   --theme-body-color-alt: #585959;
@@ -76,16 +79,18 @@
 
 :root.theme-dark {
   --theme-body-background: #393f4c;
   --theme-sidebar-background: #393f4c;
   --theme-contrast-background: #ffb35b;
 
   --theme-tab-toolbar-background: #272b35;
   --theme-toolbar-background: #272b35;
+  --theme-toolbar-hover: rgba(110, 120, 130, 0.1);
+  --theme-toolbar-hover-active: rgba(110, 120, 130, 0.2);
   --theme-selection-background: #5675B9;
   --theme-selection-background-semitransparent: rgba(86, 117, 185, 0.5);
   --theme-selection-color: #f5f7fa;
   --theme-splitter-color: #454d5d;
   --theme-comment: #757873;
 
   --theme-body-color: #8fa1b2;
   --theme-body-color-alt: #b6babf;