Merge pull request #19718 from etiennesegonzac/bug-1016483

Bug 1016483 - Stop doing to expensive #screen.edges restyle r=21

apps/system/js/edge_swipe_detector.js

@@ -33,9 +33,6 @@ var EdgeSwipeDetector = {
 
   settingUpdate: function esd_settingUpdate(enabled) {
     this._settingEnabled = enabled;
-    if (this._lifecycleEnabled && enabled) {
-      this.screen.classList.add('edges');
-    }
     this._updateEnabled();
   },
 
@@ -75,13 +72,9 @@ var EdgeSwipeDetector = {
         this._touchEnd(e);
         break;
       case 'appopen':
-        if (this._settingEnabled) {
-          this.screen.classList.add('edges');
-        }
         this.lifecycleEnabled = true;
         break;
       case 'homescreenopening':
-        this.screen.classList.remove('edges');
         this.lifecycleEnabled = false;
         break;
       case 'launchapp':

apps/system/style/window.css

@@ -449,10 +449,18 @@
 }
 
 .appWindow.suspended > .identification-overlay,
-#screen.edges .appWindow:not(.active) .identification-overlay.visible {
+.appWindow:not(.active) > .identification-overlay.visible {
   opacity: 1;
 }
 
+/* we don't want to show the overlay at all during the opening
+   transition (from the homescreen and from the cardview) */
+.appWindow.enlarge > .identification-overlay.visible,
+.appWindow.from-cardview > .identification-overlay.visible {
+  opacity: 0 !important;
+  transition: none !important;
+}
+
 .identification-overlay > div {
   position: absolute;
   top: calc(50% - 4.65rem);
@@ -635,7 +643,7 @@
 }
 
 /* Edges */
-#screen.edges #windows > .appWindow:not(.homescreen) {
+#windows > .appWindow:not(.homescreen):not(.lockScreenWindow) {
   /* in the viewport but not really */
   transform: translateX(-99.9999%);
   opacity: 1;
@@ -647,23 +655,23 @@
   will-change: auto;
 }
 
-#screen.edges .appWindow.will-become-inactive {
+#screen #windows > .appWindow.will-become-inactive {
   opacity: 0;
 }
 
-#screen.edges #windows > .appWindow.active:not(.will-become-inactive):not(.back),
-#screen.edges #windows > .appWindow.will-become-active,
-#screen.edges #windows > .appWindow.inside-edges {
+#screen #windows > .appWindow.active:not(.will-become-inactive):not(.back),
+#screen #windows > .appWindow.will-become-active,
+#screen #windows > .appWindow.inside-edges {
   opacity: 1;
   transform: translateX(0);
 }
 
-#screen.edges #windows > .appWindow.outside-edges-left {
+#screen #windows > .appWindow.outside-edges-left {
   opacity: 1;
   transform: translateX(calc(-100% - 2rem));
 }
 
-#screen.edges #windows > .appWindow.outside-edges-right {
+#screen #windows > .appWindow.outside-edges-right {
   opacity: 1;
   transform: translateX(calc(100% + 2rem));
 }

apps/system/style/zindex.css

@@ -220,7 +220,7 @@
 }
 
 #screen > [data-z-index-level="app"] > .appWindow.active:not(.homescreen),
-#screen.edges > [data-z-index-level="app"] > .appWindow:not(.homescreen),
+#screen:not(.on-homescreen) > [data-z-index-level="app"] > .appWindow:not(.homescreen):not(.lockScreenWindow),
 #screen > [data-z-index-level="app"] > .appWindow.will-become-active {
   z-index: 6;
 }

apps/system/test/unit/edge_swipe_detector_test.js

