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

Sequence diagram:

Steps:

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

Sequence diagram:

TBD

Steps:

TBD

BI03 – Close a window

Sequence diagram:

Steps:

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

Sequence diagram:

TBD

Steps:

TBD

BI05 – Create a tab

Sequence diagram:

Steps:

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

Sequence diagram:

TBD

Steps:

TBD

BI07 – Move a tab within a window

Sequence diagram:

TBD

Steps:

TBD

BI08 – Close a tab

Sequence diagram:

Steps:

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

Sequence diagram:

Steps:

1. The user selects a tab
2. The browser sends a request to the background page
3. The background page captures the current tab and inserts/updates its preview it in the database
4. The background page sends a request to the dashboard
5. The dashboard updates the preview of the corresponding tab(s)

BI10 – Update a tab

Sequence diagram:

Steps:

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 and preview

BI11 – Click on the extension action button

Sequence diagram:

TBD

Steps:

When clicking on the extension action button, the Tab Sugar dashboard pops out.
It behaves differently depending on the current state of the browser’s current window:

• if the window already has a Tab Sugar dashboard opened, it is focused and reloaded
• if the window has no Tab Sugar dashboard opened yet:
  • if the window’s current tab is a “new tab”, then this tab is reused for displaying the Tab Sugar dashboard
  • if not, then the Tab Sugar dashboard is opened as a new tab, and focused

BI12 – Use the extension shortcut key

Sequence diagram:

TBD

Steps:

When using the extension shortcut key, the Tab Sugar dashboard pops out.
Behavior is the same as in “BI11 – Click on the extension action button”

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