열기 또는 닫기 XUL 사이드 파이어 폭스

Question

I 사이드 바 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을 어떻게 사용합니까? 애니메이션

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

    } 
}); 

: 없음 애니메이션

Answer 1

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

     } 

    } 
}); 

코드는 테스트되지