javascript - 在 Firefox 中显示小部件

Question

我的 Firefox 插件使用小部件，当我单击它时，它会显示面板。下面是它的代码

var Widget = require("widget").Widget;
var tabs = require('tabs');
var data = require("sdk/self").data;
var panel = require("sdk/panel").Panel({
  contentURL: "about:blank",
  width: 200,
  height: 480,
  onHide: function(){
    panel.contentURL = data.url("loading.html")
  }
});
exports.main = function() {
    // Widget documentation: https://addons.mozilla.org/en-US/developers/docs/sdk/latest/modules/sdk/widget.html
    var widget = new Widget({
        id: "MobileView-widget-1",
        label: "MobileView",
        tooltip : "Start Mobile View",
        panel: panel,
        onClick: function() {
            panel.contentURL = "https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#activeTab";
        },
        contentURL: data.url("mobile.png")
    });
};

当我单击小部件时，它会显示其上方的面板，但是当焦点移出时，它会立即关闭并重新开始。我如何确保它不会在失去焦点时关闭，但我需要再次单击小部件以隐藏它。

Answer 1

Widget系统在Firefox 29中被删除，你现在必须使用这个:https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/ui

var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var self = require("sdk/self");

var button = ToggleButton({
  id: "my-button",
  label: "my button",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onChange: handleChange
});

var panel = panels.Panel({
  contentURL: self.data.url("panel.html"),
  onHide: handleHide
});

function handleChange(state) {
  if (state.checked) {
    panel.show({
      position: button
    });
  }
}

function handleHide() {
  button.state('window', {checked: false});
}