Merge pull request #17016 from alivedise/bugzilla/977934_master_v4/re…

…nder-activity-inside-caller

Bug 977934 - Render activity frame inside its caller, r=etienne

apps/system/js/activity_window.js

@@ -75,7 +75,9 @@
     if (caller) {
       caller.setActivityCallee(this);
       this.activityCaller = caller;
-      // TODO: Put us inside the caller element.
+      if (caller.element) {
+        this.containerElement = caller.element;
+      }
     }
 
     this.render();
@@ -97,8 +99,8 @@
    */
   ActivityWindow.prototype._DEBUG = false;
 
-  ActivityWindow.prototype.openAnimation = 'slideleft';
-  ActivityWindow.prototype.closeAnimation = 'slideright';
+  ActivityWindow.prototype.openAnimation = 'slideup';
+  ActivityWindow.prototype.closeAnimation = 'slidedown';
 
   /**
    * ActivityWindow's fullscreen state is copying from the caller

apps/system/js/app_transition_controller.js

@@ -287,7 +287,7 @@
       var classes = ['enlarge', 'reduce', 'to-cardview', 'from-cardview',
         'invoking', 'invoked', 'zoom-in', 'zoom-out', 'fade-in', 'fade-out',
         'transition-opening', 'transition-closing', 'immediate',
-        'slideleft', 'slideright'];
+        'slideup', 'slidedown'];
 
       classes.forEach(function iterator(cls) {
         this.app.element.classList.remove(cls);
@@ -314,6 +314,7 @@
           this.changeTransitionState('timeout', evt.type);
           break;
         case 'animationend':
+          evt.stopPropagation();
           this.app.debug(evt.animationName + ' has been ENDED!');
           this.changeTransitionState('complete', evt.type);
           break;

apps/system/js/app_window.js

@@ -717,6 +717,17 @@
    */
   AppWindow.prototype.handleEvent = function aw_handleEvent(evt) {
     this.debug(' Handling ' + evt.type + ' event...');
+    // We are rendering inline activities inside this element too,
+    // so we need to prevent ourselves to be affected
+    // by the mozbrowser events of the callee.
+
+    // WebAPI testing is using mozbrowserloadend event to know
+    // the first app is loaded so we cannot stop the propagation here.
+    // XXX: Use this.bottomWindow to check if it has a layout parent instead
+    // in bug 916709.
+    if (this.CLASS_NAME == 'ActivityWindow') {
+      evt.stopPropagation();
+    }
     if (this['_handle_' + evt.type]) {
       this.debug(' Handling ' + evt.type + ' event...');
       this['_handle_' + evt.type](evt);

apps/system/js/homescreen_window.js

@@ -109,14 +109,12 @@
 
   HomescreenWindow.prototype._handle_mozbrowserclose =
     function hw__handle_mozbrowserclose(evt) {
-      evt.stopImmediatePropagation();
       this.restart();
     };
 
   HomescreenWindow.prototype._handle_mozbrowsererror =
     function hw__handle_mozbrowsererror(evt) {
       if (evt.detail.type == 'fatal') {
-        evt.stopImmediatePropagation();
         this.publish('crashed');
         this.restart();
       }

apps/system/style/window.css

@@ -1,5 +1,5 @@
-#windows > .appWindow,
-#windows > .activityWindow {
+.appWindow,
+.activityWindow {
   position: absolute;
   left: 0;
   border: 0;
@@ -11,6 +11,13 @@
   background-position: center center;
 }
 
+.appWindow > .appWindow {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 @media not all and (-moz-physical-home-button) {
   #screen:not(.software-button-disabled) > #windows > .appWindow {
     bottom: 5rem;
@@ -29,11 +36,11 @@
   pointer-events: none;
 }
 
-#windows > .appWindow:not(.homescreen) {
+.appWindow:not(.homescreen) {
   background-color: black;
 }
 
-#windows > .appWindow:not(.homescreen).render {
+.appWindow:not(.homescreen).render {
   background-image: none !important;
   background-color: transparent;
 }
@@ -75,7 +82,7 @@
 }
 
 
-#windows > .appWindow:not(.homescreen).render > iframe {
+.appWindow:not(.homescreen).render > iframe {
   background-color: #fff;
 }
 
@@ -90,11 +97,11 @@
   animation: openApp 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
 }
 
-#windows > .appWindow.transition-closing.perpendicular {
+.appWindow.transition-closing.perpendicular {
   animation-duration: 0.1s;
 }
 
-#windows > .appWindow.from-cardview {
+.appWindow.from-cardview {
   animation: openAppFromCardView 0.15s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
 }
 
@@ -108,7 +115,7 @@
   100% { transform: scale(1.0);}
 }
 
-#windows > .appWindow.zoom-in {
+.appWindow.zoom-in {
   transform: scale(1);
   animation: zoom-in 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
 }
@@ -188,27 +195,27 @@
        }
 }
 
