Firefox附加面板可以確定何時顯示和隱藏？

我正在使用Tool API將面板添加到Firefox DevTools。
我可以定義setup()和dispose()方法來處理初始化和拆卸。Firefox附加面板可以確定何時顯示和隱藏？

但是我無法弄清楚如何確定面板當前是否可見，或者當它改變了可見性。這個事件是否暴露在某個地方？

要說清楚，我只想知道對於我的面板。所以我想知道我的面板何時變得可見，或者當用戶切換到例如元素選項卡。

2016-08-26 Dan Abramov

這將幫助你提供一個[mcv e]它顯示一個基本面板。這是您已擁有的代碼，我們必須重新創建代碼才能開始測試/調查。 – Makyen

我在詢問一個公共API，而不是關於由於我的代碼中的錯誤或類似情況而遇到的問題。關於創建最小Firefox擴展需要什麼，我沒有完整的上下文，但我認爲任何可以在Web上找到的教程都可以。 –

dev/panel API未公開面板的可見性更改時通知您的方法。但是，您可以繞過API並通知可見性已更改。

下面的代碼在Developer Tools Toolbox中的擴展創建面板的可見性更改時調用功能panelVisibilityChangedState。根據要求，這只是擴展程序添加的面板狀態。此附件在運行多進程Firefox開發者版本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": "[email protected]", 
    "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" 
}

來源

2016-08-27 06:51:22 Makyen

Firefox附加面板可以確定何時顯示和隱藏？

回答

相關問題