Firefoxアドオンパネルが表示され、非表示になっているかどうかを判断できますか？

Question

私はTool APIを使用してFirefox DevToolsにパネルを追加しています。
初期化と分解を処理する方法は、setup()とdispose()と定義できます。

しかし、パネルが現在表示されているかどうか、または表示が変更されたかどうかを判断する方法はわかりません。このイベントはどこかに公開されていますか？

明確にするため、私はの私のパネルについて知りたいだけです。だから私は自分のパネルがいつ見えるようになったのか、あるいはユーザーがいつに切り替えるかを知りたい。 [要素]タブをクリックします。

Answer 1

dev/panel APIは、パネルの表示が変更されたときに通知を受ける方法を公開していません。ただし、APIを参照して、可視性が変更されたことを通知することができます。

次のコードは、パネルの可視性の変化は、開発者ツール、ツールボックス内の拡張によって作成された機能panelVisibilityChangedStateを呼び出します。要求されたとおり、これは拡張機能によって追加されたパネルの状態のみです。このアドオンは、マルチプロセスFirefox Developer Edition、バージョン50.0a2の実行中にテストされました。

このコードはMDN repl-panel example available on GitHubに基づいています。

main.js：

//This code is based on the MDN Dev Tools panel example available at: 
// https://github.com/mdn/repl-panel 

//Require the needed SDK modules 
const { Panel } = require("dev/panel"); 
const { Tool } = require("dev/toolbox"); 
const { Class } = require("sdk/core/heritage"); 
const self = require("sdk/self"); 
var myRadio; 
var devToolsToolbar; 
var devToolsToolboxTabs; 
var pickerContainer; 
var panelIsVisible=false; 

function panelVisibilityChangedState(isVisible){ 
    //This function may be called slightly before the state change actually occurs. 
    panelIsVisible=isVisible; 
    console.log('Dev Tools Panel Changed State: visibility is now: ' + isVisible); 
} 

function devToolsClickHandler(event){ 
    //The event fires before the value of the 'selected' attribute changes in response to 
    // this click, except when the event fires on the pick element. In that case, the 
    // 'selected' attribute is accurately 'false'. 
    let isSelected = myRadio.getAttribute('selected') === 'true'; 
    let pickElementContains = pickerContainer.contains(event.target); 
    if(!devToolsToolboxTabs.contains(event.target) && !pickElementContains){ 
     //Of the controls not in the devToolsToolboxTabs, only the pickElement changes 
     // the state of this panel being shown. The exception to this is the close 
     // button, but closing is detected via the panel's dispose method. 
     return; 
    }//else 
    let doesContain = myRadio.contains(event.target); 
    if((pickElementContains && panelIsVisible) 
     || (doesContain && !isSelected) || (!doesContain && isSelected)) { 
     panelVisibilityChangedState(doesContain); 
    } 
} 

//Define a REPLPanel class that inherits from dev/panel 
const REPLPanel = Class({ 
    extends: Panel, 
    label: "Visi", 
    tooltip: "Demo Dev Tool Panel Visibility Notification", 
    icon: self.data.url("noIcon.png"), 
    url: self.data.url("blank-panel.html"), 
    setup: function(options) { 
    //Remember the button which was clicked to open this panel (actually a <radio>) 
    myRadio = require("sdk/window/utils").getFocusedElement() 
    //For convenience and to speed up the event handler, remember three elements. 
    // Obtain these elements using IDs, or unique class when no ID is available. 
    // This should be a bit more stable than using the location in the DOM 
    // relative to myRadio. 
    devToolsToolbar = myRadio.ownerDocument.querySelector('.devtools-tabbar'); 
    //An alternate method of finding the Dev Tools toolbar: 
    //devToolsToolbar = myRadio.ownerDocument.getElementById('toolbox-tabs').parentNode; 
    //Another alternate method of finding the Dev Tools toolbar: 
    //devToolsToolbar = myRadio.parentNode.parentNode; 
    devToolsToolboxTabs = devToolsToolbar.querySelector('#toolbox-tabs'); 
    pickerContainer = devToolsToolbar.querySelector('#toolbox-picker-container'); 
    devToolsToolbar.addEventListener('click',devToolsClickHandler,false); 
    }, 
    dispose: function() { 
    //Dev Tools panel is destroyed. Visibility is, obviously, false 
    if(panelIsVisible){ 
     panelVisibilityChangedState(false); 
    } 
    }, 
    onReady: function() { 
    //The panel is now visible and ready. If desired, this call to 
    // panelVisibilityChangedState could be placed in the 'setup' function. 
    panelVisibilityChangedState(true); 
    } 
}); 
exports.REPLPanel = REPLPanel; 

//Create a new tool, initialized with the REPLPanel's constructor 
const replTool = new Tool({ 
    panels: { repl: REPLPanel } 
}); 

データ/空白-panel.html：

<html> 
    <head> 
    <meta charset="utf-8"> 
    </head> 
    <body> 
    This is a blank panel 
    </body> 
</html> 

package.json：それがために

{ 
    "name": "dev-panel-visibility-notification", 
    "title": "dev-panel-visibility-notification", 
    "id": "dev-panel-visibility-notification@example", 
    "description": "Demonstrates calling a function when the visibillity of the add-on's Dev Tools panel changes.", 
    "author": "Makyen", 
    "license": "MPL 2.0", 
    "version": "0.1.0", 
    "main": "main.js" 
}