Bug 953430 - Fix double padding under notifications on Metro start page [r=emtwo]
authorMatt Brubeck <mbrubeck@mozilla.com>
Tue, 14 Jan 2014 12:35:53 -0800
changeset 163311 2783ed7e977dd04ca31c767023bd9f3fa47fbb4f
parent 163310 869ff4bc535497af1b7261bc3e3cd04dfcd03cbb
child 163312 6e825843f9d9f902196950af1de356314190c7e7
push idunknown
push userunknown
push dateunknown
reviewersemtwo
bugs953430
milestone29.0a1
Bug 953430 - Fix double padding under notifications on Metro start page [r=emtwo]
browser/metro/base/content/ContentAreaObserver.js
browser/metro/base/content/ContextUI.js
browser/metro/base/content/browser.js
browser/metro/theme/browser.css
--- a/browser/metro/base/content/ContentAreaObserver.js
+++ b/browser/metro/base/content/ContentAreaObserver.js
@@ -56,20 +56,16 @@ var ContentAreaObserver = {
   get height() {
     return window.innerHeight || 768;
   },
 
   get contentHeight() {
     return this._getContentHeightForWindow(this.height);
   },
 
-  get contentTop () {
-    return Elements.toolbar.getBoundingClientRect().bottom;
-  },
-
   get viewableHeight() {
     return this._getViewableHeightForContent(this.contentHeight);
   },
 
   get isKeyboardOpened() {
     return Services.metro.keyboardVisible;
   },
 
@@ -131,33 +127,36 @@ var ContentAreaObserver = {
 
     this._updateViewState();
 
     this.updateContentArea(newWidth, this._getContentHeightForWindow(newHeight));
     this._dispatchBrowserEvent("SizeChanged");
   },
 
   updateContentArea: function cao_updateContentArea (width, height) {
-    let oldHeight = parseInt(this.styles["content-height"].height);
-    let oldWidth = parseInt(this.styles["content-width"].width);
-
-    let newWidth = width || this.width;
-    let newHeight = height || this.contentHeight;
-
     if (Browser.selectedBrowser) {
       let notificationBox = Browser.getNotificationBox();
 
       // If a notification and navbar are visible together,
       // make the notification appear above the navbar.
       if (ContextUI.navbarVisible && !notificationBox.notificationsHidden &&
           notificationBox.allNotifications.length != 0) {
-        newHeight -= Elements.navbar.getBoundingClientRect().height;
+        let navbarHeight = Elements.navbar.getBoundingClientRect().height;
+        notificationBox.style.paddingBottom = navbarHeight + "px";
+      } else {
+        notificationBox.style.paddingBottom = "";
       }
     }
 
+    let oldHeight = parseInt(this.styles["content-height"].height);
+    let oldWidth = parseInt(this.styles["content-width"].width);
+
+    let newWidth = width || this.width;
+    let newHeight = height || this.contentHeight;
+
     if (newHeight == oldHeight && newWidth == oldWidth)
       return;
 
     this.styles["content-height"].height = newHeight + "px";
     this.styles["content-height"].maxHeight = newHeight + "px";
     this.styles["content-width"].width = newWidth + "px";
     this.styles["content-width"].maxWidth = newWidth + "px";
 
--- a/browser/metro/base/content/ContextUI.js
+++ b/browser/metro/base/content/ContextUI.js
@@ -107,17 +107,17 @@ var ContextUI = {
     }
 
     if (!this.tabbarVisible) {
       this.displayTabs();
       shown = true;
     }
 
     if (shown) {
-      ContentAreaObserver.update(window.innerWidth, window.innerHeight);
+      ContentAreaObserver.updateContentArea();
     }
 
     return shown;
   },
 
   /*
    * Dismiss any context UI currently visible. Returns true if any
    * visible UI was dismissed. Fires context ui events.
@@ -139,17 +139,17 @@ var ContextUI = {
       dismissed = true;
     }
     if (Elements.contextappbar.isShowing) {
       this.dismissContextAppbar();
       dismissed = true;
     }
 
     if (dismissed) {
-      ContentAreaObserver.update(window.innerWidth, window.innerHeight);
+      ContentAreaObserver.updateContentArea();
     }
 
     return dismissed;
   },
 
   /*
    * Briefly show the tab bar and then hide it. Fires context ui events.
    */
--- a/browser/metro/base/content/browser.js
+++ b/browser/metro/base/content/browser.js
@@ -1493,22 +1493,24 @@ Tab.prototype = {
   set active(aActive) {
     if (!this._browser)
       return;
 
     let notification = this._notification;
     let browser = this._browser;
 
     if (aActive) {
+      notification.classList.add("active-tab-notificationbox");
       browser.setAttribute("type", "content-primary");
       Elements.browsers.selectedPanel = notification;
       browser.active = true;
       Elements.tabList.selectedTab = this._chromeTab;
       browser.focus();
     } else {
+      notification.classList.remove("active-tab-notificationbox");
       browser.messageManager.sendAsyncMessage("Browser:Blur", { });
       browser.setAttribute("type", "content");
       browser.active = false;
     }
   },
 
   get active() {
     if (!this._browser)
--- a/browser/metro/theme/browser.css
+++ b/browser/metro/theme/browser.css
@@ -211,17 +211,17 @@ documenttab[selected] .documenttab-selec
 
   /* Add some extra padding for a larger target */
   padding: 18px 20px 30px 20px;
   width: @newtab_button_width@;
 }
 
 /* Start UI ----------------------------------------------------------------- */
 
-#content-viewport[startpage] browser {
+#content-viewport[startpage] .active-tab-notificationbox {
   padding-bottom: @toolbar_height@;
 }
 
 #startui-page {
   overflow-x: scroll;
   overflow-y: hidden;
   height: 100%;
 }