Bug 1135233 - merge pull request #29129 from FunkTron:Bug1135233 to m…

…ozilla-b2g:master

apps/system/js/utility_tray.js

@@ -310,6 +310,7 @@ window.UtilityTray = {
 
       case 'transitionend':
         this.showing ? this.afterShow() : this.afterHide();
+        this.screen.classList.remove('utility-tray-in-transition');
         break;
 
       case 'resize':
@@ -433,6 +434,8 @@ window.UtilityTray = {
     this.notifications.style.transition = '';
     this.notifications.style.transform =
       'translateY(' + (this.screenHeight - dy) + 'px)';
+
+    this.screen.classList.add('utility-tray-in-transition');
   },
 
   onTouchEnd: function ut_onTouchEnd(touch, timestamp) {

apps/system/style/statusbar/statusbar.css

@@ -100,6 +100,9 @@
 
 #screen.utility-tray #statusbar {
   background-color: transparent;
+}
+
+#screen.utility-tray.utility-tray-in-transition #statusbar {
   top: -3rem;
 }
 

apps/system/style/utility_tray/utility_tray.css

@@ -20,13 +20,17 @@
 }
 
 #statusbar-tray {
-  background-image: -moz-element(#statusbar);
+  background-image: none;
   width: 100%;
   top: 0;
   height: 3rem;
   filter: none;
 }
 
+#screen.utility-tray-in-transition #statusbar-tray {
+  background-image: -moz-element(#statusbar);
+}
+
 #statusbar-tray > .sb-start-upper {
   position: absolute;
   left: 0;

apps/system/style/zindex.css

@@ -113,6 +113,13 @@
   z-index: 16385;
 }
 
+/* We need to have the statusbar lying on top of the utility tray
+   when it's open so that its icons are accessible to touch events
+   from the screenreader. */
+#screen.utility-tray > [data-z-index-level="statusbar"] {
+  z-index: 16386;
+}
+
 /* In landscape the software home button is on the right side of the screen
  * so we demote it below the gesture-panels to prevent edge gestures issues
  * (the software home button doesn't need to be on top of the keyboard

apps/system/test/unit/utility_tray_test.js

@@ -256,6 +256,14 @@ suite('system/UtilityTray', function() {
         assert.isTrue(publishStub.calledWith('-overlayopening'));
       });
 
+      test('should add utility-tray-in-transition class with drag from top',
+        function() {
+          fakeTouches(0, 100);
+          assert.isTrue(UtilityTray.screen.classList.contains(
+            'utility-tray-in-transition'));
+        }
+      );
+
       test('should send a touchcancel to the oop active app' +
            'since the subsequent events will be swallowed', function() {
         UtilityTray.screen.classList.remove('utility-tray');
@@ -320,6 +328,14 @@ suite('system/UtilityTray', function() {
         fakeTouches(480, 380, UtilityTray.softwareButtons);
         assert.equal(UtilityTray.showing, false);
       });
+
+      test('should add utility-tray-in-transition class on drag from bottom',
+        function() {
+          fakeTouches(480, 380, UtilityTray.grippy);
+          assert.isTrue(UtilityTray.screen.classList.contains(
+            'utility-tray-in-transition'));
+        }
+      );
     });
   });
 
@@ -651,13 +667,19 @@ suite('system/UtilityTray', function() {
   suite('handleEvent: transitionend', function() {
     setup(function() {
       UtilityTray.hide();
+      UtilityTray.screen.classList.add('utility-tray-in-transition');
       fakeTransitionEnd();
     });
 
     test('Test utilitytrayhide is correcly dispatched', function() {
       assert.equal(UtilityTray.screen.
         classList.contains('utility-tray'), false);
     });
+
+    test('Ensure utility-tray-in-transition class is removed', function() {
+      assert.isFalse(UtilityTray.screen.classList.contains(
+        'utility-tray-in-transition'));
+    });
   });
 
   suite('handleEvent: activityopening', function() {

build/csslint/xfail.list

@@ -51,6 +51,7 @@ apps/system/style/modal_dialog/modal_dialog.css 0 1
 apps/system/style/net_error.css 1 0
 apps/system/style/sound_manager/sound_manager.css 1 3
 apps/system/style/system/system.css 0 2
+apps/system/style/utility_tray/utility_tray.css 1 0
 apps/system/style/window.css 0 3
 apps/system/style/zindex.css 0 4
 apps/video/style/info.css 0 2