Czy panel dodatku Firefox może określić, kiedy jest pokazywany i ukryty?

Question

Używam Tool API, aby dodać panel do Firefox DevTools.
Potrafię zdefiniować metody setup() i dispose(), aby poradzić sobie z inicjalizacją i przestojem.

Jednak nie wiem, jak określić, czy panel jest obecnie widoczny, czy też zmienia widoczność. Czy to wydarzenie jest gdzieś wystawione?

Dla jasności, chcę tylko wiedzieć, że dla mój panel. Chcę wiedzieć, kiedy mój panel stanie się widoczny, lub gdy użytkownik przełączy się na np. zakładka Elementy.

Answer 1

Urządzenie dev/panel API nie udostępnia metody powiadamiania użytkownika o zmianie widoczności panelu. Możesz jednak obejść interfejs API i poinformować go, że widoczność się zmieniła.

Poniższy kod wywołuje funkcję panelVisibilityChangedState przy zmianie widoczności panelu utworzonego przez rozszerzenie w Przyborniku narzędzi deweloperskich. Zgodnie z życzeniem jest to tylko stan panelu dodany przez rozszerzenie. Ten dodatek został przetestowany podczas pracy z wieloprocesowym programem Firefox Developer Edition, wersja 50.0a2. Ten kod jest oparty na 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 } 
}); 

dane/pusty-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" 
}