Bug 980220 - UITour: [Linux] Change the highlight style to have better fallback without an X compositor. r=Unfocused, ui-r=mmaslaney a=sylvestre
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Sun, 13 Apr 2014 14:28:19 -0400
changeset 183729 8e6041de3ce7c9475ddb236293355a5e95d5a7bd
parent 183728 975b76d0b1c013871d9efcc4d19ec6695ec7d7e4
child 183730 e946bc71ae2b6940d26607f2455c154efe7581f8
push id3461
push usermozilla@noorenberghe.ca
push dateMon, 14 Apr 2014 00:29:54 +0000
treeherdermozilla-beta@e946bc71ae2b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersUnfocused, mmaslaney, sylvestre
bugs980220
milestone29.0
Bug 980220 - UITour: [Linux] Change the highlight style to have better fallback without an X compositor. r=Unfocused, ui-r=mmaslaney a=sylvestre
browser/themes/linux/browser.css
browser/themes/shared/UITour.inc.css
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -2228,16 +2228,29 @@ chatbox {
 
 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
   background: url("chrome://browser/skin/privatebrowsing-mask.png") center no-repeat;
   width: 40px;
 }
 
 %include ../shared/UITour.inc.css
 
+#UITourHighlight {
+  /* Below are some fixes for people without an X compositor on Linux.
+     This is why we can't have nice things: */
+  /* Animations don't repaint properly without an X compositor. */
+  animation-name: none !important;
+  /* Opacity rounds to 0 or 1 on Linux without an X compositor so make the
+     background be transparent in that case by having all alpha values < 0.5 */
+  background-image: radial-gradient(50% 100%, rgba(0,149,220,0.3) 50%, rgba(0,149,220,0.49) 100%);
+  /* The highlight isn't anti-aliased without an X compositor so make it thicker.
+     Make it a darker color since we don't have the box-shadow in this case. */
+  border: 4px solid rgb(0,149,220);
+}
+
 #UITourTooltipDescription {
   font-size: 1.05rem;
 }
 
 #UITourTooltipClose {
   -moz-margin-end: -4px;
   height: 16px;
   width: 16px;
--- a/browser/themes/shared/UITour.inc.css
+++ b/browser/themes/shared/UITour.inc.css
@@ -13,17 +13,19 @@
   /* This is a buffer to compensate for the movement in the "wobble" effect */
   padding: 4px;
 }
 
 #UITourHighlight {
   background-image: radial-gradient(50% 100%, rgba(0,149,220,0.4) 50%, rgba(0,149,220,0.6) 100%);
   border-radius: 40px;
   border: 1px solid white;
-  box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
+  /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
+     on Linux without an X compositor where opacity is either 0 or 1. */
+  box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
   min-height: 32px;
   min-width: 32px;
 }
 
 #UITourTooltipBody {
   -moz-margin-end: 14px;
 }