Panorama:TabGroupsAPI: Difference between revisions

 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
The purpose of this TabGroups API is to provide a simple storage for Panorama and its tab groups. Other add-ons which would like to access tab groups' data can use this API to do that.
= Schema =
= Schema =


== Compatibility ==
== Compatibility ==
We are planning to make it compatible with Firefox 12 (not confirmed yet)


== Example ==
== Example ==


<pre>
An example of tab groups' data stored in session storage for Panorama:
{windows: [{
 
<pre>{windows: [{
   tabs: [
   tabs: [
    {entries: [{url: "about:mozilla"}]},
     {entries: [{url: "http://example.com/#1"}],
     {entries: [{url: "http://example.com/#1"}],
     extData: {"tabgroups": "{\"group\": \"group1-id\", \"title\": \"first tab title\", \"url\": \"first tab url"}"}},
     extData: {"tabgroups": "{\"group\": \"group1-id\"}"}},
     {entries: [{url: "http://example.com/#2"}],
     {entries: [{url: "http://example.com/#2"}],
     extData: {"tabgroups": "{\"group\": \"group2-id\", \"title\": \"second tab title\",\"url\": \"second tab url"},
     extData: {"tabgroups": "{\"group\": \"group2-id\"}"}}
                              \"active\":\"last active tab in group it belongs\"}"}
   ],
   ],
   extData: {
   extData: {
     "tabgroups": "{\"group1-id\": {\"id\": \"group1-id\", \"title\": \"first title\", \"userSize\": {\"x\": 330, \"y\": 310},
     "tabgroups": "{\"group1-id\": {\"id\": \"group1-id\"}}, \"group2-id\": {\"id\": \"group2-id\"}}}"
                                        \"bounds\": {\"left\": 35, \"top\": 45, \"width\": 330, \"height\": 310}},  
                  \"group2-id\": {\"id\": \"group2-id\", \"title\": \"second title\", \"userSize\": {\"x\": 330, \"y\": 310},
                                        \"bounds": {\"left\": 450, \"top\": 45, \"width\": 330, \"height\": 310}},
                  \"additions\": {\"activeGroup\":\"group2-id\", \"showOnStartup\":true,
                                        \"pageBounds\" :{\"left\":0, \"top\": 0, \"width\": 1000, \"height\": 750}}}"
   }
   }
}]}
}]}
Line 29: Line 26:


=== Panorama ===
=== Panorama ===
Panorama uses this TabGroups API to access the session storage for storing and retrieving tab groups' data.
=== Vertical Tabs ===
=== Vertical Tabs ===
=== Tree Style Tabs ===
=== Tree Style Tabs ===


= API Description =
= API Description =


<pre>
To use the TabGroups API, you first need to import the code module into your JavaScript scope:
TabGroups
<pre>Components.utils.import("resource:///modules/TabGroups.jsm");
</pre>
Then you can obtain reference to it by simply accessing them from the TabGroups object exported by the code module. For example:
<pre>let allGroups = TabGroups.getGroups(); 
</pre>
'''Provided objects, methods and events'''
<pre>TabGroups
   [Methods]
   [Methods]
     createGroup(DOMWindow aWindow)
     TabGroup createGroup(DOMWindow aWindow)
     getGroups()
     TabGroup[] getGroups()
     getGroupsByWindow(DOMWindow aWindow)
     TabGroup[] getGroupsByWindow(DOMWindow aWindow)


   [Events]
   [Events]
Line 48: Line 53:
TabGroup
TabGroup
   [Properties]
   [Properties]
     id : string
     id: string
     title : string
     title: string
     tabs : xulTab[]
     tabs: xulTab[]
    storage : object


   [Methods]
   [Methods]
     addTab(xulTab aTab)
     void addTab(xulTab aTab)
     removeTab(xulTab aTab)
     void removeTab(xulTab aTab)
     close()
     void close()


   [Events]
   [Events]

Latest revision as of 05:00, 1 March 2012

The purpose of this TabGroups API is to provide a simple storage for Panorama and its tab groups. Other add-ons which would like to access tab groups' data can use this API to do that.

Schema

Compatibility

We are planning to make it compatible with Firefox 12 (not confirmed yet)

Example

An example of tab groups' data stored in session storage for Panorama:

{windows: [{
  tabs: [
    {entries: [{url: "http://example.com/#1"}],
     extData: {"tabgroups": "{\"group\": \"group1-id\"}"}},
    {entries: [{url: "http://example.com/#2"}],
     extData: {"tabgroups": "{\"group\": \"group2-id\"}"}}
  ],
  extData: {
    "tabgroups": "{\"group1-id\": {\"id\": \"group1-id\"}}, \"group2-id\": {\"id\": \"group2-id\"}}}"
  }
}]}

Applications

Panorama

Panorama uses this TabGroups API to access the session storage for storing and retrieving tab groups' data.

Vertical Tabs

Tree Style Tabs

API Description

To use the TabGroups API, you first need to import the code module into your JavaScript scope:

Components.utils.import("resource:///modules/TabGroups.jsm");

Then you can obtain reference to it by simply accessing them from the TabGroups object exported by the code module. For example:

let allGroups = TabGroups.getGroups();  

Provided objects, methods and events

TabGroups
  [Methods]
    TabGroup createGroup(DOMWindow aWindow)
    TabGroup[] getGroups()
    TabGroup[] getGroupsByWindow(DOMWindow aWindow)

  [Events]
    tabgroup-added
    tabgroup-removed
    window-closing

TabGroup
  [Properties]
    id: string
    title: string
    tabs: xulTab[]

  [Methods]
    void addTab(xulTab aTab)
    void removeTab(xulTab aTab)
    void close()

  [Events]
    rename
    tab-added
    tab-removed
    close