Merge pull request #32144 from mcav/tm-new-sheet

Bug 1209402 - [TaskManager] Implement New Sheet and New Private Sheet. r=etienne

apps/sharedtest/test/unit/event_safety_test.js

@@ -40,24 +40,29 @@ suite('eventSafety: callback variant >', function() {
     window.dispatchEvent(new CustomEvent('foobar'));
   });
 
-  test('filters mismatched elements for transitionend events', function() {
-    this.sinon.useFakeTimers();
-    var called = false;
-    var timeoutSpy = this.sinon.spy(window, 'setTimeout');
-    eventSafety(window, 'foobar', function() {
-      called = true;
-    }, 1000);
-
-    // Get the private callback and execute with arguments.
-    timeoutSpy.getCall(0).args[0]({
-      type: 'transitionend',
-      target: document.body // (Not what we called the eventSafety method with)
+  function testBubblingEvent(eventName) {
+    test(`filters mismatched elements for ${eventName} events`, function() {
+      this.sinon.useFakeTimers();
+      var called = false;
+      var timeoutSpy = this.sinon.spy(window, 'setTimeout');
+      eventSafety(window, 'foobar', function() {
+        called = true;
+      }, 1000);
+
+      // Get the private callback and execute with arguments.
+      timeoutSpy.getCall(0).args[0]({
+        type: eventName,
+        target: document.body // (Not what we called `eventSafety` with)
+      });
+
+      assert.equal(called, false, 'should not call the callback');
+      this.sinon.clock.tick(1000);
+      assert.equal(called, true, 'called after timeout');
     });
+  }
 
-    assert.equal(called, false, 'should not call the callback');
-    this.sinon.clock.tick(1000);
-    assert.equal(called, true, 'called after timeout');
-  });
+  testBubblingEvent('transitionend');
+  testBubblingEvent('animationend');
 
 });
 
@@ -99,27 +104,32 @@ suite('eventSafety: promise variant >', function() {
     window.dispatchEvent(new CustomEvent('foobar'));
   });
 
-  test('filters mismatched elements for transitionend events', function(done) {
-    this.sinon.useFakeTimers();
-    var called = false;
-    var timeoutSpy = this.sinon.spy(window, 'setTimeout');
-    eventSafety(window, 'foobar', 1000).then(function() {
-      called = true;
-    });
-
-    // Get the private callback and execute with arguments.
-    timeoutSpy.getCall(0).args[0]({
-      type: 'transitionend',
-      target: document.body // (Not what we called the eventSafety method with)
+  function testBubblingEvent(eventName) {
+    test(`filters mismatched elements for ${eventName} events`, function(done) {
+      this.sinon.useFakeTimers();
+      var called = false;
+      var timeoutSpy = this.sinon.spy(window, 'setTimeout');
+      eventSafety(window, 'foobar', 1000).then(function() {
+        called = true;
+      });
+
+      // Get the private callback and execute with arguments.
+      timeoutSpy.getCall(0).args[0]({
+        type: eventName,
+        target: document.body // (Not what we called `eventSafety` with)
+      });
+
+      assert.equal(called, false, 'should not call the callback');
+      this.sinon.clock.tick(1000);
+      // NOTE: Executing in the next Promise tick so that our Promise callback
+      // has a chance to fire.
+      Promise.resolve().then(() => {
+        assert.equal(called, true, 'called after timeout');
+      }).then(() => { done(); }, done);
     });
+  }
 
-    assert.equal(called, false, 'should not call the callback');
-    this.sinon.clock.tick(1000);
-    // NOTE: Executing in the next Promise tick so that our Promise callback
-    // has a chance to fire.
-    Promise.resolve().then(() => {
-      assert.equal(called, true, 'called after timeout');
-    }).then(() => { done(); }, done);
-  });
+  testBubblingEvent('transitionend');
+  testBubblingEvent('animationend');
 
 });

apps/system/index.html

@@ -664,9 +664,15 @@ <h1 data-l10n-id="data-roaming-enabled-title"></h1>
       <div id="global-overlays" data-z-index-level="global-overlays"></div>
 
       <!-- cards view -->
-      <div id="cards-view" data-z-index-level="cards-view">
-        <ul id="cards-list"></ul>
-        <span id="cards-no-recent-windows" class="no-recent-apps" data-l10n-id="no-recent-app-windows"></span>
+      <div id="task-manager" data-z-index-level="cards-view">
+        <div id="cards-view">
+          <ul id="cards-list"></ul>
+          <span id="cards-no-recent-windows" class="no-recent-apps" data-l10n-id="no-recent-app-windows"></span>
+        </div>
+        <div id="task-manager-buttons">
+          <button id="task-manager-new-private-sheet-button"></button>
+          <button id="task-manager-new-sheet-button"></button>
+        </div>
       </div>
 
       <!-- icc / stk -->

apps/system/js/app_transition_controller.js

@@ -342,7 +342,7 @@
         'will-become-active', 'will-become-inactive',
         'slide-to-top', 'slide-from-top',
         'slide-to-bottom', 'slide-from-bottom',
-        'home-from-cardview', 'home-to-cardview'];
+        'home-from-cardview', 'home-to-cardview', 'from-new-card'];
 
       classes.forEach(function iterator(cls) {
         this.app.element.classList.remove(cls);

apps/system/js/card.js

@@ -12,16 +12,24 @@
  * also included in this file.
  *
  * @param {AppWindow} app
- * @param {boolean} disableScreenshots
+ * @param {boolean} opts.disableScreenshots
  *   Legacy option. If true, we will use a small icon preview on the card
  *   rather than showing a full screenshot and/or moz-element of the app.
  *   Originally introduced on 128MB Tarako devices to save memory.
+ * @param {boolean} opts.stayInvisible
+ *   If true (because we're just using this card as a placeholder since we're
+ *   immediately launching the app), don't actually render the card.
  */
-function Card(app, disableScreenshots) {
+function Card(app, { disableScreenshots, stayInvisible } = {}) {
   var el = document.createElement('li');
   this.app = app;
   this.element = el;
 
+  if (stayInvisible) {
+    this.element.style.display = 'none';
+    return;
+  }
+
   this.title = (app.isBrowser() && app.title) ? app.title : app.name;
   this.subTitle = TaskManagerUtils.getDisplayUrlForApp(app);
   this.titleId = 'card-title-' + app.instanceID;