Enhance Feature of Mozilla Firefox Tab Grouping

1
Enhance Feature of Mozilla Firefox - Tab Grouping

• Iris Lai
• Jared Haines
• John,Chun-Hung,Chiu
• Josh Fairhead

August 3, 2007
2
Tab Grouping

• Problem too many tabs can become difficult to
  navigate
• Proposed solution add functionality to group
  tabs by
• Domain
• File type

3
Tab Grouping in Firefox
4
Approach 1 - Add Grouping Component to UI
Definition Files

• This modification should only impact one file in
  the UI layer mozilla/toolkit/content/widgets/
  tabbrowser.xml.

5
Approach 1 (cont.)

• Three operations need to be implemented
• Grouping/ungrouping open tabs
• Adding a new tab to a group
• Switching between groups
• One new object the group container

6
Approach 1 (cont.)

• The current tab container structure

7
Approach 1 (cont.)

• Proposed modification to the tab container
  structure

8
Approach 2 - Add Tab Grouping Extension

• XUL Overlays are a way of attaching other UI
  widgets to a XUL document at run time.
• A XUL Overlay is a .xul file that specifies XUL
  fragments to insert at specific merge points
  within a "master" document. These fragments can
  specify widgets to be inserted, removed, or
  modified.

9
Approach 2 (cont.)

• Basic idea is to attach overlay .xul file to
  browser.xul (master document) so tab grouping UI
  widgets is built everytime we start the browser.
• Create overlay .js file which will bound
  functionalities to user actions upon tab grouping
  UI.

10
Approach 2 (cont.)

• Tab Grouping Diagram

11
Approach 2 (cont.)

• Basics of DOM Element properties
• attributes can add attributes into the DOM
  node
• childNodes can Inserts a new node
  "newElement" as a child node of the current
  node.

12
Approach 2 (cont.)

• Everytime user create new group, a element
  Group will be created and insert into DOM tree.
• Group.name
• Group.id
• Everytime user create tab, a element tab is
  generated as usual, but adding 2 more attributes
  into tab element
• Tab.Group_name
• Tab.Group_id

13
Approach 2 (cont.)

• When user clicks on Group that already exists,
  basically just search all existing tabs group id
  and group name
• The matched tabs will be shown on the original
  tab bars.
• Click on a tab, the web page will be displayed

14
SAAM Architectural Analysis

• Stakeholders
• User
• Developer
• Maintainer
• Scenarios
• User selects to group tabs (indirect)
• User selects to ungroup tabs (indirect)
• Developer implements the enhancement (indirect)
• Maintainer modifies or removes the enhancement
  (indirect)

15
SAAM Architectural Analysis - First Approach

• Potential risks
• Implementation Risks
• Interactions with the current tab feature
• Interactions with other features
• Tab grouping may produce unexpected behaviour in
  Firefoxs saved session functionality
• Maintenance Risks
• Enhancement will be tightly coupled with the
  current tab feature
• Implementation will affect multiple methods
  within tabbrowser.xml
• Modification will require retesting the original
  tab feature

16
SAAM Architectural Analysis - Second Approach

• Potential risks
• Implementation Risks
• it might cause problems when UI elements talk to
  each other, which include Tabs, browser DOM tree,
  new Group elements.
• Maintenance Risks
• The maintenance risk of second approach is very
  low.
• Performance Risks
• The Firefox browser might be slowed down since
  extension must be read every time a browser is
  open.

17
Reveal Scenario Interactions

• Testing the enhancement
• Must pass test cases developed for the original
  tab feature
• Must also pass test cases developed for the
  enhanced tab feature
• Test general tabbing and grouping behaviors
• Test saving sessions while tab grouping is
  enabled/disabled.
• Test tabs and groups displays

18
Generate Overall Evaluation
19
Conclusion

• The first approach has better performance and
  readability.
• The second approach has better maintainability
  and reusability.
• Both approaches have the same reliability
  problems.

20
Q AThank you!