Interactions

Interactions diagram

The following diagram is a representation of the possible interactions between each components:

There are two types of interactions:

• Browser interactions
• Dashboard interactions

Here is the complete list of interactions that exist for both types:

Browser interactions:

1. Create a window
2. Focus a window
3. Close a window
4. Attach a tab to a window
5. Create a tab
6. Detach a tab from a window
7. Move a tab within a window
8. Close a tab
9. Select a tab
10. Update a tab
11. Click on the extension action button
12. Use the extension shortcut key

Dashboard interactions:

1. Create a new group
2. Rename a group
3. Resize a group
4. Move a group
5. Close a group
6. Move a tab to the dashboard
7. Reorder a tab within a group
8. Move a tab to an existing group
9. Close a tab
10. Open all tabs of a group
11. Open a single tab of a group

Browser interactions

Below are listed the browser interactions that apply to main use cases:

BI01 – Create a window

Case A “the window opens with a normal page as a tab”:

1. The user opens a new window (Ctrl+N)
2. The browser sends a request to the background page
3. The background page inserts the new group and its tab in the database
4. The background page sends a request to the dashboard
5. The dashboard creates the corresponding group and its tab

Case B “the window opens with a special page as a tab”:

Nothing happens

BI02 – Focus a window

TBD

BI03 – Close a window

1. The user closes a window (Alt+F4)
2. The browser sends a request to the background page
3. The background page deletes the corresponding group and its tabs from the database
4. The background page sends a request to the dashboard
5. The dashboard hides and deletes the corresponding group and its tabs

BI04 – Attach a tab to a window

TBD

BI05 – Create a tab

Case A “the tab opens with a normal page”:

1. The user opens a new tab (Ctrl+T)
2. The browser sends a request to the background page
3. The background page inserts the new tab in the database
4. The background page sends a request to the dashboard
5. The dashboard adds the new tab into the corresponding group

Case B “the tab opens with a special page”:

Nothing happens

BI06 – Detach a tab from a window

TBD

BI07 – Move a tab within a window

TBD

BI08 – Close a tab

1. The user closes a tab (Ctrl+W)
2. The browser sends a request to the background page
3. The background page deletes the corresponding tab from the database
4. The background page sends a request to the dashboard
5. The dashboard hides and deletes the corresponding tab

BI09 – Select a tab

TBD

BI10 – Update a tab

1. The user changes the URL of a tab, navigates through a link, browse the web
2. The browser sends a request to the background page
3. The background page updates the corresponding tab in the database
4. The background page sends a request to the dashboard
5. The dashboard changes the corresponding tab display informations

BI11 – Click on the extension action button

TBD

BI12 – Use the extension shortcut key

TBD

Dashboard interactions

Below are listed the browser interactions that apply to main use cases:

DI01 – Create a new group

1. The user creates a new group in the dashboard
2. The dashboard sends a request to the background page
3. The background page inserts the new group in the database

DI02 – Rename a group

1. The user renames a group in the dashboard
2. The dashboard sends a request to the background page
3. The background page renames the group in the database

DI03 – Resize a group

1. The user resizes a group in the dashboard
2. The dashboard sends a request to the background page
3. The background page updates the group sizes in the database

DI04 – Move a group

1. The user moves a group in the dashboard
2. The dashboard sends a request to the background page
3. The background page updates the group coordinates in the database

DI05 – Close a group

1. The user closes a group in the dashboard
2. The dashboard sends a request to the background page
3. The background page sends a request to the browser to close the corresponding window
4. On success, the background page deletes the group from the database

DI06 – Move a tab to the dashboard

1. The user moves a tab to the dashboard
2. The dashboard sends a request to the background page
3. The background page sends a request to the browser to close the corresponding tab
4. On success, the background page inserts a new group and updates the tab’s group id in the database

DI07 – Reorder a tab within a group

1. The user reorders a tab within a group
2. The dashboard sends a request to the background page
3. The background page sends a request to the browser to move the corresponding tab from its current position to its new position
4. On success, the background page updates the tab’s index in the database

DI08 – Move a tab to an existing group

1. The user moves a tab to an existing group
2. The dashboard sends a request to the background page
3. The background page sends a request to the browser to move the corresponding tab from its current window to the destination window
4. On success, the background page updates the tab’s group id in the database

DI09 – Close a tab

1. The user closes a tab
2. The dashboard sends a request to the background page
3. The background page sends a request to the browser to close the corresponding tab
4. On success, the background page deletes the tab from the database

DI10 – Open all tabs of a group

1. The user clicks on a tab within a group
2. The dashboard sends a request to the background page
3. The background page sends a request to the browser to create a new window with all the group tabs, and to focus the clicked tab

DI11 – Open a single tab of a group

1. The user ctrl+clicks on a tab within a group
2. The dashboard sends a request to the background page
3. The background page sends a request to the browser to create a new window with all the group tabs, and to focus the clicked tab