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 191752 5f65df850a4447235b2111eaae1e7b66341fa4fa
parent 191751 965a0df971b9951d61a076c1bda4102430d38c8c
child 191753 dcd2cadb740abf1ed3470a3226a15547320d502b
push id3503
push userraliiev@mozilla.com
push dateMon, 28 Apr 2014 18:51:11 +0000
treeherdermozilla-beta@c95ac01e332e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersUnfocused, mmaslaney, sylvestre
bugs980220
milestone30.0a2
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
@@ -2246,16 +2246,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;
 }