Bug 877361 - Modify navbar transitions somewhat to avoid the 'gaping' problem between the soft keyboard and navbar. r=fryn, mbrubeck
authorJim Mathies <jmathies@mozilla.com>
Wed, 05 Jun 2013 05:47:59 -0500
changeset 134060 8dc5770ad79d5944f16fc65d5a5da659d9ad3f83
parent 134059 23a34163cd703b1c759ed29854bf292a54652c77
child 134079 627af04199a50a8eac5c6afb630fe42b5de892e6
push id29034
push userjmathies@mozilla.com
push dateWed, 05 Jun 2013 10:51:04 +0000
treeherdermozilla-inbound@8dc5770ad79d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfryn, mbrubeck
bugs877361
milestone24.0a1
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 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
browser/metro/base/content/browser-ui.js
browser/metro/theme/browser.css
browser/metro/theme/defines.inc
browser/metro/theme/forms.css
--- a/browser/metro/base/content/ContentAreaObserver.js
+++ b/browser/metro/base/content/ContentAreaObserver.js
@@ -155,32 +155,45 @@ var ContentAreaObserver = {
     if (newHeight == oldHeight && newWidth == oldWidth)
       return;
 
     this.styles["viewable-height"].height = newHeight + "px";
     this.styles["viewable-height"].maxHeight = newHeight + "px";
     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.
     BrowserUI._updateButtons();
 
     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");
   },
 
   /*
    * Event handling
    */
--- a/browser/metro/base/content/browser-ui.js
+++ b/browser/metro/base/content/browser-ui.js
@@ -535,17 +535,21 @@ var BrowserUI = {
 
   blurFocusedElement: function blurFocusedElement() {
     let focusedElement = document.commandDispatcher.focusedElement;
     if (focusedElement)
       focusedElement.blur();
   },
 
   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
   // navbar autohide if set.
   navEditKeyPress: function navEditKeyPress() {
     ContextUI.cancelDismiss();
   },
 
@@ -1489,17 +1493,21 @@ var StartUI = {
     } else if (aURI != "about:blank") { // about:blank is loaded briefly for new tabs; ignore it
       this.hide(aURI);
     }
   },
 
   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) {
     switch (aEvent.type) {
       case "autocompletestart":
         this.filter();
         break;
       case "autocompleteend":
--- a/browser/metro/theme/browser.css
+++ b/browser/metro/theme/browser.css
@@ -326,18 +326,17 @@ documenttab[selected] .documenttab-selec
 /* App Bar ----------------------------------------------------------------- */
 
 appbar {
   display: block;
   position: fixed;
   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;
 }
 
 appbar > toolbar {
   -moz-appearance: none;
   -moz-box-align: center;
   border: 0;
   width: 100%;
@@ -357,16 +356,23 @@ appbar > toolbar > toolbarbutton[disable
   visibility: collapse;
 }
 
 #navbar[startpage],
 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. */
 }
 appbar > toolbar > toolbarbutton:hover {
   -moz-image-region: rect(40px, 200px, 80px, 160px);
 }
 appbar > toolbar > toolbarbutton:active {
--- a/browser/metro/theme/defines.inc
+++ b/browser/metro/theme/defines.inc
@@ -78,8 +78,13 @@
 %define border_radius_normal 5px
 %define border_radius_tiny 1px
 
 %define shadow_width_small 1px
 
 % 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
+
--- a/browser/metro/theme/forms.css
+++ b/browser/metro/theme/forms.css
@@ -9,25 +9,31 @@
 
 #content-navigator {
   display: block;
   position: fixed;
   pointer-events: none;
   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@;
 }
 
 #content-navigator[showing] {
   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 {
   min-width: @touch_button_small@ !important; /* button size */
   min-height: @touch_button_small@ !important; /* button size */
   border: none !important;
   background-image: none !important;
   background-color: inherit !important;