@@ -73,7 +73,6 @@ suite('system/EdgeSwipeDetector >', function() {
     setup(function() {
       EdgeSwipeDetector.previous.classList.remove('disabled');
       EdgeSwipeDetector.next.classList.remove('disabled');
-      screen.classList.add('edges');
 
       homescreen();
     });
@@ -82,17 +81,12 @@ suite('system/EdgeSwipeDetector >', function() {
       assert.isTrue(EdgeSwipeDetector.previous.classList.contains('disabled'));
       assert.isTrue(EdgeSwipeDetector.next.classList.contains('disabled'));
     });
-
-    test('the screen should go out of edges mode', function() {
-      assert.isFalse(screen.classList.contains('edges'));
-    });
   });
 
   suite('When the cardsview is displayed', function() {
     setup(function() {
       EdgeSwipeDetector.previous.classList.remove('disabled');
       EdgeSwipeDetector.next.classList.remove('disabled');
-      screen.classList.add('edges');
 
       // currently we always go to the homescreen before showing
       // the cards view. This test will fail when this behavior changes.
@@ -104,10 +98,6 @@ suite('system/EdgeSwipeDetector >', function() {
       assert.isTrue(EdgeSwipeDetector.next.classList.contains('disabled'));
     });
 
-    test('the screen should go out of edges mode', function() {
-      assert.isFalse(screen.classList.contains('edges'));
-    });
-
     test('after a card was shown from the cards view edges should be enabled',
          function() {
       cardsViewShowCard(1);
@@ -120,7 +110,6 @@ suite('system/EdgeSwipeDetector >', function() {
     setup(function() {
       EdgeSwipeDetector.previous.classList.add('disabled');
       EdgeSwipeDetector.next.classList.add('disabled');
-      screen.classList.remove('edges');
     });
 
     test('the edges should be enabled', function() {
@@ -146,21 +135,6 @@ suite('system/EdgeSwipeDetector >', function() {
       });
     });
 
-    test('the screen should go into edges mode after the transition',
-    function() {
-      appLaunch(dialer);
-      launchTransitionEnd();
-      assert.isTrue(screen.classList.contains('edges'));
-    });
-
-    test('the screen should not go into edges mode if the setting if off',
-    function() {
-      MockSettingsListener.mCallbacks['edgesgesture.enabled'](false);
-      appLaunch(dialer);
-      launchTransitionEnd();
-      assert.isFalse(screen.classList.contains('edges'));
-    });
-
     test('the edges should be enabled if an app is launched from cards view',
     function() {
       launchTransitionEnd();
@@ -181,10 +155,6 @@ suite('system/EdgeSwipeDetector >', function() {
         var cssNext = EdgeSwipeDetector.next.classList;
         assert.isTrue(cssNext.contains('disabled'));
       });
-
-      test('the screen should not go into edges mode', function() {
-        assert.isFalse(screen.classList.contains('edges'));
-      });
     });
   });
 
@@ -203,21 +173,13 @@ suite('system/EdgeSwipeDetector >', function() {
     setup(function() {
       EdgeSwipeDetector.previous.classList.add('disabled');
       EdgeSwipeDetector.next.classList.add('disabled');
-      screen.classList.remove('edges');
     });
 
     test('the edges should be enabled', function() {
       wrapperLaunch(google);
       assert.isFalse(EdgeSwipeDetector.previous.classList.contains('disabled'));
       assert.isFalse(EdgeSwipeDetector.next.classList.contains('disabled'));
     });
-
-    test('the screen should go into edges mode after the transition',
-    function() {
-      wrapperLaunch(google);
-      launchTransitionEnd();
-      assert.isTrue(screen.classList.contains('edges'));
-    });
   });
 
   suite('When the setting is enabled', function() {

build/csslint/xfail.list

@@ -62,7 +62,7 @@ apps/system/style/update_manager/update_manager.css 1 0
 apps/system/style/sleep_menu/sleep_menu.css 0 1
 apps/system/style/modal_dialog/modal_dialog.css 0 2
 apps/system/style/net_error.css 1 0
-apps/system/style/window.css 0 1
+apps/system/style/window.css 0 3
 apps/system/style/zindex.css 0 2
 apps/system/style/sound_manager/sound_manager.css 1 3
 apps/system/style/lockscreen/lockscreen.css 0 2