Bug 993346 - Expand/collapse Rocketbar by scrolling

benfrancis · Apr 17, 2014 · 5af9c23 · 5af9c23
1 parent 10ea0c1
commit 5af9c23
Show file tree

Hide file tree

Showing 8 changed files with 341 additions and 40 deletions.
diff --git a/apps/system/js/app_window.js b/apps/system/js/app_window.js
@@ -560,7 +560,7 @@
     ['mozbrowserclose', 'mozbrowsererror', 'mozbrowservisibilitychange',
      'mozbrowserloadend', 'mozbrowseractivitydone', 'mozbrowserloadstart',
      'mozbrowsertitlechange', 'mozbrowserlocationchange',
-     'mozbrowsericonchange',
+     'mozbrowsericonchange', 'mozbrowserasyncscroll',
      '_localized', '_swipein', '_swipeout', '_kill_suspended'];
 
   AppWindow.SUB_COMPONENTS = {
@@ -778,6 +778,12 @@
       this.config.favicon = evt.detail;
       this.publish('iconchange');
     };
+
+  AppWindow.prototype._handle_mozbrowserasyncscroll =
+    function aw__handle_mozbrowserasyncscroll(evt) {
+      this.scrollPosition = evt.detail.top;
+      this.publish('scroll');
+    };
 
   AppWindow.prototype._registerEvents = function aw__registerEvents() {
     if (this.element === null) {

diff --git a/apps/system/js/app_window_manager.js b/apps/system/js/app_window_manager.js
@@ -237,6 +237,8 @@
       window.addEventListener('homegesture-enabled', this);
       window.addEventListener('homegesture-disabled', this);
       window.addEventListener('system-resize', this);
+      window.addEventListener('rocketbarexpand', this);
+      window.addEventListener('rocketbarcollapse', this);
 
       this._settingsObserveHandler = {
         // update app name when language setting changes
@@ -308,6 +310,8 @@
       window.removeEventListener('homegesture-enabled', this);
       window.removeEventListener('homegesture-disabled', this);
       window.removeEventListener('system-resize', this);
+      window.removeEventListener('rocketbarexpand', this);
+      window.removeEventListener('rocketbarcollapse', this);
 
       for (var name in this._settingsObserveHandler) {
         SettingsListener.unobserve(
@@ -365,11 +369,15 @@
           break;
 
         case 'appopened':
-        case 'homescreenopened':
+          this.element.classList.remove('on-homescreen');
           // Someone else may open the app,
           // so we need to update active app.
           this._updateActiveApp(evt.detail.instanceID);
           break;
+        case 'homescreenopened':
+          this.element.classList.add('on-homescreen');
+          this._updateActiveApp(evt.detail.instanceID);
+          break;
 
         case 'homescreencreated':
           this._apps[evt.detail.instanceID] = evt.detail;
@@ -491,6 +499,14 @@
           this.debug('launching' + config.origin);
           this.launch(config);
           break;
+
+        case 'rocketbarexpand':
+          this.element.classList.add('rocketbar-expanded');
+          break;
+
+        case 'rocketbarcollapse':
+          this.element.classList.remove('rocketbar-expanded');
+          break;
       }
     },
 

diff --git a/apps/system/js/rocketbar.js b/apps/system/js/rocketbar.js
@@ -9,6 +9,7 @@ var Rocketbar = {
   /* Configuration */
   EXPANSION_THRESHOLD: 5, // How many pixels of swipe triggers expand/collapse
   TASK_MANAGER_THRESHOLD: 200, // How many pixels of swipe triggers card view
+  SCROLL_THRESHOLD: 5, // How many pixels of scroll triggers expand
 
   /**
    * Initialise Rocketbar
@@ -17,6 +18,8 @@ var Rocketbar = {
     // States
     this.enabled = false;
     this.expanded = false;
+    this.transitioning = false;
+    this.focused = false;
     this.active = false;
     this.onHomescreen = false;
     this.newTabPage = false;
@@ -67,36 +70,44 @@ var Rocketbar = {
     this.enabled = false;
   },
 
+  /**
+   * Put Rocketbar in the active state.
+   *
+   * Input is displayed, title is hidden and search app is loaded, input
+   * not always focused.
+   */
   activate: function(callback) {
     if (this.active) {
       if (callback) {
         callback();
       }
       return;
     }
-    this.body.addEventListener('keyboardchange',
-                               this.handleKeyboardChange, true);
     this.active = true;
     this.rocketbar.classList.add('active');
+    this.form.classList.remove('hidden');
+    this.title.classList.add('hidden');
     this.loadSearchApp(callback);
-    var event = new CustomEvent('rocketbarfocus');
-    window.dispatchEvent(event);
+    window.dispatchEvent(new CustomEvent('rocketbarfocus'));
   },
 
+  /**
+   * Take Rocketbar out of active state.
+   *
+   * Title is displayed, input is hidden, input is always blurred.
+   */
   deactivate: function() {
     if (!this.active) {
       return;
     }
-    // Stop swallowing keyboard change events
-    this.body.removeEventListener('keyboardchange',
-      this.handleKeyboardChange, true);
     this.active = false;
     this.cardView = false;
     this.newTabPage = false;
     this.rocketbar.classList.remove('active');
+    this.form.classList.add('hidden');
+    this.title.classList.remove('hidden');
     this.blur();
-    var event = new CustomEvent('rocketbarblur');
-    window.dispatchEvent(event);
+    window.dispatchEvent(new CustomEvent('rocketbarblur'));
   },
 
   /**
@@ -108,6 +119,7 @@ var Rocketbar = {
     window.addEventListener('appforeground', this);
     window.addEventListener('apptitlechange', this);
     window.addEventListener('applocationchange', this);
+    window.addEventListener('appscroll', this);
     window.addEventListener('home', this);
     window.addEventListener('cardviewclosedhome', this);
     window.addEventListener('appopened', this);
@@ -120,6 +132,7 @@ var Rocketbar = {
     this.rocketbar.addEventListener('touchmove', this);
     this.rocketbar.addEventListener('touchend', this);
     this.rocketbar.addEventListener('transitionend', this);
+    this.input.addEventListener('focus', this);
     this.input.addEventListener('blur', this);
     this.input.addEventListener('input', this);
     this.form.addEventListener('submit', this);
@@ -140,6 +153,7 @@ var Rocketbar = {
     switch(e.type) {
       case 'apploading':
       case 'appforeground':
+      case 'appopened':
         this.handleAppChange(e);
         break;
       case 'apptitlechange':
@@ -148,13 +162,13 @@ var Rocketbar = {
       case 'applocationchange':
         this.handleLocationChange(e);
         break;
+      case 'appscroll':
+        this.handleScroll(e);
+        break;
       case 'home':
       case 'cardviewclosedhome':
         this.handleHome(e);
         break;
-      case 'appopened':
-        this.collapse(e);
-        break;
       case 'searchcrashed':
         this.handleSearchCrashed(e);
         break;
@@ -166,8 +180,11 @@ var Rocketbar = {
       case 'transitionend':
         this.handleTransitionEnd(e);
         break;
+      case 'focus':
+        this.handleFocus(e);
+        break;
       case 'blur':
-        this.blur(e);
+        this.handleBlur(e);
         break;
       case 'input':
         this.handleInput(e);
@@ -210,6 +227,7 @@ var Rocketbar = {
     this.rocketbar.removeEventListener('touchmove', this);
     this.rocketbar.removeEventListener('touchend', this);
     this.rocketbar.removeEventListener('transitionend', this);
+    this.input.removeEventListener('focus', this);
     this.input.removeEventListener('blur', this);
     this.input.removeEventListener('input', this);
     this.form.removeEventListener('submit', this);
@@ -231,9 +249,10 @@ var Rocketbar = {
    * Put Rocketbar in expanded state.
    */
   expand: function() {
-    if (this.expanded) {
+    if (this.expanded || this.transitioning) {
       return;
     }
+    this.transitioning = true;
     this.rocketbar.classList.add('expanded');
     this.expanded = true;
     window.dispatchEvent(new CustomEvent('rocketbarexpand'));
@@ -243,9 +262,10 @@ var Rocketbar = {
    * Take Rocketbar out of expanded state, into status state.
    */
   collapse: function() {
-    if (!this.expanded) {
+    if (!this.expanded || this.transitioning) {
       return;
     }
+    this.transitioning = true;
     this.expanded = false;
     this.rocketbar.classList.remove('expanded');
     this.exitHome();
@@ -300,7 +320,7 @@ var Rocketbar = {
   },
 
   /**
-   * Reset the Rocketbar to its initial empty state
+   * Reset the Rocketbar to its initial empty state.
    */
   clear: function() {
     this.input.value = '';
@@ -318,6 +338,9 @@ var Rocketbar = {
     this.clear();
   },
 
+  /**
+   * Show New Tab Page.
+   */
   showNewTabPage: function() {
     this.newTabPage = true;
     this.activate((function() {
@@ -331,23 +354,40 @@ var Rocketbar = {
   },
 
   /**
-   * Put Rocketbar in focused state.
+   * Focus Rocketbar input.
    */
   focus: function() {
-    // Swallow keyboard change events so homescreen does not resize
     this.input.focus();
-    this.form.classList.remove('hidden');
-    this.title.classList.add('hidden');
+    this.input.select();
   },
 
   /**
-   * Take Rocketbar out of focused state.
+   * Handle a focus event.
+   */
+  handleFocus: function() {
+    this.focused = true;
+    // Swallow keyboard change events so homescreen does not resize
+    this.body.addEventListener('keyboardchange',
+      this.handleKeyboardChange, true);
+  },
+
+  /**
+   * Blur Rocketbar input.
    */
   blur: function() {
     this.input.blur();
-    this.form.classList.add('hidden');
-    this.title.classList.remove('hidden');
-    if (this.input.value === '' && !this.newTabPage) {
+  },
+
+  /**
+   * Handle a blur event.
+   */
+  handleBlur: function() {
+    this.focused = false;
+    // Stop swallowing keyboard change events
+    this.body.removeEventListener('keyboardchange',
+      this.handleKeyboardChange, true);
+    // Deactivate unless on new tab page or results
+    if (this.active && this.results.classList.contains('hidden')) {
       this.deactivate();
     }
   },
@@ -358,10 +398,15 @@ var Rocketbar = {
    * @param {Event} e Window manager event.
    */
   handleAppChange: function(e) {
+    this.currentScrollPosition = 0;
     this.handleLocationChange(e);
     this.handleTitleChange(e);
     this.exitHome();
-    this.collapse();
+    if (e.detail.manifestURL) {
+      this.collapse();
+    } else {
+      this.expand();
+    }
     this.hideResults();
   },
 
@@ -382,6 +427,20 @@ var Rocketbar = {
     this.updateSearchIndex();
   },
 
+  handleScroll: function(e) {
+    if (e.detail.manifestURL) {
+      return;
+    }
+    if (this.expanded && !this.focused &&
+        e.detail.scrollPosition > this.currentScrollPosition) {
+      this.collapse();
+    } else if (!this.expanded && e.detail.scrollPosition <
+      (this.currentScrollPosition - this.SCROLL_THRESHOLD)) {
+      this.expand();
+    }
+    this.currentScrollPosition = e.detail.scrollPosition;
+  },
+
   /**
   * Update the Rocketbar's input field.
   *
@@ -395,6 +454,7 @@ var Rocketbar = {
     }
     this.titleContent.textContent = '';
     this.updateSearchIndex();
+    this.deactivate();
   },
 
   /**
@@ -449,14 +509,11 @@ var Rocketbar = {
   handleClick: function() {
     if (this.active) {
       this.focus();
-      this.input.select();
       return;
     }
-
     if (this.expanded) {
       this.activate((function() {
         this.focus();
-        this.input.select();
       }).bind(this));
     } else {
       this._wasClicked = true;
@@ -468,10 +525,10 @@ var Rocketbar = {
    * Focus the Rocketbar once expanded if was clicked.
    */
   handleTransitionEnd: function() {
+    this.transitioning = false;
     if (this.expanded && this._wasClicked) {
       this.activate((function() {
         this.focus();
-        this.input.select();
       }).bind(this));
       this._wasClicked = false;
     }

diff --git a/apps/system/style/window.css b/apps/system/style/window.css
@@ -525,7 +525,26 @@
   transform: translateX(calc(100% + 20px));
 }
 
-#screen:-moz-full-screen-ancestor > #windows .appWindow.active {
+#windows .appWindow.active iframe {
+  transition-property: transform;
+  transition-duration: 0.5s;
+}
+
+#screen.locked #windows .appWindow.active iframe,
+#windows.on-homescreen .appWindow.active iframe {
+  transition-property: none;
+}
+
+#windows.rocketbar-expanded .appWindow.active iframe {
+  transform: translateY(2.4rem);
+}
+
+#screen.locked #windows.rocketbar-expanded .appWindow.active iframe,
+#windows.on-homescreen.rocketbar-expanded .appWindow.active iframe {
+  transform: none;
+}
+
+#screen:-moz-full-screen-ancestor > #windows .appWindow.active iframe {
   top: 0;
   height: 100%;
 }