Может ли панель аддонов 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" 
}