-#windows.slow-transition > .appWindow.transition-closing,
-#windows.slow-transition > .appWindow.transition-opening {
+#windows.slow-transition .appWindow.transition-closing,
+#windows.slow-transition .appWindow.transition-opening {
   animation-duration: 3s;
 }
 
-#windows > .appWindow.transition-closing,
-#windows > .appWindow.transition-opening {
+.appWindow.transition-closing,
+.appWindow.transition-opening {
   /* The animation takes .3 seconds so users cannot touch the app while the
    * closing animation is performing */
   pointer-events: none;
 }
 
-#windows > .appWindow.reduce {
+.appWindow.reduce {
   animation: closeApp 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
 }
 
-#windows > .appWindow.transition-closing.perpendicular {
+.appWindow.transition-closing.perpendicular {
   animation-duration: 0.1s;
 }
 
-#windows > .appWindow.zoom-out {
+.appWindow.zoom-out {
   transform: scale(5);
   animation: zoom-out 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
 }
@@ -218,7 +225,7 @@
   100% { transform: scale(1);}
 }
 
-#windows > .appWindow.to-cardview {
+.appWindow.to-cardview {
   animation: closeAppTowardsCardView 0.15s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
 }
 
@@ -297,26 +304,9 @@
 }
 
 .appWindow > iframe {
-  z-index: 1;
   visibility: visible;
 }
 
-.appWindow > .contextmenu {
-  z-index: 2;
-}
-
-.appWindow > .modal-dialog {
-  z-index: 3;
-}
-
-.appWindow > .authentication-dialog {
-  z-index: 4;
-}
-
-.appWindow > .chrome {
-  z-index: 5;
-}
-
 .appWindow > .fade-overlay {
   background-color: black;
   position: absolute;
@@ -325,7 +315,6 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 1024;
 }
 
 .appWindow.fadeout > .fade-overlay {
@@ -390,7 +379,6 @@
 }
 
 .appWindow > .screenshot-overlay {
-  z-index: -1;
   visibility: hidden;
   position: absolute;
   top: 0;
@@ -404,35 +392,69 @@
 }
 
 .appWindow > .screenshot-overlay.visible {
-  z-index: 2;
   visibility: visible;
 }
 
 .appWindow > iframe.hidden {
   visibility: hidden;
 }
 
-/* inline activity */
+/* inline components */
+
+.appWindow > .appWindow {
+  z-index: 65536;
+}
+
+.appWindow > .fade-overlay {
+  z-index: 1024;
+}
+
+.appWindow > .chrome {
+  z-index: 5;
+}
+
+.appWindow > .authentication-dialog {
+  z-index: 4;
+}
+
+.appWindow > .modal-dialog {
+  z-index: 3;
+}
+
+.appWindow > .contextmenu {
+  z-index: 2;
+}
 
+.appWindow > .screenshot-overlay.visible {
+  z-index: 2;
+}
+
+.appWindow > iframe {
+  z-index: 1;
+}
+
+.appWindow > .screenshot-overlay {
+  z-index: -1;
+}
 
 /* animation */
 
