Skip to content
This repository has been archived by the owner on Nov 21, 2020. It is now read-only.

Interactions

Jump to bottom
arnaud edited this page Jul 3, 2011 · 21 revisions

Interactions diagram

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


(open diagram)

There are two types of interactions:

  • Browser interactions
  • Dashboard interactions

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

Browser interactions Dashboard interactions
BI01 – Create a window DI01 – Create a new group
BI02 – Focus a window DI02 – Rename a group
BI03 – Close a window DI03 – Resize a group
BI04 – Attach a tab to a window DI04 – Move a group
BI05 – Create a tab DI05 – Close a group
BI06 – Detach a tab from a window DI06 – Move a tab to the dashboard
BI07 – Move a tab within a window DI07 – Reorder a tab within a group
BI08 – Close a tab DI08 – Move a tab to an existing group
BI09 – Select a tab DI09 – Close a tab
BI10 – Update a tab DI10 – Open all tabs of a group
BI11 – Click on the extension action button   DI11 – Open a single tab of a group
BI12 – Use the extension shortcut key DI12 – Create a new tab

(see the implementation progress)

Browser interactions

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

BI01 – Create a window

Sequence diagram:


(open 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:


(open 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:

  1. The user attaches a tab to a window
  2. The browser sends a request to the background page
  3. The background page updates the tab’s window and index in the database
  4. The background page sends a request to the dashboard
  5. The dashboard moves the tab from its former window to its new one

BI05 – Create a tab

Sequence diagram:


(open 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:

  1. The user detaches a tab from its window
  2. The browser sends a request to the background page
  3. The background page keeps track of the currently dragged tab

BI07 – Move a tab within a window

Sequence diagram:

TBD

Steps:

TBD

BI08 – Close a tab

Sequence diagram:


(open 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:


(open 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:


(open 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

Sequence diagram:


(open diagram)

Steps:

  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

Sequence diagram:


(open diagram)

Steps:

  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

Sequence diagram:


(open diagram)

Steps:

  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

Sequence diagram:


(open diagram)

Steps:

  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

Sequence diagram:


(open diagram)

Steps:

  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

Sequence diagram:


(open diagram)

Steps:

  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

Sequence diagram:


(open diagram)

Steps:

  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

Sequence diagram:


(open diagram)

Steps:

  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

Sequence diagram:


(open diagram)

Steps:

  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

Sequence diagram:


(open diagram)

Steps:

  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

Sequence diagram:


(open diagram)

Steps:

  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

DI12 – Create a new tab

Sequence diagram:


(open diagram)

Steps:

  1. The user clicks on the “new tab” icon of 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 tab in the corresponding window, and focus it

The creation of the tab in the database and in the dashboard is handled by “BI05 – Create a tab”.

Clone this wiki locally