Bug 606837 - Gray out Panorama background on inactive windows [r=ian, ui=shorlander, a=beltzner]

browser/base/content/tabview/search.js

@@ -509,8 +509,9 @@ function hideSearch(event){
 
   iQ("#searchbutton").css({ opacity:.8 });
 
-  let mainWindow = gWindow.document.getElementById("main-window");
-  mainWindow.setAttribute("activetitlebarcolor", "#C4C4C4");
+#ifdef XP_MACOSX
+  UI.setTitlebarColors(true);
+#endif
 
   performSearch();
   SearchEventHandler.switchToBeforeMode();
@@ -550,8 +551,10 @@ function ensureSearchShown(){
   if (!isSearchEnabled()) {
     $searchShade.show();
     $search.show();
-    var mainWindow = gWindow.document.getElementById("main-window");
-    mainWindow.setAttribute("activetitlebarcolor", "#717171");       
+
+#ifdef XP_MACOSX
+    UI.setTitlebarColors({active: "#717171", inactive: "#EDEDED"});
+#endif
 
     $searchbox[0].focus();
     $searchbox[0].val = '0';

browser/base/content/tabview/ui.js

@@ -474,7 +474,7 @@ let UI = {
 
     gBrowser.updateTitlebar();
 #ifdef XP_MACOSX
-    this._setActiveTitleColor(true);
+    this.setTitlebarColors(true);
 #endif
     let event = document.createEvent("Events");
     event.initEvent("tabviewshown", true, false);
@@ -551,7 +551,7 @@ let UI = {
 
     gBrowser.updateTitlebar();
 #ifdef XP_MACOSX
-    this._setActiveTitleColor(false);
+    this.setTitlebarColors(false);
 #endif
     let event = document.createEvent("Events");
     event.initEvent("tabviewhidden", true, false);
@@ -562,19 +562,27 @@ let UI = {
 
 #ifdef XP_MACOSX
   // ----------
-  // Function: _setActiveTitleColor
+  // Function: setTitlebarColors
   // Used on the Mac to make the title bar match the gradient in the rest of the
   // TabView UI.
   //
   // Parameters:
-  //   set - true for the special TabView color, false for the normal color.
-  _setActiveTitleColor: function UI__setActiveTitleColor(set) {
+  //   colors - (bool or object) true for the special TabView color, false for
+  //         the normal color, and an object with "active" and "inactive"
+  //         properties to specify directly.
+  setTitlebarColors: function UI_setTitlebarColors(colors) {
     // Mac Only
     var mainWindow = gWindow.document.getElementById("main-window");
-    if (set)
+    if (colors === true) {
       mainWindow.setAttribute("activetitlebarcolor", "#C4C4C4");
-    else
+      mainWindow.setAttribute("inactivetitlebarcolor", "#EDEDED");
+    } else if (colors && "active" in colors && "inactive" in colors) {
+      mainWindow.setAttribute("activetitlebarcolor", colors.active);
+      mainWindow.setAttribute("inactivetitlebarcolor", colors.inactive);
+    } else {
       mainWindow.removeAttribute("activetitlebarcolor");
+      mainWindow.removeAttribute("inactivetitlebarcolor");
+    }
   },
 #endif
 

browser/themes/pinstripe/browser/tabview/tabview.css

@@ -7,7 +7,11 @@ body {
 }
 
 #bg {
-  background: -moz-linear-gradient(top,#C4C4C4,#9E9E9E);
+  background: -moz-linear-gradient(#C4C4C4,#9E9E9E);
+}
+
+#bg:-moz-window-inactive {
+  background: -moz-linear-gradient(rgb(237,237,237),rgb(216,216,216));
 }
 
 /* Tabs
@@ -132,7 +136,7 @@ html[dir=rtl] .expander {
   width: 94.5%;
   white-space: nowrap;
   overflow: hidden;
-	text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+  text-shadow: 0 1px rgba(255, 255, 255, 0.6);
 }
 
 .stacked {
@@ -419,7 +423,7 @@ input.name:focus {
 
 input.name:-moz-placeholder {
   font-style: italic !important;
-  color: transparent;	
+  color: transparent;
   background-image: url(chrome://browser/skin/tabview/edit-light.png);
   background-image-opacity: .1;
   background-repeat: no-repeat;
@@ -540,6 +544,10 @@ html[dir=rtl] .iq-resizable-se {
   height: 100%;
 }
 
+#searchshade:-moz-window-inactive {
+  background: -moz-linear-gradient(rgba(237,237,237,.42),rgba(216,216,216,.42));
+}
+
 #search{
   width: 100%;
   height: 100%;
@@ -558,6 +566,11 @@ html[dir=rtl] .iq-resizable-se {
   font-size: 14px;  
 }
 
+#searchbox:-moz-window-inactive {
+  background-color: #BBBBBB;
+  box-shadow: 0px 1px 0px rgba(255,255,255,.1), 0px -1px 0px rgba(0,0,0,0.3), 0px 0px 13px rgba(0,0,0,.2);
+}
+
 #actions {
   width: 29px;
   text-align: center;