-#windows > .activityWindow.slideleft {
-  animation: slideLeft 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
+.appWindow.slideup {
+  animation: slideUp 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
 }
 
-#windows > .activityWindow.slideright {
-  animation: slideRight 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
+.appWindow.slidedown {
+  animation: slideDown 0.3s forwards cubic-bezier(0.7, 0.0, 1.0, 1.0);
 }
 
-@keyframes slideLeft {
-  0%   { transform: translateX(calc(100% + 20px)); }
-  100% { transform: translateX(0); }
+@keyframes slideUp {
+  0%   { transform: translateY(calc(100%)); }
+  100% { transform: translateY(0); }
 }
 
-@keyframes slideRight {
-  0%   { transform: translateX(0); }
-  100% { transform: translateX(calc(100% + 20px)); }
+@keyframes slideDown {
+  0%   { transform: translateY(0); }
+  100% { transform: translateY(calc(100%)); }
 }
 
 /* Edges */
@@ -462,7 +484,7 @@
   transform: translateX(calc(100% + 20px));
 }
 
-#screen:-moz-full-screen-ancestor > #windows > .appWindow.active {
+#screen:-moz-full-screen-ancestor > #windows .appWindow.active {
   top: 0;
   height: 100%;
 }

apps/system/test/unit/activity_window_test.js

@@ -100,23 +100,34 @@ suite('system/ActivityWindow', function() {
     teardown(function() {
     });
 
+    test('Render activity inside its caller', function() {
+      var activity = new ActivityWindow(fakeConfig, app);
+      assert.deepEqual(activity.containerElement, app.element);
+    });
+
     test('handleEvent: closing activity', function() {
       var activity = new ActivityWindow(fakeConfig, app);
       var stubRestoreCaller = this.sinon.stub(activity, 'restoreCaller');
+      var spy = this.sinon.spy();
       activity.handleEvent({
-        type: '_closing'
+        type: '_closing',
+        stopPropagation: spy
       });
+      assert.isTrue(spy.called);
       assert.isTrue(stubRestoreCaller.called);
     });
 
     test('handleEvent: activity opened', function() {
       var activity = new ActivityWindow(fakeConfig, app);
       var stubIsOOP = this.sinon.stub(app, 'isOOP');
       var stubSetVisible = this.sinon.stub(app, 'setVisible');
+      var spy = this.sinon.spy();
       stubIsOOP.returns(false);
       activity.handleEvent({
-        type: '_opened'
+        type: '_opened',
+        stopPropagation: spy
       });
+      assert.isTrue(spy.called);
       assert.isTrue(stubSetVisible.calledWith(false, true));
     });
 
@@ -272,5 +283,16 @@ suite('system/ActivityWindow', function() {
       activity.setOrientation();
       assert.isTrue(stubLockOrientation.calledWith('portrait-primary'));
     });
+
+    test('Activity should stop event propagation', function() {
+      var activity = new ActivityWindow(fakeConfig, appOrientationUndefined);
+      var spy = this.sinon.spy();
+      activity.handleEvent({
+        type: 'mozbrowserloadend',
+        stopPropagation: spy,
+        detail: {}
+      });
+      assert.isTrue(spy.called);
+    });
   });
 });

apps/system/test/unit/app_transition_controller_test.js

@@ -91,8 +91,13 @@ suite('system/AppTransitionController', function() {
   test('Animation end event', function() {
     var app1 = new MockAppWindow(fakeAppConfig1);
     var acn1 = new AppTransitionController(app1);
+    var spy = this.sinon.spy();
     acn1._transitionState = 'opening';
-    acn1.handleEvent({ type: 'animationend' });
+    acn1.handleEvent({
+      type: 'animationend',
+      stopPropagation: spy
+    });
+    assert.isTrue(spy.called);
   });
 
   test('Handle opening', function() {