Open or close XUL sidebar firefox

Question

I have the following code that displays a sidebar XUL window:

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

The overlay displays fine when I run the plugin - the browser loads and I can see the overlay already prepared.

However, I wanted to display the overlay on click of a toolbar button. The toolbar button is created using:

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

The onClick right now just injects some scripts into the page. How do I use the same onClick to show/hide the overlay?

Answer 1

With no animation:

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

    }
});

With animation:

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

        }

    }
});

codes are untested