gpt4 book ai didi

javascript - Firefox 插件面板可以确定何时显示和隐藏吗?

转载 作者:数据小太阳 更新时间:2023-10-29 04:50:37 24 4
gpt4 key购买 nike

我正在使用 Tool API将面板添加到 Firefox DevTools。
我可以定义 setup()dispose() 方法来处理初始化和拆卸。

但是我不知道如何确定面板当前是否可见,或者何时更改可见性。这个事件是否暴露在某处?

明确地说,我只想知道我的面板。所以我想知道我的面板何时可见,或者用户何时切换到例如元素选项卡。

最佳答案

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 }
});

data/blank-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"
}

关于javascript - Firefox 插件面板可以确定何时显示和隐藏吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39172877/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com