The Japanese version is also available at modest.

Recently Mozilla Labs Jetpack site was updated and Jetpack Reboot was finally revealed to the public. However, not a few people might think that “What’s Jetpack Reboot? How does it differ from the old Jetpack?”.

Briefly speaking, the old Jetpack (Jetpack Prototype) which has being developed as a Firefox extension, will disappear in the near future, and now it is being replaced to the new Jetpack (Jetpack Reboot) as a brand-new SDK to build new type of extensions.

This post explains the difference between Jetpack Prototype and Jetpack Reboot with three points of view: concepts, architecture and development.

(1) Concepts

There’s no much difference between the basic concepts of both types of Jetpack. Jetpack Reboot has the following concepts as the superiority of extensions utilizing Jetpack Reboot SDK in comparing with the existing commonly-distributed extensions:

• Web developers can easily develop in their familiar languages: HTML, JavaScript and CSS
• Rapid development using rich API library to ease our debug and maintenance
• A robust security model to keep users away from their security risk
• No need to restart Firefox when installing and uninstalling

(2) Architecture

See the image below which describes the architecture of both types of Jetpack.

In Jetpack Prototype, you need to install Jetpack “extension” which consists of a runtime and API library, and each small program called Jetpack Feature works on Jetpack extension. There seemed to be a plan to integrate Jetpack extension into Firefox. However, it may cause a problem that the integration prevents the agile development of the evolving API library. Additionally, since all features share one API library, it may cause a compatibility problem if each feature uses a different version of API.

Meanwhile in Jetpack Reboot, Firefox doesn’t hold the API related to Jetpack, and each feature becomes a package including the API and bootloader. This architecture enables the agile API development and the API included in each package are not interfered even if they have differing versions. We can distribute the package as an XPI installer same as the existing XUL-based extension. So, we can install and uninstall it in a same way of the existing extension. Additionally, in the future the Firefox extensions manager will be improved so that we will be able to install and uninstall the packages which have Jetpack bootloader without restarting Firefox.

(3) Development

Shifting from Jetpack Prototype to Jetpack Reboot changes the style of extension development. In Jetpack Prototype, we can easily build a feature by making single JavaScript program. Meanwhile in Jetpack Reboot, we need to utilize a development environment called Jetpack SDK and make a package of JavaScript program and JSON-formatted manifest file in the appropriate folder structure. The current version of SDK 0.1 is a command line tool made with Python language. Although the new development style seems to be more likely for the advanced users than the old one, there is a plan to make it easier with a GUI development environment called FlightDeck which works on your browser.

Note that the current SDK doesn’t have rich API to build working extensions like Jetpack Features, since it is in an early stage. I will post a step-by-step tutorial to make a package utilizing the SDK on Windows 7 before too long.

modest に投稿した記事と同内容です。

Tab Flick 拡張機能 のポップアップは、 Firefox 3.6 以降の Ctrl+Tab によるタブ切り替えパネルのような半透明の見た目となっています。

ここでは、そこに至るまでの実装の経緯を記しました。なお、簡単のためコードの一部は実際とは異なるものとなっています。

第1段階

まず、 browser.xul にオーバーレイし、 #mainPopupSet をマージポイントとして新しい xul:panel 要素を追加します。

<popupset id="mainPopupSet">
    <panel id="tabFlickPanel" style="width: 200px; height: 200px;" />
</popupset>

openPopup あるいは openPopupAtScreen メソッドでこの xul:panel 要素を開くと、当然見た目はシンプルなポップアップとなります。

第2段階

次に、 xul:panel 要素に対して KUI-panel クラスを指定します。 KUI-panel クラスは browser.xul にて読み込まれているスタイルシート (browser.css) にて定義されています。したがって、 browser.xul へオーバーレイした XUL 内であれば、特にスタイルを定義することなく利用可能となります。

    <panel id="tabFlickPanel" class="KUI-panel" style="width: 200px; height: 200px;" />

これで Windows XP などでの Ctrl+Tab によるタブ切り替えパネルと同じ、黒い半透明の角丸ポップアップとなります。
KUI-panel クラスのスタイルは Firefox 3.5 に同梱されたスタイルシート (browser.css) でも定義済みですので、 Firefox 3.5 でも有効となります。

第3段階

さらに、 xul:panel 要素へ以下のような内容のスタイルシートを適用します。

#tabFlickPanel:-moz-system-metric(windows-compositor) {
    background: transparent;
    -moz-appearance: -moz-win-glass;
    -moz-border-radius: 0;
    border: none;
}

すると、 Windows Vista または Windows 7 で Windows Aero が有効な場合、Aero Glass 効果のある半透明のポップアップとなります。

第4段階

しかし、ここでひとつ問題が生じます。詳しい理由はわかりませんが、ポップアップの右下角に余計な枠線が表示されてしまいます。
これを解決するには、なぜか xul:panel 要素の collapsed を以下のようにして切り替えてあげる必要があります。

    <panel id="tabFlickPanel" class="KUI-panel" style="width: 200px; height: 200px;"
          collapsed="true"
          onpopupshown="this.collapsed = false;"
          onpopuphiding="this.collapsed = true;" />

これでようやく解決しました。

この方法は裏技的なものですので、拡張機能などでご利用の際はご注意ください。