Merge pull request #24057 from Cwiiis/proto-grouping-2

Bug 1067435 - Homescreen grouping. r=crdlc,kgrandon

apps/settings/elements/developer.html

@@ -148,6 +148,17 @@ <h2 data-l10n-id="window-management">Window Management</h2>
           </label>
         </li>
       </ul>
+      <header>
+        <h2 data-l10n-id="homescreen">Homescreen</h2>
+      </header>
+      <ul>
+        <li>
+          <label class="pack-checkbox">
+            <input type="checkbox" name="verticalhome.grouping.enabled">
+            <span data-l10n-id="verticalhome-grouping">App grouping</span>
+          </label>
+        </li>
+      </ul>
       <header>
         <h2 data-l10n-id="debug">Debug</h2>
       </header>

apps/settings/locales/settings.en-US.properties

@@ -1174,6 +1174,7 @@ debug-gaia-enabled=Gaia debug traces
 showScreenReaderSettings=Show screen reader settings
 app-transition=App transition
 app-suspending=App suspending
+verticalhome-grouping=App grouping
 verbose-app-permissions=Verbose app permissions
 window-management=Window management
 

apps/sharedtest/test/unit/elements/gaia_grid/gaia_grid_test.js

@@ -13,6 +13,7 @@ require('/shared/elements/gaia_grid/script.js');
 require('/shared/elements/gaia_grid/js/items/grid_item.js');
 require('/shared/elements/gaia_grid/js/items/divider.js');
 require('/shared/elements/gaia_grid/js/items/placeholder.js');
+require('/shared/elements/gaia_grid/js/items/group.js');
 
 var mocksHelperForGrid = new MocksHelper([
   'LazyLoader'
@@ -60,6 +61,16 @@ suite('GaiaGrid', function() {
       assert.equal(grid.dragdrop, undefined);
       assert.ok(grid.layout);
     });
+
+    test('/w grouping', function() {
+      this.container.innerHTML = '<gaia-grid group></gaia-grid>';
+      var grid = this.container.firstElementChild._grid;
+      grid.render();
+      assert.equal(grid.dragdrop, undefined);
+      assert.equal(grid.zoom, undefined);
+      assert.ok(grid.layout);
+      assert.ok(document.querySelector('.divider.group'));
+    });
   });
 
   suite('items', function() {
@@ -72,6 +83,8 @@ suite('GaiaGrid', function() {
         id: 'http://mozilla.org',
         url: 'http://mozilla.org'
       },
+      setPosition: function() {},
+      setCoordinates: function() {},
       render: function() {}
     };
 

apps/sharedtest/test/unit/elements/gaia_grid/grid_dragdrop_test.js

@@ -13,6 +13,7 @@ require('/shared/elements/gaia_grid/js/items/divider.js');
 require('/shared/elements/gaia_grid/js/items/mozapp.js');
 require('/shared/elements/gaia_grid/js/items/bookmark.js');
 require('/shared/elements/gaia_grid/js/items/placeholder.js');
+require('/shared/elements/gaia_grid/js/items/group.js');
 
 var mocksHelperForDragDrop = new MocksHelper([
   'LazyLoader'
@@ -36,14 +37,31 @@ suite('GaiaGrid > DragDrop', function() {
     url: 'http://mozilla.org/2'
   };
 
+  var stubPage3 = {
+    name: 'third',
+    id: 3,
+    icon: 'no',
+    url: 'http://mozilla.org/3'
+  };
+
+  var countDividers = function() {
+    var nDividers = 0;
+    for (var i = 0, iLen = grid.items.length; i < iLen; i++) {
+      if (grid.items[i].detail.type === 'divider') {
+        nDividers ++;
+      }
+    }
+    return nDividers;
+  };
+
   mocksHelperForDragDrop.attachTestHelpers();
 
   suiteSetup(function() {
     document.body.innerHTML = '<div id="zoom"><div class="arrows">' +
     '</div><div class="curtain"></div><div class="indicator"></div></div>';
     this.container = document.createElement('div');
 
-    this.container.innerHTML = '<gaia-grid dragdrop></gaia-grid>';
+    this.container.innerHTML = '<gaia-grid dragdrop group></gaia-grid>';
     document.body.appendChild(this.container);
     grid = this.container.firstElementChild._grid;
     dragdrop = this.container.firstElementChild._grid;
@@ -88,7 +106,7 @@ suite('GaiaGrid > DragDrop', function() {
   });
 
   test('cleanup if the touch gesture is canceled', function() {
-    var firstBookmark = document.querySelector('.icon');
+    var firstBookmark = grid.items[0].element;
     firstBookmark.dispatchEvent(new CustomEvent('contextmenu',
       {bubbles: true}));
     assert.ok(grid.dragdrop.inEditMode);
@@ -110,10 +128,106 @@ suite('GaiaGrid > DragDrop', function() {
     subject.icon = grid.items[0];
 
     // The current positions are second -> first -> placeholder
-    // Simulate a drop past the placeholder (index 2).
-    subject.rearrange(2);
+    // Simulate a drop onto the second item (index 2).
+    subject.rearrange(grid.items[2]);
 
     assert.equal(grid.items[0].name, 'first');
     assert.equal(grid.items[1].name, 'second');
   });
+
+  test('create new groups by dropping items at the end', function() {
+    var dividers = countDividers();
+    var subject = grid.dragdrop;
+
+    // The current positions are first, second, placeholder, divider,
+    subject.icon = grid.items[1];
+    subject.createNewDivider(grid.items[3]);
+
+    // After creating the new group, there should be one extra divider.
+    assert.equal(countDividers(), dividers + 1);
+  });
+
+  test('rearrange collapsed group before expanded group', function() {
+    var divider = grid.items[7];
+    assert.equal(divider.detail.type, 'divider');
+    assert.ok(divider.element.classList.contains('group'));
+
+    divider.collapse();
+    assert.equal(divider.detail.collapsed, true);
+
+    var subject = grid.dragdrop;
+    subject.icon = divider;
+    subject.rearrange(grid.items[0]);
+
+    assert.equal(grid.items[0].name, 'second');
+    assert.equal(grid.items[2].name, 'first');
+  });
+
+  test('rearrange collapsed group after expanded group', function() {
+    var divider = grid.items[1];
+    assert.equal(divider.detail.type, 'divider');
+
+    var subject = grid.dragdrop;
+    subject.icon = divider;
+    subject.createNewDivider(grid.items[grid.items.length - 1]);
+
+    assert.equal(grid.items[0].name, 'first');
+    assert.equal(grid.items[4].name, 'second');
+  });
+
+  test('rearrange collapsed group before collapsed group', function() {
+    var divider = grid.items[3];
+    assert.equal(divider.detail.type, 'divider');
+    divider.collapse();
+
+    divider = grid.items[3];
+    assert.equal(divider.detail.type, 'divider');
+
+    var subject = grid.dragdrop;
+    subject.icon = divider;
+    subject.rearrange(grid.items[0]);
+
+    assert.equal(grid.items[0].name, 'second');
+    assert.equal(grid.items[2].name, 'first');
+  });
+
+  test('rearrange collapsed group after collapsed group', function() {
+    var divider = grid.items[1];
+    assert.equal(divider.detail.type, 'divider');
+
+    var subject = grid.dragdrop;
+    subject.icon = divider;
+    subject.createNewDivider(grid.items[grid.items.length - 1]);
+
+    assert.equal(grid.items[0].name, 'first');
+    assert.equal(grid.items[2].name, 'second');
+  });
+
+  test('create new group between groups', function() {
+    var divider = grid.items[1];
+    assert.equal(divider.detail.type, 'divider');
+    divider.expand();
+
+    divider = grid.items[3];
+    assert.equal(divider.detail.type, 'divider');
+    divider.expand();
+
+    // Add a new item to test adding groups between groups
+    grid.add(new GaiaGrid.Bookmark(stubPage3), 0);
+    grid.render();
+
+    // Now simulate dragging the first icon over the first divider and check
+    // that a new divider is created, and that the new app is in it
+    var dividers = countDividers();
+
+    divider = grid.items[3];
+    assert.equal(divider.detail.type, 'divider');
+
+    var subject = grid.dragdrop;
+    subject.icon = grid.items[0];
+    subject.createNewDivider(divider);
+
+    assert.equal(countDividers(), dividers + 1);
+    assert.equal(grid.items[4].name, 'third');
+  });
 });

apps/verticalhome/index.html

@@ -39,6 +39,7 @@
     <script defer src="shared/js/bookmarks_database.js"></script>
     <script defer src="shared/js/collections_database.js"></script>
     <script defer src="shared/js/lazy_loader.js"></script>
+    <script defer src="shared/js/settings_listener.js"></script>
     <script defer src="shared/js/url_helper.js"></script>
 
     <script defer src="js/sources/bookmark.js"></script>
@@ -55,6 +56,7 @@
     <script defer src="shared/elements/gaia_grid/js/items/collection.js"></script>
     <script defer src="shared/elements/gaia_grid/js/items/divider.js"></script>
     <script defer src="shared/elements/gaia_grid/js/items/mozapp.js"></script>
+    <!-- <script defer src="shared/elements/gaia_grid/js/items/group.js"></script> -->
     <script defer src="shared/elements/gaia_grid/js/items/placeholder.js"></script>
 
     <!-- Gaia Components -->

apps/verticalhome/js/app.js

@@ -1,5 +1,5 @@
 'use strict';
-/* global ItemStore, LazyLoader, Configurator */
+/* global ItemStore, LazyLoader, Configurator, SettingsListener */
 
 (function(exports) {
 
@@ -10,6 +10,29 @@
     window.dispatchEvent(new CustomEvent('moz-chrome-dom-loaded'));
     this.grid = document.getElementById('icons');
 
+    SettingsListener.observe('verticalhome.grouping.enabled', false,
+      (value) => {
+        var groupingEnabled = value;
+        if (typeof this.grouping !== 'undefined') {
+          if (groupingEnabled != this.grouping) {
+            window.location.reload();
+            return;
+          }
+        }
+
+        this.grouping = groupingEnabled;
+        if (groupingEnabled) {
+          document.body.classList.add('grouping');
+          LazyLoader.load(
+            ['shared/elements/gaia_grid/js/items/group.js'],
+            () => {
+              this.init();
+            });
+        } else {
+          this.init();
+        }
+      });
+
     this.grid.addEventListener('iconblobdecorated', this);
     this.grid.addEventListener('gaiagrid-iconbloberror', this);
     this.grid.addEventListener('cached-icons-rendered', this);
@@ -238,6 +261,5 @@
     }
   };
   exports.app = new App();
-  exports.app.init();
 
 }(window));

apps/verticalhome/style/css/app.css

@@ -63,9 +63,8 @@ gaia-grid {
   display: none;
 }
 
-.divider:last-of-type {
+.divider:not(.group):last-of-type {
   visibility: hidden;
-  padding-bottom: 1.4rem;
 }
 
 .edit-mode .divider:last-of-type {

apps/verticalhome/style/css/search.css

@@ -6,6 +6,10 @@
   z-index: 5;
 }
 
+.grouping #search {
+  margin-bottom: 0;
+}
+
 #search-form {
   pointer-events: none;
   position: absolute;

apps/verticalhome/test/marionette/lib/collection.js

@@ -217,6 +217,9 @@ Collection.prototype = {
     this.actions.longPress(element, 1).perform();
     this.client.helper.waitForElement(
       Collection.Selectors.cloudMenuPin).click();
+
+    // Wait for animation to finish
+    this.actions.wait(1).perform();
   },
 
   /**

apps/verticalhome/test/marionette/lib/home2.js

@@ -311,6 +311,10 @@ Home2.prototype = {
       app.grid.moveTo(icon.detail.index, newPos);
       app.grid.render();
     }, [icon.getAttribute('data-identifier'), index]);
+
+    // Wait for the icon to animate into place
+    var actions = new Actions(this.client);
+    actions.wait(1).perform();
   }
 };
 

apps/verticalhome/test/unit/app_test.js

@@ -3,6 +3,7 @@
 /* global MocksHelper, loadBodyHTML */
 
 require('/shared/test/unit/mocks/mock_lazy_loader.js');
+require('/shared/test/unit/mocks/mock_settings_listener.js');
 require('/shared/test/unit/load_body_html_helper.js');
 require('/shared/elements/gaia_grid/js/grid_dragdrop.js');
 require('/shared/elements/gaia_grid/js/grid_icon_renderer.js');
@@ -16,7 +17,8 @@ require('/test/unit/mock_item_store.js');
 
 var mocksHelperForApp = new MocksHelper([
   'LazyLoader',
-  'ItemStore'
+  'ItemStore',
+  'SettingsListener'
 ]).init();
 
 suite('app.js > ', function() {

apps/verticalhome/test/unit/contextmenu_ui_test.js

@@ -12,13 +12,15 @@ require('/shared/elements/gaia_grid/js/items/placeholder.js');
 require('/shared/elements/gaia_grid/script.js');
 require('/test/unit/mock_item_store.js');
 require('/shared/test/unit/mocks/mock_lazy_loader.js');
+require('/shared/test/unit/mocks/mock_settings_listener.js');
 require('/shared/test/unit/load_body_html_helper.js');
 require('/js/wallpaper.js');
 requireElements('verticalhome/elements/contextmenu.html');
 
 var mocksHelperForContextMenuUI = new MocksHelper([
   'LazyLoader',
-  'ItemStore'
+  'ItemStore',
+  'SettingsListener'
 ]).init();
 
 suite('contextmenu_ui.js >', function() {