Bug 886444 - [Australis] Remove top padding on the window while in customization mode and also remove the ability to exit customization mode by clicking on the increased window padding. r=Gijs ui-r=shorlander

browser/components/customizableui/src/CustomizeMode.jsm

@@ -116,11 +116,8 @@ CustomizeMode.prototype = {
       let window = this.window;
       let document = this.document;
 
-      // Add a mousedown listener to the tab-view-deck and a keypress one to the
+      // Add a keypress listener to the document so that we can quickly exit
-      // document so that we can quickly exit customization mode when pressing
+      // customization mode when pressing ESC.
-      // ESC or clicking on the blueprint outside the customization container.
-      let deck = document.getElementById("tab-view-deck");
-      deck.addEventListener("mousedown", this);
       document.addEventListener("keypress", this);
 
       // Same goes for the menu button - if we're customizing, a mousedown to the
@@ -195,8 +192,6 @@ CustomizeMode.prototype = {
     CustomizableUI.removeListener(this);
 
     this.document.removeEventListener("keypress", this);
-    let deck = this.document.getElementById("tab-view-deck");
-    deck.removeEventListener("mousedown", this);
     this.window.PanelUI.menuButton.removeEventListener("mousedown", this);
     this.window.PanelUI.menuButton.open = false;
 
@@ -297,7 +292,7 @@ CustomizeMode.prototype = {
 
     let deck = this.document.getElementById("tab-view-deck");
     let customizeTransitionEnd = function(aEvent) {
-      if (aEvent.originalTarget != deck || aEvent.propertyName != "padding-top") {
+      if (aEvent.originalTarget != deck || aEvent.propertyName != "padding-bottom") {
         return;
       }
       deck.removeEventListener("transitionend", customizeTransitionEnd);
@@ -738,8 +733,7 @@ CustomizeMode.prototype = {
         break;
       case "mousedown":
         if (aEvent.button == 0 &&
-            (aEvent.originalTarget == this.window.PanelUI.menuButton) ||
+            (aEvent.originalTarget == this.window.PanelUI.menuButton)) {
-            (aEvent.originalTarget == this.document.getElementById("tab-view-deck"))) {
           this.exit();
           aEvent.preventDefault();
           return;

browser/themes/osx/browser.css

@@ -4000,7 +4000,7 @@ window > chatbox {
 }
 
 #main-window[customizing] #tab-view-deck {
-  padding: 28px 2em 2em;
+  padding: 0 2em 2em;
 }
 
 #main-window[customizing] #tab-view-deck,
@@ -4027,6 +4027,7 @@ window > chatbox {
 }
 
 #main-window[customizing] #TabsToolbar {
+  margin-top: 9px;
   background-clip: padding-box;
   border-right: 3px solid transparent;
   border-left: 3px solid transparent;

browser/themes/windows/browser.css

@@ -2468,7 +2468,7 @@ chatbox {
 }
 
 #main-window[customizing] #tab-view-deck {
-  padding: 2em;
+  padding: 0 2em 2em;
 }
 
 #customization-container {