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"
}

Firefox插件面板可以确定何时显示和隐藏？

1 个答案: