Bug 606837 - Gray out Panorama background on inactive windows [r=ian, ui=shorlander, a=beltzner]
authorMichael Yoshitaka Erlewine <mitcho@mitcho.com>
Tue, 25 Jan 2011 14:10:00 -0500
changeset 61279 8af189735840c0f08899114d9843a39a36232e45
parent 61278 205aa17e715f6de2511491876d516085d5e3cb73
child 61280 43da3bf218c3fcb5a7336441df70b5dc259fef29
push id18292
push usereakhgari@mozilla.com
push dateTue, 25 Jan 2011 20:23:34 +0000
treeherdermozilla-central@0fb025a84958 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersian, beltzner
bugs606837
milestone2.0b10pre
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 606837 - Gray out Panorama background on inactive windows [r=ian, ui=shorlander, a=beltzner]
browser/base/content/tabview/search.js
browser/base/content/tabview/ui.js
browser/themes/pinstripe/browser/tabview/tabview.css
--- a/browser/base/content/tabview/search.js
+++ b/browser/base/content/tabview/search.js
@@ -504,18 +504,19 @@ function createSearchTabMacher() {
 
 function hideSearch(event){
   iQ("#searchbox").val("");
   iQ("#searchshade").hide();
   iQ("#search").hide();
 
   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();
 
   if (event){
     event.preventDefault();
     event.stopPropagation();
   }
@@ -545,18 +546,20 @@ function ensureSearchShown(){
   var $search = iQ("#search");
   var $searchShade = iQ("#searchshade");
   var $searchbox = iQ("#searchbox");
   iQ("#searchbutton").css({ opacity: 1 });
 
   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';
 
     // NOTE: when this function is called by keydown handler, next keypress
     // event or composition events of IME will be fired on the focused editor.
 
     setTimeout(function dispatchTabViewSearchEnabledEvent() {
--- a/browser/base/content/tabview/ui.js
+++ b/browser/base/content/tabview/ui.js
@@ -469,17 +469,17 @@ let UI = {
     gTabViewFrame.style.marginTop = "";
 #endif
     gTabViewDeck.selectedIndex = 1;
     gWindow.TabsInTitlebar.allowedBy("tabview-open", false);
     gTabViewFrame.contentWindow.focus();
 
     gBrowser.updateTitlebar();
 #ifdef XP_MACOSX
-    this._setActiveTitleColor(true);
+    this.setTitlebarColors(true);
 #endif
     let event = document.createEvent("Events");
     event.initEvent("tabviewshown", true, false);
 
     if (zoomOut && currentTab && currentTab._tabViewTabItem) {
       item = currentTab._tabViewTabItem;
       // If there was a previous currentTab we want to animate
       // its thumbnail (canvas) for the zoom out.
@@ -546,40 +546,48 @@ let UI = {
     gTabViewFrame.style.marginTop = gBrowser.boxObject.y + "px";
 #endif
     gTabViewDeck.selectedIndex = 0;
     gWindow.TabsInTitlebar.allowedBy("tabview-open", true);
     gBrowser.contentWindow.focus();
 
     gBrowser.updateTitlebar();
 #ifdef XP_MACOSX
-    this._setActiveTitleColor(false);
+    this.setTitlebarColors(false);
 #endif
     let event = document.createEvent("Events");
     event.initEvent("tabviewhidden", true, false);
     dispatchEvent(event);
 
     Storage.saveVisibilityData(gWindow, "false");
   },
 
 #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
 
   // ----------
   // Function: storageBusy
   // Pauses the storage activity that conflicts with sessionstore updates and 
   // private browsing mode switches. Calls can be nested. 
   storageBusy: function UI_storageBusy() {
--- a/browser/themes/pinstripe/browser/tabview/tabview.css
+++ b/browser/themes/pinstripe/browser/tabview/tabview.css
@@ -2,17 +2,21 @@ body {
   background-color: transparent;  
   font-family: Tahoma, sans-serif !important;
   color: rgba(0, 0, 0, 0.6);
   font-size: 12px;
   line-height: 16px;
 }
 
 #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
 ----------------------------------*/
 
 .tab {
   padding-top: 4px;
   -moz-padding-end: 6px;
@@ -127,17 +131,17 @@ html[dir=rtl] .expander {
 }
 
 .tab-title {
   bottom: -20px;
   text-align: center;
   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 {
   padding: 0;
 }
 
 .stacked .thumb {
   box-shadow: rgba(0,0,0,.2) 1px 1px 4px;
@@ -414,17 +418,17 @@ html[dir=rtl] input.name {
 }
 
 input.name:focus {
   color: #555;
 }
 
 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;
   -moz-padding-start: 20px;
   -moz-margin-end: -20px;
 }
 
 .title-container:hover input.name:-moz-placeholder {
@@ -535,16 +539,20 @@ html[dir=rtl] .iq-resizable-se {
 /* Search
 ----------------------------------*/
 #searchshade{
   background-color: rgba(0,0,0,.42);
   width: 100%;
   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%;
 }
 
 #searchbox {
   width: 270px;
   height: 30px;
@@ -553,16 +561,21 @@ html[dir=rtl] .iq-resizable-se {
   border: none;
   background-color: #272727;
   border-radius: 0.4em;
   -moz-padding-start: 5px;
   -moz-padding-end: 5px;
   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;
   background-color: #EBEBEB;
   border-radius: 0.4em;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.5);
 }