Bug 877361 - Modify navbar transitions somewhat to avoid the 'gaping' problem between the soft keyboard and navbar. r=fryn, mbrubeck

browser/metro/base/content/ContentAreaObserver.js

@@ -160,14 +160,7 @@ var ContentAreaObserver = {
     this.styles["viewable-width"].width = newWidth + "px";
     this.styles["viewable-width"].maxWidth = newWidth + "px";
 
-    // Adjust the app and find bar position above the soft keyboard
-    let navBar = document.getElementById("navbar");
-    let contextAppBar = document.getElementById("contextappbar");
-    let findBar = document.getElementById("content-navigator");
-    let keyboardHeight = MetroUtils.keyboardHeight;
-    navBar.style.bottom = keyboardHeight + "px";
-    contextAppBar.style.bottom = keyboardHeight + "px";
-    findBar.style.bottom = keyboardHeight + "px";
+    this.updateAppBarPosition();
 
     // Update the back/tab button states. If the keyboard is up
     // these are hidden.
@@ -176,6 +169,26 @@ var ContentAreaObserver = {
     this._disatchBrowserEvent("ViewableSizeChanged");
   },
 
+  updateAppBarPosition: function updateAppBarPosition(aForceDown) {
+    // Adjust the app and find bar position above the soft keyboard
+    let navBar = document.getElementById("navbar");
+    let contextAppBar = document.getElementById("contextappbar");
+    let findBar = document.getElementById("content-navigator");
+    let keyboardHeight = aForceDown ? 0 : MetroUtils.keyboardHeight;
+    navBar.style.bottom = keyboardHeight + "px";
+    contextAppBar.style.bottom = keyboardHeight + "px";
+    findBar.style.bottom = keyboardHeight + "px";
+  },
+
+  /*
+   * Called by BrowserUI right before we blur the nav bar edit. We use
+   * this to get a head start on shuffling app bars around before the
+   * soft keyboard transitions down.
+   */
+  navBarWillBlur: function navBarWillBlur() {
+    this.updateAppBarPosition(true);
+  },
+
   onBrowserCreated: function onBrowserCreated(aBrowser) {
     aBrowser.classList.add("content-width");
     aBrowser.classList.add("content-height");

browser/metro/base/content/browser-ui.js

@@ -540,7 +540,11 @@ var BrowserUI = {
   },
 
   blurNavBar: function blurNavBar() {
-    this._edit.blur();
+    if (this._edit.focused) {
+      this._edit.blur();
+      return true;
+    }
+    return false;
   },
 
   // If the user types in the address bar, cancel pending
@@ -1494,7 +1498,11 @@ var StartUI = {
   onClick: function onClick(aEvent) {
     // If someone clicks / taps in empty grid space, take away
     // focus from the nav bar edit so the soft keyboard will hide.
-    BrowserUI.blurNavBar();
+    if (BrowserUI.blurNavBar()) {
+      // Advanced notice to CAO, so we can shuffle the nav bar in advance
+      // of the keyboard transition.
+      ContentAreaObserver.navBarWillBlur();
+    }
   },
 
   handleEvent: function handleEvent(aEvent) {

browser/metro/theme/browser.css

@@ -331,8 +331,7 @@ appbar {
   bottom: 0;
   width: 100%;
   transform: translateY(100%);
-  transition: transform @metro_animation_duration@ @metro_animation_easing@,
-              bottom @metro_animation_duration@ @metro_animation_easing@;
+  transition: transform @metro_animation_duration@ @metro_animation_easing@;
   font-size: 0;
 }
 
@@ -362,6 +361,13 @@ appbar[visible] {
   transform: none;
 }
 
+#stack[keyboardVisible] > appbar {
+  /* Slow the bottom up transition since it's impossible to match the system's
+     soft keyboard movement. */
+  transition: transform @metro_animation_duration@ @metro_animation_easing@,
+              bottom @appbar_keyboard_slideup_duration@ @metro_animation_easing@;
+}
+
 appbar > toolbar > toolbarbutton {
   list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
   -moz-image-region: rect(0px, 200px, 40px, 160px); /* Gear icon is default. */

browser/metro/theme/defines.inc

@@ -83,3 +83,8 @@
 % easing function and duration for animations match winJS showPanel method
 %define metro_animation_duration 550ms
 %define metro_animation_easing cubic-bezier(0.1, 0.9, 0.2, 1)
+
+% this is meant to be slower than the system keyboard such
+% that the bars slide up after the keyboard is in place.
+%define appbar_keyboard_slideup_duration 750ms
+

browser/metro/theme/forms.css

@@ -14,8 +14,7 @@
   padding: 0;
   bottom: 0;
   transform: translateY(100%);
-  transition: transform @metro_animation_duration@ @metro_animation_easing@,
-              bottom @metro_animation_duration@ @metro_animation_easing@;
+  transition: transform @metro_animation_duration@ @metro_animation_easing@;
   background-color: @metro_orange@;
 }
 
@@ -23,6 +22,13 @@
   transform: none;
 }
 
+#stack[keyboardVisible] > #content-navigator {
+  /* Slow the bottom up transition since it's impossible to match the system's
+     soft keyboard movement. */
+  transition: transform @metro_animation_duration@ @metro_animation_easing@,
+              bottom @appbar_keyboard_slideup_duration@ @metro_animation_easing@;
+}
+
 #content-navigator > .previous-button,
 #content-navigator > .next-button,
 #content-navigator > .close-button {