Javascript 打开或关闭XUL侧边栏firefox

我有以下显示侧栏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>

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

无动画：

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';

        }

    }
});

带动画：

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';

        }

    }
});

代码未经测试