Question

我有以下代码显示侧栏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来显示/隐藏叠加层？

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

        }

    }
});

代码未经测试

打开或关闭XUL侧边栏firefox

1 个答案: