add files to new branch (#939)

* add files to new branch

* re-order the line to where it makes sense to be

Author: arash-e-at-moz

SELECTOR_INFO.md

@@ -1706,6 +1706,27 @@ Location: Any history item in the Hamburger history list
 Path to .json: modules/data/context_menu.components.json
 ```
 ```
+Selector Name: context-move-tab-to-new-group
+Selector Data: "context_moveTabToNewGroup"
+Description: Tab context click option "Add Tab to New Group"
+Location: In the tabbed browser
+Path to .json: modules/data/context_menu.components.json
+```
+```
+Selector Name: context-move-tab-to-group
+Selector Data: "context_moveTabToGroup"
+Description: Tab context click option "Add Tab to Group"
+Location: In the tabbed browser
+Path to .json: modules/data/context_menu.components.json
+```
+```
+Selector Name: context-remove-tab-from-group
+Selector Data: "context_ungroupTab"
+Description: Tab context click option "Remove from Group"
+Location: In the tabbed browser
+Path to .json: modules/data/context_menu.components.json
+```
+```
 Selector Name: context-menu-pin-tab
 Selector Data: "context_pinTab"
 Description: Tab context click option "Pin Tab"
@@ -4059,7 +4080,62 @@ Description: A tab's Close (X) button
 Location: In the tabbed browser.
 Path to .json: modules/data/tab_bar.components.json
 ```
-
+```
+Selector name: tabgroup-menu
+Selector Data: "tab-group-editor"
+Description: Adding tabs to a group menu
+Location: Menu that opens when adding tabs to a group
+Path to .json: modules/data/tab_bar.components.json
+```
+```
+Selector Name: tabgroup-input
+Selector Data: "[data-l10n-id='tab-group-editor-name-field']"
+Description: Name field
+Location: Menu that opens when adding tabs to a group
+Path to .json: modules/data/tab_bar.components.json
+```
+```
+Selector Name: tabgroup-create-button
+Selector Data: "tab-group-editor-button-create"
+Description: Create button
+Location: Menu that opens when adding tabs to a group
+Path to .json: modules/data/tab_bar.components.json
+```
+```
+Selector Name: tabgroup-label
+Selector Data: "tab-group-label"
+Description: The label of tab group
+Location: In the tabbed browser
+Path to .json: modules/data/tab_bar.components.json
+```
+```
+Selector Name: tabgroup-menuitem
+Selector Data: "tab-group-icon"
+Description: Icon related to tab group
+Location: In the tabbed browser
+Path to .json: modules/data/tab_bar.components.json
+```
+```
+Selector Name: tabgroup-overflow-count
+Selector Data: "tab-group-overflow-count"
+Description: Numbers of tabs in tab group
+Location: In the tabbed browser
+Path to .json: modules/data/tab_bar.components.json
+```
+```
+Selector Name: tabgroup-line
+Selector Data: "tab-group-line"
+Description: Line indicator of tab group
+Location: In the tabbed browser
+Path to .json: modules/data/tab_bar.components.json
+```
+```
+Selector Name: tabgroup-ungroup-tabs
+Selector Data: "tabGroupEditor_ungroupTabs"
+Description: Ungroup the tab group
+Location: Menu that opens when right click on the tab group label
+Path to .json: modules/data/tab_bar.components.json
+```
 #### text_area_form_autofill
 ```
 Selector Name: street-address-textarea

manifests/key.yaml

@@ -1156,6 +1156,10 @@ tabs:
     splits:
     - smoke
     - ci-extended
+  test_ungroup_tabs:
+    result: pass
+    splits:
+    - functional1
 theme_and_toolbar:
   test_customize_themes_and_redirect:
     result: pass

modules/browser_object_tabbar.py

@@ -7,6 +7,7 @@
 from selenium.webdriver.remote.webelement import WebElement
 from selenium.webdriver.support import expected_conditions as EC
 
+from modules.browser_object import ContextMenu
 from modules.page_base import BasePage
 
 
@@ -419,3 +420,35 @@ def reload_tab(self, nav, mod_key=None, extra_key=None):
             self.perform_key_combo(extra_key)
         else:
             raise ValueError("You must provide extra_key to perform reload.")
+
+    @BasePage.context_chrome
+    def create_tab_group(
+        self, num_tabs: int, group_name: str, tab_context_menu: ContextMenu
+    ) -> BasePage:
+        """Create a new tab group"""
+
+        # Open few tabs
+        for i in range(num_tabs):
+            self.new_tab_by_button()
+
+        # Add the first tab into a New Group
+        first_tab = self.get_tab(1)
+        self.context_click(first_tab)
+        tab_context_menu.click_and_hide_menu("context-move-tab-to-new-group")
+
+        # Wait for tab group menu to open
+        self.element_visible("tabgroup-input")
+
+        # Enter a group Name and create group
+        self.fill("tabgroup-input", group_name, clear_first=False)
+
+        # Make sure the group is created
+        self.element_visible("tabgroup-label")
+
+        # Add the second tab into existing Group
+        second_tab = self.get_tab(2)
+        self.context_click(second_tab)
+        tab_context_menu.click_on("context-move-tab-to-group")
+        self.click_and_hide_menu("tabgroup-menuitem")
+
+        return self

modules/data/context_menu.components.json

@@ -55,6 +55,24 @@
         "groups": []
     },
 
+    "context-move-tab-to-new-group": {
+        "selectorData": "context_moveTabToNewGroup",
+        "strategy": "id",
+        "groups": []
+    },
+
+    "context-move-tab-to-group": {
+        "selectorData": "context_moveTabToGroup",
+        "strategy": "id",
+        "groups": []
+    },
+
+    "context-remove-tab-from-group": {
+        "selectorData": "context_ungroupTab",
+        "strategy": "id",
+        "groups": []
+    },
+
     "context-menu-pin-tab": {
         "selectorData": "context_pinTab",
         "strategy": "id",

modules/data/tab_bar.components.json

@@ -113,6 +113,66 @@
         "groups": [
             "doNotCache"
         ]
+    },
+
+    "tabgroup-menu": {
+      "selectorData": "tab-group-editor",
+      "strategy": "id",
+      "groups": [
+            "doNotCache"
+        ]
+    },
+
+    "tabgroup-input": {
+      "selectorData": "[data-l10n-id='tab-group-editor-name-field']",
+      "strategy": "css",
+      "groups": [
+        "doNotCache"
+      ]
+    },
+
+    "tabgroup-create-button": {
+      "selectorData": "tab-group-editor-button-create",
+      "strategy": "id",
+      "groups": []
+    },
+
+    "tabgroup-label": {
+      "selectorData": "tab-group-label",
+      "strategy": "class",
+      "groups": [
+        "doNotCache"
+      ]
+    },
+
+    "tabgroup-menuitem": {
+      "selectorData": "tab-group-icon",
+      "strategy": "class",
+      "groups": [
+        "doNotCache"
+      ]
+    },
+
+    "tabgroup-overflow-count": {
+      "selectorData": "tab-group-overflow-count",
+      "strategy": "class",
+      "groups": [
+        "doNotCache"
+      ]
+    },
+
+    "tabgroup-line": {
+      "selectorData": "tab-group-line",
+      "strategy": "class",
+      "groups": [
+        "doNotCache"
+      ]
+    },
+
+    "tabgroup-ungroup-tabs": {
+      "selectorData": "tabGroupEditor_ungroupTabs",
+      "strategy": "id",
+      "groups": []
     }
 
 }

tests/tabs/test_ungroup_tabs.py

@@ -0,0 +1,85 @@
+import pytest
+from selenium.webdriver import Firefox
+from selenium.webdriver.common.action_chains import ActionChains
+
+from modules.browser_object import ContextMenu, TabBar
+
+NUM_TABS = 2
+GROUP_NAME = ["group1", "group2", "group3"]
+
+
+@pytest.fixture()
+def test_case():
+    return "2796550"
+
+
+@pytest.fixture()
+def add_to_prefs_list():
+    """Add to list of prefs to set"""
+    return [
+        ("browser.tabs.groups.enabled", True),
+        ("browser.tabs.groups.dragOverThresholdPercent", 20),
+    ]
+
+
+def test_ungroup_tabs(driver: Firefox):
+    """
+    C2796550, verify that grouped tab can be ungrouped.
+             Since in the step2 a tab group still remains,
+             it is executed after step3 to avoid tests
+             dependency.
+    """
+
+    """
+     Step 1
+     Action:         Right click on one of the grouped Tabs and select Remove from Group.
+     Verification:   The Selected Tab is removed from the group.
+    """
+
+    tabs = TabBar(driver)
+    tab_context_menu = ContextMenu(driver)
+
+    # Create a tab group
+    tabs.create_tab_group(NUM_TABS, GROUP_NAME[0], tab_context_menu)
+
+    # Remove first tab from the tab group
+    first_tab = tabs.get_tab(1)
+    tabs.context_click(first_tab)
+    tab_context_menu.click_and_hide_menu("context-remove-tab-from-group")
+
+    # Verify tab is removed from the tab group
+    tabs.element_not_visible("tabgroup-overflow-count")
+
+    """
+     Step 3
+     Action:         Right-click the created Tab Group and select Ungroup Tabs.
+     Verification:   The Tab Group name and color is no longer displayed and all 
+                     tabs are no longer part of any group.
+    """
+
+    # Create a tab group
+    tabs.create_tab_group(NUM_TABS, GROUP_NAME[2], tab_context_menu)
+
+    # Right-click on the group and select Ungroup Tabs.
+    tabs.context_click("tabgroup-label")
+    tabs.click_and_hide_menu("tabgroup-ungroup-tabs")
+
+    # Verify tab group is no longer there
+    tabs.element_not_visible("tabgroup-label")
+
+    """
+     Step 2
+     Action:         Grab another tab and move it beyond a Tab that is outside the group.
+     Verification:   The selected tab is no longer part of that Tab group.
+    """
+
+    # Create a tab group
+    tabs.create_tab_group(NUM_TABS, GROUP_NAME[1], tab_context_menu)
+
+    # Click the first tab, hold, move by offset, and then release
+    first_tab = tabs.get_tab(1)
+    tabs.set_chrome_context()
+    tabs.actions.click_and_hold(first_tab).move_by_offset(120, 0).release().perform()
+
+    # Verify tab is removed from the tab group
+    tabs.element_not_visible("tabgroup-overflow-count")