Bug 870574 - Adjust customization look of OS X browser window to have grid background and padding. r=mconley

browser/components/customizableui/src/CustomizeMode.jsm

@@ -170,7 +170,16 @@ CustomizeMode.prototype = {
     let window = this.window;
     let document = this.document;
 
-    document.documentElement.removeAttribute("customizing");
+    let documentElement = document.documentElement;
+    documentElement.setAttribute("customize-exiting", "true");
+    let tabViewDeck = document.getElementById("tab-view-deck");
+    tabViewDeck.addEventListener("transitionend", function onTransitionEnd(evt) {
+      if (evt.propertyName != "padding-top")
+        return;
+      tabViewDeck.removeEventListener("transitionend", onTransitionEnd);
+      documentElement.removeAttribute("customize-exiting");
+    });
+    documentElement.removeAttribute("customizing");
 
     for (let target of this.areas) {
       for (let toolbarItem of target.children) {

browser/themes/osx/browser.css

@@ -2165,7 +2165,7 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   text-shadow: inherit;
 }
 
-#main-window:not([privatebrowsingmode=temporary]) #navigator-toolbox[tabsontop="true"]:not(:-moz-lwtheme)::before {
+#main-window:not([privatebrowsingmode=temporary]):not([customizing]):not([customize-exiting]) #navigator-toolbox[tabsontop="true"]:not(:-moz-lwtheme)::before {
   /* We want the titlebar to be unified, but we still want to be able
    * to give #TabsToolbar a background. So we can't set -moz-appearance:
    * toolbar on #TabsToolbar itself. Instead, we set it on a box of the
@@ -3533,6 +3533,43 @@ chatbox {
 
 %include ../shared/customizableui/customizeMode.inc.css
 
+#main-window[customizing] #titlebar {
+  padding-top: 0;
+}
+
+#main-window[customizing] #tab-view-deck {
+  padding: 28px 2em 2em;
+}
+
+#main-window[customizing] #tab-view-deck,
+#main-window[customize-exiting] #tab-view-deck {
+  background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"),
+                    url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),
+                    linear-gradient(to bottom, rgb(233,233,233), rgb(178,178,178) 21px);
+  background-attachment: fixed;
+}
+
+#main-window[customizing] #navigator-toolbox > toolbar:not(#TabsToolbar),
+#main-window[customizing] #customization-container {
+  border: 3px solid hsla(0,0%,0%,.1);
+  border-top-width: 0;
+  background-clip: padding-box;
+  background-origin: padding-box;
+  -moz-border-right-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
+  -moz-border-bottom-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
+  -moz-border-left-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
+}
+
+#main-window[customizing] #navigator-toolbox > toolbar:not(#TabsToolbar) {
+  border-bottom-width: 0;
+}
+
+#main-window[customizing] #TabsToolbar {
+  background-clip: padding-box;
+  border-right: 3px solid transparent;
+  border-left: 3px solid transparent;
+}
+
 /* End customization mode */
 
 panel[type="arrow"][popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="top"],

browser/themes/shared/customizableui/customizeMode.inc.css

@@ -10,11 +10,6 @@
   transition-timing-function: ease-out;
 }
 
-#main-window[customizing] .tabbrowser-tab:not([selected]),
-#main-window[customizing] .tabs-newtab-button {
-  opacity: 0.4;
-}
-
 #main-window[customizing] .customization-target {
   border: 1px dashed #bbb;
   margin: 3px;