फ़ायरफ़ॉक्स ऐड-ऑन पैनल का निर्धारण कर सकता है जब यह दिखाया गया है और छिपा हुआ है?

Question

मैं Tool API उपयोग कर रहा हूँ फ़ायरफ़ॉक्स DevTools करने के लिए एक पैनल जोड़ने के लिए।
मैं setup() और dispose() तरीकों आरंभीकरण और टियरडाउन को संभालने के लिए परिभाषित कर सकते हैं।

हालांकि मैं यह पता लगाने नहीं कर सकते निर्धारित करने के लिए कैसे है कि क्या पैनल वर्तमान में दृश्यमान है, या जब यह दृश्यता बदल जाता है। क्या यह घटना कहीं उजागर हुई है?

स्पष्ट होने के लिए, मैं केवल यह जानना चाहता हूं कि मेरे पैनल के लिए। तो मुझे पता है कि जब मेरे पैनल दिखाई देने लगता है चाहते हैं, या जब उपयोगकर्ता उदा को दूर स्विच तत्व टैब।

Answer 1

dev/panel API आपके पैनल की दृश्यता में बदलाव होने पर आपको सूचित करने के लिए एक विधि का खुलासा नहीं करता है। हालांकि, आप एपीआई के आसपास जा सकते हैं और सूचित किया जा सकता है कि दृश्यता बदल गई है।

डेवलपर टूल टूलबॉक्स के भीतर एक्सटेंशन द्वारा बनाए गए पैनल की दृश्यता में परिवर्तन होने पर नीचे दिए गए कोड को panelVisibilityChangedState फ़ंक्शन को कॉल किया गया है। अनुरोध के अनुसार, यह केवल विस्तार द्वारा जोड़े गए पैनल की स्थिति है। इस ऐड-ऑन मल्टीप्रोसेस फ़ायरफ़ॉक्स डेवलपर संस्करण, संस्करण 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" 
}