Bug 1043599 - Show app titlebar after swipe in fullscreen apps r=etienne

KevinGrandon · Jul 25, 2014 · 65d7558 · 65d7558
1 parent fd7525a
commit 65d7558
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 155 deletions.
diff --git a/apps/system/js/statusbar.js b/apps/system/js/statusbar.js
@@ -105,13 +105,11 @@ var StatusBar = {
 
   show: function sb_show() {
     this.background.classList.remove('hidden');
-    this.element.classList.remove('invisible');
   },
 
   hide: function sb_hide() {
     this._releaseBar();
     this.background.classList.add('hidden');
-    this.element.classList.add('invisible');
   },
 
   init: function sb_init() {
@@ -420,30 +418,33 @@ var StatusBar = {
   _shouldForwardTap: false,
   _dontStopEvent: false,
   panelHandler: function sb_panelHandler(evt) {
+    var app = AppWindowManager.getActiveApp().getTopMostWindow();
+    var titleBar = app.titleBar.element;
 
     // Do not forward events if FTU is running
     if (FtuLauncher.isFtuRunning()) {
       return;
     }
 
-    if (!this.element.classList.contains('invisible')) {
+    if (this._dontStopEvent) {
       return;
     }
 
-    if (this._dontStopEvent) {
+    // If the app is not a fullscreen app, let utility_tray.js handle
+    // this instead.
+    if (!document.mozFullScreen && !app.isFullScreen()) {
       return;
     }
 
     evt.stopImmediatePropagation();
     evt.preventDefault();
 
-    var elem = this.element,
-        touch;
+    var touch;
     switch (evt.type) {
       case 'touchstart':
         clearTimeout(this._releaseTimeout);
 
-        var iframe = AppWindowManager.getActiveApp().iframe;
+        var iframe = app.iframe;
         this._touchForwarder.destination = iframe;
         this._touchStart = evt;
         this._shouldForwardTap = true;
@@ -452,8 +453,8 @@ var StatusBar = {
         touch = evt.changedTouches[0];
         this._startX = touch.clientX;
         this._startY = touch.clientY;
-        elem.style.transition = 'transform';
-        elem.classList.add('dragged');
+
+        titleBar.style.transition = 'transform';
         break;
 
       case 'touchmove':
@@ -467,7 +468,8 @@ var StatusBar = {
         }
 
         var translate = Math.min(deltaY, height);
-        elem.style.transform = 'translateY(calc(' + translate + 'px - 100%)';
+        titleBar.style.transform =
+          'translateY(calc(' + translate + 'px - 100%)';
 
         if (translate == height) {
           if (this._touchStart) {
@@ -503,20 +505,23 @@ var StatusBar = {
   _releaseBar: function sb_releaseBar() {
     this._dontStopEvent = false;
 
-    var elem = this.element;
+    var app = AppWindowManager.getActiveApp();
+    var elem = app.titleBar.element;
+    elem.classList.remove('dragged');
     elem.style.transform = '';
     elem.style.transition = '';
-    elem.addEventListener('transitionend', function trWait() {
-      elem.removeEventListener('transitionend', trWait);
-      elem.classList.remove('dragged');
-    });
 
     clearTimeout(this._releaseTimeout);
     this._releaseTimeout = null;
   },
 
   _releaseAfterTimeout: function sb_releaseAfterTimeout() {
     var self = this;
+
+    var app = AppWindowManager.getActiveApp();
+    var titleBar = app.titleBar.element;
+    titleBar.classList.add('dragged');
+
     self._releaseTimeout = setTimeout(function() {
       self._releaseBar();
       window.removeEventListener('touchstart', closeOnTap);

diff --git a/apps/system/style/statusbar/statusbar.css b/apps/system/style/statusbar/statusbar.css
@@ -34,8 +34,7 @@
 }
 
 #screen.utility-tray #statusbar,
-#screen.attention #statusbar,
-#screen:not(.rocketbar-focused) #statusbar.dragged {
+#screen.attention #statusbar {
   top: 0;
   background-color: black;
 }
@@ -52,17 +51,11 @@ body:not(.rb-enabled) #statusbar {
 
 /* Hiding the black background while the homescreen is in foreground but not
  * utility tray or attention screen */
-#screen.lockscreen-camera > #statusbar,
-#statusbar.invisible {
+#screen.lockscreen-camera > #statusbar {
   transform: scaleY(0);
   transform-origin: left top;
 }
 
-#screen.rocketbar-focused.fullscreen-app #statusbar:not(.dragged) {
-  transform: translateY(calc(4.8rem - 100%));
-  transition: none;
-}
-
 #statusbar-background.hidden {
   display: none;
 }
@@ -82,10 +75,6 @@ body:not(.rb-enabled) #statusbar {
   background-color: transparent;
 }
 
-#screen:not(.locked):not(.rocketbar-focused) #statusbar.invisible.dragged {
-  background-color: black;
-}
-
 #screen.attention.locked #statusbar-time {
   display: block;
 }
@@ -109,8 +98,7 @@ body:not(.rb-enabled) #statusbar {
 }
 
 #screen.rocketbar-focused:not(.locked) #statusbar-icons,
-#screen.rocketbar-expanded.cards-view #statusbar-icons,
-#screen:not(.locked).fullscreen-app #statusbar:not(.dragged) #statusbar-icons {
+#screen.rocketbar-expanded.cards-view #statusbar-icons {
   visibility: hidden;
   opacity: 0;
 }

diff --git a/apps/system/style/window_layout.css b/apps/system/style/window_layout.css
@@ -156,7 +156,7 @@
 
 #screen:-moz-full-screen-ancestor .appWindow > div,
 #screen:-moz-full-screen-ancestor .appWindow > iframe,
-.appWindow.fullscreen-app > div,
+.appWindow.fullscreen-app > div:not(.titlebar),
 .appWindow.fullscreen-app > iframe {
   top: 0;
   height: 100%;
@@ -169,7 +169,12 @@
 
 #screen:-moz-full-screen-ancestor .appWindow > .titlebar,
 .appWindow.fullscreen-app > .titlebar {
-  height: 0;
+  transform: translateY(-7.4rem);
+}
+
+#screen:-moz-full-screen-ancestor .appWindow > .titlebar.dragged,
+.appWindow.fullscreen-app > .titlebar.dragged {
+  transform: translateY(0);
 }
 
 /* Nested Windows */

diff --git a/apps/system/test/marionette/fullscreen_statusbar_test.js b/apps/system/test/marionette/fullscreen_statusbar_test.js
@@ -25,21 +25,21 @@ marionette('Fullscreen status bar >', function() {
   setup(function() {
     video = sys.waitForLaunch(VIDEO_APP);
 
-    var statusbar = sys.statusbar;
-    var statusbarHeight = statusbar.size().height;
+    var titlebar = sys.appTitlebar;
+    var statusbarHeight = titlebar.size().height;
     client.waitFor(function() {
-      return (statusbar.location().y <= (-1 * statusbarHeight));
+      return (titlebar.location().y <= (-1 * statusbarHeight));
     });
   });
 
   test('Swiping from the top should open the statusbar', function() {
     var top = sys.topPanel;
-    var statusbar = sys.statusbar;
+    var titlebar = sys.appTitlebar;
 
     actions.press(top, 100, 0).moveByOffset(0, 250).release().perform();
     client.waitFor(function() {
-      return (statusbar.location().y === 0);
+      return (titlebar.location().y === 0);
     });
-    assert(statusbar.displayed(), 'The status bar is visible');
+    assert(titlebar.displayed(), 'The status bar is visible');
   });
 });
diff --git a/apps/system/test/marionette/lib/system.js b/apps/system/test/marionette/lib/system.js
@@ -9,6 +9,7 @@ module.exports = System;
 System.URL = 'app://system.gaiamobile.org/manifest.webapp';
 
 System.Selector = Object.freeze({
+  appTitlebar: '.appWindow.active .titlebar',
   statusbar: '#statusbar',
   statusbarBackground: '#statusbar-background',
   statusbarLabel: '#statusbar-label',
@@ -21,6 +22,10 @@ System.Selector = Object.freeze({
 System.prototype = {
   client: null,
 
+  get appTitlebar() {
+    return this.client.findElement(System.Selector.appTitlebar);
+  },
+
   get statusbar() {
     return this.client.findElement(System.Selector.statusbar);
   },