打开或关闭 XUL 侧边栏 firefox答案

【问题标题】：Open or close XUL sidebar firefox打开或关闭 XUL 侧边栏 firefox
【发布时间】：2014-11-27 14:58:05
【问题描述】：

我有以下显示侧边栏 XUL 窗口的代码：

<overlay id="my-plugin"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">  
  <script type="application/x-javascript"
    src="chrome://my-plugin/content/js/extension.js" />
  <window id="main-window">
    <deck flex="1" id="tab-view-deck">
      <vbox flex="1" id="browser-panel">
        <deck id="content-deck" flex="1">
          <hbox id="browser" flex="1">
            <splitter />
            <browser id="my-plugin-sidebar-browser"
              src="chrome://my-plugin/content/views/index.html"
              width="400px"
            ></browser>
          </hbox>
        </deck>
      </vbox>
    </deck>
  </window>
</overlay>

当我运行插件时，覆盖显示正常 - 浏览器加载，我可以看到覆盖已经准备好。

但是，我想在单击工具栏按钮时显示叠加层。工具栏按钮是使用以下方法创建的：

CustomizableUI.createWidget({
  id: "my-plugin-toolbar-button",
  defaultArea: "nav-bar",
  removable: true,
  label: "My Plugin",
  tooltiptext: "Open the sidebar overlay!",
  onClick: onClick
})

onClick 现在只是将一些脚本注入到页面中。如何使用相同的onClick 显示/隐藏叠加层？

【问题讨论】：

标签： javascript plugins firefox-addon xul

【解决方案1】：

没有动画：

CustomizableUI.createWidget({
    id: 'loryvr_cui',
    defaultArea: CustomizableUI.AREA_NAVBAR,
    label: 'Repeat Video',
    tooltiptext: 'Repeat at ListenOnRepeat.com',
    onCommand: function(aEvent) {
        let aDOMWindow = aEvent.target.ownerDocument.defaultView;
        var mySidebar = aDOMWindow.getElementById('my-plugin-sidebar-browser');
        if (mySidebar.hasAttribute('hidden')) {
            mySidebar.removeAttribute('hidden');
        } else {
            mySidebar.setAttribute('hidden', 'true');
        }

    }
});

带动画：

var mySidebarWidth = 0;
CustomizableUI.createWidget({
    id: 'loryvr_cui',
    defaultArea: CustomizableUI.AREA_NAVBAR,
    label: 'Repeat Video',
    tooltiptext: 'Repeat at ListenOnRepeat.com',
    onCommand: function(aEvent) {
        let aDOMWindow = aEvent.target.ownerDocument.defaultView;
        var mySidebar = aDOMWindow.getElementById('my-plugin-sidebar-browser');
        if (mySidebar.hasAttribute('hidden')) {
            //assume width is 0 and mySidebarWidth is set and transition was already set
            mySidebar.removeAttribute('hidden');
            mySidebar.style.width = mySidebar.boxObject.width + 'px';
        } else {
            mySidebarWidth = mySidebar.boxObject.width;
            mySidebar.style.transition = 'width 300ms';
            mySidebar.style.width = mySidebar.boxObject.width + 'px';
            mySidebar.addEventListener('transitionend', function() {
                mySidebar.removeEventListener('transitionend', arguments.callee, false);
                mySidebar.setAttribute('hidden', 'true'); //do this so users can't get int our sidebyar by pressing tab key repeatedly
            }, false);
            mySidebar.style.width = '0px';

        }

    }
});

代码未经测试

【讨论】：