シングルボタンでFirefoxプラグインを作成するには（Echofonと同じですか？）

Question

私はどのように作成するカスタムコンパクトメニューのFirefoxプラグインは、Firefoxウィンドウと同じです。 ちょうど今、私はEchofonで見ました。ここにイメージがあり、それはすごく見える！

このように、私はプラグインウィンドウでどのように作成できるのか教えてください。

Answer 1

私は単純な解決策はないと思います。 1つは、デフォルトのウィンドウタイトルバー（chromemargin attribute経由）を削除し、それ自身で置き換える（<xul:titlebar>を使用）。そして、すべてのオペレーティングシステムとテーマ（Windows XPのレギュラー、Windows XPのクラシックテーマ、Vista/7のAero、Vista/7のAero、など）で正しく見えるようにスタイルを設定する必要があります。 chrome://browser/skin/browser.cssを見て、「appmenu-button」と「titlebar」を検索することで、必要なコード量の印象を得ることができます。 1つのOSのスタイルだけが表示されることに注意してください.Firefoxは異なるオペレーティングシステムに異なるテーマを使用します。

Aeroを使用してWindows 7で作業している例があります（ドロップダウン矢印を別のイメージに置き換える必要があり、ウィンドウが最大化されてもボタンの位置は間違っています）。ウィンドウ自体（test.xul）は次のようになります。

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
<?xml-stylesheet href="test.css" type="text/css"?> 

<window 
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 
    title="Test window" 
    width="800" 
    height="500" 
    chromemargin="0,-1,-1,-1"> 
    <titlebar id="titlebar" allowevents="true"> 
    <button id="appmenu-button" type="menu" label="Test"> 
     <menupopup/> 
    </button> 
    <spacer id="titlebar-spacer" flex="1"/> 
    <hbox id="titlebar-buttonbox"> 
     <toolbarbutton class="titlebar-button" id="titlebar-min" 
      oncommand="window.minimize();"/> 
     <toolbarbutton class="titlebar-button" id="titlebar-max" 
      oncommand="window.windowState == 1 ? window.restore() : window.maximize();"/> 
     <toolbarbutton class="titlebar-button" id="titlebar-close" 
      oncommand="window.close();"/> 
    </hbox> 
    </titlebar> 


    <description flex="1">window content</description> 
</window> 

そしてtest.cssでのスタイルは（ほとんどbrowser.cssからコピー）以下のとおりである。

:root { 
    -moz-appearance: -moz-win-borderless-glass; 
    background-color: transparent; 
} 

#appmenu-button:hover:active, 
#appmenu-button[open] { 
    border-radius: 0; 
} 
#appmenu-button { 
    -moz-appearance: none; 
    -moz-user-focus: ignore; 
    background-clip: padding-box; 
    border-radius: 0 0 4px 4px; 
    color: white; 
    text-shadow: 0 0 1px rgba(0,0,0,.7), 
       0 1px 1.5px rgba(0,0,0,.5); 
    font-weight: bold; 
    padding: 0 1.5em .05em; 
    margin: 2px 0 2px; 
    background-image: -moz-linear-gradient(rgb(247,182,82), rgb(215,98,10) 95%); 
    border: 2px solid rgba(83,42,6,.9); 
    border-top-style: none; 
    -moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.9); 
    -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.9); 
    -moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.9); 
    margin-bottom: -1px; /* compensate white outer border */ 
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 
       0 0 2px 1px rgba(255,255,255,.25) inset; 
} 
#appmenu-button:hover:not(:active):not([open]) { 
    background-image: -moz-radial-gradient(center bottom, farthest-side, rgba(252,240,89,.5) 10%, rgba(252,240,89,0) 70%), 
        -moz-radial-gradient(center bottom, farthest-side, rgb(236,133,0), rgba(255,229,172,0)), 
        -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%); 
    border-color: rgba(83,42,6,.9); 
    box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 
       0 0 2px 1px rgba(250,234,169,.7) inset, 
       0 -1px 0 rgba(250,234,169,.5) inset; 
} 
#appmenu-button:hover:active, 
#appmenu-button[open] { 
    background-image: -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%); 
    box-shadow: 0 2px 3px rgba(0,0,0,.4) inset, 
       0 1px 1px rgba(0,0,0,.2) inset; 
} 

#appmenu-button > .button-box { 
    border-style: none; 
    padding: 0px; 
    margin: 0px; 
} 

#titlebar-spacer { 
    pointer-events: none; 
} 

#titlebar-buttonbox { 
    -moz-appearance: -moz-window-button-box; 
    -moz-margin-end: 20px; 
} 
:root[sizemode="maximized"] #titlebar-buttonbox { 
    -moz-appearance: -moz-window-button-box-maximized; 
} 

#titlebar-min { 
    -moz-appearance: -moz-window-button-minimize; 
} 
#titlebar-max { 
    -moz-appearance: -moz-window-button-maximize; 
} 
:root[sizemode=maximized] #titlebar-max { 
    -moz-appearance: -moz-window-button-restore; 
} 
#titlebar-close { 
    -moz-appearance: -moz-window-button-close; 
} 

私は、次のコマンドを使用して窓を開け：

window.open("chrome://.../test.xul", "_blank", "chrome,all,centerscreen,resizable"); 

これが最終結果です。