Bug 1034079 - Add a hover effect on resume button. r=vporof

browser/themes/shared/devtools/debugger.inc.css

@@ -608,13 +608,10 @@
 #resume {
   list-style-image: url(debugger-pause.png);
   -moz-image-region: rect(0px,16px,16px,0px);
-  transition: background 0.15s ease-in-out;
 }
 
 #resume[checked] {
-  background: none;
   list-style-image: url(debugger-play.png);
-  -moz-image-region: rect(0px,32px,16px,16px);
 }
 
 @media (min-resolution: 2dppx) {

browser/themes/shared/devtools/toolbars.inc.css

@@ -56,6 +56,7 @@
   border-radius: 0;
   margin: 2px 3px;
   color: inherit;
+  transition: background 0.05s ease-in-out;
 }
 
 .devtools-menulist:-moz-focusring,
@@ -176,24 +177,32 @@
 }
 
 /* Menu type buttons and checked states */
-.theme-dark .devtools-menulist[open=true],
-.theme-dark .devtools-toolbarbutton[open=true],
-.theme-dark .devtools-toolbarbutton[open=true]:hover,
-.theme-dark .devtools-toolbarbutton[open=true]:hover:active,
 .theme-dark .devtools-toolbarbutton[checked=true],
-.theme-dark .devtools-toolbarbutton[checked=true]:hover,
 .theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
   background: rgba(29, 79, 115, .7); /* Select highlight blue */
   color: #f5f7fa;
 }
+
+.theme-light .devtools-toolbarbutton[checked=true],
+.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
+  background: rgba(76, 158, 217, .2); /* Select highlight blue */
+}
+
+.theme-dark .devtools-menulist[open=true],
+.theme-dark .devtools-toolbarbutton[open=true],
+.theme-dark .devtools-toolbarbutton[open=true]:hover,
+.theme-dark .devtools-toolbarbutton[open=true]:hover:active,
+.theme-dark .devtools-toolbarbutton[checked=true]:hover {
+  background: rgba(29, 79, 115, .8); /* Select highlight blue */
+  color: #f5f7fa;
+}
+
 .theme-light .devtools-menulist[open=true],
 .theme-light .devtools-toolbarbutton[open=true],
 .theme-light .devtools-toolbarbutton[open=true]:hover,
 .theme-light .devtools-toolbarbutton[open=true]:hover:active,
-.theme-light .devtools-toolbarbutton[checked=true],
-.theme-light .devtools-toolbarbutton[checked=true]:hover,
-.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
-  background: rgba(76, 158, 217, .2); /* Select highlight blue */
+.theme-light .devtools-toolbarbutton[checked=true]:hover {
+  background: rgba(76, 158, 217, .4); /* Select highlight blue */
 }
 
 .devtools-option-toolbarbutton {
@@ -827,7 +836,6 @@
 .theme-light .command-button-invertable[checked=true]:not(:active) > image,
 .theme-light .devtools-tab[icon-invertable][selected] > image,
 .theme-light .devtools-tab[icon-invertable][highlighted] > image,
-.theme-light #resume[checked] > image,
 .theme-light #record-snapshot[checked] > image,
 .theme-light #profiler-start[checked] > image {
   filter: none !important;