Как создать плагин Firefox с помощью одной кнопки (такой же, как Echofon)?

Question

Я хочу, как создать Плагин Firefox с настраиваемым компактным меню, аналогичным окну Firefox .Только сейчас я видел в Эхофоне.Вот изображение, и оно выглядит потрясающе!

Итак, скажите, пожалуйста, как мы можем создать это в окне плагина.

Answer 1

Я не думаю, что есть простое решение.Нужно удалить строку заголовка окна по умолчанию (через атрибут chromemargin ) и заменить его своим собственным (используя <xul:titlebar>).И затем он должен быть стилизован под все операционные системы и темы (обычная Windows XP, классическая тема Windows XP, Vista / 7 с Aero, Vista / 7 без Aero, ...).Вы можете получить представление о количестве необходимого кода, посмотрев на chrome://browser/skin/browser.css, выполнив поиск «appmenu-button» и «titlebar».Помните, что вы видите стили только для одной ОС - Firefox использует разные темы для разных операционных систем.

Я собрал пример, который в основном работает на Windows 7 с Aero (стрелку раскрывающегося списка нужно заменить надругое изображение и положение кнопки по-прежнему неправильно, когда окно развернуто).Само окно (test.xul) выглядит следующим образом:

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="test.css" type="text/css"?>

<window
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="Test window"
    width="800"
    height="500"
    chromemargin="0,-1,-1,-1">
  <titlebar id="titlebar" allowevents="true">
    <button id="appmenu-button" type="menu" label="Test">
      <menupopup/>
    </button>
    <spacer id="titlebar-spacer" flex="1"/>
    <hbox id="titlebar-buttonbox">
      <toolbarbutton class="titlebar-button" id="titlebar-min"
          oncommand="window.minimize();"/>
      <toolbarbutton class="titlebar-button" id="titlebar-max"
          oncommand="window.windowState == 1 ? window.restore() : window.maximize();"/>
      <toolbarbutton class="titlebar-button" id="titlebar-close"
          oncommand="window.close();"/>
    </hbox>
  </titlebar>


  <description flex="1">window content</description>
</window>

И стили в test.css являются следующими (в основном, скопированы с browser.css):

:root {
  -moz-appearance: -moz-win-borderless-glass;
  background-color: transparent;
}

#appmenu-button:hover:active,
#appmenu-button[open] {
  border-radius: 0;
}
#appmenu-button {
  -moz-appearance: none;
  -moz-user-focus: ignore;
  background-clip: padding-box;
  border-radius: 0 0 4px 4px;
  color: white;
  text-shadow: 0 0 1px rgba(0,0,0,.7),
               0 1px 1.5px rgba(0,0,0,.5);
  font-weight: bold;
  padding: 0 1.5em .05em;
  margin: 2px 0 2px;
  background-image: -moz-linear-gradient(rgb(247,182,82), rgb(215,98,10) 95%);
  border: 2px solid rgba(83,42,6,.9);
  border-top-style: none;
  -moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.9);
  -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.9);
  -moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.9);
  margin-bottom: -1px; /* compensate white outer border */
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
              0 0 2px 1px rgba(255,255,255,.25) inset;
}
#appmenu-button:hover:not(:active):not([open]) {
  background-image: -moz-radial-gradient(center bottom, farthest-side, rgba(252,240,89,.5) 10%, rgba(252,240,89,0) 70%),
                    -moz-radial-gradient(center bottom, farthest-side, rgb(236,133,0), rgba(255,229,172,0)),
                    -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%);
  border-color: rgba(83,42,6,.9);
  box-shadow: 0 1px 0 rgba(255,255,255,.1) inset,
              0 0 2px 1px rgba(250,234,169,.7) inset,
              0 -1px 0 rgba(250,234,169,.5) inset;
}
#appmenu-button:hover:active,
#appmenu-button[open] {
  background-image: -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%);
  box-shadow: 0 2px 3px rgba(0,0,0,.4) inset,
              0 1px 1px rgba(0,0,0,.2) inset;
}

#appmenu-button > .button-box {
  border-style: none;
  padding: 0px;
  margin: 0px;
}

#titlebar-spacer {
  pointer-events: none;
}

#titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box;
  -moz-margin-end: 20px;
}
:root[sizemode="maximized"] #titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box-maximized;
}

#titlebar-min {
  -moz-appearance: -moz-window-button-minimize;
}
#titlebar-max {
  -moz-appearance: -moz-window-button-maximize;
}
:root[sizemode=maximized] #titlebar-max {
  -moz-appearance: -moz-window-button-restore;
}
#titlebar-close {
  -moz-appearance: -moz-window-button-close;
}

Iоткрыл окно с помощью следующей команды:

window.open("chrome://.../test.xul", "_blank", "chrome,all,centerscreen,resizable");

Это конечный результат: