Bug 1288401 - Inspector sidebar tabs are missing the :active styling. r=ntim a=ritu
authorSteve Chung <schung@mozilla.com>
Tue, 26 Jul 2016 18:06:20 +0800
changeset 349646 89b4dd71d6a204852532d9bb2d52b744615d74bb
parent 349645 8771593a414059402960c3700ae099bb11309199
child 349647 a3dcf80115477a4cb54f3fd52597206f098187ab
push id1230
push userjlund@mozilla.com
push dateMon, 31 Oct 2016 18:13:35 +0000
treeherdermozilla-release@5e06e3766db2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim, ritu
bugs1288401
milestone50.0a2
Bug 1288401 - Inspector sidebar tabs are missing the :active styling. r=ntim a=ritu
devtools/client/shared/components/tabs/tabs.css
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@@ -69,43 +69,48 @@
 
 .theme-dark .tabs .tabs-menu-item a:hover,
 .theme-dark .tabs .tabs-menu-item a,
 .theme-light .tabs .tabs-menu-item a:hover,
 .theme-light .tabs .tabs-menu-item a {
   padding: 3px 15px;
 }
 
-.theme-dark .tabs .tabs-menu-item:hover,
-.theme-light .tabs .tabs-menu-item:hover {
+.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);
 }
 
+.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);
+}
+
 .theme-dark .tabs .tabs-menu-item.is-active,
-.theme-dark .tabs .tabs-menu-item.is-active:hover,
-.theme-light .tabs .tabs-menu-item.is-active,
-.theme-light .tabs .tabs-menu-item.is-active:hover {
+.theme-light .tabs .tabs-menu-item.is-active {
   background-color: var(--theme-selection-background);
 }
 
 .theme-dark .tabs .tabs-menu-item.is-active a,
-.theme-dark .tabs .tabs-menu-item.is-active:hover a,
-.theme-light .tabs .tabs-menu-item.is-active a,
-.theme-light .tabs .tabs-menu-item.is-active:hover a {
+.theme-light .tabs .tabs-menu-item.is-active a {
   color: var(--theme-selection-color);
 }
 
 /* Dark Theme */
 
 .theme-dark .tabs .tabs-menu-item a {
+  color: var(--theme-body-color-alt);
+}
+
+.theme-dark .tabs .tabs-menu-item:hover:not(.is-active) a {
   color: #CED3D9;
 }
 
-.theme-dark .tabs .tabs-menu-item:active:hover {
-  background-color: hsla(206, 37%, 4%, .4); /* --toolbar-tab-hover-active */
+.theme-dark .tabs .tabs-menu-item:hover:active a {
+  color: var(--theme-selection-color);
 }
 
 /* Firebug Theme */
 
 .theme-firebug .tabs {
   background-color: rgb(219, 234, 249);
   background-image: linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0));
 }
@@ -129,30 +134,33 @@
 
 .theme-firebug .tabs .tabs-menu-item a {
   font-family: var(--proportional-font-family);
   font-weight: bold;
   color: var(--theme-body-color);
   border-radius: 4px 4px 0 0;
 }
 
-.theme-firebug .tabs .tabs-menu-item:hover a {
+.theme-firebug .tabs .tabs-menu-item:hover:not(.is-active) a {
   border: 1px solid #C8C8C8;
   border-bottom: 1px solid transparent;
   background-color: transparent;
 }
 
-.theme-firebug .tabs .tabs-menu-item.is-active a,
-.theme-firebug .tabs .tabs-menu-item.is-active:hover a {
+.theme-firebug .tabs .tabs-menu-item.is-active a {
   background-color: rgb(247, 251, 254);
   border: 1px solid rgb(170, 188, 207);
   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);
+}
+
 .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 {
   border: 1px solid transparent;
 }