Merge pull request #27281 from Cwiiis/bug1115512-activate-menu-in-col…

…lapsed-group

Bug 1115512 - Show homescreen menu by long-pressing blank area of collapsed group. r=kgrandon

apps/verticalhome/test/marionette/group_collapse_context_menu_test.js

@@ -0,0 +1,51 @@
+'use strict';
+
+marionette('Vertical - Group', function() {
+
+  var client = marionette.client(require(__dirname + '/client_options.js'));
+  var actions, home, system;
+
+  setup(function() {
+    actions = client.loader.getActions();
+    home = client.loader.getAppClass('verticalhome');
+    system = client.loader.getAppClass('system');
+    system.waitForStartup();
+
+    client.apps.launch(home.URL);
+    home.waitForLaunch();
+  });
+
+  test('check dragging icon into collapsed group', function() {
+    function scrollIntoView(el) {
+      el.scrollIntoView(false);
+    }
+
+    // Store a reference to the first icon
+    var firstIcon = client.helper.waitForElement(home.Selectors.firstIcon);
+
+    // Enter edit mode
+    home.enterEditMode();
+    var header = client.helper.waitForElement(home.Selectors.editHeaderText);
+
+    // Drag icon to its own group
+    actions.press(firstIcon).wait(1).move(header).release().wait(1).perform();
+
+    // Leave edit mode
+    home.exitEditMode();
+
+    // Collapse new group
+    var toggle = client.findElements(home.Selectors.groupToggle).pop();
+    toggle.scriptWith(scrollIntoView);
+    actions.tap(toggle).wait(1).perform();
+
+    // Long-press the home-screen in the middle of the collapsed group
+    var groupBg = client.findElements(home.Selectors.groupBackground).pop();
+    var grid = client.findElement(home.Selectors.grid);
+    var x = groupBg.location().x + groupBg.size().width/2;
+    var y = groupBg.location().y + groupBg.size().height/2;
+    actions.press(grid, x, y).wait(1).perform();
+
+    // Wait for the context menu to appear
+    client.helper.waitForElement(home.contextMenu);
+  });
+});

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

@@ -17,6 +17,7 @@ function VerticalHome(client) {
 VerticalHome.URL = 'app://verticalhome.gaiamobile.org';
 
 VerticalHome.Selectors = {
+  grid: '#icons',
   editHeaderText: '#edit-header h1',
   editHeaderDone: '#exit-edit-mode',
   editGroup: '#edit-group',

shared/elements/gaia_grid/style.css

@@ -229,18 +229,21 @@
   background-image: url('images/move_gripper.png');
   opacity: 0;
   transform: translate(0, -100%);
+  pointer-events: none;
 }
 
 .edit-mode .group:not(.collapsed) .header .gripper {
   opacity: 1;
   transform: translate(0, 0);
+  pointer-events: auto;
 }
 
 .group .header .toggle {
   width: 5.34rem;
   right: 0;
   background-image: url('images/collapse_arrow.png');
   transform-origin: 50% 1.6rem;
+  pointer-events: auto;
 }
 
 .group .header .toggle.toggling {
@@ -316,6 +319,16 @@
   opacity: 0;
 }
 
+.group.collapsed .header,
+.group.collapsed .background,
+.group.collapsed .shadow {
+  pointer-events: none;
+}
+
+.edit-mode .group.collapsed .background {
+  pointer-events: auto;
+}
+
 .dragging .group:not(.active) .separator {
   opacity: 1;
 }